Allow hidding all layers only when no vessels are pinned

apps/fishing-map/features/reports/events/VGREventsVesselsTable.tsx

@@ -6,6 +6,7 @@ import {
   useGetVesselGroupEventsVesselsQuery,
   VesselGroupEventsVesselsParams,
 } from 'queries/vessel-group-events-stats-api'
+import { UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
 import { EMPTY_FIELD_PLACEHOLDER, formatInfoField } from 'utils/info'
 import { useLocationConnect } from 'routes/routes.hook'
 import VesselLink from 'features/vessel/VesselLink'
@@ -21,19 +22,24 @@ import styles from 'features/reports/vessel-groups/vessels/VesselGroupReportVess
 
 export default function VesselGroupReportEventsVesselsTable() {
   const { t } = useTranslation()
-  const { dispatchQueryParams } = useLocationConnect()
   const params = useSelector(selectFetchVGREventsVesselsParams)
   const workspaceStatus = useSelector(selectWorkspaceStatus)
+  const { dispatchQueryParams } = useLocationConnect()
   const { error, isLoading } = useGetVesselGroupEventsVesselsQuery(
     params as VesselGroupEventsVesselsParams,
     {
       skip: !params,
     }
   )
   const vessels = useSelector(selectVGREventsVesselsPaginated)
-
-  const onPinClick = () => {
-    dispatchQueryParams({ viewOnlyVesselGroup: false })
+  const onPinClick = ({
+    vesselInWorkspace,
+  }: {
+    vesselInWorkspace?: UrlDataviewInstance | null | undefined
+  }) => {
+    if (!vesselInWorkspace) {
+      dispatchQueryParams({ viewOnlyVesselGroup: false })
+    }
   }
 
   return (

apps/fishing-map/features/reports/vessel-groups/VesselGroupReport.tsx

@@ -16,6 +16,7 @@ import VGREvents from 'features/reports/events/VGREvents'
 import VGRActivity from 'features/reports/vessel-groups/activity/VGRActivity'
 import { useSetMapCoordinates } from 'features/map/map-viewport.hooks'
 import { selectIsGFWUser } from 'features/user/selectors/user.selectors'
+import { selectTrackDataviews } from 'features/dataviews/selectors/dataviews.instances.selectors'
 import {
   useFitAreaInViewport,
   useReportAreaCenter,
@@ -46,7 +47,7 @@ function VesselGroupReport() {
   const coordinates = useReportAreaCenter(bbox!)
   const setMapCoordinates = useSetMapCoordinates()
   const bboxHash = bbox ? bbox.join(',') : ''
-
+  const vesselsInWorkspace = useSelector(selectTrackDataviews)
   useEffect(() => {
     fetchVesselGroupReport(vesselGroupId)
     if (reportDataview) {
@@ -61,6 +62,11 @@ function VesselGroupReport() {
     vesselGroupId,
   ])
 
+  useEffect(() => {
+    if (vesselsInWorkspace.length) {
+      dispatchQueryParams({ viewOnlyVesselGroup: false })
+    }
+  }, [dispatchQueryParams, vesselsInWorkspace])
   useEffect(() => {
     if (reportSection === 'vessels' && coordinates) {
       setMapCoordinates(coordinates)

apps/fishing-map/features/reports/vessel-groups/vessels/VesselGroupReportVesselsTable.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import cx from 'classnames'
 import { Fragment } from 'react'
 import { IconButton } from '@globalfishingwatch/ui-components'
+import { UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
 import { EMPTY_FIELD_PLACEHOLDER } from 'utils/info'
 import { useLocationConnect } from 'routes/routes.hook'
 import { getDatasetsReportNotSupported } from 'features/datasets/datasets.utils'
@@ -45,10 +46,6 @@ export default function VesselGroupReportVesselsTable() {
     dispatchQueryParams({ vGRVesselFilter, vGRVesselPage: 0 })
   }
 
-  const onPinClick = () => {
-    dispatchQueryParams({ viewOnlyVesselGroup: false })
-  }
-
   const handleSortClick = (
     property: VGRVesselsOrderProperty,
     direction: VGRVesselsOrderDirection
@@ -59,6 +56,16 @@ export default function VesselGroupReportVesselsTable() {
     })
   }
 
+  const onPinClick = ({
+    vesselInWorkspace,
+  }: {
+    vesselInWorkspace?: UrlDataviewInstance | null | undefined
+  }) => {
+    if (!vesselInWorkspace) {
+      dispatchQueryParams({ viewOnlyVesselGroup: false })
+    }
+  }
+
   return (
     <Fragment>
       <div className={styles.tableContainer} data-test="report-vessels-table">

apps/fishing-map/features/vessel/VesselPin.tsx

@@ -12,7 +12,7 @@ import {
   Resource,
   ResourceStatus,
 } from '@globalfishingwatch/api-types'
-import { setResource } from '@globalfishingwatch/dataviews-client'
+import { setResource, UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
 import { resolveEndpoint } from '@globalfishingwatch/datasets-client'
 import { GFWAPI } from '@globalfishingwatch/api-client'
 import { useDataviewInstancesConnect } from 'features/workspace/workspace.hook'
@@ -57,7 +57,11 @@ function VesselPin({
   className?: string
   disabled?: boolean
   size?: IconButtonSize
-  onClick?: () => void
+  onClick?: ({
+    vesselInWorkspace,
+  }: {
+    vesselInWorkspace?: UrlDataviewInstance | null | undefined
+  }) => void
 }) {
   const [loading, setLoading] = useState(false)
   const { t } = useTranslation()
@@ -181,7 +185,7 @@ function VesselPin({
       }
     }
     setLoading(false)
-    onClick?.()
+    onClick?.({ vesselInWorkspace })
   }
 
   return (