add vessel group layer visualisation

GlobalFishingWatch · Sep 13, 2024 · d06131e · d06131e
1 parent 2e1021a
commit d06131e
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 2 deletions.
diff --git a/apps/fishing-map/features/app/selectors/app.timebar.selectors.ts b/apps/fishing-map/features/app/selectors/app.timebar.selectors.ts
@@ -40,6 +40,17 @@ export const selectTimebarSelectedEnvId = createSelector(
   }
 )
 
+const selectTimebarSelectedVGIdSelector = selectWorkspaceStateProperty('timebarSelectedVGId')
+export const selectTimebarSelectedVGId = createSelector(
+  [selectTimebarSelectedVGIdSelector, selectTimebarVisualisation, selectEnvironmentalDataviews],
+  (timebarSelectedVGId, timebarVisualisation, envDataviews): string => {
+    if (timebarVisualisation === TimebarVisualisations.Environment) {
+      return timebarSelectedVGId || envDataviews[0]?.id
+    }
+    return timebarSelectedVGId
+  }
+)
+
 const selectTimebarGraphSelector = selectWorkspaceStateProperty('timebarGraph')
 export const selectTimebarGraph = createSelector(
   [selectTimebarGraphSelector, selectActiveVesselsDataviews],

diff --git a/apps/fishing-map/features/dataviews/selectors/dataviews.selectors.ts b/apps/fishing-map/features/dataviews/selectors/dataviews.selectors.ts
@@ -29,7 +29,10 @@ import {
 } from 'routes/routes.selectors'
 import { getReportCategoryFromDataview } from 'features/area-report/reports.utils'
 import { selectViewOnlyVessel } from 'features/vessel/vessel.config.selectors'
-import { selectTimebarSelectedEnvId } from 'features/app/selectors/app.timebar.selectors'
+import {
+  selectTimebarSelectedEnvId,
+  selectTimebarSelectedVGId,
+} from 'features/app/selectors/app.timebar.selectors'
 import {
   selectActiveVesselsDataviews,
   selectAllDataviewInstancesResolved,
@@ -48,6 +51,7 @@ import {
   selectDetectionsDataviews,
   selectEnvironmentalDataviews,
   selectEventsDataviews,
+  selectVesselGroupDataviews,
 } from './dataviews.categories.selectors'
 
 const REPORT_ONLY_VISIBLE_LAYERS = [
@@ -217,6 +221,11 @@ export const selectActiveDetectionsDataviews = createSelector(
   (dataviews): UrlDataviewInstance[] => dataviews?.filter((d) => d.config?.visible)
 )
 
+export const selectActiveVesselGroupDataviews = createSelector(
+  [selectVesselGroupDataviews],
+  (dataviews): UrlDataviewInstance[] => dataviews?.filter((d) => d.config?.visible)
+)
+
 export const selectDetectionsMergedDataviewId = createSelector(
   [selectActiveDetectionsDataviews],
   (dataviews): string => {
@@ -323,15 +332,32 @@ export const selectActiveActivityDataviewsByVisualisation = (
       selectActiveReportActivityDataviews,
       selectActiveDetectionsDataviews,
       selectActiveHeatmapEnvironmentalDataviewsWithoutStatic,
+      selectActiveVesselGroupDataviews,
       selectTimebarSelectedEnvId,
+      selectTimebarSelectedVGId,
     ],
-    (activityDataviews, detectionsDataviews, environmentDataviews, timebarSelectedEnvId) => {
+    (
+      activityDataviews,
+      detectionsDataviews,
+      environmentDataviews,
+      vesselGroupDataviews,
+      timebarSelectedEnvId,
+      timebarSelectedVGId
+    ) => {
       if (timebarVisualisation === TimebarVisualisations.HeatmapActivity) {
         return activityDataviews
       }
       if (timebarVisualisation === TimebarVisualisations.HeatmapDetections) {
         return detectionsDataviews
       }
+      if (timebarVisualisation === TimebarVisualisations.VesselGroup) {
+        const selectedVGDataview =
+          timebarSelectedVGId && vesselGroupDataviews.find((d) => d.id === timebarSelectedVGId)
+
+        if (selectedVGDataview) {
+          return [selectedVGDataview]
+        } else if (vesselGroupDataviews[0]) return [vesselGroupDataviews[0]]
+      }
       const selectedEnvDataview =
         timebarSelectedEnvId && environmentDataviews.find((d) => d.id === timebarSelectedEnvId)
 

diff --git a/apps/fishing-map/features/timebar/Timebar.tsx b/apps/fishing-map/features/timebar/Timebar.tsx
@@ -408,6 +408,7 @@ const TimebarWrapper = () => {
           <Fragment>
             {(timebarVisualisation === TimebarVisualisations.HeatmapActivity ||
               timebarVisualisation === TimebarVisualisations.HeatmapDetections ||
+              timebarVisualisation === TimebarVisualisations.VesselGroup ||
               timebarVisualisation === TimebarVisualisations.Environment) && (
               <TimebarActivityGraph visualisation={timebarVisualisation} />
             )}

diff --git a/apps/fishing-map/features/timebar/TimebarSettings.tsx b/apps/fishing-map/features/timebar/TimebarSettings.tsx
@@ -12,6 +12,7 @@ import {
   selectActiveReportActivityDataviews,
   selectActiveDetectionsDataviews,
   selectActiveHeatmapEnvironmentalDataviewsWithoutStatic,
+  selectActiveVesselGroupDataviews,
 } from 'features/dataviews/selectors/dataviews.selectors'
 import { getEventLabel } from 'utils/analytics'
 import { ReactComponent as AreaIcon } from 'assets/icons/timebar-area.svg'
@@ -25,10 +26,12 @@ import {
   selectActiveTrackDataviews,
   selectActiveVesselsDataviews,
 } from 'features/dataviews/selectors/dataviews.instances.selectors'
+import { formatInfoField } from 'utils/info'
 import {
   useTimebarVisualisationConnect,
   useTimebarGraphConnect,
   useTimebarEnvironmentConnect,
+  useTimebarVesselGroupConnect,
 } from './timebar.hooks'
 import styles from './TimebarSettings.module.css'
 
@@ -67,6 +70,7 @@ const TimebarSettings = ({ loading = false }: { loading: boolean }) => {
     selectActiveHeatmapEnvironmentalDataviewsWithoutStatic
   )
   const activeTrackDataviews = useSelector(selectActiveTrackDataviews)
+  const activeVesselGroupDataviews = useSelector(selectActiveVesselGroupDataviews)
   const isStandaloneVesselLocation = useSelector(selectIsVesselLocation)
   const vesselIds = activeTrackDataviews.map((v) => v.id)
   const trackLayers = useGetDeckLayers<VesselLayer | UserTracksLayer>(vesselIds)
@@ -78,6 +82,7 @@ const TimebarSettings = ({ loading = false }: { loading: boolean }) => {
   const activeVesselsDataviews = useSelector(selectActiveVesselsDataviews)
   const { timebarVisualisation, dispatchTimebarVisualisation } = useTimebarVisualisationConnect()
   const { timebarSelectedEnvId, dispatchTimebarSelectedEnvId } = useTimebarEnvironmentConnect()
+  const { timebarSelectedVGId, dispatchTimebarSelectedVGId } = useTimebarVesselGroupConnect()
   const { timebarGraph, dispatchTimebarGraph } = useTimebarGraphConnect()
   const timebarGraphEnabled = activeVesselsDataviews && activeVesselsDataviews!?.length <= 2
 
@@ -102,6 +107,10 @@ const TimebarSettings = ({ loading = false }: { loading: boolean }) => {
     dispatchTimebarVisualisation(TimebarVisualisations.Environment)
     dispatchTimebarSelectedEnvId(environmentalDataviewId)
   }
+  const setVesselGroupActive = (vesselGroupDataviewId: string) => {
+    dispatchTimebarVisualisation(TimebarVisualisations.VesselGroup)
+    dispatchTimebarSelectedVGId(vesselGroupDataviewId)
+  }
   const setVesselActive = () => {
     dispatchTimebarVisualisation(TimebarVisualisations.Vessel)
     dispatchTimebarGraph(TimebarGraphs.None)
@@ -174,6 +183,26 @@ const TimebarSettings = ({ loading = false }: { loading: boolean }) => {
                   tooltip={detectionsTooltipLabel}
                   onClick={setHeatmapDetectionsActive}
                 />
+                {activeVesselGroupDataviews.map((vgDataview) => {
+                  return (
+                    <Radio
+                      key={vgDataview.id}
+                      label={
+                        <Icon
+                          SvgIcon={AreaIcon}
+                          label={formatInfoField(vgDataview.vesselGroup?.name, 'name') as string}
+                          color={vgDataview?.config?.color || COLOR_PRIMARY_BLUE}
+                        />
+                      }
+                      active={
+                        timebarVisualisation === TimebarVisualisations.VesselGroup &&
+                        timebarSelectedVGId === vgDataview.id
+                      }
+                      tooltip={activityTooltipLabel}
+                      onClick={() => setVesselGroupActive(vgDataview.id)}
+                    />
+                  )
+                })}
               </Fragment>
             )}
             <Radio

diff --git a/apps/fishing-map/features/timebar/timebar.hooks.ts b/apps/fishing-map/features/timebar/timebar.hooks.ts
@@ -8,6 +8,7 @@ import { TimebarGraphs, TimebarVisualisations } from 'types'
 import {
   selectTimebarGraph,
   selectTimebarSelectedEnvId,
+  selectTimebarSelectedVGId,
   selectTimebarVisualisation,
 } from 'features/app/selectors/app.timebar.selectors'
 import { useLocationConnect } from 'routes/routes.hook'
@@ -215,6 +216,20 @@ export const useTimebarEnvironmentConnect = () => {
   return { timebarSelectedEnvId, dispatchTimebarSelectedEnvId }
 }
 
+export const useTimebarVesselGroupConnect = () => {
+  const { dispatchQueryParams } = useLocationConnect()
+  const timebarSelectedVGId = useSelector(selectTimebarSelectedVGId)
+
+  const dispatchTimebarSelectedVGId = useCallback(
+    (timebarSelectedVGId: string) => {
+      dispatchQueryParams({ timebarSelectedVGId })
+    },
+    [dispatchQueryParams]
+  )
+
+  return { timebarSelectedVGId, dispatchTimebarSelectedVGId }
+}
+
 export const useTimebarGraphConnect = () => {
   const timebarGraph = useSelector(selectTimebarGraph)
   const { dispatchQueryParams } = useLocationConnect()

diff --git a/apps/fishing-map/features/timebar/timebar.selectors.ts b/apps/fishing-map/features/timebar/timebar.selectors.ts
@@ -5,6 +5,7 @@ import { TimebarVisualisations } from 'types'
 import { selectDataviewInstancesResolved } from 'features/dataviews/selectors/dataviews.instances.selectors'
 import {
   selectTimebarSelectedEnvId,
+  selectTimebarSelectedVGId,
   selectTimebarVisualisation,
 } from 'features/app/selectors/app.timebar.selectors'
 import { AVAILABLE_END, AVAILABLE_START } from 'data/config'
@@ -14,6 +15,7 @@ import {
   selectActiveActivityDataviews,
   selectActiveDetectionsDataviews,
   selectActiveHeatmapEnvironmentalDataviewsWithoutStatic,
+  selectActiveVesselGroupDataviews,
 } from 'features/dataviews/selectors/dataviews.selectors'
 import {
   selectActivityVisualizationMode,
@@ -54,17 +56,21 @@ export const selectTimebarSelectedDataviews = createSelector(
   [
     selectTimebarVisualisation,
     selectTimebarSelectedEnvId,
+    selectTimebarSelectedVGId,
     selectActiveDetectionsDataviews,
     selectActiveActivityDataviews,
+    selectActiveVesselGroupDataviews,
     selectActiveHeatmapEnvironmentalDataviewsWithoutStatic,
     selectReportCategory,
     selectIsAnyReportLocation,
   ],
   (
     timebarVisualisation,
     timebarSelectedEnvId,
+    timebarSelectedVGId,
     detectionsDataviews,
     activityDataviews,
+    vesselGroupDataviews,
     environmentalDataviews,
     reportCategory,
     isReportLocation
@@ -73,6 +79,9 @@ export const selectTimebarSelectedDataviews = createSelector(
     if (timebarVisualisation === TimebarVisualisations.Environment) {
       return environmentalDataviews.filter((d) => d.id === timebarSelectedEnvId)
     }
+    if (timebarVisualisation === TimebarVisualisations.VesselGroup) {
+      return vesselGroupDataviews.filter((d) => d.id === timebarSelectedVGId)
+    }
     if (timebarVisualisation === TimebarVisualisations.HeatmapDetections) {
       return detectionsDataviews
     }

diff --git a/apps/fishing-map/types/index.ts b/apps/fishing-map/types/index.ts
@@ -56,6 +56,7 @@ export interface WorkspaceState extends BaseUrlWorkspace {
   sidebarOpen?: boolean
   timebarGraph?: TimebarGraphs
   timebarSelectedEnvId?: string
+  timebarSelectedVGId?: string
   timebarVisualisation?: TimebarVisualisations
   visibleEvents?: VisibleEvents
 }
@@ -96,6 +97,7 @@ export enum TimebarVisualisations {
   HeatmapActivity = 'heatmap',
   HeatmapDetections = 'heatmapDetections',
   Vessel = 'vessel',
+  VesselGroup = 'vesselGroup',
   Environment = 'environment',
 }