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

Issue 271 - Adding help/about FAQs for the new colormap functionality. #275

Merged
merged 1 commit into from
Oct 7, 2024
Merged

Issue 271 - Adding help/about FAQs for the new colormap functionality. #275

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
71 changes: 65 additions & 6 deletions src/components/trays/help-about/helpAboutTray.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, {Fragment} from 'react';
import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, Typography, List, ListItem, ListItemDecorator, Divider }
from '@mui/joy';

import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails,
Stack, Typography, List, ListItem, ListItemDecorator, Divider } from '@mui/joy';
import {
// sidebar icons
Layers as LayersIcon, CompareArrows as CompareLayersIcon, Storm as HurricaneIcon, Checklist as ModelSelectionIcon, Delete as RemoveIcon, Tune as SettingsIcon,
Expand All @@ -23,7 +22,7 @@ import SvgIcon from '@mui/material/SvgIcon';
*
* @param color
* @param name
* @returns {JSX.Element}
* @returns JSX.Element
*/
const getObsSVGIcon = ( color, name ) => {
return (
Expand All @@ -40,13 +39,12 @@ const getObsSVGIcon = ( color, name ) => {
<Typography sx={{ ml: 2, fontSize: "sm"}}>&nbsp;{name}</Typography>
</Fragment>
);

};

/**
* This component renders the help/about tray
*
* @returns {JSX.Element}
* @returns JSX.Element
* @constructor
*/
export const HelpAboutTray = () => {
Expand Down Expand Up @@ -153,6 +151,7 @@ export const HelpAboutTray = () => {
<ListItem>Display (or hide) various model layer products such as wind speed, wave height, water levels, etc.</ListItem>
<ListItem>Select observation points to display current and forecast timeseries data at a location.</ListItem>
<ListItem>Compare ADCIRC model layer types.</ListItem>
<ListItem>View and adjust ADCIRC Layer colormap properties.</ListItem>
</List>
</AccordionDetails>
</Accordion>
Expand Down Expand Up @@ -386,6 +385,66 @@ export const HelpAboutTray = () => {

</AccordionDetails>
</Accordion>

<Accordion expanded={index === 15} onChange={ (event, expanded) => { setIndex(expanded ? 15 : null); }}>
<AccordionSummary>
<Typography level="title-sm" sx={{ fontWeight: 'bold' }}>How do I view or adjust ADCIRC layer colormap ranges?</Typography>
</AccordionSummary>
<AccordionDetails>

<List sx={{ fontSize: "sm" }}>
<ListItem sx={{ ml: 1 }}><ListItemDecorator><SettingsIcon color="primary"/></ListItemDecorator>The Application Settings sidebar button.</ListItem>
</List>

<Typography sx={{ fontSize: "sm", ml: 1 }}>
Users have the ability to change the colormap ranges for ADCIRC layer product types within the &quot;Edit
ADCIRC Layer Colormaps&quot; section in the Application Settings sidebar.
</Typography>

<Typography sx={{ fontSize: "sm", mt: 1, ml: 1 }}>
The colormap ranges for each layer product are found on the &quot;Basic tab&quot;. These settings allow a
user to specify the minimum and maximum values attributed to the colormap range for that layer product.
</Typography>

<List marker="decimal" sx={{ ml: 2, fontSize: "sm" }}>
<ListItem sx={{ ml: 1 }}>Select the Edit ADCIRC Layer Colormaps &quot;Basic&quot; tab.</ListItem>
<ListItem sx={{ ml: 1 }}>Find the layer product range you would like to adjust.</ListItem>
<ListItem sx={{ ml: 1 }}>Use the slider buttons to specify the minimum and maximum color ranges for a layer product.</ListItem>
</List>
</AccordionDetails>
</Accordion>

<Accordion expanded={index === 15} onChange={ (event, expanded) => { setIndex(expanded ? 15 : null); }}>
<AccordionSummary>
<Typography level="title-sm" sx={{ fontWeight: 'bold' }}>How do I view or adjust ADCIRC layer colormap styles?</Typography>
</AccordionSummary>
<AccordionDetails>

<List sx={{ fontSize: "sm" }}>
<ListItem sx={{ ml: 1 }}><ListItemDecorator><SettingsIcon color="primary"/></ListItemDecorator>The Application Settings sidebar button.</ListItem>
</List>

<Typography sx={{ fontSize: "sm", ml: 1 }}>
Users have the ability to view or alter colormap styles for ADCIRC layer product types within the &quot;Edit
ADCIRC Layer Colormaps&quot; section of the Application Settings sidebar.
</Typography>

<Typography sx={{ fontSize: "sm", mt: 1, ml: 1 }}>
The colormap styles for each layer product are found on the &quot;Advanced&quot; tab. These setting allows a user to specify the
values attributed to the colormap for that layer product.
</Typography>

<List marker="decimal" sx={{ ml: 2, fontSize: "sm" }}>
<ListItem sx={{ ml: 1 }}>Select the Edit ADCIRC Layer Colormaps &quot;Advanced&quot; tab.</ListItem>
<ListItem sx={{ ml: 1 }}>Choose the layer product type you would like to modify.</ListItem>
<ListItem sx={{ ml: 1 }}>Optionally select the colormap style type. &quot;Ramp&quot; is a continuous color gradient, while &quot;Interval&quot; represent color steps.</ListItem>
<ListItem sx={{ ml: 1 }}>Optionally select the colormap number of classes. This value divides the colormap steps into the number of classes.</ListItem>
<ListItem sx={{ ml: 1 }}>Optionally select a colormap Color ramp. A Color ramp is a graded palette of colors.</ListItem>
<ListItem sx={{ ml: 1 }}>Select the &quot;Save New Colormap&quot; button to save your selection(s).</ListItem>
</List>
</AccordionDetails>
</Accordion>

</Stack>
</AccordionGroup>
</Stack>
Expand Down
Loading