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/modules/risks`.
- New config in `src/config/risks`. Parameters defined in `src/config/risks/domains`.
- New sidebar controls in `src/sidebar/risks`.
- New legends and tooltips in `src/config/risks`.

frontend/src/config/interaction-groups.ts

@@ -4,6 +4,7 @@ import { AssetHoverDescription } from './assets/AssetHoverDescription';
 import { SolutionHoverDescription } from './solutions/SolutionHoverDescription';
 import { RegionHoverDescription } from './regions/RegionHoverDescription';
 import { DroughtHoverDescription } from './drought/DroughtHoverDescription';
+import { RiskHoverDescription } from './risks/RiskHoverDescription';
 
 export const INTERACTION_GROUPS = new Map<string, InteractionGroupConfig>([
   [
@@ -25,6 +26,15 @@ export const INTERACTION_GROUPS = new Map<string, InteractionGroupConfig>([
       pickMultiple: true,
     },
   ],
+  [
+    'risks',
+    {
+      id: 'risks',
+      type: 'raster',
+      pickMultiple: false,
+      Component: RiskHoverDescription,
+    },
+  ],
   [
     'regions',
     {

frontend/src/config/risks/RiskHoverDescription.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+
+import { RasterHoverDescription } from 'lib/data-map/types';
+import { RasterHoverDescription as RasterTooltip } from 'map/tooltip/content/RasterHoverDescription';
+
+import { RISKS_METADATA, RISKS_COLOR_MAPS } from './metadata';
+
+export const RiskHoverDescription: FC<RasterHoverDescription> = ({ target, viewLayer }) => {
+  const { label, dataUnit } = RISKS_METADATA[viewLayer.id];
+  const { scheme, range } = RISKS_COLOR_MAPS[viewLayer.id];
+  return (
+    <RasterTooltip
+      color={target.color}
+      label={label}
+      dataUnit={dataUnit}
+      scheme={scheme}
+      range={range}
+    />
+  );
+};

frontend/src/config/risks/RiskLegend.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+import { RasterLegend } from 'map/legend/RasterLegend';
+import { ViewLayer } from 'lib/data-map/view-layers';
+
+import { RISKS_COLOR_MAPS, RISKS_METADATA } from './metadata';
+
+export const RiskLegend: FC<{ viewLayer: ViewLayer }> = ({ viewLayer }) => {
+  const { id } = viewLayer;
+  const { label, dataUnit } = RISKS_METADATA[id];
+  const { scheme, range } = RISKS_COLOR_MAPS[id];
+  return <RasterLegend label={label} dataUnit={dataUnit} scheme={scheme} range={range} />;
+};

frontend/src/config/risks/domains.ts

@@ -0,0 +1,66 @@
+import { DataParamGroupConfig } from 'lib/controls/data-params';
+
+export interface RiskParams {
+  hazard: string;
+  returnPeriod: number;
+  epoch: number;
+  rcp: string;
+  confidence: string | number;
+}
+
+/*
+  Default parameter ranges for each hazard type.
+  These are used to define ranges for input controls in the sidebar.
+*/
+const hazardParamDomains = {
+  none: {
+    returnPeriod: [0],
+    epoch: [2010],
+    rcp: ['baseline'],
+    confidence: ['None'],
+  },
+  cyclone: {
+    returnPeriod: [0],
+    epoch: [2010],
+    rcp: ['baseline'],
+    confidence: ['None'],
+  },
+  fluvial: {
+    returnPeriod: [0],
+    epoch: [2010],
+    rcp: ['baseline'],
+    confidence: ['None'],
+  },
+};
+
+export const RISK_DOMAINS: DataParamGroupConfig<RiskParams> = {
+  /*
+    Default parameter ranges for each risk type.
+  */
+  paramDomains: {
+    hazard: ['none', 'cyclone', 'fluvial'],
+    returnPeriod: [0],
+    epoch: [2010],
+    rcp: ['baseline'],
+    confidence: ['None'],
+  },
+  /*
+    Default parameter values for each risk type.
+  */
+  paramDefaults: {
+    hazard: 'none',
+    returnPeriod: 0,
+    epoch: 2010,
+    rcp: 'baseline',
+    confidence: 'None',
+  },
+  /*
+    Callback functions to define custom parameter ranges based on selected hazard etc.
+  */
+  paramDependencies: {
+    rcp: ({ hazard }) => hazardParamDomains[hazard].rcp,
+    epoch: ({ hazard }) => hazardParamDomains[hazard].epoch,
+    returnPeriod: ({ hazard }) => hazardParamDomains[hazard].returnPeriod,
+    confidence: ({ hazard }) => hazardParamDomains[hazard].confidence,
+  },
+};

frontend/src/config/risks/metadata.ts

@@ -0,0 +1,63 @@
+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_COLOR_MAPS = {
+  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],
+  },
+};
+
+export const RISKS = Object.keys(RISKS_METADATA);

frontend/src/config/risks/risk-view-layer.ts

@@ -0,0 +1,93 @@
+import { createElement } from 'react';
+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 { RasterTarget } from 'lib/data-map/types';
+
+import { RiskLegend } from './RiskLegend';
+import { RiskHoverDescription } from './RiskHoverDescription';
+import { RISKS_COLOR_MAPS } from './metadata';
+import { RISK_SOURCE } from './source';
+
+export function getRiskId<
+  F extends string, // risk variable
+  RP extends number,
+  RCP extends string,
+  E extends number,
+  C extends number | string,
+>({
+  riskType,
+  hazard,
+  returnPeriod,
+  rcp,
+  epoch,
+  confidence,
+}: {
+  riskType: F;
+  hazard: string;
+  returnPeriod: RP;
+  rcp: RCP;
+  epoch: E;
+  confidence: C;
+}) {
+  return `${riskType}__${hazard}__rp_${returnPeriod}__rcp_${rcp}__epoch_${epoch}__conf_${confidence}` as const;
+}
+
+export function riskViewLayer(riskType: string, riskParams: RiskParams): ViewLayer {
+  const { hazard, returnPeriod, rcp, epoch, confidence } = riskParams;
+
+  const deckId = getRiskId({ riskType, hazard, returnPeriod, rcp, epoch, confidence });
+
+  return {
+    id: riskType,
+    group: 'risks',
+    spatialType: 'raster',
+    interactionGroup: 'risks',
+    params: { riskType, riskParams },
+    fn: ({ deckProps }) => {
+      const { scheme, range } = RISKS_COLOR_MAPS[riskType];
+      const dataURL = RISK_SOURCE.getDataUrl(
+        {
+          riskType,
+          riskParams: { hazard, 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',
+        },
+      );
+    },
+    renderLegend() {
+      return createElement(RiskLegend, {
+        key: riskType,
+        viewLayer: this,
+      });
+    },
+    renderTooltip({
+      key,
+      target,
+      viewLayer,
+    }: {
+      key?: string;
+      target: RasterTarget;
+      viewLayer: ViewLayer;
+    }) {
+      return createElement(RiskHoverDescription, { key, target, viewLayer });
+    },
+  };
+}

frontend/src/config/risks/source.ts

@@ -0,0 +1,12 @@
+export const RISK_SOURCE = {
+  getDataUrl(
+    { riskType, riskParams: { hazard, returnPeriod, rcp, epoch, confidence } },
+    { scheme, range },
+  ) {
+    const sanitisedRcp = rcp?.replace('.', 'x');
+    console.log({ riskType, hazard, returnPeriod, sanitisedRcp, epoch, confidence });
+
+    return `/raster/singleband/fluvial/100/baseline/2010/None/{z}/{x}/{y}.png?colormap=${scheme}&stretch_range=[${range[0]},${range[1]}]`;
+    return `/raster/singleband/${riskType}/${hazard}/${returnPeriod}/${sanitisedRcp}/${epoch}/${confidence}/{z}/{x}/{y}.png?colormap=${scheme}&stretch_range=[${range[0]},${range[1]}]`;
+  },
+};

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,
   },

frontend/src/config/view-layers.ts

@@ -4,6 +4,7 @@ export const VIEW_LAYERS = [
   'terrestrial',
   'marine',
   'hazards',
+  'risks',
   'buildings',
   'networks',
   'droughtOptions',

frontend/src/sidebar/SidebarContent.tsx

@@ -11,6 +11,7 @@ import { NetworksSection } from './networks/NetworksSection';
 import { RegionsSection } from './regions/RegionsSection';
 import { MarineSection } from './solutions/MarineSection';
 import { TerrestrialSection } from './solutions/TerrestrialSection';
+import { RisksSection } from './risks/RisksSection';
 import { ErrorBoundary } from 'lib/react/ErrorBoundary';
 import { MobileTabContentWatcher } from 'pages/map/layouts/mobile/tab-has-content';
 
@@ -29,6 +30,7 @@ const SidebarContent: FC = () => {
       return (
         <>
           <NetworksSection />
+          <RisksSection />
           <HazardsSection />
           <BuildingsSection />
           <RegionsSection />

frontend/src/sidebar/risks/RisksControl.tsx

@@ -0,0 +1,69 @@
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  Select,
+} from '@mui/material';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { dataParamState, useUpdateDataParam } from 'state/data-params';
+import { InputSection } from 'sidebar/ui/InputSection';
+import { InputRow } from 'sidebar/ui/InputRow';
+import { EpochControl } from 'sidebar/ui/params/EpochControl';
+import { RCPControl } from 'sidebar/ui/params/RCPControl';
+import { risksSelectionState } from 'state/layers/modules/risks';
+import { HAZARDS, HAZARDS_METADATA, RISKS, RISKS_METADATA } from 'config/risks/metadata';
+
+export const RisksControl = () => {
+  const [risksSelection, setRisksSelection] = useRecoilState(risksSelectionState);
+
+  function selectType({ target }) {
+    setRisksSelection(target?.value);
+  }
+
+  const hazard = useRecoilValue(dataParamState({ group: 'risks', param: 'hazard' }));
+  const updateHazard = useUpdateDataParam('risks', 'hazard');
+  function selectHazard(event, value) {
+    updateHazard(value);
+  }
+
+  return (
+    <>
+      <InputSection>
+        <FormControl fullWidth>
+          <FormLabel>Display</FormLabel>
+          <Select<string> variant="standard" value={risksSelection} onChange={selectType}>
+            {RISKS.map((risk) => (
+              <MenuItem key={risk} value={risk}>
+                {RISKS_METADATA[risk].label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </InputSection>
+      <InputSection>
+        <FormControl>
+          <FormLabel>Hazard</FormLabel>
+          <RadioGroup value={hazard} onChange={selectHazard}>
+            {HAZARDS.map((hazardOption) => (
+              <FormControlLabel
+                key={hazardOption}
+                label={HAZARDS_METADATA[hazardOption].label}
+                control={<Radio value={hazardOption} />}
+              />
+            ))}
+          </RadioGroup>
+        </FormControl>
+      </InputSection>
+      <InputSection>
+        <InputRow>
+          <EpochControl group="risks" />
+          <RCPControl group="risks" />
+        </InputRow>
+      </InputSection>
+    </>
+  );
+};