Fishing-map/VV3-feedback-6 (#2875)

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

@@ -32,6 +32,7 @@ export default function VesselGroupReportEventsVesselsTable() {
     }
   )
   const vessels = useSelector(selectVGREventsVesselsPaginated)
+
   const onPinClick = ({
     vesselInWorkspace,
   }: {

apps/fishing-map/features/reports/vessel-groups/VesselGroupReport.module.css

@@ -16,3 +16,10 @@
   text-decoration: underline;
   flex: 1;
 }
+
+.updateContainer {
+  display: flex;
+  gap: var(--space-S);
+  flex-direction: column;
+  align-items: center;
+}

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

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useCallback, useEffect, useMemo } from 'react'
-import { Tab, Tabs } from '@globalfishingwatch/ui-components'
+import { Button, Tab, Tabs } from '@globalfishingwatch/ui-components'
 import { selectReportVesselGroupId } from 'routes/routes.selectors'
 import { AsyncReducerStatus } from 'utils/async-slice'
 import { TrackCategory, trackEvent } from 'features/app/analytics.hooks'
@@ -16,19 +16,20 @@ 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 { isOutdatedVesselGroup } from 'features/vessel-groups/vessel-groups.utils'
 import {
   useFitAreaInViewport,
   useReportAreaCenter,
   useVesselGroupBounds,
 } from '../areas/area-reports.hooks'
-import { useFetchVesselGroupReport } from './vessel-group-report.hooks'
+import { useEditVesselGroupModal, useFetchVesselGroupReport } from './vessel-group-report.hooks'
 import { selectVGRData, selectVGRStatus } from './vessel-group-report.slice'
 import VesselGroupReportTitle from './VesselGroupReportTitle'
 import VesselGroupReportVessels from './vessels/VesselGroupReportVessels'
 import { selectVGRSection } from './vessel-group.config.selectors'
 import VesselGroupReportInsights from './insights/VGRInsights'
 import { selectVGRDataview } from './vessel-group-report.selectors'
