Merge pull request #74 from RENCI/feature/hurricane-layers

Feature/hurricane layers

package.json

@@ -53,6 +53,12 @@
     "@mui/material": "^5.15.15",
     "@mui/x-date-pickers": "^7.4.0",
     "@tanstack/react-query": "^5.36.0",
+    "@turf/bearing": "^6.5.0",
+    "@turf/circle": "^6.5.0",
+    "@turf/destination": "^6.5.0",
+    "@turf/dissolve": "^6.5.0",
+    "@turf/distance": "^6.5.0",
+    "@turf/flatten": "^6.5.0",
     "axios": "^1.6.8",
     "core-js": "^3.36.0",
     "d3": "^7.8.5",

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

@@ -32,20 +32,23 @@ const layerIcons = {
 export const ControlPanel = () => {
 
   //const { defaultModelLayers, setDefaultModelLayers, toggleLayerVisibility, makeAllLayersInvisible } = useLayers();
-  const { defaultModelLayers, setDefaultModelLayers, toggleLayerVisibility } = useLayers();
+  const { defaultModelLayers,
+          setDefaultModelLayers,
+          toggleLayerVisibility,
+          toggleHurricaneLayerVisibility } = useLayers();
 
   const data_url = `${process.env.REACT_APP_UI_DATA_URL}get_ui_data?limit=1&use_v3_sp=true`;
-  //const gs_wms_url = `${process.env.REACT_APP_GS_DATA_URL}wms`;
-
   const layers = [...defaultModelLayers];
   const maxele_layer = layers.find((layer) => layer.properties.product_type === "maxele63");
   const obs_layer = layers.find((layer) => layer.properties.product_type === "obs");
 
   const [currentLayerSelection, setCurrentLayerSelection] = React.useState('maxele63');
-  const [checked, setChecked] = React.useState(true);
+  const [checkedObs, setCheckedObs] = React.useState(true);
+  const [checkedHurr, setCheckedHurr] = React.useState(true);
 
    // keep track of which model run to retrieve
   const [ runCycle, setRunCycle] = React.useState(0);
+  const [ runAdvisory, setRunAdvisory] = React.useState(0);
   const [ runDate, setRunDate] = React.useState("");
   const [ instanceName, setInstanceName] = React.useState("");
   const [ metClass, setMetClass] = React.useState("");
@@ -133,7 +136,7 @@ export const ControlPanel = () => {
         setInstanceName(layers[0].properties.instance_name);
         setMetClass(layers[0].properties.met_class);
         setEventType(layers[0].properties.event_type);
-
+        setRunAdvisory(layers[0].properties.advisory_number);
         setRunCycle(parseInt(layers[0].properties.cycle));
         setRunDate(layers[0].properties.run_date);
         setInitialDataFetched(true);
@@ -164,10 +167,17 @@ export const ControlPanel = () => {
 
   // switch on/off the observation layer if it exists
   const toggleObsLayer = (event) => {
-    setChecked(event.target.checked);
+    setCheckedObs(event.target.checked);
     toggleLayerVisibility(obs_layer.id);
   };
 
+  // switch on/off the hurricane track layer, if it exists
+  const toggleHurricaneLayer = (event) => {
+    setCheckedHurr(event.target.checked);
+    const layerID = obs_layer.id.substr(0, obs_layer.id.lastIndexOf("-")) + '-hurr';
+    toggleHurricaneLayerVisibility(layerID);
+  };
+
   // cycle to the next model run cycle and retrieve the
   // layers associated with that cycle/date
   const changeModelRunCycle = (e) => {
@@ -242,7 +252,7 @@ export const ControlPanel = () => {
 
         {
           layers.length && (
-            <Typography level="body-sm" alignSelf="center">
+            <Typography level="body-md" alignSelf="center">
               Model run date: {runDate}
             </Typography>
           )
@@ -255,7 +265,7 @@ export const ControlPanel = () => {
               button-key='previous'
               onClick={changeModelRunCycle}
             ><KeyboardArrowLeft/></IconButton>
-            <Typography level="body-md">Cycle {runCycle}</Typography>
+            <Typography level="body-md">{metClass === 'synoptic'? `Cycle ${runCycle}` : `Advisory ${runAdvisory}`}</Typography>
             <IconButton
               variant="outlined"
               key='next'
@@ -265,13 +275,6 @@ export const ControlPanel = () => {
         </Stack>
 
         <Divider />
-
-        {/* TODO:  NOTE: If this is a tropical storm run, we need to change cycle to advisoy 
-          Also probabaly want to add a switch for hurricane layers - which
-          involves making a request to the MetGet API 
-          Third need to implement actual code to load different model runs each time 
-          up/down arrows are clicked. This has to time managed in some way so that
-          Geoserver is not inundated with requests */}
 
         { // grid name
           layers.length && (
@@ -283,11 +286,20 @@ export const ControlPanel = () => {
           layers.some(layer => layer.properties.product_type === "obs") && (
             <Typography
               component="label"
-              endDecorator={ <Switch checked={checked} onChange={toggleObsLayer} /> }
+              endDecorator={ <Switch checked={checkedObs} onChange={toggleObsLayer} /> }
             >Observations</Typography>
           )
         }
 
+        { // hurricane track toggle
+          layers.some(layer => layer.properties.met_class === "tropical") && (
+            <Typography
+              component="label"
+              endDecorator={ <Switch checked={checkedHurr} onChange={toggleHurricaneLayer} /> }
+            >Hurricane Track</Typography>
+          )
+        }
+
         {/* layer selection */}
         <ToggleButtonGroup
           value={currentLayerSelection}

src/components/map/default-layers.js

@@ -118,7 +118,6 @@ export const DefaultLayers = () => {
                         state: newLayerDefaultState(layer)
                     });
 
-                    // TODO: do we really need to do this here??!
                     // if this is an obs layer, need to retrieve
                     // the json data for it from GeoServer
                     const pieces = layer.id.split('-');
@@ -136,7 +135,6 @@ export const DefaultLayers = () => {
             if (obs_url) {
                 const obs_response = await fetch(obs_url);
                 const obs_data = await obs_response.json();
-                //console.log("obs_data 1: " + JSON.stringify(obs_data, null, 2))
 
                 setObsData(obs_data);
             }
@@ -159,7 +157,7 @@ export const DefaultLayers = () => {
         getDefaultLayers().then();
       }, []);
 
-    // memoizing this params object prevents
+    // memorizing this params object prevents
     // that map flicker on state changes.
     const wmsLayerParams = useMemo(() => ({
         format:"image/png",

src/components/map/map.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { MapContainer } from 'react-leaflet';
 import { DefaultLayers } from './default-layers';
+import { StormLayers } from './storm-layers';
 import { BaseMap } from './base-map';
 import {
   useLayers,
@@ -25,6 +26,7 @@ export const Map = () => {
         style={{ height: '100vh', width:'100wh' }}>
           <BaseMap />
           <DefaultLayers/>
+          <StormLayers/>
       </MapContainer>
     );
   };