Added region presets

NASA-IMPACT · Nov 15, 2022 · b43d002 · b43d002
1 parent 82f822a
commit b43d002
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 28 deletions.
diff --git a/app/scripts/components/analysis/define/aoi-selector.tsx b/app/scripts/components/analysis/define/aoi-selector.tsx
@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import styled from 'styled-components';
 import { Feature, MultiPolygon, Polygon } from 'geojson';
 import bbox from '@turf/bbox';
@@ -22,6 +28,7 @@ import {
   CollecticonUpload2
 } from '@devseed-ui/collecticons';
 import { multiPolygonToPolygon } from '../utils';
+import { FeatureByRegionPreset, RegionPreset } from './constants';
 import {
   Fold,
   FoldHeader,
@@ -50,32 +57,46 @@ interface AoiSelectorProps {
   onAoiEvent: AoiChangeListenerOverload;
 }
 
-export default function AoiSelector(props: AoiSelectorProps) {
-  const { onAoiEvent, qsFeature, aoiDrawState } = props;
+export default function AoiSelector({
+  onAoiEvent,
+  qsFeature,
+  aoiDrawState
+}: AoiSelectorProps) {
   const { selected, drawing, feature } = aoiDrawState;
   const mapRef = useRef<MapboxMapRef>(null);
 
   // Technical debt
   // Despite the query parameters support for multiple features on the aoi, the
   // AOI drawing tool only supports one.
   // Keeping just the first one.
-  const polygon: Feature<Polygon> | null = useMemo(() => {
+  const qsPolygon: Feature<Polygon> | null = useMemo(() => {
     return qsFeature
       ? { ...multiPolygonToPolygon(qsFeature), id: 'qs-feature' }
       : null;
   }, [qsFeature]);
 
-  // Use the feature from the url qs as the initial state to center the map.
+  const [currentRegionPreset, setCurrentRegionPreset] =
+    useState<RegionPreset | null>(null);
+  const onRegionPresetClick = useCallback((preset: RegionPreset) => {
+    setCurrentRegionPreset(preset);
+  }, []);
+
+  // Use the feature from the url qs or the region preset as the initial state to center the map.
   useEffect(() => {
-    if (polygon) {
-      onAoiEvent('aoi.set-feature', { feature: polygon });
-      const featureBbox = bbox(polygon) as [number, number, number, number];
-      mapRef.current?.instance?.fitBounds(featureBbox, { padding: 32 });
+    if (qsPolygon || currentRegionPreset) {
+      const polygon = currentRegionPreset
+        ? FeatureByRegionPreset[currentRegionPreset]
+        : qsPolygon;
+      if (polygon) {
+        onAoiEvent('aoi.set-feature', { feature: polygon });
+        const featureBbox = bbox(polygon) as [number, number, number, number];
+        mapRef.current?.instance?.fitBounds(featureBbox, { padding: 32 });
+      }
     } else {
       onAoiEvent('aoi.clear');
       mapRef.current?.instance?.flyTo({ zoom: 1, center: [0, 0] });
     }
-  }, [onAoiEvent, polygon]);
+  }, [onAoiEvent, qsPolygon, currentRegionPreset]);
 
   return (
     <Fold>
@@ -115,19 +136,15 @@ export default function AoiSelector(props: AoiSelectorProps) {
                 </ToolbarIconButton>
               )}
             >
-              <DropTitle>Select a country</DropTitle>
+              <DropTitle>Select a region</DropTitle>
               <DropMenu>
                 <li>
-                  <DropMenuItem href='#'>Country name A</DropMenuItem>
-                </li>
-                <li>
-                  <DropMenuItem href='#'>Country name B</DropMenuItem>
-                </li>
-                <li>
-                  <DropMenuItem href='#'>Country name C</DropMenuItem>
-                </li>
-                <li>
-                  <DropMenuItem href='#'>Country name D</DropMenuItem>
+                  <DropMenuItem
+                    role='button'
+                    onClick={() => onRegionPresetClick('world')}
+                  >
+                    World
+                  </DropMenuItem>
                 </li>
               </DropMenu>
             </Dropdown>

diff --git a/app/scripts/components/analysis/define/constants.ts b/app/scripts/components/analysis/define/constants.ts
@@ -0,0 +1,22 @@
+import { Feature, Polygon } from 'geojson';
+
+export type RegionPreset = 'world';
+
+export const FeatureByRegionPreset: Record<RegionPreset, Feature<Polygon>> = {
+  world: {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      coordinates: [
+        [
+          [-180, -89],
+          [180, -89],
+          [180, 89],
+          [-180, 89],
+          [-180, -89]
+        ]
+      ],
+      type: 'Polygon'
+    }
+  }
+};
diff --git a/app/scripts/components/common/aoi/types.d.ts b/app/scripts/components/common/aoi/types.d.ts
@@ -34,11 +34,11 @@ export type AoiChangeListener = (
   }
 ) => void;
 
-export type AoiChangeListenerOverload = {
-  (action: 'aoi.draw-click', payload?: never): void;
-  (action: 'aoi.set-feature', payload: { feature: AoiFeature }): void;
-  (action: 'aoi.clear', payload?: never): void;
-  (action: 'aoi.draw-finish', payload: { feature: AoiFeature }): void;
+export interface AoiChangeListenerOverload {
+  (action: 'aoi.draw-click' | 'aoi.clear', payload?: never): void;
+  (
+    action: 'aoi.draw-finish' | 'aoi.set-feature' | 'aoi.update',
+    payload: { feature: AoiFeature }
+  ): void;
   (action: 'aoi.selection', payload: { selected: boolean }): void;
-  (action: 'aoi.update', payload: { feature: AoiFeature }): void;
-};
+}