diff --git a/src/components/trays/help-about/helpAboutTray.js b/src/components/trays/help-about/helpAboutTray.js
index c30216c..bf2d4a7 100644
--- a/src/components/trays/help-about/helpAboutTray.js
+++ b/src/components/trays/help-about/helpAboutTray.js
@@ -1,19 +1,40 @@
-import React, {Fragment} from 'react';
-import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails,
- Stack, Typography, List, ListItem, ListItemDecorator, Divider } from '@mui/joy';
+import React, {Fragment, useState} from 'react';
import {
- // sidebar icons
- Layers as LayersIcon, CompareArrows as CompareLayersIcon, Storm as HurricaneIcon, Checklist as ModelSelectionIcon, Delete as RemoveIcon, Tune as SettingsIcon,
- Share as ShareViewIcon, HelpCenter as HelpAboutIcon,
-
- // map model layer types
- Tsunami as WaveHeightIcon, QueryStats as ObservationIcon, Air as WindVelocityIcon, Water as WaterLevelIcon, BlurOn as WaterSurfaceIcon,
- Flood as FloodIcon, Waves as HIResMaxElevationIcon,
-
- // action buttons
- Map as MapIcon, LightMode as LightModeIcon, DragHandleRounded as HandleIcon, KeyboardArrowDown as ExpandIcon, ArrowDropUp as MoveUpArrow,
- KeyboardArrowLeft, ToggleOn as OnOffIcon, SwapVerticalCircleSharp as SwapLayersIcon
- } from '@mui/icons-material';
+ AccordionGroup, Accordion, AccordionSummary, AccordionDetails,
+ Stack, Typography, List, ListItem, ListItemDecorator, Divider, Box
+} from '@mui/joy';
+import {
+ // sidebar icons
+ Layers as LayersIcon,
+ CompareArrows as CompareLayersIcon,
+ Storm as HurricaneIcon,
+ Checklist as ModelSelectionIcon,
+ Delete as RemoveIcon,
+ Tune as SettingsIcon,
+ Share as ShareViewIcon,
+ HelpCenter as HelpAboutIcon,
+
+ // map model layer types
+ Tsunami as WaveHeightIcon,
+ QueryStats as ObservationIcon,
+ Air as WindVelocityIcon,
+ Water as WaterLevelIcon,
+ BlurOn as WaterSurfaceIcon,
+ Flood as FloodIcon,
+ Waves as HIResMaxElevationIcon,
+
+ // action buttons
+ Map as MapIcon,
+ LightMode as LightModeIcon,
+ DragHandleRounded as HandleIcon,
+ KeyboardArrowDown as ExpandIcon,
+ ArrowDropUp as MoveUpArrow,
+ KeyboardArrowLeft,
+ ToggleOn as OnOffIcon,
+ SwapVerticalCircleSharp as SwapLayersIcon
+} from '@mui/icons-material';
+
+import targetIcon from '@images/location_searching_FILL0_wght400_GRAD0_opsz24.png';
import SvgIcon from '@mui/material/SvgIcon';
@@ -24,7 +45,7 @@ import SvgIcon from '@mui/material/SvgIcon';
* @param name
* @returns React.ReactElement
*/
-const getObsSVGIcon = ( color, name ) => {
+const getObsSVGIcon = (color, name) => {
return (
@@ -33,10 +54,10 @@ const getObsSVGIcon = ( color, name ) => {
viewBox="0 0 24 24"
stroke="black"
>
-
+
- {name}
+ {name}
);
};
@@ -49,36 +70,38 @@ const getObsSVGIcon = ( color, name ) => {
*/
export const HelpAboutTray = () => {
// used to collapse other open accordions
- const [index, setIndex] = React.useState(0);
- const [descriptionIndex, setDescriptionIndex] = React.useState(-1);
- const [screenCapIndex, setScreenCapIndex] = React.useState(-1);
+ const [index, setIndex] = useState(0);
+ const [descriptionIndex, setDescriptionIndex] = useState(-1);
+ const [screenCapIndex, setScreenCapIndex] = useState(-1);
// render the form
return (
-
-
- About
+
+
+ About
- { setIndex(expanded ? 0 : null); }}>
+ {
+ setIndex(expanded ? 0 : null);
+ }}>
- Application details
+ Application details
- Version: { process.env.REACT_APP_VERSION }
+ Version: {process.env.REACT_APP_VERSION}
- Funding:
-
+ Funding:
+
DHS Coastal Resilience Center
National Ocean Partnership Program (NOPP)
RENCI
- Collaborators:
-
+ Collaborators:
+
RENCI/UNC, NCSU, UGA
DHS CRC
The Water Institute for the Gulf
@@ -87,46 +110,56 @@ export const HelpAboutTray = () => {
- { setIndex(expanded ? 1 : null); }}>
+ {
+ setIndex(expanded ? 1 : null);
+ }}>
- Application description
+ Application description
- Welcome to the visualization component(user interface) of the ADCIRC
+ Welcome to the visualization component(user interface) of the ADCIRC
Prediction System (APS). Here are some details about the entire application.
- { setDescriptionIndex(expanded ? 0 : null); }}>
- APS
+ {
+ setDescriptionIndex(expanded ? 0 : null);
+ }}>
+ APS
- APS is a collection of software layers that coordinates the
+ APS is a collection of software layers that coordinates the
application of the ADCIRC storm surge model for real-time, weather-driven predictions of coastal
hazards.
- { setDescriptionIndex(expanded ? 1 : null); }}>
- ADCIRC
+ {
+ setDescriptionIndex(expanded ? 1 : null);
+ }}>
+ ADCIRC
- ADvanced CIRCulation is a numerical model that solves the
+ ADvanced CIRCulation is a numerical model that solves the
shallow-water equations for tides, storm surge and wind-waves, using the finite element method on
linear triangular elements.
- { setDescriptionIndex(expanded ? 2 : null); }}>
- ECFLOW
+ {
+ setDescriptionIndex(expanded ? 2 : null);
+ }}>
+ ECFLOW
- ECFLOW is a workflow management system used to orchestrate
+ ECFLOW is a workflow management system used to orchestrate
ADCIRC simulations on HPC resources for real-time predictions of coastal hazards.
- { setDescriptionIndex(expanded ? 3 : null); }}>
- APSViz
+ {
+ setDescriptionIndex(expanded ? 3 : null);
+ }}>
+ APSViz
- ADCIRC Prediction System Visualization (APSViz) is the workflow
+ ADCIRC Prediction System Visualization (APSViz) is the workflow
that coordinates post-processing of ADCIRC/ECFLOW output into geospatial formats (primarily GeoTIFF)
for downstream uses. It enables the rapid and efficient visualization of APS model output that is
critical for real-time decision makers facing threats from coastal flooding, high winds and wave
@@ -135,10 +168,12 @@ export const HelpAboutTray = () => {
- { setDescriptionIndex(expanded ? 4 : null); }}>
- APSViz User Interface
+ {
+ setDescriptionIndex(expanded ? 4 : null);
+ }}>
+ APSViz User Interface
- The APSViz User interface renders the products of the APSViz
+ The APSViz User interface renders the products of the APSViz
workflows for the user. It provides the user with tools to select, interrogate and display various
ADCIRC products.
@@ -148,102 +183,148 @@ export const HelpAboutTray = () => {
-
+
-
- FAQs
+
+ FAQs
- { setIndex(expanded ? 2 : null); }}>
+ {
+ setIndex(expanded ? 2 : null);
+ }}>
- What are some features of this application?
+ What are some features of this application?
-
+
Search for and select tropical or synoptic model runs.
Display tropical hurricane tracks and cones of uncertainty.
Cycle through tropical advisories or synoptic model runs.
- Display (or hide) various model layer products such as wind speed, wave height, water levels, etc.
- Select observation points to display current and forecast timeseries data at a location.
+ Display (or hide) various model layer products such as wind speed, wave height, water levels,
+ etc.
+ Select observation points to display current and forecast timeseries data at that location.
+ Select anywhere on a map layer to display current and forecast timeseries geo-point data at that
+ location.
Compare ADCIRC model layer types.
View and adjust ADCIRC Layer colormap properties.
- { setIndex(expanded ? 3 : null); }}>
+ {
+ setIndex(expanded ? 3 : null);
+ }}>
- What do all the icons mean?
+ What do all the icons mean?
- Each icon represents a functionality of the application available to the
+ Each icon represents a functionality of the application available to
+ the
user.
- Collapsable sidebar items:
- Selected models and layers list
- Compare model run product layers
- Hurricane track list
- Model run filtering and selection
- Remove various map items
- Share your view with a colleague
- Application help/about
- Application settings
+ Collapsable sidebar items:
+ Selected models and
+ layers list
+ Compare model
+ run product layers
+ Hurricane track list
+ Model run
+ filtering and selection
+ Remove various map
+ items
+ Share your view with
+ a colleague
+ Application
+ help/about
+ Application settings
- ADCIRC model layer types:
- HECRAS water surface
- High resolution maximum water level
- Inundation area
- Observations
- Maximum significant wave height
- Maximum water level
- Maximum wind speed
+
+ ADCIRC model layer types:
+ HECRAS water
+ surface
+ High
+ resolution maximum water level
+ Inundation
+ area
+ Observations
+ Maximum significant
+ wave height
+ Maximum water level
+ Maximum wind
+ speed
- Observation point sources:
- { getObsSVGIcon('#FFFF00', 'NOAA National Buoy Center (NOAA/NDBC)') }
- { getObsSVGIcon('#BEAEFA', 'NOAA National Ocean Service (NOAA/NOS)') }
- { getObsSVGIcon('#3D4849', 'North Carolina Emergency Management (NCEM)') }
+ Observation point sources:
+ {getObsSVGIcon('#FFFF00', 'NOAA National Buoy Center (NOAA/NDBC)')}
+ {getObsSVGIcon('#BEAEFA', 'NOAA National Ocean Service (NOAA/NOS)')}
+ {getObsSVGIcon('#3D4849', 'North Carolina Emergency Management (NCEM)')}
- Action buttons:
- Toggle light or dark mode.
- Select a different base map.
- Reorder a model run up or down in the list.
- Turn on/off a layer
- Remove a model run or layer.
- Swap model run layer compare panes.
- or Expand or collapse an item.
- or Reorder a model layer.
- or Increment tropical advisories or synoptic cycles.
-
+ Action buttons:
+ A selected location
+ Toggle light or dark
+ mode.
+ Select a different base map.
+ Reorder a model run up or down in the
+ list.
+ Turn on/off a
+ layer
+ Remove a model run or layer.
+ Swap model run
+ layer compare panes.
+ or Expand
+ or collapse an item.
+ or Reorder
+ a model layer.
+ or Increment tropical advisories or synoptic
+ cycles.
+
- { setIndex(expanded ? 4 : null); }}>
- How do I capture a screenshot?
+ {
+ setIndex(expanded ? 4 : null);
+ }}>
+ How do I capture a screenshot?
- { setScreenCapIndex(expanded ? 0 : null); }}>
- Chrome
+ {
+ setScreenCapIndex(expanded ? 0 : null);
+ }}>
+ Chrome
-
+
Install and activate the Chrome Full Page Screen Capture browser extension.
A small camera icon will appear in the top right corner of the browser.
Click the camera icon.
- Click the “download image” icon and the image will be saved to the Downloads folder.
+ Click the “download image” icon and the image will be saved to the Downloads
+ folder.
- { setScreenCapIndex(expanded ? 5 : null); }}>
- Edge
+ {
+ setScreenCapIndex(expanded ? 5 : null);
+ }}>
+ Edge
-
+
Right click the browser surface.
Select `Screenshot` from the context menu that appears.
At the top of the browser you can select to capture a portion of the browser or the entire
@@ -254,10 +335,12 @@ export const HelpAboutTray = () => {
- { setScreenCapIndex(expanded ? 6 : null); }}>
- Firefox
+ {
+ setScreenCapIndex(expanded ? 6 : null);
+ }}>
+ Firefox
-
+
Right click the browser surface
Select `Take screenshot` from the context menu that appears
At the top of the browser you can select to capture the visible portion of the browser or
@@ -268,10 +351,12 @@ export const HelpAboutTray = () => {
- { setScreenCapIndex(expanded ? 7 : null); }}>
- Safari
+ {
+ setScreenCapIndex(expanded ? 7 : null);
+ }}>
+ Safari
-
+
Install and activate Awesome Screenshot
Navigate to the target page in Safari
Click the Awesome Screenshot icon (looks like a tiny camera lens) to the left of the Safari
@@ -280,184 +365,269 @@ export const HelpAboutTray = () => {
Click the “Done” button.
Follow the directions to save the file.
-
+
- { setIndex(expanded ? 8 : null); }}>
+ {
+ setIndex(expanded ? 8 : null);
+ }}>
- How do I add/remove/move ADCIRC models to/from the map?
+ How do I add/remove/move ADCIRC models to/from the map?
-
- The Model selection sidebar button.
+
+ The Model
+ selection sidebar button.
-
- Click on the ADCIRC Model selection icon.
- Select either tropical or synoptic model runs.
- Select one or more appropriate data filter parameters.
- Click on the Submit button to retrieve model runs.
- Select on the model runs returned from the query to place them on the map surface.
- When finished, retract the tray or click the Reset button to start a new search.
+
+ Click on the ADCIRC Model selection icon.
+ Select either tropical or synoptic model runs.
+ Select one or more appropriate data filter parameters.
+ Click on the Submit button to retrieve model runs.
+ Select on the model runs returned from the query to place them on the map
+ surface.
+ When finished, retract the tray or click the Reset button to start a new search.
- { setIndex(expanded ? 9 : null); }}>
+ {
+ setIndex(expanded ? 9 : null);
+ }}>
- How do I include, remove or reorder Layers on the map?
+ How do I include, remove or reorder Layers on the map?
-
- The Model layers sidebar button.
+
+ The Model layers
+ sidebar button.
-
- Click on the Model Layers icon button.
- Expand a model run.
- You can show/hide (slider), remove or reorder
+
+ Click on the Model Layers icon button.
+ Expand a model run.
+ You can show/hide (slider), remove or reorder
(up/down arrows) for individual model run layers from the list shown.
- { setIndex(expanded ? 10 : null); }}>
+ {
+ setIndex(expanded ? 10 : null);
+ }}>
- How do I step through tropical hurricane advisories or synoptic cycles?
+ How do I step through tropical hurricane advisories or synoptic
+ cycles?
-
- Note the control panel in the lower left corner of the application.
- Click the left or right buttons to increment/decrement though tropical hurricane advisories or synoptic cycles.
+
+ Note the control panel in the lower left corner of the application.
+ Click the left or right buttons to increment/decrement though tropical hurricane advisories
+ or synoptic cycles.
- { setIndex(expanded ? 11 : null); }}>
+ {
+ setIndex(expanded ? 11 : null);
+ }}>
- What are some user settings?
+ What are some user settings?
-
- The Application Settings sidebar button.
+
+ The Application
+ Settings sidebar button.
-
- Is for selecting light or dark mode.
- Is for selecting a different base map.
+
+ Is for selecting light or dark mode.
+ Is for selecting a different base
+ map.
- { setIndex(expanded ? 12 : null); }}>
+ {
+ setIndex(expanded ? 12 : null);
+ }}>
- How do I change the base map?
+ How do I change the base map?
-
- The Application Settings sidebar button.
+
+ The Application
+ Settings sidebar button.
-
- Click on the Application Settings icon
- Click on the base map icon
- Select your preferred base map.
+
+ Click on the Application Settings icon
+ Click on the base map icon
+ Select your preferred base map.
- { setIndex(expanded ? 13 : null); }}>
+ {
+ setIndex(expanded ? 13 : null);
+ }}>
- How do I view observation data?
+ How do I view observation data?
- All one has to do is select the colored/round icons on the map. When you
- do, a dialog/chart will appear that displays the time-sequenced information at that observation point.
-
+
+
+
+ {getObsSVGIcon('#FFFF00', '')}
+ {getObsSVGIcon('#BEAEFA', '')}
+ {getObsSVGIcon('#3D4849', '')} The observation point icons.
+
+
+
+ The
+ selected point icon.
+
+
+
+ All one has to do is select a observation point icon on the map. When
+ you do, a dialog/chart will appear that displays the time-sequenced information at that observation
+ location.
+
You have the ability to move or resize the dialog that appears.
You can also turn on/off plot lines on the chart.
- { setIndex(expanded ? 14 : null); }}>
+ {
+ setIndex(expanded ? 14 : null);
+ }}>
- How do I compare model run layers?
+ How do I view surface time series data at a selected lon/lat?
+
+ The selected location icon.
+
-
- The Compare Layers button.
+
+ The user may select one or more points on the active Maximum Water Level or Maximum
+ Surface Wave Height surface features to plot available nowcast and forecast model values.
+ The nowcast looks back 6 hours. For each target point, a plot will be presented and the associated lat/lon
+ values will be included in the plot titles. If no data are available, the plot chart will report a warning
+ indicating a problem with collecting data. Data may be unavailable for multiple reasons including model runs that
+ did not compute the quantity of interest or selecting a lat/lon target that are outside the model grid,
+ such as inland.
+
+
+
+ You have the ability to move or resize the dialog that appears.
+ You can also turn on/off plot lines on the chart.
+
+
+
+ Please note that this feature is not available when in Compare Layers mode.
+
+
+
+
+ {
+ setIndex(expanded ? 15 : null);
+ }}>
+
+ How do I compare model run layers?
+
+
+
+ The Compare
+ Layers button.
-
- Select a Model run and layer for the left pane.
- Select a Model run and layer for the right pane.
- Select the Reset button to clear your selections.
- Select the Swap button to reposition your selections.
+
+
+ Select a Model run and layer for the left pane.
+ Select a Model run and layer for the right pane.
+ Select the Reset button to clear your selections.
+ Select the Swap button to reposition your selections.
- Note: Adding, removing or altering model runs or layers will automatically
- restore the default view.
+ Note: Adding, removing or altering model runs or layers will automatically
+ restore the default view.
+
- { setIndex(expanded ? 15 : null); }}>
+ {
+ setIndex(expanded ? 16 : null);
+ }}>
- How do I view or adjust ADCIRC layer colormap ranges?
+ How do I view or adjust ADCIRC layer colormap
+ ranges?
-
- The Application Settings sidebar button.
+
+ The Application
+ Settings sidebar button.
-
+
Users have the ability to change the colormap ranges for ADCIRC layer product types within the "Edit
ADCIRC Layer Colormaps" section in the Application Settings sidebar.
-
+
The colormap ranges for each layer product are found on the "Basic tab". These settings allow a
user to specify the minimum and maximum values attributed to the colormap range for that layer product.
-
- Select the Edit ADCIRC Layer Colormaps "Basic" tab.
- Find the layer product range you would like to adjust.
- Use the slider buttons to specify the minimum and maximum color ranges for a layer product.
+
+ Select the Edit ADCIRC Layer Colormaps "Basic" tab.
+ Find the layer product range you would like to adjust.
+ Use the slider buttons to specify the minimum and maximum color ranges for a layer
+ product.
- { setIndex(expanded ? 16 : null); }}>
+ {
+ setIndex(expanded ? 17 : null);
+ }}>
- How do I view or adjust ADCIRC layer colormap styles?
+ How do I view or adjust ADCIRC layer colormap
+ styles?
-
- The Application Settings sidebar button.
+
+ The Application
+ Settings sidebar button.
-
+
Users have the ability to view or alter colormap styles for ADCIRC layer product types within the "Edit
ADCIRC Layer Colormaps" section of the Application Settings sidebar.
-
- The colormap styles for each layer product are found on the "Advanced" tab. These setting allows a user to specify the
+
+ The colormap styles for each layer product are found on the "Advanced" tab. These setting allows a user
+ to specify the
values attributed to the colormap for that layer product.
-
- Select the Edit ADCIRC Layer Colormaps "Advanced" tab.
- Choose the layer product type you would like to modify.
- Optionally select the colormap style type. "Ramp" is a continuous color gradient, while "Interval" represent color steps.
- Optionally select the colormap number of classes. This value divides the colormap steps into the number of classes.
- Optionally select a colormap Color ramp. A Color ramp is a graded palette of colors.
- Select the "Save New Colormap" button to save your selection(s).
+
+ Select the Edit ADCIRC Layer Colormaps "Advanced" tab.
+ Choose the layer product type you would like to modify.
+ Optionally select the colormap style type. "Ramp" is a continuous color gradient,
+ while "Interval" represent color steps.
+ Optionally select the colormap number of classes. This value divides the colormap steps
+ into the number of classes.
+ Optionally select a colormap Color ramp. A Color ramp is a graded palette of
+ colors.
+ Select the "Save New Colormap" button to save your selection(s).