fishing-map Vessel Profile 3.0 (#2861)

apps/fishing-map/data/config.ts

@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon'
-import { DataviewCategory } from '@globalfishingwatch/api-types'
+import { DataviewCategory, DataviewType } from '@globalfishingwatch/api-types'
 import { AppState, TimebarGraphs, TimebarVisualisations, UserTab, WorkspaceState } from '../types'
 import { getUTCDateTime } from '../utils/dates'
 
@@ -108,12 +108,6 @@ export const DEFAULT_WORKSPACE: WorkspaceState & AppState = {
   visibleEvents: 'all',
   timebarGraph: TimebarGraphs.None,
   bivariateDataviews: undefined,
-  reportActivityGraph: REPORT_ACTIVITY_GRAPH_EVOLUTION,
-  reportCategory: undefined,
-  reportVesselFilter: '',
-  reportVesselGraph: REPORT_VESSELS_GRAPH_FLAG,
-  reportVesselPage: 0,
-  reportResultsPerPage: REPORT_VESSELS_PER_PAGE,
   userTab: UserTab.Info,
 }
 
@@ -142,3 +136,10 @@ export const POPUP_CATEGORY_ORDER = [
 ]
 
 export const FIT_BOUNDS_REPORT_PADDING = 30
+
+export const REPORT_ONLY_VISIBLE_LAYERS = [
+  DataviewType.Basemap,
+  DataviewType.Context,
+  DataviewType.UserContext,
+  DataviewType.UserPoints,
+]

apps/fishing-map/data/default-workspaces/workspace.development.ts

@@ -21,8 +21,14 @@ import {
   BASEMAP_DATAVIEW_INSTANCE_ID,
   FIXED_SAR_INFRASTRUCTURE,
   DEFAULT_WORKSPACE_CATEGORY,
+  CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG,
+  CLUSTER_LOITERING_EVENTS_DATAVIEW_SLUG,
 } from 'data/workspaces'
-import { ENCOUNTER_EVENTS_SOURCE_ID } from 'features/dataviews/dataviews.utils'
+import {
+  ENCOUNTER_EVENTS_SOURCE_ID,
+  LOITERING_EVENTS_SOURCE_ID,
+  PORT_VISITS_EVENTS_SOURCE_ID,
+} from 'features/dataviews/dataviews.utils'
 import { OFFSHORE_FIXED_INFRASTRUCTURE_LAYER_ID } from 'features/map/map.config'
 import { HIGHLIGHT_DATAVIEW_INSTANCE_ID } from 'features/workspace/highlight-panel/highlight-panel.content'
 import { WorkspaceState } from 'types'
@@ -107,6 +113,20 @@ const workspace: Workspace<WorkspaceState> = {
         visible: false,
       },
     },
