viewOnlyVesselGroup toggle

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

@@ -27,6 +27,7 @@ import {
   selectIsAnyVesselLocation,
   selectVesselId,
   selectIsAnyReportLocation,
+  selectIsVesselGroupReportLocation,
 } from 'routes/routes.selectors'
 import { getReportCategoryFromDataview } from 'features/area-report/reports.utils'
 import { selectViewOnlyVessel } from 'features/vessel/vessel.config.selectors'
@@ -40,6 +41,7 @@ import {
 import { isBathymetryDataview } from 'features/dataviews/dataviews.utils'
 import { selectDownloadActiveTabId } from 'features/download/downloadActivity.slice'
 import { HeatmapDownloadTab } from 'features/download/downloadActivity.config'
+import { selectViewOnlyVesselGroup } from 'features/vessel-group-report/vessel.config.selectors'
 import {
   selectContextAreasDataviews,
   selectActivityDataviews,
@@ -97,14 +99,18 @@ export const selectDataviewInstancesResolvedVisible = createSelector(
     selectIsAnyVesselLocation,
     selectViewOnlyVessel,
     selectVesselId,
+    selectIsVesselGroupReportLocation,
+    selectViewOnlyVesselGroup,
   ],
   (
     dataviews = [],
     isReportLocation,
     reportCategory,
     isVesselLocation,
     viewOnlyVessel,
-    vesselId
+    vesselId,
+    isVesselGroupReportLocation,
+    viewOnlyVesselGroup
   ) => {
     if (isReportLocation) {
       return dataviews.filter((dataview) => {
@@ -127,10 +133,35 @@ export const selectDataviewInstancesResolvedVisible = createSelector(
         return config?.type === DataviewType.Track && id.includes(vesselId)
       })
     }
+
+    if (isVesselGroupReportLocation && viewOnlyVesselGroup) {
+      // TODO: decide how to filter out layers here
+      return dataviews.filter((dataview) => {
+        const isHeatmapDataview =
+          dataview.category === DataviewCategory.Activity ||
+          dataview.category === DataviewCategory.Detections
+        return !isHeatmapDataview && dataview.config?.visible
+      })
+    }
     return dataviews.filter((dataview) => dataview.config?.visible)
   }
 )
 
+export const selectHasOtherVesselGroupDataviews = createSelector(
+  [selectAllDataviewInstancesResolved],
+  (dataviews) => {
+    if (!dataviews?.length) return false
+    // TODO: decide how to filter out layers here
+    return (
+      dataviews?.filter(
+        (dataview) =>
+          dataview.category === DataviewCategory.Activity ||
+          dataview.category === DataviewCategory.Detections
+      ).length > 0
+    )
+  }
+)
+
 export const selectBasemapLabelsDataviewInstance = createSelector(
   [selectAllDataviewInstancesResolved],
   (dataviews) => {

apps/fishing-map/features/vessel-group-report/VesselGroupReportTitle.tsx

@@ -1,7 +1,9 @@
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import cx from 'classnames'
-import { Button, Icon } from '@globalfishingwatch/ui-components'
+import { useSelector } from 'react-redux'
+import { Button, Icon, IconButton } from '@globalfishingwatch/ui-components'
+import { useSmallScreen } from '@globalfishingwatch/react-hooks'
 import { useAppDispatch } from 'features/app/app.hooks'
 import ReportTitlePlaceholder from 'features/area-report/placeholders/ReportTitlePlaceholder'
 import { TrackCategory, trackEvent } from 'features/app/analytics.hooks'
@@ -11,8 +13,11 @@ import {
   setVesselGroupsModalOpen,
 } from 'features/vessel-groups/vessel-groups.slice'
 import { formatInfoField } from 'utils/info'
+import { useLocationConnect } from 'routes/routes.hook'
+import { selectHasOtherVesselGroupDataviews } from 'features/dataviews/selectors/dataviews.selectors'
 import styles from './VesselGroupReportTitle.module.css'
 import { VesselGroupReport } from './vessel-group-report.slice'
+import { selectViewOnlyVesselGroup } from './vessel.config.selectors'
 
 type ReportTitleProps = {
   loading?: boolean
@@ -22,6 +27,10 @@ type ReportTitleProps = {
 export default function VesselGroupReportTitle({ vesselGroup, loading }: ReportTitleProps) {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
+  const { dispatchQueryParams } = useLocationConnect()
+  const isSmallScreen = useSmallScreen()
+  const viewOnlyVesselGroup = useSelector(selectViewOnlyVesselGroup)
+  const hasOtherLayers = useSelector(selectHasOtherVesselGroupDataviews)
 
   const onEditClick = useCallback(() => {
     if (vesselGroup?.id || !vesselGroup?.vessels?.length) {
@@ -39,6 +48,11 @@ export default function VesselGroupReportTitle({ vesselGroup, loading }: ReportT
     window.print()
   }
 
+  const toggleViewOnlyVesselGroup = () => {
+    if (isSmallScreen) dispatchQueryParams({ sidebarOpen: false })
+    dispatchQueryParams({ viewOnlyVesselGroup: !viewOnlyVesselGroup })
+  }
+
   if (loading) {
     return (
       <div className={cx(styles.container, styles.placeholder)}>
@@ -62,6 +76,21 @@ export default function VesselGroupReportTitle({ vesselGroup, loading }: ReportT
         </a>
 
         <div className={styles.actions}>
+          {hasOtherLayers && (
+            <IconButton
+              className="print-hidden"
+              type="border"
+              icon={viewOnlyVesselGroup ? 'layers-on' : 'layers-off'}
+              tooltip={
+                viewOnlyVesselGroup
+                  ? t('vessel.showOtherLayers', 'Show other layers')
+                  : t('vessel.hideOtherLayers', 'Hide other layers')
+              }
+              tooltipPlacement="bottom"
+              size="small"
+              onClick={toggleViewOnlyVesselGroup}
+            />
+          )}
           <Button
             type="border-secondary"
             size="small"

apps/fishing-map/features/vessel-group-report/vessel.config.selectors.ts

@@ -17,6 +17,7 @@ export function selectVesselProfileStateProperty<P extends VesselGroupReportStat
   )
 }
 
+export const selectViewOnlyVesselGroup = selectVesselProfileStateProperty('viewOnlyVesselGroup')
 export const selectVesselGroupReportSection = selectVesselProfileStateProperty(
   'vesselGroupReportSection'
 )

apps/fishing-map/features/vessel-group-report/vessels/VesselGroupReportVessels.tsx

@@ -5,7 +5,6 @@ type VesselGroupReportVesselsProps = {}
 
 function VesselGroupReportVessels(props: VesselGroupReportVesselsProps) {
   const vesselSubSection = useSelector(selectVesselGroupReportVesselsSubsection)
-  console.log('🚀 ~ VesselGroupReportVessels ~ vesselSubSection:', vesselSubSection)
   return (
     <div>
       <p>Graph here</p>

apps/fishing-map/features/vessel/vessel.config.ts

@@ -22,6 +22,7 @@ export const DEFAULT_VESSEL_STATE: VesselProfileState = {
 }
 
 export const DEFAULT_VESSEL_GROUP_REPORT_STATE: VesselGroupReportState = {
+  viewOnlyVesselGroup: true,
   vesselGroupReportSection: 'vessels',
   vesselGroupReportVesselsSubsection: 'flag',
   vesselGroupReportActivitySubsection: 'fishing-effort',

apps/fishing-map/types/index.ts

@@ -162,6 +162,7 @@ export type VesselGroupReportActivitySubsection = 'fishing-effort' | 'presence'
 export type VesselGroupReportEventsSubsection = 'fishing' | 'encounters' | 'port' | 'loitering'
 
 export type VesselGroupReportState = {
+  viewOnlyVesselGroup: boolean
   vesselGroupReportSection: VesselGroupReportSection
   vesselGroupReportVesselsSubsection?: VesselGroupReportVesselsSubsection
   vesselGroupReportActivitySubsection?: VesselGroupReportActivitySubsection