WIP: simplified risks params

nismod · Jun 18, 2024 · 9914c68 · 9914c68
1 parent d839554
commit 9914c68
Show file tree

Hide file tree

Showing 13 changed files with 179 additions and 149 deletions.
diff --git a/frontend/src/config/color-maps.ts b/frontend/src/config/color-maps.ts
@@ -20,18 +20,34 @@ export const RASTER_COLOR_MAPS = {
     scheme: 'reds',
     range: [0, 75],
   },
-  power: {
+  totalValue: {
     scheme: 'reds',
     range: [0, 10],
   },
-  water: {
+  economicUse: {
     scheme: 'blues',
     range: [0, 10],
   },
-  transport: {
+  populationUse: {
     scheme: 'purples',
     range: [0, 10],
   },
+  totalRisk: {
+    scheme: 'reds',
+    range: [0, 10],
+  },
+  ead: {
+    scheme: 'reds',
+    range: [0, 10],
+  },
+  eael: {
+    scheme: 'reds',
+    range: [0, 10],
+  },
+  none: {
+    scheme: 'reds',
+    range: [0, 10],
+  },
 };
 
 function invertColorScale<T>(colorScale: (t: number) => T) {

diff --git a/frontend/src/config/risks/domains.ts b/frontend/src/config/risks/domains.ts
@@ -0,0 +1,67 @@
+import { DataParamGroupConfig } from 'lib/controls/data-params';
+
+export interface RiskParams {
+  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'];
+      },
+    },
+  },
+  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'];
+      },
+    },
+  },
+};
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));
-        console.log({ group, groupParams });
+        console.log({ group, groupParams, paramsFamily });
         const deps = fromPairs(groupParams?.map((param) => [param, family(paramFn(group, param))]));
         return get(waitForAll(deps));
       },

diff --git a/frontend/src/sidebar/risks/DamageSourceControl.tsx b/frontend/src/sidebar/risks/DamageSourceControl.tsx
diff --git a/frontend/src/sidebar/risks/RisksControl.tsx b/frontend/src/sidebar/risks/RisksControl.tsx
@@ -1,30 +1,78 @@
-import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from '@mui/material';
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  Select,
+} from '@mui/material';
 import { useRecoilState } from 'recoil';
+
+import { StateEffectRoot } from 'lib/recoil/state-effects/StateEffectRoot';
+
+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 { riskSelectionState } from 'state/risks/risk-selection';
+import {
+  riskSourceState,
+  riskSourceStateEffect
+} from 'state/risk-mapping/risk-map';
 
-const SECTORS = {
-  all: 'All sectors',
-  power: 'Power',
-  transport: 'Transport',
-  water: 'Water',
-}
+const HAZARDS = ['none', 'cyclone', 'fluvial'];
+const HAZARDS_METADATA = {
+  none: { label: 'None' },
+  cyclone: { label: 'Cyclone' },
+  fluvial: { label: 'All Flooding' },
+};
 
 export const RisksControl = () => {
+  const [riskSource, setRiskSource] = useRecoilState(riskSourceState);
   const [riskSelection, setRiskSelection] = useRecoilState(riskSelectionState);
+  console.log({ riskSource, riskSelection })
+
   return (
     <>
-      <FormControl>
-        <FormLabel>Sector</FormLabel>
-        <RadioGroup value={riskSelection} onChange={(e, value) => setRiskSelection(value)}>
-          {Object.entries(SECTORS).map(([sector, label]) => (
-            <FormControlLabel
-              key={sector}
-              label={label}
-              control={<Radio value={sector} />}
-            />
-          ))}
-        </RadioGroup>
-      </FormControl>
+      <StateEffectRoot state={riskSourceState} effect={riskSourceStateEffect} />
+        <InputSection>
+          <FormControl fullWidth>
+            <FormLabel>Display</FormLabel>
+            <Select<string>
+              variant="standard"
+              value={riskSelection}
+              onChange={(e) => setRiskSelection(e.target.value)}
+            >
+              <MenuItem value="totalValue">Total value</MenuItem>
+              <MenuItem value="economicUse">Economic use</MenuItem>
+              <MenuItem value="populationUse">Population use</MenuItem>
+              <MenuItem value="totalRisk">Total risk</MenuItem>
+              <MenuItem value="ead">Expected Annual Damages (EAD)</MenuItem>
+              <MenuItem value="eael">Expected Annual Economic Losses (EAEL)</MenuItem>
+            </Select>
+          </FormControl>
+        </InputSection>
+        <InputSection>
+          <FormControl>
+            <FormLabel>Hazard</FormLabel>
+            <RadioGroup value={riskSource} onChange={(e, value) => setRiskSource(value)}>
+              {HAZARDS.map((hazard) => (
+                <FormControlLabel
+                  key={hazard}
+                  label={HAZARDS_METADATA[hazard].label}
+                  control={<Radio value={hazard} />}
+                />
+              ))}
+            </RadioGroup>
+          </FormControl>
+        </InputSection>
+        <InputSection>
+          <InputRow>
+            <EpochControl group={riskSource} />
+            <RCPControl group={riskSource} />
+          </InputRow>
+        </InputSection>
     </>
   );
 };
