ensure modfeatwindow updates on feature change

DFO-Ocean-Navigator · Feb 6, 2025 · 34178cf · 34178cf
1 parent e238a0d
commit 34178cf
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 25 deletions.
diff --git a/oceannavigator/frontend/src/components/Map/Map.jsx b/oceannavigator/frontend/src/components/Map/Map.jsx
@@ -191,7 +191,7 @@ const Map = forwardRef((props, ref) => {
       props.updateMapState("extent", extent);
     });
 
-    addDblClickPlot(newMap, newSelect)
+    addDblClickPlot(newMap, newSelect);
 
     let mapLayers = newMap.getLayers().getArray();
 
@@ -231,7 +231,7 @@ const Map = forwardRef((props, ref) => {
       let newSelect = createSelect();
       newMap.addInteraction(newSelect);
 
-      addDblClickPlot(newMap, newSelect)
+      addDblClickPlot(newMap, newSelect);
 
       setSelect1(newSelect);
     }
@@ -432,6 +432,8 @@ const Map = forwardRef((props, ref) => {
           this.getFeatures().push(feature);
         }
       }
+      let ids = this.getFeatures().map((feature) => feature.id);
+      props.action("selectedFeatureIds", ids);
     });
 
     return newSelect;
@@ -537,6 +539,7 @@ const Map = forwardRef((props, ref) => {
         select1.getFeatures().push(feature);
       }
     }
