feat(frontend): aggregated risk map layer (risk hotspots)

New raster layer showing aggregated risk values for: - variables: "total value", "economic use", "population use", "total risk", EAD, EAEL. - hazards: "none", cyclone, "all flooding". Includes: - New aggregated risk map layer and params in `src/state/layers/risks`, `src/state/risks` and `src/state/risk-mapping`. - New config in `src/config/risks`. - New sidebar controls in `src/sidebar/risks`. - New legends and tooltips in `src/map/legend` and `src/map/tooltip`.
nismod · Jun 19, 2024 · 0a1dada · 0a1dada
1 parent a1fdaff
commit 0a1dada
Show file tree

Hide file tree

Showing 24 changed files with 423 additions and 55 deletions.
diff --git a/frontend/src/config/color-maps.ts b/frontend/src/config/color-maps.ts
@@ -20,6 +20,30 @@ export const RASTER_COLOR_MAPS = {
     scheme: 'reds',
     range: [0, 75],
   },
+  totalValue: {
+    scheme: 'reds',
+    range: [0, 10],
+  },
+  economicUse: {
+    scheme: 'blues',
+    range: [0, 10],
+  },
+  populationUse: {
+    scheme: 'purples',
+    range: [0, 10],
+  },
+  totalRisk: {
+    scheme: 'greens',
+    range: [0, 10],
+  },
+  ead: {
+    scheme: 'oranges',
+    range: [0, 10],
+  },
+  eael: {
+    scheme: 'purples',
+    range: [0, 10],
+  },
 };
 
 function invertColorScale<T>(colorScale: (t: number) => T) {

diff --git a/frontend/src/config/interaction-groups.ts b/frontend/src/config/interaction-groups.ts
@@ -14,6 +14,11 @@ export const INTERACTION_GROUPS = makeConfig<InteractionGroupConfig, string>([
     type: 'raster',
     pickMultiple: true,
   },
+  {
+    id: 'risks',
+    type: 'raster',
+    pickMultiple: false,
+  },
   {
     id: 'regions',
     type: 'vector',

diff --git a/frontend/src/config/risks/domains.ts b/frontend/src/config/risks/domains.ts
@@ -0,0 +1,68 @@
+import { DataParamGroupConfig } from 'lib/controls/data-params';
+
+export interface RiskParams {
+  riskSource?: string;
+  returnPeriod: number;
+  epoch: number;
+  rcp: string;
+  confidence: string | number;
+}
+
+export const RISK_DOMAINS: Record<string, DataParamGroupConfig<RiskParams>> = {
+  none: {
+    paramDomains: {
+      returnPeriod: [0],
+      epoch: [2010],
+      rcp: ['baseline'],
+      confidence: ['None'],
+    },
+    paramDefaults: {
+      returnPeriod: 0,
+      epoch: 2010,
+      rcp: 'baseline',
+      confidence: 'None',
+    },
+  },
+  fluvial: {
+    paramDomains: {
+      returnPeriod: [100],
+      rcp: ['baseline'],
+      epoch: [2010],
+      confidence: ['None'],
+    },
+    paramDefaults: {
+      returnPeriod: 100,
+      rcp: 'baseline',
+      epoch: 2010,
+      confidence: 'None',
+    },
+    paramDependencies: {
+      rcp: ({ epoch }) => {
+        if (epoch === 2010) return ['baseline'];
+        else if (epoch === 2050 || epoch === 2080) return ['2.6', '4.5', '8.5'];
+        return [];
+      },
+    },
+  },
+  cyclone: {
+    paramDomains: {
+      returnPeriod: [100],
+      epoch: [2010],
+      rcp: ['baseline'],
+      confidence: [5, 50, 95],
+    },
+    paramDefaults: {
+      returnPeriod: 100,
+      epoch: 2010,
+      rcp: 'baseline',
+      confidence: 50,
+    },
+    paramDependencies: {
+      rcp: ({ epoch }) => {
+        if (epoch === 2010) return ['baseline'];
+        if (epoch === 2050 || epoch === 2100) return ['4.5', '8.5'];
+        return [];
+      },
+    },
+  },
+};
diff --git a/frontend/src/config/risks/metadata.ts b/frontend/src/config/risks/metadata.ts
@@ -0,0 +1,36 @@
+export const HAZARDS_METADATA = {
+  none: { label: 'None' },
+  cyclone: { label: 'Cyclone' },
+  fluvial: { label: 'All Flooding' },
+};
+
+export const HAZARDS = Object.keys(HAZARDS_METADATA);
+
+export const RISKS_METADATA = {
+  totalValue: {
+    label: 'Total value',
+    dataUnit: '',
+  },
+  economicUse: {
+    label: 'Economic use',
+    dataUnit: '',
+  },
+  populationUse: {
+    label: 'Population use',
+    dataUnit: '',
+  },
+  totalRisk: {
+    label: 'Total risk',
+    dataUnit: '',
+  },
+  ead: {
+    label: 'Expected Annual Damages (EAD)',
+    dataUnit: '',
+  },
+  eael: {
+    label: 'Expected Annual Economic Losses (EAEL)',
+    dataUnit: '',
+  },
+};
+
+export const RISKS = Object.keys(RISKS_METADATA);
diff --git a/frontend/src/config/risks/risk-view-layer.ts b/frontend/src/config/risks/risk-view-layer.ts
@@ -0,0 +1,72 @@
+import GL from '@luma.gl/constants';
+import { RiskParams } from 'config/risks/domains';
+
+import { rasterTileLayer } from 'lib/deck/layers/raster-tile-layer';
+import { ViewLayer } from 'lib/data-map/view-layers';
+
+import { RASTER_COLOR_MAPS } from '../color-maps';
+import { RISK_SOURCE } from './source';
+
+export function getRiskId<
+  F extends string, //'fluvial' | 'surface' | 'coastal' | 'cyclone',
+  RP extends number,
+  RCP extends string,
+  E extends number,
+  C extends number | string,
+>({
+  riskType,
+  riskSource,
+  returnPeriod,
+  rcp,
+  epoch,
+  confidence,
+}: {
+  riskType: F;
+  riskSource: string;
+  returnPeriod: RP;
+  rcp: RCP;
+  epoch: E;
+  confidence: C;
+}) {
+  return `${riskType}__${riskSource}__rp_${returnPeriod}__rcp_${rcp}__epoch_${epoch}__conf_${confidence}` as const;
+}
+
+export function riskViewLayer(riskType: string, riskParams: RiskParams): ViewLayer {
+  const { riskSource, returnPeriod, rcp, epoch, confidence } = riskParams;
+
+  const deckId = getRiskId({ riskType, riskSource, returnPeriod, rcp, epoch, confidence });
+
+  return {
+    id: riskType,
+    group: 'risks',
+    spatialType: 'raster',
+    interactionGroup: 'risks',
+    params: { riskType, riskParams },
+    fn: ({ deckProps }) => {
+      const { scheme, range } = RASTER_COLOR_MAPS[riskType];
+      const dataURL = RISK_SOURCE.getDataUrl(
+        {
+          riskType,
+          riskParams: { riskSource, returnPeriod, rcp, epoch, confidence },
+        },
+        { scheme, range },
+      );
+
+      return rasterTileLayer(
+        {
+          textureParameters: {
+            [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
+            // [GL.TEXTURE_MAG_FILTER]: zoom < 12 ? GL.NEAREST : GL.NEAREST_MIPMAP_LINEAR,
+          },
+          opacity: riskType === 'cyclone' ? 0.6 : 1,
+        },
+        deckProps,
+        {
+          id: `${riskType}@${deckId}`, // follow the convention viewLayerId@deckLayerId
+          data: dataURL,
+          refinementStrategy: 'no-overlap',
+        },
+      );
+    },
+  };
+}
diff --git a/frontend/src/config/risks/source.ts b/frontend/src/config/risks/source.ts
@@ -0,0 +1,10 @@
+export const RISK_SOURCE = {
+  getDataUrl(
+    { riskType, riskParams: { riskSource, returnPeriod, rcp, epoch, confidence } },
+    { scheme, range },
+  ) {
+    const sanitisedRcp = rcp?.replace('.', 'x');
+
+    return `/raster/singleband/${riskType}/${riskSource}/${returnPeriod}/${sanitisedRcp}/${epoch}/${confidence}/{z}/{x}/{y}.png?colormap=${scheme}&stretch_range=[${range[0]},${range[1]}]`;
+  },
+};
diff --git a/frontend/src/config/sections.ts b/frontend/src/config/sections.ts
@@ -13,6 +13,7 @@ export const SECTIONS_CONFIG: Record<string, { styles?: Record<string, StyleSele
     styles: DROUGHT_STYLES,
   },
   hazards: {},
+  risks: {},
   buildings: {
     styles: BUILDING_STYLES,
   },

diff --git a/frontend/src/lib/map/DeckGLOverlay.tsx b/frontend/src/lib/map/DeckGLOverlay.tsx
@@ -4,11 +4,13 @@ import { useControl } from 'react-map-gl/maplibre';
 
 type DeckGLOverlayProps = MapboxOverlayProps;
 
-export const DeckGLOverlay = forwardRef<MapboxOverlay, DeckGLOverlayProps>((props, ref) => {
-  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
+const DeckGLOverLayWithRef = (props, ref) => {
+  const overlay = useControl(() => new MapboxOverlay(props));
   overlay.setProps(props);
 
   useImperativeHandle(ref, () => overlay);
 
   return null;
-});
+}
+
+export const DeckGLOverlay = forwardRef<MapboxOverlay, DeckGLOverlayProps>(DeckGLOverLayWithRef);
diff --git a/frontend/src/lib/recoil/grouped-family.ts b/frontend/src/lib/recoil/grouped-family.ts
@@ -14,7 +14,7 @@ export function groupedFamily<FVT, FPT>(
       (group) =>
       ({ get }) => {
         const groupParams = get(paramsFamily(group));
-        const deps = fromPairs(groupParams.map((param) => [param, family(paramFn(group, param))]));
+        const deps = fromPairs(groupParams?.map((param) => [param, family(paramFn(group, param))]));
         return get(waitForAll(deps));
       },
   });

diff --git a/frontend/src/map/MapView.tsx b/frontend/src/map/MapView.tsx
@@ -7,7 +7,7 @@ import {
   useSetRecoilState,
 } from 'recoil';
 
-import { mapViewStateState, useSyncMapUrl } from '../state/map-view/map-view-state';
+import { mapViewStateState } from '../state/map-view/map-view-state';
 import { BoundingBox } from 'lib/bounding-box';
 import { BaseMap } from 'lib/data-map/BaseMap';
 import { DataMap } from 'lib/data-map/DataMap';
@@ -43,11 +43,6 @@ export const mapFitBoundsState = atom<BoundingBox>({
   default: null,
 });
 
-const INITIAL_VIEW_STATE = {
-  ...mapViewConfig.initialViewState,
-  ...mapViewConfig.viewLimits,
-};
-
 const AppPlaceSearch = () => {
   const setFitBounds = useSetRecoilState(mapFitBoundsState);
 

diff --git a/frontend/src/map/legend/GradientLegend.tsx b/frontend/src/map/legend/GradientLegend.tsx
@@ -26,34 +26,34 @@ export interface GradientLegendProps {
   getValueLabel: (value: number) => string;
 }
 
-export const GradientLegend: FC<GradientLegendProps> = memo(
-  ({ label, range, colorMapValues, getValueLabel }) => (
-    <Box mb={2}>
-      <Typography>{label}</Typography>
-      <Box
-        height={legendHeight + 2}
-        width={255}
-        bgcolor="#ccc"
-        display="flex"
-        flexDirection="row"
-        border="1px solid gray"
-      >
-        {colorMapValues && (
-          <LegendGradient colorMapValues={colorMapValues} getValueLabel={getValueLabel} />
-        )}
-      </Box>
-      <Box height={10} position="relative">
-        {colorMapValues && (
-          <>
-            <Box position="absolute" left={0}>
-              <Typography>{getValueLabel(range[0])}</Typography>
-            </Box>
-            <Box position="absolute" right={0}>
-              <Typography>{getValueLabel(range[1])}</Typography>
-            </Box>
-          </>
-        )}
-      </Box>
+const GradientLegendComponent: FC<GradientLegendProps> = ({ label, range, colorMapValues, getValueLabel }) => (
+  <Box mb={2}>
+    <Typography>{label}</Typography>
+    <Box
+      height={legendHeight + 2}
+      width={255}
+      bgcolor="#ccc"
+      display="flex"
+      flexDirection="row"
+      border="1px solid gray"
+    >
+      {colorMapValues && (
+        <LegendGradient colorMapValues={colorMapValues} getValueLabel={getValueLabel} />
+      )}
     </Box>
-  ),
-);
+    <Box height={10} position="relative">
+      {colorMapValues && (
+        <>
+          <Box position="absolute" left={0}>
+            <Typography>{getValueLabel(range[0])}</Typography>
+          </Box>
+          <Box position="absolute" right={0}>
+            <Typography>{getValueLabel(range[1])}</Typography>
+          </Box>
+        </>
+      )}
+    </Box>
+  </Box>
+)
+
+export const GradientLegend = memo(GradientLegendComponent);
diff --git a/frontend/src/map/legend/RasterLegend.tsx b/frontend/src/map/legend/RasterLegend.tsx
@@ -1,5 +1,6 @@
 import { RASTER_COLOR_MAPS } from 'config/color-maps';
 import { HAZARDS_METADATA } from 'config/hazards/metadata';
+import { RISKS_METADATA } from 'config/risks/metadata';
 import { ViewLayer } from 'lib/data-map/view-layers';
 import { FC, useCallback } from 'react';
 import { GradientLegend } from './GradientLegend';
@@ -14,12 +15,13 @@ export interface RasterColorMapValues {
 }
 
 export const RasterLegend: FC<{ viewLayer: ViewLayer }> = ({ viewLayer }) => {
-  const {
-    params: { hazardType },
-  } = viewLayer;
-  const { label, dataUnit } = HAZARDS_METADATA[hazardType];
-  const { scheme, range } = RASTER_COLOR_MAPS[hazardType];
-
+  const { id } = viewLayer;
+  const metadata = {
+    ...HAZARDS_METADATA,
+    ...RISKS_METADATA,
+  };
+  const { label, dataUnit } = metadata[id];
+  const { scheme, range } = RASTER_COLOR_MAPS[id];
   const { error, loading, colorMapValues } = useRasterColorMapValues(scheme, range);
 
   const getValueLabel = useCallback(