wip: don't show anchorages

apps/api-portal/features/user-applications/user-applications.ts

@@ -1,9 +1,9 @@
 import { stringify } from 'qs'
 import { useMutation, useQuery, useQueryClient } from 'react-query'
 import { useMemo, useState } from 'react'
+import type { FieldValidationError } from 'lib/types'
 import { GFWAPI } from '@globalfishingwatch/api-client'
 import type { APIPagination, UserApplication } from '@globalfishingwatch/api-types'
-import type { FieldValidationError } from 'lib/types'
 import useUser, { checkUserApplicationPermission } from 'features/user/user'
 
 export type UserApplicationCreateArguments = Omit<

apps/fishing-map/data/layer-library/layers-events.ts

@@ -20,24 +20,24 @@ export const LAYERS_LIBRARY_EVENTS: LibraryLayerConfig[] = [
       color: '#FAE9A0',
     },
   },
-  // {
-  //   id: LOITERING_EVENTS_SOURCE_ID,
-  //   dataviewId: CLUSTER_LOITERING_EVENTS_DATAVIEW_SLUG,
-  //   previewImageUrl: `${PATH_BASENAME}/images/layer-library/loitering.jpg`,
-  //   config: {
-  //     color: '#CEA9F9',
-  //   },
-  //   onlyGFWUser: true,
-  // },
-  // {
-  //   id: PORT_VISITS_EVENTS_SOURCE_ID,
-  //   dataviewId: CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG,
-  //   previewImageUrl: `${PATH_BASENAME}/images/layer-library/port-visits.jpg`,
-  //   config: {
-  //     color: '#9AEEFF',
-  //   },
-  //   onlyGFWUser: true,
-  // },
+  {
+    id: LOITERING_EVENTS_SOURCE_ID,
+    dataviewId: CLUSTER_LOITERING_EVENTS_DATAVIEW_SLUG,
+    previewImageUrl: `${PATH_BASENAME}/images/layer-library/loitering.jpg`,
+    config: {
+      color: '#CEA9F9',
+    },
+    onlyGFWUser: true,
+  },
+  {
+    id: PORT_VISITS_EVENTS_SOURCE_ID,
+    dataviewId: CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG,
+    previewImageUrl: `${PATH_BASENAME}/images/layer-library/port-visits.jpg`,
+    config: {
+      color: '#9AEEFF',
+    },
+    onlyGFWUser: true,
+  },
 ]
 
 export const LAYER_LIBRARY_EVENTS_IDS = LAYERS_LIBRARY_EVENTS.map((layer) => layer.id)

apps/fishing-map/features/download/downloadActivity.slice.ts

@@ -2,6 +2,7 @@ import type { PayloadAction } from '@reduxjs/toolkit'
 import { createAsyncThunk, createSelector, createSlice } from '@reduxjs/toolkit'
 import { stringify } from 'qs'
 import { saveAs } from 'file-saver'
