Moved aoi atoms to own file

app/scripts/components/common/map/controls/aoi/atoms.ts

@@ -0,0 +1,57 @@
+import { atom } from "jotai";
+import { atomWithHash } from "jotai-location";
+import { Polygon } from "geojson";
+import { AoIFeature } from "../../types";
+import { decodeAois, encodeAois } from "$utils/polygon-url";
+
+// This is the atom acting as a single source of truth for the AOIs.
+export const aoisHashAtom = atomWithHash('aois', '');
+
+// Getter atom to get AoiS as GeoJSON features from the hash.
+export const aoisFeaturesAtom = atom<AoIFeature[]>((get) => {
+  const hash = get(aoisHashAtom);
+  if (!hash) return [];
+  return decodeAois(hash);
+});
+
+// Setter atom to update AOIs geoometries, writing directly to the hash atom.
+export const aoisUpdateGeometryAtom = atom(
+  null,
+  (get, set, updates: { id: string; geometry: Polygon }[]) => {
+    let newFeatures = [...get(aoisFeaturesAtom)];
+    updates.forEach(({ id, geometry }) => {
+      const existingFeature = newFeatures.find((feature) => feature.id === id);
+      if (existingFeature) {
+        existingFeature.geometry = geometry;
+      } else {
+        const newFeature: AoIFeature = {
+          type: 'Feature',
+          id,
+          geometry,
+          selected: true,
+          properties: {}
+        };
+        newFeatures = [...newFeatures, newFeature];
+      }
+    });
+    set(aoisHashAtom, encodeAois(newFeatures));
+  }
+);
+
+// Setter atom to update AOIs selected state, writing directly to the hash atom.
+export const aoisSetSelectedAtom = atom(null, (get, set, ids: string[]) => {
+  const features = get(aoisFeaturesAtom);
+  const newFeatures = features.map((feature) => {
+    return { ...feature, selected: ids.includes(feature.id as string) };
+  });
+  set(aoisHashAtom, encodeAois(newFeatures));
+});
+
+// Setter atom to delete AOIs, writing directly to the hash atom.
+export const aoisDeleteAtom = atom(null, (get, set, ids: string[]) => {
+  const features = get(aoisFeaturesAtom);
+  const newFeatures = features.filter(
+    (feature) => !ids.includes(feature.id as string)
+  );
+  set(aoisHashAtom, encodeAois(newFeatures));
+});

app/scripts/components/common/map/controls/aoi/index.tsx

@@ -2,7 +2,7 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import { useAtomValue } from 'jotai';
 import { useRef } from 'react';
 import { useControl } from 'react-map-gl';
-import { aoisFeaturesAtom } from '$components/exploration/atoms/atoms';
+import { aoisFeaturesAtom } from './atoms';
 
 type DrawControlProps = {
   onCreate?: (evt: { features: object[] }) => void;

app/scripts/components/common/map/controls/hooks/use-aois.ts

@@ -2,12 +2,7 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback } from 'react';
 import { Polygon } from 'geojson';
 import { toAoIid } from '../../utils';
