diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js
index 0c49bd7b..bcd48f58 100644
--- a/src/components/trays/layers/list.js
+++ b/src/components/trays/layers/list.js
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
import {
Accordion,
AccordionGroup,
@@ -19,173 +20,192 @@ import {
ArrowDropDown as MoveDownArrow,
Schedule as ClockIcon,
DragIndicator as DragHandleIcon,
+ Opacity as OpacityIcon,
+ Palette as ColorRampIcon,
} from '@mui/icons-material';
import { useLayers } from '@context';
+import { useToggleState } from '@hooks';
export const LayersList = () => {
+ const { defaultModelLayers } = useLayers();
+ const layers = [...defaultModelLayers];
+
+ return (
+
+ {
+ layers
+ .sort((a, b) => a.state.order - b.state.order)
+ .map((layer, index) => {
+ return (
+
+ );
+ })
+ }
+
+
+ );
+};
+
+const LayerCard = ({ index, layer }) => {
const {
- defaultModelLayers,
layerTypes,
removeLayer,
swapLayers,
toggleLayerVisibility,
} = useLayers();
- const layers = [...defaultModelLayers];
-
- const [expandedIds, setExpandedIds] = useState(new Set());
-
- const handleToggleExpansion = id => () => {
- const _expandedIds = new Set([...expandedIds]);
- if (_expandedIds.has(id)) {
- _expandedIds.delete(id);
- setExpandedIds(_expandedIds);
- return;
- }
- _expandedIds.add(id);
- setExpandedIds(_expandedIds);
- };
+ const expanded = useToggleState(false);
+ const isVisible = layer.state.visible;
+ const LayerIcon = layerTypes[layer.properties.product_type].icon;
const handleClickRemove = id => () => {
removeLayer(id);
};
return (
-
- {
- layers
- .sort((a, b) => a.state.order - b.state.order)
- .map((layer, index) => {
- const isExpanded = expandedIds.has(layer.id);
- const isVisible = layer.state.visible;
- const LayerIcon = layerTypes[layer.properties.product_type].icon;
+
+ {/*
+ the usual AccordionSummary component results in a button,
+ but we want some buttons _inside_ the accordion summary,
+ so we'll build a custom component here.
+ */}
+
+
+
+
+
+
+
+ {layerTypes[layer.properties.product_type].name}
+
+
- return (
-
- {/*
- the usual AccordionSummary component results in a button,
- but we want some buttons _inside_ the accordion summary,
- so we'll build a custom component here.
- */}
-
-
-
-
-
-
-
- {layerTypes[layer.properties.product_type].name}
-
-
+
+
+
+
+
+ { new Date(layer.properties.run_date).toLocaleString() }
+
+ Cycle { layer.properties.cycle }
+
+
+
+
-
-
-
-
-
- { new Date(layer.properties.run_date).toLocaleString() }
-
- Cycle { layer.properties.cycle }
-
-
-
-
+ {/* layer card actions start */}
+
+ toggleLayerVisibility(layer.id) }
+ />
- {/* card actions start */}
-
- toggleLayerVisibility(layer.id) }
- />
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ swapLayers(index, index - 1) }
+ sx={{ flex: 1 }}
+ >
+ swapLayers(index, index + 1) }
+ sx={{ flex: 1 }}
+ >
+
+
+ {/* layer card actions end */}
+
+
+
+
+
+
+
+ { JSON.stringify(layer.properties, null, 2) }
+
+
+
-
- swapLayers(index, index - 1) }
- sx={{ flex: 1 }}
- >
- swapLayers(index, index + 1) }
- sx={{ flex: 1 }}
- >
-
- {/* card actions end */}
-
-
-
-
-
-
-
- { JSON.stringify(layer.properties, null, 2) }
-
-
-
- );
- })
- }
-
-
);
};
+
+LayerCard.propTypes = {
+ index: PropTypes.number.isRequired,
+ layer: PropTypes.object.isRequired,
+};