From aec0a4f97a0a69858e9c39630a67c67d01796016 Mon Sep 17 00:00:00 2001 From: Jim O'Donnell Date: Mon, 1 Jul 2024 22:57:48 +0100 Subject: [PATCH] refactor(frontend): raster config cleanup (#57) - remove the redundant `Component` property from raster groups. - remove the unused `RASTER_COLOR_MAPS`. - simplify `viewLayer.renderTooltip` for raster layers. - add `RasterHoverDescription` and `VectorHoverDescription` interfaces for tooltips. --- .../config/assets/AssetHoverDescription.tsx | 12 ++++-------- frontend/src/config/color-maps.ts | 19 ------------------- .../drought/DroughtHoverDescription.tsx | 18 ++++-------------- .../config/hazards/HazardHoverDescription.tsx | 12 ++++-------- .../src/config/hazards/hazard-view-layer.ts | 12 ++---------- frontend/src/config/interaction-groups.ts | 2 -- .../config/regions/RegionHoverDescription.tsx | 8 ++------ .../solutions/SolutionHoverDescription.tsx | 8 ++------ frontend/src/lib/data-map/types.ts | 17 ++++++++++++++++- frontend/src/lib/data-map/view-layers.ts | 10 +--------- frontend/src/map/tooltip/TooltipContent.tsx | 10 +++++++--- .../state/interactions/interaction-state.ts | 11 ++++++++--- 12 files changed, 50 insertions(+), 89 deletions(-) diff --git a/frontend/src/config/assets/AssetHoverDescription.tsx b/frontend/src/config/assets/AssetHoverDescription.tsx index b79be2be..7b2072e5 100644 --- a/frontend/src/config/assets/AssetHoverDescription.tsx +++ b/frontend/src/config/assets/AssetHoverDescription.tsx @@ -1,12 +1,8 @@ import { FC } from 'react'; -import { VectorTarget } from 'lib/data-map/types'; -import { VectorHoverDescription } from 'map/tooltip/content/VectorHoverDescription'; -import { ViewLayer } from 'lib/data-map/view-layers'; +import { VectorHoverDescription } from 'lib/data-map/types'; +import { VectorHoverDescription as VectorTooltip } from 'map/tooltip/content/VectorHoverDescription'; -export const AssetHoverDescription: FC<{ target: VectorTarget; viewLayer: ViewLayer }> = ({ - target, - viewLayer, -}) => { - return ; +export const AssetHoverDescription: FC = ({ target, viewLayer }) => { + return ; }; diff --git a/frontend/src/config/color-maps.ts b/frontend/src/config/color-maps.ts index 8f5eb366..1fdc86b3 100644 --- a/frontend/src/config/color-maps.ts +++ b/frontend/src/config/color-maps.ts @@ -3,25 +3,6 @@ import * as d3Scale from 'd3-scale'; import { ColorSpec } from 'lib/data-map/view-layers'; import { valueType } from 'lib/helpers'; -export const RASTER_COLOR_MAPS = { - fluvial: { - scheme: 'blues', - range: [0, 10], - }, - coastal: { - scheme: 'greens', - range: [0, 10], - }, - surface: { - scheme: 'purples', - range: [0, 10], - }, - cyclone: { - scheme: 'reds', - range: [0, 75], - }, -}; - function invertColorScale(colorScale: (t: number) => T) { return (i: number) => colorScale(1 - i); } diff --git a/frontend/src/config/drought/DroughtHoverDescription.tsx b/frontend/src/config/drought/DroughtHoverDescription.tsx index 80335f1b..ca2d2ebb 100644 --- a/frontend/src/config/drought/DroughtHoverDescription.tsx +++ b/frontend/src/config/drought/DroughtHoverDescription.tsx @@ -1,6 +1,6 @@ import { Typography } from '@mui/material'; import { DataItem } from 'details/features/detail-components'; -import { VectorTarget } from 'lib/data-map/types'; +import { VectorHoverDescription } from 'lib/data-map/types'; import { FC, useMemo } from 'react'; import { useRecoilValue } from 'recoil'; import { @@ -10,12 +10,8 @@ import { droughtRegionsFieldSpecState, } from 'state/layers/modules/drought'; import { DataDescription } from 'map/tooltip/DataDescription'; -import { ViewLayer } from 'lib/data-map/view-layers'; -const DroughtRiskDescription: FC<{ - target: VectorTarget; - viewLayer: ViewLayer; -}> = ({ target, viewLayer }) => { +const DroughtRiskDescription: FC = ({ target, viewLayer }) => { const fieldSpec = useRecoilValue(droughtRegionsFieldSpecState); const colorSpec = useRecoilValue(droughtRegionsColorSpecState); @@ -37,10 +33,7 @@ const DroughtRiskDescription: FC<{ ); }; -const DroughtOptionDescription: FC<{ - target: VectorTarget; - viewLayer: ViewLayer; -}> = ({ target, viewLayer }) => { +const DroughtOptionDescription: FC = ({ target, viewLayer }) => { const fieldSpec = useRecoilValue(droughtOptionsFieldSpecState); const colorSpec = useRecoilValue(droughtOptionsColorSpecState); @@ -63,10 +56,7 @@ const DroughtOptionDescription: FC<{ ); }; -export const DroughtHoverDescription: FC<{ - target: VectorTarget; - viewLayer: ViewLayer; -}> = ({ target, viewLayer }) => { +export const DroughtHoverDescription: FC = ({ target, viewLayer }) => { if (viewLayer.id === 'drought_risk') { return ; } else if (viewLayer.id === 'drought_options') { diff --git a/frontend/src/config/hazards/HazardHoverDescription.tsx b/frontend/src/config/hazards/HazardHoverDescription.tsx index 6f15f74a..7ffab9c3 100644 --- a/frontend/src/config/hazards/HazardHoverDescription.tsx +++ b/frontend/src/config/hazards/HazardHoverDescription.tsx @@ -1,19 +1,15 @@ import { FC } from 'react'; -import { RasterTarget } from 'lib/data-map/types'; -import { RasterHoverDescription } from 'map/tooltip/content/RasterHoverDescription'; +import { RasterHoverDescription } from 'lib/data-map/types'; +import { RasterHoverDescription as RasterTooltip } from 'map/tooltip/content/RasterHoverDescription'; import { HAZARDS_METADATA, HAZARD_COLOR_MAPS } from './metadata'; -import { ViewLayer } from 'lib/data-map/view-layers'; -export const HazardHoverDescription: FC<{ target: RasterTarget; viewLayer: ViewLayer }> = ({ - target, - viewLayer, -}) => { +export const HazardHoverDescription: FC = ({ target, viewLayer }) => { const { label, dataUnit } = HAZARDS_METADATA[viewLayer.id]; const { scheme, range } = HAZARD_COLOR_MAPS[viewLayer.id]; return ( - ([ id: 'hazards', type: 'raster', pickMultiple: true, - Component: HazardHoverDescription, }, ], [ diff --git a/frontend/src/config/regions/RegionHoverDescription.tsx b/frontend/src/config/regions/RegionHoverDescription.tsx index bc6c0c7e..232592bd 100644 --- a/frontend/src/config/regions/RegionHoverDescription.tsx +++ b/frontend/src/config/regions/RegionHoverDescription.tsx @@ -1,16 +1,12 @@ import { FC } from 'react'; import { REGIONS_METADATA } from './metadata'; -import { VectorTarget } from 'lib/data-map/types'; +import { VectorHoverDescription } from 'lib/data-map/types'; import { useRecoilValue } from 'recoil'; import { showPopulationState } from 'state/regions'; import { DataItem } from 'details/features/detail-components'; -import { ViewLayer } from 'lib/data-map/view-layers'; -export const RegionHoverDescription: FC<{ - target: VectorTarget; - viewLayer: ViewLayer; -}> = ({ target, viewLayer }) => { +export const RegionHoverDescription: FC = ({ target, viewLayer }) => { const metadata = REGIONS_METADATA[viewLayer.params.regionLevel]; const showPopulation = useRecoilValue(showPopulationState); diff --git a/frontend/src/config/solutions/SolutionHoverDescription.tsx b/frontend/src/config/solutions/SolutionHoverDescription.tsx index fd43e795..e6e03746 100644 --- a/frontend/src/config/solutions/SolutionHoverDescription.tsx +++ b/frontend/src/config/solutions/SolutionHoverDescription.tsx @@ -2,14 +2,13 @@ import { Typography } from '@mui/material'; import { VECTOR_COLOR_MAPS } from 'config/color-maps'; import { MARINE_HABITATS_LOOKUP } from 'config/solutions/domains'; import { DataItem } from 'details/features/detail-components'; -import { VectorTarget } from 'lib/data-map/types'; +import { VectorHoverDescription } from 'lib/data-map/types'; import startCase from 'lodash/startCase'; import { FC } from 'react'; import { habitatColorMap } from 'state/layers/modules/marine'; import { landuseColorMap } from 'state/layers/modules/terrestrial'; import { DataDescription } from 'map/tooltip/DataDescription'; import { ColorBox } from 'map/tooltip/content/ColorBox'; -import { ViewLayer } from 'lib/data-map/view-layers'; const slopeFieldSpec = { fieldGroup: 'properties', @@ -21,10 +20,7 @@ const elevationFieldSpec = { field: 'elevation_m', }; -export const SolutionHoverDescription: FC<{ - target: VectorTarget; - viewLayer: ViewLayer; -}> = ({ target, viewLayer }) => { +export const SolutionHoverDescription: FC = ({ target, viewLayer }) => { return ( <> {startCase(viewLayer.id)} diff --git a/frontend/src/lib/data-map/types.ts b/frontend/src/lib/data-map/types.ts index 2e020fb3..25ba8edb 100644 --- a/frontend/src/lib/data-map/types.ts +++ b/frontend/src/lib/data-map/types.ts @@ -8,7 +8,7 @@ export interface InteractionGroupConfig { pickingRadius?: number; pickMultiple?: boolean; usesAutoHighlight?: boolean; - Component: React.ComponentType<{ + Component?: React.ComponentType<{ target: RasterTarget | VectorTarget; viewLayer: ViewLayer; }>; @@ -33,3 +33,18 @@ export interface VectorTarget { } export type InteractionLayer = InteractionTarget | InteractionTarget; + +export interface RasterHoverDescription { + target: RasterTarget; + viewLayer: ViewLayer; +} + +export interface VectorHoverDescription { + target: VectorTarget; + viewLayer: ViewLayer; +} + +export interface HoverDescription { + target: RasterTarget | VectorTarget; + viewLayer: ViewLayer; +} diff --git a/frontend/src/lib/data-map/view-layers.ts b/frontend/src/lib/data-map/view-layers.ts index a55f0b63..c440120a 100644 --- a/frontend/src/lib/data-map/view-layers.ts +++ b/frontend/src/lib/data-map/view-layers.ts @@ -57,15 +57,7 @@ export interface ViewLayer { spatialType?: string; interactionGroup?: string; renderLegend?: () => JSX.Element; - renderTooltip?: ({ - key, - target, - viewLayer, - }: { - key?: string; - target: RasterTarget | VectorTarget; - viewLayer: ViewLayer; - }) => JSX.Element; + renderTooltip?: ({ target }: { target: RasterTarget | VectorTarget }) => JSX.Element; } export function viewOnlyLayer(id, fn): ViewLayer { diff --git a/frontend/src/map/tooltip/TooltipContent.tsx b/frontend/src/map/tooltip/TooltipContent.tsx index 3f5e1d95..f2ad6ef8 100644 --- a/frontend/src/map/tooltip/TooltipContent.tsx +++ b/frontend/src/map/tooltip/TooltipContent.tsx @@ -4,7 +4,11 @@ import { useRecoilValue } from 'recoil'; import { layerHoverStates } from 'state/interactions/interaction-state'; import { ErrorBoundary } from 'lib/react/ErrorBoundary'; -import { RasterTarget, VectorTarget } from 'lib/data-map/types'; +import { + HoverDescription, + RasterTarget, + VectorTarget, +} from 'lib/data-map/types'; import { ViewLayer } from 'lib/data-map/view-layers'; const TooltipSection = ({ children }) => ( @@ -22,11 +26,11 @@ function renderTooltip({ key?: string; target: VectorTarget | RasterTarget; viewLayer: ViewLayer; - Component: FC<{ target: VectorTarget | RasterTarget; viewLayer: ViewLayer }>; + Component: FC; }) { // renderTooltip isn't implemented on all view layers yet. if (viewLayer.renderTooltip) { - return viewLayer.renderTooltip({ key, target, viewLayer }); + return viewLayer.renderTooltip({ target }); } // Fallback to the default tooltip component for older layers. return ; diff --git a/frontend/src/state/interactions/interaction-state.ts b/frontend/src/state/interactions/interaction-state.ts index 711df0db..dfd95c21 100644 --- a/frontend/src/state/interactions/interaction-state.ts +++ b/frontend/src/state/interactions/interaction-state.ts @@ -2,10 +2,15 @@ import { FC } from 'react'; import { selector } from 'recoil'; import { INTERACTION_GROUPS } from 'config/interaction-groups'; -import { InteractionTarget, RasterTarget, VectorTarget } from 'lib/data-map/types'; +import { + InteractionTarget, + RasterHoverDescription, + RasterTarget, + VectorHoverDescription, + VectorTarget, +} from 'lib/data-map/types'; import { hoverState, hasHover } from 'lib/state/interactions/interaction-state'; import { showPopulationState } from 'state/regions'; -import { ViewLayer } from 'lib/data-map/view-layers'; type InteractionLayer = InteractionTarget | InteractionTarget; type IT = InteractionLayer | InteractionLayer[]; @@ -15,7 +20,7 @@ const interactionGroupEntries = [...INTERACTION_GROUPS.entries()]; type LayerHoverState = { isHovered: boolean; hoverTarget: IT; - Component: FC<{ target: RasterTarget | VectorTarget; viewLayer: ViewLayer }>; + Component: FC | FC; }; export const layerHoverStates = selector({