Merge pull request #2624 from GlobalFishingWatch/deck-migration/track…

…s-filters

vessel track filters

apps/fishing-map/features/datasets/datasets.mock.ts

@@ -1,5 +1,211 @@
 import { Dataset } from '@globalfishingwatch/api-types'
 
-export const datasets: Dataset[] = []
+export const datasets: Dataset[] = [
+  {
+    alias: ['public-global-all-tracks:latest'],
+    id: 'public-global-all-tracks:v20231026',
+    name: 'Tracks',
+    type: 'tracks:v1',
+    description: 'The dataset contains the tracks from all vessels (AIS) - Version 20231026',
+    startDate: '2012-01-01T00:00:00.000Z',
+    endDate: '2024-01-14T00:00:00.000Z',
+    unit: 'NA',
+    status: 'done',
+    importLogs: null,
+    category: 'vessel',
+    subcategory: 'track',
+    source: 'Global Fishing Watch - AIS',
+    ownerId: 0,
+    ownerType: 'super-user',
+    configuration: {
+      id: '',
+      max: 0,
+      min: 0,
+      ttl: 0,
+      band: '',
+      srid: null,
+      scale: 0,
+      bucket: 'api-tracks-us-central1',
+      fields: null,
+      folder: 'public-global-all-tracks:v20231026',
+      format: null,
+      images: null,
+      offset: 0,
+      source: 'gcs',
+      maxZoom: 12,
+      filePath: null,
+      function: null,
+      latitude: null,
+      numBytes: null,
+      gcsFolder: '',
+      intervals: [],
+      longitude: null,
+      numLayers: null,
+      timestamp: null,
+      translate: true,
+      idProperty: '',
+      indexBoost: null,
+      emailGroups: [],
+      geometryType: null,
+      insightSources: [],
+      configurationUI: null,
+      valueProperties: null,
+      propertyToInclude: null,
+      disableInteraction: false,
+      apiSupportedVersions: ['v2', 'v3'],
+      propertyToIncludeRange: null,
+    },
+    relatedDatasets: [],
+    schema: {
+      lat: {
+        type: 'number',
+      },
+      lon: {
+        type: 'number',
+      },
+      flag: {
+        type: 'string',
+      },
+      night: {
+        type: 'boolean',
+      },
+      speed: {
+        enum: [0, 20],
+        type: 'range',
+      },
+      course: {
+        type: 'number',
+      },
+      seg_id: {
+        type: 'string',
+      },
+      elevation: {
+        enum: [-2000, 0],
+        type: 'range',
+      },
+      timestamp: {
+        type: 'string',
+        format: 'date-time',
+      },
+      distance_from_port: {
+        min: 0,
+        type: 'number',
+      },
+      distance_from_shore: {
+        min: 0,
+        type: 'number',
+      },
+    },
+    fieldsAllowed: ['lat', 'lon', 'timestamp', 'latlon', 'seg_id', 'speed', 'elevation'],
+    createdAt: '2023-10-17T12:34:21.417Z',
+    endpoints: [
+      {
+        id: 'tracks',
+        description: 'Endpoint to retrieve vessel track',
+        downloadable: true,
+        method: 'GET',
+        pathTemplate: '/v3/vessels/{{vesselId}}/tracks',
+        params: [
+          {
+            label: 'vessel id',
+            id: 'vesselId',
+            type: 'string',
+          },
+        ],
+        query: [
+          {
+            label: 'dataset',
+            id: 'dataset',
+            type: 'string',
+            required: true,
+            array: false,
+          },
+          {
+            label: 'start-date',
+            id: 'start-date',
+            type: 'Date ISO',
+            required: false,
+          },
+          {
+            label: 'end-date',
+            id: 'end-date',
+            type: 'Date ISO',
+            required: false,
+          },
+          {
+            label: 'binary',
+            id: 'binary',
+            type: 'boolean',
+            default: true,
+          },
+          {
+            id: 'fields',
+            type: 'enum',
+            label: 'fields',
+            array: true,
+            enum: ['LAT', 'LON', 'TIMESTAMP', 'SPEED', 'COURSE', 'ELEVATION'],
+          },
+          {
+            label: 'format',
+            id: 'format',
+            type: 'enum',
+            enum: ['POINT', 'LINES', 'VALUEARRAY'],
+            default: 'LINES',
+            description:
+              'Specific encoding format to use for the track. Possible values lines, points or valueArray. valueArray: is a custom compact format, an array with all the fields serialized. The format is further explained in this issue: valueArray format. lines: Geojson with a single LineString feature containing all the points in the track points: Geojson with a FeatureCollection containing a Point feature for every point in the track',
+          },
+          {
+            id: 'distance-fishing',
+            type: 'number',
+            label: 'Distance fishing',
+            required: false,
+          },
+          {
+            id: 'bearing-val-fishing',
+            type: 'number',
+            label: 'Bearing value fishing',
+            required: false,
+          },
+          {
+            id: 'change-speed-fishing',
+            type: 'number',
+            label: 'Change speed fishing',
+            required: false,
+          },
+          {
+            id: 'min-accuracy-fishing',
+            type: 'number',
+            label: 'Minimun accuracy fishing',
+            required: false,
+          },
+          {
+            id: 'distance-transit',
+            type: 'number',
+            label: 'Distance transit',
+            required: false,
+          },
+          {
+            id: 'bearing-val-transit',
+            type: 'number',
+            label: 'Bearing value transit',
+            required: false,
+          },
+          {
+            id: 'change-speed-transit',
+            type: 'number',
+            label: 'Change speed transit',
+            required: false,
+          },
+          {
+            id: 'min-accuracy-transit',
+            type: 'number',
+            label: 'Minimun accuracy transit',
+            required: false,
+          },
+        ],
+      },
+    ],
+  },
+]
 
 export default datasets

