From 342738ddf0837793c1bb8ecb2fdab6041ae8275d Mon Sep 17 00:00:00 2001 From: Chris Manciero Date: Tue, 9 Apr 2024 12:05:35 -0400 Subject: [PATCH 1/2] add progress circle to places for HE F layer option --- .../radio-button/radio-button-component.jsx | 2 +- .../sidebar-card-content/component.jsx | 6 ++-- .../analyze-areas-sidebar-card/component.jsx | 8 +++++ .../analyze-areas-sidebar-card/index.js | 21 ++++++++++- .../styles.module.scss | 35 +++++++++++++++++++ 5 files changed, 67 insertions(+), 5 deletions(-) diff --git a/src/components/radio-button/radio-button-component.jsx b/src/components/radio-button/radio-button-component.jsx index 48684592f..7e0ac7f69 100644 --- a/src/components/radio-button/radio-button-component.jsx +++ b/src/components/radio-button/radio-button-component.jsx @@ -45,7 +45,7 @@ function RadioButton({ 'visually-hidden': hideLabel, })} style={{ - 'margin-top': Array.isArray(option.name) ? '-4px' : '', + marginTop: Array.isArray(option.name) ? '-4px' : '', }} > {option && option.name} diff --git a/src/containers/sidebars/aoi-sidebar/sidebar-card-content/component.jsx b/src/containers/sidebars/aoi-sidebar/sidebar-card-content/component.jsx index 43bc5986d..a7f65dc7c 100644 --- a/src/containers/sidebars/aoi-sidebar/sidebar-card-content/component.jsx +++ b/src/containers/sidebars/aoi-sidebar/sidebar-card-content/component.jsx @@ -99,9 +99,9 @@ function SidebarCard({ const isCustom = contextualData?.isCustom; const underProtectionPercentage = isCustom - ? contextualData?.percentage - : contextualData?.protectionPercentage; - const spi = contextualData?.SPI; + ? parseFloat(contextualData?.percentage) + : parseFloat(contextualData?.protectionPercentage); + const spi = parseFloat(contextualData?.SPI); return (
diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx index bedc0629f..b6df72028 100644 --- a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx +++ b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx @@ -19,6 +19,7 @@ import { HIGHER_AREA_SIZE_LIMIT, CLEAR_SELECTIONS, } from 'constants/analyze-areas-constants'; +import { HALF_EARTH_FUTURE_TILE_LAYER } from 'constants/layers-slugs'; import { SEARCH_TYPES } from 'constants/search-location-constants'; import radioTheme from 'styles/themes/radio-theme.module.scss'; @@ -53,6 +54,7 @@ function AnalyzeAreasCardComponent({ sketchTooltipType, updatedGeometry, setUpdatedGeometry, + showProgress, }) { const t = useT(); const locale = useLocale(); @@ -147,6 +149,12 @@ function AnalyzeAreasCardComponent({ theme={radioTheme} /> )} + {option.slug === HALF_EARTH_FUTURE_TILE_LAYER && + showProgress && ( +
+
+
+ )}
); })} diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js index d9892fed7..48c907dc0 100644 --- a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js +++ b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js @@ -120,6 +120,8 @@ function AnalyzeAreasContainer(props) { const [selectedOption, setSelectedOption] = useState( precalculatedAOIOptions[0] ); + const [showProgress, setShowProgress] = useState(false); + const [isFirstLoad, setIsFirstLoad] = useState(true); const [sketchWidgetMode, setSketchWidgetMode] = useState('create'); const [isPromptModalOpen, setPromptModalOpen] = useState(false); const [promptModalContent, setPromptModalContent] = useState({ @@ -133,6 +135,10 @@ function AnalyzeAreasContainer(props) { (option) => option.title === selectedAnalysisLayer ) ); + + if (selectedAnalysisLayer === HALF_EARTH_FUTURE_TILE_LAYER) { + setIsFirstLoad(false); + } }, [selectedAnalysisLayer, precalculatedAOIOptions, setSelectedOption]); const postDrawCallback = (geometry) => { @@ -286,10 +292,22 @@ function AnalyzeAreasContainer(props) { } }; - const handleOptionSelection = (option) => { + const handleOptionSelection = async (option) => { + if (option?.slug === HALF_EARTH_FUTURE_TILE_LAYER && isFirstLoad) { + setShowProgress(true); + } handleLayerToggle(option?.slug); changeUI({ selectedAnalysisLayer: option?.slug }); setTooltipIsVisible(false); + + view.on('layerview-create', (event) => { + if (event.layer.id === HALF_EARTH_FUTURE_TILE_LAYER) { + if (isFirstLoad) { + setShowProgress(false); + setIsFirstLoad(false); + } + } + }); }; const handlePromptModalToggle = () => setPromptModalOpen(!isPromptModalOpen); @@ -314,6 +332,7 @@ function AnalyzeAreasContainer(props) { setSketchTooltipType={setSketchTooltipType} setUpdatedGeometry={setUpdatedGeometry} updatedGeometry={updatedGeometry} + showProgress={showProgress} /> ); } diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss index edcd5a3ff..cf4cfa715 100644 --- a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss +++ b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss @@ -234,3 +234,38 @@ background-color: $white; } } + +.radioContainer{ + display: flex; +} + +.progressBar { + position: relative; + width: 20px; + height: 20px; +} + +.circle { + height: 100%; + right: 0px; + position: absolute; + border: solid 5px $alto; + border-top-color: $robins-egg-blue; + border-radius: 50%; +} + +.border { + width: 100%; + transform: rotate(135deg); + animation: spin 1.3s steps(2) .2s infinite; + -webkit-animation: spin 1.3s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} From e5a05158f88d4c87f87481aa5007fd28b33f5d24 Mon Sep 17 00:00:00 2001 From: Chris Manciero Date: Wed, 10 Apr 2024 10:12:09 -0400 Subject: [PATCH 2/2] display loading icon for places for HE future in Map Layer --- .../checkbox/checkbox-component.jsx | 17 +++++++++- .../checkbox/checkbox-styles.module.scss | 31 +++++++++++++++++++ .../layer-toggle/checkbox-type/component.jsx | 2 ++ src/components/layer-toggle/component.jsx | 2 ++ .../sidebars/map-layers/component.jsx | 1 + ...protected-areas-sidebar-card-component.jsx | 2 ++ .../protected-areas-sidebar-card.js | 20 +++++++++++- 7 files changed, 73 insertions(+), 2 deletions(-) diff --git a/src/components/checkbox/checkbox-component.jsx b/src/components/checkbox/checkbox-component.jsx index 23fdc2918..02a61070f 100644 --- a/src/components/checkbox/checkbox-component.jsx +++ b/src/components/checkbox/checkbox-component.jsx @@ -4,9 +4,19 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; +import { HALF_EARTH_FUTURE_TILE_LAYER } from 'constants/layers-slugs'; + import styles from './checkbox-styles.module.scss'; -function Checkbox({ option, onChange, checked, theme, className, disabled }) { +function Checkbox({ + option, + onChange, + checked, + theme, + className, + disabled, + showProgress, +}) { return (
)} + {option.value === HALF_EARTH_FUTURE_TILE_LAYER && showProgress && ( +
+
+
+ )}
); } diff --git a/src/components/checkbox/checkbox-styles.module.scss b/src/components/checkbox/checkbox-styles.module.scss index c5712971b..6f65c2fa0 100644 --- a/src/components/checkbox/checkbox-styles.module.scss +++ b/src/components/checkbox/checkbox-styles.module.scss @@ -59,3 +59,34 @@ input[type="checkbox"] { height: 10px; width: 10px; } + +.progressBar { + position: relative; + width: 20px; + height: 20px; +} + +.circle { + height: 100%; + right: 0px; + position: absolute; + border: solid 5px $alto; + border-top-color: $robins-egg-blue; + border-radius: 50%; +} + +.border { + width: 100%; + transform: rotate(135deg); + animation: spin 1.3s steps(2) .2s infinite; + -webkit-animation: spin 1.3s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/components/layer-toggle/checkbox-type/component.jsx b/src/components/layer-toggle/checkbox-type/component.jsx index c27556cf7..6ebf3e0ae 100644 --- a/src/components/layer-toggle/checkbox-type/component.jsx +++ b/src/components/layer-toggle/checkbox-type/component.jsx @@ -17,6 +17,7 @@ function CheckboxType({ onOpacityClick, onBringToBackClick, onBringToFrontClick, + showProgress, }) { return (
{isChecked && !disabled && ( diff --git a/src/components/layer-toggle/component.jsx b/src/components/layer-toggle/component.jsx index 1628c64c9..12326e7d5 100644 --- a/src/components/layer-toggle/component.jsx +++ b/src/components/layer-toggle/component.jsx @@ -24,6 +24,7 @@ function LayerToggleComponent({ handleBringToBackClick, handleBringToFrontClick, className, + showProgress, }) { return type === 'radio' ? (
); diff --git a/src/containers/sidebars/map-layers/component.jsx b/src/containers/sidebars/map-layers/component.jsx index 73d521c44..48645c338 100644 --- a/src/containers/sidebars/map-layers/component.jsx +++ b/src/containers/sidebars/map-layers/component.jsx @@ -31,6 +31,7 @@ function MapLayers({ activeCategory={activeCategory} handleGlobeUpdating={handleGlobeUpdating} map={map} + view={view} onboardingStep={onboardingStep} onboardingType={onboardingType} waitingInteraction={waitingInteraction} diff --git a/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card-component.jsx b/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card-component.jsx index 5bf4fe201..662fbf839 100644 --- a/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card-component.jsx +++ b/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card-component.jsx @@ -42,6 +42,7 @@ function ProtectedAreasSidebarCardComponent({ onboardingType, waitingInteraction, changeUI, + showProgress, }) { const t = useT(); const locale = useLocale(); @@ -146,6 +147,7 @@ function ProtectedAreasSidebarCardComponent({ type="checkbox" variant="light" key={layer.value} + showProgress={showProgress} activeLayers={activeLayers} onChange={handleLayerToggle} themeCategorySlug={FUTURE_PLACES_SLUG} diff --git a/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card.js b/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card.js index 4c65efa2f..ebf1bb5a1 100644 --- a/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card.js +++ b/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card.js @@ -6,6 +6,7 @@ import * as urlActions from 'actions/url-actions'; import { layerManagerToggle } from 'utils/layer-manager-utils'; +import { HALF_EARTH_FUTURE_TILE_LAYER } from 'constants/layers-slugs'; import { LAYERS_CATEGORIES } from 'constants/mol-layers-configs'; import Component from './protected-areas-sidebar-card-component'; @@ -14,7 +15,10 @@ import mapStateToProps from './protected-areas-sidebar-card-selectors'; const actions = { ...metadataActions, ...urlActions }; function Container(props) { - const { activeLayers, changeGlobe } = props; + const { activeLayers, changeGlobe, view } = props; + + const [showProgress, setShowProgress] = useState(false); + const [isFirstLoad, setIsFirstLoad] = useState(true); const [selectedLayers, setSelectedLayers] = useState([]); @@ -27,6 +31,19 @@ function Container(props) { setSelectedLayers([...selectedLayers, option.value]); } + if (option.value === HALF_EARTH_FUTURE_TILE_LAYER && isFirstLoad) { + setShowProgress(true); + } + + view?.on('layerview-create', (event) => { + if (event.layer.id === HALF_EARTH_FUTURE_TILE_LAYER) { + if (isFirstLoad) { + setShowProgress(false); + setIsFirstLoad(false); + } + } + }); + layerManagerToggle( option.value, activeLayers, @@ -39,6 +56,7 @@ function Container(props) { );