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

@@ -19,20 +19,19 @@
 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';
@@ -96,7 +95,7 @@
       ];
       mapRef.current?.instance?.fitBounds(fcBbox, { padding: 32 });
     },
     [onAoiEvent]
   );
 
   const onRegionPresetClick = useCallback(
@@ -115,29 +114,33 @@
       onAoiEvent('aoi.clear');
       mapRef.current?.instance?.flyTo({ zoom: 1, center: [0, 0] });
     }
   }, [onAoiEvent, qsFc, setFeatureCollection]);
 
   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'>
@@ -179,6 +182,13 @@
                     World
                   </DropMenuItemButton>
                 </li>
+                <li>
+                  <DropMenuItemButton
+                    onClick={() => onRegionPresetClick('north-america')}
+                  >
+                    North America
+                  </DropMenuItemButton>
+                </li>
               </DropMenu>
             </Dropdown>
           </Toolbar>
@@ -194,6 +204,6 @@
           />
         </MapContainer>
       </FoldBody>
-    </Fold>
+    </FoldWGuideLine>
   );
 }