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/app/config/interaction-groups.ts

@@ -19,6 +19,14 @@ export const INTERACTION_GROUPS = new Map<string, InteractionGroupConfig>([
       pickMultiple: true,
     },
   ],
+  [
+    'risks',
+    {
+      id: 'risks',
+      type: 'raster',
+      pickMultiple: false,
+    },
+  ],
   [
     'regions',
     {

frontend/src/app/config/sections.ts

@@ -5,6 +5,7 @@ import { NETWORK_STYLES } from 'data-layers/networks/styles';
 import { REGION_STYLES } from 'data-layers/regions/styles';
 import { MARINE_STYLES } from 'data-layers/marine/styles';
 import { TERRESTRIAL_STYLES } from 'data-layers/terrestrial/styles';
+import { RISK_STYLES } from 'data-layers/risks/styles';
 
 export const SECTIONS_CONFIG: Record<string, { styles?: Record<string, StyleSelectionOption> }> = {
   assets: {
@@ -14,6 +15,9 @@ export const SECTIONS_CONFIG: Record<string, { styles?: Record<string, StyleSele
     styles: DROUGHT_STYLES,
   },
   hazards: {},
+  risks: {
+    styles: RISK_STYLES,
+  },
   buildings: {
     styles: BUILDING_STYLES,
   },

frontend/src/app/config/view-layers.ts

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

frontend/src/app/config/views.ts

@@ -1,3 +1,5 @@
+import { RISKS_METADATA } from 'data-layers/risks/metadata';
+
 export interface ViewSectionConfig {
   expanded: boolean;
   visible: boolean;
@@ -13,6 +15,13 @@ export const VIEW_SECTIONS: Record<string, Record<string, ViewSectionConfig>> =
       styles: ['type'],
       defaultStyle: 'type',
     },
+    risks: {
+      expanded: true,
+      visible: true,
+
+      styles: Object.keys(RISKS_METADATA),
+      defaultStyle: Object.keys(RISKS_METADATA)[0],
+    },
     hazards: {
       expanded: true,
       visible: true,
@@ -52,6 +61,13 @@ export const VIEW_SECTIONS: Record<string, Record<string, ViewSectionConfig>> =
       styles: ['type', 'damages'],
       defaultStyle: 'damages',
     },
+    risks: {
+      expanded: true,
+      visible: true,
+
+      styles: Object.keys(RISKS_METADATA),
+      defaultStyle: Object.keys(RISKS_METADATA)[0],
+    },
     hazards: {
       expanded: false,
       visible: true,

frontend/src/app/sidebar/SidebarContent.tsx

@@ -9,6 +9,7 @@ import { DroughtsSection } from 'data-layers/droughtRisks/sidebar/DroughtsSectio
 import { HazardsSection } from 'data-layers/hazards/sidebar/HazardsSection';
 import { NetworksSection } from 'data-layers/networks/sidebar/NetworksSection';
 import { RegionsSection } from 'data-layers/regions/sidebar/RegionsSection';
+import { RisksSection } from 'data-layers/risks/sidebar/RisksSection';
 import { MarineSection } from 'data-layers/marine/sidebar/MarineSection';
 import { TerrestrialSection } from 'data-layers/terrestrial/sidebar/TerrestrialSection';
 import { ErrorBoundary } from 'lib/react/ErrorBoundary';
@@ -29,6 +30,7 @@ const SidebarContent: FC = () => {
       return (
         <>
           <NetworksSection />
+          <RisksSection />
           <HazardsSection />
           <BuildingsSection />
           <RegionsSection />

frontend/src/app/state/data-params.ts

@@ -1,5 +1,6 @@
 import { HAZARD_DOMAINS } from 'data-layers/hazards/domains';
 import { NETWORK_DOMAINS } from 'data-layers/networks/domains';
+import { RISK_DOMAINS } from 'data-layers/risks/domains';
 import {
   DataParamGroupConfig,
   Param,
@@ -21,6 +22,7 @@ export type DataParamParam = Readonly<{
 export const dataParamConfig: Record<string, DataParamGroupConfig> = {
   ...HAZARD_DOMAINS,
   ...NETWORK_DOMAINS,
+  risks: RISK_DOMAINS,
 };
 
 export const dataParamNamesByGroup = mapValues(dataParamConfig, (groupConfig) =>

frontend/src/data-layers/risks/RiskHoverDescription.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+
+import { RasterHoverDescription } from 'lib/data-map/types';
+import { RasterHoverDescription as RasterTooltip } from 'app/map/tooltip/content/RasterHoverDescription';
+
+import * as RISKS_COLOR_MAPS from './color-maps';
+import { RISKS_METADATA } 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/data-layers/risks/RiskLegend.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+
+import { RasterLegend } from 'app/map/legend/RasterLegend';
+import { ViewLayer } from 'lib/data-map/view-layers';
+
+import * as RISKS_COLOR_MAPS from './color-maps';
+import { 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/data-layers/risks/color-maps.ts

@@ -0,0 +1,28 @@
+export const totalValue = {
+  scheme: 'reds',
+  range: [0, 10],
+};
+export const economicUse = {
+  scheme: 'blues',
+  range: [0, 10],
+};
+
+export const populationUse = {
+  scheme: 'purples',
+  range: [0, 10],
+};
+
+export const totalRisk = {
+  scheme: 'greens',
+  range: [0, 10],
+};
+
+export const ead = {
+  scheme: 'oranges',
+  range: [0, 10],
+};
+
+export const eael = {
+  scheme: 'purples',
+  range: [0, 10],
+};

frontend/src/data-layers/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/data-layers/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);

frontend/src/data-layers/risks/risk-view-layer.ts

@@ -0,0 +1,85 @@
+import { createElement } from 'react';
+import GL from '@luma.gl/constants';
+import { RiskParams } from './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 * as RISKS_COLOR_MAPS from './color-maps';
+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({ target }: { target: RasterTarget }) {
+      return createElement(RiskHoverDescription, { key: this.id, target, viewLayer: this });
+    },
+  };
+}