take graph filters from instance

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

@@ -26,7 +26,10 @@ import {
   selectEnvironmentVisualizationMode,
 } from 'features/app/selectors/app.selectors'
 import { selectTimebarGraph } from 'features/app/selectors/app.timebar.selectors'
-import { selectDataviewInstancesResolvedVisible , selectTrackDataviews } from 'features/dataviews/selectors/dataviews.instances.selectors'
+import {
+  selectDataviewInstancesResolvedVisible,
+  selectTrackDataviews,
+} from 'features/dataviews/selectors/dataviews.instances.selectors'
 import {
   selectActivityMergedDataviewId,
   selectDetectionsMergedDataviewId,
@@ -37,7 +40,7 @@ import {
   selectTimeComparisonValues,
 } from 'features/reports/areas/area-reports.selectors'
 import { useTimerangeConnect } from 'features/timebar/timebar.hooks'
-import { selectHighlightedEvents,selectHighlightedTime } from 'features/timebar/timebar.slice'
+import { selectHighlightedEvents, selectHighlightedTime } from 'features/timebar/timebar.slice'
 import { useVesselTracksLayers } from 'features/timebar/timebar-vessel.hooks'
 import {
   selectWorkspaceStatus,
@@ -68,8 +71,8 @@ export const useActivityDataviewId = (dataview: UrlDataviewInstance) => {
     dataview.category === DataviewCategory.Environment
       ? dataview.id
       : dataview.category === DataviewCategory.Detections
-      ? detectionsMergedDataviewId
-      : activityMergedDataviewId
+        ? detectionsMergedDataviewId
+        : activityMergedDataviewId
   return dataviewId
 }
 
@@ -80,37 +83,35 @@ export const useTimebarTracksGraphExtent = () => {
   const areAllVesselsLoaded = vessels.every((vessel) => vessel.loaded)
   const vesselsHash = vessels.map((v) => v.id).join()
 
-  return useMemo(() => {
-    if (vesselsTimebarGraph === 'none' || !vessels?.length || !areAllVesselsLoaded) {
-      return
-    }
-    const vesselExtents = vessels.flatMap((v) =>
-      (v.instance as VesselLayer).getVesselTrackGraphExtent(vesselsTimebarGraph)
-    )
-    if (!vesselExtents.length) {
-      return
-    }
-
-    return getVesselGraphExtentClamped(
-      extent(vesselExtents),
-      vesselsTimebarGraph
-    ) as VesselTrackGraphExtent
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [areAllVesselsLoaded, vesselsHash, vesselsTimebarGraph])
+  if (vesselsTimebarGraph === 'none' || !vessels?.length) {
+    return
+  }
+  const isLoaded = vessels.every((vessel) => vessel.instance.isLoaded)
+  if (!isLoaded) {
+    return
+  }
+  const extents = getVesselGraphExtentClamped(
+    extent(
+      vessels.flatMap((v) =>
+        (v.instance as VesselLayer).getVesselTrackGraphExtent(vesselsTimebarGraph)
+      )
+    ),
+    vesselsTimebarGraph
+  )
+  return extents as VesselTrackGraphExtent
 }
 
 export const useTimebarTracksGraphSteps = () => {
   const extent = useTimebarTracksGraphExtent()
+  console.log('extent:', extent)
   const vesselsTimebarGraph = useSelector(selectTimebarGraph)
-  return useMemo(() => {
-    if (
-      !extent?.length ||
-      (vesselsTimebarGraph !== 'speed' && vesselsTimebarGraph !== 'elevation')
-    ) {
-      return []
-    }
-    return generateVesselGraphSteps(extent, vesselsTimebarGraph)
-  }, [extent, vesselsTimebarGraph])
+  if (!extent?.length || (vesselsTimebarGraph !== 'speed' && vesselsTimebarGraph !== 'elevation')) {
+    console.log('entra aquí')
+
+    return []
+  }
+  console.log('sigue')
+  return generateVesselGraphSteps(extent, vesselsTimebarGraph)
 }
 
 export const useGlobalConfigConnect = () => {

apps/fishing-map/features/timebar/timebar-vessel.hooks.ts

@@ -236,9 +236,7 @@ export const useTimebarVesselTracksGraph = () => {
                 ? getTrackGraphSpeedHighlighterLabel
                 : getTrackGraphElevationighlighterLabel,
             getHighlighterIcon: 'vessel',
-            filters: {
-              ...(instance instanceof VesselLayer ? instance.getFilters() : {}),
-            },
+            filters: instance instanceof VesselLayer ? instance.getFilters() : {},
           }
 
           const segments =
@@ -275,68 +273,69 @@ export const useTimebarVesselTracksGraph = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tracksLoaded, timebarGraph, tracksGraph])
 
-  const tracksFiltersHash = useMemo(() => {
-    return activeVesselDataviews
-      .flatMap((dataview) => [
-        (dataview.config?.filters?.speed || []).join(),
-        (dataview.config?.filters?.elevation || []).join(),
-      ])
-      .join(',')
-  }, [activeVesselDataviews])
-
-  useEffect(() => {
-    setVesselTracksGraph((tracksGraph) =>
-      tracksGraph?.map((graph) => {
-        const dataview = activeVesselDataviews.find((dataview) => dataview.id === graph.id)
-        if (!dataview) {
-          return graph
-        }
-        const { speed, elevation } = dataview.config?.filters || {}
-        return {
-          ...graph,
-          filters: {
-            minSpeedFilter: speed?.[0],
-            maxSpeedFilter: speed?.[1],
-            minElevationFilter: elevation?.[0],
-            maxElevationFilter: elevation?.[1],
-          },
-        } as TimebarChartItem
-      })
-    )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tracksFiltersHash])
-
-  // TODO: debug why the trackLayers is updated but the filters not
-  // 👀using the workaround above to take the filter from the dataview for now
-  // ⚠ but it should be taken from the layer itself as the source of truth
-
   // const tracksFiltersHash = useMemo(() => {
-  //   return trackLayers
-  //     .flatMap(({ instance }) => [
-  //       instance instanceof VesselLayer ? Object.values(instance.getFilters()) : [],
+  //   return activeVesselDataviews
+  //     .flatMap((dataview) => [
+  //       (dataview.config?.filters?.speed || []).join(),
+  //       (dataview.config?.filters?.elevation || []).join(),
   //     ])
   //     .join(',')
-  // }, [trackLayers])
+  // }, [activeVesselDataviews])
 
   // useEffect(() => {
-  //   setVesselTracksGraph((tracksGraph) => {
-  //     return tracksGraph?.map((graph) => {
-  //       const trackLayerInstance = trackLayers.find(
-  //         (layer) => layer.instance?.id === graph.id
-  //       )?.instance
-  //       if (!trackLayerInstance) {
+  //   setVesselTracksGraph((tracksGraph) =>
+  //     tracksGraph?.map((graph) => {
+  //       const dataview = activeVesselDataviews.find((dataview) => dataview.id === graph.id)
+  //       if (!dataview) {
   //         return graph
   //       }
-  //       const filters =
-  //         trackLayerInstance instanceof VesselLayer ? trackLayerInstance.getFilters() : {}
+  //       const { speed, elevation } = dataview.config?.filters || {}
   //       return {
   //         ...graph,
-  //         filters,
+  //         filters: {
+  //           minSpeedFilter: speed?.[0],
+  //           maxSpeedFilter: speed?.[1],
+  //           minElevationFilter: elevation?.[0],
+  //           maxElevationFilter: elevation?.[1],
+  //         },
   //       } as TimebarChartItem
   //     })
-  //   })
+  //   )
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
   // }, [tracksFiltersHash])
 
+  // TODO: debug why the trackLayers is updated but the filters not
+  // 👀using the workaround above to take the filter from the dataview for now
+  // ⚠ but it should be taken from the layer itself as the source of truth
+
+  const tracksFiltersHash = useMemo(() => {
+    return trackLayers
+      .flatMap(({ instance }) => [
+        instance instanceof VesselLayer ? Object.values(instance.getFilters() || {}) : [],
+      ])
+      .join(',')
+  }, [trackLayers])
+
+  useEffect(() => {
+    setVesselTracksGraph((tracksGraph) => {
+      return tracksGraph?.map((graph) => {
+        const trackLayerInstance = trackLayers.find(
+          (layer) => layer.instance?.id === graph.id
+        )?.instance
+        if (!trackLayerInstance) {
+          return graph
+        }
+        const filters =
+          trackLayerInstance instanceof VesselLayer ? trackLayerInstance.getFilters() : {}
+        return {
+          ...graph,
+          filters,
+        } as TimebarChartItem
+      })
+    })
+  }, [tracksFiltersHash])
+
+  console.log('tracksGraph:', tracksGraph)
   return tracksGraph
 }
 

apps/fishing-map/features/workspace/vessels/VesselTracksLegend.tsx

@@ -14,6 +14,7 @@ import MapLegendPlaceholder from '../common/MapLegendPlaceholder'
 function VesselTracksLegend(): React.ReactElement<any> | null {
   const { t } = useTranslation()
   const steps = useTimebarTracksGraphSteps()
+  console.log('VesselTracksLegend steps:', steps)
   const vesselsTimebarGraph = useSelector(selectTimebarGraph)
 
   if (vesselsTimebarGraph === 'none') {

libs/deck-layer-composer/src/resolvers/vessels.ts

@@ -1,3 +1,4 @@
+import type { ThinningLevels } from '@globalfishingwatch/api-client'
 import { API_GATEWAY, GFWAPI } from '@globalfishingwatch/api-client'
 import type { EventTypes } from '@globalfishingwatch/api-types'
 import { DatasetTypes } from '@globalfishingwatch/api-types'
@@ -24,14 +25,17 @@ export const resolveDeckVesselLayerProps: DeckResolverFunction<VesselLayerProps>
     id: dataview.id,
     visible: dataview.config?.visible ?? true,
     category: dataview.category!,
-    name: dataview.config?.name,
+    name: dataview.config?.name ?? '',
     endTime: getUTCDateTime(end!).toMillis(),
     startTime: getUTCDateTime(start!).toMillis(),
     ...(trackUrl && {
       trackUrl: GFWAPI.generateUrl(trackUrl, { absolute: true }),
     }),
-    singleTrack: dataview.config?.singleTrack,
-    trackThinningZoomConfig: dataview.config?.trackThinningZoomConfig,
+    singleTrack: dataview.config?.singleTrack ?? false,
+    trackThinningZoomConfig: dataview.config?.trackThinningZoomConfig as Record<
+      number,
+      ThinningLevels
+    >,
     trackGraphExtent: globalConfig.trackGraphExtent,
     color: hexToDeckColor(dataview.config?.color as string),
     colorBy: globalConfig.vesselsColorBy,
@@ -44,14 +48,16 @@ export const resolveDeckVesselLayerProps: DeckResolverFunction<VesselLayerProps>
     }),
     visibleEvents: visibleEvents,
     highlightEventIds,
-    ...(dataview.config?.filters?.['speed']?.length && {
-      minSpeedFilter: parseFloat(dataview.config?.filters?.['speed'][0]),
-      maxSpeedFilter: parseFloat(dataview.config?.filters?.['speed'][1]),
-    }),
-    ...(dataview.config?.filters?.['elevation']?.length && {
-      minElevationFilter: parseFloat(dataview.config?.filters?.['elevation'][0]),
-      maxElevationFilter: parseFloat(dataview.config?.filters?.['elevation'][1]),
-    }),
+    filters: {
+      ...(dataview.config?.filters?.['speed']?.length && {
+        minSpeedFilter: parseFloat(dataview.config?.filters?.['speed'][0]),
+        maxSpeedFilter: parseFloat(dataview.config?.filters?.['speed'][1]),
+      }),
+      ...(dataview.config?.filters?.['elevation']?.length && {
+        minElevationFilter: parseFloat(dataview.config?.filters?.['elevation'][0]),
+        maxElevationFilter: parseFloat(dataview.config?.filters?.['elevation'][1]),
+      }),
+    },
     ...(highlightedTime?.start && {
       highlightStartTime: getUTCDateTime(highlightedTime?.start).toMillis(),
     }),

libs/deck-layers/src/layers/vessel/VesselLayer.ts

@@ -73,7 +73,7 @@ export type VesselLayerProps = DeckLayerProps<
 
 type VesselLayerState = {
   fontLoaded: boolean
-  colorDirty: boolean
+  stateDirty: boolean
   errors: {
     [key in EventTypes | 'track']?: string
   }
@@ -92,23 +92,27 @@ export class VesselLayer extends CompositeLayer<VesselLayerProps & LayerProps> {
       })
     }
     this.state = {
-      colorDirty: false,
+      stateDirty: false,
       fontLoaded,
       errors: {},
     }
   }
 
   get isLoaded(): boolean {
-    return this.getAllSublayersLoaded() && this.state ? !this.state.colorDirty : false
+    return this.getAllSublayersLoaded() && this.state ? !this.state.stateDirty : false
   }
 
   updateState({ props, oldProps }: UpdateParameters<this>) {
+    const hasFilterChange =
+      Object.values(oldProps.filters || {}).join('') !== Object.values(props.filters || {}).join('')
+    const hasColorChange = oldProps.color?.join('') !== props.color.join('')
+
     // TODO:deck try to remove this workaround because we cannot find
     // why useTimebarVesselTracks is not updating on color change
-    if (oldProps.color?.join('') !== props.color.join('')) {
-      this.setState({ colorDirty: true })
+    if (hasColorChange || hasFilterChange) {
+      this.setState({ stateDirty: true })
       requestAnimationFrame(() => {
-        this.setState({ colorDirty: false })
+        this.setState({ stateDirty: false })
       })
     }
   }
@@ -186,11 +190,8 @@ export class VesselLayer extends CompositeLayer<VesselLayerProps & LayerProps> {
       color,
       highlightStartTime,
       highlightEndTime,
-      minSpeedFilter,
-      maxSpeedFilter,
+      filters,
       trackThinningZoomConfig,
-      minElevationFilter,
-      maxElevationFilter,
       trackGraphExtent,
       colorBy,
     } = this.props
@@ -236,10 +237,7 @@ export class VesselLayer extends CompositeLayer<VesselLayerProps & LayerProps> {
           endTime,
           highlightStartTime,
           highlightEndTime,
-          minSpeedFilter,
-          maxSpeedFilter,
-          minElevationFilter,
-          maxElevationFilter,
+          filters,
           getPolygonOffset: (params: any) => getLayerGroupOffset(LayerGroup.Track, params),
           onError: (e: any) => this.onSublayerError('track', e),
         } as _VesselTrackLayerProps)
@@ -472,13 +470,7 @@ export class VesselLayer extends CompositeLayer<VesselLayerProps & LayerProps> {
   }
 
   getFilters() {
-    const { minSpeedFilter, maxSpeedFilter, minElevationFilter, maxElevationFilter } = this.props
-    return {
-      minSpeedFilter,
-      maxSpeedFilter,
-      minElevationFilter,
-      maxElevationFilter,
-    }
+    return this.props.filters
   }
 
   getVesselsData() {