Fishing map/vessel profile 3 reports refactor (#2843)

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'
 
@@ -136,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/features/app/App.tsx

@@ -33,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/areas/reports.selectors'
+import { selectShowTimeComparison } from 'features/reports/areas/area-reports.selectors'
 import { DEFAULT_WORKSPACE_ID } from 'data/workspaces'
 import {
   HOME,
@@ -59,7 +59,7 @@ 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/reports.config.selectors'
+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'
@@ -137,6 +137,7 @@ function App() {
   const isReportLocation = useSelector(selectIsAnyReportLocation)
   const reportAreaBounds = useSelector(selectReportAreaBounds)
   const isAnySearchLocation = useSelector(selectIsAnySearchLocation)
+  const isVesselGroupReportLocation = useSelector(selectIsVesselGroupReportLocation)
 
   const onMenuClick = useCallback(() => {
     setMenuOpen(true)
@@ -177,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)
         }
       }

apps/fishing-map/features/app/selectors/app.reports.selector.ts

@@ -1,12 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit'
+import { selectActiveDataviewsCategories } from 'features/dataviews/selectors/dataviews.resolvers.selectors'
+import { selectReportById } from 'features/reports/areas/area-reports.slice'
 import {
-  selectActiveDetectionsDataviews,
-  selectActiveHeatmapEnvironmentalDataviews,
-  selectActiveReportActivityDataviews,
-  selectReportActiveCategories,
-} from 'features/dataviews/selectors/dataviews.selectors'
-import { selectReportById } from 'features/reports/areas/reports.slice'
-import {
+  selectIsVesselGroupReportLocation,
   selectLocationAreaId,
   selectLocationDatasetId,
   selectReportId,
@@ -15,19 +11,16 @@ import {
   selectUrlBufferValueQuery,
 } from 'routes/routes.selectors'
 import { BufferOperation, BufferUnit } from 'types'
-import { createDeepEqualSelector } from 'utils/selectors'
 import {
   selectReportBufferOperationSelector,
   selectReportBufferUnitSelector,
   selectReportBufferValueSelector,
   selectReportCategorySelector,
   selectReportVesselGraphSelector,
-} from 'features/reports/areas/reports.config.selectors'
-import { ReportCategory, ReportVesselGraph } from 'features/reports/areas/reports.types'
-
-export function isActivityReport(reportCategory: ReportCategory) {
-  return reportCategory === ReportCategory.Fishing || reportCategory === ReportCategory.Presence
-}
+} from 'features/reports/areas/area-reports.config.selectors'
+import { ReportCategory, ReportVesselGraph } from 'features/reports/areas/area-reports.types'
+import { WORLD_REGION_ID } from 'features/reports/activity/reports-activity.slice'
+import { selectVGRActivitySubsection } from 'features/reports/vessel-groups/vessel-group.config.selectors'
 
 export const selectCurrentReport = createSelector(
   [selectReportId, (state) => state.reports],
@@ -45,41 +38,49 @@ export const selectReportDatasetId = createSelector(
 )
 
 export const selectReportAreaId = createSelector(
-  [selectLocationAreaId, selectCurrentReport],
-  (locationAreaId, report) => {
+  [selectLocationAreaId, selectCurrentReport, selectIsVesselGroupReportLocation],
+  (locationAreaId, report, isVesselGroupReportLocation) => {
+    if (isVesselGroupReportLocation) {
+      return WORLD_REGION_ID
+    }
     return locationAreaId || report?.areaId || ''
   }
 )
 
-export const selectReportCategory = createSelector(
-  [selectReportCategorySelector, selectReportActiveCategories],
-  (reportCategory, activeCategories): ReportCategory => {
-    return activeCategories.some((category) => category === reportCategory)
-      ? reportCategory
-      : activeCategories[0]
+export const selectReportActiveCategories = createSelector(
+  [selectActiveDataviewsCategories],
+  (activeCategories): ReportCategory[] => {
+    const orderedCategories = [
+      ReportCategory.Fishing,
+      ReportCategory.Presence,
+      ReportCategory.Detections,
+      ReportCategory.Environment,
+    ]
+    return orderedCategories.flatMap((category) =>
+      activeCategories.some((a) => a === category) ? category : []
+    )
   }
 )
 
-export const selectActiveReportDataviews = createDeepEqualSelector(
+export const selectReportCategory = createSelector(
   [
-    selectReportCategory,
-    selectActiveReportActivityDataviews,
-    selectActiveDetectionsDataviews,
-    selectActiveHeatmapEnvironmentalDataviews,
+    selectReportCategorySelector,
+    selectReportActiveCategories,
+    selectIsVesselGroupReportLocation,
+    selectVGRActivitySubsection,
   ],
   (
     reportCategory,
-    activityDataviews = [],
-    detectionsDataviews = [],
-    environmentalDataviews = []
-  ) => {
-    if (isActivityReport(reportCategory)) {
-      return activityDataviews
-    }
-    if (reportCategory === ReportCategory.Detections) {
-      return detectionsDataviews
+    activeCategories,
+    isVesselGroupReportLocation,
+    vGRActivitySubsection
+  ): ReportCategory => {
+    if (isVesselGroupReportLocation) {
+      return vGRActivitySubsection as ReportCategory
     }
-    return environmentalDataviews
+    return activeCategories.some((category) => category === reportCategory)
+      ? reportCategory
+      : activeCategories[0]
   }
 )
 

apps/fishing-map/features/app/selectors/app.selectors.ts

@@ -6,14 +6,13 @@ import {
   getActiveActivityDatasetsInDataviews,
   getLatestEndDateFromDatasets,
 } from 'features/datasets/datasets.utils'
-import { selectActiveDataviewInstancesResolved } from 'features/dataviews/selectors/dataviews.instances.selectors'
+import { selectDataviewInstancesResolvedVisible } from 'features/dataviews/selectors/dataviews.instances.selectors'
 import { selectIsAnyReportLocation } from 'routes/routes.selectors'
-import { MapAnnotation } from 'features/map/overlays/annotations/annotations.types'
 
 const EMPTY_ARRAY: [] = []
 
 export const selectLatestAvailableDataDate = createSelector(
-  [selectActiveDataviewInstancesResolved],
+  [selectDataviewInstancesResolvedVisible],
   (dataviews) => {
     const activeDatasets = dataviews.flatMap((dataview) => {
       if (dataview.category === DataviewCategory.Context) {

apps/fishing-map/features/app/selectors/app.timebar.selectors.ts

@@ -1,10 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit'
 import { DEFAULT_TIME_RANGE } from 'data/config'
 import {
+  selectActiveVesselsDataviews,
   selectEnvironmentalDataviews,
   selectVesselGroupDataviews,
 } from 'features/dataviews/selectors/dataviews.categories.selectors'
-import { selectActiveVesselsDataviews } from 'features/dataviews/selectors/dataviews.instances.selectors'
 import { TimeRange } from 'features/timebar/timebar.slice'
 import {
   selectWorkspaceStateProperty,

apps/fishing-map/features/app/selectors/app.workspace.selectors.ts

@@ -27,7 +27,7 @@ import {
 import { AppWorkspace } from 'features/workspaces-list/workspaces-list.slice'
 import { selectLocationCategory } from 'routes/routes.selectors'
 import { selectViewport } from 'features/app/selectors/app.viewport.selectors'
-import { selectDataviewInstancesMergedOrdered } from 'features/dataviews/selectors/dataviews.instances.selectors'
+import { selectDataviewInstancesMergedOrdered } from 'features/dataviews/selectors/dataviews.resolvers.selectors'
 import { selectDaysFromLatest, selectWorkspace } from 'features/workspace/workspace.selectors'
 import { DEFAULT_WORKSPACE_CATEGORY } from 'data/workspaces'
 import {
@@ -37,7 +37,7 @@ import {
   selectReportTimeComparison,
   selectReportVesselFilter,
   selectReportVesselPage,
-} from 'features/reports/areas/reports.config.selectors'
+} from 'features/reports/areas/area-reports.config.selectors'
 
 const selectWorkspaceReportState = createSelector(
   [

apps/fishing-map/features/datasets/upload/NewDataset.tsx

@@ -17,7 +17,7 @@ import { selectIsGuestUser } from 'features/user/selectors/user.selectors'
 import { getFinalDatasetFromMetadata } from 'features/datasets/upload/datasets-upload.utils'
 import UserGuideLink from 'features/help/UserGuideLink'
 import { useDataviewInstancesConnect } from 'features/workspace/workspace.hook'
-import { selectDataviewInstancesMerged } from 'features/dataviews/selectors/dataviews.instances.selectors'
+import { selectDataviewInstancesMerged } from 'features/dataviews/selectors/dataviews.resolvers.selectors'
 import {
   useDatasetsAPI,
   useDatasetModalOpenConnect,

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

@@ -1,7 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit'
 import { DataviewCategory, DataviewType } from '@globalfishingwatch/api-types'
 import { UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
-import { selectDataviewInstancesResolved } from 'features/dataviews/selectors/dataviews.instances.selectors'
+import { selectDataviewInstancesResolved } from 'features/dataviews/selectors/dataviews.resolvers.selectors'
+import { selectDataviewInstancesResolvedVisible } from './dataviews.instances.selectors'
 
 export const selectDataviewInstancesByCategory = (category?: DataviewCategory) => {
   return createSelector(
@@ -12,23 +13,57 @@ export const selectDataviewInstancesByCategory = (category?: DataviewCategory) =
   )
 }
 
+export const selectActiveDataviewInstancesByCategory = (category?: DataviewCategory) => {
+  return createSelector(
+    [selectDataviewInstancesResolvedVisible],
+    (dataviews): UrlDataviewInstance<DataviewType>[] => {
+      return dataviews?.filter((dataview) => dataview.category === category)
+    }
+  )
+}
+
 export const selectEnvironmentalDataviews = selectDataviewInstancesByCategory(
   DataviewCategory.Environment
 )
+export const selectActiveEnvironmentalDataviews = selectActiveDataviewInstancesByCategory(
+  DataviewCategory.Environment
+)
+
 export const selectEventsDataviews = selectDataviewInstancesByCategory(DataviewCategory.Events)
+export const selectActiveEventsDataviews = selectActiveDataviewInstancesByCategory(
+  DataviewCategory.Events
+)
 
 export const selectActivityDataviews = selectDataviewInstancesByCategory(DataviewCategory.Activity)
+export const selectActiveActivityDataviews = selectActiveDataviewInstancesByCategory(
+  DataviewCategory.Activity
+)
+
+export const selectVesselsDataviews = selectDataviewInstancesByCategory(DataviewCategory.Vessels)
+export const selectActiveVesselsDataviews = selectActiveDataviewInstancesByCategory(
+  DataviewCategory.Vessels
+)
 
 export const selectDetectionsDataviews = selectDataviewInstancesByCategory(
   DataviewCategory.Detections
 )
+export const selectActiveDetectionsDataviews = selectActiveDataviewInstancesByCategory(
+  DataviewCategory.Detections
+)
 
 export const selectVesselGroupDataviews = selectDataviewInstancesByCategory(
   DataviewCategory.VesselGroups
 )
+export const selectActiveVesselGroupDataviews = selectActiveDataviewInstancesByCategory(
+  DataviewCategory.VesselGroups
+)
 
 export const selectContextAreasDataviews = selectDataviewInstancesByCategory(
   DataviewCategory.Context
 )
 
+export const selectActiveContextAreasDataviews = selectDataviewInstancesByCategory(
+  DataviewCategory.Context
+)
+
 export const selectCustomUserDataviews = selectDataviewInstancesByCategory(DataviewCategory.User)