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.
nismod · Jul 1, 2024 · aec0a4f · aec0a4f
1 parent 24d3c5b
commit aec0a4f
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 89 deletions.
diff --git 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 <VectorHoverDescription viewLayer={viewLayer} feature={target.feature} />;
+export const AssetHoverDescription: FC<VectorHoverDescription> = ({ target, viewLayer }) => {
+  return <VectorTooltip viewLayer={viewLayer} feature={target.feature} />;
 };
diff --git 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<T>(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
@@ -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<VectorHoverDescription> = ({ 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<VectorHoverDescription> = ({ 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<VectorHoverDescription> = ({ target, viewLayer }) => {
   if (viewLayer.id === 'drought_risk') {
     return <DroughtRiskDescription target={target} viewLayer={viewLayer} />;
   } else if (viewLayer.id === 'drought_options') {

diff --git 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<RasterHoverDescription> = ({ target, viewLayer }) => {
   const { label, dataUnit } = HAZARDS_METADATA[viewLayer.id];
   const { scheme, range } = HAZARD_COLOR_MAPS[viewLayer.id];
   return (
-    <RasterHoverDescription
+    <RasterTooltip
       color={target.color}
       label={label}
       dataUnit={dataUnit}

diff --git a/frontend/src/config/hazards/hazard-view-layer.ts b/frontend/src/config/hazards/hazard-view-layer.ts
@@ -71,16 +71,8 @@ export function hazardViewLayer(hazardType: string, hazardParams: HazardParams):
         viewLayer: this,
       });
     },
-    renderTooltip({
-      key,
-      target,
-      viewLayer,
-    }: {
-      key?: string;
-      target: RasterTarget;
-      viewLayer: ViewLayer;
-    }) {
-      return createElement(HazardHoverDescription, { key, target, viewLayer });
+    renderTooltip({ target }: { target: RasterTarget }) {
+      return createElement(HazardHoverDescription, { key: this.id, target, viewLayer: this });
     },
   };
 }
diff --git a/frontend/src/config/interaction-groups.ts b/frontend/src/config/interaction-groups.ts
@@ -1,7 +1,6 @@
 import { InteractionGroupConfig } from 'lib/data-map/types';
 
 import { AssetHoverDescription } from './assets/AssetHoverDescription';
-import { HazardHoverDescription } from './hazards/HazardHoverDescription';
 import { SolutionHoverDescription } from './solutions/SolutionHoverDescription';
 import { RegionHoverDescription } from './regions/RegionHoverDescription';
 import { DroughtHoverDescription } from './drought/DroughtHoverDescription';
@@ -24,7 +23,6 @@ export const INTERACTION_GROUPS = new Map<string, InteractionGroupConfig>([
       id: 'hazards',
       type: 'raster',
       pickMultiple: true,
-      Component: HazardHoverDescription,
     },
   ],
   [

diff --git 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<VectorHoverDescription> = ({ 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
@@ -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<VectorHoverDescription> = ({ target, viewLayer }) => {
   return (
     <>
       <Typography variant="body2">{startCase(viewLayer.id)}</Typography>

diff --git 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<VectorTarget> | InteractionTarget<RasterTarget>;
+
+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
@@ -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
@@ -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<HoverDescription>;
 }) {
   // 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 <Component key={key} target={target} viewLayer={viewLayer} />;

diff --git 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<VectorTarget> | InteractionTarget<RasterTarget>;
 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<RasterHoverDescription> | FC<VectorHoverDescription>;
 };
 
 export const layerHoverStates = selector({