diff --git a/src/components/trays/help-about/helpAboutTray.js b/src/components/trays/help-about/helpAboutTray.js index a4352fe2..6ef8fca1 100644 --- a/src/components/trays/help-about/helpAboutTray.js +++ b/src/components/trays/help-about/helpAboutTray.js @@ -1,7 +1,14 @@ import React, {Fragment} from 'react'; -import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, Typography } from '@mui/joy'; +import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, Typography, List, ListItem, ListItemDecorator } + from '@mui/joy'; +import { Layers as LayersIcon, Storm as HurricaneIcon, Checklist as ModelSelectionIcon, Delete as RemoveIcon, Tune as SettingsIcon, + Share as ShareViewIcon, HelpCenter as HelpAboutIcon, Map as MapIcon, LightMode as LightModeIcon,DragHandleRounded as HandleIcon, + KeyboardArrowDown as ExpandIcon, ArrowDropUp as MoveUpArrow, KeyboardArrowLeft, Tsunami as WaveHeightIcon, QueryStats as ObservationIcon, + Air as WindVelocityIcon, Water as WaterLevelIcon, BlurOn as WaterSurfaceIcon, Flood as FloodIcon } + from '@mui/icons-material'; + /** - * This component renders the help/about try + * This component renders the help/about tray * * @returns {JSX.Element} * @constructor @@ -9,22 +16,85 @@ import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, T export const HelpAboutTray = () => { // used to collapse other open accordions const [index, setIndex] = React.useState(0); - const [subIndex, setSubIndex] = React.useState(-1); + const [descriptionIndex, setDescriptionIndex] = React.useState(-1); + const [screenCapIndex, setScreenCapIndex] = React.useState(-1); // render the form return ( - - About + + About + { setIndex(expanded ? 0 : null); }}> - Application version - Version: { process.env.REACT_APP_VERSION } + + Application version + + + Version: { process.env.REACT_APP_VERSION } + + { setIndex(expanded ? 1 : null); }}> - Application description - Add some content here... + + Application description + + + + 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 + + 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 + + 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 + + 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 + + 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 + impacts. + + + + + { setDescriptionIndex(expanded ? 4 : null); }}> + APSViz User Interface + + 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. + + + + + @@ -32,116 +102,219 @@ export const HelpAboutTray = () => { - FAQs + FAQs + { setIndex(expanded ? 2 : null); }}> + + 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. + + + + { setIndex(expanded ? 3 : null); }}> - What FAQs should we put in here? - What sort of things should we be putting in the FAQs? Below are some examples... + + What do all the icons mean? + + + Each icon represents a functionality of the application available to the + user. + Collapsable tray items + Model run/layers selected list. + Hurricane track list. + Model run filtering and selection. + Remove various map items. + Application settings. + Share your view with a colleague. + Application help/about (here). + + + Map model layer types + Maximum Significant Wave Height layer + Observation layer + Maximum Wind Speed layer + Maximum Water Level layer + HECRAS Water Surface layer + Inundation layer + + + Other action buttons + Toggle light or dark mode. + Select a different base map. + Reorder a model run up or down in the list. + Remove a model run or layer. + or Expand or collapse an item. + or Reorder a model layer. + or Move through tropical advisories or synoptic cycles. + + { setIndex(expanded ? 4 : null); }}> - How do I capture a screenshot? + How do I capture a screenshot? + - { setSubIndex(expanded ? 0 : 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 browser surface.
    • -
  • A dialog of the screenshot will appear where you can save it to the Downloads folder or the cut/paste buffer.
    • -
- + { 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. + + - { setSubIndex(expanded ? 1 : 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 the entire browser surface.
    • -
  • A dialog of the screenshot will appear where you can save it to the Downloads folder or the cut/paste buffer.
    • -
- + { 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 + browser surface. + A dialog of the screenshot will appear where you can save it to the Downloads folder or + the cut/paste buffer. + + - { setSubIndex(expanded ? 2 : 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.
    • -
- + { 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 + the entire browser surface. + A dialog of the screenshot will appear where you can save it to the Downloads folder or + the cut/paste buffer. + + - { setSubIndex(expanded ? 3 : 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 address bar
    • -
  • Click “Capture entire page.” An image opens in a new tab.
    • -
  • Click the “Done” button.
    • -
  • Follow the directions to save the file.
    • -
- + { 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 + address bar + Click “Capture entire page.” An image opens in a new tab. + Click the “Done” button. + Follow the directions to save the file. + + - { setIndex(expanded ? 5 : null); }}> - What are some features of this application? - Add some content here... - - - { setIndex(expanded ? 6 : null); }}> - How do I add/remove Layers on the map? - Add some content here... - - - { setIndex(expanded ? 7 : null); }}> - How do I move through synoptic cycles? - Add some content here... - - { setIndex(expanded ? 8 : null); }}> - What do the icons on the left mean? - Add some content here... + + How do I add/remove/move ADCIRC model runs on the map? + + + + + The Model selection 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. + + { setIndex(expanded ? 9 : null); }}> - What are some user settings? - Add some content here... + + How do I include, remove or reorder Layers on the map? + + + + + The Model layers button. + + + 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); }}> - How do I change the base map? - Add some content here... + + How do I walk through synoptic cycles + or hurricane advisories? + + + + Note the In the control panel in the lower left corner of the application. + Click the left or right buttons to increment/decrement though synoptic cycles or + tropical advisories. + + { setIndex(expanded ? 11 : null); }}> - How do I view observation data? - Add some content here... + + What are some user settings? + + + + The Application Settings button. + + + Is for selecting light or dark + mode. + Is for selecting a different base + map. + + { setIndex(expanded ? 12 : null); }}> - How do I show/hide layers? - Add some content here... + + How do I change the base map? + + + + The Application Settings button. + + + Click on the Application Settings icon + Click on the base map icon + Select your preferred base map. + + { setIndex(expanded ? 13 : null); }}> - How do I reorder layers on the map? - Add some content here... + + 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. + -