DEV -> TEST #2

app/src/components/attachments/ImageUpload.tsx

@@ -51,6 +51,11 @@
       }
     }
   };
+  // Fixing a lame typescript error
+  const centerText = 'center' as const;
+  const fitObject = 'cover' as const;
+
+  // Styles for the component
   const styles = {
     default: {
       border: '3px dashed #0003',
@@ -62,6 +67,17 @@
       borderRadius: '25px',
       cursor: 'pointer',
       overflow: 'hidden'
+    },
+    text: {
+      color: '#0003',
+      fontSize: '1.2rem',
+      margin: '1rem',
+      textAlign: centerText
+    },
+    image: {
+      height: '200px',
+      width: '100%',
+      objectFit: fitObject
     }
   };
 
@@ -74,9 +90,9 @@
       onDragLeave={handleMouseLeave}
       onDrop={handleDrop}>
       {image ? (
-        <img src={image} alt="uploaded" style={{ height: '200px', width: '200px' }} />
+        <img src={image} alt="uploaded" style={styles.image} />
       ) : (
-        <div>{hoverText}</div>
+        <div style={styles.text}>{hoverText}</div>
       )}
     </div>
   );

app/src/components/map/MapContainer2.tsx

@@ -23,6 +23,7 @@
   centroids?: boolean;
   mask?: null | number; // Store what mask just changed
   maskState?: boolean[]; // Store which features are masked
+  activeFeatureState?: any; // Store which feature is active
 }
 
 const MAPTILER_API_KEY = process.env.REACT_APP_MAPTILER_API_KEY;
@@ -253,14 +254,43 @@
   map.getSource('mask').setData(maskGeojson);
 };
 
+let hoverStateMarkerPolygon: boolean | any = false;
+const checkFeatureState = (featureState: any) => {
+  if (!map.getSource('markers')) return; // Exit if markers are not initialized
+
+  if (hoverStateMarkerPolygon) {
+    map.setFeatureState(
+      {
+        source: 'markers',
+        id: hoverStateMarkerPolygon.id
+      },
+      { hover: false }
+    );
+  }
+
+  // If there is a feature state, set the hover state
+  if (featureState[0]) {
+    map.setFeatureState(
+      {
+        source: 'markers',
+        id: featureState[0].id
+      },
+      { hover: true }
+    );
+  }
+
+  hoverStateMarkerPolygon = featureState[0] || false;
+};
+
 const initializeMap = (
   mapId: string,
   center: any = [-124, 57],
   zoom = 6,
   features?: any, // There's no features when first creating a record
   layerVisibility?: any,
   centroids = false,
-  tooltipState?: any
+  tooltipState?: any,
+  activeFeatureState?: any
 ) => {
   const { boundary, wells, projects, plans, wildlife, indigenous } = layerVisibility;
 
@@ -411,7 +441,6 @@
     map.addSource('markers', {
       type: 'geojson',
       data: markerGeoJSON as FeatureCollection,
-      promoteId: 'id',
       cluster: centroids ? true : false,
       clusterRadius: 50,
       clusterMaxZoom: 12
@@ -479,9 +508,48 @@
         visibility: 'visible'
       },
       paint: {
-        'fill-color': 'rgba(245,149,66,0.8)'
+        'fill-color': [
+          'case',
+          ['boolean', ['feature-state', 'hover'], false],
+          'rgba(250,191,120,1)',
+          'rgba(250,191,120,0.5)'
+        ]
       }
     });