+    props.action("selectedFeatureIds", selectedIds);
   };
 
   const undoFeature = () => {
@@ -620,6 +623,8 @@ const Map = forwardRef((props, ref) => {
         select1.getFeatures().push(feature);
       }
     }
+    let ids = newFeatures.map((feature) => feature.getId());
+    props.action("selectedFeatureIds", ids);
   };
 
   const combinePointFeatures = (featureIds) => {
@@ -651,6 +656,7 @@ const Map = forwardRef((props, ref) => {
     if (props.compareDatasets) {
       select1.getFeatures().push(newFeature);
     }
+    props.action("selectedFeatureIds", [newFeature.getId()]);
   };
 
   const loadFeatures = (featureType, featureId) => {
@@ -936,7 +942,7 @@ const Map = forwardRef((props, ref) => {
         props.action("plot");
       }
     });
-  }
+  };
 
   const updateBasemap = (map) => {
     let mapLayers = map.getLayers().getArray();

diff --git a/oceannavigator/frontend/src/components/ModifyFeaturesWindow/ModifyFeaturesWindow.jsx b/oceannavigator/frontend/src/components/ModifyFeaturesWindow/ModifyFeaturesWindow.jsx
@@ -11,24 +11,14 @@ import FeatureCard from "./FeatureCard.jsx";
 
 function ModifyFeaturesWindow(props) {
   const [mapFeatures, setMapFeatures] = useState([]);
-  const [selectedFeatureIds, setSelectedFeatureIds] = useState([]);
   const [uploadType, setUploadType] = useState("Point");
   const fileForm = useRef(null);
   const fileInput = useRef(null);
 
   useEffect(() => {
     let features = props.mapRef.current.getFeatures();
-    //TODO fix this and other filter/maps
-    let selectedIds = features
-      .filter((feature) => {
-        return feature.selected;
-      })
-      .map((feature) => {
-        return feature.id;
-      });
     setMapFeatures(features);
-    setSelectedFeatureIds(selectedIds);
-  }, []);
+  }, [props.selectedFeatureIds]);
 
   const addFeature = () => {
     let newFeature = {
@@ -42,12 +32,12 @@ function ModifyFeaturesWindow(props) {
   };
 
   const splitFeature = () => {
-    props.mapRef.current.splitPolyFeatures(selectedFeatureIds[0]);
+    props.mapRef.current.splitPolyFeatures(props.selectedFeatureIds[0]);
     setMapFeatures(props.mapRef.current.getFeatures());
   };
 
   const combineFeatures = () => {
-    props.mapRef.current.combinePointFeatures(selectedFeatureIds);
+    props.mapRef.current.combinePointFeatures(props.selectedFeatureIds);
     setMapFeatures(props.mapRef.current.getFeatures());
   };
 
@@ -61,7 +51,7 @@ function ModifyFeaturesWindow(props) {
   };
 
   const selectFeatures = (featureId, featureType, selected) => {
-    let nextSelected = [...selectedFeatureIds];
+    let nextSelected = props.selectedFeatureIds;
     if (featureType !== "Point") {
       nextSelected = [];
     } else {
@@ -81,7 +71,6 @@ function ModifyFeaturesWindow(props) {
       });
     }
     props.mapRef.current.selectFeatures(nextSelected);
-    setSelectedFeatureIds(nextSelected);
     setMapFeatures(props.mapRef.current.getFeatures());
   };
 
@@ -166,7 +155,7 @@ function ModifyFeaturesWindow(props) {
 
   let selectedFeatureType = mapFeatures.reduce(
     (result, feat) => {
-      if (feat.id === selectedFeatureIds[0]) {
+      if (feat.id === props.selectedFeatureIds[0]) {
         result = feat.type;
       }
       return result;
@@ -181,7 +170,7 @@ function ModifyFeaturesWindow(props) {
         <Col className="button-col">
           <Button onClick={addFeature}>Add New Feature</Button>
           <Button
-            disabled={selectedFeatureIds.length < 1}
+            disabled={props.selectedFeatureIds.length < 1}
             onClick={() => props.action("plot")}
           >
             Plot Selected Features
@@ -196,7 +185,7 @@ function ModifyFeaturesWindow(props) {
             Split Line/Area Feature Into Points
           </Button>
           <Button
-            disabled={selectedFeatureIds.length < 2}
+            disabled={props.selectedFeatureIds.length < 2}
             onClick={combineFeatures}
           >
             Combine Selected Point Features

diff --git a/oceannavigator/frontend/src/components/OceanNavigator.jsx b/oceannavigator/frontend/src/components/OceanNavigator.jsx
@@ -43,6 +43,7 @@ function OceanNavigator(props) {
   const mapRef = useRef();
   const [dataset0, setDataset0] = useState(DATASET_DEFAULTS);
   const [dataset1, setDataset1] = useState(DATASET_DEFAULTS);
+  const [selectedFeatureIds, setSelectedFeatureIds] = useState([]);
   const [compareDatasets, setCompareDatasets] = useState(false);
   const [mapSettings, setMapSettings] = useState({
     projection: "EPSG:3857", // Map projection
@@ -59,7 +60,6 @@ function OceanNavigator(props) {
   });
   const [mapState, setMapState] = useState({});
   const [plotData, setPlotData] = useState({});
-  const [class4Id, setClass4Id] = useState();
   const [class4Type, setClass4Type] = useState("ocean_predict");
   const [featureType, setFeatureType] = useState("Point");
   const [names, setNames] = useState([]);
@@ -130,6 +130,9 @@ function OceanNavigator(props) {
           updateUI({ modalType: newPlotData.type, showModal: true });
         }
         break;
+      case "selectedFeatureIds":
+        setSelectedFeatureIds(arg);
+        break;
       case "loadFeatures":
         closeModal();
         mapRef.current.loadFeatures(arg, arg2);
@@ -150,9 +153,6 @@ function OceanNavigator(props) {
       case "class4Type":
         setClass4Type(arg);
         break;
-      case "class4Id":
-        setClass4Id(arg);
-        break;
       case "toggleCompare":
         setCompareDatasets((prevCompare) => {
           return !prevCompare;
@@ -355,6 +355,7 @@ function OceanNavigator(props) {
     case "editFeatures":
       modalBodyContent = (
         <ModifyFeaturesWindow
+          selectedFeatureIds={selectedFeatureIds}
           action={action}
           updateUI={updateUI}
           mapRef={mapRef}