tidy up layer card contents

use small expand button
RENCI · May 4, 2024 · 3cd34d7 · 3cd34d7
1 parent ef593b6
commit 3cd34d7
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 45 deletions.
diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js
@@ -3,11 +3,11 @@ import {
   Accordion,
   AccordionGroup,
   AccordionDetails,
+  Avatar,
   Box,
   ButtonGroup,
   Divider,
   IconButton,
-  ListItemContent,
   Stack,
   Switch,
   Typography,
@@ -17,28 +17,21 @@ import {
   KeyboardArrowDown as ExpandIcon,
   ArrowDropUp as MoveUpArrow,
   ArrowDropDown as MoveDownArrow,
+  Schedule as ClockIcon,
+  DragIndicator as DragHandleIcon,
 } from '@mui/icons-material';
 import { useLayers } from '@context';
 
 export const LayersList = () => {
   const {
     defaultModelLayers,
+    layerTypes,
     removeLayer,
     swapLayers,
     toggleLayerVisibility,
   } = useLayers();
   const layers = [...defaultModelLayers];
 
-  // convert the product type to a readable layer name
-  const layer_names = {
-    obs: "Observations",
-    maxwvel63: "Maximum Wind Velocity",
-    maxele63: "Maximum Water Level",
-    swan_HS_max63: "Maximum Wave Height",
-    maxele_level_downscaled_epsg4326: "Hi-Res Maximum Water Level",
-    hec_ras_water_surface: "HEC/RAS Water Surface",
-  };
-
   const [expandedIds, setExpandedIds] = useState(new Set());
 
   const handleToggleExpansion = id => () => {
@@ -53,8 +46,8 @@ export const LayersList = () => {
   };
 
   const handleClickRemove = id => () => {
-    removeLayer(id)
-  }
+    removeLayer(id);
+  };
 
   return (
     <AccordionGroup variant="soft">
@@ -64,10 +57,7 @@ export const LayersList = () => {
           .map(layer => {
             const isExpanded = expandedIds.has(layer.id);
             const isVisible = layer.state.visible;
-            const layerTitle = layer_names[layer.properties.product_type] + " " +
-                          layer.properties.run_date + " " +
-                          layer.properties.cycle;
-
+            const LayerIcon = layerTypes[layer.properties.product_type].icon;
 
             return (
               <Accordion
@@ -89,38 +79,49 @@ export const LayersList = () => {
                     borderLeft: '6px solid',
                     borderLeftColor: isVisible ? 'primary.400' : 'primary.100',
                     '.MuiIconButton-root': { filter: 'opacity(0.1)', transition: 'filter 250ms' },
-                    '.MuiSwitch-root': { filter: 'opacity(0.1)', transition: 'filter 250ms' },
+                    '.MuiSwitch-root': {
+                      filter: 'opacity(0.1)',
+                      transition: 'filter 250ms',
+                    },
                     '&:hover .MuiIconButton-root': { filter: 'opacity(0.5)' },
                     '&:hover .MuiSwitch-root': { filter: 'opacity(0.5)' },
                     '& .MuiIconButton-root:hover': { filter: 'opacity(1.0)' },
                     '& .MuiSwitch-root:hover': { filter: 'opacity(1.0)' },
                   }}
                 >
-                  <ButtonGroup orientation="vertical" size="sm">
-                    <IconButton
-                      onClick={ () => swapLayers(layer.state.order, layer.state.order - 1) }
-                    ><MoveUpArrow /></IconButton> 
-                    <IconButton
-                      onClick={ () => swapLayers(layer.state.order, layer.state.order + 1) }
-                    ><MoveDownArrow /></IconButton> 
-                  </ButtonGroup>
-
-                  <ListItemContent>
-                    <Typography level="title-md">
-                      {layerTitle}
-                    </Typography>
-                    <Typography
-                      component="div"
-                      level="body-sm"
-                      sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                      }}
-                    >
-                      { layer.layers }
-                    </Typography>
-                  </ListItemContent>
+                  <Stack direction="column" sx={{ flex: 1 }}>
+                    <Stack direction="row" alignItems="center" sx={{ flex: 1 }}>
+                      <Avatar sx={{ width: 36, height: 36 }}>
+                        <LayerIcon size="lg" color={ isVisible ? 'primary' : 'disabled' } />
+                      </Avatar>{ console.log(layer)}
+                      <Typography level="title-md">
+                        {layerTypes[layer.properties.product_type].name}
+                      </Typography>
+                    </Stack>
+
+                    <Stack direction="row" alignItems="stretch" sx={{ flex: 1 }}>
+                      <IconButton
+                        size="sm"
+                        sx={{
+                          cursor: 'grab',
+                          filter: 'opacity(0.5)',
+                          transition: 'filter 250ms',
+                          '&:hover': {
+                            filter: 'opacity(1.0)',
+                          },
+                          m: 0,
+                        }}
+                      >
+                        <DragHandleIcon fontSize="sm" />
+                      </IconButton>
+                      <Typography level="body-sm" sx={{ display: 'inline-flex', alignItems: 'center' }}>
+                        <ClockIcon sx={{ transform: 'scale(0.66)' }} /> { new Date(layer.properties.run_date).toLocaleString() }
+                        <Typography level="body-xs" sx={{ display: 'inline-flex', alignItems: 'center', ml: 3 }}>
+                          Cycle { layer.properties.cycle }
+                        </Typography>
+                      </Typography>
+                    </Stack>
+                  </Stack>
 
                   <Stack justifyContent="space-around">
                     <Switch
@@ -138,7 +139,16 @@ export const LayersList = () => {
                     </IconButton>
                   </Stack>
 
-                  <IconButton onClick={ handleToggleExpansion(layer.id) }>
+                  <ButtonGroup orientation="vertical" size="sm" sx={{ transform: 'scaleX(0.75)' }}>
+                    <IconButton
+                      onClick={ () => swapLayers(layer.state.order, layer.state.order - 1) }
+                    ><MoveUpArrow /></IconButton> 
+                    <IconButton
+                      onClick={ () => swapLayers(layer.state.order, layer.state.order + 1) }
+                    ><MoveDownArrow /></IconButton> 
+                  </ButtonGroup>
+
+                  <IconButton onClick={ handleToggleExpansion(layer.id) } size="sm">
                     <ExpandIcon
                       fontSize="sm"
                       sx={{

diff --git a/src/context/map-context.js b/src/context/map-context.js
@@ -1,9 +1,45 @@
 import React, { createContext, useContext, useState } from "react";
 import PropTypes from "prop-types";
 
+import {
+  Tsunami as WaveHeightIcon,
+  QueryStats as ObservationIcon,
+  Air as WindVelocityIcon,
+  Water as WaterLevelIcon,
+  BlurOn as WaterSurfaceIcon,
+} from '@mui/icons-material';
+
 export const LayersContext = createContext({});
 export const useLayers = () => useContext(LayersContext);
 
+// convert the product type to a readable layer name
+const layerTypes = {
+  obs: {
+    name: "Observations",
+    icon: ObservationIcon,
+  },
+  maxwvel63: {
+    name: "Maximum Wind Velocity",
+    icon: WindVelocityIcon,
+  },
+  maxele63: {
+    name: "Maximum Water Level",
+    icon: WaterLevelIcon,
+  },
+  swan_HS_max63: {
+    name: "Maximum Wave Height",
+    icon: WaveHeightIcon,
+  },
+  maxele_level_downscaled_epsg4326: {
+    name: "Hi-Res Maximum Water Level",
+    icon: WaterLevelIcon,
+  },
+  hec_ras_water_surface: {
+    name: "HEC/RAS Water Surface",
+    icon: WaterSurfaceIcon,
+  },
+};
+
 export const LayersProvider = ({ children }) => {
   const [defaultModelLayers, setDefaultModelLayers] = useState([]);
   const [filteredModelLayers, setFilteredModelLayers] = useState([]);
@@ -80,7 +116,8 @@ export const LayersProvider = ({ children }) => {
         selectedObservations,
         setSelectedObservations,
         swapLayers,
-        removeLayer
+        removeLayer,
+        layerTypes,
       }}
     >
       {children}