+    {
+      id: LOITERING_EVENTS_SOURCE_ID,
+      dataviewId: CLUSTER_LOITERING_EVENTS_DATAVIEW_SLUG,
+      config: {
+        visible: false,
+      },
+    },
+    {
+      id: PORT_VISITS_EVENTS_SOURCE_ID,
+      dataviewId: CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG,
+      config: {
+        visible: false,
+      },
+    },
     {
       id: 'context-layer-graticules',
       config: {

apps/fishing-map/data/layer-library/layers-events.ts

@@ -1,11 +1,34 @@
 import { PATH_BASENAME } from 'data/config'
 import { LibraryLayerConfig } from 'data/layer-library/layers.types'
-import { CLUSTER_ENCOUNTER_EVENTS_DATAVIEW_SLUG } from 'data/workspaces'
+import {
+  CLUSTER_ENCOUNTER_EVENTS_DATAVIEW_SLUG,
+  CLUSTER_LOITERING_EVENTS_DATAVIEW_SLUG,
+  CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG,
+} from 'data/workspaces'
 
 export const LAYERS_LIBRARY_EVENTS: LibraryLayerConfig[] = [
   {
     id: 'encounters',
     dataviewId: CLUSTER_ENCOUNTER_EVENTS_DATAVIEW_SLUG,
     previewImageUrl: `${PATH_BASENAME}/images/layer-library/encounters.jpg`,
+    config: {
+      color: '#FAE9A0',
+    },
+  },
+  {
+    id: 'loitering',
+    dataviewId: CLUSTER_LOITERING_EVENTS_DATAVIEW_SLUG,
+    previewImageUrl: `${PATH_BASENAME}/images/layer-library/loitering.jpg`,
+    config: {
+      color: '#CEA9F9',
+    },
+  },
+  {
+    id: 'port-visits',
+    dataviewId: CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG,
+    previewImageUrl: `${PATH_BASENAME}/images/layer-library/port-visits.jpg`,
+    config: {
+      color: '#9AEEFF',
+    },
   },
 ]

apps/fishing-map/data/workspaces.ts

@@ -49,6 +49,8 @@ export const FAO_AREAS_DATAVIEW_INSTANCE_ID = 'context-layer-fao-areas'
 // Workspaces dataviews
 export const FISHING_DATAVIEW_SLUG = 'apparent-fishing-effort-v-3'
 export const CLUSTER_ENCOUNTER_EVENTS_DATAVIEW_SLUG = 'encounter-cluster-events-v-3'
+export const CLUSTER_LOITERING_EVENTS_DATAVIEW_SLUG = 'loitering-cluster-events-v-3'
+export const CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG = 'port-visit-cluster-events-v-3'
 export const VIIRS_MATCH_DATAVIEW_SLUG = 'viirs-match-v-3'
 export const SAR_DATAVIEW_SLUG = 'sar-v-3'
 export const PRESENCE_DATAVIEW_SLUG = 'presence-activity-v-3'
@@ -76,6 +78,14 @@ export const TEMPLATE_DATAVIEW_SLUGS = [
   TEMPLATE_CLUSTERS_DATAVIEW_SLUG,
 ]
 
+export const DEFAULT_PRESENCE_VESSEL_GROUP_DATASETS = [
+  'public-global-presence:v3.0',
+  'public-chile-presence:v20211126',
+  'public-panama-presence:v20211126',
+  'public-norway-presence:v20220112',
+  'public-png-presence:v20230210',
+]
+
 const PRESENCE_DATAVIEWS = [
   VIIRS_MATCH_DATAVIEW_SLUG, // we ensure the + icon woks for the presence category
   PRESENCE_DATAVIEW_SLUG, // In case the workspace doesn't have the dataview added,

apps/fishing-map/features/app/App.tsx

@@ -17,6 +17,7 @@ import {
   selectLocationType,
   selectWorkspaceId,
   selectIsMapDrawing,
+  selectIsVesselGroupReportLocation,
 } from 'routes/routes.selectors'
 import menuBgImage from 'assets/images/menubg.jpg'
 import { useLocationConnect, useReplaceLoginUrl } from 'routes/routes.hook'
@@ -32,7 +33,7 @@ import {
 import { fetchUserThunk } from 'features/user/user.slice'
 import { fetchHighlightWorkspacesThunk } from 'features/workspaces-list/workspaces-list.slice'
 import { AsyncReducerStatus } from 'utils/async-slice'
-import { selectShowTimeComparison } from 'features/reports/reports.selectors'
+import { selectShowTimeComparison } from 'features/reports/areas/area-reports.selectors'
 import { DEFAULT_WORKSPACE_ID } from 'data/workspaces'
 import {
   HOME,
@@ -45,6 +46,7 @@ import {
   WORKSPACE_REPORT,
   SEARCH,
   WORKSPACE_SEARCH,
+  VESSEL_GROUP_REPORT,
 } from 'routes/routes'
 import { fetchWorkspaceThunk } from 'features/workspace/workspace.slice'
 import { t } from 'features/i18n/i18n'
@@ -53,11 +55,11 @@ import AppModals from 'features/modals/Modals'
 import { useMapFitBounds } from 'features/map/map-bounds.hooks'
 import { useSetMapCoordinates } from 'features/map/map-viewport.hooks'
 import { useDatasetDrag } from 'features/app/drag-dataset.hooks'
-import { selectReportAreaBounds } from 'features/app/selectors/app.reports.selector'
 import { selectIsUserLogged } from 'features/user/selectors/user.selectors'
 import ErrorBoundary from 'features/app/ErrorBoundary'
 import { selectDebugOptions } from 'features/debug/debug.slice'
 import { useFitWorkspaceBounds } from 'features/workspace/workspace.hook'
+import { selectReportAreaBounds } from 'features/reports/areas/area-reports.config.selectors'
 import { useAppDispatch } from './app.hooks'
 import { selectReadOnly, selectSidebarOpen } from './selectors/app.selectors'
 import { useAnalytics } from './analytics.hooks'
@@ -75,6 +77,7 @@ declare global {
 
 const Main = () => {
   const isWorkspaceLocation = useSelector(selectIsWorkspaceLocation)
+  const isVesselGroupReportLocation = useSelector(selectIsVesselGroupReportLocation)
   const locationType = useSelector(selectLocationType)
   const reportLocation = useSelector(selectIsAnyReportLocation)
   const workspaceStatus = useSelector(selectWorkspaceStatus)
@@ -86,6 +89,7 @@ const Main = () => {
   const isWorkspacesRouteWithTimebar =
     isWorkspaceLocation ||
     locationType === WORKSPACE_VESSEL ||
+    isVesselGroupReportLocation ||
     (reportLocation && !isTimeComparisonReport)
   const isWorkspaceMapReady = useSelector(selectIsWorkspaceMapReady)
   const showTimebar =
@@ -128,11 +132,12 @@ function App() {
   const i18n = useTranslation()
   const { dispatchQueryParams } = useLocationConnect()
   const [menuOpen, setMenuOpen] = useState(false)
-  const workspaceLocation = useSelector(selectIsWorkspaceLocation)
+  const isWorkspaceLocation = useSelector(selectIsWorkspaceLocation)
   const vesselLocation = useSelector(selectIsVesselLocation)
   const isReportLocation = useSelector(selectIsAnyReportLocation)
   const reportAreaBounds = useSelector(selectReportAreaBounds)
   const isAnySearchLocation = useSelector(selectIsAnySearchLocation)
+  const isVesselGroupReportLocation = useSelector(selectIsVesselGroupReportLocation)
 
   const onMenuClick = useCallback(() => {
     setMenuOpen(true)
@@ -161,6 +166,7 @@ function App() {
   // Checking only when REPORT entrypoint or WORKSPACE_REPORT when workspace is not loaded
   const locationNeedsFetch =
     locationType === REPORT ||
+    locationType === VESSEL_GROUP_REPORT ||
     (locationType === WORKSPACE_REPORT && currentWorkspaceId !== urlWorkspaceId)
   const hasWorkspaceIdChanged = locationType === WORKSPACE && currentWorkspaceId !== urlWorkspaceId
 
@@ -172,7 +178,7 @@ function App() {
       const resolvedAction = await action
       if (fetchWorkspaceThunk.fulfilled.match(resolvedAction)) {
         const workspace = resolvedAction.payload as Workspace
-        if (!isWorkspacePasswordProtected(workspace)) {
+        if (!isVesselGroupReportLocation && !isWorkspacePasswordProtected(workspace)) {
           fitWorkspaceBounds(workspace)
         }
       }
@@ -239,7 +245,7 @@ function App() {
     asideWidth = isReportLocation ? '45%' : '34rem'
   } else if (isAnySearchLocation) {
     asideWidth = '100%'
-  } else if (workspaceLocation) {
+  } else if (isWorkspaceLocation) {
     asideWidth = '39rem'
   }
 
@@ -259,7 +265,7 @@ function App() {
       <ErrorBoundary>
         <SplitView
           isOpen={sidebarOpen && !isMapDrawing}
-          showToggle={workspaceLocation || vesselLocation}
+          showToggle={isWorkspaceLocation || vesselLocation}
           onToggle={onToggle}
           aside={<Sidebar onMenuClick={onMenuClick} />}
           main={<Main />}

apps/fishing-map/features/app/analytics.hooks.ts

@@ -23,6 +23,7 @@ export enum TrackCategory {
   Tracks = 'tracks',
   User = 'user',
   VesselGroups = 'vessel_groups',
+  VesselGroupReport = 'vessel_group_report',
   VesselProfile = 'vessel_profile',
   WorkspaceManagement = 'workspace_management',
   MapInteraction = 'map_interaction',