From 14c5998b029ccc6f227ec62e27e1b6fa60138ec9 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 15 Aug 2023 08:11:27 +0900 Subject: [PATCH 1/3] Add dataset layer visibility toggle button to explore page --- .../components/common/mapbox/index.tsx | 5 ++- .../components/datasets/s-explore/index.tsx | 14 ++++++- .../s-explore/layer-visibility-toggle.tsx | 38 +++++++++++++++++++ 3 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 app/scripts/components/datasets/s-explore/layer-visibility-toggle.tsx diff --git a/app/scripts/components/common/mapbox/index.tsx b/app/scripts/components/common/mapbox/index.tsx index 23e692f5d..62e1186d4 100644 --- a/app/scripts/components/common/mapbox/index.tsx +++ b/app/scripts/components/common/mapbox/index.tsx @@ -128,7 +128,8 @@ function MapboxMapComponent( aoi, onAoiChange, projection, - onProjectionChange + onProjectionChange, + isDatasetLayerHidden } = props; /* eslint-enable react/prop-types */ @@ -425,6 +426,7 @@ function MapboxMapComponent( zoomExtent={baseLayerResolvedData.zoomExtent} bounds={baseLayerResolvedData.bounds} onStatusChange={onBaseLayerStatusChange} + isHidden={isDatasetLayerHidden} /> )} void; + isDatasetLayerHidden?: boolean; } export interface MapboxMapRef { diff --git a/app/scripts/components/datasets/s-explore/index.tsx b/app/scripts/components/datasets/s-explore/index.tsx index 7f7450ae1..b480cf8d0 100644 --- a/app/scripts/components/datasets/s-explore/index.tsx +++ b/app/scripts/components/datasets/s-explore/index.tsx @@ -16,6 +16,7 @@ import { import { ProjectionOptions } from 'veda'; import { FormSwitch } from '@devseed-ui/form'; +import LayerVisibilityToggleButton from './layer-visibility-toggle'; import DatasetLayers from './dataset-layers'; import { PanelDateWidget } from './panel-date-widget'; import { resourceNotFound } from '$components/uhoh'; @@ -76,13 +77,18 @@ const Carto = styled.div` margin-top: calc(2rem + ${variableGlsp(0.5)}); } } - ${NotebookConnectButton} { position: absolute; z-index: 1; right: ${variableGlsp()}; top: ${variableGlsp()}; } + ${LayerVisibilityToggleButton} { + position: absolute; + z-index: 1; + right: ${variableGlsp()}; + top: ${variableGlsp(2.25)}; + } `; const DatesWrapper = styled.div` @@ -311,6 +317,7 @@ function DatasetsExplore() { }); const [isComparing, setIsComparing] = useState(!!selectedCompareDatetime); + const [isDatasetLayerHidden, setIsDatasetLayerHidden] = useState(false); // END QsState setup /** *********************************************************************** */ @@ -560,6 +567,10 @@ function DatasetsExplore() { + diff --git a/app/scripts/components/datasets/s-explore/layer-visibility-toggle.tsx b/app/scripts/components/datasets/s-explore/layer-visibility-toggle.tsx new file mode 100644 index 000000000..ac7280759 --- /dev/null +++ b/app/scripts/components/datasets/s-explore/layer-visibility-toggle.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Button } from '@devseed-ui/button'; +import { + CollecticonEye, + CollecticonEyeDisabled +} from '@devseed-ui/collecticons'; + +interface LayerVisibilityToggleButtonProps { + isDatasetLayerHidden: boolean; + setIsDatasetLayerHidden: (a: boolean) => void; + className?: string; +} + + +function LayerVisibilityToggleButtonSelf(props:LayerVisibilityToggleButtonProps) { + const {className, isDatasetLayerHidden, setIsDatasetLayerHidden} = props; + return ( + + ); +} + +const LayerVisibilityToggleButton = styled(LayerVisibilityToggleButtonSelf)` + /* Convert to styled-component: https://styled-components.com/docs/advanced#caveat */ +`; + +export default LayerVisibilityToggleButton; From 6ea95af1e0d1ff26b4b9acdd6f41a857436c3d77 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 15 Aug 2023 11:19:25 +0900 Subject: [PATCH 2/3] Put custom controllers in its wrapper --- .../components/datasets/s-explore/index.tsx | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/app/scripts/components/datasets/s-explore/index.tsx b/app/scripts/components/datasets/s-explore/index.tsx index b480cf8d0..f1e2f942f 100644 --- a/app/scripts/components/datasets/s-explore/index.tsx +++ b/app/scripts/components/datasets/s-explore/index.tsx @@ -77,17 +77,21 @@ const Carto = styled.div` margin-top: calc(2rem + ${variableGlsp(0.5)}); } } +`; + +const CustomControlWrapper = styled.div` + position: absolute; + right: 20px; + top: 0; + display: flex; + flex-direction: column; + padding-top: ${variableGlsp()}; + gap: ${variableGlsp(0.5)}; ${NotebookConnectButton} { - position: absolute; z-index: 1; - right: ${variableGlsp()}; - top: ${variableGlsp()}; } ${LayerVisibilityToggleButton} { - position: absolute; z-index: 1; - right: ${variableGlsp()}; - top: ${variableGlsp(2.25)}; } `; @@ -566,11 +570,13 @@ function DatasetsExplore() { - - + + + + Date: Tue, 15 Aug 2023 16:03:39 +0100 Subject: [PATCH 3/3] Make small style changes --- .../components/datasets/s-explore/index.tsx | 14 +++-------- .../s-explore/layer-visibility-toggle.tsx | 25 ++++++++++++------- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/app/scripts/components/datasets/s-explore/index.tsx b/app/scripts/components/datasets/s-explore/index.tsx index f1e2f942f..1f99ad4b5 100644 --- a/app/scripts/components/datasets/s-explore/index.tsx +++ b/app/scripts/components/datasets/s-explore/index.tsx @@ -81,18 +81,12 @@ const Carto = styled.div` const CustomControlWrapper = styled.div` position: absolute; - right: 20px; - top: 0; + right: ${variableGlsp()}; + top: ${variableGlsp()}; + z-index: 1; display: flex; flex-direction: column; - padding-top: ${variableGlsp()}; gap: ${variableGlsp(0.5)}; - ${NotebookConnectButton} { - z-index: 1; - } - ${LayerVisibilityToggleButton} { - z-index: 1; - } `; const DatesWrapper = styled.div` @@ -574,7 +568,7 @@ function DatasetsExplore() { void; + onLayerVisibilityClick: (a: boolean) => void; className?: string; } +function LayerVisibilityToggleButtonSelf( + props: LayerVisibilityToggleButtonProps +) { + const { className, isDatasetLayerHidden, onLayerVisibilityClick } = props; -function LayerVisibilityToggleButtonSelf(props:LayerVisibilityToggleButtonProps) { - const {className, isDatasetLayerHidden, setIsDatasetLayerHidden} = props; return ( ); }