refactoring the model run detail gathering into a common function

RENCI · Sep 16, 2024 · 5770fa3 · 5770fa3
1 parent d126207
commit 5770fa3
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 186 deletions.
diff --git a/src/components/compare-panel/compare-panel.js b/src/components/compare-panel/compare-panel.js
@@ -2,52 +2,7 @@ import React, { Fragment, useRef } from 'react';
 import { Stack, Typography, Box, Button, Card } from '@mui/joy';
 import { useLayers } from '@context';
 import { SwapHorizontalCircleSharp as SwapLayersIcon } from '@mui/icons-material';
-
-/**
- * gets the header data property name index
- * This takes into account the two types of runs (tropical, synoptic)
- *
- * @param layerProps
- * @param type
- * @returns {string}
- */
-const getPropertyName = (layerProps, element_name) => {
-    // init the return
-    let ret_val = undefined;
-
-    // capture the name of the element for tropical storms and advisory numbers
-    if (layerProps['met_class'] === 'tropical') {
-        // by the element name
-        switch (element_name) {
-            case 'stormOrModelEle':
-                ret_val = layerProps['storm_name'];
-                break;
-            case 'numberName':
-                ret_val = ' Adv: ';
-                break;
-            case 'numberEle':
-                ret_val = layerProps['advisory_number'];
-                break;
-        }
-    }
-    // capture the name of the synoptic ADCIRC models and cycle numbers
-    else {
-        switch (element_name) {
-            case 'stormOrModelEle':
-                ret_val = layerProps['model'];
-                break;
-            case 'numberName':
-                ret_val = ' Cycle: ';
-                break;
-            case 'numberEle':
-                ret_val = layerProps['cycle'];
-                break;
-        }
-    }
-
-    // return to the caller
-    return ret_val;
-};
+import { getHeaderSummary } from "@utils/map-utils";
 
 export const ComparePanel = () => {
     const {
@@ -74,7 +29,7 @@ export const ComparePanel = () => {
      * @param layerProps
      * @returns {string}
      */
-    const getHeaderSummary = (paneID) => {
+    const getHeaderSummaryByID = (paneID) => {
         // get the summary if a layer has been selected
         if (paneID !== defaultSelected) {
             // get the layer props
@@ -83,12 +38,7 @@ export const ComparePanel = () => {
             // if layer properties were captured
             if (layerProps !== undefined) {
                 // get the full accordian summary text
-                return '' +
-                    ((getPropertyName(layerProps, 'stormOrModelEle') === undefined) ? 'Data error' : getPropertyName(layerProps, 'stormOrModelEle').toUpperCase()) +
-                    ', ' + getPropertyName(layerProps, 'numberName') + getPropertyName(layerProps, 'numberEle') +
-                    ', Type: ' + layerProps['event_type'] +
-                    ', Grid: ' + layerProps['grid_type'] +
-                    ((layerProps['meteorological_model'] === 'None') ? '' : ', ' + layerProps['meteorological_model']);
+                return getHeaderSummary(layerProps);
             }
         }
         else {
@@ -138,16 +88,14 @@ export const ComparePanel = () => {
                         right: '1px',
                         filter: 'opacity(0.9)',
                         '&:hover': {filter: 'opacity(1.0)'},
-                        // padding: '10px',
                         ml: 1, mr: 1,
-                        zIndex: 999,
-                        height: 43
+                        zIndex: 999
                     }}>
                     <Stack direction={"row"} gap={ 1 } ref={ nodeRef } sx={{ mt: .5 , mb: .5 }}>
                         {
                             // render the left pane selections
                             <Stack direction={"column"} gap={ .5 } sx={{ ml: .5 }}>
-                                <Typography sx={{ m: 0 }} level="body-xs">{ getHeaderSummary(leftPaneID) } </Typography>
+                                <Typography sx={{ m: 0 }} level="body-xs">{ getHeaderSummaryByID(leftPaneID) } </Typography>
                                 <Typography sx={{ m: 0 }} level="body-xs">{ leftPaneType } </Typography>
                             </Stack>
                         }
@@ -158,7 +106,7 @@ export const ComparePanel = () => {
 
                         {
                             <Stack direction={"column"} gap={ .5 }>
-                                <Typography sx={{ m: 0 }} level="body-xs">{ getHeaderSummary(rightPaneID) } </Typography>
+                                <Typography sx={{ m: 0 }} level="body-xs">{ getHeaderSummaryByID(rightPaneID) } </Typography>
                                 <Typography sx={{ m: 0 }} level="body-xs">{ rightPaneType }</Typography>
                             </Stack>
                         }

diff --git a/src/components/trays/compare-layers/CompareLayersTray.js b/src/components/trays/compare-layers/CompareLayersTray.js
@@ -3,6 +3,7 @@ import { Stack, Typography, Box, Button, Card, Accordion, AccordionSummary, Acco
 import { useLayers, useSettings } from '@context';
 import { getNamespacedEnvParam } from "@utils/map-utils";
 import SldStyleParser from 'geostyler-sld-parser';
+import { getHeaderSummary } from "@utils/map-utils";
 
 // install the side by side compare control
 require('@side-by-side');
@@ -31,69 +32,6 @@ const getModelRunGroupList = (layers) => {
     return groupList;
 };
 
-/**
- * gets the summary header text for the layer groups.
- * This takes into account the two types of runs (tropical, synoptic)
- *
- * @param layerProps
- * @returns {string}
- */
-const getHeaderSummary = (layerProps) => {
-    // get the full accordian summary text
-    return layerProps['run_date'] + ': ' +
-        ((getPropertyName(layerProps, 'stormOrModelEle') === undefined) ? 'Data error' : getPropertyName(layerProps, 'stormOrModelEle').toUpperCase()) +
-        ', ' + getPropertyName(layerProps, 'numberName') + getPropertyName(layerProps, 'numberEle') +
-        ', Type: ' + layerProps['event_type'] +
-        ', Grid: ' + layerProps['grid_type'] +
-        ((layerProps['meteorological_model'] === 'None') ? '' : ', ' + layerProps['meteorological_model']);
-};
-
-/**
- * gets the header data property name index
- * This takes into account the two types of runs (tropical, synoptic)
- *
- * @param layerProps
- * @param type
- * @returns {string}
- */
-const getPropertyName = (layerProps, element_name) => {
-    // init the return
-    let ret_val = undefined;
-
-    // capture the name of the element for tropical storms and advisory numbers
-    if (layerProps['met_class'] === 'tropical') {
-        // by the element name
-        switch (element_name) {
-            case 'stormOrModelEle':
-                ret_val = layerProps['storm_name'];
-                break;
-            case 'numberName':
-                ret_val = ' Adv: ';
-                break;
-            case 'numberEle':
-                ret_val = layerProps['advisory_number'];
-                break;
-        }
-    }
-    // capture the name of the synoptic ADCIRC models and cycle numbers
-    else {
-        switch (element_name) {
-            case 'stormOrModelEle':
-                ret_val = layerProps['model'];
-                break;
-            case 'numberName':
-                ret_val = ' Cycle: ';
-                break;
-            case 'numberEle':
-                ret_val = layerProps['cycle'];
-                break;
-        }
-    }
-
-    // return to the caller
-    return ret_val;
-};
-
 /**
  * This component renders the model selection tray
  *

diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, AccordionDetails, AccordionGroup, Box, Divider, IconButton, Stack
-} from '@mui/joy';
+import { Accordion, AccordionDetails, AccordionGroup, Box, Divider, IconButton, Stack } from '@mui/joy';
 import { ActionButton } from '@components/buttons';
 import { KeyboardArrowDown as ExpandIcon } from '@mui/icons-material';
 import { useLayers } from '@context';
@@ -9,69 +8,7 @@ import { DeleteModelRunButton } from "@components/trays/layers/delete-layer-butt
 import { Typography } from '@mui/joy';
 import { DragHandleRounded as HandleIcon } from '@mui/icons-material';
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
-
-/**
- * gets the header data property name index
- * This takes into account the two types of runs (tropical, synoptic)
- *
- * @param layerProps
- * @param type
- * @returns {string}
- */
-const getPropertyName = (layerProps, element_name) => {
-    // init the return
-    let ret_val = undefined;
-
-    // capture the name of the element for tropical storms and advisory numbers
-    if (layerProps['met_class'] === 'tropical') {
-        // by the element name
-        switch (element_name) {
-            case 'stormOrModelEle':
-                ret_val = layerProps['storm_name'];
-                break;
-            case 'numberName':
-                ret_val = ' Adv: ';
-                break;
-            case 'numberEle':
-                ret_val = layerProps['advisory_number'];
-                break;
-        }
-    }
-    // capture the name of the synoptic ADCIRC models and cycle numbers
-    else {
-        switch (element_name) {
-            case 'stormOrModelEle':
-                ret_val = layerProps['model'];
-                break;
-            case 'numberName':
-                ret_val = ' Cycle: ';
-                break;
-            case 'numberEle':
-                ret_val = layerProps['cycle'];
-                break;
-        }
-    }
-
-    // return to the caller
-    return ret_val;
-};
-
-/**
- * gets the summary header text for the layer groups.
- * This takes into account the two types of runs (tropical, synoptic)
- *
- * @param layerProps
- * @returns {string}
- */
-const getHeaderSummary = (layerProps) => {
-    // get the full accordian summary text
-    return layerProps['run_date'] + ': ' +
-        ((getPropertyName(layerProps, 'stormOrModelEle') === undefined) ? 'Data error' : getPropertyName(layerProps, 'stormOrModelEle').toUpperCase()) +
-        ', ' + getPropertyName(layerProps, 'numberName') + getPropertyName(layerProps, 'numberEle') +
-        ', Type: ' + layerProps['event_type'] +
-        ', Grid: ' + layerProps['grid_type'] +
-        ((layerProps['meteorological_model'] === 'None') ? '' : ', ' + layerProps['meteorological_model']);
-};
+import { getHeaderSummary } from "@utils/map-utils";
 
 /**
  * renders the layer cards for a model run

diff --git a/src/utils/map-utils.js b/src/utils/map-utils.js
@@ -54,6 +54,70 @@ export const getBrandingHandler = () =>  {
     return ret_val;
 };
 
+/**
+ * gets the header data property name index
+ * This takes into account the two types of runs (tropical, synoptic)
+ *
+ * @param layerProps
+ * @param type
+ * @returns {string}
+ */
+export const getPropertyName = (layerProps, element_name) => {
+    // init the return
+    let ret_val = undefined;
+
+    // capture the name of the element for tropical storms and advisory numbers
+    if (layerProps['met_class'] === 'tropical') {
+        // by the element name
+        switch (element_name) {
+            case 'stormOrModelEle':
+                ret_val = layerProps['storm_name'];
+                break;
+            case 'numberName':
+                ret_val = ' Adv: ';
+                break;
+            case 'numberEle':
+                ret_val = layerProps['advisory_number'];
+                break;
+        }
+    }
+    // capture the name of the synoptic ADCIRC models and cycle numbers
+    else {
+        switch (element_name) {
+            case 'stormOrModelEle':
+                ret_val = layerProps['model'];
+                break;
+            case 'numberName':
+                ret_val = ' Cycle: ';
+                break;
+            case 'numberEle':
+                ret_val = layerProps['cycle'];
+                break;
+        }
+    }
+
+    // return to the caller
+    return ret_val;
+};
+
+/**
+ * gets the summary header text for the layer groups.
+ * This takes into account the two types of runs (tropical, synoptic)
+ *
+ * @param layerProps
+ * @returns {string}
+ */
+export const getHeaderSummary = (layerProps) => {
+    // get the full accordian summary text
+    return layerProps['run_date'] + ': ' +
+        ((getPropertyName(layerProps, 'stormOrModelEle') === undefined) ? 'Data error' : getPropertyName(layerProps, 'stormOrModelEle').toUpperCase()) +
+        ', ' + getPropertyName(layerProps, 'numberName') + getPropertyName(layerProps, 'numberEle') +
+        ', Type: ' + layerProps['event_type'] +
+        ', Grid: ' + layerProps['grid_type'] +
+        ', Instance: ' + layerProps['instance_name'] +
+        ((layerProps['meteorological_model'] === 'None') ? '' : ', ' + layerProps['meteorological_model']);
+};
+
 /**
  * gets an env param that includes the namespace for env param retrieval
  *