Merge pull request #174 from RENCI/colorize-help-icons

#134 - Colorize help icons, lowering some font sizes in the trays

src/components/sidebar/sidebar.js

@@ -5,8 +5,8 @@ import { Tray } from './tray';
 import { MenuItem } from './menu-item';
 import SidebarTrays from '../trays';
 
-// ordered list of tray keys for lower portion of sidebar
-// tray for unlisted keys will be stuck into upper sidebar list.
+// ordered list of tray keys for the lower portion of sidebar
+// tray for unlisted keys will be stuck into the upper sidebar list.
 const LOWER_SIDEBAR_MENU_ITEM_IDS = [
   'help_about',
   'settings',
@@ -34,7 +34,7 @@ export const Sidebar = () => {
       setActiveKey(null);
       return;
     }
-    // otherwise, open desired tray.
+    // otherwise, open the desired tray.
     setActiveKey(newKey);
   }, [activeKey]);
 
@@ -63,7 +63,7 @@ export const Sidebar = () => {
           },
           // we'll add a delay to this exit animation to give ample time
           // for the disappearing tray get out of they view before going translucent.
-          // otherwise we see it sliding behind the sidebar
+          // otherwise, we see it sliding behind the sidebar.
           // this is also nice for accidental mouse leaves. we'll also fade slower than we un-fade.
           transition: 'max-width 250ms, filter 250ms, background-color 1000ms 500ms',
           display: 'flex',

src/components/trays/help-about/helpAboutTray.js

@@ -1,12 +1,39 @@
 import React, {Fragment} from 'react';
-import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, Typography, List,  ListItem, ListItemDecorator }
+import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, Typography, List,  ListItem, ListItemDecorator, Divider }
         from '@mui/joy';
