Limit the user's ability to select over 10 charts

src/components/dialog/observation-dialog.js

@@ -69,7 +69,7 @@ export const ObservationDialog = (obs_data) => {
 
     // create a data object for the base dialog to use to render
     const floaterArgs = {
-        title: obs_data.obs['location_name'],
+        title: obs_data.obs['title'],
         index: obs_data.obs['index'],
         dialogObject: { ...graphObj(obs_data.obs['csvurl']) },
         dataKey: obs_data.obs['id'],

src/components/map/adcirc-raster-layer.js

@@ -65,8 +65,9 @@ export const AdcircRasterLayer = (layer) => {
     const {
         defaultModelLayers,
         setAlertMsg,
-        selectedObservations, setSelectedObservations,
-        defaultSelected, leftPaneID, rightPaneID
+        setSelectedObservations,
+        defaultSelected, leftPaneID, rightPaneID,
+        isAlreadySelected, tooManyCharts
     } = useLayers();
 
     // capture the default layers
@@ -78,16 +79,6 @@ export const AdcircRasterLayer = (layer) => {
     // create a list of worthy geo-point layer types
     const validLayerTypes = new Set(['Maximum Water Level', 'Maximum Significant Wave Height']);
 
-    /**
-     * determines if the point was already selected
-     *
-     * @param id
-     */
-    const isAlreadySelected = (id) => {
-        // return true if the point was already selected
-        return (selectedObservations.find((o) => o.id === id) !== undefined);
-    };
-
     /**
      * determines if the app is in compare mode
      *
@@ -111,8 +102,8 @@ export const AdcircRasterLayer = (layer) => {
         // create an id for the point
         const id = lon + ', ' + lat;
 
-        // if the point selected is new
-        if (!isAlreadySelected(id)) {
+        // if this point was not already selected, and we have not reached max dialogs open
+        if (!isAlreadySelected(id) && !tooManyCharts()) {
             // this can only happen when we are not in compare mode
             if (!inCompareMode()) {
                 // if this is a good layer product
@@ -145,7 +136,7 @@ export const AdcircRasterLayer = (layer) => {
                             "station_name": l_props['product_name'] + " " + id,
                             "lat": lat,
                             "lon": lon,
-                            "location_name": layer.properties['product_name'].split(' ').slice(1).join(' ') + " at (lon, lat): " + id,
+                            "title": 'GeoPoint: ' + layer.properties['product_name'].split(' ').slice(1).join(' ') + " at (lon, lat): " + id,
                             "model_run_id": layer.group,
                             "data_source": (l_props['event_type'] + '_' + l_props['grid_type']).toUpperCase(),
                             "source_name": l_props['model'],

src/components/map/default-layers.js

@@ -5,7 +5,7 @@ import { useLayers } from '@context';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { AdcircRasterLayer } from './adcirc-raster-layer';
-import { markClicked, parseSharedURL, addSharedObservations, getNamespacedEnvParam, getBrandingHandler } from '@utils/map-utils';
+import { markClicked, parseSharedURL, addSharedObservations, getNamespacedEnvParam, getBrandingHandler,  } from '@utils/map-utils';
 import { getDefaultInstanceName } from "@components/config";
 
 const newLayerDefaultState = (layer) => {
@@ -34,7 +34,8 @@ export const DefaultLayers = () => {
         defaultModelLayers,
         setDefaultModelLayers,
         setSelectedObservations,
-        setShowShareComment
+        setShowShareComment,
+        isAlreadySelected, tooManyCharts
     } = useLayers();
 
     const obsPointToLayer = ((feature, latlng) => {
@@ -62,6 +63,7 @@ export const DefaultLayers = () => {
     });
 
     const onEachObsFeature = (feature, layer) => {
+        // if the feature is legit
         if (feature.properties && feature.properties.location_name) {
           const popupContent = feature.properties.location_name;
 
@@ -78,14 +80,21 @@ export const DefaultLayers = () => {
           });
 
           layer.on("click", function (e) {
-            // this id is used to remove a selected observation from the selectedObservations list when the dialog is closed
-            feature.properties.id = feature.properties.station_name;
+            // if this point was not already selected, and we have not reached max dialogs open
+            if(!isAlreadySelected(feature.properties.station_name) && !tooManyCharts())
+            {
+                // this id is used to remove a selected observation from the selectedObservations list when the dialog is closed
+                feature.properties.id = feature.properties.station_name;
 
-            // create a marker target icon around the observation clicked
-            markClicked(map, e, feature.properties.id);
+                // title this as an observation point
+                feature.properties['title'] = feature.properties['gauge_owner'] + ' observation: ' + feature.properties.location_name;
 
-            // populate selectedObservations list with the newly selected observation point
-            setSelectedObservations(previous => [...previous, feature.properties]);
+                // create a marker target icon around the observation clicked
+                markClicked(map, e, feature.properties.id);
+
+                // populate selectedObservations list with the newly selected observation point
+                setSelectedObservations(previous => [...previous, feature.properties]);
+            }
           });
         }
     };

src/components/trays/share/shareViewTray.js

@@ -38,7 +38,7 @@ export const ShareViewTray = () => {
         // capture the selected observations from state
         const observations = selectedObservations.map(
             (x) => (
-                JSON.stringify({'id': x.id, 'lat': x.lat, 'lng': x.lon, 'location_name': x.location_name, 'station_name': x.station_name, 'csvurl': x.csvurl})
+                JSON.stringify({'id': x.id, 'lat': x.lat, 'lng': x.lon, 'title': x.title, 'location_name': x.location_name, 'station_name': x.station_name, 'csvurl': x.csvurl})
             )
         ).join(',');
 

src/context/map-context.js

@@ -190,6 +190,43 @@ export const LayersProvider = ({ children }) => {
         }
     };
 
+
+    /**
+     * determines if the point was already selected
+     *
+     * @param id
+     */
+    const isAlreadySelected = (id) => {
+        // return true if the point was already selected
+        return (selectedObservations.find((o) => o.id === id) !== undefined);
+    };
+
+    /**
+     * determine if the user cant select more chart dialogs
+     *
+     */
+    const tooManyCharts = () => {
+        // init the return
+        let ret_val = false;
+
+        // if the user has reached max number of charts (10), alert them.
+        // note the length is 0 based
+        if (selectedObservations.length + 1 > 10) {
+            // create an alert message
+            setAlertMsg(
+                {
+                    'severity': 'warning',
+                    'msg': 'You have exceeded the maximum number of charts (10).'
+                });
+
+            // set no can do
+            ret_val = true;
+        }
+
+        // allow the user to add the chart selection
+        return ret_val;
+    };
+
   const toggleHurricaneLayerVisibility = id => {
     const newLayers = [...hurricaneTrackLayers];
     const index = newLayers.findIndex(l => l.id === id);
@@ -401,6 +438,7 @@ export const LayersProvider = ({ children }) => {
         getAllLayersInvisible, getAllHurricaneLayersInvisible, getAllRasterLayersInvisible,
         swapLayers, removeLayer, removeModelRun, removeAllModelRuns, removeObservations,
         getLayerIcon, setLayerOpacity,
+        isAlreadySelected, tooManyCharts,
 
         // declare access to the compare mode items
         defaultSelected,
@@ -415,6 +453,7 @@ export const LayersProvider = ({ children }) => {
         sideBySideLayers, setSideBySideLayers,
         resetCompare, removeSideBySideLayers,
 
+
         // tracks the dialog that has focus
         topMostDialogIndex, setTopMostDialogIndex
       }}