chore: commented out portions of the code related to map layer functi…

…onality for potential future use.
Plant-for-the-Planet-org · Dec 24, 2024 · 732b4ab · 732b4ab
1 parent b9074b8
commit 732b4ab
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 85 deletions.
diff --git a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx
@@ -8,7 +8,7 @@ import styles from './MapFeatureExplorer.module.scss';
 // import { StyledSwitch } from './CustomSwitch';
 // import { YearRangeSlider } from '.';
 import { useTranslations } from 'next-intl';
-import themeProperties from '../../../../theme/themeProperties';
+// import themeProperties from '../../../../theme/themeProperties';
 import MapLayerControlPanel from './microComponents/MapLayerControlPanel';
 import ExploreDropdownHeaderMobile from './microComponents/ExploreDropdownHeaderMobile';
 
@@ -27,54 +27,54 @@ const MapSettings: FC<MapSettingsProps> = ({
 }) => {
   const tAllProjects = useTranslations('AllProjects');
   const tMaps = useTranslations('Maps');
-  const { primaryColorNew } = themeProperties;
-  const forestConfig = [
-    {
-      label: tMaps('layers.forestLayers.canopyHeight'),
-      color: undefined,
-      showDivider: true,
-      shouldRender: true,
-      additionalInfo: {
-        dataYears: 2018,
-        resolution: '1m',
-        description: 'Global canopy height between year 2018-2020',
-        underlyingData:
-          'Global Canopy Height Maps based on AI model (DinoV2) and remote sensing data (MAXAR and GEDI) by Meta',
-        source:
-          'https://sustainability.atmeta.com/blog/2024/04/22/using-artificial-intelligence-to-map-the-earths-forests/',
-        covariates: 'Tolan et al. 2024',
-      },
-    },
-    {
-      label: tMaps('layers.forestLayers.deforestation'),
-      color: primaryColorNew,
-      showDivider: true,
-      shouldRender: true,
-      additionalInfo: {
-        dataYears: 2023,
-        resolution: '30m',
-        description: 'Location of deforestation in previous year',
-        underlyingData: 'Landsat satellite programs',
-        source: 'https://www.science.org/doi/10.1126/science.1244693',
-        covariates: 'Hansen et al. 2013',
-      },
-    },
-    {
-      label: tMaps('layers.forestLayers.forestBiomass'),
-      color: primaryColorNew,
-      showDivider: true,
-      shouldRender: true,
-      additionalInfo: {
-        dataYears: 2023,
-        resolution: '500km',
-        description: 'Tree cover as a binary map',
-        underlyingData:
-          'AI model built by Google to classify Sentinel II images in 9 different land use and land cover classes',
-        source: 'https://dynamicworld.app/',
-        covariates: 'Dynamic World',
-      },
-    },
-  ];
+  // const { primaryColorNew } = themeProperties;
+  // const forestConfig = [
+  //   {
+  //     label: tMaps('layers.forestLayers.canopyHeight'),
+  //     color: undefined,
+  //     showDivider: true,
+  //     shouldRender: true,
+  //     additionalInfo: {
+  //       dataYears: 2018,
+  //       resolution: '1m',
+  //       description: 'Global canopy height between year 2018-2020',
+  //       underlyingData:
+  //         'Global Canopy Height Maps based on AI model (DinoV2) and remote sensing data (MAXAR and GEDI) by Meta',
+  //       source:
+  //         'https://sustainability.atmeta.com/blog/2024/04/22/using-artificial-intelligence-to-map-the-earths-forests/',
+  //       covariates: 'Tolan et al. 2024',
+  //     },
+  //   },
+  //   {
+  //     label: tMaps('layers.forestLayers.deforestation'),
+  //     color: primaryColorNew,
+  //     showDivider: true,
+  //     shouldRender: true,
+  //     additionalInfo: {
+  //       dataYears: 2023,
+  //       resolution: '30m',
+  //       description: 'Location of deforestation in previous year',
+  //       underlyingData: 'Landsat satellite programs',
+  //       source: 'https://www.science.org/doi/10.1126/science.1244693',
+  //       covariates: 'Hansen et al. 2013',
+  //     },
+  //   },
+  //   {
+  //     label: tMaps('layers.forestLayers.forestBiomass'),
+  //     color: primaryColorNew,
+  //     showDivider: true,
+  //     shouldRender: true,
+  //     additionalInfo: {
+  //       dataYears: 2023,
+  //       resolution: '500km',
+  //       description: 'Tree cover as a binary map',
+  //       underlyingData:
+  //         'AI model built by Google to classify Sentinel II images in 9 different land use and land cover classes',
+  //       source: 'https://dynamicworld.app/',
+  //       covariates: 'Dynamic World',
+  //     },
+  //   },
+  // ];
   const projectConfig = [
     {
       label: tAllProjects('projects'),
@@ -130,10 +130,10 @@ const MapSettings: FC<MapSettingsProps> = ({
             updateMapOption={updateMapOption}
             mapOptions={mapOptions}
           />
-          <MapLayerControlPanel
+          {/* <MapLayerControlPanel
             category={tMaps('layers.forests')}
             exploreConfig={forestConfig}
-          />
+          /> */}
         </div>
         <div className={styles.exploreDescription}>
           {tMaps('3trilliontrees')}

diff --git a/...atures/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerSwitchContainer.tsx b/...atures/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerSwitchContainer.tsx
@@ -1,10 +1,10 @@
 import type { AdditionalInfo } from './MapLayerControlPanel';
 import type { ReactNode } from 'react';
 
-import { useState } from 'react';
+// import { useState } from 'react';
 import styles from '../MapFeatureExplorer.module.scss';
-import { Popover } from '@mui/material';
-import LayerInfoPopupContent from './LayerInfoPopupContent';
+// import { Popover } from '@mui/material';
+// import LayerInfoPopupContent from './LayerInfoPopupContent';
 
 interface Props {
   label: string;
@@ -19,30 +19,30 @@ const LayerSwitchContainer = ({
   showDivider,
   additionalInfo,
 }: Props) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
+  // const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
 
-  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
-    setAnchorEl(e.currentTarget);
-  };
+  // const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+  //   setAnchorEl(e.currentTarget);
+  // };
 
-  const handleMouseLeave = () => {
-    setAnchorEl(null);
-  };
+  // const handleMouseLeave = () => {
+  //   setAnchorEl(null);
+  // };
 
   return (
     <>
       <div className={styles.layerSwitchContainer}>
         <div
           className={showDivider ? styles.mapLayer : undefined}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
+          // onMouseEnter={handleMouseEnter}
+          // onMouseLeave={handleMouseLeave}
         >
           <p>{label}</p>
           {showDivider && <hr />}
         </div>
         <div className={styles.switchContainer}>{switchComponent}</div>
       </div>
-      {showDivider && <hr />}
+      {/* {showDivider && <hr />}
       {showDivider && (
         <Popover
           open={Boolean(anchorEl)}
@@ -73,7 +73,7 @@ const LayerSwitchContainer = ({
             handleMouseLeave={handleMouseLeave}
           />
         </Popover>
-      )}
+      )} */}
     </>
   );
 };

diff --git a/...atures/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/MapLayerControlPanel.tsx b/...atures/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/MapLayerControlPanel.tsx
@@ -21,6 +21,7 @@ interface Props {
     color: string | undefined;
     showDivider: boolean;
     additionalInfo?: AdditionalInfo;
+    shouldRender: boolean;
   }[];
   mapOptions?: MapOptions;
   updateMapOption?: (option: keyof MapOptions, value: boolean) => void;
@@ -36,26 +37,30 @@ const MapLayerControlPanel = ({
     <section className={styles.exploreItemSection}>
       {category && <h2>{category}</h2>}
       <div>
-        {exploreConfig.map((item) => (
-          <LayerSwitchContainer
-            key={item.label}
-            showDivider={item.showDivider}
-            switchComponent={
-              <StyledSwitch
-                checked={mapOptions?.['showProjects'] || false}
-                customColor={item.color}
-                onChange={(
-                  _event: ChangeEvent<HTMLInputElement>,
-                  checked: boolean
-                ) => {
-                  if (updateMapOption) updateMapOption('showProjects', checked);
-                }}
-              />
-            }
-            label={item.label}
-            additionalInfo={item.additionalInfo}
-          />
-        ))}
+        {exploreConfig.map((item) => {
+          if (!item.shouldRender) return <></>;
+          return (
+            <LayerSwitchContainer
+              key={item.label}
+              showDivider={item.showDivider}
+              switchComponent={
+                <StyledSwitch
+                  checked={mapOptions?.['showProjects'] || false}
+                  customColor={item.color}
+                  onChange={(
+                    _event: ChangeEvent<HTMLInputElement>,
+                    checked: boolean
+                  ) => {
+                    if (updateMapOption)
+                      updateMapOption('showProjects', checked);
+                  }}
+                />
+              }
+              label={item.label}
+              additionalInfo={item.additionalInfo}
+            />
+          );
+        })}
       </div>
     </section>
   );