refactor(frontend): data map types (#53)

Move shared data map types into `lib/data-map/types`.
nismod · Jul 1, 2024 · efc1bf2 · efc1bf2
1 parent de486ce
commit efc1bf2
Show file tree

Hide file tree

Showing 20 changed files with 49 additions and 45 deletions.
diff --git a/frontend/src/config/assets/AssetHoverDescription.tsx b/frontend/src/config/assets/AssetHoverDescription.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { InteractionTarget, VectorTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget, VectorTarget } from 'lib/data-map/types';
 import { VectorHoverDescription } from 'map/tooltip/content/VectorHoverDescription';
 
 export const AssetHoverDescription: FC<{ hoveredObject: InteractionTarget<VectorTarget> }> = ({

diff --git a/frontend/src/config/assets/asset-view-layer.ts b/frontend/src/config/assets/asset-view-layer.ts
@@ -4,10 +4,10 @@ import {
   ViewLayerDataAccessFunction,
   ViewLayerFunctionOptions,
 } from 'lib/data-map/view-layers';
+import { VectorTarget } from 'lib/data-map/types';
 import { selectableMvtLayer } from 'lib/deck/layers/selectable-mvt-layer';
 import { getAssetDataFormats } from './data-formats';
 import { ASSETS_SOURCE } from './source';
-import { VectorTarget } from 'state/interactions/use-interactions';
 
 interface ViewLayerMetadata {
   group: string;

diff --git a/frontend/src/config/drought/DroughtHoverDescription.tsx b/frontend/src/config/drought/DroughtHoverDescription.tsx
@@ -1,6 +1,6 @@
 import { Typography } from '@mui/material';
 import { DataItem } from 'details/features/detail-components';
-import { InteractionTarget, VectorTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget, VectorTarget } from 'lib/data-map/types';
 import { FC, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import {

diff --git a/frontend/src/config/hazards/HazardHoverDescription.tsx b/frontend/src/config/hazards/HazardHoverDescription.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { InteractionTarget, RasterTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget, RasterTarget } from 'lib/data-map/types';
 import { RasterHoverDescription } from 'map/tooltip/content/RasterHoverDescription';
 
 import { HAZARDS_METADATA, HAZARD_COLOR_MAPS } from './metadata';

diff --git a/frontend/src/config/hazards/hazard-view-layer.ts b/frontend/src/config/hazards/hazard-view-layer.ts
@@ -4,7 +4,7 @@ import { HazardParams } from 'config/hazards/domains';
 
 import { rasterTileLayer } from 'lib/deck/layers/raster-tile-layer';
 import { ViewLayer } from 'lib/data-map/view-layers';
-import { InteractionTarget, RasterTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget, RasterTarget } from 'lib/data-map/types';
 
 import { HazardLegend } from './HazardLegend';
 import { HazardHoverDescription } from './HazardHoverDescription';

diff --git a/frontend/src/config/interaction-groups.ts b/frontend/src/config/interaction-groups.ts
@@ -4,7 +4,7 @@ import {
   InteractionTarget,
   VectorTarget,
   RasterTarget,
-} from 'state/interactions/use-interactions';
+} from 'lib/data-map/types';
 
 import { AssetHoverDescription } from './assets/AssetHoverDescription';
 import { HazardHoverDescription } from './hazards/HazardHoverDescription';

diff --git a/frontend/src/config/regions/RegionHoverDescription.tsx b/frontend/src/config/regions/RegionHoverDescription.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 
 import { REGIONS_METADATA } from './metadata';
-import { InteractionTarget, VectorTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget, VectorTarget } from 'lib/data-map/types';
 import { useRecoilValue } from 'recoil';
 import { showPopulationState } from 'state/regions';
 import { DataItem } from 'details/features/detail-components';

diff --git a/frontend/src/config/regions/population-view-layer.ts b/frontend/src/config/regions/population-view-layer.ts
@@ -1,13 +1,14 @@
 import { VECTOR_COLOR_MAPS } from 'config/color-maps';
 import { colorMap } from 'lib/color-map';
 import { FieldSpec, ViewLayer } from 'lib/data-map/view-layers';
+import { VectorTarget } from 'lib/data-map/types';
 import { selectableMvtLayer } from 'lib/deck/layers/selectable-mvt-layer';
 import { dataColorMap } from 'lib/deck/props/color-map';
 import { featureProperty } from 'lib/deck/props/data-source';
 import { border, fillColor } from 'lib/deck/props/style';
+
 import { RegionLevel } from './metadata';
 import { REGIONS_SOURCE } from './source';
-import { VectorTarget } from 'state/interactions/use-interactions';
 
 export function populationViewLayer(regionLevel: RegionLevel): ViewLayer {
   const source = REGIONS_SOURCE;

diff --git a/frontend/src/config/solutions/SolutionHoverDescription.tsx b/frontend/src/config/solutions/SolutionHoverDescription.tsx
@@ -2,7 +2,7 @@ import { Typography } from '@mui/material';
 import { VECTOR_COLOR_MAPS } from 'config/color-maps';
 import { MARINE_HABITATS_LOOKUP } from 'config/solutions/domains';
 import { DataItem } from 'details/features/detail-components';
-import { InteractionTarget, VectorTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget, VectorTarget } from 'lib/data-map/types';
 import startCase from 'lodash/startCase';
 import { FC } from 'react';
 import { habitatColorMap } from 'state/layers/modules/marine';

diff --git a/frontend/src/details/features/FeatureSidebar.tsx b/frontend/src/details/features/FeatureSidebar.tsx
@@ -8,7 +8,7 @@ import { ErrorBoundary } from 'lib/react/ErrorBoundary';
 import { Box } from '@mui/system';
 import { DeselectButton } from 'details/DeselectButton';
 import { MobileTabContentWatcher } from 'pages/map/layouts/mobile/tab-has-content';
-import { InteractionTarget, VectorTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget, VectorTarget } from 'lib/data-map/types';
 
 export const FeatureSidebar: FC = () => {
   const featureSelection = useRecoilValue(selectionState('assets'));

diff --git a/frontend/src/details/regions/RegionDetailsContent.tsx b/frontend/src/details/regions/RegionDetailsContent.tsx
@@ -1,7 +1,7 @@
 import { Typography } from '@mui/material';
 import { REGIONS_METADATA } from 'config/regions/metadata';
 import { DataItem } from 'details/features/detail-components';
-import { InteractionTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget } from 'lib/data-map/types';
 import { numFormat } from 'lib/helpers';
 import { FC } from 'react';
 

diff --git a/frontend/src/details/solutions/SolutionsSidebar.tsx b/frontend/src/details/solutions/SolutionsSidebar.tsx
@@ -7,7 +7,7 @@ import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 import { SolutionsSidebarContent } from './SolutionsSidebarContent';
 import { MobileTabContentWatcher } from 'pages/map/layouts/mobile/tab-has-content';
-import { InteractionTarget, VectorTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget, VectorTarget } from 'lib/data-map/types';
 
 export const SolutionsSidebar: FC = () => {
   const featureSelection = useRecoilValue(selectionState('solutions'));

diff --git a/frontend/src/lib/data-map/types.ts b/frontend/src/lib/data-map/types.ts
@@ -0,0 +1,29 @@
+import { ViewLayer } from './view-layers';
+
+export type InteractionStyle = 'vector' | 'raster';
+
+export interface InteractionGroupConfig {
+  id: string;
+  type: InteractionStyle;
+  pickingRadius?: number;
+  pickMultiple?: boolean;
+  usesAutoHighlight?: boolean;
+}
+
+export interface InteractionTarget<T> {
+  interactionGroup: string;
+  interactionStyle: string;
+
+  viewLayer: ViewLayer;
+  // logicalLayer: string;
+
+  target: T;
+}
+
+export interface RasterTarget {
+  color: [number, number, number, number];
+}
+
+export interface VectorTarget {
+  feature: any;
+}
diff --git a/frontend/src/lib/data-map/view-layers.ts b/frontend/src/lib/data-map/view-layers.ts
@@ -1,7 +1,7 @@
 import { ScaleSequential } from 'd3-scale';
 import { DataLoader } from 'lib/data-loader/data-loader';
 import { Accessor } from 'lib/deck/props/getters';
-import { InteractionTarget, VectorTarget, RasterTarget } from 'state/interactions/use-interactions';
+import { InteractionTarget, VectorTarget, RasterTarget } from './types';
 
 export interface FieldSpec {
   fieldGroup: string;

diff --git a/frontend/src/map/tooltip/content/VectorHoverDescription.tsx b/frontend/src/map/tooltip/content/VectorHoverDescription.tsx
@@ -1,7 +1,7 @@
 import { Typography } from '@mui/material';
 import { NETWORKS_METADATA } from 'config/networks/metadata';
 import { DataItem } from 'details/features/detail-components';
-import { VectorTarget } from 'state/interactions/use-interactions';
+import { VectorTarget } from 'lib/data-map/types';
 import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 import { singleViewLayerParamsState } from 'state/layers/view-layers-params';

diff --git a/frontend/src/state/interactions/interaction-state.ts b/frontend/src/state/interactions/interaction-state.ts
@@ -2,11 +2,10 @@ import forEach from 'lodash/forEach';
 import { atom, atomFamily, 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 { showPopulationState } from 'state/regions';
 
-import { InteractionTarget, RasterTarget, VectorTarget } from './use-interactions';
-
 type InteractionLayer = InteractionTarget<VectorTarget> | InteractionTarget<RasterTarget>;
 type IT = InteractionLayer | InteractionLayer[];
 

diff --git a/frontend/src/state/interactions/use-interactions.ts b/frontend/src/state/interactions/use-interactions.ts
@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
 import { ViewLayer } from 'lib/data-map/view-layers';
+import { InteractionGroupConfig, InteractionStyle, InteractionTarget, RasterTarget, VectorTarget } from 'lib/data-map/types';
 
 import {
   hoverState,
@@ -15,29 +16,6 @@ import {
 } from './interaction-state';
 import { RecoilStateFamily } from 'lib/recoil/types';
 
-export type InteractionStyle = 'vector' | 'raster';
-export interface InteractionGroupConfig {
-  id: string;
-  type: InteractionStyle;
-  pickingRadius?: number;
-  pickMultiple?: boolean;
-  usesAutoHighlight?: boolean;
-}
-
-export interface InteractionTarget<T> {
-  interactionGroup: string;
-  interactionStyle: string;
-
-  viewLayer: ViewLayer;
-  // logicalLayer: string;
-
-  target: T;
-}
-
-export interface RasterTarget {
-  color: [number, number, number, number];
-}
-
 function processRasterTarget(info: any): RasterTarget {
   const { bitmap, sourceLayer } = info;
   if (bitmap) {
@@ -56,9 +34,6 @@ function processRasterTarget(info: any): RasterTarget {
       : null;
   }
 }
-export interface VectorTarget {
-  feature: any;
-}
 
 function processVectorTarget(info: PickInfo<any>): VectorTarget {
   const { object } = info;

diff --git a/frontend/src/state/layers/modules/drought.ts b/frontend/src/state/layers/modules/drought.ts
@@ -12,7 +12,7 @@ import {
   DROUGHT_RISK_VARIABLES_WITH_RCP,
 } from 'config/drought/metadata';
 import { colorMap } from 'lib/color-map';
-import { VectorTarget } from 'state/interactions/use-interactions';
+import { VectorTarget } from 'lib/data-map/types';
 import { ColorSpec, FieldSpec, ViewLayer } from 'lib/data-map/view-layers';
 import { selectableMvtLayer } from 'lib/deck/layers/selectable-mvt-layer';
 import { dataColorMap } from 'lib/deck/props/color-map';

diff --git a/frontend/src/state/layers/modules/marine.ts b/frontend/src/state/layers/modules/marine.ts
@@ -1,6 +1,7 @@
 import { DataFilterExtension } from '@deck.gl/extensions';
 import { MARINE_HABITAT_COLORS } from 'config/solutions/colors';
 import { ViewLayer, FieldSpec } from 'lib/data-map/view-layers';
+import { VectorTarget } from 'lib/data-map/types';
 import { selector } from 'recoil';
 import { sectionStyleValueState, sectionVisibilityState } from 'state/sections';
 import { featureProperty } from 'lib/deck/props/data-source';
@@ -9,7 +10,6 @@ import { fillColor } from 'lib/deck/props/style';
 import { Accessor } from 'lib/deck/props/getters';
 import { marineFiltersState } from 'state/solutions/marine-filters';
 import { selectableMvtLayer } from 'lib/deck/layers/selectable-mvt-layer';
-import { VectorTarget } from 'state/interactions/use-interactions';
 
 export function habitatColorMap(x: string) {
   return MARINE_HABITAT_COLORS[x]?.css ?? MARINE_HABITAT_COLORS['other'].css;

diff --git a/frontend/src/state/layers/modules/terrestrial.ts b/frontend/src/state/layers/modules/terrestrial.ts
@@ -10,6 +10,7 @@ import {
 } from 'state/solutions/terrestrial-filters';
 import { colorMap } from 'lib/color-map';
 import { VECTOR_COLOR_MAPS } from 'config/color-maps';
+import { VectorTarget } from 'lib/data-map/types';
 import { featureProperty } from 'lib/deck/props/data-source';
 import { dataColorMap } from 'lib/deck/props/color-map';
 import { border, fillColor } from 'lib/deck/props/style';
@@ -20,7 +21,6 @@ import { selectableMvtLayer } from 'lib/deck/layers/selectable-mvt-layer';
 import { getTerrestrialDataFormats } from 'config/solutions/data-formats';
 import { getSolutionsDataAccessor } from 'config/solutions/data-access';
 import { landuseFilterState } from 'state/solutions/landuse-tree';
-import { VectorTarget } from 'state/interactions/use-interactions';
 
 export function landuseColorMap(x: string) {
   return TERRESTRIAL_LANDUSE_COLORS[x].css;