From 253f1454973821096eb613649171194e6197d2c5 Mon Sep 17 00:00:00 2001 From: j8seangel Date: Wed, 28 Aug 2024 19:24:47 +0200 Subject: [PATCH] viewOnlyVesselGroup toggle --- .../selectors/dataviews.selectors.ts | 33 ++++++++++++++++++- .../VesselGroupReportTitle.tsx | 31 ++++++++++++++++- .../vessel.config.selectors.ts | 1 + .../vessels/VesselGroupReportVessels.tsx | 1 - .../features/vessel/vessel.config.ts | 1 + apps/fishing-map/types/index.ts | 1 + 6 files changed, 65 insertions(+), 3 deletions(-) diff --git a/apps/fishing-map/features/dataviews/selectors/dataviews.selectors.ts b/apps/fishing-map/features/dataviews/selectors/dataviews.selectors.ts index 84daf86f84..4e8609d32b 100644 --- a/apps/fishing-map/features/dataviews/selectors/dataviews.selectors.ts +++ b/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,6 +99,8 @@ export const selectDataviewInstancesResolvedVisible = createSelector( selectIsAnyVesselLocation, selectViewOnlyVessel, selectVesselId, + selectIsVesselGroupReportLocation, + selectViewOnlyVesselGroup, ], ( dataviews = [], @@ -104,7 +108,9 @@ export const selectDataviewInstancesResolvedVisible = createSelector( 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) => { diff --git a/apps/fishing-map/features/vessel-group-report/VesselGroupReportTitle.tsx b/apps/fishing-map/features/vessel-group-report/VesselGroupReportTitle.tsx index b976a360bc..9212423ac4 100644 --- a/apps/fishing-map/features/vessel-group-report/VesselGroupReportTitle.tsx +++ b/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 (
@@ -62,6 +76,21 @@ export default function VesselGroupReportTitle({ vesselGroup, loading }: ReportT
+ {hasOtherLayers && ( + + )}