refactor(frontend): shared interaction state

frontend/src/details/DeselectButton.tsx

@@ -1,6 +1,6 @@
 import { Close } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
-import { selectionState } from 'state/interactions/interaction-state';
+import { selectionState } from 'lib/state/interactions/interaction-state';
 import { useResetRecoilState } from 'recoil';
 
 export const DeselectButton = ({ interactionGroup, title }) => {

frontend/src/details/features/FeatureSidebar.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 import { FeatureSidebarContent } from './FeatureSidebarContent';
 import { useRecoilValue } from 'recoil';
-import { selectionState } from 'state/interactions/interaction-state';
+import { selectionState } from 'lib/state/interactions/interaction-state';
 import { SidePanel } from 'details/SidePanel';
 import { ErrorBoundary } from 'lib/react/ErrorBoundary';
 import { Box } from '@mui/system';

frontend/src/details/regions/RegionDetails.tsx

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { selectionState } from 'state/interactions/interaction-state';
+import { selectionState } from 'lib/state/interactions/interaction-state';
 import { Box } from '@mui/material';
 import { RegionDetailsContent } from './RegionDetailsContent';
 import { SidePanel } from 'details/SidePanel';

frontend/src/details/solutions/SolutionsSidebar.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@mui/material';
 import { DeselectButton } from 'details/DeselectButton';
 import { SidePanel } from 'details/SidePanel';
-import { selectionState } from 'state/interactions/interaction-state';
+import { selectionState } from 'lib/state/interactions/interaction-state';
 import { ErrorBoundary } from 'lib/react/ErrorBoundary';
 import { FC } from 'react';
 import { useRecoilValue } from 'recoil';

frontend/src/lib/data-map/DataMap.tsx

@@ -8,12 +8,12 @@ import { viewLayersFlatState } from 'state/layers/view-layers-flat';
 import { useSaveViewLayers, viewLayersParamsState } from 'state/layers/view-layers-params';
 import { backgroundState, showLabelsState } from 'map/layers/layers-state';
 import { useBasemapStyle } from 'map/use-basemap-style';
+import { useInteractions } from 'lib/state/interactions/use-interactions';
 
 import { useTriggerMemo } from '../hooks/use-trigger-memo';
 import { useDataLoadTrigger } from './use-data-load-trigger';
 
 import { DeckGLOverlay } from '../map/DeckGLOverlay';
-import { useInteractions } from 'state/interactions/use-interactions';
 import { ViewLayer, ViewLayerParams } from './view-layers';
 import { LayersList } from 'deck.gl/typed';
 

frontend/src/lib/data-map/DataMapTooltip.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { hoverPositionState } from 'state/interactions/interaction-state';
+import { hoverPositionState } from 'lib/state/interactions/interaction-state';
 
 export const DataMapTooltip: FC<{ children: React.ReactNode }> = ({ children }) => {
   const tooltipXY = useRecoilValue(hoverPositionState);

frontend/src/lib/state/interactions/interaction-state.ts

@@ -0,0 +1,87 @@
+import forEach from 'lodash/forEach';
+import { atom, atomFamily, selector } from 'recoil';
+
+import { InteractionTarget, RasterTarget, VectorTarget } from 'lib/data-map/types';
+import { isReset } from 'lib/recoil/is-reset';
+
+type InteractionLayer = InteractionTarget<VectorTarget> | InteractionTarget<RasterTarget>;
+type IT = InteractionLayer | InteractionLayer[];
+
+export function hasHover(target: IT) {
+  if (Array.isArray(target)) {
+    return target.length > 0;
+  }
+  return !!target;
+}
+
+export const hoverState = atomFamily<IT, string>({
+  key: 'hoverState',
+  default: null,
+});
+
+type LayerHoverState = {
+  isHovered: boolean;
+  target: IT;
+  Component: React.ComponentType<{ hoveredObject: InteractionLayer }>;
+};
+
+export const hoverPositionState = atom({
+  key: 'hoverPosition',
+  default: null,
+});
+
+export const selectionState = atomFamily<InteractionLayer, string>({
+  key: 'selectionState',
+  default: null,
+});
+
+type AllowedGroupLayers = Record<string, string[]>;
+
+const allowedGroupLayersImpl = atom<AllowedGroupLayers>({
+  key: 'allowedGroupLayersImpl',
+  default: {},
+});
+
+function filterOneOrArray<T>(items: T | T[], filter: (item: T) => boolean) {
+  if (Array.isArray(items)) {
+    return items.filter(filter);
+  } else {
+    return items && filter(items) ? items : null;
+  }
+}
+
+function filterTargets(oldHoverTargets: IT, allowedLayers: string[]): IT {
+  const newLayerFilter = new Set(allowedLayers);
+  return filterOneOrArray(oldHoverTargets, (target) => newLayerFilter.has(target.viewLayer.id));
+}
+
+export const allowedGroupLayersState = selector<AllowedGroupLayers>({
+  key: 'allowedGroupLayersState',
+  get: ({ get }) => get(allowedGroupLayersImpl),
+  set: ({ get, set, reset }, newAllowedGroups) => {
+    const oldAllowedGroupLayers = get(allowedGroupLayersImpl);
+    if (isReset(newAllowedGroups)) {
+      forEach(oldAllowedGroupLayers, (layers, group) => {
+        reset(hoverState(group));
+        reset(selectionState(group));
+      });
+    } else {
+      for (const group of Object.keys(oldAllowedGroupLayers)) {
+        const newAllowedLayers = newAllowedGroups[group];
+
+        if (newAllowedLayers == null || newAllowedLayers.length === 0) {
+          reset(hoverState(group));
+          reset(selectionState(group));
+        } else {
+          const oldHoverTargets = get(hoverState(group));
+          set(hoverState(group), filterTargets(oldHoverTargets, newAllowedLayers));
+
+          const oldSelectionTargets = get(selectionState(group));
+          set(selectionState(group), filterTargets(oldSelectionTargets, newAllowedLayers));
+        }
+      }
+    }
+
+    set(allowedGroupLayersImpl, newAllowedGroups);
+  },
+});

frontend/src/state/interactions/interaction-state.ts

@@ -1,28 +1,15 @@
-import forEach from 'lodash/forEach';
-import { atom, atomFamily, selector } from 'recoil';
+import { selector } from 'recoil';
 
 import { INTERACTION_GROUPS, tooltipLayers } from 'config/interaction-groups';
 import { InteractionTarget, RasterTarget, VectorTarget } from 'lib/data-map/types';
-import { isReset } from 'lib/recoil/is-reset';
+import { hoverState, hasHover } from 'lib/state/interactions/interaction-state';
 import { showPopulationState } from 'state/regions';
 
 type InteractionLayer = InteractionTarget<VectorTarget> | InteractionTarget<RasterTarget>;
 type IT = InteractionLayer | InteractionLayer[];
 
 const interactionGroupIds = [...INTERACTION_GROUPS.keys()];
 
-export function hasHover(target: IT) {
-  if (Array.isArray(target)) {
-    return target.length > 0;
-  }
-  return !!target;
-}
-
-export const hoverState = atomFamily<IT, string>({
-  key: 'hoverState',
-  default: null,
-});
-
 type LayerHoverState = {
   isHovered: boolean;
   target: IT;
@@ -43,64 +30,3 @@ export const layerHoverStates = selector({
     return new Map<string, LayerHoverState>(mapEntries);
   },
 });
-
-export const hoverPositionState = atom({
-  key: 'hoverPosition',
-  default: null,
-});
-
-export const selectionState = atomFamily<InteractionLayer, string>({
-  key: 'selectionState',
-  default: null,
-});
-
-type AllowedGroupLayers = Record<string, string[]>;
-
-const allowedGroupLayersImpl = atom<AllowedGroupLayers>({
-  key: 'allowedGroupLayersImpl',
-  default: {},
-});
-
-function filterOneOrArray<T>(items: T | T[], filter: (item: T) => boolean) {
-  if (Array.isArray(items)) {
-    return items.filter(filter);
-  } else {
-    return items && filter(items) ? items : null;
-  }
-}
-
-function filterTargets(oldHoverTargets: IT, allowedLayers: string[]): IT {
-  const newLayerFilter = new Set(allowedLayers);
-  return filterOneOrArray(oldHoverTargets, (target) => newLayerFilter.has(target.viewLayer.id));
-}
-
-export const allowedGroupLayersState = selector<AllowedGroupLayers>({
-  key: 'allowedGroupLayersState',
-  get: ({ get }) => get(allowedGroupLayersImpl),
-  set: ({ get, set, reset }, newAllowedGroups) => {
-    const oldAllowedGroupLayers = get(allowedGroupLayersImpl);
-    if (isReset(newAllowedGroups)) {
-      forEach(oldAllowedGroupLayers, (layers, group) => {
-        reset(hoverState(group));
-        reset(selectionState(group));
-      });
-    } else {
-      for (const group of Object.keys(oldAllowedGroupLayers)) {
-        const newAllowedLayers = newAllowedGroups[group];
-
-        if (newAllowedLayers == null || newAllowedLayers.length === 0) {
-          reset(hoverState(group));
-          reset(selectionState(group));
-        } else {
-          const oldHoverTargets = get(hoverState(group));
-          set(hoverState(group), filterTargets(oldHoverTargets, newAllowedLayers));
-
-          const oldSelectionTargets = get(selectionState(group));
-          set(selectionState(group), filterTargets(oldSelectionTargets, newAllowedLayers));
-        }
-      }
-    }
-
-    set(allowedGroupLayersImpl, newAllowedGroups);
-  },
-});

frontend/src/state/layers/view-layers-params.ts

@@ -4,7 +4,7 @@ import { StyleParams, ViewLayer, ViewLayerParams } from 'lib/data-map/view-layer
 
 import { viewLayersFlatState } from './view-layers-flat';
 import _ from 'lodash';
-import { selectionState } from 'state/interactions/interaction-state';
+import { selectionState } from 'lib/state/interactions/interaction-state';
 import { networkStyleParamsState } from './modules/networks';
 
 export const viewLayerState = atomFamily<ViewLayer, string>({