Feature/analysis flow

app/scripts/components/analysis/constants.ts

@@ -1,13 +1,13 @@
 import { FeatureCollection, Polygon } from 'geojson';
-import { makeFeatureCollection } from '$components/common/aoi/utils';
+import { featureCollection } from '@turf/helpers';
 
-export type RegionPreset = 'world';
+export type RegionPreset = 'world' | 'north-america';
 
 export const FeatureByRegionPreset: Record<
   RegionPreset,
   FeatureCollection<Polygon>
 > = {
-  world: makeFeatureCollection([
+  world: featureCollection([
     {
       type: 'Feature',
       id: 'world',
@@ -25,6 +25,25 @@ export const FeatureByRegionPreset: Record<
         type: 'Polygon'
       }
     }
+  ]),
+  'north-america': featureCollection([
+    {
+      type: 'Feature',
+      id: 'north-america',
+      properties: {},
+      geometry: {
+        coordinates: [
+          [
+            [-180, 0],
+            [-180, 89],
+            [-60, 89],
+            [-60, 0],
+            [-180, 0]
+          ]
+        ],
+        type: 'Polygon'
+      }
+    }
   ])
 };
 

app/scripts/components/analysis/define/aoi-selector.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState
 } from 'react';
 import styled from 'styled-components';
@@ -19,20 +20,19 @@ import {
 import { Button, ButtonGroup } from '@devseed-ui/button';
 import { Dropdown, DropMenu, DropTitle } from '@devseed-ui/dropdown';
 import {
-  CollecticonArrowLoop,
+  CollecticonTrashBin,
   CollecticonHandPan,
   CollecticonMarker,
   CollecticonPencil,
   CollecticonUpload2
 } from '@devseed-ui/collecticons';
 import { FeatureByRegionPreset, RegionPreset } from '../constants';
 import AoIUploadModal from './aoi-upload-modal';
+import { FoldWGuideLine, FoldTitleWOAccent } from '.';
 import {
-  Fold,
   FoldHeader,
   FoldHeadline,
   FoldHeadActions,
-  FoldTitle,
   FoldBody
 } from '$components/common/fold';
 import MapboxMap, { MapboxMapRef } from '$components/common/mapbox';
@@ -43,6 +43,7 @@ import {
 import DropMenuItemButton from '$styles/drop-menu-item-button';
 import { makeFeatureCollection } from '$components/common/aoi/utils';
 import { variableGlsp } from '$styles/variable-utils';
+import { useEffectPrevious } from '$utils/use-effect-previous';
 
 const MapContainer = styled.div`
   position: relative;
@@ -76,6 +77,19 @@ export default function AoiSelector({
 }: AoiSelectorProps) {
   const { drawing, featureCollection } = aoiDrawState;
 
+  // TODO revise this. This is not a great hack aimed at initializing the AoI with North America when 
+  // no qs AoI is set. Ideally this would be set in use-analysis-params initialState.
+  const timeOutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (!qsAoi) {
+      timeOutRef.current = setTimeout(() => {
+        setFeatureCollection(FeatureByRegionPreset['north-america']);
+      }, 100);
+    } else {
+      if (timeOutRef.current) clearTimeout(timeOutRef.current);
+    }
+  }, [qsAoi]);
+
   // For the drawing tool, the features need an id.
   const qsFc: FeatureCollection<Polygon> | null = useMemo(() => {
     return qsAoi
@@ -120,24 +134,28 @@ export default function AoiSelector({
   const [aoiModalRevealed, setAoIModalRevealed] = useState(false);
 
   return (
-    <Fold>
+    <FoldWGuideLine number={1}>
       <AoIUploadModal
         setFeatureCollection={setFeatureCollection}
         revealed={aoiModalRevealed}
         onCloseClick={() => setAoIModalRevealed(false)}
       />
       <FoldHeader>
         <FoldHeadline>
-          <FoldTitle>Area</FoldTitle>
+          <FoldTitleWOAccent>Select area of interest</FoldTitleWOAccent>
+          <p>
+            Use the pencil tool to draw a shape on the map or upload your own
+            shapefile.
+          </p>
         </FoldHeadline>
         <AoiHeadActions>
           <Toolbar>
             <ToolbarIconButton
-              variation='primary-fill'
+              variation='danger-fill'
               onClick={() => onAoiEvent('aoi.clear')}
               disabled={!featureCollection?.features.length}
             >
-              <CollecticonArrowLoop title='Clear map' meaningful />
+              <CollecticonTrashBin title='Clear map' meaningful />
             </ToolbarIconButton>
             <VerticalDivider variation='dark' />
             <ButtonGroup variation='primary-fill'>
@@ -170,7 +188,7 @@ export default function AoiSelector({
                 </ToolbarIconButton>
               )}
             >
-              <DropTitle>Select a region (BETA)</DropTitle>
+              <DropTitle>Select a region</DropTitle>
               <DropMenu>
                 <li>
                   <DropMenuItemButton
@@ -179,6 +197,13 @@ export default function AoiSelector({
                     World
                   </DropMenuItemButton>
                 </li>
+                <li>
+                  <DropMenuItemButton
+                    onClick={() => onRegionPresetClick('north-america')}
+                  >
+                    North America
+                  </DropMenuItemButton>
+                </li>
               </DropMenu>
             </Dropdown>
           </Toolbar>
@@ -194,6 +219,6 @@ export default function AoiSelector({
           />
         </MapContainer>
       </FoldBody>
-    </Fold>
+    </FoldWGuideLine>
   );
 }