Merge pull request #2577 from GlobalFishingWatch:deck-migration/fourw…

…ings-static deck heatmap static layer
GlobalFishingWatch · Mar 25, 2024 · f057cc4 · f057cc4
2 parents 04403f0 + 2dfee2a
commit f057cc4
Show file tree

Hide file tree

Showing 17 changed files with 371 additions and 51 deletions.
diff --git a/apps/fishing-map/features/dataviews/selectors/dataviews.selectors.ts b/apps/fishing-map/features/dataviews/selectors/dataviews.selectors.ts
@@ -195,7 +195,7 @@ export const selectActiveActivityDataviews = createSelector(
 export const selectActivityMergedDataviewId = createSelector(
   [selectActiveActivityDataviews],
   (dataviews): string => {
-    return getMergedDataviewId(dataviews)
+    return dataviews?.length ? getMergedDataviewId(dataviews) : ''
   }
 )
 
@@ -219,7 +219,7 @@ export const selectActiveDetectionsDataviews = createSelector(
 export const selectDetectionsMergedDataviewId = createSelector(
   [selectActiveDetectionsDataviews],
   (dataviews): string => {
-    return getMergedDataviewId(dataviews)
+    return dataviews?.length ? getMergedDataviewId(dataviews) : ''
   }
 )
 

diff --git a/apps/fishing-map/features/timebar/TimebarActivityGraph.hooks.ts b/apps/fishing-map/features/timebar/TimebarActivityGraph.hooks.ts
@@ -28,7 +28,7 @@ export const useHeatmapActivityGraph = () => {
   const start = getUTCDate(timerange.start).getTime()
   const end = getUTCDate(timerange.end).getTime()
   const chunk = getChunk(start, end)
-  const id = getMergedDataviewId(dataviews)
+  const id = dataviews?.length ? getMergedDataviewId(dataviews) : ''
   const fourwingsActivityLayer = useGetDeckLayer<FourwingsLayer>(id)
   const { loaded, instance } = fourwingsActivityLayer || {}
   const heatmapActivity = useMemo(() => {

diff --git a/libs/data-transforms/src/features/filter-features-by-bounds.ts b/libs/data-transforms/src/features/filter-features-by-bounds.ts
@@ -1,5 +1,5 @@
 import type { GeoJSONFeature } from '@globalfishingwatch/maplibre-gl'
-import type { FourWingsFeature } from '@globalfishingwatch/deck-loaders'
+import type { FourWingsFeature, FourWingsStaticFeature } from '@globalfishingwatch/deck-loaders'
 
 export interface Bounds {
   north: number
@@ -9,7 +9,7 @@ export interface Bounds {
 }
 
 export const filterFeaturesByBounds = (
-  features: GeoJSONFeature[] | FourWingsFeature[],
+  features: GeoJSONFeature[] | FourWingsFeature[] | FourWingsStaticFeature[],
   bounds: Bounds
 ) => {
   if (!bounds) {

diff --git a/libs/deck-layer-composer/src/resolvers/dataviews.ts b/libs/deck-layer-composer/src/resolvers/dataviews.ts
@@ -72,6 +72,10 @@ function isEnvironmentalDataview(dataview: UrlDataviewInstance) {
   )
 }
 
+function isHeatmapStaticDataview(dataview: UrlDataviewInstance) {
+  return dataview.config?.type === DataviewType.HeatmapStatic
+}
+
 function isTrackDataview(dataview: UrlDataviewInstance) {
   return (
     dataview.category === DataviewCategory.Vessels && dataview.config?.type === DataviewType.Track
@@ -136,6 +140,8 @@ export function getFourwingsDataviewsResolved(
     config: {
       type: fourwingsDataviews[0]?.config?.type,
       sublayers: fourwingsDataviews.flatMap(getFourwingsDataviewSublayers),
+      minVisibleValue: fourwingsDataviews[0].config?.minVisibleValue,
+      maxVisibleValue: fourwingsDataviews[0].config?.maxVisibleValue,
       colorRampWhiteEnd,
       visualizationMode,
       comparisonMode,
@@ -224,7 +230,7 @@ export function getDataviewsResolved(
   const {
     activityDataviews,
     detectionDataviews,
-    environmentalDataviews,
+    fourwingsDataviews,
     trackDataviews,
     otherDataviews,
   } = dataviews.reduce(
@@ -233,8 +239,8 @@ export function getDataviewsResolved(
         acc.activityDataviews.push(dataview)
       } else if (isDetectionsDataview(dataview)) {
         acc.detectionDataviews.push(dataview)
-      } else if (isEnvironmentalDataview(dataview)) {
-        acc.environmentalDataviews.push(dataview)
+      } else if (isEnvironmentalDataview(dataview) || isHeatmapStaticDataview(dataview)) {
+        acc.fourwingsDataviews.push(dataview)
       } else if (isTrackDataview(dataview)) {
         acc.trackDataviews.push(dataview)
       } else {
@@ -245,14 +251,14 @@ export function getDataviewsResolved(
     {
       activityDataviews: [] as UrlDataviewInstance[],
       detectionDataviews: [] as UrlDataviewInstance[],
-      environmentalDataviews: [] as UrlDataviewInstance[],
+      fourwingsDataviews: [] as UrlDataviewInstance[],
       trackDataviews: [] as UrlDataviewInstance[],
       otherDataviews: [] as UrlDataviewInstance[],
     }
   )
 
   const singleHeatmapDataview =
-    [...activityDataviews, ...detectionDataviews, ...environmentalDataviews].length === 1
+    [...activityDataviews, ...detectionDataviews, ...fourwingsDataviews].length === 1
   const activityComparisonMode = activityDataviews.every((dataview) =>
     params.bivariateDataviews?.includes(dataview.id)
   )
@@ -280,17 +286,18 @@ export function getDataviewsResolved(
         colorRampWhiteEnd: singleHeatmapDataview,
       })
     : []
-  const environmentalDataviewsParsed = environmentalDataviews.flatMap(
+  const fourwingsDataviewsParsed = fourwingsDataviews.flatMap(
     (d) =>
       getFourwingsDataviewsResolved(d, {
-        colorRampWhiteEnd: singleHeatmapDataview,
+        colorRampWhiteEnd:
+          d.config?.type === DataviewType.HeatmapStatic ? false : singleHeatmapDataview,
       }) || []
   )
   const dataviewsMerged = [
     ...otherDataviews,
     ...mergedActivityDataview,
     ...mergedDetectionsDataview,
-    ...environmentalDataviewsParsed,
+    ...fourwingsDataviewsParsed,
     ...trackDataviews,
   ]
   return dataviewsMerged

diff --git a/libs/deck-layer-composer/src/resolvers/fourwings.ts b/libs/deck-layer-composer/src/resolvers/fourwings.ts
@@ -10,7 +10,12 @@ import {
   TIME_COMPARISON_NOT_SUPPORTED_INTERVALS,
   getUTCDateTime,
 } from '@globalfishingwatch/deck-layers'
-import { DatasetTypes, DataviewCategory, EndpointId } from '@globalfishingwatch/api-types'
+import {
+  DatasetTypes,
+  DataviewCategory,
+  DataviewType,
+  EndpointId,
+} from '@globalfishingwatch/api-types'
 import { ColorRampId } from '@globalfishingwatch/deck-layers'
 import { resolveEndpoint } from '@globalfishingwatch/datasets-client'
 import { getDataviewAvailableIntervals } from './dataviews'
@@ -90,13 +95,16 @@ export const resolveDeckFourwingsLayerProps = (
     id: dataview.id,
     minFrame: startTime,
     maxFrame: endTime,
+    static: dataview.config?.type === DataviewType.HeatmapStatic,
     resolution,
     sublayers,
     comparisonMode,
     visualizationMode,
     aggregationOperation,
     availableIntervals,
     hoveredFeatures: interactions,
+    minVisibleValue: dataview.config?.minVisibleValue,
+    maxVisibleValue: dataview.config?.maxVisibleValue,
     debug: dataview.config?.debug ?? false,
     visible: dataview.config?.visible ?? true,
     colorRampWhiteEnd: dataview.config?.colorRampWhiteEnd ?? false,

diff --git a/libs/deck-layer-composer/src/resolvers/index.ts b/libs/deck-layer-composer/src/resolvers/index.ts
@@ -36,7 +36,10 @@ export const dataviewToDeckLayer = (
     const deckLayerProps = resolveDeckBasemapLayerProps(dataview)
     return new BaseMapLayer(deckLayerProps)
   }
-  if (dataview.config?.type === DataviewType.HeatmapAnimated) {
+  if (
+    dataview.config?.type === DataviewType.HeatmapAnimated ||
+    dataview.config?.type === DataviewType.HeatmapStatic
+  ) {
     const deckLayerProps = resolveDeckFourwingsLayerProps(dataview, globalConfig, interactions)
     const layer = new FourwingsLayer(deckLayerProps)
     return layer

diff --git a/libs/deck-layers/src/layers/context/ContextLayer.ts b/libs/deck-layers/src/layers/context/ContextLayer.ts
@@ -10,7 +10,7 @@ import {
   LayerGroup,
   getLayerGroupOffset,
   getPickedFeatureToHighlight,
-  GFWContextLoader,
+  GFWMVTLoader,
   getMVTSublayerProps,
 } from '../../utils'
 import { API_PATH } from './context.config'
@@ -57,7 +57,7 @@ export class ContextLayer<PropsT = {}> extends CompositeLayer<
       new TileLayer<TileLayerProps>({
         id: `${this.id}-base-layer`,
         data: `${API_PATH}/${this.props.datasetId}/context-layers/{z}/{x}/{y}`,
-        loaders: [GFWContextLoader],
+        loaders: [GFWMVTLoader],
         maxRequests: 100,
         debounceTime: 500,
         renderSubLayers: (props: any) => {

diff --git a/libs/deck-layers/src/layers/context/EEZLayer.ts b/libs/deck-layers/src/layers/context/EEZLayer.ts
@@ -7,7 +7,7 @@ import {
   hexToDeckColor,
   LayerGroup,
   getLayerGroupOffset,
-  GFWContextLoader,
+  GFWMVTLoader,
   getMVTSublayerProps,
 } from '../../utils'
 import { ContextLayer } from './ContextLayer'
@@ -51,7 +51,7 @@ export class EEZLayer extends ContextLayer<EEZLayerProps> {
       new TileLayer<TileLayerProps>({
         id: `${this.id}-boundaries-layer`,
         data: `${API_PATH}/${this.props.boundariesDatasetId}/context-layers/{z}/{x}/{y}`,
-        loaders: [GFWContextLoader],
+        loaders: [GFWMVTLoader],
         maxRequests: 100,
         debounceTime: 500,
         renderSubLayers: (props: any) => {
@@ -77,7 +77,7 @@ export class EEZLayer extends ContextLayer<EEZLayerProps> {
       new TileLayer<TileLayerProps>({
         id: `${this.id}-base-layer`,
         data: `${API_PATH}/${this.props.areasDatasetId}/context-layers/{z}/{x}/{y}`,
-        loaders: [GFWContextLoader],
+        loaders: [GFWMVTLoader],
         maxRequests: 100,
         debounceTime: 500,
         renderSubLayers: (props: any) => {