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

New raster layer showing aggregated risk values for:
- variables: "exposure value", "population affected", "loss GDP", "demand affected".
- 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`.
- Makes a start on generic formats for data values eg. financial or population.

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/map/tooltip/content/RasterHoverDescription.tsx

@@ -23,23 +23,58 @@ function formatHazardValue(color, value, dataUnit) {
   );
 }
 
+function formatFinancialValue(color, value) {
+  return (
+    <>
+      <ColorBox color={color} />
+      {value == null
+        ? ''
+        : value.toLocaleString(undefined, {
+            style: 'currency',
+            currency: 'JMD',
+            currencyDisplay: 'narrowSymbol',
+            maximumSignificantDigits: 3,
+          })}
+    </>
+  );
+}
+
+function formatPopulationValue(color, value) {
+  return (
+    <>
+      <ColorBox color={color} />
+      {value == null
+        ? ''
+        : value.toLocaleString(undefined, {
+            maximumSignificantDigits: 3,
+          })}
+    </>
+  );
+}
+
 export const RasterHoverDescription: FC<{
   color: [number, number, number, number];
   label: string;
   dataUnit: string;
   scheme: string;
   range: [number, number];
-}> = ({ color, label, dataUnit, scheme, range }) => {
+  type: string;
+}> = ({ color, label, dataUnit, scheme, range, type = 'hazard' }) => {
   const title = `${label}`;
 
   const { colorMapValues } = useRasterColorMapValues(scheme, range);
   const rasterValueLookup = useRasterColorMapLookup(colorMapValues);
 
   const colorString = `rgb(${color[0]},${color[1]},${color[2]})`;
   const value = rasterValueLookup?.[colorString];
+  const formatFunction = {
+    hazard: formatHazardValue,
+    financial: formatFinancialValue,
+    population: formatPopulationValue,
+  }[type];
   return (
     <Box>
-      <DataItem label={title} value={formatHazardValue(colorString, value, dataUnit)} />
+      <DataItem label={title} value={formatFunction(colorString, value, dataUnit)} />
     </Box>
   );
 };

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,22 @@
+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, format } = 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}
+      type={format}
+    />
+  );
+};

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,18 @@
+export const exposureValue = {
+  scheme: 'reds',
+  range: [0, 1e9],
+};
+export const lossGdp = {
+  scheme: 'blues',
+  range: [0, 1e6],
+};
+
+export const populationAffected = {
+  scheme: 'purples',
+  range: [0, 1e4],
+};
+
+export const demandAffected = {
+  scheme: 'greens',
+  range: [0, 1e3],
+};

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,32 @@
+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 = {
+  demandAffected: {
+    label: 'Demand affected',
+    dataUnit: '',
+    format: 'hazard',
+  },
+  exposureValue: {
+    label: 'Exposure value',
+    dataUnit: '',
+    format: 'financial',
+  },
+  populationAffected: {
+    label: 'Population affected',
+    dataUnit: '',
+    format: 'population',
+  },
+  lossGdp: {
+    label: 'Loss GDP',
+    dataUnit: '',
+    format: 'financial',
+  },
+};
+
+export const RISKS = Object.keys(RISKS_METADATA);