From 2c00f32438c5fd85538d65b2663863f7decf4ca7 Mon Sep 17 00:00:00 2001 From: Lukas0912 Date: Thu, 19 Dec 2024 10:12:34 +0100 Subject: [PATCH 1/4] feat: implement better loading functionality for fcs and nutrition view --- src/components/Map/FcsChoropleth.tsx | 13 ++++-- src/components/Map/FcsCountryChoropleth.tsx | 12 ------ src/components/Map/Map.tsx | 7 ++-- src/components/Map/NutritionAccordion.tsx | 2 + src/components/Map/NutritionChoropleth.tsx | 16 ++++++- .../Map/NutritionStateChoropleth.tsx | 42 ++++++------------- src/domain/props/FcsCountryChoroplethProps.ts | 7 ---- src/domain/props/NutritionAccordionProps.tsx | 1 + src/domain/props/NutritionChoroplethProps.tsx | 1 + src/domain/props/NutritionStateProps.ts | 3 +- src/operations/map/MapOperations.tsx | 8 ++-- 11 files changed, 50 insertions(+), 62 deletions(-) diff --git a/src/components/Map/FcsChoropleth.tsx b/src/components/Map/FcsChoropleth.tsx index 827d9aad..76d9bc65 100644 --- a/src/components/Map/FcsChoropleth.tsx +++ b/src/components/Map/FcsChoropleth.tsx @@ -4,6 +4,7 @@ import { useTheme } from 'next-themes'; import React, { useEffect, useRef } from 'react'; import { GeoJSON } from 'react-leaflet'; +import FcsAccordion from '@/components/Map/FcsAccordion'; import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext'; import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts'; import { LayerWithFeature } from '@/domain/entities/map/LayerWithFeature.ts'; @@ -71,13 +72,17 @@ export default function FcsChoropleth({ color="hsl(var(--nextui-fcsAnimation))" /> )} - {regionData && countryId === selectedCountryId && regionLabelData && ( - + )} + {regionData && countryId === selectedCountryId && regionLabelData && ( + - (); const [countryIso3Data, setCountryIso3Data] = useState(); const [regionData, setRegionData] = useState | undefined>(); - const [countryClickLoading, setCountryClickLoading] = useState(false); + const [isCountryDataLoading, setIsCountryDataLoading] = useState(false); const [regionNutritionData, setRegionNutritionData] = useState(); const [ipcRegionData, setIpcRegionData] = useState | undefined>(); const [selectedCountryName, setSelectedCountryName] = useState(undefined); @@ -81,7 +81,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma MapOperations.fetchCountryData( selectedMapType, selectedCountryData, - setCountryClickLoading, + setIsCountryDataLoading, setRegionData, setCountryData, setCountryIso3Data, @@ -156,7 +156,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma key={country.properties.adm0_id} countryId={country.properties.adm0_id} data={{ type: 'FeatureCollection', features: [country as Feature] }} - loading={countryClickLoading} + loading={isCountryDataLoading} countryData={countryData} countryIso3Data={countryIso3Data} regionData={regionData} @@ -184,6 +184,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma selectedCountryName={selectedCountryName} regionLabelData={regionLabelData} setRegionLabelTooltips={setRegionLabelTooltips} + isCountryDataLoading={isCountryDataLoading} /> ))} diff --git a/src/components/Map/NutritionAccordion.tsx b/src/components/Map/NutritionAccordion.tsx index df443a9b..1c876783 100644 --- a/src/components/Map/NutritionAccordion.tsx +++ b/src/components/Map/NutritionAccordion.tsx @@ -13,6 +13,7 @@ export default function NutritionAccordion({ setSelectedNutrient, selectedNutrient, countryName, + loading, }: NutritionAccordionProps) { return (
@@ -21,6 +22,7 @@ export default function NutritionAccordion({ title={countryName ?? undefined} accordionModalActive maxWidth={600} + loading={loading} items={[ { title: 'Micronutrients', diff --git a/src/components/Map/NutritionChoropleth.tsx b/src/components/Map/NutritionChoropleth.tsx index 0ceb41d5..470269c7 100644 --- a/src/components/Map/NutritionChoropleth.tsx +++ b/src/components/Map/NutritionChoropleth.tsx @@ -1,12 +1,14 @@ import { Feature } from 'geojson'; import L from 'leaflet'; import { useTheme } from 'next-themes'; -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { GeoJSON } from 'react-leaflet'; +import NutritionAccordion from '@/components/Map/NutritionAccordion'; import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext'; import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts'; import { LayerWithFeature } from '@/domain/entities/map/LayerWithFeature.ts'; +import { NutrientType } from '@/domain/enums/NutrientType.ts'; import { useNutritionQuery } from '@/domain/hooks/globalHooks'; import NutritionChoroplethProps from '@/domain/props/NutritionChoroplethProps'; import { MapOperations } from '@/operations/map/MapOperations'; @@ -22,11 +24,13 @@ export default function NutritionChoropleth({ selectedCountryName, regionLabelData, setRegionLabelTooltips, + isCountryDataLoading, }: NutritionChoroplethProps) { const geoJsonRef = useRef(null); const { selectedCountryId, setSelectedCountryId } = useSelectedCountryId(); const { theme } = useTheme(); const { data: nutritionData } = useNutritionQuery(true); + const [selectedNutrient, setSelectedNutrient] = useState(NutrientType.MINI_SIMPLE); // adding the country name as a tooltip to each layer (on hover) // the tooltip is not shown if the country is selected or there is no data available for the country @@ -75,15 +79,23 @@ export default function NutritionChoropleth({ color="hsl(var(--nextui-nutritionAnimation))" /> )} + {countryId === selectedCountryId && ( + + )} { // if this country ('countryId') is selected and data is loaded ('regionNutritionData') show Choropleth for all states regionNutritionData && countryId === selectedCountryId && regionLabelData && ( ) } diff --git a/src/components/Map/NutritionStateChoropleth.tsx b/src/components/Map/NutritionStateChoropleth.tsx index bed64bec..44e8f9c8 100644 --- a/src/components/Map/NutritionStateChoropleth.tsx +++ b/src/components/Map/NutritionStateChoropleth.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef } from 'react'; import { GeoJSON, useMap } from 'react-leaflet'; import { LayerWithFeature } from '@/domain/entities/map/LayerWithFeature.ts'; @@ -7,17 +7,14 @@ import { NutritionStateChoroplethProps } from '@/domain/props/NutritionStateProp import { MapOperations } from '@/operations/map/MapOperations'; import NutritionStateChoroplethOperations from '@/operations/map/NutritionStateChoroplethOperations'; -import NutritionAccordion from './NutritionAccordion'; - export default function NutritionStateChoropleth({ regionNutrition, - countryName, setRegionLabelTooltips, regionLabelData, countryMapData, + selectedNutrient, }: NutritionStateChoroplethProps) { const layersRef = useRef([]); - const [selectedNutrient, setSelectedNutrient] = useState(NutrientType.MINI_SIMPLE); const selectedNutrientRef = useRef(selectedNutrient); const map = useMap(); @@ -34,30 +31,17 @@ export default function NutritionStateChoropleth({ }, [selectedNutrient, regionNutrition]); return ( - <> - NutritionStateChoroplethOperations.dynamicStyle(feature, selectedNutrient)} + onEachFeature={(feature, layer) => { + layersRef.current.push(layer); + NutritionStateChoroplethOperations.addNutritionTooltip(layer, feature, selectedNutrient); + NutritionStateChoroplethOperations.addHoverEffect(layer); + MapOperations.setupRegionLabelTooltip(feature, regionLabelData, countryMapData, map, setRegionLabelTooltips); + }} /> - {regionNutrition && ( - NutritionStateChoroplethOperations.dynamicStyle(feature, selectedNutrient)} - onEachFeature={(feature, layer) => { - layersRef.current.push(layer); - NutritionStateChoroplethOperations.addNutritionTooltip(layer, feature, selectedNutrient); - NutritionStateChoroplethOperations.addHoverEffect(layer); - MapOperations.setupRegionLabelTooltip( - feature, - regionLabelData, - countryMapData, - map, - setRegionLabelTooltips - ); - }} - /> - )} - + ) ); } diff --git a/src/domain/props/FcsCountryChoroplethProps.ts b/src/domain/props/FcsCountryChoroplethProps.ts index d2d51ec0..d5d78ed5 100644 --- a/src/domain/props/FcsCountryChoroplethProps.ts +++ b/src/domain/props/FcsCountryChoroplethProps.ts @@ -3,15 +3,8 @@ import L from 'leaflet'; import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts'; -import { CountryData } from '../entities/country/CountryData'; -import { CountryIso3Data } from '../entities/country/CountryIso3Data'; - export default interface FscCountryChoroplethProps { regionData: FeatureCollection; - countryData?: CountryData; - countryIso3Data?: CountryIso3Data; - countryName?: string; - loading: boolean; handleBackButtonClick?: () => void; regionLabelData: FeatureCollection; countryMapData: CountryMapData; diff --git a/src/domain/props/NutritionAccordionProps.tsx b/src/domain/props/NutritionAccordionProps.tsx index 5cd6e890..a910ab41 100644 --- a/src/domain/props/NutritionAccordionProps.tsx +++ b/src/domain/props/NutritionAccordionProps.tsx @@ -6,4 +6,5 @@ export default interface NutritionAccordionProps { setSelectedNutrient: React.Dispatch>; selectedNutrient: NutrientType; countryName?: string; + loading: boolean; } diff --git a/src/domain/props/NutritionChoroplethProps.tsx b/src/domain/props/NutritionChoroplethProps.tsx index a8732938..5e80e831 100644 --- a/src/domain/props/NutritionChoroplethProps.tsx +++ b/src/domain/props/NutritionChoroplethProps.tsx @@ -8,4 +8,5 @@ export default interface NutritionChoroplethProps { selectedCountryName?: string; regionLabelData?: FeatureCollection; setRegionLabelTooltips: (tooltips: (prevRegionLabelData: L.Tooltip[]) => L.Tooltip[]) => void; + isCountryDataLoading: boolean; } diff --git a/src/domain/props/NutritionStateProps.ts b/src/domain/props/NutritionStateProps.ts index ed08a097..c2b3e068 100644 --- a/src/domain/props/NutritionStateProps.ts +++ b/src/domain/props/NutritionStateProps.ts @@ -2,11 +2,12 @@ import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson'; import L from 'leaflet'; import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts'; +import { NutrientType } from '@/domain/enums/NutrientType.ts'; export interface NutritionStateChoroplethProps { regionNutrition?: FeatureCollection; - countryName?: string; setRegionLabelTooltips: (tooltips: (prevRegionLabelData: L.Tooltip[]) => L.Tooltip[]) => void; regionLabelData: FeatureCollection; countryMapData: CountryMapData; + selectedNutrient: NutrientType; } diff --git a/src/operations/map/MapOperations.tsx b/src/operations/map/MapOperations.tsx index 1aa77426..ac93325a 100644 --- a/src/operations/map/MapOperations.tsx +++ b/src/operations/map/MapOperations.tsx @@ -18,7 +18,7 @@ export class MapOperations { static async fetchCountryData( selectedMapType: GlobalInsight, selectedCountryData: CountryMapData, - setCountryClickLoading: (isLoading: boolean) => void, + setIsCountryDataLoading: (isLoading: boolean) => void, setRegionData: (regionData: FeatureCollection | undefined) => void, setCountryData: (countryData: CountryData | undefined) => void, setCountryIso3Data: (iso3Data: CountryIso3Data | undefined) => void, @@ -28,7 +28,7 @@ export class MapOperations { setRegionLabelData: (newRegionLabelData: FeatureCollection | undefined) => void, setIsDataAvailable: (isDataAvailable: boolean) => void ) { - setCountryClickLoading(true); + setIsCountryDataLoading(true); const countryRepository = container.resolve('CountryRepository'); try { @@ -111,10 +111,10 @@ export class MapOperations { if (!regionLabelData) setRegionLabelData(data[1]); } - - setCountryClickLoading(false); } catch { // Do nothing + } finally { + setIsCountryDataLoading(false); } } From 62d28e9cf7f644511ae6181765afe12ae619dbb4 Mon Sep 17 00:00:00 2001 From: Lukas0912 Date: Thu, 19 Dec 2024 21:17:05 +0100 Subject: [PATCH 2/4] feat: implement loading for ipc --- src/components/Map/FcsChoropleth.tsx | 4 ++-- src/components/Map/IpcMap/IpcAccordion.tsx | 3 ++- src/components/Map/IpcMap/IpcChoropleth.tsx | 13 +++++++++++-- .../Map/IpcMap/IpcCountryChoropleth.tsx | 18 +++++++----------- src/components/Map/Map.tsx | 9 +++++---- src/components/Map/NutritionChoropleth.tsx | 4 ++-- src/domain/props/FcsChoroplethProps.ts | 2 +- src/domain/props/IpcAccordionProps.tsx | 1 + src/domain/props/IpcChoroplethProps.tsx | 1 + src/domain/props/IpcCountryChoroplethProps.tsx | 4 ---- src/domain/props/NutritionChoroplethProps.tsx | 2 +- src/operations/map/MapOperations.tsx | 6 +++--- 12 files changed, 36 insertions(+), 31 deletions(-) diff --git a/src/components/Map/FcsChoropleth.tsx b/src/components/Map/FcsChoropleth.tsx index 76d9bc65..046a1389 100644 --- a/src/components/Map/FcsChoropleth.tsx +++ b/src/components/Map/FcsChoropleth.tsx @@ -18,7 +18,7 @@ import FscCountryChoropleth from './FcsCountryChoropleth'; export default function FcsChoropleth({ data, countryId, - loading, + isLoadingCountry, regionData, countryData, countryIso3Data, @@ -76,7 +76,7 @@ export default function FcsChoropleth({ )} diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx index 57ec55e6..7f93f32b 100644 --- a/src/components/Map/IpcMap/IpcAccordion.tsx +++ b/src/components/Map/IpcMap/IpcAccordion.tsx @@ -8,7 +8,7 @@ import { cardsWrapperClass } from '@/utils/primitives'; import { ReactComponent as FoodConsumption } from '../../../../public/Images/FoodConsumption.svg'; import { ReactComponent as Population } from '../../../../public/Images/Population.svg'; -export default function IpcAccordion({ countryData, countryName }: IpcAccordionProps) { +export default function IpcAccordion({ countryData, countryName, loading }: IpcAccordionProps) { const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null; const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null; const hasNoData: boolean = @@ -20,6 +20,7 @@ export default function IpcAccordion({ countryData, countryName }: IpcAccordionP title={countryName ?? undefined} accordionModalActive maxWidth={600} + loading={loading} items={[ { title: 'Food Security', diff --git a/src/components/Map/IpcMap/IpcChoropleth.tsx b/src/components/Map/IpcMap/IpcChoropleth.tsx index 5dcb627a..0eefce76 100644 --- a/src/components/Map/IpcMap/IpcChoropleth.tsx +++ b/src/components/Map/IpcMap/IpcChoropleth.tsx @@ -2,6 +2,7 @@ import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson'; import React from 'react'; import CountryLoadingLayer from '@/components/Map/CountryLoading'; +import IpcAccordion from '@/components/Map/IpcMap/IpcAccordion'; import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext'; import { useIpcQuery } from '@/domain/hooks/globalHooks'; import { IpcChoroplethProps } from '@/domain/props/IpcChoroplethProps'; @@ -9,7 +10,13 @@ import { IpcChoroplethProps } from '@/domain/props/IpcChoroplethProps'; import IpcCountryChoropleth from './IpcCountryChoropleth'; import IpcGlobalChoropleth from './IpcGlobalChoropleth'; -function IpcChoropleth({ countries, countryData, ipcRegionData, selectedCountryName }: IpcChoroplethProps) { +function IpcChoropleth({ + countries, + countryData, + ipcRegionData, + selectedCountryName, + isLoadingCountry, +}: IpcChoroplethProps) { const { data: ipcData } = useIpcQuery(true); const { selectedCountryId, setSelectedCountryId } = useSelectedCountryId(); @@ -35,7 +42,9 @@ function IpcChoropleth({ countries, countryData, ipcRegionData, selectedCountryN color="hsl(var(--nextui-ipcAnimation))" /> )} - + {selectedCountryId && ( + + )} {ipcRegionData && ( , layer: L.Layer) => { IpcChoroplethOperations.attachEventsRegion(feature, layer); }; return ( - <> - - - + ); } + export default IpcCountryChoropleth; diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 7b5194c3..03afbb29 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -42,7 +42,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma const [countryData, setCountryData] = useState(); const [countryIso3Data, setCountryIso3Data] = useState(); const [regionData, setRegionData] = useState | undefined>(); - const [isCountryDataLoading, setIsCountryDataLoading] = useState(false); + const [isLoadingCountry, setIsLoadingCountry] = useState(false); const [regionNutritionData, setRegionNutritionData] = useState(); const [ipcRegionData, setIpcRegionData] = useState | undefined>(); const [selectedCountryName, setSelectedCountryName] = useState(undefined); @@ -81,7 +81,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma MapOperations.fetchCountryData( selectedMapType, selectedCountryData, - setIsCountryDataLoading, + setIsLoadingCountry, setRegionData, setCountryData, setCountryIso3Data, @@ -156,7 +156,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma key={country.properties.adm0_id} countryId={country.properties.adm0_id} data={{ type: 'FeatureCollection', features: [country as Feature] }} - loading={isCountryDataLoading} + isLoadingCountry={isLoadingCountry} countryData={countryData} countryIso3Data={countryIso3Data} regionData={regionData} @@ -184,7 +184,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma selectedCountryName={selectedCountryName} regionLabelData={regionLabelData} setRegionLabelTooltips={setRegionLabelTooltips} - isCountryDataLoading={isCountryDataLoading} + isLoadingCountry={isLoadingCountry} /> ))} @@ -206,6 +206,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma countryData={countryData} ipcRegionData={ipcRegionData} selectedCountryName={selectedCountryName} + isLoadingCountry={isLoadingCountry} /> )} diff --git a/src/components/Map/NutritionChoropleth.tsx b/src/components/Map/NutritionChoropleth.tsx index 470269c7..4e4814a5 100644 --- a/src/components/Map/NutritionChoropleth.tsx +++ b/src/components/Map/NutritionChoropleth.tsx @@ -24,7 +24,7 @@ export default function NutritionChoropleth({ selectedCountryName, regionLabelData, setRegionLabelTooltips, - isCountryDataLoading, + isLoadingCountry, }: NutritionChoroplethProps) { const geoJsonRef = useRef(null); const { selectedCountryId, setSelectedCountryId } = useSelectedCountryId(); @@ -84,7 +84,7 @@ export default function NutritionChoropleth({ setSelectedNutrient={setSelectedNutrient} selectedNutrient={selectedNutrient} countryName={selectedCountryName} - loading={isCountryDataLoading} + loading={isLoadingCountry} /> )} { diff --git a/src/domain/props/FcsChoroplethProps.ts b/src/domain/props/FcsChoroplethProps.ts index 235a7030..13ec0e10 100644 --- a/src/domain/props/FcsChoroplethProps.ts +++ b/src/domain/props/FcsChoroplethProps.ts @@ -8,7 +8,7 @@ import { CountryIso3Data } from '@/domain/entities/country/CountryIso3Data.ts'; export default interface FcsChoroplethProps { data: FeatureCollection; countryId: number; - loading: boolean; + isLoadingCountry: boolean; regionData?: FeatureCollection; countryData?: CountryData; countryIso3Data?: CountryIso3Data; diff --git a/src/domain/props/IpcAccordionProps.tsx b/src/domain/props/IpcAccordionProps.tsx index e60f69a7..4be6fbea 100644 --- a/src/domain/props/IpcAccordionProps.tsx +++ b/src/domain/props/IpcAccordionProps.tsx @@ -3,4 +3,5 @@ import { CountryData } from '../entities/country/CountryData'; export default interface IpcAccordionProps { countryData: CountryData | undefined; countryName?: string; + loading: boolean; } diff --git a/src/domain/props/IpcChoroplethProps.tsx b/src/domain/props/IpcChoroplethProps.tsx index 28728fa1..f74367bb 100644 --- a/src/domain/props/IpcChoroplethProps.tsx +++ b/src/domain/props/IpcChoroplethProps.tsx @@ -9,4 +9,5 @@ export interface IpcChoroplethProps { countryData?: CountryData; ipcRegionData?: FeatureCollection; selectedCountryName?: string; + isLoadingCountry: boolean; } diff --git a/src/domain/props/IpcCountryChoroplethProps.tsx b/src/domain/props/IpcCountryChoroplethProps.tsx index 4ecd7366..4f712f60 100644 --- a/src/domain/props/IpcCountryChoroplethProps.tsx +++ b/src/domain/props/IpcCountryChoroplethProps.tsx @@ -1,9 +1,5 @@ import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson'; -import { CountryData } from '../entities/country/CountryData'; - export default interface IpcCountryChoroplethProps { regionIpcData: FeatureCollection; - countryData: CountryData | undefined; - countryName?: string; } diff --git a/src/domain/props/NutritionChoroplethProps.tsx b/src/domain/props/NutritionChoroplethProps.tsx index 5e80e831..9c450c33 100644 --- a/src/domain/props/NutritionChoroplethProps.tsx +++ b/src/domain/props/NutritionChoroplethProps.tsx @@ -8,5 +8,5 @@ export default interface NutritionChoroplethProps { selectedCountryName?: string; regionLabelData?: FeatureCollection; setRegionLabelTooltips: (tooltips: (prevRegionLabelData: L.Tooltip[]) => L.Tooltip[]) => void; - isCountryDataLoading: boolean; + isLoadingCountry: boolean; } diff --git a/src/operations/map/MapOperations.tsx b/src/operations/map/MapOperations.tsx index ac93325a..79852e29 100644 --- a/src/operations/map/MapOperations.tsx +++ b/src/operations/map/MapOperations.tsx @@ -18,7 +18,7 @@ export class MapOperations { static async fetchCountryData( selectedMapType: GlobalInsight, selectedCountryData: CountryMapData, - setIsCountryDataLoading: (isLoading: boolean) => void, + setIsLoadingCountry: (isLoading: boolean) => void, setRegionData: (regionData: FeatureCollection | undefined) => void, setCountryData: (countryData: CountryData | undefined) => void, setCountryIso3Data: (iso3Data: CountryIso3Data | undefined) => void, @@ -28,7 +28,7 @@ export class MapOperations { setRegionLabelData: (newRegionLabelData: FeatureCollection | undefined) => void, setIsDataAvailable: (isDataAvailable: boolean) => void ) { - setIsCountryDataLoading(true); + setIsLoadingCountry(true); const countryRepository = container.resolve('CountryRepository'); try { @@ -114,7 +114,7 @@ export class MapOperations { } catch { // Do nothing } finally { - setIsCountryDataLoading(false); + setIsLoadingCountry(false); } } From f35303121abfc9c327c2465ea3cfaf329ba3ebf2 Mon Sep 17 00:00:00 2001 From: Lukas0912 Date: Thu, 19 Dec 2024 21:46:46 +0100 Subject: [PATCH 3/4] fix: properties of element not removed --- src/components/Map/IpcMap/IpcChoropleth.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/Map/IpcMap/IpcChoropleth.tsx b/src/components/Map/IpcMap/IpcChoropleth.tsx index f26f476b..890acb1b 100644 --- a/src/components/Map/IpcMap/IpcChoropleth.tsx +++ b/src/components/Map/IpcMap/IpcChoropleth.tsx @@ -49,13 +49,7 @@ function IpcChoropleth({ {selectedCountryId && ( )} - {ipcRegionData && ( - - )} + {ipcRegionData && } ); } From 0f45e4dd9d3372e752e9e8d5cbfa62732c706e13 Mon Sep 17 00:00:00 2001 From: Lukas0912 Date: Thu, 19 Dec 2024 21:58:26 +0100 Subject: [PATCH 4/4] fix: type issue in nutritionCloropleth --- .../Map/NutritionStateChoropleth.tsx | 22 +++++++++---------- src/domain/props/NutritionStateProps.ts | 2 +- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/Map/NutritionStateChoropleth.tsx b/src/components/Map/NutritionStateChoropleth.tsx index 44e8f9c8..38247e9c 100644 --- a/src/components/Map/NutritionStateChoropleth.tsx +++ b/src/components/Map/NutritionStateChoropleth.tsx @@ -31,17 +31,15 @@ export default function NutritionStateChoropleth({ }, [selectedNutrient, regionNutrition]); return ( - regionNutrition && ( - NutritionStateChoroplethOperations.dynamicStyle(feature, selectedNutrient)} - onEachFeature={(feature, layer) => { - layersRef.current.push(layer); - NutritionStateChoroplethOperations.addNutritionTooltip(layer, feature, selectedNutrient); - NutritionStateChoroplethOperations.addHoverEffect(layer); - MapOperations.setupRegionLabelTooltip(feature, regionLabelData, countryMapData, map, setRegionLabelTooltips); - }} - /> - ) + NutritionStateChoroplethOperations.dynamicStyle(feature, selectedNutrient)} + onEachFeature={(feature, layer) => { + layersRef.current.push(layer); + NutritionStateChoroplethOperations.addNutritionTooltip(layer, feature, selectedNutrient); + NutritionStateChoroplethOperations.addHoverEffect(layer); + MapOperations.setupRegionLabelTooltip(feature, regionLabelData, countryMapData, map, setRegionLabelTooltips); + }} + /> ); } diff --git a/src/domain/props/NutritionStateProps.ts b/src/domain/props/NutritionStateProps.ts index c2b3e068..63783084 100644 --- a/src/domain/props/NutritionStateProps.ts +++ b/src/domain/props/NutritionStateProps.ts @@ -5,7 +5,7 @@ import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts'; import { NutrientType } from '@/domain/enums/NutrientType.ts'; export interface NutritionStateChoroplethProps { - regionNutrition?: FeatureCollection; + regionNutrition: FeatureCollection; setRegionLabelTooltips: (tooltips: (prevRegionLabelData: L.Tooltip[]) => L.Tooltip[]) => void; regionLabelData: FeatureCollection; countryMapData: CountryMapData;