diff --git a/frontend/src/sidebar/risks/RisksSection.tsx b/frontend/src/sidebar/risks/RisksSection.tsx
@@ -1,13 +1,8 @@
 import { FC } from 'react';
-
-import { Collapse } from '@mui/material';
-import { TransitionGroup } from 'react-transition-group';
-
 import { StateEffectRoot } from 'lib/recoil/state-effects/StateEffectRoot';
 
 import { RisksControl } from './RisksControl';
 import { SidebarPanel } from 'sidebar/SidebarPanel';
-import { DamageSourceControl } from './DamageSourceControl';
 import { SidebarPanelSection } from 'sidebar/ui/SidebarPanelSection';
 import { risksStyleStateEffect, sectionStyleValueState } from 'state/sections';
 import { ErrorBoundary } from 'lib/react/ErrorBoundary';
@@ -23,13 +18,6 @@ export const RisksSection: FC = () => {
         <SidebarPanelSection>
           <RisksControl />
         </SidebarPanelSection>
-        <SidebarPanelSection variant="style">
-          <TransitionGroup>
-            <Collapse>
-              <DamageSourceControl />
-            </Collapse>
-          </TransitionGroup>
-        </SidebarPanelSection>
       </ErrorBoundary>
     </SidebarPanel>
   );

diff --git a/frontend/src/state/data-params.ts b/frontend/src/state/data-params.ts
@@ -1,4 +1,5 @@
 import { HAZARD_DOMAINS } from 'config/hazards/domains';
+import { RISK_DOMAINS } from 'config/risks/domains';
 import { totalDamagesConfig } from 'config/domains/total-damages';
 import {
   DataParamGroupConfig,
@@ -21,6 +22,7 @@ export type DataParamParam = Readonly<{
 
 export const dataParamConfig: Record<string, DataParamGroupConfig> = {
   ...HAZARD_DOMAINS,
+  ...RISK_DOMAINS,
   all: totalDamagesConfig,
   adaptation: adaptationDomainsConfig,
 };

diff --git a/frontend/src/state/layers/risks.ts b/frontend/src/state/layers/risks.ts
@@ -1,18 +1,20 @@
 import { HazardParams } from 'config/hazards/domains';
 import { riskViewLayer } from 'config/risks/risk-view-layer';
 import { ViewLayer } from 'lib/data-map/view-layers';
-import { truthyKeys } from 'lib/helpers';
 import { selector } from 'recoil';
 import { dataParamsByGroupState } from 'state/data-params';
-import { riskVisibilityState } from 'state/risks/risk-visibility';
+import { riskSourceState } from 'state/risk-mapping/risk-map';
+import { riskSelectionState } from 'state/risks/risk-selection';
 import { sectionVisibilityState } from 'state/sections';
 
 export const riskLayerState = selector<ViewLayer[]>({
   key: 'riskLayerState',
-  get: ({ get }) =>
-    get(sectionVisibilityState('risks'))
-      ? truthyKeys(get(riskVisibilityState)).map((risk) =>
-          riskViewLayer(risk, get(dataParamsByGroupState(risk)) as HazardParams),
-        )
-      : [],
+  get: ({ get }) => {
+    const riskSource = get(riskSourceState);
+    const riskSelection = get(riskSelectionState);
+    console.log('riskLayerState', [riskViewLayer(riskSelection, get(dataParamsByGroupState(riskSource)) as HazardParams)])
+    return get(sectionVisibilityState('risks'))
+      ? [riskViewLayer(riskSelection, get(dataParamsByGroupState(riskSource)) as HazardParams)]
+      : []
+  }
 });
diff --git a/frontend/src/state/layers/view-layers.ts b/frontend/src/state/layers/view-layers.ts
@@ -54,7 +54,7 @@ export const viewLayersState = selector<ConfigTree<ViewLayer>>({
     const regionLevel = get(regionLevelState);
     const background = get(backgroundState);
     const showLabels = get(showLabelsState);
-    console.log(get(riskLayerState), get(hazardLayerState))
+    console.trace(get(riskLayerState), get(hazardLayerState))
 
     return [
       // administrative region boundaries or population density