apps/fishing-map/features/datasets/datasets.utils.ts

@@ -90,6 +90,7 @@ export type SupportedActivityDatasetSchema =
 export type SupportedEnvDatasetSchema =
   | 'type'
   | 'speed'
+  | 'elevation'
   | 'flag'
   | 'vessel_type'
   | 'Height'
@@ -540,7 +541,7 @@ export const datasetHasSchemaFields = (dataset: Dataset, schema: SupportedDatase
   if (!schemaConfig) {
     return false
   }
-  if (schemaConfig.type === 'array') {
+  if (schemaConfig.type === 'array' || schemaConfig.type === 'range') {
     const schemaEnum = schemaConfig?.enum || schemaConfig?.items?.enum
     return schemaEnum !== undefined && schemaEnum.length > 0
   }
@@ -640,6 +641,9 @@ export type SchemaFieldSelection = {
 export const VESSEL_GROUPS_MODAL_ID = 'vesselGroupsOpenModalId'
 
 export const getActiveDatasetsInDataview = (dataview: SchemaFieldDataview) => {
+  if (!dataview) {
+    return [] as Dataset[]
+  }
   if (dataview.category === DataviewCategory.User) {
     return dataview.datasets
   }
@@ -819,13 +823,11 @@ export const getFiltersBySchema = (
   const optionsSelected = getSchemaOptionsSelectedInDataview(dataview, schema, options)
   const unit = getSchemaFilterUnitInDataview(dataview, schema)
   const datasetsWithSchema = getSupportedSchemaFieldsDatasets(dataview, schema)!?.map((d) => d.id)
-  const activeDatasets = getActiveDatasetsInActivityDataviews([
-    dataview as UrlDataviewInstance<DataviewType>,
-  ])
+  const activeDatasets = getActiveDatasetsInDataview(dataview)?.map((d) => d.id)
   const hasDatasetsWithSchema =
     compatibilityOperation === 'some'
-      ? activeDatasets.some((d) => datasetsWithSchema.includes(d))
-      : activeDatasets.every((d) => datasetsWithSchema.includes(d))
+      ? activeDatasets?.some((d) => datasetsWithSchema.includes(d))
+      : activeDatasets?.every((d) => datasetsWithSchema.includes(d))
   const incompatibleFilterSelection = getIncompatibleFilterSelection(dataview, schema)!?.length > 0
   const disabled = !hasDatasetsWithSchema || incompatibleFilterSelection
   const datasetId = removeDatasetVersion(getActiveDatasetsInDataview(dataview)!?.[0]?.id)
@@ -872,10 +874,16 @@ export const getSchemaFiltersInDataview = (
         })
       : fieldsAllowed
   const filtersAllowed = fielsAllowedOrdered.map((id) => {
-    return getFiltersBySchema(dataview, id, { vesselGroups })
+    return getFiltersBySchema(dataview, id, {
+      vesselGroups,
+      compatibilityOperation: id === 'speed' || id === 'elevation' ? 'some' : 'every',
+    })
   })
   const filtersDisabled = fieldsDisabled.map((id) => {
-    return getFiltersBySchema(dataview, id, { vesselGroups })
+    return getFiltersBySchema(dataview, id, {
+      vesselGroups,
+      compatibilityOperation: id === 'speed' || id === 'elevation' ? 'some' : 'every',
+    })
   })
   return {
     filtersAllowed,

apps/fishing-map/features/dataviews/selectors/dataviews.instances.selectors.ts

@@ -7,6 +7,7 @@ import {
   DataviewInstance,
 } from '@globalfishingwatch/api-types'
 import {
+  extendDataviewDatasetConfig,
   GetDatasetConfigsCallbacks,
   getResources,
   mergeWorkspaceUrlDataviewInstances,
@@ -23,10 +24,7 @@ import {
   getVesselDataviewInstanceDatasetConfig,
   VESSEL_DATAVIEW_INSTANCE_PREFIX,
 } from 'features/dataviews/dataviews.utils'
-import {
-  selectTrackThinningConfig,
-  selectTrackChunksConfig,
-} from 'features/resources/resources.selectors.thinning'
+import { selectTrackThinningConfig } from 'features/resources/resources.selectors.thinning'
 import {
   infoDatasetConfigsCallback,
   trackDatasetConfigsCallback,
@@ -131,9 +129,25 @@ export const selectDataviewInstancesMergedOrdered = createSelector(
   }
 )
 
+export const selectTimebarGraphSelector = selectWorkspaceStateProperty('timebarGraph')
+
 export const selectAllDataviewInstancesResolved = createSelector(
-  [selectDataviewInstancesMergedOrdered, selectAllDataviews, selectAllDatasets, selectUserLogged],
-  (dataviewInstances, dataviews, datasets, loggedUser): UrlDataviewInstance[] | undefined => {
+  [
+    selectDataviewInstancesMergedOrdered,
+    selectAllDataviews,
+    selectAllDatasets,
+    selectUserLogged,
+    selectTrackThinningConfig,
+    selectIsGuestUser,
+  ],
+  (
+    dataviewInstances,
+    dataviews,
+    datasets,
+    loggedUser,
+    thinningConfig,
+    guestUser
+  ): UrlDataviewInstance[] | undefined => {
     if (!dataviews?.length || !datasets?.length || !dataviewInstances?.length) {
       return EMPTY_ARRAY
     }
@@ -171,7 +185,16 @@ export const selectAllDataviewInstancesResolved = createSelector(
       dataviews,
       datasets
     )
-    return dataviewInstancesResolved
+    const callbacks: GetDatasetConfigsCallbacks = {
+      track: trackDatasetConfigsCallback(thinningConfig),
+      // events: eventsDatasetConfigsCallback,
+      info: infoDatasetConfigsCallback(guestUser),
+    }
+    const dataviewInstancesResolvedExtended = extendDataviewDatasetConfig(
+      dataviewInstancesResolved,
+      callbacks
+    )
+    return dataviewInstancesResolvedExtended
   }
 )
 
@@ -188,26 +211,14 @@ export const selectMarineManagerDataviewInstanceResolved = createSelector(
   }
 )
 
-export const selectTimebarGraphSelector = selectWorkspaceStateProperty('timebarGraph')
 /**
  * Calls getResources to prepare track dataviews' datasetConfigs.
  * Injects app-specific logic by using getResources's callback
  */
 export const selectDataviewsResources = createSelector(
-  [
-    selectAllDataviewInstancesResolved,
-    selectTrackThinningConfig,
-    selectTrackChunksConfig,
-    selectTimebarGraphSelector,
-    selectIsGuestUser,
-  ],
-  (dataviewInstances, thinningConfig, chunks, timebarGraph, guestUser) => {
-    const callbacks: GetDatasetConfigsCallbacks = {
-      track: trackDatasetConfigsCallback(thinningConfig, timebarGraph),
-      // events: eventsDatasetConfigsCallback,
-      info: infoDatasetConfigsCallback(guestUser),
-    }
-    return getResources(dataviewInstances || [], callbacks)
+  [selectAllDataviewInstancesResolved],
+  (dataviewInstances) => {
+    return getResources(dataviewInstances || [])
   }
 )
 

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

@@ -57,7 +57,7 @@ export const getMapCoordinatesFromBounds = (
   params: FitBoundsParams = {}
 ) => {
   const { mapWidth, mapHeight, padding = 60 } = params
-  const width = mapWidth || (map ? map.width : window.innerWidth / 2)
+  const width = mapWidth || (map?.width ? map.width : window.innerWidth / 2)
   const height =
     mapHeight || (map ? map.height : window.innerHeight - TIMEBAR_HEIGHT - FOOTER_HEIGHT)
   const { latitude, longitude, zoom } = fitBounds({