-import { Layers as LayersIcon, Storm as HurricaneIcon, Checklist as ModelSelectionIcon, Delete as RemoveIcon, Tune as SettingsIcon,
+import { Layers as LayersIcon, Storm as HurricaneIcon, Checklist as ModelSelectionIcon, DeleteForever 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 }
+        Air as WindVelocityIcon, Water as WaterLevelIcon, BlurOn as WaterSurfaceIcon, Flood as FloodIcon, ToggleOn as OnOffIcon }
         from '@mui/icons-material';
 
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * gets a svg component for the observation point icon.
+ *
+ * @param color
+ * @param name
+ * @returns {JSX.Element}
+ */
+const getObsSVGIcon = ( color, name ) => {
+    return (
+        <Fragment>
+            <SvgIcon>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    stroke="black"
+                >
+                    <circle r="6" cx="12" cy="12" fill={ color } stroke="black" strokeWidth="1"/>
+                </svg>
+            </SvgIcon>
+            <Typography sx={{ ml: 2, fontSize: "sm"}}> {name} </Typography>
+        </Fragment>
+    );
+
+};
+
 /**
  * This component renders the help/about tray
  *
@@ -125,32 +152,41 @@ export const HelpAboutTray = () => {
                                 <Typography level="title-sm" sx={{ fontWeight: 'bold' }}>What do all the icons mean?</Typography>
                             </AccordionSummary>
                             <AccordionDetails>
-                                <Typography level="body-sm" sx={{ ml: 1 }}>Each icon represents a functionality of the application available to the
+
+                                <Typography level="body-sm" sx={{ ml: 1, mb: 1}}>Each icon represents a functionality of the application available to the
                                     user.</Typography>
-                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> Collapsable tray items
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><LayersIcon/></ListItemDecorator>Model run/layers selected list.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><HurricaneIcon/></ListItemDecorator>Hurricane track list.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ModelSelectionIcon/></ListItemDecorator>Model run filtering and selection. </ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><RemoveIcon/></ListItemDecorator>Remove various map items.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><SettingsIcon/></ListItemDecorator>Application settings.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ShareViewIcon/></ListItemDecorator>Share your view with a colleague.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><HelpAboutIcon/></ListItemDecorator>Application help/about (here).</ListItem>
+                                <Divider/>
+                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Collapsable tray items:</Typography>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><LayersIcon color="primary"/></ListItemDecorator>Model run/layers selected list</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><HurricaneIcon color="primary"/></ListItemDecorator>Hurricane track list</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ModelSelectionIcon color="primary"/></ListItemDecorator>Model run filtering and selection</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><RemoveIcon color="primary"/></ListItemDecorator>Remove various map items</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><SettingsIcon color="primary"/></ListItemDecorator>Application settings</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ShareViewIcon color="primary"/></ListItemDecorator>Share your view with a colleague</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><HelpAboutIcon color="primary"/></ListItemDecorator>Application help/about</ListItem>
                                 </List>
-
-                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> Map model layer types
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaveHeightIcon/></ListItemDecorator>Maximum Significant Wave Height layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ObservationIcon/></ListItemDecorator>Observation layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WindVelocityIcon/></ListItemDecorator>Maximum Wind Speed layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaterLevelIcon/></ListItemDecorator>Maximum Water Level layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaterSurfaceIcon/></ListItemDecorator>HECRAS Water Surface layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><FloodIcon/></ListItemDecorator>Inundation layer</ListItem>
+                                <Divider/>
+                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Map model layer types:</Typography>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaveHeightIcon color="primary"/></ListItemDecorator>Maximum Significant Wave Height</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ObservationIcon color="primary"/></ListItemDecorator>Observations</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WindVelocityIcon color="primary"/></ListItemDecorator>Maximum Wind Speed</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaterLevelIcon color="primary"/></ListItemDecorator>Maximum Water Level</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaterSurfaceIcon color="primary"/></ListItemDecorator>HECRAS Water Surface</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><FloodIcon color="primary"/></ListItemDecorator>Inundation</ListItem>
                                 </List>
-
-                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> Other action buttons
+                                <Divider/>
+                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Map observation points:</Typography>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator>{ getObsSVGIcon('#FFFF00', 'NOAA/NDBC') }</ListItemDecorator></ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator>{ getObsSVGIcon('#3D4849', 'NCEM') }</ListItemDecorator></ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator>{ getObsSVGIcon('#BEAEFA', 'NOAA/NOS') }</ListItemDecorator></ListItem>
+                                </List>
+                                <Divider/>
+                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Action buttons:</Typography>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><LightModeIcon/></ListItemDecorator>Toggle light or dark mode.</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><MapIcon/></ListItemDecorator>Select a different base map.</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><HandleIcon/></ListItemDecorator>Reorder a model run up or down in the list.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><RemoveIcon/></ListItemDecorator>Remove a model run or layer.</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><OnOffIcon color="primary"/></ListItemDecorator>Turn on/off a layer</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><RemoveIcon sx={{ color:'darkred', 'filter': 'opacity(0.5)' }}/></ListItemDecorator>Remove a model run or layer.</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><ExpandIcon/> or <ExpandIcon sx={{ transform: 'rotate(180deg)' }}/>Expand or collapse an item.</ListItemDecorator></ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><MoveUpArrow/> or <MoveUpArrow sx={{ transform: 'rotate(180deg)'}}/>Reorder a model layer.</ListItemDecorator></ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><KeyboardArrowLeft/> or <KeyboardArrowLeft sx={{ transform: 'rotate(180deg)'}}/>Move through tropical advisories or synoptic cycles.</ListItemDecorator></ListItem>

src/components/trays/layers/layer-card.js

@@ -67,7 +67,7 @@ export const LayerCard = ({ index, layer }) => {
             <Avatar variant="outlined">
               <LayerIcon size="lg" color="primary" />
             </Avatar>
-            <Typography level="title-md" sx={{ flex: 1 }}>
+            <Typography level="title-sm" sx={{ flex: 1 }}>
               {layer.properties.product_name}
             </Typography>
             <Switch

src/components/trays/layers/tray-contents.js

@@ -26,7 +26,7 @@ export const TrayContents = () => {
       return (
         <Stack p={ 2 }>
           <Button
-            size="lg"
+            size="md"
             startDecorator={ <AddLayerIcon /> }
             onClick={ handleClickToggleState }
           >Add a Model Run</Button>
@@ -36,7 +36,7 @@ export const TrayContents = () => {
     return (
       <Stack p={ 2 }>
         <Button
-          size="lg"
+          size="md"
           color="warning"
           startDecorator={ <CloseIcon /> }
           onClick={ handleClickToggleState }

src/components/trays/model-selection/DropDownOptions.js

@@ -36,7 +36,7 @@ export default function DropDownOptions(data) {
             return (
                 <Fragment>
                     {data.data[data.type].filter(item => item !== "").map(item => (
-                        <Option key={item} value={item}>{item}</Option>
+                        <Option key={item} value={item} sx={{ fontSize: "sm" }}>{item}</Option>
                     ))}
                 </Fragment>
             );

src/components/trays/model-selection/catalogItems.js

@@ -175,11 +175,11 @@ export default function CatalogItems(data) {
                                     <Stack key={ itemIndex } spacing={ 1 }>
                                         <Accordion
                                             key={ itemIndex }
-                                            sx={{ p: 0 }}
+                                            sx={{ p: 0, fontSize: "sm" }}
                                             expanded={accordianDateIndex === itemIndex}
                                             onChange={(event, expanded) => { setAccordianDateIndex(expanded ? itemIndex : null); }}>
 
-                                            <AccordionSummary sx={{ fontSize: 15 }}> {catalog['id']} </AccordionSummary>
+                                            <AccordionSummary sx={{ fontSize: 'sm' }}> { catalog['id'] } </AccordionSummary>
 
                                             <AccordionDetails> {
                                                 // loop through the data members and put them away
@@ -192,7 +192,7 @@ export default function CatalogItems(data) {
                                                     .map((mbr, mbrIdx) => (
                                                         // create the checkbox
                                                         <Checkbox
-                                                            sx={{ m: .5, fontSize: 12 }}
+                                                            sx={{ m: .5, fontSize: 'sm' }}
                                                             key={ mbrIdx }
                                                             checked={ getCheckedState(mbr.group) }
                                                             label={

src/components/trays/model-selection/synopticTab.js

@@ -256,26 +256,25 @@ export const SynopticTabForm = () => {
                                 field: { clearable: true },
                                 actionBar: { actions: ['clear'] },
                             }}
-
                             onChange={(newValue) => {
                                 setChangedSynopticDate(newValue);
                             }}/>
 
                     </LocalizationProvider>
 
-                    <Select name="synoptic-cycle" value={ synopticCycle } placeholder="Please select a cycle" onChange={ (e, newValue) => {
+                    <Select name="synoptic-cycle" sx={{ fontSize: 'md'}} value={ synopticCycle } placeholder="Please select a cycle" onChange={ (e, newValue) => {
                         setSynopticCycle(newValue);
                     }}>
                         <DropDownOptions data={ dropDownData } type={ 'cycles' }/>
                     </Select>
 
-                    <Select name="synoptic-grid" value={ synopticGrid } placeholder="Please select a grid" onChange={ (e, newValue) => {
+                    <Select name="synoptic-grid" sx={{ fontSize: 'md'}} value={ synopticGrid } placeholder="Please select a grid" onChange={ (e, newValue) => {
                         setSynopticGrid(newValue);
                     }}>
                         <DropDownOptions data={ dropDownData } type={ 'grid_types' }/>
                     </Select>
 
-                    <Select name="synoptic-instance" value={ synopticInstance } placeholder="Please select an instance" onChange={ (e, newValue) => {
+                    <Select name="synoptic-instance" sx={{ fontSize: 'md'}} value={ synopticInstance } placeholder="Please select an instance" onChange={ (e, newValue) => {
                         setSynopticInstance(newValue);
                     }}>
                         <DropDownOptions data={ dropDownData } type={'instance_names'}/>
@@ -285,7 +284,7 @@ export const SynopticTabForm = () => {
                     <Button type="reset" onClick={ resetForm }>Reset</Button>
                 </Stack>
 
-                <Divider sx={{m: 2}}/>
+                <Divider sx={{ m: 2 }}/>
 
                 <Stack>
                     { <CatalogItems data={ catalogData } isTropical={ false }/> }

src/components/trays/model-selection/tropicalTab.js

@@ -150,19 +150,19 @@ export const TropicalTabForm = () => {
         <Fragment>
             <form name={ "Tropical" } onSubmit={ formTropicalHandler }>
                 <Stack spacing={1}>
-                    <Select name="tropical-storm-name" value={ tropicalStorm } placeholder="Please select a tropical storm" onChange={(e, newValue) => {
+                    <Select name="tropical-storm-name" sx={{ fontSize: 'md'}} value={ tropicalStorm } placeholder="Please select a tropical storm" onChange={(e, newValue) => {
                         setTropicalStorm(newValue); }}>
-                        <DropDownOptions data={dropDownData} type={'storm_names'} />
+                        <DropDownOptions data={dropDownData} type={'storm_names'}/>
                     </Select>
-                    <Select name="tropical-advisory" value={ tropicalAdvisory } placeholder="Please select an advisory" onChange={(e, newValue) => {
+                    <Select name="tropical-advisory" sx={{ fontSize: 'md'}} value={ tropicalAdvisory } placeholder="Please select an advisory" onChange={(e, newValue) => {
                         setTropicalAdvisory(newValue); }}>
                         <DropDownOptions data={ dropDownData } type={ 'advisory_numbers' } />
                     </Select>
-                    <Select name="tropical-grid" value={ tropicalGrid } placeholder="Please select a grid" onChange={(e, newValue) => {
+                    <Select name="tropical-grid" sx={{ fontSize: 'md'}} value={ tropicalGrid } placeholder="Please select a grid" onChange={(e, newValue) => {
                         setTropicalGrid(newValue); }}>
                         <DropDownOptions data={ dropDownData } type={ 'grid_types' } />
                     </Select>
-                    <Select name="tropical-instance" value={ tropicalInstance } placeholder="Please select an instance" onChange={(e, newValue) => {
+                    <Select name="tropical-instance" sx={{ fontSize: 'md'}} value={ tropicalInstance } placeholder="Please select an instance" onChange={(e, newValue) => {
                         setTropicalInstance(newValue); }}>
                         <DropDownOptions data={ dropDownData } type={ 'instance_names' } />
                     </Select>