clenup

GlobalFishingWatch · Sep 20, 2024 · 89abc69 · 89abc69
1 parent 6438470
commit 89abc69
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 52 deletions.
diff --git a/apps/fishing-map/features/dataviews/dataviews.mock.ts b/apps/fishing-map/features/dataviews/dataviews.mock.ts
@@ -14,8 +14,9 @@ const dataviews: Dataview[] = [
     config: {
       type: 'FOURWINGS_TILE_CLUSTER',
       color: '#FAE9A0',
-      icon: 'encounter',
-      maxZoomCluster: 6,
+      clusterMaxZoomLevels: {
+        default: 6,
+      },
     },
     datasetsConfig: [
       {
@@ -40,8 +41,9 @@ const dataviews: Dataview[] = [
     config: {
       type: 'FOURWINGS_TILE_CLUSTER',
       color: '#CEA9F9',
-      icon: 'loitering',
-      maxZoomCluster: 6,
+      clusterMaxZoomLevels: {
+        default: 6,
+      },
     },
     datasetsConfig: [
       {
@@ -64,9 +66,11 @@ const dataviews: Dataview[] = [
     config: {
       type: 'FOURWINGS_TILE_CLUSTER',
       color: '#9AEEFF',
-      icon: 'port_visit',
-      maxCountryZoomCluster: 4,
-      maxZoomCluster: 8,
+      clusterMaxZoomLevels: {
+        country: 3,
+        // port: 6,
+        default: 8,
+      },
     },
     datasetsConfig: [
       {

diff --git a/libs/api-types/src/dataviews.ts b/libs/api-types/src/dataviews.ts
@@ -51,6 +51,10 @@ export type DataviewSublayerConfig = {
   maxZoom?: number
 }
 
+export type FourwingsGeolocation = 'country' | 'port' | 'default'
+
+export type ClusterMaxZoomLevelConfig = Partial<Record<FourwingsGeolocation, number>>
+
 export interface DataviewConfig<Type = DataviewType> {
   /** Type to define what kind of layer to render, ex: fourwings, context, draw... */
   type?: Type
@@ -96,7 +100,7 @@ export interface DataviewConfig<Type = DataviewType> {
   locale?: Locale
   dynamicBreaks?: boolean
   maxZoom?: number
-  maxCountryZoomCluster?: number
+  clusterMaxZoomLevels?: ClusterMaxZoomLevelConfig
   maxZoomCluster?: number
   icon?: string
   layers?: DataviewContexLayerConfig[]

diff --git a/libs/deck-layer-composer/src/resolvers/clusters.ts b/libs/deck-layer-composer/src/resolvers/clusters.ts
@@ -5,7 +5,7 @@ import {
   UrlDataviewInstance,
 } from '@globalfishingwatch/dataviews-client'
 import {
-  ClusterEventType,
+  FourwingsClusterEventType,
   FourwingsClustersLayerProps,
   getUTCDateTime,
 } from '@globalfishingwatch/deck-layers'
@@ -94,8 +94,7 @@ export const resolveDeckFourwingsClustersLayerProps: DeckResolverFunction<
     endTime,
     visible: dataview.config?.visible ?? true,
     tilesUrl: resolveEndpoint(dataset, datasetConfig, { absolute: true }) || '',
-    maxCountryClusterZoom: dataview.config?.maxCountryZoomCluster,
-    maxProximityClusterZoom: dataview.config?.maxZoomCluster,
-    icon: dataview.config?.icon as ClusterEventType,
+    clusterMaxZoomLevels: dataview.config?.clusterMaxZoomLevels,
+    eventType: dataset.subcategory as FourwingsClusterEventType,
   }
 }
diff --git a/libs/deck-layers/src/layers/fourwings/clusters/FourwingsClustersLayer.ts b/libs/deck-layers/src/layers/fourwings/clusters/FourwingsClustersLayer.ts
@@ -17,6 +17,7 @@ import { ScalePower, scaleSqrt } from 'd3-scale'
 import { max } from 'simple-statistics'
 import { GFWAPI, ParsedAPIError } from '@globalfishingwatch/api-client'
 import { FourwingsClustersLoader } from '@globalfishingwatch/deck-loaders'
+import { FourwingsGeolocation } from '@globalfishingwatch/api-types'
 import { PATH_BASENAME } from '../../layers.config'
 import {
   DEFAULT_BACKGROUND_COLOR,
@@ -41,7 +42,7 @@ import {
   FourwingsPointFeature,
 } from './fourwings-clusters.types'
 
-type ClusterMode = 'positions' | 'country' | 'proximity'
+type ClusterMode = FourwingsGeolocation | 'positions'
 
 type FourwingsClustersTileLayerState = {
   error: string
@@ -54,8 +55,13 @@ type FourwingsClustersTileLayerState = {
 
 const defaultProps: DefaultProps<FourwingsClustersLayerProps> = {
   tilesUrl: HEATMAP_API_TILES_URL,
+  clusterMaxZoomLevels: {
+    default: MAX_ZOOM_TO_CLUSTER_POINTS,
+  },
 }
 
+const GEOLOCATION_PRIORITY: FourwingsGeolocation[] = ['country', 'port', 'default']
+
 const ICON_SIZE: Record<FourwingsClusterEventType, number> = {
   encounter: 16,
   loitering: 16,
@@ -86,24 +92,18 @@ export class FourwingsClustersLayer extends CompositeLayer<
   }
 
   get clusterMode(): ClusterMode {
-    if (
-      this.props.maxCountryClusterZoom !== undefined &&
-      this.context.viewport.zoom <= this.props.maxCountryClusterZoom + 0.5
-    ) {
-      console.log('country')
-
-      return 'country'
-    }
-    if (
-      this.props.maxProximityClusterZoom !== undefined &&
-      this.context.viewport.zoom <=
-        (this.props.maxProximityClusterZoom || MAX_ZOOM_TO_CLUSTER_POINTS) + 0.5
-    ) {
-      console.log('proximity')
-      return 'proximity'
+    const { clusterMaxZoomLevels } = this.props
+    let clusterMode: ClusterMode = 'positions'
+    for (const geolocation of GEOLOCATION_PRIORITY) {
+      if (
+        clusterMaxZoomLevels?.[geolocation] !== undefined &&
+        Math.floor(this.context.viewport.zoom) <= clusterMaxZoomLevels[geolocation]
+      ) {
+        clusterMode = geolocation
+        break
+      }
     }
-    console.log('positions')
-    return 'positions'
+    return clusterMode
   }
 
   getError(): string {
@@ -117,7 +117,7 @@ export class FourwingsClustersLayer extends CompositeLayer<
       viewportLoaded: false,
       clusterIndex: new Supercluster({
         radius: 70,
-        maxZoom: Math.floor(this.props.maxProximityClusterZoom || MAX_ZOOM_TO_CLUSTER_POINTS),
+        maxZoom: Math.floor(this.props.clusterMaxZoomLevels?.default || MAX_ZOOM_TO_CLUSTER_POINTS),
         reduce: (accumulated, props) => {
           accumulated.count += props.count
         },
@@ -309,21 +309,14 @@ export class FourwingsClustersLayer extends CompositeLayer<
       return null
     }
     let url = getURLFromTemplate(tile.url!, tile)
-    if (this.clusterMode === 'country') {
-      url = url
-        ?.replace('{{type}}', 'heatmap')
-        .concat(`&format=4WINGS&temporal-aggregation=true&geolocation=country`)
-      return this._fetchClusters(url!, { signal: tile.signal, tile })
-    }
-    if (this.clusterMode === 'proximity') {
-      url = url
-        ?.replace('{{type}}', 'heatmap')
-        .concat(`&format=4WINGS&temporal-aggregation=true&geolocation=default`)
-      return this._fetchClusters(url!, { signal: tile.signal, tile })
+    if (this.clusterMode === 'positions') {
+      url = url?.replace('{{type}}', 'position').concat(`&format=MVT`)
+      return this._fetchPositions(url!, { signal: tile.signal })
     }
-    // this.clusterMode === 'positions'
-    url = url?.replace('{{type}}', 'position').concat(`&format=MVT`)
-    return this._fetchPositions(url!, { signal: tile.signal })
+    url = url
+      ?.replace('{{type}}', 'heatmap')
+      .concat(`&format=4WINGS&temporal-aggregation=true&geolocation=${this.clusterMode}`)
+    return this._fetchClusters(url!, { signal: tile.signal, tile })
   }
 
   _getPosition = (d: FourwingsClusterFeature) => {
@@ -353,7 +346,7 @@ export class FourwingsClustersLayer extends CompositeLayer<
   }
 
   renderLayers(): Layer<{}> | LayersList | null {
-    const { color, tilesUrl, icon = 'encounter' } = this.props
+    const { color, tilesUrl, eventType = 'encounter' } = this.props
     const { clusters, points, radiusScale } = this.state
     return [
       new TileLayer<FourwingsPointFeature, any>(this.props, {
@@ -371,11 +364,11 @@ export class FourwingsClustersLayer extends CompositeLayer<
         id: `${this.props.id}-${POINTS_LAYER_ID}-icons`,
         data: points,
         getPosition: this._getPosition,
-        getSize: ICON_SIZE[icon],
+        getSize: ICON_SIZE[eventType],
         sizeUnits: 'pixels',
         iconAtlas: `${PATH_BASENAME}/events-color-sprite.png`,
         iconMapping: ICON_MAPPING,
-        getIcon: () => icon,
+        getIcon: () => eventType,
         getPolygonOffset: (params: any) => getLayerGroupOffset(LayerGroup.Cluster, params),
         pickable: true,
       }),

diff --git a/libs/deck-layers/src/layers/fourwings/clusters/fourwings-clusters.types.ts b/libs/deck-layers/src/layers/fourwings/clusters/fourwings-clusters.types.ts
@@ -2,7 +2,7 @@ import { ClusterFeature, PointFeature } from 'supercluster'
 import { PickingInfo } from '@deck.gl/core'
 import { Tile2DHeader } from '@deck.gl/geo-layers/dist/tileset-2d'
 import { ClusterEventType } from 'libs/deck-layers/src/layers/cluster'
-import { EventTypes } from '@globalfishingwatch/api-types'
+import { ClusterMaxZoomLevelConfig, EventTypes } from '@globalfishingwatch/api-types'
 import { DeckLayerProps, DeckPickingObject } from '../../../types'
 
 export type FourwingsClusterEventType =
@@ -19,9 +19,7 @@ export type FourwingsClustersLayerProps = DeckLayerProps<{
   eventType?: FourwingsClusterEventType
   tilesUrl: string
   visible: boolean
-  icon?: ClusterEventType
-  maxCountryClusterZoom?: number
-  maxProximityClusterZoom?: number
+  clusterMaxZoomLevels?: ClusterMaxZoomLevelConfig
 }>
 
 export type FourwingsClusterProperties = {