Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

issue 236 - Adding instance name to model run details #238

Merged
merged 1 commit into from
Sep 16, 2024
+73 −186
Merged

issue 236 - Adding instance name to model run details #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 6 additions & 58 deletions src/components/compare-panel/compare-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -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 {
Expand Down Expand Up @@ -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>
}
Expand All @@ -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>
}
Expand Down
64 changes: 1 addition & 63 deletions src/components/trays/compare-layers/CompareLayersTray.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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
*
Expand Down
67 changes: 2 additions & 65 deletions src/components/trays/layers/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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
Expand Down
64 changes: 64 additions & 0 deletions src/utils/map-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down