From 2dbdb9e02ef8e6463c26f39f770b709f2cddff76 Mon Sep 17 00:00:00 2001 From: j8seangel Date: Fri, 13 Dec 2024 16:36:14 +0100 Subject: [PATCH 1/2] wip: don't show anchorages --- apps/fishing-map/data/workspaces.ts | 4 +-- .../features/dataviews/dataviews.mock.ts | 34 +++++++++++++++++-- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/apps/fishing-map/data/workspaces.ts b/apps/fishing-map/data/workspaces.ts index 364360d63e..0568bce84f 100644 --- a/apps/fishing-map/data/workspaces.ts +++ b/apps/fishing-map/data/workspaces.ts @@ -1,4 +1,4 @@ -import type { DataviewInstance } from '@globalfishingwatch/api-types'; +import type { DataviewInstance } from '@globalfishingwatch/api-types' import { DataviewType } from '@globalfishingwatch/api-types' import { BasemapType } from '@globalfishingwatch/deck-layers' import { PUBLIC_SUFIX } from './config' @@ -51,7 +51,7 @@ export const FAO_AREAS_DATAVIEW_INSTANCE_ID = 'context-layer-fao-areas' export const FISHING_DATAVIEW_SLUG = 'apparent-fishing-effort-v-3' export const CLUSTER_ENCOUNTER_EVENTS_DATAVIEW_SLUG = 'encounter-cluster-events-v-3' export const CLUSTER_LOITERING_EVENTS_DATAVIEW_SLUG = 'loitering-cluster-events-v-3' -export const CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG = 'port-visit-cluster-events-v-3' +export const CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG = 'port-visit-cluster-events-v-3-mock' export const VIIRS_MATCH_DATAVIEW_SLUG = 'viirs-match-v-3' export const SAR_DATAVIEW_SLUG = 'sar-v-3' export const PRESENCE_DATAVIEW_SLUG = 'presence-activity-v-3' diff --git a/apps/fishing-map/features/dataviews/dataviews.mock.ts b/apps/fishing-map/features/dataviews/dataviews.mock.ts index 51cd9ade67..1e69c13a62 100644 --- a/apps/fishing-map/features/dataviews/dataviews.mock.ts +++ b/apps/fishing-map/features/dataviews/dataviews.mock.ts @@ -1,6 +1,36 @@ -import type { Dataview} from '@globalfishingwatch/api-types'; +import type { Dataview } from '@globalfishingwatch/api-types' import { DataviewCategory } from '@globalfishingwatch/api-types' -const dataviews: Dataview[] = [] +const dataviews: Dataview[] = [ + { + id: 410, + name: 'port visit cluster events pipe 3', + slug: 'port-visit-cluster-events-v-3-mock', + app: 'fishing-map', + config: { + type: 'FOURWINGS_TILE_CLUSTER', + color: '#9AEEFF', + clusterMaxZoomLevels: { + country: 3, + port: 24, + }, + }, + infoConfig: null, + filtersConfig: null, + eventsConfig: null, + datasetsConfig: [ + { + query: [], + params: [], + endpoint: 'events-cluster-tiles', + datasetId: 'public-global-port-visits-events:v3.1', + }, + ], + description: 'port visit cluster events', + createdAt: '2024-10-21T09:42:47.554Z', + updatedAt: '2024-12-13T13:03:07.854Z', + category: 'events', + }, +] export default dataviews From 1f9e4fb670bb7266b6dec9f3be1da9e044e0fbc4 Mon Sep 17 00:00:00 2001 From: satellitestudiodesign Date: Tue, 14 Jan 2025 17:20:57 +0100 Subject: [PATCH 2/2] fixes for internal release --- .../data/layer-library/layers-events.ts | 36 +++++++++---------- apps/fishing-map/data/workspaces.ts | 2 +- .../features/dataviews/dataviews.mock.ts | 32 +---------------- .../features/map/popups/Popup.module.css | 10 +++++- .../categories/TileClusterTooltipRow.tsx | 21 +++++------ .../reports/ports/PortsReportLink.tsx | 12 +++---- .../reports/ports/ports-report.utils.ts | 12 ++++--- 7 files changed, 52 insertions(+), 73 deletions(-) diff --git a/apps/fishing-map/data/layer-library/layers-events.ts b/apps/fishing-map/data/layer-library/layers-events.ts index 85a1829480..9a0a06b2e9 100644 --- a/apps/fishing-map/data/layer-library/layers-events.ts +++ b/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) diff --git a/apps/fishing-map/data/workspaces.ts b/apps/fishing-map/data/workspaces.ts index 0568bce84f..b3720a7888 100644 --- a/apps/fishing-map/data/workspaces.ts +++ b/apps/fishing-map/data/workspaces.ts @@ -51,7 +51,7 @@ export const FAO_AREAS_DATAVIEW_INSTANCE_ID = 'context-layer-fao-areas' export const FISHING_DATAVIEW_SLUG = 'apparent-fishing-effort-v-3' export const CLUSTER_ENCOUNTER_EVENTS_DATAVIEW_SLUG = 'encounter-cluster-events-v-3' export const CLUSTER_LOITERING_EVENTS_DATAVIEW_SLUG = 'loitering-cluster-events-v-3' -export const CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG = 'port-visit-cluster-events-v-3-mock' +export const CLUSTER_PORT_VISIT_EVENTS_DATAVIEW_SLUG = 'port-visit-cluster-events-v-3' export const VIIRS_MATCH_DATAVIEW_SLUG = 'viirs-match-v-3' export const SAR_DATAVIEW_SLUG = 'sar-v-3' export const PRESENCE_DATAVIEW_SLUG = 'presence-activity-v-3' diff --git a/apps/fishing-map/features/dataviews/dataviews.mock.ts b/apps/fishing-map/features/dataviews/dataviews.mock.ts index 1e69c13a62..9ba2d067c0 100644 --- a/apps/fishing-map/features/dataviews/dataviews.mock.ts +++ b/apps/fishing-map/features/dataviews/dataviews.mock.ts @@ -1,36 +1,6 @@ import type { Dataview } from '@globalfishingwatch/api-types' import { DataviewCategory } from '@globalfishingwatch/api-types' -const dataviews: Dataview[] = [ - { - id: 410, - name: 'port visit cluster events pipe 3', - slug: 'port-visit-cluster-events-v-3-mock', - app: 'fishing-map', - config: { - type: 'FOURWINGS_TILE_CLUSTER', - color: '#9AEEFF', - clusterMaxZoomLevels: { - country: 3, - port: 24, - }, - }, - infoConfig: null, - filtersConfig: null, - eventsConfig: null, - datasetsConfig: [ - { - query: [], - params: [], - endpoint: 'events-cluster-tiles', - datasetId: 'public-global-port-visits-events:v3.1', - }, - ], - description: 'port visit cluster events', - createdAt: '2024-10-21T09:42:47.554Z', - updatedAt: '2024-12-13T13:03:07.854Z', - category: 'events', - }, -] +const dataviews: Dataview[] = [] export default dataviews diff --git a/apps/fishing-map/features/map/popups/Popup.module.css b/apps/fishing-map/features/map/popups/Popup.module.css index 88c27f80a0..e89412c2c2 100644 --- a/apps/fishing-map/features/map/popups/Popup.module.css +++ b/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%; +} diff --git a/apps/fishing-map/features/map/popups/categories/TileClusterTooltipRow.tsx b/apps/fishing-map/features/map/popups/categories/TileClusterTooltipRow.tsx index c6e6f69f2d..e3c9bb89a9 100644 --- a/apps/fishing-map/features/map/popups/categories/TileClusterTooltipRow.tsx +++ b/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
{

{title}

} - {isGFWUser && event?.port && ( - -
- {event?.port?.name || event?.port?.id} - {event?.port?.country && ` (${formatInfoField(event.port.country, 'flag')})`} - -
- - )} {error &&

{error}

} {showFeaturesDetails && ( )} + {isGFWUser && event?.port && !isPortReportLocation && ( + + + + )}
) diff --git a/apps/fishing-map/features/reports/ports/PortsReportLink.tsx b/apps/fishing-map/features/reports/ports/PortsReportLink.tsx index 0527dea631..583320b3bd 100644 --- a/apps/fishing-map/features/reports/ports/PortsReportLink.tsx +++ b/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 ( - - {children} - + {children} ) } diff --git a/apps/fishing-map/features/reports/ports/ports-report.utils.ts b/apps/fishing-map/features/reports/ports/ports-report.utils.ts index a0b6f948c4..0c5905b124 100644 --- a/apps/fishing-map/features/reports/ports/ports-report.utils.ts +++ b/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 }), }, }, }