From bee22e12b7a9f4a280b7b0943b1b9c9a4fc987b7 Mon Sep 17 00:00:00 2001 From: Matt Watson Date: Tue, 30 Apr 2024 20:46:09 -0400 Subject: [PATCH 1/6] uncomment hurricanes menu item/tray. access layers context in layers tray --- src/components/trays/index.js | 4 ++-- src/components/trays/layers/tray-contents.js | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/trays/index.js b/src/components/trays/index.js index f428987..b9645de 100644 --- a/src/components/trays/index.js +++ b/src/components/trays/index.js @@ -1,10 +1,10 @@ import * as layers from './layers' -// import * as hurricanes from './hurricanes' +import * as hurricanes from './hurricanes' import * as settings from './settings' export default { layers, - // hurricanes, + hurricanes, settings, } diff --git a/src/components/trays/layers/tray-contents.js b/src/components/trays/layers/tray-contents.js index a20c380..2cab4b9 100644 --- a/src/components/trays/layers/tray-contents.js +++ b/src/components/trays/layers/tray-contents.js @@ -6,12 +6,16 @@ import { } from '@mui/icons-material' import { LayersList } from './list' import { AddLayerForm } from './form' +import { useLayers } from '@context' const FORM = 'FORM' const LIST = 'LIST' export const TrayContents = () => { const [state, setState] = useState(LIST) + const layers = useLayers() + + console.log(layers) const handleClickToggleState = () => { if (state === FORM) { From d7dca9187cf342047bf482de66e81c33877eea57 Mon Sep 17 00:00:00 2001 From: Matt Watson Date: Tue, 30 Apr 2024 21:17:44 -0400 Subject: [PATCH 2/6] bring default layers into layers tray --- src/app.js | 2 +- src/components/sidebar/menu-item.js | 1 + src/components/sidebar/sidebar.js | 1 + src/components/sidebar/tray.js | 1 + src/components/trays/hurricanes.js | 1 + src/components/trays/layers/form.js | 1 + src/components/trays/layers/index.js | 1 + src/components/trays/layers/list.js | 55 +++++++++++--------- src/components/trays/layers/tray-contents.js | 6 +-- src/components/trays/settings/index.js | 1 + src/components/trays/settings/sample.js | 1 + src/context/index.js | 4 +- src/context/settings.js | 10 ++-- src/hooks/index.js | 4 +- src/hooks/use-local-storage.js | 26 ++++----- src/hooks/use-toggle-state.js | 28 +++++----- src/index.js | 1 + 17 files changed, 77 insertions(+), 67 deletions(-) diff --git a/src/app.js b/src/app.js index 5246e0b..6c4904c 100644 --- a/src/app.js +++ b/src/app.js @@ -1,4 +1,4 @@ -import { Fragment } from 'react' +import React, { Fragment } from 'react' import { Map } from '@components/map' import { Sidebar } from '@components/sidebar' diff --git a/src/components/sidebar/menu-item.js b/src/components/sidebar/menu-item.js index fb56905..453434d 100644 --- a/src/components/sidebar/menu-item.js +++ b/src/components/sidebar/menu-item.js @@ -1,3 +1,4 @@ +import React from 'react' import PropTypes from 'prop-types' import { IconButton, diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index 5dd71f2..d0d0804 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -1,3 +1,4 @@ +import React from 'react' import { Fragment, useCallback, useState } from 'react' import { List, diff --git a/src/components/sidebar/tray.js b/src/components/sidebar/tray.js index 924748e..86504c8 100644 --- a/src/components/sidebar/tray.js +++ b/src/components/sidebar/tray.js @@ -1,3 +1,4 @@ +import React from 'react' import PropTypes from 'prop-types' import { DialogContent, diff --git a/src/components/trays/hurricanes.js b/src/components/trays/hurricanes.js index e08ca88..d770126 100644 --- a/src/components/trays/hurricanes.js +++ b/src/components/trays/hurricanes.js @@ -1,3 +1,4 @@ +import React from 'react' import { Storm as HurricaneIcon } from '@mui/icons-material' export const icon = diff --git a/src/components/trays/layers/form.js b/src/components/trays/layers/form.js index 32252b2..84e531f 100644 --- a/src/components/trays/layers/form.js +++ b/src/components/trays/layers/form.js @@ -1,3 +1,4 @@ +import React from 'react' import { Stack } from '@mui/joy' export const AddLayerForm = () => { diff --git a/src/components/trays/layers/index.js b/src/components/trays/layers/index.js index af4afc4..233edaa 100644 --- a/src/components/trays/layers/index.js +++ b/src/components/trays/layers/index.js @@ -1,3 +1,4 @@ +import React from 'react' import { Layers as LayersIcon } from '@mui/icons-material' import { TrayContents } from './tray-contents' diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js index f1c1bb0..3429573 100644 --- a/src/components/trays/layers/list.js +++ b/src/components/trays/layers/list.js @@ -1,8 +1,9 @@ -import { useState } from 'react' +import React, { useState } from 'react' import { Accordion, AccordionGroup, AccordionDetails, + Box, Divider, IconButton, ListItemContent, @@ -11,26 +12,17 @@ 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 } = useLayers() + const layers = [...defaultModelLayers] + + console.log(layers) + const [expandedIds, setExpandedIds] = useState(new Set()) // of course, this is dummy state. // real state will be maintained in some higher-up context. @@ -61,7 +53,7 @@ export const LayersList = () => { return ( { - dummyLayers.map(layer => { + layers.map(layer => { const isExpanded = expandedIds.has(layer.id) const isVisible = visibleIds.has(layer.id) @@ -69,7 +61,7 @@ export const LayersList = () => { {/* @@ -107,11 +99,18 @@ export const LayersList = () => { - { layer.name } + { layer.id } - - some details. - some details. + + { layer.layers } @@ -131,11 +130,17 @@ 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/components/trays/layers/tray-contents.js b/src/components/trays/layers/tray-contents.js index 2cab4b9..b28b3c4 100644 --- a/src/components/trays/layers/tray-contents.js +++ b/src/components/trays/layers/tray-contents.js @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'react' +import React, { useCallback, useState } from 'react' import { Button, Stack } from '@mui/joy' import { Add as AddLayerIcon, @@ -6,16 +6,12 @@ import { } from '@mui/icons-material' import { LayersList } from './list' import { AddLayerForm } from './form' -import { useLayers } from '@context' const FORM = 'FORM' const LIST = 'LIST' export const TrayContents = () => { const [state, setState] = useState(LIST) - const layers = useLayers() - - console.log(layers) const handleClickToggleState = () => { if (state === FORM) { diff --git a/src/components/trays/settings/index.js b/src/components/trays/settings/index.js index 1dbfca7..5ba08f9 100644 --- a/src/components/trays/settings/index.js +++ b/src/components/trays/settings/index.js @@ -1,3 +1,4 @@ +import React from 'react' import { Stack } from '@mui/joy' import { Tune as SettingsIcon } from '@mui/icons-material' diff --git a/src/components/trays/settings/sample.js b/src/components/trays/settings/sample.js index 06c1e0c..6906cda 100644 --- a/src/components/trays/settings/sample.js +++ b/src/components/trays/settings/sample.js @@ -1,3 +1,4 @@ +import React from 'react' import { IconButton, Stack, Typography } from '@mui/joy' import { CheckCircle as OnIcon, diff --git a/src/context/index.js b/src/context/index.js index 99feccb..408b90a 100644 --- a/src/context/index.js +++ b/src/context/index.js @@ -1,2 +1,2 @@ -export * from './map-context' -export * from './settings' +export * from './map-context'; +export * from './settings'; diff --git a/src/context/settings.js b/src/context/settings.js index 6da3e1b..a3bdd0a 100644 --- a/src/context/settings.js +++ b/src/context/settings.js @@ -3,13 +3,13 @@ import PropTypes from "prop-types"; import { // useToggleLocalStorage, useToggleState, -} from '@hooks' +} from '@hooks'; export const SettingsContext = createContext({}); -export const useSettings = () => useContext(SettingsContext) +export const useSettings = () => useContext(SettingsContext); export const SettingsProvider = ({ children }) => { - const booleanValue = useToggleState() + const booleanValue = useToggleState(); // to persist the value in the device's local // storage, use `useToggleLocalStorage` instead: // const booleanValue = useToggleLocalStorage('boolean-value') @@ -18,8 +18,8 @@ export const SettingsProvider = ({ children }) => { { children } - ) -} + ); +}; SettingsProvider.propTypes = { diff --git a/src/hooks/index.js b/src/hooks/index.js index f391b7c..d48cb3a 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -1,2 +1,2 @@ -export * from './use-local-storage' -export * from './use-toggle-state' +export * from './use-local-storage'; +export * from './use-toggle-state'; diff --git a/src/hooks/use-local-storage.js b/src/hooks/use-local-storage.js index 7045f04..7fd7b78 100644 --- a/src/hooks/use-local-storage.js +++ b/src/hooks/use-local-storage.js @@ -1,36 +1,36 @@ -import { useState } from 'react' +import { useState } from 'react'; export const useLocalStorage = (key, initialValue) => { // Pass key and initial state to useState so logic is only executed once const [storedValue, setStoredValue] = useState(() => { try { // Get from local storage by key - const item = window.localStorage.getItem(key) + const item = window.localStorage.getItem(key); // Parse stored json or if none return initialValue - return item ? JSON.parse(item) : initialValue + return item ? JSON.parse(item) : initialValue; } catch (error) { // If error also return initialValue - console.error(error.message) - return initialValue + console.error(error.message); + return initialValue; } - }) + }); // Return a wrapped version of useState's setter function that ... // ... persists the new value to localStorage. const setValue = value => { try { // Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(storedValue) : value + const valueToStore = value instanceof Function ? value(storedValue) : value; // Save state - setStoredValue(valueToStore) + setStoredValue(valueToStore); // Save to local storage - window.localStorage.setItem(key, JSON.stringify(valueToStore)) + window.localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { // A more advanced implementation would handle the error case - console.error(error.message) + console.error(error.message); } - } + }; - return [storedValue, setValue] -} + return [storedValue, setValue]; +}; diff --git a/src/hooks/use-toggle-state.js b/src/hooks/use-toggle-state.js index b20e226..f3706a1 100644 --- a/src/hooks/use-toggle-state.js +++ b/src/hooks/use-toggle-state.js @@ -1,30 +1,30 @@ -import { useCallback, useState } from 'react' -import { useLocalStorage } from '@hooks' +import { useCallback, useState } from 'react'; +import { useLocalStorage } from '@hooks'; export const useToggleState = (initialValue = false) => { - const [value, setValue] = useState(initialValue) - const toggleValue = useCallback(() => setValue(!value), [value]) - const setTrue = useCallback(() => setValue(true), [value]) - const setFalse = useCallback(() => setValue(false), [value]) + const [value, setValue] = useState(initialValue); + const toggleValue = useCallback(() => setValue(!value), [value]); + const setTrue = useCallback(() => setValue(true), [value]); + const setFalse = useCallback(() => setValue(false), [value]); return { enabled: value, toggle: toggleValue, set: setTrue, unset: setFalse, - } -} + }; +}; export const useToggleLocalStorage = (key, initialValue = false) => { - const [value, setValue] = useLocalStorage(key, initialValue) - const toggleValue = useCallback(() => setValue(!value), [value]) - const setTrue = useCallback(() => setValue(true), [value]) - const setFalse = useCallback(() => setValue(false), [value]) + const [value, setValue] = useLocalStorage(key, initialValue); + const toggleValue = useCallback(() => setValue(!value), [value]); + const setTrue = useCallback(() => setValue(true), [value]); + const setFalse = useCallback(() => setValue(false), [value]); return { enabled: value, toggle: toggleValue, set: setTrue, unset: setFalse, - } -} + }; +}; diff --git a/src/index.js b/src/index.js index 5a747b0..8089b02 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +import React from 'react' import { App } from './app' import { createRoot } from 'react-dom/client' import { LayersProvider, SettingsProvider } from '@context' From 46f4939dbae452c0bf039e1af5728875ee1464a8 Mon Sep 17 00:00:00 2001 From: Matt Watson Date: Tue, 30 Apr 2024 21:32:05 -0400 Subject: [PATCH 3/6] eslint fixes --- src/app.js | 6 +-- src/components/sidebar/index.js | 2 +- src/components/sidebar/menu-item.js | 12 ++--- src/components/sidebar/sidebar.js | 30 +++++------ src/components/sidebar/toggler.js | 13 ++--- src/components/sidebar/tray.js | 14 ++--- src/components/trays/hurricanes.js | 10 ++-- src/components/trays/index.js | 8 +-- src/components/trays/layers/form.js | 8 +-- src/components/trays/layers/index.js | 12 ++--- src/components/trays/layers/list.js | 57 ++++++++++---------- src/components/trays/layers/tray-contents.js | 34 ++++++------ src/components/trays/settings/index.js | 14 ++--- src/components/trays/settings/sample.js | 24 ++++----- src/index.js | 14 ++--- 15 files changed, 130 insertions(+), 128 deletions(-) diff --git a/src/app.js b/src/app.js index 6c4904c..0794220 100644 --- a/src/app.js +++ b/src/app.js @@ -1,6 +1,6 @@ -import React, { Fragment } from 'react' -import { Map } from '@components/map' -import { Sidebar } from '@components/sidebar' +import React, { Fragment } from 'react'; +import { Map } from '@components/map'; +import { Sidebar } from '@components/sidebar'; export const App = () => { return ( diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js index 28a1f2a..b2ba9a4 100644 --- a/src/components/sidebar/index.js +++ b/src/components/sidebar/index.js @@ -1 +1 @@ -export * from './sidebar' +export * from './sidebar'; diff --git a/src/components/sidebar/menu-item.js b/src/components/sidebar/menu-item.js index 453434d..4afcc69 100644 --- a/src/components/sidebar/menu-item.js +++ b/src/components/sidebar/menu-item.js @@ -1,10 +1,10 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React from 'react'; +import PropTypes from 'prop-types'; import { IconButton, ListItem, Tooltip, -} from '@mui/joy' +} from '@mui/joy'; export const MenuItem = ({ Icon, title, onClick, active }) => { return ( @@ -24,13 +24,13 @@ export const MenuItem = ({ Icon, title, onClick, active }) => { - ) -} + ); +}; MenuItem.propTypes = { active: PropTypes.bool.isRequired, Icon: PropTypes.node.isRequired, onClick: PropTypes.func.isRequired, title: PropTypes.string.isRequired, -} +}; diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index d0d0804..20ecc19 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -1,26 +1,26 @@ -import React from 'react' -import { Fragment, useCallback, useState } from 'react' +import React from 'react'; +import { Fragment, useCallback, useState } from 'react'; import { List, Sheet, -} from '@mui/joy' -import { Tray } from './tray' -import { MenuItem } from './menu-item' -import SidebarTrays from '../trays' +} from '@mui/joy'; +import { Tray } from './tray'; +import { MenuItem } from './menu-item'; +import SidebarTrays from '../trays'; export const Sidebar = () => { - const [activeIndex, setActiveIndex] = useState(-1) + const [activeIndex, setActiveIndex] = useState(-1); const handleClickMenuItem = useCallback(newIndex => { // if the incoming new index equals the old index, // then the user wants to close the currently open tray. if (newIndex === activeIndex) { - setActiveIndex(-1) - return + setActiveIndex(-1); + return; } // otherwise, open desired tray. - setActiveIndex(newIndex) - }, [activeIndex]) + setActiveIndex(newIndex); + }, [activeIndex]); return ( @@ -61,7 +61,7 @@ export const Sidebar = () => { Icon={ SidebarTrays[key].icon } onClick={ () => handleClickMenuItem(index) } /> - ) + ); }) } @@ -76,9 +76,9 @@ export const Sidebar = () => { Contents={ SidebarTrays[key].trayContents } closeHandler={ () => setActiveIndex(-1) } /> - ) + ); }) } - ) -} + ); +}; diff --git a/src/components/sidebar/toggler.js b/src/components/sidebar/toggler.js index 0d14707..f0b8551 100644 --- a/src/components/sidebar/toggler.js +++ b/src/components/sidebar/toggler.js @@ -1,12 +1,13 @@ -import { IconButton } from '@mui/joy' +import React from 'react' +import { IconButton } from '@mui/joy'; import { Menu as HamburgerIcon, Close as CloseMenuIcon, -} from '@mui/icons-material' -import { useLayout } from '@context' +} from '@mui/icons-material'; +import { useLayout } from '@context'; export const DrawerToggler = () => { - const { drawer } = useLayout() + const { drawer } = useLayout(); return ( { > { drawer.isOpen ? : } - ) -} + ); +}; diff --git a/src/components/sidebar/tray.js b/src/components/sidebar/tray.js index 86504c8..8491684 100644 --- a/src/components/sidebar/tray.js +++ b/src/components/sidebar/tray.js @@ -1,5 +1,5 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React from 'react'; +import PropTypes from 'prop-types'; import { DialogContent, DialogTitle, @@ -7,10 +7,10 @@ import { IconButton, Sheet, Stack, -} from '@mui/joy' +} from '@mui/joy'; import { KeyboardDoubleArrowLeft as CloseTrayIcon, -} from '@mui/icons-material' +} from '@mui/icons-material'; export const Tray = ({ active, Contents, title, closeHandler }) => { return ( @@ -59,8 +59,8 @@ export const Tray = ({ active, Contents, title, closeHandler }) => { - ) -} + ); +}; Tray.propTypes = { active: PropTypes.bool.isRequired, @@ -70,4 +70,4 @@ Tray.propTypes = { ]).isRequired, title: PropTypes.string.isRequired, closeHandler: PropTypes.func.isRequired, -} +}; diff --git a/src/components/trays/hurricanes.js b/src/components/trays/hurricanes.js index d770126..7ec41a2 100644 --- a/src/components/trays/hurricanes.js +++ b/src/components/trays/hurricanes.js @@ -1,6 +1,6 @@ -import React from 'react' -import { Storm as HurricaneIcon } from '@mui/icons-material' +import React from 'react'; +import { Storm as HurricaneIcon } from '@mui/icons-material'; -export const icon = -export const title = 'Hurricanes' -export const trayContents = () =>
hurricanes tray
+export const icon = ; +export const title = 'Hurricanes'; +export const trayContents = () =>
hurricanes tray
; diff --git a/src/components/trays/index.js b/src/components/trays/index.js index b9645de..debfb1f 100644 --- a/src/components/trays/index.js +++ b/src/components/trays/index.js @@ -1,12 +1,12 @@ -import * as layers from './layers' -import * as hurricanes from './hurricanes' -import * as settings from './settings' +import * as layers from './layers'; +import * as hurricanes from './hurricanes'; +import * as settings from './settings'; export default { layers, hurricanes, settings, -} +}; /* a new menu/tray item, must have these named exports: diff --git a/src/components/trays/layers/form.js b/src/components/trays/layers/form.js index 84e531f..4ed7e1e 100644 --- a/src/components/trays/layers/form.js +++ b/src/components/trays/layers/form.js @@ -1,5 +1,5 @@ -import React from 'react' -import { Stack } from '@mui/joy' +import React from 'react'; +import { Stack } from '@mui/joy'; export const AddLayerForm = () => { return ( @@ -8,5 +8,5 @@ export const AddLayerForm = () => { }}> FORM! - ) -} \ No newline at end of file + ); +}; \ No newline at end of file diff --git a/src/components/trays/layers/index.js b/src/components/trays/layers/index.js index 233edaa..129017a 100644 --- a/src/components/trays/layers/index.js +++ b/src/components/trays/layers/index.js @@ -1,9 +1,9 @@ -import React from 'react' -import { Layers as LayersIcon } from '@mui/icons-material' -import { TrayContents } from './tray-contents' +import React from 'react'; +import { Layers as LayersIcon } from '@mui/icons-material'; +import { TrayContents } from './tray-contents'; -export const icon = +export const icon = ; -export const title = 'Layers' +export const title = 'Layers'; -export const trayContents = TrayContents +export const trayContents = TrayContents; diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js index 3429573..d8de248 100644 --- a/src/components/trays/layers/list.js +++ b/src/components/trays/layers/list.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useState } from 'react'; import { Accordion, AccordionGroup, @@ -10,52 +10,52 @@ import { Stack, Switch, Typography, -} from '@mui/joy' +} from '@mui/joy'; import { DragIndicator as DragHandleIcon, KeyboardArrowDown as ExpandIcon, -} from '@mui/icons-material' -import { useLayers } from '@context' +} from '@mui/icons-material'; +import { useLayers } from '@context'; export const LayersList = () => { - const { defaultModelLayers } = useLayers() - const layers = [...defaultModelLayers] + const { defaultModelLayers } = useLayers(); + const layers = [...defaultModelLayers]; - console.log(layers) + console.log(layers); - const [expandedIds, setExpandedIds] = useState(new Set()) + 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 [visibleIds, setVisibleIds] = useState(new Set()); const handleToggleExpansion = id => () => { - const _expandedIds = new Set([...expandedIds]) + const _expandedIds = new Set([...expandedIds]); if (_expandedIds.has(id)) { - _expandedIds.delete(id) - setExpandedIds(_expandedIds) - return + _expandedIds.delete(id); + setExpandedIds(_expandedIds); + return; } - _expandedIds.add(id) - setExpandedIds(_expandedIds) - } + _expandedIds.add(id); + setExpandedIds(_expandedIds); + }; const handleToggleVisibilitySwitch = id => () => { - const _visibleIds = new Set([...visibleIds]) + const _visibleIds = new Set([...visibleIds]); if (_visibleIds.has(id)) { - _visibleIds.delete(id) - setVisibleIds(_visibleIds) - return + _visibleIds.delete(id); + setVisibleIds(_visibleIds); + return; } - _visibleIds.add(id) - setVisibleIds(_visibleIds) - } + _visibleIds.add(id); + setVisibleIds(_visibleIds); + }; return ( { layers.map(layer => { - const isExpanded = expandedIds.has(layer.id) - const isVisible = visibleIds.has(layer.id) + const isExpanded = expandedIds.has(layer.id); + const isVisible = visibleIds.has(layer.id); return ( { fontSize: '75%', color: '#def', backgroundColor: 'transparent', + overflowX: 'auto', }}> { JSON.stringify(layer.properties, null, 2) } - ) + ); }) } - ) -} + ); +}; diff --git a/src/components/trays/layers/tray-contents.js b/src/components/trays/layers/tray-contents.js index b28b3c4..2520182 100644 --- a/src/components/trays/layers/tray-contents.js +++ b/src/components/trays/layers/tray-contents.js @@ -1,25 +1,25 @@ -import React, { useCallback, useState } from 'react' -import { Button, Stack } from '@mui/joy' +import React, { useCallback, useState } from 'react'; +import { Button, Stack } from '@mui/joy'; import { Add as AddLayerIcon, Close as CloseIcon, -} from '@mui/icons-material' -import { LayersList } from './list' -import { AddLayerForm } from './form' +} from '@mui/icons-material'; +import { LayersList } from './list'; +import { AddLayerForm } from './form'; -const FORM = 'FORM' -const LIST = 'LIST' +const FORM = 'FORM'; +const LIST = 'LIST'; export const TrayContents = () => { - const [state, setState] = useState(LIST) + const [state, setState] = useState(LIST); const handleClickToggleState = () => { if (state === FORM) { - setState(LIST) - return + setState(LIST); + return; } - setState(FORM) - } + setState(FORM); + }; const TrayFooter = useCallback(() => { if (state === LIST) { @@ -31,7 +31,7 @@ export const TrayContents = () => { onClick={ handleClickToggleState } >Add a Layer - ) + ); } return ( @@ -42,8 +42,8 @@ export const TrayContents = () => { onClick={ handleClickToggleState } >Cancel - ) - }, [state]) + ); + }, [state]); return ( { - ) -} + ); +}; diff --git a/src/components/trays/settings/index.js b/src/components/trays/settings/index.js index 5ba08f9..464bf42 100644 --- a/src/components/trays/settings/index.js +++ b/src/components/trays/settings/index.js @@ -1,15 +1,15 @@ -import React from 'react' -import { Stack } from '@mui/joy' -import { Tune as SettingsIcon } from '@mui/icons-material' +import React from 'react'; +import { Stack } from '@mui/joy'; +import { Tune as SettingsIcon } from '@mui/icons-material'; -import { SampleToggle } from './sample' +import { SampleToggle } from './sample'; -export const icon = +export const icon = ; -export const title = 'Settings' +export const title = 'Settings'; export const trayContents = () => ( -) +); diff --git a/src/components/trays/settings/sample.js b/src/components/trays/settings/sample.js index 6906cda..7637d42 100644 --- a/src/components/trays/settings/sample.js +++ b/src/components/trays/settings/sample.js @@ -1,13 +1,13 @@ -import React from 'react' -import { IconButton, Stack, Typography } from '@mui/joy' +import React from 'react'; +import { IconButton, Stack, Typography } from '@mui/joy'; import { CheckCircle as OnIcon, Cancel as OffIcon, -} from '@mui/icons-material' -import { useSettings } from '@context' +} from '@mui/icons-material'; +import { useSettings } from '@context'; export const SampleToggle = () => { - const { booleanValue } = useSettings() + const { booleanValue } = useSettings(); return ( { - ) -} + ); +}; export const Toggler = () => { - const { booleanValue } = useSettings() + const { booleanValue } = useSettings(); const handleClick = () => { - booleanValue.toggle() - } + booleanValue.toggle(); + }; return ( { : } - ) -} + ); +}; diff --git a/src/index.js b/src/index.js index 8089b02..d5ea0a3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ -import React from 'react' -import { App } from './app' -import { createRoot } from 'react-dom/client' -import { LayersProvider, SettingsProvider } from '@context' -import './index.css' +import React from 'react'; +import { App } from './app'; +import { createRoot } from 'react-dom/client'; +import { LayersProvider, SettingsProvider } from '@context'; +import './index.css'; const container = document.getElementById('root'); const root = createRoot(container); @@ -13,6 +13,6 @@ const ProvisionedApp = () => ( -) +); -root.render() +root.render(); From a109812d6603f22314f5ae28b4c93cf7944d30a8 Mon Sep 17 00:00:00 2001 From: Matt Watson Date: Tue, 30 Apr 2024 23:37:55 -0400 Subject: [PATCH 4/6] wire up layer visibility, with only the default layers, in a p.o.c. kind of way fix white-space value --- src/components/map/default-layers.js | 27 +++++++++++++-------------- src/components/trays/layers/list.js | 24 +++++------------------- src/context/map-context.js | 25 +++++++++++++++++++++---- 3 files changed, 39 insertions(+), 37 deletions(-) diff --git a/src/components/map/default-layers.js b/src/components/map/default-layers.js index 8ff22fc..d214119 100644 --- a/src/components/map/default-layers.js +++ b/src/components/map/default-layers.js @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { WMSTileLayer, GeoJSON } from 'react-leaflet'; import { CircleMarker } from 'leaflet'; import { useLayers } from '@context'; @@ -87,7 +87,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 @@ -130,15 +135,12 @@ export const DefaultLayers = () => { getDefaultLayers().then(); }, []); - //console.log("defaultModelLayers: " + JSON.stringify(defaultModelLayers, null, 2)) - - return ( - <> - {defaultModelLayers.map((layer, index) => { + return defaultModelLayers + .filter(layer => layer.state.visible) + .map((layer, index) => { const pieces = layer.id.split('-'); const type = pieces[pieces.length-1]; - //console.log("type: " + JSON.stringify(type, null, 2)) - if( type === "obs" && obsData !== "") { + if (type === "obs" && obsData !== "") { //console.log("obsData: " + JSON.stringify(obsData, null, 2)); return ( { onEachFeature = {onEachObsFeature} /> ); - } - else { + } else { return ( { /> ); } - })}; - - ); + }); }; \ No newline at end of file diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js index d8de248..8c66538 100644 --- a/src/components/trays/layers/list.js +++ b/src/components/trays/layers/list.js @@ -18,15 +18,12 @@ import { import { useLayers } from '@context'; export const LayersList = () => { - const { defaultModelLayers } = useLayers(); + const { defaultModelLayers, toggleLayerVisibility } = useLayers(); const layers = [...defaultModelLayers]; - console.log(layers); + 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]); @@ -39,23 +36,12 @@ 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 ( { layers.map(layer => { const isExpanded = expandedIds.has(layer.id); - const isVisible = visibleIds.has(layer.id); + const isVisible = layer.state.visible; return ( { sx={{ overflow: 'hidden', textOverflow: 'ellipsis', - whiteSpace: 'no-wrap', + whiteSpace: 'nowrap', }} > { layer.layers } @@ -116,8 +102,8 @@ export const LayersList = () => { toggleLayerVisibility(layer.id) } /> 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} From 3ba5c08e4ee92eed5320b32c08d065633b80cc91 Mon Sep 17 00:00:00 2001 From: Lisa Stillwell Date: Wed, 1 May 2024 14:27:19 -0400 Subject: [PATCH 5/6] changed title for layer cards --- src/components/trays/layers/list.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js index 8c66538..c02144d 100644 --- a/src/components/trays/layers/list.js +++ b/src/components/trays/layers/list.js @@ -21,6 +21,16 @@ 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()); @@ -42,6 +52,10 @@ export const LayersList = () => { layers.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; + return ( { - { layer.id } + {layerTitle} Date: Thu, 2 May 2024 10:05:05 -0400 Subject: [PATCH 6/6] resolving merge conflicts --- src/components/map/default-layers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/map/default-layers.js b/src/components/map/default-layers.js index 9cba28d..b0c3f35 100644 --- a/src/components/map/default-layers.js +++ b/src/components/map/default-layers.js @@ -1,5 +1,5 @@ import React, { Fragment, useEffect, useState } from 'react'; -import { WMSTileLayer, GeoJSON } from 'react-leaflet'; +import { WMSTileLayer, GeoJSON, useMap } from 'react-leaflet'; import { CircleMarker } from 'leaflet'; import { useLayers } from '@context'; import { markClicked } from '@utils/map-utils';