Draw multiple map features (#1176)

* drawing of different feature types * remove module imports from drawing.js * add save button css * change feature type on toggle * fix updateFeatType bug * remove plot button from drawing tools * restore undo button * add alert for insufficient points * restore basic enterCoordsWIndow functionality * add selected value to feature objects and logic * separate featurecard from entercoorswindow * add css for feature cards * refactor entercoords window and update css * better feature type change logic * rename "newFeaures" prop * add combine point features functionality * restore upload csv * add feature atrs to map feature objs * update selection logic of map and entercoords window * fix selection bugs * restore plot funcitonality * update ol and otehr js pacakges * move feature production/logic to map component * fix selected type check * clean up * restore reset/clear map funcs * restore predefined features * filter observations from enter coords window * remove unused funcitons and variables * restore point/line/area plots * fix obs filter * restore class4 plots * restore tracks * fix feature order in getfeatures func * add double click plotting * rename enter coordinates window * ensure modfeatwindow updates on feature change * Update name in modal header * restore permalink
DFO-Ocean-Navigator · Feb 7, 2025 · 0914f73 · 0914f73
1 parent 1c21fe3
commit 0914f73
Show file tree

Hide file tree

Showing 30 changed files with 1,569 additions and 1,452 deletions.
diff --git a/oceannavigator/frontend/package-lock.json b/oceannavigator/frontend/package-lock.json
diff --git a/oceannavigator/frontend/package.json b/oceannavigator/frontend/package.json
@@ -11,22 +11,22 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.1",
-    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.7.9",
     "axios-extensions": "^3.1.6",
     "bootstrap": "^5.3.3",
     "deep-equal": "^2.2.3",
     "i18next": "^22.5.1",
     "i18next-browser-languagedetector": "^7.2.2",
-    "ol": "^7.5.2",
-    "papaparse": "^5.4.1",
+    "ol": "^10.3.1",
+    "papaparse": "^5.5.1",
     "proj4": "^2.15.0",
     "prop-types": "^15.8.1",
     "rc-slider": "^10.6.2",
     "react": "^18.3.1",
-    "react-bootstrap": "^2.10.6",
+    "react-bootstrap": "^2.10.8",
     "react-bootstrap-icons": "^1.11.5",
     "react-datepicker": "^4.25.0",
     "react-device-detect": "^2.2.3",
@@ -37,14 +37,14 @@
     "react-i18next": "^12.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/core": "^7.26.7",
+    "@babel/preset-env": "^7.26.7",
     "@babel/preset-react": "^7.26.3",
     "babel-loader": "^9.2.1",
     "css-loader": "^6.11.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.3",
-    "sass": "^1.83.0",
+    "sass": "^1.83.4",
     "sass-loader": "^13.3.3",
     "style-loader": "^3.3.4",
     "url-loader": "^4.1.1",

diff --git a/oceannavigator/frontend/src/components/AreaWindow.jsx b/oceannavigator/frontend/src/components/AreaWindow.jsx
@@ -298,7 +298,7 @@ class AreaWindow extends React.Component {
         id="SubsetPanel"
         key="SubsetPanel"
         dataset={this.props.dataset_0}
-        area={this.props.area}
+        area={this.props.plotData.coordinates}
       />
     );
 
@@ -382,12 +382,12 @@ class AreaWindow extends React.Component {
     };
 
     let area = [];
-    if (typeof this.props.area[0] === "string") {
-      area = [this.props.area[0]];
+    if (typeof this.props.plotData.coordinates[0] === "string") {
+      area = [this.props.plotData.coordinates[0]];
     } else {
       area = [
         {
-          polygons: [this.props.area],
+          polygons: [this.props.plotData.coordinates],
           innerrings: [],
           name: "",
         },
@@ -469,7 +469,7 @@ class AreaWindow extends React.Component {
 
 //***********************************************************************
 AreaWindow.propTypes = {
-  area: PropTypes.array.isRequired,
+  plotData: PropTypes.object.isRequired,
   eneratePermLink: PropTypes.func,
   dataset_1: PropTypes.object.isRequired,
   dataset_compare: PropTypes.bool,

diff --git a/oceannavigator/frontend/src/components/Class4Selector.jsx b/oceannavigator/frontend/src/components/Class4Selector.jsx
@@ -7,7 +7,6 @@ import { GetClass4Promise } from "../remote/OceanNavigator.js";
 function Class4Selector(props) {
   const [class4OPFiles, setClass4OPFiles] = useState([]);
   const [class4RAOFiles, setClass4RAOFiles] = useState([]);
-  const [class4Type, setClass4Type] = useState("ocean_predict");
 
   useEffect(() => {
     GetClass4Promise().then(
@@ -34,18 +33,30 @@ function Class4Selector(props) {
   }, []);
 
   const handleCalendarInteraction = (selected) => {
-    let dateString = selected.toISOString()
-    if (class4Type === "ocean_predict") {
-      props.action("show", "class4", class4OPFiles[dateString], class4Type);
-    } else if (class4Type === "riops_obs"){
-      props.action("show", "class4", class4RAOFiles[dateString], class4Type);
+    let dateString = selected.toISOString();
+    if (props.class4Type === "ocean_predict") {
+      props.action(
+        "loadFeatures",
+        "class4",
+        class4OPFiles[dateString],
+        props.class4Type
+      );
+    } else if (props.class4Type === "riops_obs") {
+      props.action(
+        "loadFeatures",
+        "class4",
+        class4RAOFiles[dateString],
+        props.class4Type
+      );
     }
   };
 
   let timestamps = Object.keys(
-    class4Type === "ocean_predict" ? class4OPFiles : class4RAOFiles
+    props.class4Type === "ocean_predict" ? class4OPFiles : class4RAOFiles
   );
-  let dates = timestamps.map((ts)=>{return new Date(ts)})
+  let dates = timestamps.map((ts) => {
+    return new Date(ts);
+  });
 
   let calendar =
     timestamps.length > 0 ? (
@@ -58,9 +69,9 @@ function Class4Selector(props) {
   return (
     <div className="Class4Selector">
       <Form.Select
-        value={class4Type}
+        value={props.class4Type}
         onChange={(e) => {
-          setClass4Type(e.target.value);
+          props.action("class4Type", e.target.value);
         }}
       >
         <option value="ocean_predict">{"Ocean Predict"}</option>

diff --git a/oceannavigator/frontend/src/components/Class4Window.jsx b/oceannavigator/frontend/src/components/Class4Window.jsx
@@ -61,7 +61,7 @@ class Class4Window extends React.Component {
       class4type: this.props.class4type,
       dataset: this.props.dataset,
       forecast: this.state.forecast,
-      class4id: this.props.class4id,
+      class4id: this.props.plotData.id,
       showmap: this.state.showmap,
       climatology: this.state.climatology,
       error: this.state.error,
@@ -117,7 +117,7 @@ class Class4Window extends React.Component {
                     "/api/v2.0/class4/forecasts/" +
                     this.props.class4type +
                     "?id=" +
-                    this.props.class4id
+                    this.props.plotData.id
                   }
                   title={_("Forecast")}
                   onUpdate={this.onLocalUpdate}
@@ -150,7 +150,7 @@ class Class4Window extends React.Component {
                     "/api/v2.0/class4/models/" +
                     this.props.class4type +
                     "?id=" +
-                    this.props.class4id
+                    this.props.plotData.id
                   }
                   title={_("Additional Models")}
                 />
@@ -188,8 +188,8 @@ class Class4Window extends React.Component {
 Class4Window.propTypes = {
   generatePermLink: PropTypes.func,
   dataset: PropTypes.string,
-  class4id: PropTypes.array,
   class4type: PropTypes.string,
+  plotData: PropTypes.object,
   init: PropTypes.object,
   action: PropTypes.func,
 };

diff --git a/oceannavigator/frontend/src/components/DrawingTools.jsx b/oceannavigator/frontend/src/components/DrawingTools.jsx
@@ -1,48 +1,35 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button, ToggleButton } from "react-bootstrap";
 import { faRotateLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { withTranslation } from "react-i18next";
 
 function DrawingTools(props) {
-  const [vectorType, setVectorType] = useState(props.vectorType);
-
   const radios = [
-    { name: __("Point"), value: "point" },
-    { name: __("Line"), value: "line" },
-    { name: __("Area"), value: "area" },
+    { name: __("Point"), value: "Point" },
+    { name: __("Line"), value: "LineString" },
+    { name: __("Area"), value: "Polygon" },
   ];
 
   const handleRadio = (e) => {
     let type = e.currentTarget.value;
-    setVectorType(type);
-    props.action("vectorType", type);
+    props.action("featureType", type);
   };
 
   const handleClear = () => {
-    props.action("clearPoints");
+    props.action("clearFeatures");
   };
 
   const handleUndo = () => {
-    props.action("undoPoints");
+    props.action("undoMapFeature");
   };
 
   const handleClose = () => {
     props.updateUI({ showDrawingTools: false });
     props.action("stopDrawing");
   };
 
-  const handlePlot = () => {
-    props.action("selectPoints");
-    props.updateUI({ modalType: vectorType, showModal: true });
-  };
-
-  const plotDisabled =
-    (props.vectorType === "point" && props.vectorCoordinates.length < 1) ||
-    (props.vectorType === "line" && props.vectorCoordinates.length < 2) ||
-    (props.vectorType === "area" && props.vectorCoordinates.length < 3);
-
   return (
     <div className={"drawing-tools"}>
       <div>
@@ -54,25 +41,16 @@ function DrawingTools(props) {
             type="radio"
             name="radio"
             value={radio.value}
-            checked={props.vectorType === radio.value}
+            checked={props.featureType === radio.value}
             onChange={handleRadio}
           >
             {radio.name}
           </ToggleButton>
         ))}
       </div>
-
-      <Button
-        className="plot-button"
-        onClick={handlePlot}
-        disabled={plotDisabled}
-      >
-        {__("Plot")}
-      </Button>
       <Button className="plot-button" onClick={handleClear}>
-      {__("Clear")}
+        {__("Clear")}
       </Button>
-
       <Button className="undo-button" onClick={handleUndo}>
         <FontAwesomeIcon icon={faRotateLeft} />
       </Button>