-import {
-  aoisDeleteAtom,
-  aoisFeaturesAtom,
-  aoisSetSelectedAtom,
-  aoisUpdateGeometryAtom
-} from '$components/exploration/atoms/atoms';
+import { aoisDeleteAtom, aoisFeaturesAtom, aoisSetSelectedAtom, aoisUpdateGeometryAtom } from '../aoi/atoms';
 
 export default function useAois() {
   const features = useAtomValue(aoisFeaturesAtom);

app/scripts/components/common/map/controls/options.tsx → app/scripts/components/common/map/controls/map-options/index.tsx

@@ -12,15 +12,15 @@ import { Button, createButtonStyles } from '@devseed-ui/button';
 import { FormSwitch } from '@devseed-ui/form';
 import { Subtitle } from '@devseed-ui/typography';
 
+import useThemedControl from '../hooks/use-themed-control';
 import {
   ProjectionItemConic,
   ProjectionItemCustom,
   ProjectionItemSimple
-} from './map-options/projection-items';
-import { MapOptionsProps } from './map-options/types';
-import { projectionsList } from './map-options/projections';
-import { BASEMAP_STYLES } from './map-options/basemap';
-import useThemedControl from './hooks/use-themed-control';
+} from './projection-items';
+import { MapOptionsProps } from './types';
+import { projectionsList } from './projections';
+import { BASEMAP_STYLES } from './basemap';
 import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
 
 const DropHeader = styled.div`

app/scripts/components/exploration/atoms/atoms.ts

@@ -1,15 +1,11 @@
 import { atom } from 'jotai';
-import { atomWithHash } from 'jotai-location';
-import { Polygon } from 'geojson';
 import {
   DataMetric,
   dataMetrics
 } from '../components/analysis-metrics-dropdown';
 
 import { HEADER_COLUMN_WIDTH, RIGHT_AXIS_SPACE } from '../constants';
 import { DateRange, TimelineDataset, ZoomTransformPlain } from '../types.d.ts';
-import { decodeAois, encodeAois } from '$utils/polygon-url';
-import { AoIFeature } from '$components/common/map/types';
 
 // Datasets to show on the timeline and their settings
 export const timelineDatasetsAtom = atom<TimelineDataset[]>([]);
@@ -47,55 +43,3 @@ export const activeAnalysisMetricsAtom = atom<DataMetric[]>(dataMetrics);
 
 // 🛑 Whether or not an analysis is being performed. Temporary!!!
 export const isAnalysisAtom = atom<boolean>(false);
-
-// This is the atom acting as a single source of truth for the AOIs.
-export const aoisHashAtom = atomWithHash('aois', '');
-
-// Getter atom to get AoiS as GeoJSON features from the hash.
-export const aoisFeaturesAtom = atom<AoIFeature[]>((get) => {
-  const hash = get(aoisHashAtom);
-  if (!hash) return [];
-  return decodeAois(hash);
-});
-
-// Setter atom to update AOIs geoometries, writing directly to the hash atom.
-export const aoisUpdateGeometryAtom = atom(
-  null,
-  (get, set, updates: { id: string; geometry: Polygon }[]) => {
-    let newFeatures = [...get(aoisFeaturesAtom)];
-    updates.forEach(({ id, geometry }) => {
-      const existingFeature = newFeatures.find((feature) => feature.id === id);
-      if (existingFeature) {
-        existingFeature.geometry = geometry;
-      } else {
-        const newFeature: AoIFeature = {
-          type: 'Feature',
-          id,
-          geometry,
-          selected: true,
-          properties: {}
-        };
-        newFeatures = [...newFeatures, newFeature];
-      }
-    });
-    set(aoisHashAtom, encodeAois(newFeatures));
-  }
-);
-
-// Setter atom to update AOIs selected state, writing directly to the hash atom.
-export const aoisSetSelectedAtom = atom(null, (get, set, ids: string[]) => {
-  const features = get(aoisFeaturesAtom);
-  const newFeatures = features.map((feature) => {
-    return { ...feature, selected: ids.includes(feature.id as string) };
-  });
-  set(aoisHashAtom, encodeAois(newFeatures));
-});
-
-// Setter atom to delete AOIs, writing directly to the hash atom.
-export const aoisDeleteAtom = atom(null, (get, set, ids: string[]) => {
-  const features = get(aoisFeaturesAtom);
-  const newFeatures = features.filter(
-    (feature) => !ids.includes(feature.id as string)
-  );
-  set(aoisHashAtom, encodeAois(newFeatures));
-});

app/scripts/components/exploration/components/map/index.tsx

@@ -18,7 +18,7 @@ import {
   ScaleControl
 } from '$components/common/map/controls';
 import MapCoordsControl from '$components/common/map/controls/coords';
-import MapOptionsControl from '$components/common/map/controls/options';
+import MapOptionsControl from '$components/common/map/controls/map-options';
 import { projectionDefault } from '$components/common/map/controls/map-options/projections';
 import { useBasemap } from '$components/common/map/controls/hooks/use-basemap';
 import DrawControl from '$components/common/map/controls/aoi';