diff --git a/src/app.js b/src/app.js
index 798abe1..0794220 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,10 +1,12 @@
import React, { Fragment } from 'react';
import { Map } from '@components/map';
+import { Sidebar } from '@components/sidebar';
export const App = () => {
return (
-
+
+
);
};
diff --git a/src/components/map/default-layers.js b/src/components/map/default-layers.js
index f86f3b7..b0c3f35 100644
--- a/src/components/map/default-layers.js
+++ b/src/components/map/default-layers.js
@@ -90,7 +90,12 @@ export const DefaultLayers = () => {
data.workbench.forEach(function (layer_id) {
const layer = getCatalogEntry(data.catalog, layer_id);
if (layer)
- layer_list.push(layer);
+ layer_list.push({
+ ...layer,
+ state: {
+ visible: true,
+ }
+ });
// TODO: do we really need to do this here??!
// if this is an obs layer, need to retrieve
diff --git a/src/components/sidebar/menu-item.js b/src/components/sidebar/menu-item.js
index bd0dcce..4afcc69 100644
--- a/src/components/sidebar/menu-item.js
+++ b/src/components/sidebar/menu-item.js
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
-
import {
IconButton,
ListItem,
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index c562712..20ecc19 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -1,4 +1,5 @@
-import React, { Fragment, useCallback, useState } from 'react';
+import React from 'react';
+import { Fragment, useCallback, useState } from 'react';
import {
List,
Sheet,
@@ -17,7 +18,7 @@ export const Sidebar = () => {
setActiveIndex(-1);
return;
}
- // otherwise, open the desired tray.
+ // otherwise, open desired tray.
setActiveIndex(newIndex);
}, [activeIndex]);
diff --git a/src/components/sidebar/toggler.js b/src/components/sidebar/toggler.js
index 4bc497b..f76bee0 100644
--- a/src/components/sidebar/toggler.js
+++ b/src/components/sidebar/toggler.js
@@ -1,4 +1,5 @@
-import React, { IconButton } from '@mui/joy';
+import React from 'react';
+import { IconButton } from '@mui/joy';
import {
Menu as HamburgerIcon,
Close as CloseMenuIcon,
diff --git a/src/components/sidebar/tray.js b/src/components/sidebar/tray.js
index b45d5a9..8491684 100644
--- a/src/components/sidebar/tray.js
+++ b/src/components/sidebar/tray.js
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
-
import {
DialogContent,
DialogTitle,
diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js
index 3ea317a..c02144d 100644
--- a/src/components/trays/layers/list.js
+++ b/src/components/trays/layers/list.js
@@ -3,6 +3,7 @@ import {
Accordion,
AccordionGroup,
AccordionDetails,
+ Box,
Divider,
IconButton,
ListItemContent,
@@ -11,30 +12,28 @@ import {
Typography,
} from '@mui/joy';
import {
+ DragIndicator as DragHandleIcon,
KeyboardArrowDown as ExpandIcon,
} from '@mui/icons-material';
-import { DragIndicator as DragHandleIcon } from '@mui/icons-material';
-
-const dummyLayers = [
- {
- id: '234567',
- name: 'Ullamco anim ad',
- },
- {
- id: '0987654',
- name: 'In ad tempor',
- },
- {
- id: '9846351',
- name: 'Eu in laborum',
- },
-];
+import { useLayers } from '@context';
export const LayersList = () => {
+ const { defaultModelLayers, 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",
+ };
+
+ console.table(layers[0]);
+
const [expandedIds, setExpandedIds] = useState(new Set());
- // of course, this is dummy state.
- // real state will be maintained in some higher-up context.
- const [visibleIds, setVisibleIds] = useState(new Set());
const handleToggleExpansion = id => () => {
const _expandedIds = new Set([...expandedIds]);
@@ -47,29 +46,22 @@ export const LayersList = () => {
setExpandedIds(_expandedIds);
};
- const handleToggleVisibilitySwitch = id => () => {
- const _visibleIds = new Set([...visibleIds]);
- if (_visibleIds.has(id)) {
- _visibleIds.delete(id);
- setVisibleIds(_visibleIds);
- return;
- }
- _visibleIds.add(id);
- setVisibleIds(_visibleIds);
- };
-
return (
{
- dummyLayers.map(layer => {
+ layers.map(layer => {
const isExpanded = expandedIds.has(layer.id);
- const isVisible = visibleIds.has(layer.id);
+ const isVisible = layer.state.visible;
+ const layerTitle = layer_names[layer.properties.product_type] + " " +
+ layer.properties.run_date + " " +
+ layer.properties.cycle;
+
return (
{/*
@@ -107,18 +99,25 @@ export const LayersList = () => {
- { layer.name }
+ {layerTitle}
-
- some details.
- some details.
+
+ { layer.layers }
toggleLayerVisibility(layer.id) }
/>
@@ -131,11 +130,18 @@ export const LayersList = () => {
/>
-
- Lorem ipsum ad deserunt adipisicing deserunt sint deserunt qui occaecat consequat aliquip.
+
+ { JSON.stringify(layer.properties, null, 2) }
+
);
diff --git a/src/context/map-context.js b/src/context/map-context.js
index da1f29a..e185f0e 100644
--- a/src/context/map-context.js
+++ b/src/context/map-context.js
@@ -5,9 +5,25 @@ export const LayersContext = createContext({});
export const useLayers = () => useContext(LayersContext);
export const LayersProvider = ({ children }) => {
- const [defaultModelLayers, setDefaultModelLayers] = useState([]);
- const [filteredModelLayers, setFilteredModelLayers] = useState([]);
- const [map, setMap] = useState(null);
+ const [defaultModelLayers, setDefaultModelLayers] = useState([]);
+ const [filteredModelLayers, setFilteredModelLayers] = useState([]);
+ const [map, setMap] = useState(null);
+
+ const toggleLayerVisibility = id => {
+ const newLayers = [...defaultModelLayers];
+ const index = newLayers.findIndex(l => l.id === id);
+ if (index === -1) {
+ new Error('Could not locate layer', id);
+ return;
+ }
+ const alteredLayer = newLayers[index];
+ alteredLayer.state.visible = !alteredLayer.state.visible;
+ setDefaultModelLayers([
+ ...newLayers.slice(0, index),
+ { ...alteredLayer },
+ ...newLayers.slice(index + 1),
+ ]);
+ };
return (
{
defaultModelLayers,
setDefaultModelLayers,
filteredModelLayers,
- setFilteredModelLayers
+ setFilteredModelLayers,
+ toggleLayerVisibility,
}}
>
{children}
diff --git a/src/index.js b/src/index.js
index bc2585d..d5ea0a3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,18 @@
import React from 'react';
import { App } from './app';
import { createRoot } from 'react-dom/client';
-import { LayersProvider } from '@context';
+import { LayersProvider, SettingsProvider } from '@context';
import './index.css';
const container = document.getElementById('root');
const root = createRoot(container);
-root.render(
-
-
-
+const ProvisionedApp = () => (
+
+
+
+
+
);
+
+root.render();