#56-Remove selected observation data from state

src/components/control-panel/control-panel.js

@@ -35,7 +35,8 @@ const layerIcons = {
 
 export const ControlPanel = () => {
 
-  const { defaultModelLayers,
+  const { removeObservations,
+          defaultModelLayers,
           hurricaneTrackLayers,
           setDefaultModelLayers,
           getAllLayersInvisible,
@@ -305,6 +306,9 @@ export const ControlPanel = () => {
   const changeModelRunCycle = (e) => {
     const direction = e.currentTarget.getAttribute("button-key");
     metClass === "synoptic" ? changeSynopticCycle(direction) : changeTropicalAdvisory(direction);
+
+    // remove all selected observations
+    removeObservations();
   };
 
   return (

src/components/trays/layers/list.js

@@ -172,7 +172,7 @@ const newLayerDefaultState = (layer, group) => {
  */
 export const LayersList = () => {
     // get a handle to the layer state
-    const {defaultModelLayers, setDefaultModelLayers} = useLayers();
+    const { removeObservations, defaultModelLayers, setDefaultModelLayers } = useLayers();
 
     // get the default layers
     const layers = [...defaultModelLayers];
@@ -205,6 +205,9 @@ export const LayersList = () => {
 
         // reorder the layers and put them back in state
         reOrderLayers(grpList);
+
+        // clear out all the selected observations
+        removeObservations();
     };
 
     /**

src/components/trays/model-selection/catalogItems.js

@@ -15,7 +15,7 @@ CatalogItems.propTypes = { data: PropTypes.any };
  */
 export default function CatalogItems(data) {
     // get the layers in state
-    const { defaultModelLayers, setDefaultModelLayers } = useLayers();
+    const { removeObservations, defaultModelLayers, setDefaultModelLayers } = useLayers();
 
     // create some state for what catalog accordian is expanded/not expanded
     const [accordianDateIndex, setAccordianDateIndex] = useState(-1);
@@ -38,6 +38,9 @@ export default function CatalogItems(data) {
 
         // add or remove the layer group
         handleSelectedLayers(layerGroup, layers, checked);
+
+        // remove all selected observations
+        removeObservations();
     };
 
     /**

src/components/trays/remove/index.js

@@ -3,7 +3,7 @@ import { Stack } from '@mui/joy';
 import { Delete as RemoveIcon} from '@mui/icons-material';
 
 // import the components that will remove selected items from state
-import { RemoveObservations } from "./remove-observations";
+import { RemoveAllObservations } from "./remove-observations";
 import { RemoveModels } from "./remove-models";
 
 // get an icon for the tray
@@ -19,7 +19,7 @@ export const title = 'Remove items';
  */
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
-            <RemoveObservations />
+            <RemoveAllObservations />
             <RemoveModels />
       </Stack>
     );

src/components/trays/remove/remove-observations.js

@@ -1,42 +1,21 @@
 import React, { Fragment } from 'react';
 import { Button } from '@mui/joy';
-import {useLayers} from "@context";
+import { useLayers } from "@context";
 
 /**
  * component that handles the removal of observations.
  *
  * @returns {JSX.Element}
  * @constructor
  */
-export const RemoveObservations = () => {
-    // get references to the observation data/list
-    const {
-        map,
-        selectedObservations,
-        setSelectedObservations
-    } = useLayers();
-
-    /**
-     * remove the observation selections from state and map
-     */
-    function removeObservations() {
-        // remove all the targets on the map
-        map.eachLayer((layer) => {
-            // if this is an observation selection marker
-            if (layer.options && layer.options.pane === "markerPane") {
-                // remove the layer
-                map.removeLayer(layer);
-            }
-        });
-
-        // remove all the dialog items from the data list
-        setSelectedObservations(selectedObservations.filter(item => item === undefined));
-    }
+export const RemoveAllObservations = () => {
+    // get the method to remove the observation items in state
+    const { removeObservations } = useLayers();
 
     // render the button
     return (
         <Fragment>
-            <Button color="primary" onClick={() => removeObservations()}>Remove selected observations</Button>
+            <Button color="primary" onClick={() => removeObservations()}>Remove all selected observations</Button>
         </Fragment>
-  );
+    );
 };

src/context/map-context.js

@@ -39,7 +39,6 @@ const layerTypes = {
   },
 };
 
-
 export const LayersProvider = ({ children }) => {
   const [defaultModelLayers, setDefaultModelLayers] = useState([]);
   const [hurricaneTrackLayers, setHurricaneTrackLayers] = useState([]);
@@ -49,6 +48,48 @@ export const LayersProvider = ({ children }) => {
 
   const [map, setMap] = useState(null);
 
+    /**
+    * removes the observation "target" icons and dialogs from the map
+    */
+    const removeObservations = ( id ) => {
+        // init the product name
+        let product_name = '';
+
+        // did we get a layer id
+        if (id !== undefined) {
+            const index = defaultModelLayers.findIndex(l => l.id === id);
+
+            // find this item in the layer list
+            if (index === -1) {
+                console.error('Could not locate layer', id);
+
+                // no need to continue
+                return;
+            }
+            else
+                // get the layers' product name
+                product_name = defaultModelLayers[index]['properties']['product_name'];
+        }
+        else
+            // no incoming id defaults to removing all selected observations
+            product_name = 'Observations';
+
+        // clear all observations if this is an observation layer
+        if (product_name === 'Observations') {
+            // remove all the targets on the map
+            map.eachLayer((layer) => {
+                // if this is an observation selection marker
+                if (layer.options && layer.options.pane === "markerPane") {
+                    // remove the layer
+                    map.removeLayer(layer);
+                }
+            });
+
+            // remove all the dialogs from the data list
+            setSelectedObservations(selectedObservations.filter(item => item === undefined));
+        }
+    };
+
   const toggleHurricaneLayerVisibility = id => {
     const newLayers = [...hurricaneTrackLayers];
     const index = newLayers.findIndex(l => l.id === id);
@@ -72,6 +113,10 @@ export const LayersProvider = ({ children }) => {
       console.error('Could not locate layer', id);
       return;
     }
+
+    // if this is a observation layer remove all observation layers/dialogs from the map
+    removeObservations(id);
+
     const alteredLayer = newLayers[index];
     alteredLayer.state.visible = !alteredLayer.state.visible;
     setDefaultModelLayers([
@@ -132,6 +177,9 @@ export const LayersProvider = ({ children }) => {
     }
     const newLayers = defaultModelLayers.filter(l => l.id !== id);
     setDefaultModelLayers(newLayers);
+
+    // if this is a observation layer remove all observation layers/dialogs from the map
+    removeObservations(id);
   };
 
   const removeModelRun = groupId => {
@@ -147,6 +195,9 @@ export const LayersProvider = ({ children }) => {
         layer.state = newLayerDefaultState(layer, newLayers[0].group);
     });
 
+    // remove all observations when there is a model run removal
+    removeObservations();
+
     setDefaultModelLayers(newLayers);
   };
 
@@ -195,6 +246,7 @@ export const LayersProvider = ({ children }) => {
         swapLayers,
         removeLayer,
         removeModelRun,
+        removeObservations,
         layerTypes,
         baseMap,
         setBaseMap,