+import styles from './VesselGroupReport.module.css'
 
 function VesselGroupReport() {
   const { t } = useTranslation()
@@ -47,7 +48,9 @@ function VesselGroupReport() {
   const coordinates = useReportAreaCenter(bbox!)
   const setMapCoordinates = useSetMapCoordinates()
   const bboxHash = bbox ? bbox.join(',') : ''
-  const vesselsInWorkspace = useSelector(selectTrackDataviews)
+  const isOutdated = isOutdatedVesselGroup(vesselGroup)
+  const onEditClick = useEditVesselGroupModal()
+
   useEffect(() => {
     fetchVesselGroupReport(vesselGroupId)
     if (reportDataview) {
@@ -62,11 +65,6 @@ function VesselGroupReport() {
     vesselGroupId,
   ])
 
-  useEffect(() => {
-    if (vesselsInWorkspace.length) {
-      dispatchQueryParams({ viewOnlyVesselGroup: false })
-    }
-  }, [dispatchQueryParams, vesselsInWorkspace])
   useEffect(() => {
     if (reportSection === 'vessels' && coordinates) {
       setMapCoordinates(coordinates)
@@ -116,6 +114,24 @@ function VesselGroupReport() {
     [t, isGFWUser]
   )
 
+  if (isOutdated) {
+    return (
+      <div className={styles.emptyState}>
+        <div className={styles.updateContainer}>
+          <label>
+            {t(
+              'vesselGroupReport.linkDisabled',
+              'You need to update the vessel group first to see the report'
+            )}
+          </label>
+          <Button onClick={() => onEditClick(vesselGroup)}>
+            {t('vesselGroup.clickToMigrate', 'Click to migrate')}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
   // if (reportStatus === AsyncReducerStatus.Error) {
   //   return <VesselGroupReportError />
   // }

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

@@ -5,6 +5,7 @@ import { VESSEL_GROUP_REPORT } from 'routes/routes'
 import { selectWorkspace } from 'features/workspace/workspace.selectors'
 import { DEFAULT_WORKSPACE_CATEGORY, DEFAULT_WORKSPACE_ID } from 'data/workspaces'
 import { selectLocationQuery } from 'routes/routes.selectors'
+import { selectTrackDataviews } from 'features/dataviews/selectors/dataviews.instances.selectors'
 import styles from './VesselGroupReport.module.css'
 
 type VesselGroupReportLinkProps = {
@@ -15,6 +16,7 @@ type VesselGroupReportLinkProps = {
 function VesselGroupReportLink({ children, vesselGroupId }: VesselGroupReportLinkProps) {
   const workspace = useSelector(selectWorkspace)
   const query = useSelector(selectLocationQuery)
+  const vesselsInWorkspace = useSelector(selectTrackDataviews)
 
   if (!workspace || !vesselGroupId) {
     return children
@@ -28,6 +30,7 @@ function VesselGroupReportLink({ children, vesselGroupId }: VesselGroupReportLin
           category: workspace?.category || DEFAULT_WORKSPACE_CATEGORY,
           workspaceId: workspace?.id || DEFAULT_WORKSPACE_ID,
           vesselGroupId: vesselGroupId,
+          ...(vesselsInWorkspace?.length && { viewOnlyVesselGroup: false }),
         },
         query: query,
       }}

apps/fishing-map/features/reports/vessel-groups/vessel-group-report.hooks.ts

@@ -1,5 +1,11 @@
 import { useCallback } from 'react'
+import { VesselGroup } from '@globalfishingwatch/api-types'
 import { useAppDispatch } from 'features/app/app.hooks'
+import {
+  setVesselGroupEditId,
+  setVesselGroupsModalOpen,
+  setVesselGroupConfirmationMode,
+} from 'features/vessel-groups/vessel-groups-modal.slice'
 import { fetchVesselGroupReportThunk } from './vessel-group-report.slice'
 
 export function useFetchVesselGroupReport() {
@@ -20,3 +26,18 @@ export function useFetchVesselGroupReport() {
 
   return fetchVesselGroupReport
 }
+
+export function useEditVesselGroupModal() {
+  const dispatch = useAppDispatch()
+
+  const onEditClick = useCallback(
+    async (vesselGroup: VesselGroup) => {
+      dispatch(setVesselGroupEditId(vesselGroup.id))
+      dispatch(setVesselGroupsModalOpen(true))
+      dispatch(setVesselGroupConfirmationMode('update'))
+    },
+    [dispatch]
+  )
+
+  return onEditClick
+}

apps/fishing-map/features/user/UserVesselGroups.tsx

@@ -21,10 +21,9 @@ import { sortByCreationDate } from 'utils/dates'
 import VesselGroupReportLink from 'features/reports/vessel-groups/VesselGroupReportLink'
 import {
   selectVesselGroupEditId,
-  setVesselGroupConfirmationMode,
-  setVesselGroupEditId,
   setVesselGroupsModalOpen,
 } from 'features/vessel-groups/vessel-groups-modal.slice'
+import { useEditVesselGroupModal } from 'features/reports/vessel-groups/vessel-group-report.hooks'
 import { selectUserVesselGroups } from './selectors/user.permissions.selectors'
 import styles from './User.module.css'
 
@@ -39,20 +38,12 @@ function UserVesselGroups() {
     datasetsStatus === AsyncReducerStatus.Loading ||
     vesselGroupStatus === AsyncReducerStatus.Loading
   const editingGroupId = useSelector(selectVesselGroupEditId)
+  const onEditClick = useEditVesselGroupModal()
 
   const onNewGroupClick = useCallback(() => {
     dispatch(setVesselGroupsModalOpen(true))
   }, [dispatch])
 
-  const onEditClick = useCallback(
-    async (vesselGroup: VesselGroup) => {
-      dispatch(setVesselGroupEditId(vesselGroup.id))
-      dispatch(setVesselGroupsModalOpen(true))
-      dispatch(setVesselGroupConfirmationMode('update'))
-    },
-    [dispatch]
-  )
-
   const onDeleteClick = useCallback(
     (vesselGroup: VesselGroup) => {
       const confirmation = window.confirm(

apps/fishing-map/features/vessel-groups/VesselGroupModal.tsx

@@ -45,6 +45,7 @@ import {
 import { getPlaceholderBySelections } from 'features/i18n/utils'
 import { selectVesselGroupCompatibleDatasets } from 'features/datasets/datasets.selectors'
 import { getDatasetLabel } from 'features/datasets/datasets.utils'
+import { DEFAULT_VESSEL_IDENTITY_DATASET } from 'features/vessel/vessel.config'
 import {
   IdField,
   createVesselGroupThunk,
@@ -120,7 +121,12 @@ function VesselGroupModal(): React.ReactElement {
     id: d.id,
     label: getDatasetLabel(d),
   }))
-  const [sourcesSelected, setSourcesSelected] = useState<SelectOption[]>([sourceOptions[0]])
+  const defaultSourceSelected = sourceOptions.find((s) =>
+    s.id.includes(DEFAULT_VESSEL_IDENTITY_DATASET)
+  )
+  const [sourcesSelected, setSourcesSelected] = useState<SelectOption[]>(
+    defaultSourceSelected ? [defaultSourceSelected] : []
+  )
 
   const onSelectSourceClick = useCallback(
     (source: SelectOption) => {
@@ -317,7 +323,7 @@ function VesselGroupModal(): React.ReactElement {
 
   const missesRequiredParams = hasVesselGroupsVessels
     ? groupName === ''
-    : searchIdField === '' || !vesselGroupVesselsToSearch?.length
+    : searchIdField === '' || !vesselGroupVesselsToSearch?.length || !sourcesSelected?.length
   const confirmButtonDisabled =
     loading ||
     hasVesselsOverflow ||

apps/fishing-map/features/workspace/workspace.hook.ts

@@ -17,6 +17,8 @@ import { useLocationConnect } from 'routes/routes.hook'
 import { selectDataviewInstancesResolved } from 'features/dataviews/selectors/dataviews.resolvers.selectors'
 import { useSetMapCoordinates } from 'features/map/map-viewport.hooks'
 import { useTimerangeConnect } from 'features/timebar/timebar.hooks'
+import { LAYERS_LIBRARY_ACTIVITY } from 'data/layer-library/layers-activity'
+import { LAYERS_LIBRARY_DETECTIONS } from 'data/layer-library/layers-detections'
 import { selectWorkspaceDataviewInstances } from './workspace.selectors'
 
 export const useFitWorkspaceBounds = () => {
@@ -50,7 +52,10 @@ const createDataviewsInstances = (
   newDataviewInstances: Partial<UrlDataviewInstance>[],
   currentDataviewInstances: UrlDataviewInstance[] = []
 ): UrlDataviewInstance[] => {
-  const currentColors = currentDataviewInstances.flatMap((dv) => dv.config?.color || [])
+  const defaultDataviewInstances = [...LAYERS_LIBRARY_ACTIVITY, ...LAYERS_LIBRARY_DETECTIONS]
+  const currentColors = (currentDataviewInstances || defaultDataviewInstances).flatMap(
+    (dv) => dv.config?.color || []
+  )
   return newDataviewInstances.map((dataview) => {
     if (dataview.config?.colorCyclingType) {
       const nextColor = getNextColor(dataview.config.colorCyclingType, currentColors)

apps/fishing-map/public/locales/en/translations.json

@@ -1024,6 +1024,7 @@
     "addToWorkspace": "Add vessel group to workspace",
     "addVessels": "Add vessels to vessel group",
     "addVisibleVessels": "Add visible vessels to vessel group",
+    "clickToMigrate": "Click to migrate",
     "clickToUpdate": "Click to migrate your vessel group to latest available data",
     "confirmAbort": "You will lose any changes made in this vessel group. Are you sure?",
     "confirmRemove": "Are you sure you want to permanently delete this vessel group?",