+    // let hoverStateMarkerPolygon: boolean | any = false;
+    map
+      .on('mouseenter', 'markerPolygon', (e: any) => {
+        map.getCanvas().style.cursor = 'pointer';
+
+        checkFeatureState(activeFeatureState);
+        activeFeatureState[1](e.features[0]);
+
+        // console.log('entering index: ', e.features[0].id);
+        // if (activeFeatureState[0]) {
+        //   activeFeatureState[1](e.features[0]);
+        // }
+
+        // hoverStateMarkerPolygon = e.features[0].id;
+        // map.setFeatureState(
+        //   {
+        //     source: 'markers',
+        //     id: e.features[0].id
+        //   },
+        //   { hover: true }
+        // );
+      })
+      .on('mouseleave', 'markerPolygon', () => {
+        map.getCanvas().style.cursor = '';
+
+        activeFeatureState[1](null);
+        // map.setFeatureState(
+        //   {
+        //     source: 'markers',
+        //     id: hoverStateMarkerPolygon
+        //   },
+        //   { hover: false }
+        // );
+      });
 
     // Zoom in until cluster breaks apart.
     map.on('click', 'markerClusters.points', (e: any) => {
@@ -526,7 +594,7 @@
 
     /* Add popup for the points */
     map.on('click', 'markerProjects.points', (e: any) => {
       const prop = e.features![0].properties;
 
       const html = makePopup(prop.name, prop.id, true);
 
@@ -542,7 +610,7 @@
 
     /* Add popup for the points */
     map.on('click', 'markerPlans.points', (e: any) => {
       const prop = e.features![0].properties;
 
       // TBD: Currently the /plans route is not available
       // const html = makePopup(prop.name, prop.id, false);
@@ -795,6 +863,7 @@
 
   const maskState = props.maskState || [];
   const mask = props.mask || 0;
+  const activeFeatureState = props.activeFeatureState || [];
 
   // Tooltip variables
   const [tooltipVisible, setTooltipVisible] = useState(false);
@@ -816,7 +885,16 @@
 
   // Update the map if the features change
   useEffect(() => {
-    initializeMap(mapId, center, zoom, features, layerVisibility, centroids, tooltipState);
+    initializeMap(
+      mapId,
+      center,
+      zoom,
+      features,
+      layerVisibility,
+      centroids,
+      tooltipState,
+      activeFeatureState
+    );
   }, [features]);
 
   // Listen to layer changes
@@ -833,6 +911,11 @@
     updateMasks(mask, maskState, features);
   }, [maskState]);
 
+  // Listen for active feature changes
+  useEffect(() => {
+    checkFeatureState(activeFeatureState);
+  }, [activeFeatureState]);
+
   return (
     <div id={mapId} style={pageStyle}>
       <div

app/src/features/projects/components/ProjectGeneralInformationForm.tsx

@@ -58,6 +58,10 @@ export const ProjectGeneralInformationFormYupSchema = yup.object().shape({
   })
 });
 
+const uploadImageStyles = {
+  marginTop: '23px'
+};
+
 /**
  * Create project - General information section
  *
@@ -69,8 +73,10 @@ const ProjectGeneralInformationForm: React.FC = () => {
 
   return (
     <Grid container spacing={3}>
-      <ImageUpload />
-      <Grid item xs={12} md={9}>
+      <div style={uploadImageStyles}>
+        <ImageUpload />
+      </div>
+      <Grid item xs={12} md={8}>
         <Grid container spacing={3} direction="column">
           <Grid item xs={12}>
             <CustomTextField

app/src/features/projects/components/ProjectLocationForm.tsx

@@ -6,6 +6,7 @@ import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
 import FormHelperText from '@mui/material/FormHelperText';
 import FormLabel from '@mui/material/FormLabel';
 import Grid from '@mui/material/Grid';
@@ -26,9 +27,10 @@ import IntegerSingleField from 'components/fields/IntegerSingleField';
 import MapContainer from 'components/map/MapContainer2';
 import { useFormikContext } from 'formik';
 import { Feature } from 'geojson';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { handleGeoJSONUpload } from 'utils/mapBoundaryUploadHelpers';
 import yup from 'utils/YupSchema';
+import './styles/projectLocation.css';
 
 export interface IProjectLocationForm {
   location: {
@@ -82,9 +84,8 @@ const ProjectLocationForm: React.FC<IProjectLocationFormProps> = (props) => {
 
   const [openUploadBoundary, setOpenUploadBoundary] = useState(false);
 
-  // Mask state array
   const [maskState, setMaskState] = useState<boolean[]>(
-    values.location.geometry.map((feature) => feature.properties?.maskedLocation)
+    values.location.geometry.map((feature) => feature?.properties?.maskedLocation) || []
   );
 
   // Mask change indicator
@@ -95,7 +96,6 @@ const ProjectLocationForm: React.FC<IProjectLocationFormProps> = (props) => {
       if (file?.name.includes('json')) {
         handleGeoJSONUpload(file, 'location.geometry', formikProps);
       }
-
       return Promise.resolve();
     };
   };
@@ -121,6 +121,24 @@ const ProjectLocationForm: React.FC<IProjectLocationFormProps> = (props) => {
     baselayer
   };
 
+  /**
+   * State to share with the map to indicate which
+   * feature is selected or hovered over
+   */
+  const [activeFeature, setActiveFeature] = useState<Feature | null>(null);
+
+  useEffect(() => {
+    console.log('active feature just changed', activeFeature);
+  }, [activeFeature]);
+
+  const featureStyle = {
+    parent: {
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr auto',
+      cursor: 'pointer'
+    }
+  };
+
   const maskChanged = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
     // Update the formik values
     // @ts-ignore
@@ -137,6 +155,17 @@ const ProjectLocationForm: React.FC<IProjectLocationFormProps> = (props) => {
     setMask(index);
   };
 
+  // TODO: Connect these to the map state for active shapes
+  const mouseEnterListItem = (index: number) => {
+    console.log('mouse enter', index);
+    console.log(values.location.geometry[index]);
+    setActiveFeature(values.location.geometry[index]);
+  };
+  const mouseLeaveListItem = (index: number) => {
+    console.log('mouse leave', index);
+    setActiveFeature(null);
+  };
+
   return (
     <>
       <Box mb={5} mt={0}>
@@ -292,18 +321,30 @@ const ProjectLocationForm: React.FC<IProjectLocationFormProps> = (props) => {
           </Button>
         </Box>
 
-        <Box>
+        <Box className="feature-box">
           {/* Create a list element for each feature within values.location.geometry */}
           {values.location.geometry.map((feature, index) => (
-            <div className="feature-list" key={index}>
+            <div
+              style={featureStyle.parent}
+              className={activeFeature?.id === feature?.id ? 'feature-item active' : 'feature-item'}
+              key={index}
+              onMouseEnter={() => mouseEnterListItem(index)}
+              onMouseLeave={() => mouseLeaveListItem(index)}>
               <div className="feature-name">
                 {feature.properties?.siteName || `Area ${index + 1}`}
               </div>
               <div className="feature-size">{feature.properties?.areaHectares || 0} Ha</div>
-              <Checkbox
-                checked={feature.properties?.maskedLocation}
-                onChange={(event) => maskChanged(event, index)}
-              />
+              <FormGroup>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={feature.properties?.maskedLocation || false}
+                      onChange={(event) => maskChanged(event, index)}
+                    />
+                  }
+                  label="Mask"
+                />
+              </FormGroup>
             </div>
           ))}
         </Box>
@@ -315,6 +356,7 @@ const ProjectLocationForm: React.FC<IProjectLocationFormProps> = (props) => {
             features={values.location.geometry}
             mask={mask}
             maskState={maskState}
+            activeFeatureState={[activeFeature, setActiveFeature]}
           />
         </Box>
         {errors?.location?.geometry && (

app/src/features/projects/components/styles/projectLocation.css

@@ -0,0 +1,20 @@
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
+  border: 0.5px solid #ccc;
+  background-color: #f9f9f9;
+  /* &:hover {
+    background-color: #e2fbff;
+  } */
+  &.active {
+    background-color: #e2fbff;
+  }
+}
+
+.feature-box > :first-child {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}

app/src/utils/mapBoundaryUploadHelpers.ts

@@ -84,7 +84,17 @@ export const handleGeoJSONUpload = async <T>(
       setFieldError(name, 'Only Polygon or MultiPolygon features are supported.');
       return;
     }
-    setFieldValue(name, [...get(values, name), ...geojsonWithAttributes.features]);
+
+    // Merge the new features with the existing features
+    const allFeatures = [...get(values, name), ...geojsonWithAttributes.features];
+
+    // Recalculate the IDs for all features
+    const allFeaturesWithIds = allFeatures.map((feature, index) => {
+      feature.id = index;
+      return feature;
+    });
+
+    setFieldValue(name, allFeaturesWithIds);
   } catch (error) {
     setFieldError(name, 'Error uploading your GeoJSON file, please check the file and try again.');
   }