nismod · eatyourgreens · Nov 13, 2024 · Nov 12, 2024
diff --git a/frontend/src/app/asset-list/use-sorted-features.ts b/frontend/src/app/asset-list/use-sorted-features.ts
@@ -54,15 +54,20 @@ export const useSortedFeatures = (
 
     try {
       const { fieldGroup, fieldDimensions, field, fieldParams } = fieldSpec;
+      const dimensions = JSON.stringify(fieldDimensions);
+      const parameters = JSON.stringify(fieldParams);
+      if (dimensions === '{}') {
+        return;
+      }
       // if (fieldGroup !== 'damages') {
       //   throw new Error('Only damages field is supported');
       // }
       const response = await apiClient.features.featuresReadSortedFeatures({
         ...layerSpec,
         fieldGroup,
         field,
-        dimensions: JSON.stringify(fieldDimensions),
-        parameters: JSON.stringify(fieldParams),
+        dimensions,
+        parameters,
         page,
         size: pageSize,
       });

diff --git a/frontend/src/app/sidebar/ui/params/DataParam.tsx b/frontend/src/app/sidebar/ui/params/DataParam.tsx
@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { dataParamOptionsState, dataParamState, useUpdateDataParam } from 'app/state/data-params';
+import { dataParamOptionsState, dataParamState, useUpdateDataParam } from 'lib/state/data-params';
 
 export const DataParam = ({ group, id, children }) => {
   const value = useRecoilValue(dataParamState({ group, param: id }));

diff --git a/frontend/src/app/state/damage-mapping/damage-map.ts b/frontend/src/app/state/damage-mapping/damage-map.ts
@@ -1,8 +1,9 @@
 import forEach from 'lodash/forEach';
 import { atom, selector } from 'recoil';
 
+import { dataParamOptionsState, dataParamState } from 'lib/state/data-params';
+
 import { HAZARD_DOMAINS } from 'data-layers/hazards/domains';
-import { dataParamOptionsState, dataParamState } from 'app/state/data-params';
 import { hazardSelectionState } from 'data-layers/hazards/state/data-selection';
 import { networksStyleState } from 'data-layers/networks/state/data-selection';
 

diff --git a/frontend/src/app/state/damage-mapping/damage-style-params.ts b/frontend/src/app/state/damage-mapping/damage-style-params.ts
@@ -1,9 +1,12 @@
-import { damageSourceState, damageTypeState } from './damage-map';
-import { dataParamsByGroupState } from 'app/state/data-params';
 import { selector } from 'recoil';
+
+import { dataParamsByGroupState } from 'lib/state/data-params';
 import { FieldSpec, StyleParams } from 'lib/data-map/view-layers';
+
 import { damages } from 'data-layers/networks/color-maps';
 
+import { damageSourceState, damageTypeState } from './damage-map';
+
 export const damagesFieldState = selector<FieldSpec>({
   key: 'eadAccessorState',
   get: ({ get }) => {

diff --git a/frontend/src/app/state/data-params.ts b/frontend/src/app/state/data-params.ts
@@ -1,90 +1,21 @@
+import { useRecoilState } from 'recoil';
+
 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,
-  ParamDomain,
-  resolveParamDependencies,
-} from 'lib/controls/data-params';
-import { toDictionary } from 'lib/helpers';
-import { groupedFamily } from 'lib/recoil/grouped-family';
-import forEach from 'lodash/forEach';
-import mapValues from 'lodash/mapValues';
-import keys from 'lodash/keys';
-import { atomFamily, useRecoilTransaction_UNSTABLE } from 'recoil';
 
-export type DataParamParam = Readonly<{
-  group: string;
-  param: string;
-}>;
+import { DataParamGroupConfig } from 'lib/controls/data-params';
+import { syncExternalConfigState } from 'lib/state/data-params';
 
 export const dataParamConfig: Record<string, DataParamGroupConfig> = {
   ...HAZARD_DOMAINS,
   ...NETWORK_DOMAINS,
   risks: RISK_DOMAINS,
 };
 
-export const dataParamNamesByGroup = mapValues(dataParamConfig, (groupConfig) =>
-  keys(groupConfig.paramDefaults),
-);
-
-const dataParamDefaultsByGroup = mapValues(dataParamConfig, (groupConfig) =>
-  resolveParamDependencies(groupConfig.paramDefaults, groupConfig),
-);
-
-export const dataParamState = atomFamily<Param, DataParamParam>({
-  key: 'dataParamState',
-  default: ({ group, param }: DataParamParam) => dataParamDefaultsByGroup[group][0][param],
-});
-
-export const dataParamOptionsState = atomFamily<ParamDomain, DataParamParam>({
-  key: 'dataParamOptionsState',
-  default: ({ group, param }: DataParamParam) => dataParamDefaultsByGroup[group][1][param],
-});
-
-const dataParamNamesByGroupState = atomFamily({
-  key: 'dataParamNamesByGroupState',
-  default: (group: string) => dataParamNamesByGroup[group],
-});
-
-export const dataParamsByGroupState = groupedFamily<Param, DataParamParam>(
-  'dataParamsByGroupState',
-  dataParamState,
-  dataParamNamesByGroupState,
-  (group, param) => ({ group, param }),
-);
-
-export const dataParamOptionsByGroupState = groupedFamily<ParamDomain, DataParamParam>(
-  'dataParamOptionsByGroupState',
-  dataParamOptionsState,
-  dataParamNamesByGroupState,
-  (group, param) => ({ group, param }),
-);
-
-export function useUpdateDataParam(group: string, paramId: string) {
-  return useRecoilTransaction_UNSTABLE(
-    ({ get, set }) =>
-      (newValue) => {
-        const paramNames = dataParamNamesByGroup[group];
-        const groupParams = toDictionary(
-          paramNames,
-          (param) => param,
-          (param) => get(dataParamState({ group, param })),
-        );
-        const groupConfig = dataParamConfig[group];
-
-        const [resolvedParams, resolvedOptions] = resolveParamDependencies<Record<string, any>>(
-          { ...groupParams, [paramId]: newValue },
-          groupConfig,
-        );
-
-        forEach(resolvedParams, (resolvedParamValue, paramId) => {
-          const recoilParam = { group, param: paramId };
-          set(dataParamState(recoilParam), resolvedParamValue);
-          set(dataParamOptionsState(recoilParam), resolvedOptions[paramId]);
-        });
-      },
-    [group, paramId],
-  );
+export function useSyncConfigState() {
+  const [config, setConfig] = useRecoilState(syncExternalConfigState);
+  if (config !== dataParamConfig) {
+    setConfig(dataParamConfig);
+  }
 }
diff --git a/frontend/src/data-layers/hazards/state/layer.ts b/frontend/src/data-layers/hazards/state/layer.ts
@@ -2,7 +2,7 @@ import { selector } from 'recoil';
 
 import { ViewLayer } from 'lib/data-map/view-layers';
 import { truthyKeys } from 'lib/helpers';
-import { dataParamsByGroupState } from 'app/state/data-params';
+import { dataParamsByGroupState } from 'lib/state/data-params';
 import { sectionVisibilityState } from 'app/state/sections';
 
 import { hazardVisibilityState } from './hazard-visibility';

diff --git a/frontend/src/data-layers/networks/sidebar/AdaptationControl.tsx b/frontend/src/data-layers/networks/sidebar/AdaptationControl.tsx
@@ -8,11 +8,12 @@ import { Box } from '@mui/system';
 import { CustomNumberSlider } from 'lib/controls/CustomSlider';
 import { ParamDropdown } from 'lib/controls/ParamDropdown';
 import { StateEffectRoot } from 'lib/recoil/state-effects/StateEffectRoot';
+import { dataParamsByGroupState } from 'lib/state/data-params';
+
 import { InputRow } from 'app/sidebar/ui/InputRow';
 import { InputSection } from 'app/sidebar/ui/InputSection';
 import { LayerStylePanel } from 'app/sidebar/ui/LayerStylePanel';
 import { DataParam } from 'app/sidebar/ui/params/DataParam';
-import { dataParamsByGroupState } from 'app/state/data-params';
 
 import {
   adaptationCostBenefitRatioEaelDaysState,

diff --git a/frontend/src/data-layers/networks/sidebar/NetworkControl.tsx b/frontend/src/data-layers/networks/sidebar/NetworkControl.tsx
@@ -4,6 +4,8 @@ import { FC } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { CheckboxTree } from 'lib/controls/checkbox-tree/CheckboxTree';
+import { useUpdateDataParam } from 'lib/state/data-params';
+
 import { LayerLabel } from 'app/sidebar/ui/LayerLabel';
 
 import {
@@ -15,11 +17,12 @@ import { NETWORK_LAYERS_HIERARCHY } from './hierarchy';
 import { NETWORKS_METADATA } from '../metadata';
 import { showAdaptationsState } from '../state/layer';
 import adaptationSectorLayers from '../adaptation-sector-layers.json';
-import { useUpdateDataParam } from 'app/state/data-params';
+import { dataParamState } from 'lib/state/data-params';
 
 export const NetworkControl: FC = () => {
   const [checkboxState, setCheckboxState] = useRecoilState(networkTreeCheckboxState);
   const [expanded, setExpanded] = useRecoilState(networkTreeExpandedState);
+  const dataParams = useRecoilValue(dataParamState({ group: 'adaptation', param: 'sector' }));
   const updateSector = useUpdateDataParam('adaptation', 'sector');
   const updateSubsector = useUpdateDataParam('adaptation', 'subsector');
   const updateAssetType = useUpdateDataParam('adaptation', 'asset_type');
@@ -31,7 +34,7 @@ export const NetworkControl: FC = () => {
     (id) => checkboxState.checked[id] && !networkTreeConfig.nodes[id].children,
   );
   const adaptationLayer = adaptationSectorLayers.find((x) => selectedLayers.includes(x.layer_name));
-  if (adaptationLayer) {
+  if (dataParams && adaptationLayer) {
     const { sector, subsector, asset_type } = adaptationLayer;
     updateSector(sector);
     updateSubsector(subsector);

diff --git a/frontend/src/data-layers/networks/sidebar/NetworksSection.tsx b/frontend/src/data-layers/networks/sidebar/NetworksSection.tsx
@@ -14,6 +14,7 @@ import { ErrorBoundary } from 'lib/react/ErrorBoundary';
 import { DamageSourceControl } from './DamageSourceControl';
 import { AdaptationControl } from './AdaptationControl';
 import { NetworkControl } from './NetworkControl';
+import { useSyncConfigState } from 'app/state/data-params';
 
 /**
  * Sidebar controls for the `networks` layer.
@@ -25,6 +26,7 @@ import { NetworkControl } from './NetworkControl';
  */
 export const NetworksSection: FC = () => {
   const style = useRecoilValue(sectionStyleValueState('assets'));
+  useSyncConfigState();
   return (
     <SidebarPanel id="assets" title="Infrastructure">
       <ErrorBoundary message="There was a problem displaying this section.">

diff --git a/frontend/src/data-layers/networks/state/layer.ts b/frontend/src/data-layers/networks/state/layer.ts
@@ -4,11 +4,12 @@ import fromPairs from 'lodash/fromPairs';
 import mapValues from 'lodash/mapValues';
 
 import { recalculateCheckboxStates } from 'lib/controls/checkbox-tree/CheckboxTree';
-import { LayerSpec } from 'app/asset-list/use-sorted-features';
 import { ViewLayer, StyleParams, ColorSpec, FieldSpec } from 'lib/data-map/view-layers';
 import { StateEffect } from 'lib/recoil/state-effects/types';
+import { dataParamsByGroupState } from 'lib/state/data-params';
+
+import { LayerSpec } from 'app/asset-list/use-sorted-features';
 import { damageMapStyleParamsState } from 'app/state/damage-mapping/damage-style-params';
-import { dataParamsByGroupState } from 'app/state/data-params';
 import { sectionVisibilityState } from 'app/state/sections';
 
 import adaptationSectorLayers from '../adaptation-sector-layers.json';

diff --git a/frontend/src/data-layers/risks/state/layer.ts b/frontend/src/data-layers/risks/state/layer.ts
@@ -1,6 +1,8 @@
-import { ViewLayer } from 'lib/data-map/view-layers';
 import { selector } from 'recoil';
-import { dataParamsByGroupState } from 'app/state/data-params';
+
+import { ViewLayer } from 'lib/data-map/view-layers';
+import { dataParamsByGroupState } from 'lib/state/data-params';
+
 import { sectionVisibilityState } from 'app/state/sections';
 import { sectionStyleValueState } from 'app/state/sections';
 

diff --git a/frontend/src/details/adaptations/AdaptationsSidebar.stories.tsx b/frontend/src/details/adaptations/AdaptationsSidebar.stories.tsx
@@ -26,7 +26,6 @@ export const Default: Story = {
         http.get(API_SEARCH_PATH, ({ request }) => {
           const url = new URL(request.url);
           if (
-            url.searchParams.get('asset_type') === 'pole' &&
             url.searchParams.get('sector') === 'power' &&
             url.searchParams.get('field') === 'avoided_ead_mean' &&
             url.searchParams.get('dimensions') ===

diff --git a/frontend/src/details/adaptations/AdaptationsSidebar.tsx b/frontend/src/details/adaptations/AdaptationsSidebar.tsx
@@ -1,16 +1,21 @@
 import { Typography } from '@mui/material';
 import { Box } from '@mui/system';
-import { SidePanel } from 'details/SidePanel';
-import { ErrorBoundary } from 'lib/react/ErrorBoundary';
 import { FC } from 'react';
-import { FeatureAdaptationsTable } from './FeatureAdaptationsTable';
+
+import { ErrorBoundary } from 'lib/react/ErrorBoundary';
 import { MobileTabContentWatcher } from 'lib/map/layouts/tab-has-content';
 
+import { useSyncConfigState } from 'app/state/data-params';
+import { SidePanel } from 'details/SidePanel';
+
+import { FeatureAdaptationsTable } from './FeatureAdaptationsTable';
+
 /**
  * List adaptation options for a selected infrastructure network
  * eg. power lines, roads, railway tracks etc.
  */
 export const AdaptationsSidebar: FC = () => {
+  useSyncConfigState();
   return (
     <SidePanel height="80vh" pb={1} px={0} pt={0}>
       <MobileTabContentWatcher tabId="details" />

diff --git a/frontend/src/lib/controls/CustomSlider.tsx b/frontend/src/lib/controls/CustomSlider.tsx
@@ -42,7 +42,7 @@ export const CustomNumberSlider: FC<CustomSliderProps<number>> = ({
     [marks, onChange],
   );
 
-  const valueLabelFunction = useCallback((value) => marks[value].toString(), [marks]);
+  const valueLabelFunction = useCallback((value) => marks[value]?.toString(), [marks]);
 
   return (
     <Slider