From 89abc69f733bb3694e68a6c5ca7d0415daa7313d Mon Sep 17 00:00:00 2001 From: satellitestudiodesign Date: Fri, 20 Sep 2024 11:22:42 +0200 Subject: [PATCH] clenup --- .../features/dataviews/dataviews.mock.ts | 18 +++-- libs/api-types/src/dataviews.ts | 6 +- .../src/resolvers/clusters.ts | 7 +- .../clusters/FourwingsClustersLayer.ts | 65 +++++++++---------- .../clusters/fourwings-clusters.types.ts | 6 +- 5 files changed, 50 insertions(+), 52 deletions(-) diff --git a/apps/fishing-map/features/dataviews/dataviews.mock.ts b/apps/fishing-map/features/dataviews/dataviews.mock.ts index 956977daad..fadcc43fa5 100644 --- 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 index f977d85d70..b600541580 100644 --- 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> + export interface DataviewConfig { /** Type to define what kind of layer to render, ex: fourwings, context, draw... */ type?: Type @@ -96,7 +100,7 @@ export interface DataviewConfig { 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 index 5625090e3f..a39d58ba67 100644 --- 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 index c0b42134ed..12e357c214 100644 --- 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 = { tilesUrl: HEATMAP_API_TILES_URL, + clusterMaxZoomLevels: { + default: MAX_ZOOM_TO_CLUSTER_POINTS, + }, } +const GEOLOCATION_PRIORITY: FourwingsGeolocation[] = ['country', 'port', 'default'] + const ICON_SIZE: Record = { 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(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 index 525cc0e13f..3e9bdd330c 100644 --- 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 = {