+import type { RootState } from 'reducers'
 import type { Dataview, DownloadActivity } from '@globalfishingwatch/api-types'
 import {
   getIsConcurrentError,
@@ -10,7 +11,6 @@ import {
   parseAPIError,
 } from '@globalfishingwatch/api-client'
 import type { UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
-import type { RootState } from 'reducers'
 import type { AsyncError } from 'utils/async-slice'
 import { AsyncReducerStatus } from 'utils/async-slice'
 import type { AreaKeyId, AreaKeys } from 'features/areas/areas.slice'

apps/fishing-map/features/download/downloadTrack.slice.ts

@@ -2,9 +2,9 @@ import type { PayloadAction } from '@reduxjs/toolkit'
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 import { stringify } from 'qs'
 import { saveAs } from 'file-saver'
+import type { RootState } from 'reducers'
 import type { DownloadRateLimit, ThinningConfig } from '@globalfishingwatch/api-types'
 import { GFWAPI, parseAPIError } from '@globalfishingwatch/api-client'
-import type { RootState } from 'reducers'
 import type { AsyncError } from 'utils/async-slice'
 import { AsyncReducerStatus } from 'utils/async-slice'
 import type { DateRange } from 'features/download/downloadActivity.slice'

apps/fishing-map/features/editor/editor.slice.ts

@@ -1,8 +1,8 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 import { stringify } from 'qs'
+import type { RootState } from 'reducers'
 import { GFWAPI, parseAPIError } from '@globalfishingwatch/api-client'
 import type { APIPagination, Dataview } from '@globalfishingwatch/api-types'
-import type { RootState } from 'reducers'
 import type { AsyncError } from 'utils/async-slice'
 import { AsyncReducerStatus } from 'utils/async-slice'
 import { APP_NAME, DEFAULT_PAGINATION_PARAMS } from 'data/config'

apps/fishing-map/features/map/controls/map-controls.slice.ts

@@ -1,7 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit'
 import { createSelector, createSlice } from '@reduxjs/toolkit'
-import type { RulerData } from '@globalfishingwatch/deck-layers'
 import type { RootState } from 'reducers'
+import type { RulerData } from '@globalfishingwatch/deck-layers'
 import type { MapAnnotation } from '../overlays/annotations/annotations.types'
 
 export type MapControl = 'annotations' | 'rulers' | 'errorNotification'

apps/fishing-map/features/map/popups/Popup.module.css

@@ -24,7 +24,9 @@
   font: var(--font-L);
   line-height: 1;
   margin: var(--space-XS);
-  transition: opacity 0.15s linear, color 0.15s linear;
+  transition:
+    opacity 0.15s linear,
+    color 0.15s linear;
   z-index: 1;
   top: -2rem;
   right: -2rem;
@@ -283,3 +285,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.portCTA {
+  margin-top: var(--space-S);
+  display: block;
+  width: 100%;
+}

apps/fishing-map/features/map/popups/categories/TileClusterTooltipRow.tsx

@@ -2,7 +2,7 @@ import { Fragment, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { stringify } from 'qs'
 import { useSelector } from 'react-redux'
-import { Button, Icon, IconButton } from '@globalfishingwatch/ui-components'
+import { Button, Icon } from '@globalfishingwatch/ui-components'
 import { DatasetTypes, DataviewCategory } from '@globalfishingwatch/api-types'
 import { AsyncReducerStatus } from 'utils/async-slice'
 import I18nDate from 'features/i18n/i18nDate'
@@ -22,6 +22,7 @@ import { VESSEL_GROUP_EVENTS_DATAVIEW_IDS } from 'features/reports/vessel-groups
 import { getEventDescriptionComponent } from 'utils/events'
 import PortsReportLink from 'features/reports/ports/PortsReportLink'
 import { selectIsGFWUser } from 'features/user/selectors/user.selectors'
+import { selectIsPortReportLocation } from 'routes/routes.selectors'
 import { useMapViewState } from '../../map-viewport.hooks'
 import type {
   ExtendedEventVessel,
@@ -193,6 +194,8 @@ type PortVisitLayerProps = {
   error?: string
 }
 function PortVisitEventTooltipRow({ feature, showFeaturesDetails, error }: PortVisitLayerProps) {
+  const { t } = useTranslation()
+  const isPortReportLocation = useSelector(selectIsPortReportLocation)
   const { datasetId, event, color } = feature
   const title = getDatasetLabel({ id: datasetId! })
   const isGFWUser = useSelector(selectIsGFWUser)
@@ -201,15 +204,6 @@ function PortVisitEventTooltipRow({ feature, showFeaturesDetails, error }: PortV
       <Icon icon="clusters" className={styles.layerIcon} style={{ color }} />
       <div className={styles.popupSectionContent}>
         {<h3 className={styles.popupSectionTitle}>{title}</h3>}
-        {isGFWUser && event?.port && (
-          <PortsReportLink port={event.port}>
-            <div className={styles.textContainer}>
-              {event?.port?.name || event?.port?.id}
-              {event?.port?.country && ` (${formatInfoField(event.port.country, 'flag')})`}
-              <IconButton size="small" icon="analysis" />
-            </div>
-          </PortsReportLink>
-        )}
         {error && <p className={styles.error}>{error}</p>}
         {showFeaturesDetails && (
           <VesselsTable
@@ -222,6 +216,13 @@ function PortVisitEventTooltipRow({ feature, showFeaturesDetails, error }: PortV
             vesselProperty="events"
           />
         )}
+        {isGFWUser && event?.port && !isPortReportLocation && (
+          <PortsReportLink port={event.port}>
+            <Button className={styles.portCTA}>
+              {t('portsReport.seePortReport', 'See all entry events to this port')}
+            </Button>
+          </PortsReportLink>
+        )}
       </div>
     </div>
   )

apps/fishing-map/features/modals/modals.slice.ts

@@ -1,7 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit'
 import { createSlice } from '@reduxjs/toolkit'
-import type { DatasetGeometryType, DataviewCategory } from '@globalfishingwatch/api-types'
 import type { RootState } from 'reducers'
+import type { DatasetGeometryType, DataviewCategory } from '@globalfishingwatch/api-types'
 
 type ModalId =
   | 'feedback'

apps/fishing-map/features/reports/areas/area-reports.hooks.ts

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo } from 'react'
 import { useSelector } from 'react-redux'
+import { useGetStatsByDataviewQuery } from 'queries/stats-api'
 import type { UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
 import type { Dataset, Dataview } from '@globalfishingwatch/api-types'
 import { useLocalStorage } from '@globalfishingwatch/react-hooks'
 import { useGetDeckLayers } from '@globalfishingwatch/deck-layer-composer'
 import type { ContextFeature, ContextLayer } from '@globalfishingwatch/deck-layers'
-import { useGetStatsByDataviewQuery } from 'queries/stats-api'
 import { useAppDispatch } from 'features/app/app.hooks'
 import { selectTimeRange } from 'features/app/selectors/app.timebar.selectors'
 import {

apps/fishing-map/features/reports/ports/PortsReportLink.tsx

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux'
+import cx from 'classnames'
 import React from 'react'
 import Link from 'redux-first-router-link'
-import { useTranslation } from 'react-i18next'
 import { Tooltip } from '@globalfishingwatch/ui-components'
 import type { UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
 import { DataviewType } from '@globalfishingwatch/api-types'
@@ -21,12 +21,12 @@ import { getPortClusterDataviewForReport } from './ports-report.utils'
 type PortsReportLinkProps = {
   port: ExtendedFeatureByVesselEventPort
   children: React.ReactNode
+  tooltip?: string
 }
 
-function PortsReportLink({ children, port }: PortsReportLinkProps) {
+function PortsReportLink({ children, port, tooltip }: PortsReportLinkProps) {
   const workspace = useSelector(selectWorkspace)
   const query = useSelector(selectLocationQuery)
-  const { t } = useTranslation()
 
   if (!workspace || !port) {
     return children
@@ -55,7 +55,7 @@ function PortsReportLink({ children, port }: PortsReportLinkProps) {
 
   return (
     <Link
-      className={styles.link}
+      className={cx(styles.link)}
       to={{
         type: PORT_REPORT,
         payload: {
@@ -72,9 +72,7 @@ function PortsReportLink({ children, port }: PortsReportLinkProps) {
         },
       }}
     >
-      <Tooltip content={t('portsReport.seePortReport', 'See all entry events to this port')}>
-        <span>{children}</span>
-      </Tooltip>
+      <Tooltip content={tooltip}>{children}</Tooltip>
     </Link>
   )
 }

apps/fishing-map/features/reports/ports/ports-report.utils.ts

@@ -8,21 +8,23 @@ export function isPortClusterDataviewForReport(dataview: UrlDataviewInstance) {
 
 export function getPortClusterDataviewForReport(
   dataview: UrlDataviewInstance,
-  { portId, clusterMaxZoomLevels } = {} as {
+  { portId, clusterMaxZoomLevels: newClusterMaxZoomLevels } = {} as {
     portId?: string
     clusterMaxZoomLevels?: ClusterMaxZoomLevelConfig
   }
 ) {
   if (isPortClusterDataviewForReport(dataview)) {
+    const { clusterMaxZoomLevels, ...restConfig } = dataview.config || {}
+    const { port_id, ...restFilters } = restConfig.filters || {}
     return {
       ...dataview,
       config: {
-        ...dataview.config,
+        ...restConfig,
         visible: true,
-        clusterMaxZoomLevels,
+        ...(newClusterMaxZoomLevels && { clusterMaxZoomLevels: newClusterMaxZoomLevels }),
         filters: {
-          ...(dataview.config?.filters || {}),
-          port_id: portId,
+          ...(restFilters || {}),
+          ...(portId && { port_id: portId }),
         },
       },
     }

apps/fishing-map/features/reports/vessel-groups/insights/VGRInsightFishing.tsx

@@ -2,10 +2,10 @@ import { useTranslation } from 'react-i18next'
 import { useState } from 'react'
 import cx from 'classnames'
 import { useSelector } from 'react-redux'
+import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api'
 import type { ParsedAPIError } from '@globalfishingwatch/api-client'
 import { Collapsable } from '@globalfishingwatch/ui-components'
 import { RegionType, VesselIdentitySourceEnum } from '@globalfishingwatch/api-types'
-import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api'
 import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { formatInfoField } from 'utils/info'

apps/fishing-map/features/reports/vessel-groups/insights/VGRInsightMOU.tsx

@@ -3,10 +3,10 @@ import { useState } from 'react'
 import cx from 'classnames'
 import { useSelector } from 'react-redux'
 import { groupBy } from 'es-toolkit'
+import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api'
 import type { ParsedAPIError } from '@globalfishingwatch/api-client'
 import { Collapsable } from '@globalfishingwatch/ui-components'
 import { VesselIdentitySourceEnum } from '@globalfishingwatch/api-types'
-import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api'
 import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { selectIsGuestUser } from 'features/user/selectors/user.selectors'

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

@@ -1,11 +1,11 @@
 import { createSelector } from '@reduxjs/toolkit'
-import type { InsightType } from '@globalfishingwatch/api-types'
 import type { VesselGroupInsightParams } from 'queries/vessel-insight-api'
 import {
   selectVesselGroupInsight,
   selectVesselGroupInsightApiSlice,
 } from 'queries/vessel-insight-api'
 import type { RootState } from 'reducers'
+import type { InsightType } from '@globalfishingwatch/api-types'
 import { selectReportVesselGroupId } from 'routes/routes.selectors'
 import { selectTimeRange } from 'features/app/selectors/app.timebar.selectors'
 import { dataviewHasVesselGroupId } from 'features/dataviews/dataviews.utils'

apps/fishing-map/features/vessel/insights/InsightGapsDetails.tsx

@@ -1,10 +1,10 @@
 import { useSelector } from 'react-redux'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useGetVesselEventsQuery } from 'queries/vessel-events-api'
 import type { InsightResponse } from '@globalfishingwatch/api-types'
 import { VesselIdentitySourceEnum } from '@globalfishingwatch/api-types'
 import { IconButton } from '@globalfishingwatch/ui-components'
-import { useGetVesselEventsQuery } from 'queries/vessel-events-api'
 import { getVesselIdentities } from 'features/vessel/vessel.utils'
 import { selectTimeRange } from 'features/app/selectors/app.timebar.selectors'
 import { removeNonTunaRFMO } from 'features/vessel/insights/insights.utils'

apps/fishing-map/features/vessel/insights/InsightWrapper.tsx

@@ -1,8 +1,8 @@
 import { useSelector } from 'react-redux'
+import { useGetVesselInsightQuery } from 'queries/vessel-insight-api'
 import type { InsightType } from '@globalfishingwatch/api-types'
 import { VesselIdentitySourceEnum } from '@globalfishingwatch/api-types'
 import type { ParsedAPIError } from '@globalfishingwatch/api-client'
-import { useGetVesselInsightQuery } from 'queries/vessel-insight-api'
 import { getVesselIdentities } from 'features/vessel/vessel.utils'
 import { selectTimeRange } from 'features/app/selectors/app.timebar.selectors'
 import InsightMOUList from 'features/vessel/insights/InsightMOUList'

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

@@ -1,6 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit'
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 import { HYDRATE } from 'next-redux-wrapper'
+import type { RootState } from 'reducers'
 import type { ParsedAPIError } from '@globalfishingwatch/api-client'
 import { GFWAPI, parseAPIError } from '@globalfishingwatch/api-client'
 import type {
@@ -19,7 +20,6 @@ import { DatasetTypes, ResourceStatus } from '@globalfishingwatch/api-types'
 import { setResource } from '@globalfishingwatch/dataviews-client'
 import { resolveEndpoint } from '@globalfishingwatch/datasets-client'
 import { VesselIdentitySourceEnum } from '@globalfishingwatch/api-types'
-import type { RootState } from 'reducers'
 import { AsyncReducerStatus } from 'utils/async-slice'
 import { selectResources } from 'features/resources/resources.slice'
 import {

apps/fishing-map/middlewares.ts

@@ -1,8 +1,8 @@
 import type { Middleware } from 'redux'
 import type { ThunkDispatch } from '@reduxjs/toolkit'
 import { isRejectedWithValue } from '@reduxjs/toolkit'
-import { isUnauthorized } from '@globalfishingwatch/api-client'
 import type { RootState } from 'reducers'
+import { isUnauthorized } from '@globalfishingwatch/api-client'
 import type { AsyncError } from 'utils/async-slice'
 import { setLoginExpired } from 'features/user/user.slice'
 import { selectIsGuestUser } from 'features/user/selectors/user.selectors'

apps/fishing-map/routes/routes.middlewares.ts

@@ -1,6 +1,6 @@
 import type { Middleware, Dispatch } from 'redux'
-import { ACCESS_TOKEN_STRING } from '@globalfishingwatch/api-client'
 import type { RootState } from 'reducers'
+import { ACCESS_TOKEN_STRING } from '@globalfishingwatch/api-client'
 import { REPLACE_URL_PARAMS } from 'routes/routes.config'
 import { setLastWorkspaceVisited } from 'features/workspace/workspace.slice'
 import type { QueryParam, QueryParams } from 'types'

apps/fishing-map/server/vessel/vessel.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import { useSelector } from 'react-redux'
-import { Logo } from '@globalfishingwatch/ui-components'
 import { serverT } from 'server/i18n'
+import { Logo } from '@globalfishingwatch/ui-components'
 import { AsyncReducerStatus } from 'utils/async-slice'
 import { IDENTITY_FIELD_GROUPS } from 'features/vessel/vessel.config'
 import { formatInfoField } from 'utils/info'

apps/real-time-prototype/features/map/Map.tsx

@@ -8,14 +8,14 @@ import { useAtom } from 'jotai'
 import { BitmapLayer } from '@deck.gl/layers'
 import { TileLayer } from '@deck.gl/geo-layers'
 import uniqBy from 'lodash/uniqBy'
-import { GFWAPI } from '@globalfishingwatch/api-client'
-import type { MiniglobeBounds} from '@globalfishingwatch/ui-components';
-import { MiniGlobe, Tooltip } from '@globalfishingwatch/ui-components'
-import { BasemapType } from '@globalfishingwatch/layer-composer'
 import { useTracksLayer, useTracksSublayers } from 'layers/tracks/tracks.hooks'
 import { useLatestPositionsLayer } from 'layers/latest-positions/latest-positions.hooks'
 import { useContextsLayer } from 'layers/context/context.hooks'
 import { useBasemapLayer } from 'layers/basemap/basemap.hooks'
+import { GFWAPI } from '@globalfishingwatch/api-client'
+import type { MiniglobeBounds} from '@globalfishingwatch/ui-components';
+import { MiniGlobe, Tooltip } from '@globalfishingwatch/ui-components'
+import { BasemapType } from '@globalfishingwatch/layer-composer'
 import { useURLViewport, useViewport } from 'features/map/map-viewport.hooks'
 import { hoveredFeaturesAtom } from 'features/map/map-picking.hooks'
 import { getDateLabel } from 'utils/dates'