Simplify AOI management

This update simplifies AOI management by removing the concept of multiple AOIs where only some are selected for analysis. Instead, there will always be a single AOI that serves as input for analysis. The AOI is now displayed using a regular LineLayer with a GeoJson Source (both react-map-gl components). There are three methods for creating an AOI: uploading a GeoJSON file, selecting a predefined boundary from a menu (or directly from the map in a future iteration), and using the Mapbox Draw Control. By leveraging the draw control solely for generating polygons, we eliminate the need for extensive custom code to sync with the library. This simplification addresses long-standing technical debt (close #710) and resolves many issues (fix #1093, fix #1258).

app/scripts/components/common/aoi/utils.ts

@@ -62,19 +62,19 @@ export const featureFromBounds = (
       };
 };
 
-export const calcFeatCollArea = (
-  featureCollection: FeatureCollection<Polygon> | null
-) => {
-  if (!featureCollection?.features.length) return '0';
-
+export const calcFeatCollArea = (input: FeatureCollection<Polygon> | null) => {
+  if (!input?.features.length) {
+    return '0';
+  }
   // Merge the features to calculate the correct area in the case of overlap.
-  const mergedFeature = featureCollection.features
-    .slice(1)
-    .reduce((acc, feature) => {
-      return union(acc, feature)!;
-    }, featureCollection.features[0]);
+  const mergedFeature = input.features.slice(1).reduce((acc, feature) => {
+    return union(acc, feature);
+  }, input.features[0]);
 
   // Convert from m2 to km2.
+  if (!mergedFeature) {
+    return '0';
+  }
   const km2 = featArea(mergedFeature) / 1e6;
   return formatThousands(km2, { decimals: 0, shorten: true });
 };

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

@@ -9,7 +9,7 @@ export const aoisSerialized = atomWithUrlValueStability<string>({
   initialValue: new URLSearchParams(window.location.search).get('aois') ?? '',
   urlParam: 'aois',
   hydrate: (v) => v ?? '',
-  dehydrate: (v) => v,
+  dehydrate: (v) => v
 });
 
 // Getter atom to get AoiS as GeoJSON features from the hash.
@@ -43,15 +43,6 @@ export const aoisUpdateGeometryAtom = atom(
   }
 );
 
-// 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(aoisSerialized, 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);
@@ -65,12 +56,4 @@ export const aoiDeleteAllAtom = atom(null, (get, set) => {
   set(aoisSerialized, encodeAois([]));
 });
 
-// Atom that tracks whether an AOI can be edited or not.
-export const selectedForEditingAtom = atomWithUrlValueStability({
-  initialValue: (new URLSearchParams(window.location.search).get('selectedForEditing') !== 'false'),
-  urlParam: 'selectedForEditing',
-  hydrate: (value) => value !== 'false',
-  dehydrate: (value) => value ? 'true' : 'false'
-});
-
-export const isDrawingAtom = atom(false);
+export const isDrawingAtom = atom(false);