Deck migration/draw layer

apps/fishing-map/features/datasets/datasets.utils.ts

@@ -26,6 +26,7 @@ import {
 import { UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
 import { IconType, MultiSelectOption } from '@globalfishingwatch/ui-components'
 import {
+  getDatasetConfigurationProperty,
   getDatasetGeometryType,
   getEnvironmentalDatasetRange,
 } from '@globalfishingwatch/datasets-client'
@@ -151,6 +152,10 @@ export const getDatasetTypeIcon = (dataset: Dataset): IconType | null => {
   if (dataset.type === DatasetTypes.Fourwings) return 'heatmap'
   if (dataset.type === DatasetTypes.Events) return 'clusters'
   const geometryType = getDatasetGeometryType(dataset)
+  if (geometryType === 'draw') {
+    const geometryType = getDatasetConfigurationProperty({ dataset, property: 'geometryType' })
+    return geometryType === 'points' ? 'dots' : 'polygons'
+  }
   if (geometryType === 'points') {
     return 'dots'
   }

apps/fishing-map/features/dataviews/dataviews.utils.ts

@@ -130,7 +130,7 @@ export const getUserPolygonsDataviewInstance = (
     config: {
       colorCyclingType: 'fill' as ColorCyclingType,
     },
-    dataviewId: TEMPLATE_ENVIRONMENT_DATAVIEW_SLUG,
+    dataviewId: TEMPLATE_CONTEXT_DATAVIEW_SLUG,
     datasetsConfig: [
       {
         datasetId,

apps/fishing-map/features/layer-library/LayerLibraryUserPanel.tsx

@@ -78,7 +78,7 @@ const LayerLibraryUserPanel = ({ searchQuery }: { searchQuery: string }) => {
   }, [datasets.length, onAddNewClick, dispatch])
 
   const onDrawClick = useCallback(() => {
-    dispatchSetMapDrawing(true)
+    dispatchSetMapDrawing('polygons')
     dispatch(setModalOpen({ id: 'layerLibrary', open: false }))
     trackEvent({
       category: TrackCategory.ReferenceLayer,

apps/fishing-map/features/map/Map.tsx

@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { useSelector } from 'react-redux'
 import { DeckGL, DeckGLRef } from '@deck.gl/react'
-import { LayersList } from '@deck.gl/core'
 import dynamic from 'next/dynamic'
 // import { atom, useAtom } from 'jotai'
-import { RulersLayer, DrawLayer } from '@globalfishingwatch/deck-layers'
+import { RulersLayer } from '@globalfishingwatch/deck-layers'
 import {
   useIsDeckLayersLoading,
   useSetDeckLayerComposer,
@@ -20,32 +19,22 @@ import {
   useMapMouseClick,
   useMapMouseHover,
 } from 'features/map/map-interactions.hooks'
-import { useMapRulersDrag } from 'features/map/overlays/rulers/rulers-drag.hooks'
 import ErrorNotification from 'features/map/overlays/error-notification/ErrorNotification'
-import { useMapDeckLayers } from 'features/map/map-layers.hooks'
+import { useMapLayers } from 'features/map/map-layers.hooks'
 import MapPopups from 'features/map/popups/MapPopups'
 import { MapCoordinates } from 'types'
 import { MAP_VIEW, useViewStateAtom, useUpdateViewStateUrlParams } from './map-viewport.hooks'
 import styles from './Map.module.css'
 import MapAnnotations from './overlays/annotations/Annotations'
 import MapAnnotationsDialog from './overlays/annotations/AnnotationsDialog'
-import useRulers from './overlays/rulers/rulers.hooks'
-import { useDrawLayer } from './overlays/draw/draw.hooks'
 import { useMapDrawConnect } from './map-draw.hooks'
 import MapInfo from './controls/MapInfo'
 import { MAP_CANVAS_ID } from './map.config'
 import TimeComparisonLegend from './TimeComparisonLegend'
 
-// This avoids type checking to complain
-// https://github.com/visgl/deck.gl/issues/7304#issuecomment-1277850750
-const RulersLayerComponent = RulersLayer as any
-const DrawLayerComponent = DrawLayer as any
 const DrawDialog = dynamic(
   () => import(/* webpackChunkName: "DrawDialog" */ './overlays/draw/DrawDialog')
 )
-const PopupWrapper = dynamic(
-  () => import(/* webpackChunkName: "PopupWrapper" */ './popups/PopupWrapper')
-)
 const Hint = dynamic(() => import(/* webpackChunkName: "Hint" */ 'features/help/Hint'))
 
 const mapStyles = {
@@ -55,8 +44,6 @@ const mapStyles = {
 }
 
 const MapWrapper = () => {
-  ///////////////////////////////////////
-  // DECK related code
   const deckRef = useRef<DeckGLRef>(null)
   useSetMapInstance(deckRef)
   const { viewState, setViewState } = useViewStateAtom()
@@ -71,14 +58,11 @@ const MapWrapper = () => {
   useUpdateViewStateUrlParams()
   const onMapClick = useMapMouseClick()
   const { onMouseMove, hoveredCoordinates } = useMapMouseHover()
-  const { getCursor } = useMapCursor()
+  const getCursor = useMapCursor()
   const { onMapDrag, onMapDragStart, onMapDragEnd } = useMapDrag()
-  ////////////////////////////////////////
-  // Used it only once here to attach the listener only once
-  useMapRulersDrag()
-  const { rulers, editingRuler, rulersVisible } = useRulers()
   const { isMapDrawing } = useMapDrawConnect()
-  const layers = useMapDeckLayers()
+  const layers = useMapLayers()
+
   const setDeckLayers = useSetDeckLayerComposer()
   useEffect(() => {
     return () => {
@@ -98,18 +82,14 @@ const MapWrapper = () => {
   const mapLoading = useIsDeckLayersLoading()
 
   const setDeckLayerLoadedState = useSetDeckLayerLoadedState()
-  const { onDrawEdit, onDrawClick, drawLayerMode, drawFeaturesIndexes, drawFeatures } =
-    useDrawLayer()
-
-  const currentRuler = editingRuler ? [editingRuler] : []
 
   return (
     <div className={styles.container}>
       <DeckGL
         id={MAP_CANVAS_ID}
         ref={deckRef}
         views={MAP_VIEW}
-        layers={deckRef ? (layers as LayersList) : []}
+        layers={deckRef ? layers : []}
         onAfterRender={() => {
           setDeckLayerLoadedState(layers)
         }}
@@ -136,21 +116,6 @@ const MapWrapper = () => {
         <MapAnnotations />
         <MapAnnotationsDialog />
         <ErrorNotification />
-        {(editingRuler || rulers) && (
-          <RulersLayerComponent
-            rulers={[...(rulers || []), ...currentRuler]}
-            visible={rulersVisible}
-          />
-        )}
-        {isMapDrawing && (
-          <DrawLayerComponent
-            data={drawFeatures}
-            onEdit={onDrawEdit}
-            onClick={onDrawClick}
-            selectedFeatureIndexes={drawFeaturesIndexes}
-            mode={drawLayerMode}
-          />
-        )}
       </DeckGL>
       {isMapDrawing && <DrawDialog />}
       <MapPopups />

apps/fishing-map/features/map/map-draw.hooks.ts

@@ -1,14 +1,16 @@
 import { useCallback } from 'react'
 import { useSelector } from 'react-redux'
-import { selectIsMapDrawing } from 'routes/routes.selectors'
+import { DrawFeatureType } from '@globalfishingwatch/deck-layers'
+import { selectIsMapDrawing, selectMapDrawingMode } from 'routes/routes.selectors'
 import { useLocationConnect } from 'routes/routes.hook'
 
 export const useMapDrawConnect = () => {
   const isMapDrawing = useSelector(selectIsMapDrawing)
+  const mapDrawingMode = useSelector(selectMapDrawingMode)
   const { dispatchQueryParams } = useLocationConnect()
 
   const dispatchSetMapDrawing = useCallback(
-    (mapDrawing: boolean) => {
+    (mapDrawing: DrawFeatureType | false) => {
       dispatchQueryParams({ mapDrawing })
     },
     [dispatchQueryParams]
@@ -27,6 +29,7 @@ export const useMapDrawConnect = () => {
 
   return {
     isMapDrawing,
+    mapDrawingMode,
     dispatchResetMapDraw,
     dispatchSetMapDrawing,
     dispatchSetMapDrawEditDataset,

apps/fishing-map/features/map/map-interaction.utils.ts

@@ -1,5 +1,7 @@
-import { DeckLayerPickingObject } from '@globalfishingwatch/deck-layers'
-import { RulerPickingObject } from '@globalfishingwatch/deck-layers'
+import { DeckLayerPickingObject, DrawPickingObject } from '@globalfishingwatch/deck-layers'
 
-export const isRulerLayerPoint = (feature: DeckLayerPickingObject) =>
-  feature.category === 'rulers' && (feature as RulerPickingObject).geometry?.type === 'Point'
+export const isRulerLayerPoint = (pickingObject: DeckLayerPickingObject) =>
+  pickingObject.category === 'rulers'
+
+export const isDrawFeature = (feature: DeckLayerPickingObject) =>
+  feature.category === 'draw' && (feature as DrawPickingObject).geometry?.type === 'Polygon'

apps/fishing-map/features/map/map-interactions.hooks.ts

@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { DeckProps, PickingInfo, Position } from '@deck.gl/core'
+import { DeckProps, PickingInfo } from '@deck.gl/core'
 import type { MjolnirPointerEvent } from 'mjolnir.js'
 import { DataviewCategory, DataviewType } from '@globalfishingwatch/api-types'
 import {
@@ -12,17 +12,15 @@ import {
 import {
   ClusterPickingObject,
   DeckLayerInteractionPickingInfo,
+  DeckLayerPickingObject,
   FourwingsHeatmapPickingObject,
 } from '@globalfishingwatch/deck-layers'
 import { useMapDrawConnect } from 'features/map/map-draw.hooks'
 import { useMapAnnotation } from 'features/map/overlays/annotations/annotations.hooks'
 import { SUBLAYER_INTERACTION_TYPES_WITH_VESSEL_INTERACTION } from 'features/map/map.hooks'
 import useRulers from 'features/map/overlays/rulers/rulers.hooks'
 import { useDeckMap } from 'features/map/map-context.hooks'
-import { selectActiveTemporalgridDataviews } from 'features/dataviews/selectors/dataviews.selectors'
-import { selectIsMarineManagerLocation } from 'routes/routes.selectors'
 import { useMapErrorNotification } from 'features/map/overlays/error-notification/error-notification.hooks'
-import { selectCurrentDataviewInstancesResolved } from 'features/dataviews/selectors/dataviews.instances.selectors'
 import { useAppDispatch } from 'features/app/app.hooks'
 import { setHintDismissed } from 'features/help/hints.slice'
 import { ENCOUNTER_EVENTS_SOURCE_ID } from 'features/dataviews/dataviews.utils'
@@ -40,6 +38,7 @@ import {
   setClickedEvent,
 } from './map.slice'
 import { useSetViewState } from './map-viewport.hooks'
+import { useDrawLayerInstance } from './overlays/draw/draw.hooks'
 
 export const useClickedEventConnect = () => {
   const dispatch = useAppDispatch()
@@ -205,6 +204,7 @@ export const useGetPickingInteraction = () => {
         return f.object || []
       })
       return {
+        ...info,
         type,
         longitude: info.coordinate[0],
         latitude: info.coordinate[1],
@@ -226,9 +226,9 @@ export const useMapMouseHover = () => {
   const { onRulerMapHover, rulersEditing } = useRulers()
 
   const [hoveredCoordinates, setHoveredCoordinates] = useState<number[]>()
-  const [hoveredDebouncedEvent, setHoveredDebouncedEvent] = useState<SliceInteractionEvent | null>(
-    null
-  )
+  // const [hoveredDebouncedEvent, setHoveredDebouncedEvent] = useState<SliceInteractionEvent | null>(
+  //   null
+  // )
 
   // const onSimpleMapHover = useSimpleMapHover(setHoveredEvent as InteractionEventCallback)
   // const onMapHover = useMapHover(
@@ -284,7 +284,7 @@ export const useMapMouseHover = () => {
     onMouseMove,
     // resetHoverState,
     hoveredCoordinates,
-    hoveredDebouncedEvent,
+    // hoveredDebouncedEvent,
     // hoveredTooltipEvent,
   }
 }
@@ -312,16 +312,19 @@ export const useMapMouseClick = () => {
 }
 
 export const useMapCursor = () => {
+  const { isMapDrawing } = useMapDrawConnect()
+  // const { getDrawCursor } = useDrawLayer()
   const { isMapAnnotating } = useMapAnnotation()
   const { isErrorNotificationEditing } = useMapErrorNotification()
   const { rulersEditing } = useRulers()
   const hoverFeatures = useMapHoverInteraction()?.features
+
   const getCursor = useCallback(
     ({ isDragging }: { isDragging: boolean }) => {
+      if (hoverFeatures?.some(isRulerLayerPoint)) {
+        return 'move'
+      }
       if (isMapAnnotating || isErrorNotificationEditing || rulersEditing) {
-        if (rulersEditing && hoverFeatures?.some(isRulerLayerPoint)) {
-          return 'move'
-        }
         return 'crosshair'
       }
       if (isDragging) {
@@ -332,50 +335,48 @@ export const useMapCursor = () => {
       }
       return 'grab'
     },
-    [hoverFeatures, isErrorNotificationEditing, isMapAnnotating, rulersEditing]
+    [rulersEditing, isMapAnnotating, isErrorNotificationEditing, hoverFeatures]
   )
-  return { getCursor }
+
+  return getCursor
 }
 
 export const useMapDrag = () => {
-  const map = useDeckMap()
-  const { rulersEditing } = useRulers()
   const { onRulerDrag, onRulerDragStart, onRulerDragEnd } = useMapRulersDrag()
 
   const onMapDragStart = useCallback(
     (info: PickingInfo, event: any) => {
-      if (!map || !info.coordinate) return
-      if (rulersEditing) {
-        const pickedInfo = map?.pickMultipleObjects({
-          x: info.x,
-          y: info.y,
-          radius: 0,
-        })
-        const features = pickedInfo.flatMap((p) => p.object || [])
-        onRulerDragStart(info, features)
+      if (!info.coordinate || !info.object) return
+      const isRulerPoint = isRulerLayerPoint(info.object)
+      if (isRulerPoint) {
+        onRulerDragStart(info)
+        event.stopPropagation()
       }
     },
-    [map, onRulerDragStart, rulersEditing]
+    [onRulerDragStart]
   )
 
   const onMapDrag = useCallback(
-    (info: PickingInfo, event: any) => {
-      if (!info.coordinate) return
-      if (rulersEditing) {
+    (info: PickingInfo<DeckLayerPickingObject>, event: any) => {
+      if (!info.coordinate || !info.object) return
+      const isRulerPoint = isRulerLayerPoint(info.object)
+      if (isRulerPoint) {
         onRulerDrag(info)
+        event.stopPropagation()
       }
     },
-    [onRulerDrag, rulersEditing]
+    [onRulerDrag]
   )
 
   const onMapDragEnd = useCallback(
     (info: PickingInfo, event: any) => {
-      if (!info.coordinate) return
-      if (rulersEditing) {
+      if (!info.coordinate || !info.object) return
+      const isRulerPoint = isRulerLayerPoint(info.object)
+      if (isRulerPoint) {
         onRulerDragEnd()
       }
     },
-    [onRulerDragEnd, rulersEditing]
+    [onRulerDragEnd]
   )
   return { onMapDrag, onMapDragStart, onMapDragEnd }
 }

apps/fishing-map/features/map/map-layers.hooks.ts

@@ -5,19 +5,22 @@ import {
   useDeckLayerComposer,
   useDeckLayerLoadedState,
 } from '@globalfishingwatch/deck-layer-composer'
+import { RulersLayer } from '@globalfishingwatch/deck-layers'
 import { useGlobalConfigConnect } from 'features/map/map.hooks'
 import { selectDataviewInstancesResolvedVisible } from 'features/dataviews/selectors/dataviews.selectors'
 import { selectIsWorkspaceIndexLocation, selectIsUserLocation } from 'routes/routes.selectors'
 import { DEFAULT_BASEMAP_DATAVIEW_INSTANCE } from 'data/workspaces'
 import { selectWorkspaceStatus } from 'features/workspace/workspace.selectors'
 import { AsyncReducerStatus } from 'utils/async-slice'
+import { useDrawLayerInstance } from './overlays/draw/draw.hooks'
 import {
   selectMapReportBufferDataviews,
   selectShowWorkspaceDetail,
   selectWorkspacesListDataview,
 } from './map.selectors'
+import useRulers, { useMapRulerInstance } from './overlays/rulers/rulers.hooks'
 
-export const useMapDeckLayers = () => {
+export const useMapDataviewsLayers = () => {
   const workspaceStatus = useSelector(selectWorkspaceStatus)
   const workspaceDataviews = useSelector(selectDataviewInstancesResolvedVisible)
   const bufferDataviews = useSelector(selectMapReportBufferDataviews)
@@ -59,6 +62,20 @@ export const useMapDeckLayers = () => {
   return layers
 }
 
+export const useMapOverlayLayers = () => {
+  const drawLayerInstance = useDrawLayerInstance()
+  const rulerLayerInstance = useMapRulerInstance()
+  return useMemo(() => {
+    return [drawLayerInstance!, rulerLayerInstance!].filter(Boolean)
+  }, [drawLayerInstance, rulerLayerInstance])
+}
+
+export const useMapLayers = () => {
+  const dataviewsLayers = useMapDataviewsLayers()
+  const overlays = useMapOverlayLayers()
+  return useMemo(() => [...dataviewsLayers, ...overlays], [dataviewsLayers, overlays])
+}
+
 export const useMapLayersLoaded = () => {
   const layerStatus = useDeckLayerLoadedState()
   return Object.values(layerStatus).every((l) => l.loaded)