render VesselTable for port_visit events (#2870)

GlobalFishingWatch · Oct 22, 2024 · 9f24217 · 9f24217
2 parents a0cf465 + f5607b8
commit 9f24217
Show file tree

Hide file tree

Showing 12 changed files with 348 additions and 174 deletions.
diff --git a/apps/fishing-map/features/datasets/datasets.slice.ts b/apps/fishing-map/features/datasets/datasets.slice.ts
@@ -8,6 +8,7 @@ import {
   APIPagination,
   Dataset,
   DatasetsMigration,
+  DatasetTypes,
   EndpointId,
   EndpointParam,
   UploadResponse,
@@ -80,6 +81,44 @@ const parsePOCsDatasets = (dataset: Dataset) => {
   return dataset
 }
 
+export const getDatasetByIdsThunk = createAsyncThunk(
+  'datasets/getByIds',
+  async (
+    { ids, includeRelated = true }: { ids: string[]; includeRelated?: boolean },
+    { rejectWithValue, getState, dispatch }
+  ) => {
+    try {
+      const state = getState() as any
+      const datasetsToRequest: string[] = []
+      let datasets = ids.flatMap((datasetId) => {
+        const dataset = selectDatasetById(datasetId)(state)
+        if (!dataset) {
+          datasetsToRequest.push(datasetId)
+        }
+        return (dataset as Dataset) || []
+      })
+
+      if (datasetsToRequest.length) {
+        const action = await dispatch(
+          fetchDatasetsByIdsThunk({ ids: datasetsToRequest, includeRelated })
+        )
+        if (fetchDatasetsByIdsThunk.fulfilled.match(action) && action.payload?.length) {
+          datasets = datasets.concat(
+            action.payload.filter((v) => v.type === DatasetTypes.Vessels) as Dataset[]
+          )
+        }
+      }
+      return datasets
+    } catch (e: any) {
+      console.warn(e)
+      return rejectWithValue({
+        status: parseAPIErrorStatus(e),
+        message: `${id} - ${parseAPIErrorMessage(e)}`,
+      })
+    }
+  }
+)
+
 export const fetchDatasetByIdThunk = createAsyncThunk<
   Dataset,
   string,

diff --git a/apps/fishing-map/features/map/map-interaction.utils.ts b/apps/fishing-map/features/map/map-interaction.utils.ts
@@ -5,6 +5,7 @@ import {
   DeckLayerPickingObject,
   FourwingsPositionsPickingObject,
   VesselEventPickingObject,
+  FourwingsClusterPickingObject,
 } from '@globalfishingwatch/deck-layers'
 import { TrackCategory } from 'features/app/analytics.hooks'
 import { SliceExtendedFourwingsPickingObject } from './map.slice'
@@ -13,6 +14,9 @@ export const isTilesClusterLayer = (pickingObject: DeckLayerPickingObject) =>
   pickingObject.subcategory === DataviewType.TileCluster ||
   pickingObject.subcategory === DataviewType.FourwingsTileCluster
 
+export const isTilesClusterLayerCluster = (pickingObject: FourwingsClusterPickingObject) =>
+  pickingObject?.properties?.value > 1 && pickingObject?.properties?.cluster_id !== undefined
+
 export const isRulerLayerPoint = (pickingObject: DeckLayerPickingObject) =>
   pickingObject.category === 'rulers'
 

diff --git a/apps/fishing-map/features/map/map-interactions.hooks.ts b/apps/fishing-map/features/map/map-interactions.hooks.ts
@@ -32,7 +32,12 @@ import { ENCOUNTER_EVENTS_SOURCES } from 'features/dataviews/dataviews.utils'
 import { selectEventsDataviews } from 'features/dataviews/selectors/dataviews.categories.selectors'
 import { setHighlightedEvents } from 'features/timebar/timebar.slice'
 import { useMapRulersDrag } from './overlays/rulers/rulers-drag.hooks'
-import { getAnalyticsEvent, isRulerLayerPoint, isTilesClusterLayer } from './map-interaction.utils'
+import {
+  getAnalyticsEvent,
+  isRulerLayerPoint,
+  isTilesClusterLayer,
+  isTilesClusterLayerCluster,
+} from './map-interaction.utils'
 import {
   SliceExtendedClusterPickingObject,
   SliceInteractionEvent,
@@ -52,6 +57,7 @@ export const SUBLAYER_INTERACTION_TYPES_WITH_VESSEL_INTERACTION = [
   DataviewCategory.Activity,
   DataviewCategory.Detections,
   DataviewCategory.VesselGroups,
+  DataviewCategory.Events,
 ]
 
 const useMapClusterTilesLoading = () => {
@@ -143,7 +149,7 @@ export const useClickedEventConnect = () => {
       (f) => (f as FourwingsClusterPickingObject).category === DataviewCategory.Events
     ) as FourwingsClusterPickingObject
 
-    if (clusterFeature?.properties?.value > 1) {
+    if (isTilesClusterLayerCluster(clusterFeature)) {
       const { expansionZoom } = clusterFeature
       const { expansionZoom: legacyExpansionZoom } = clusterFeature.properties as any
       const expansionZoomValue = expansionZoom || legacyExpansionZoom || FOURWINGS_MAX_ZOOM + 0.5
@@ -363,8 +369,8 @@ export const useMapCursor = () => {
         return 'move'
       }
       if (hoverFeatures?.some(isTilesClusterLayer)) {
-        const isCluster = (hoverFeatures as FourwingsClusterPickingObject[]).some(
-          (f) => f.properties?.value > 1
+        const isCluster = (hoverFeatures as FourwingsClusterPickingObject[]).some((f) =>
+          isTilesClusterLayerCluster(f)
         )
         if (!isCluster) {
           return 'pointer'