| {ssvid} |
{vesselName} |
-
-
- {isFieldLoginRequired(vesselGearType) ? (
-
- ) : (
- vesselGearType || EMPTY_FIELD_PLACEHOLDER
- )}
-
-
+ {flag ? t(`flags:${flag as string}` as any) : EMPTY_FIELD_PLACEHOLDER}
|
{isFieldLoginRequired(vesselGearType) ? : vesselGearType}
|
{transmissionDateFrom && transmissionDateTo && (
- // TODO tooltip not working
+ // TODO:VV3 tooltip not working
@@ -95,62 +79,27 @@ function VesselGroupVesselRow({
)
}
-type VesselGroupDataIdentity = VesselDataIdentity & { dataset: string }
-function groupSearchVesselsIdentityBy(vessels: IdentityVessel[] | null, groupByKey: string) {
- if (!vessels?.length) {
- return {}
- }
- return groupBy(
- vessels.map(
- (v) =>
- ({
- dataset: v.dataset,
- ...getLatestIdentityPrioritised(v),
- } as VesselGroupDataIdentity)
- ),
- (v) => (v as any)[groupByKey]
- )
-}
-
function VesselGroupVessels() {
const { t } = useTranslation()
- const vesselGroupSearchVessels = useSelector(selectVesselGroupSearchVessels)
- const newVesselGroupSearchVessels = useSelector(selectNewVesselGroupSearchVessels)
- const groupByKey = [
- ...(vesselGroupSearchVessels || []),
- ...(newVesselGroupSearchVessels || []),
- ].some((vessel) => {
- const ssvid = getVesselProperty(vessel, 'ssvid')
- return ssvid !== undefined && ssvid !== ''
- })
- ? 'ssvid'
- : 'id'
- const searchVesselsGrouped = groupSearchVesselsIdentityBy(vesselGroupSearchVessels, groupByKey)
- const newSearchVesselsGrouped = groupSearchVesselsIdentityBy(
- newVesselGroupSearchVessels,
- groupByKey
- )
const dispatch = useAppDispatch()
+ const vesselGroupVessels = useSelector(selectVesselGroupModalVessels)
const onVesselRemoveClick = useCallback(
- (vessel: VesselGroupDataIdentity, list: 'search' | 'new' = 'search') => {
- const vessels = list === 'search' ? vesselGroupSearchVessels : newVesselGroupSearchVessels
- const action = (
- list === 'search' ? setVesselGroupSearchVessels : setNewVesselGroupSearchVessels
- ) as ActionCreatorWithPayload
- const index = vessels!.findIndex(
- (v) => getLatestIdentityPrioritised(v).id === vessel?.id && v.dataset === vessel.dataset
- )
- if (index > -1) {
- dispatch(action([...vessels!.slice(0, index), ...vessels!.slice(index + 1)]))
+ (vessel: VesselGroupVesselIdentity) => {
+ if (vesselGroupVessels) {
+ const filteredVessels = vesselGroupVessels.filter(
+ (v) => v.vesselId !== vessel.vesselId && v.relationId !== vessel.vesselId
+ )
+ dispatch(setVesselGroupModalVessels(filteredVessels))
}
},
- [dispatch, newVesselGroupSearchVessels, vesselGroupSearchVessels]
+ [dispatch, vesselGroupVessels]
)
- if (!vesselGroupSearchVessels?.length && !newVesselGroupSearchVessels?.length) {
+ if (!vesselGroupVessels?.length) {
return null
}
+
return (
@@ -164,44 +113,19 @@ function VesselGroupVessels() {
- {Object.keys(newSearchVesselsGrouped)?.length > 0 &&
- Object.keys(newSearchVesselsGrouped).map((mmsi) => {
- if (!mmsi || mmsi === 'undefined') {
- return null
- }
- const vessels = newSearchVesselsGrouped[mmsi]
- return vessels.map((vessel) => (
-
- onVesselRemoveClick(vessel as VesselGroupDataIdentity, 'new')
- }
- />
- ))
- })}
- {Object.keys(searchVesselsGrouped)?.length > 0 &&
- Object.keys(searchVesselsGrouped).map((mmsi) => {
- if (newSearchVesselsGrouped[mmsi]) {
- return null
- }
- const vessels = searchVesselsGrouped[mmsi]
- return (
-
- {vessels.map((vessel, i) => (
-
- onVesselRemoveClick(vessel as VesselGroupDataIdentity)
- }
- className={i === vessels.length - 1 ? styles.border : ''}
- />
- ))}
-
- )
- })}
+ {vesselGroupVessels?.map((vessel) => {
+ if (!vessel.identity) {
+ return null
+ }
+ return (
+ onVesselRemoveClick(vessel)}
+ />
+ )
+ })}
)
diff --git a/apps/fishing-map/features/vessel-groups/vessel-groups-modal.slice.ts b/apps/fishing-map/features/vessel-groups/vessel-groups-modal.slice.ts
new file mode 100644
index 0000000000..cb8ad901e1
--- /dev/null
+++ b/apps/fishing-map/features/vessel-groups/vessel-groups-modal.slice.ts
@@ -0,0 +1,358 @@
+import { createAsyncThunk, PayloadAction, createSlice } from '@reduxjs/toolkit'
+import { uniq } from 'es-toolkit'
+import { RootState } from 'reducers'
+import {
+ APIPagination,
+ APIVesselSearchPagination,
+ DatasetStatus,
+ DataviewDatasetConfig,
+ EndpointId,
+ IdentityVessel,
+ VesselGroup,
+ VesselGroupVessel,
+} from '@globalfishingwatch/api-types'
+import { GFWAPI, parseAPIError, ParsedAPIError } from '@globalfishingwatch/api-client'
+import { resolveEndpoint } from '@globalfishingwatch/datasets-client'
+import { selectVesselsDatasets } from 'features/datasets/datasets.selectors'
+import { AsyncReducerStatus } from 'utils/async-slice'
+import { INCLUDES_RELATED_SELF_REPORTED_INFO_ID } from 'features/vessel/vessel.config'
+import { fetchDatasetByIdThunk, selectDatasetById } from '../datasets/datasets.slice'
+import {
+ flatVesselGroupSearchVessels,
+ mergeVesselGroupVesselIdentities,
+} from './vessel-groups.utils'
+
+export const MAX_VESSEL_GROUP_VESSELS = 1000
+
+export type IdField = 'vesselId' | 'mmsi'
+export type VesselGroupConfirmationMode =
+ | 'save'
+ | 'update'
+ | 'saveAndSeeInWorkspace'
+ | 'saveAndDeleteVessels'
+
+export type VesselGroupVesselIdentity = VesselGroupVessel & { identity?: IdentityVessel }
+
+interface VesselGroupModalState {
+ isModalOpen: boolean
+ vesselGroupEditId: string | null
+ confirmationMode: VesselGroupConfirmationMode
+ vessels: VesselGroupVesselIdentity[] | null
+ search: {
+ idField: IdField
+ ids: string[] | null
+ status: AsyncReducerStatus
+ error: ParsedAPIError | null
+ }
+}
+
+type SearchVesselsBody = { datasets: string[]; where?: string; ids?: string[] }
+type FetchSearchVessels = { url: string; body?: SearchVesselsBody; signal?: AbortSignal }
+
+const fetchSearchVessels = async ({
+ url,
+ body,
+ signal,
+ token,
+}: FetchSearchVessels & { token?: string }) => {
+ const searchResponse = await GFWAPI.fetch>(
+ `${url}${token ? `&since=${token}` : ''}`,
+ {
+ signal,
+ ...(body && {
+ method: 'POST',
+ body,
+ }),
+ }
+ )
+ return searchResponse
+}
+
+const SEARCH_PAGINATION = 25
+const fetchAllSearchVessels = async (params: FetchSearchVessels) => {
+ let searchResults = [] as IdentityVessel[]
+ let pendingResults = true
+ let paginationToken = ''
+ while (pendingResults) {
+ const searchResponse = await fetchSearchVessels({ ...params, token: paginationToken })
+ searchResults = searchResults.concat(searchResponse.entries)
+ if (searchResponse.since && searchResults!?.length < searchResponse.total) {
+ paginationToken = searchResponse.since
+ } else {
+ pendingResults = false
+ }
+ }
+ return searchResults
+}
+
+const initialState: VesselGroupModalState = {
+ isModalOpen: false,
+ vesselGroupEditId: null,
+ confirmationMode: 'save',
+ vessels: null,
+ search: {
+ idField: 'mmsi',
+ ids: null,
+ status: AsyncReducerStatus.Idle,
+ error: null,
+ },
+}
+
+export const searchVesselGroupsVesselsThunk = createAsyncThunk(
+ 'vessel-groups/searchVessels',
+ async (
+ { ids, idField, datasets = [] }: { ids: string[]; idField: IdField; datasets?: string[] },
+ { signal, rejectWithValue, getState }
+ ) => {
+ const state = getState() as any
+ const searchDatasets = (selectVesselsDatasets(state) || []).filter((d) => {
+ const matchesDataset = datasets?.length ? datasets.includes(d.id) : true
+ return (
+ matchesDataset &&
+ d.status !== DatasetStatus.Deleted &&
+ d.configuration?.apiSupportedVersions?.includes('v3')
+ )
+ /*&& d.alias?.some((alias) => alias.includes(':latest'))*/
+ })
+
+ if (searchDatasets?.length) {
+ const dataset = searchDatasets[0]
+ const datasets = searchDatasets.map((d) => d.id)
+ const uniqVesselIds = uniq(ids)
+ const isVesselByIdSearch = idField === 'vesselId'
+ const datasetConfig: DataviewDatasetConfig = {
+ endpoint: isVesselByIdSearch ? EndpointId.VesselList : EndpointId.VesselSearch,
+ datasetId: '',
+ params: [],
+ query: [{ id: 'cache', value: false }],
+ }
+ if (isVesselByIdSearch) {
+ datasetConfig.query?.push({ id: 'ids', value: uniqVesselIds })
+ datasetConfig.query?.push({
+ id: 'datasets',
+ value: datasets,
+ })
+ } else {
+ datasetConfig.query?.push({
+ id: 'limit',
+ value: SEARCH_PAGINATION,
+ })
+ datasetConfig.query?.push({
+ id: 'includes',
+ value: [INCLUDES_RELATED_SELF_REPORTED_INFO_ID],
+ })
+ }
+ try {
+ const url = resolveEndpoint(dataset, datasetConfig)
+ if (!url) {
+ console.warn('Missing search url')
+ return rejectWithValue({
+ code: 0,
+ message: 'Missing search url',
+ })
+ }
+ const fetchBody = isVesselByIdSearch
+ ? undefined
+ : {
+ datasets,
+ where: `${uniqVesselIds.map((ssvid) => `ssvid='${ssvid}'`).join(' OR ')}`,
+ }
+ const searchResults = await fetchAllSearchVessels({
+ url: `${url}`,
+ body: fetchBody,
+ signal,
+ })
+
+ const vesselGroupVessels = flatVesselGroupSearchVessels(searchResults)
+ return vesselGroupVessels
+ } catch (e: any) {
+ console.warn(e)
+ return rejectWithValue(parseAPIError(e))
+ }
+ } else {
+ console.warn('No search datasets found')
+ return rejectWithValue({
+ code: 0,
+ message: 'No search datasets found',
+ })
+ }
+ },
+ {
+ condition: (_, { getState }) => {
+ const workspaceVesselGroupsStatus = (getState() as RootState).vesselGroupModal.search.status
+ // Fetched already in progress, don't need to re-fetch
+ return workspaceVesselGroupsStatus !== AsyncReducerStatus.Loading
+ },
+ }
+)
+
+export const getVesselInVesselGroupThunk = createAsyncThunk(
+ 'vessel-groups/getVessels',
+ async (
+ { vesselGroup }: { vesselGroup: VesselGroup },
+ { signal, rejectWithValue, getState, dispatch }
+ ) => {
+ const state = getState() as any
+ const datasets = uniq(vesselGroup.vessels.flatMap((v) => v.dataset || []))
+ const datasetId = datasets[0]
+ let dataset = selectDatasetById(datasetId)(state)
+ if (!dataset) {
+ const action = await dispatch(fetchDatasetByIdThunk(datasetId))
+ if (fetchDatasetByIdThunk.fulfilled.match(action)) {
+ dataset = action.payload
+ }
+ }
+ if (vesselGroup.id && dataset) {
+ const datasetConfig: DataviewDatasetConfig = {
+ endpoint: EndpointId.VesselList,
+ datasetId: '',
+ params: [],
+ query: [
+ {
+ id: 'vessel-groups',
+ value: vesselGroup.id,
+ },
+ {
+ id: 'cache',
+ value: false,
+ },
+ {
+ id: 'includes',
+ value: [INCLUDES_RELATED_SELF_REPORTED_INFO_ID],
+ },
+ ],
+ }
+ try {
+ const url = resolveEndpoint(dataset, datasetConfig)
+ if (!url) {
+ console.warn('Missing search url')
+ return rejectWithValue({
+ code: 0,
+ message: 'Missing search url',
+ })
+ }
+ const vesselsIdentities = await GFWAPI.fetch>(url, {
+ signal,
+ cache: 'reload',
+ })
+ const vesselGroupVessels = mergeVesselGroupVesselIdentities(
+ vesselGroup.vessels,
+ vesselsIdentities.entries
+ )
+ console.log('🚀 ~ vesselGroupVessels:', vesselGroup.vessels)
+ console.log('🚀 ~ vesselGroupVessels:', vesselGroupVessels)
+ return vesselGroupVessels
+ } catch (e: any) {
+ console.warn(e)
+ return rejectWithValue(parseAPIError(e))
+ }
+ } else {
+ console.warn('No search datasets found')
+ return rejectWithValue({
+ code: 0,
+ message: 'No search datasets found',
+ })
+ }
+ },
+ {
+ condition: (_, { getState }) => {
+ const workspaceVesselGroupsStatus = (getState() as RootState).vesselGroupModal.search.status
+ // Fetched already in progress, don't need to re-fetch
+ return workspaceVesselGroupsStatus !== AsyncReducerStatus.Loading
+ },
+ }
+)
+
+export const vesselGroupModalSlice = createSlice({
+ name: 'vesselGroupModal',
+ initialState,
+ reducers: {
+ setVesselGroupsModalOpen: (state, action: PayloadAction) => {
+ state.isModalOpen = action.payload
+ },
+ setVesselGroupSearchIdField: (state, action: PayloadAction) => {
+ state.search.idField = action.payload
+ },
+ resetVesselGroupModalSearchStatus: (state) => {
+ state.search.status = AsyncReducerStatus.Idle
+ },
+ setVesselGroupModalVessels: (
+ state,
+ action: PayloadAction
+ ) => {
+ state.vessels = action.payload
+ },
+ setVesselGroupModalSearchIds: (state, action: PayloadAction) => {
+ state.search.ids = action.payload
+ },
+ setVesselGroupEditId: (state, action: PayloadAction) => {
+ state.vesselGroupEditId = action.payload
+ },
+ setVesselGroupConfirmationMode: (state, action: PayloadAction) => {
+ state.confirmationMode = action.payload
+ },
+ resetVesselGroupModal: (state) => {
+ return { ...initialState }
+ },
+ },
+ extraReducers(builder) {
+ builder.addCase(searchVesselGroupsVesselsThunk.pending, (state) => {
+ state.search.status = AsyncReducerStatus.Loading
+ state.vessels = null
+ })
+ builder.addCase(searchVesselGroupsVesselsThunk.fulfilled, (state, action) => {
+ state.search.status = AsyncReducerStatus.Finished
+ state.vessels = action.payload
+ })
+ builder.addCase(searchVesselGroupsVesselsThunk.rejected, (state, action) => {
+ if (action.error.message === 'Aborted') {
+ state.search.status = AsyncReducerStatus.Idle
+ } else {
+ state.search.status = AsyncReducerStatus.Error
+ state.search.error = action.payload as ParsedAPIError
+ }
+ })
+ builder.addCase(getVesselInVesselGroupThunk.pending, (state) => {
+ state.search.status = AsyncReducerStatus.Loading
+ state.vessels = null
+ })
+ builder.addCase(getVesselInVesselGroupThunk.fulfilled, (state, action) => {
+ state.search.status = AsyncReducerStatus.Finished
+ state.vessels = action.payload
+ })
+ builder.addCase(getVesselInVesselGroupThunk.rejected, (state, action) => {
+ if (action.error.message === 'Aborted') {
+ state.search.status = AsyncReducerStatus.Idle
+ } else {
+ state.search.status = AsyncReducerStatus.Error
+ state.search.error = action.payload as ParsedAPIError
+ }
+ })
+ },
+})
+
+export const {
+ setVesselGroupsModalOpen,
+ setVesselGroupSearchIdField,
+ resetVesselGroupModalSearchStatus,
+ setVesselGroupModalVessels,
+ setVesselGroupModalSearchIds,
+ setVesselGroupEditId,
+ setVesselGroupConfirmationMode,
+ resetVesselGroupModal,
+} = vesselGroupModalSlice.actions
+
+export const selectVesselGroupModalOpen = (state: RootState) => state.vesselGroupModal.isModalOpen
+export const selectVesselGroupModalSearchIdField = (state: RootState) =>
+ state.vesselGroupModal.search.idField
+export const selectVesselGroupSearchStatus = (state: RootState) =>
+ state.vesselGroupModal.search.status
+export const selectVesselGroupModalVessels = (state: RootState) => state.vesselGroupModal.vessels
+export const selectVesselGroupsModalSearchIds = (state: RootState) =>
+ state.vesselGroupModal.search.ids
+export const selectVesselGroupEditId = (state: RootState) =>
+ state.vesselGroupModal.vesselGroupEditId
+export const selectVesselGroupConfirmationMode = (state: RootState) =>
+ state.vesselGroupModal.confirmationMode
+
+export default vesselGroupModalSlice.reducer
diff --git a/apps/fishing-map/features/vessel-groups/vessel-groups.config.ts b/apps/fishing-map/features/vessel-groups/vessel-groups.config.ts
index 46066d7ed9..1a413d3248 100644
--- a/apps/fishing-map/features/vessel-groups/vessel-groups.config.ts
+++ b/apps/fishing-map/features/vessel-groups/vessel-groups.config.ts
@@ -8,3 +8,6 @@ export const ID_COLUMNS_OPTIONS: SelectOption[] = ID_COLUMN_LOOKUP.map((key) =>
id: key,
label: key.toUpperCase(),
}))
+
+// TODO:VV3 set the proper date
+export const VESSEL_GROUPS_REPORT_RELEASE_DATE = '2024-09-25'
diff --git a/apps/fishing-map/features/vessel-groups/vessel-groups.hooks.ts b/apps/fishing-map/features/vessel-groups/vessel-groups.hooks.ts
index 8b801669c7..db39fe62cf 100644
--- a/apps/fishing-map/features/vessel-groups/vessel-groups.hooks.ts
+++ b/apps/fishing-map/features/vessel-groups/vessel-groups.hooks.ts
@@ -6,26 +6,25 @@ import { VesselGroup } from '@globalfishingwatch/api-types'
import { selectAllVisibleVesselGroups } from 'features/user/selectors/user.permissions.selectors'
import { getVesselGroupLabel } from 'features/vessel-groups/vessel-groups.utils'
import { IdentityVesselData } from 'features/vessel/vessel.slice'
-import { getCurrentIdentityVessel } from 'features/vessel/vessel.utils'
-import { VesselLastIdentity } from 'features/search/search.slice'
-import { ReportVesselWithDatasets } from 'features/reports/areas/area-reports.selectors'
+// import { VesselLastIdentity } from 'features/search/search.slice'
+// import { ReportVesselWithDatasets } from 'features/reports/areas/area-reports.selectors'
import { useAppDispatch } from 'features/app/app.hooks'
import { sortByCreationDate } from 'utils/dates'
import {
selectVesselGroupsStatusId,
- setNewVesselGroupSearchVessels,
- setVesselGroupEditId,
- setVesselGroupsModalOpen,
UpdateVesselGroupThunkParams,
updateVesselGroupVesselsThunk,
} from './vessel-groups.slice'
+import {
+ setVesselGroupEditId,
+ setVesselGroupModalVessels,
+ setVesselGroupsModalOpen,
+ VesselGroupVesselIdentity,
+} from './vessel-groups-modal.slice'
export const NEW_VESSEL_GROUP_ID = 'new-vessel-group'
-export type AddVesselGroupVessel =
- | VesselLastIdentity
- | ReportVesselWithDatasets
- | IdentityVesselData
+export type AddVesselGroupVessel = IdentityVesselData | VesselGroupVesselIdentity
export const useVesselGroupsOptions = () => {
const { t } = useTranslation()
@@ -49,19 +48,10 @@ export const useVesselGroupsOptions = () => {
export const useVesselGroupsUpdate = () => {
const dispatch = useAppDispatch()
const addVesselsToVesselGroup = useCallback(
- async (vesselGroupId: string, vessels: AddVesselGroupVessel[]) => {
+ async (vesselGroupId: string, vessels: VesselGroupVesselIdentity[]) => {
const vesselGroup: UpdateVesselGroupThunkParams = {
id: vesselGroupId,
- vessels: vessels.flatMap((vessel) => {
- const { id, dataset } = getCurrentIdentityVessel(vessel as IdentityVesselData)
- if (!id || !dataset) {
- return []
- }
- return {
- vesselId: id,
- dataset: typeof dataset === 'string' ? dataset : dataset.id,
- }
- }),
+ vessels: vessels,
}
const dispatchedAction = await dispatch(updateVesselGroupVesselsThunk(vesselGroup))
if (updateVesselGroupVesselsThunk.fulfilled.match(dispatchedAction)) {
@@ -79,23 +69,15 @@ export const useVesselGroupsUpdate = () => {
export const useVesselGroupsModal = () => {
const dispatch = useAppDispatch()
const createVesselGroupWithVessels = useCallback(
- async (vesselGroupId: string, vessels: AddVesselGroupVessel[]) => {
- const vesselsWithDataset = vessels.map((vessel) => ({
- ...vessel,
- id: (vessel as VesselLastIdentity)?.id || (vessel as ReportVesselWithDatasets)?.vesselId,
- dataset:
- typeof vessel?.dataset === 'string'
- ? vessel.dataset
- : vessel.dataset?.id || (vessel as ReportVesselWithDatasets)?.infoDataset?.id,
- }))
- if (vesselsWithDataset?.length) {
+ async (vesselGroupId: string, vessels: VesselGroupVesselIdentity[]) => {
+ if (vessels?.length) {
if (vesselGroupId && vesselGroupId !== NEW_VESSEL_GROUP_ID) {
dispatch(setVesselGroupEditId(vesselGroupId))
}
- dispatch(setNewVesselGroupSearchVessels(vesselsWithDataset))
+ dispatch(setVesselGroupModalVessels(vessels))
dispatch(setVesselGroupsModalOpen(true))
} else {
- console.warn('No related activity datasets founds for', vesselsWithDataset)
+ console.warn('No related activity datasets founds for', vessels)
}
},
[dispatch]
diff --git a/apps/fishing-map/features/vessel-groups/vessel-groups.selectors.ts b/apps/fishing-map/features/vessel-groups/vessel-groups.selectors.ts
index d54c4d796a..9e8787ad3a 100644
--- a/apps/fishing-map/features/vessel-groups/vessel-groups.selectors.ts
+++ b/apps/fishing-map/features/vessel-groups/vessel-groups.selectors.ts
@@ -1,11 +1,7 @@
import { createSelector } from '@reduxjs/toolkit'
import { isAdvancedSearchAllowed } from 'features/search/search.selectors'
import { selectLocationQuery, selectUrlDataviewInstances } from 'routes/routes.selectors'
-import {
- MAX_VESSEL_GROUP_VESSELS,
- selectNewVesselGroupSearchVessels,
- selectVesselGroupSearchVessels,
-} from 'features/vessel-groups/vessel-groups.slice'
+import { MAX_VESSEL_GROUP_VESSELS } from 'features/vessel-groups/vessel-groups-modal.slice'
import {
selectLastVisitedWorkspace,
selectWorkspace,
@@ -16,25 +12,19 @@ import { LastWorkspaceVisited } from 'features/workspace/workspace.slice'
import { WORKSPACE } from 'routes/routes'
import { DEFAULT_WORKSPACE_CATEGORY, DEFAULT_WORKSPACE_ID } from 'data/workspaces'
import { getVesselGroupsInDataviews } from 'features/datasets/datasets.utils'
-
-export const selectAllVesselGroupSearchVessels = createSelector(
- [selectVesselGroupSearchVessels, selectNewVesselGroupSearchVessels],
- (vessels, newVessels) => {
- return [...(newVessels || []), ...(vessels || [])]
- }
-)
+import { selectVesselGroupModalVessels } from './vessel-groups-modal.slice'
export const selectHasVesselGroupVesselsOverflow = createSelector(
- [selectAllVesselGroupSearchVessels],
+ [selectVesselGroupModalVessels],
(vessels = []) => {
- return vessels.length > MAX_VESSEL_GROUP_VESSELS
+ return vessels !== null && vessels.length > MAX_VESSEL_GROUP_VESSELS
}
)
export const selectHasVesselGroupSearchVessels = createSelector(
- [selectAllVesselGroupSearchVessels],
+ [selectVesselGroupModalVessels],
(vessels = []) => {
- return vessels.length > 0
+ return vessels !== null && vessels.length > 0
}
)
diff --git a/apps/fishing-map/features/vessel-groups/vessel-groups.slice.ts b/apps/fishing-map/features/vessel-groups/vessel-groups.slice.ts
index 9157b6ad25..1ad3392b0d 100644
--- a/apps/fishing-map/features/vessel-groups/vessel-groups.slice.ts
+++ b/apps/fishing-map/features/vessel-groups/vessel-groups.slice.ts
@@ -1,21 +1,9 @@
-import { createAsyncThunk, PayloadAction, createSelector } from '@reduxjs/toolkit'
+import { createAsyncThunk, createSelector, PayloadAction } from '@reduxjs/toolkit'
import { stringify } from 'qs'
-import { uniq, uniqBy } from 'es-toolkit'
+import { uniqBy } from 'es-toolkit'
import memoize from 'lodash/memoize'
-import {
- APIPagination,
- APIVesselSearchPagination,
- DatasetStatus,
- DataviewDatasetConfig,
- EndpointId,
- IdentityVessel,
- VesselGroup,
- VesselGroupUpsert,
- VesselGroupVessel,
-} from '@globalfishingwatch/api-types'
+import { APIPagination, VesselGroup, VesselGroupUpsert } from '@globalfishingwatch/api-types'
import { GFWAPI, FetchOptions, parseAPIError, ParsedAPIError } from '@globalfishingwatch/api-client'
-import { resolveEndpoint } from '@globalfishingwatch/datasets-client'
-import { selectVesselsDatasets } from 'features/datasets/datasets.selectors'
import {
AsyncError,
asyncInitialState,
@@ -24,257 +12,28 @@ import {
createAsyncSlice,
} from 'utils/async-slice'
import { DEFAULT_PAGINATION_PARAMS } from 'data/config'
-import { getVesselId } from 'features/vessel/vessel.utils'
import { RootState } from 'store'
-import { fetchDatasetByIdThunk, selectDatasetById } from '../datasets/datasets.slice'
-
-export const MAX_VESSEL_GROUP_VESSELS = 1000
-
-// Limitation of the API as we have a limitation of 2000 characters in GET requests
-export const MAX_VESSEL_GROUP_SEARCH_VESSELS = 400
+import { prepareVesselGroupVesselsUpdate } from './vessel-groups.utils'
export type IdField = 'vesselId' | 'mmsi'
export type VesselGroupConfirmationMode = 'save' | 'saveAndSeeInWorkspace' | 'saveAndDeleteVessels'
interface VesselGroupsState extends AsyncReducer {
- isModalOpen: boolean
- vesselGroupEditId: string | null
- currentDataviewIds: string[] | null
- confirmationMode: VesselGroupConfirmationMode
- groupVessels: VesselGroupVessel[] | null
- search: {
- id: IdField
- status: AsyncReducerStatus
- error: ParsedAPIError | null
- vessels: IdentityVessel[] | null
- }
- newSearchVessels: IdentityVessel[] | null
workspace: {
status: AsyncReducerStatus
error: ParsedAPIError | null
- vesselGroups: VesselGroup[] | null
}
}
-const fetchSearchVessels = async (
- url: string,
- { signal, token }: { signal?: AbortSignal; token?: string }
-) => {
- const searchResponse = await GFWAPI.fetch>(
- `${url}${token ? `&since=${token}` : ''}`,
- {
- signal,
- }
- )
- return searchResponse
-}
-
-const SEARCH_PAGINATION = 25
-const fetchAllSearchVessels = async (url: string, signal: AbortSignal) => {
- let searchResults = [] as IdentityVessel[]
- let pendingResults = true
- let paginationToken = ''
- while (pendingResults) {
- const searchResponse = await fetchSearchVessels(url, { signal, token: paginationToken })
- searchResults = searchResults.concat(searchResponse.entries)
- if (searchResponse.since && searchResults!?.length < searchResponse.total) {
- paginationToken = searchResponse.since
- } else {
- pendingResults = false
- }
- }
- return searchResults
-}
-
const initialState: VesselGroupsState = {
...asyncInitialState,
- isModalOpen: false,
- vesselGroupEditId: null,
- currentDataviewIds: null,
- confirmationMode: 'save',
- groupVessels: null,
- search: {
- id: 'mmsi',
- status: AsyncReducerStatus.Idle,
- vessels: null,
- error: null,
- },
- newSearchVessels: null,
workspace: {
status: AsyncReducerStatus.Idle,
error: null,
- vesselGroups: null,
},
}
type VesselGroupSliceState = { vesselGroups: VesselGroupsState }
-export const searchVesselGroupsVesselsThunk = createAsyncThunk(
- 'vessel-groups/searchVessels',
- async (
- { vessels, idField }: { vessels: VesselGroupVessel[]; idField: IdField },
- { signal, rejectWithValue, getState }
- ) => {
- const state = getState() as any
- const vesselGroupDatasets = uniq(vessels?.flatMap((v) => v.dataset || []))
- const allVesselDatasets = (selectVesselsDatasets(state) || []).filter(
- (d) =>
- d.status !== DatasetStatus.Deleted && d.configuration?.apiSupportedVersions?.includes('v3')
- /*&& d.alias?.some((alias) => alias.includes(':latest'))*/
- )
-
- const searchDatasets = vesselGroupDatasets?.length
- ? allVesselDatasets.filter((dataset) => vesselGroupDatasets.includes(dataset.id))
- : allVesselDatasets
-
- if (searchDatasets?.length) {
- const dataset = searchDatasets[0]
- const datasets = searchDatasets.map((d) => d.id)
- const uniqVesselIds = uniq(vessels.map(({ vesselId }) => vesselId))
- const isVesselByIdSearch = idField === 'vesselId'
- const datasetConfig: DataviewDatasetConfig = {
- endpoint: isVesselByIdSearch ? EndpointId.VesselList : EndpointId.VesselSearch,
- datasetId: searchDatasets[0].id,
- params: [],
- query: [
- {
- id: 'datasets',
- value: datasets,
- },
- isVesselByIdSearch
- ? { id: 'ids', value: uniqVesselIds }
- : {
- id: 'where',
- value: encodeURIComponent(
- `${uniqVesselIds.map((ssvid) => `ssvid='${ssvid}'`).join(' OR ')}`
- ),
- },
- ],
- }
- if (!isVesselByIdSearch) {
- datasetConfig.query?.push({
- id: 'limit',
- value: SEARCH_PAGINATION,
- })
- }
- try {
- const url = resolveEndpoint(dataset, datasetConfig)
- if (!url) {
- console.warn('Missing search url')
- return rejectWithValue({
- code: 0,
- message: 'Missing search url',
- })
- }
- const searchResults = await fetchAllSearchVessels(`${url}&cache=false`, signal)
- // API returns multiple instances of the same vessel with the same id and dataset
- const uniqSearchResults = uniqBy(searchResults, (vessel) =>
- [getVesselId(vessel), vessel.dataset].join(',')
- )
- // Searching could return same vessel id from different datasets so we need to choose the original one
- const searchResultsFiltered = isVesselByIdSearch
- ? uniqSearchResults.filter((vessel) => {
- const vesselId = getVesselId(vessel)
- return (
- vessels.find((v) => {
- const isSameVesselid = v.vesselId === vesselId
- const isSameDataset = v.dataset ? v.dataset === vessel.dataset : true
- return isSameVesselid && isSameDataset
- }) !== undefined
- )
- })
- : uniqSearchResults
-
- return searchResultsFiltered
- } catch (e: any) {
- console.warn(e)
- return rejectWithValue(parseAPIError(e))
- }
- } else {
- console.warn('No search datasets found')
- return rejectWithValue({
- code: 0,
- message: 'No search datasets found',
- })
- }
- },
- {
- condition: (_, { getState }) => {
- const workspaceVesselGroupsStatus = (getState() as VesselGroupSliceState).vesselGroups.search
- .status
- // Fetched already in progress, don't need to re-fetch
- return workspaceVesselGroupsStatus !== AsyncReducerStatus.Loading
- },
- }
-)
-
-export const getVesselInVesselGroupThunk = createAsyncThunk(
- 'vessel-groups/getVessels',
- async (
- { vesselGroup }: { vesselGroup: VesselGroup },
- { signal, rejectWithValue, getState, dispatch }
- ) => {
- const state = getState() as any
- const datasets = uniq(vesselGroup.vessels.flatMap((v) => v.dataset || []))
- const datasetId = datasets[0]
- let dataset = selectDatasetById(datasetId)(state)
- if (!dataset) {
- const action = await dispatch(fetchDatasetByIdThunk(datasetId))
- if (fetchDatasetByIdThunk.fulfilled.match(action)) {
- dataset = action.payload
- }
- }
- if (vesselGroup.id && dataset) {
- const datasetConfig: DataviewDatasetConfig = {
- endpoint: EndpointId.VesselList,
- datasetId: '',
- params: [],
- query: [
- {
- id: 'vessel-groups',
- value: vesselGroup.id,
- },
- {
- id: 'cache',
- value: false,
- },
- ],
- }
- try {
- const url = resolveEndpoint(dataset, datasetConfig)
- if (!url) {
- console.warn('Missing search url')
- return rejectWithValue({
- code: 0,
- message: 'Missing search url',
- })
- }
- const vessels = await GFWAPI.fetch>(url, {
- signal,
- cache: 'reload',
- })
- return vessels.entries
- } catch (e: any) {
- console.warn(e)
- return rejectWithValue(parseAPIError(e))
- }
- } else {
- console.warn('No search datasets found')
- return rejectWithValue({
- code: 0,
- message: 'No search datasets found',
- })
- }
- },
- {
- condition: (_, { getState }) => {
- const workspaceVesselGroupsStatus = (getState() as VesselGroupSliceState).vesselGroups.search
- .status
- // Fetched already in progress, don't need to re-fetch
- return workspaceVesselGroupsStatus !== AsyncReducerStatus.Loading
- },
- }
-)
-
export const fetchWorkspaceVesselGroupsThunk = createAsyncThunk(
'workspace-vessel-groups/fetch',
async (ids: string[] = [], { signal, rejectWithValue, getState }) => {
@@ -305,8 +64,7 @@ export const fetchWorkspaceVesselGroupsThunk = createAsyncThunk(
},
{
condition: (_, { getState }) => {
- const workspaceVesselGroupsStatus = (getState() as VesselGroupSliceState).vesselGroups
- .workspace.status
+ const workspaceVesselGroupsStatus = (getState() as VesselGroupSliceState).vesselGroups.status
// Fetched already in progress, don't need to re-fetch
return workspaceVesselGroupsStatus !== AsyncReducerStatus.Loading
},
@@ -338,10 +96,6 @@ export const fetchVesselGroupsThunk = createAsyncThunk<
}
)
-const removeDuplicatedVesselGroupvessels = (vessels: VesselGroupVessel[]) => {
- return uniqBy(vessels, (vessel) => [vessel.vesselId, vessel.dataset].join(','))
-}
-
export const fetchVesselGroupByIdThunk = createAsyncThunk(
'vessel-groups/fetchById',
async (vesselGroupId: string) => {
@@ -357,7 +111,7 @@ export const createVesselGroupThunk = createAsyncThunk(
async (vesselGroupCreate: VesselGroupUpsert, { dispatch, getState }) => {
const vesselGroupUpsert: VesselGroupUpsert = {
...vesselGroupCreate,
- vessels: removeDuplicatedVesselGroupvessels(vesselGroupCreate.vessels || []),
+ vessels: prepareVesselGroupVesselsUpdate(vesselGroupCreate.vessels || []),
}
const saveVesselGroup: any = async (vesselGroup: VesselGroupUpsert, tries = 0) => {
let vesselGroupUpdated: VesselGroup
@@ -385,6 +139,7 @@ export const createVesselGroupThunk = createAsyncThunk(
export type UpdateVesselGroupThunkParams = VesselGroupUpsert & {
id: string
+ override?: boolean
}
export const updateVesselGroupThunk = createAsyncThunk(
'vessel-groups/update',
@@ -392,7 +147,7 @@ export const updateVesselGroupThunk = createAsyncThunk(
const { id, ...rest } = vesselGroupUpsert
const vesselGroup: VesselGroupUpsert = {
...rest,
- vessels: removeDuplicatedVesselGroupvessels(rest.vessels || []),
+ vessels: prepareVesselGroupVesselsUpdate(rest.vessels || []),
}
const vesselGroupUpdated = await GFWAPI.fetch(`/vessel-groups/${id}`, {
method: 'PATCH',
@@ -404,9 +159,12 @@ export const updateVesselGroupThunk = createAsyncThunk(
export const updateVesselGroupVesselsThunk = createAsyncThunk(
'vessel-groups/update-vessels',
- async ({ id, vessels = [] }: UpdateVesselGroupThunkParams, { getState, dispatch }) => {
+ async (
+ { id, vessels = [], override = false }: UpdateVesselGroupThunkParams,
+ { getState, dispatch }
+ ) => {
let vesselGroup = selectVesselGroupById(id)(getState() as any)
- if (!vesselGroup) {
+ if (!override && !vesselGroup) {
const action = await dispatch(fetchVesselGroupByIdThunk(id))
if (fetchVesselGroupByIdThunk.fulfilled.match(action) && action.payload) {
vesselGroup = action.payload
@@ -416,7 +174,9 @@ export const updateVesselGroupVesselsThunk = createAsyncThunk(
return dispatch(
updateVesselGroupThunk({
id: vesselGroup.id,
- vessels: [...vesselGroup.vessels, ...vessels],
+ vessels: override
+ ? vessels
+ : uniqBy([...vesselGroup.vessels, ...vessels], (v) => v.vesselId),
})
)
}
@@ -448,82 +208,20 @@ export const { slice: vesselGroupsSlice, entityAdapter } = createAsyncSlice<
name: 'vesselGroups',
initialState,
reducers: {
- setVesselGroupsModalOpen: (state, action: PayloadAction) => {
- state.isModalOpen = action.payload
- },
- setVesselGroupSearchId: (state, action: PayloadAction) => {
- state.search.id = action.payload
- },
- resetVesselGroupStatus: (state) => {
- state.status = AsyncReducerStatus.Idle
- state.search.status = AsyncReducerStatus.Idle
- },
- setVesselGroupSearchVessels: (state, action: PayloadAction) => {
- state.search.vessels = action.payload
- },
- setNewVesselGroupSearchVessels: (state, action: PayloadAction) => {
- state.newSearchVessels = action.payload
- },
- setVesselGroupVessels: (state, action: PayloadAction) => {
- state.groupVessels = action.payload
- },
- setVesselGroupEditId: (state, action: PayloadAction) => {
- state.vesselGroupEditId = action.payload
- },
- setVesselGroupConfirmationMode: (state, action: PayloadAction) => {
- state.confirmationMode = action.payload
- },
- setVesselGroupCurrentDataviewIds: (state, action: PayloadAction) => {
- state.currentDataviewIds = action.payload
- },
- resetVesselGroup: (state) => {
- // Dont reset async reducer properties as it contains the list of existing vessel gruops
- const { status, statusId, error, ids, currentRequestIds, entities } = state
- return { ...initialState, ids, entities, status, statusId, error, currentRequestIds }
+ resetVesselGroup: () => {
+ return { ...initialState }
},
},
+
extraReducers(builder) {
- builder.addCase(searchVesselGroupsVesselsThunk.pending, (state) => {
- state.search.status = AsyncReducerStatus.Loading
- state.search.vessels = null
- })
- builder.addCase(searchVesselGroupsVesselsThunk.fulfilled, (state, action) => {
- state.search.status = AsyncReducerStatus.Finished
- state.search.vessels = action.payload
- })
- builder.addCase(searchVesselGroupsVesselsThunk.rejected, (state, action) => {
- if (action.error.message === 'Aborted') {
- state.search.status = AsyncReducerStatus.Idle
- } else {
- state.search.status = AsyncReducerStatus.Error
- state.search.error = action.payload as ParsedAPIError
- }
- })
- builder.addCase(getVesselInVesselGroupThunk.pending, (state) => {
- state.search.status = AsyncReducerStatus.Loading
- state.search.vessels = null
- })
- builder.addCase(getVesselInVesselGroupThunk.fulfilled, (state, action) => {
- state.search.status = AsyncReducerStatus.Finished
- state.search.vessels = action.payload
- })
- builder.addCase(getVesselInVesselGroupThunk.rejected, (state, action) => {
- if (action.error.message === 'Aborted') {
- state.search.status = AsyncReducerStatus.Idle
- } else {
- state.search.status = AsyncReducerStatus.Error
- state.search.error = action.payload as ParsedAPIError
- }
- })
builder.addCase(fetchWorkspaceVesselGroupsThunk.pending, (state) => {
state.workspace.status = AsyncReducerStatus.Loading
- state.workspace.vesselGroups = null
})
builder.addCase(
fetchWorkspaceVesselGroupsThunk.fulfilled,
(state, action: PayloadAction) => {
state.workspace.status = AsyncReducerStatus.Finished
- state.workspace.vesselGroups = action.payload
+ entityAdapter.addMany(state, action.payload)
}
)
builder.addCase(fetchWorkspaceVesselGroupsThunk.rejected, (state, action) => {
@@ -544,19 +242,6 @@ export const { slice: vesselGroupsSlice, entityAdapter } = createAsyncSlice<
},
})
-export const {
- resetVesselGroup,
- resetVesselGroupStatus,
- setVesselGroupEditId,
- setVesselGroupVessels,
- setVesselGroupSearchId,
- setVesselGroupsModalOpen,
- setVesselGroupSearchVessels,
- setNewVesselGroupSearchVessels,
- setVesselGroupCurrentDataviewIds,
- setVesselGroupConfirmationMode,
-} = vesselGroupsSlice.actions
-
export const { selectAll: selectAllVesselGroups, selectById } =
entityAdapter.getSelectors((state) => state.vesselGroups)
@@ -564,32 +249,13 @@ export const selectVesselGroupById = memoize((id: string) =>
createSelector([(state: VesselGroupSliceState) => state], (state) => selectById(state, id))
)
-export const selectVesselGroupModalOpen = (state: VesselGroupSliceState) =>
- state.vesselGroups.isModalOpen
export const selectVesselGroupsStatus = (state: VesselGroupSliceState) => state.vesselGroups.status
export const selectWorkspaceVesselGroupsStatus = (state: VesselGroupSliceState) =>
state.vesselGroups.workspace.status
+
export const selectWorkspaceVesselGroupsError = (state: VesselGroupSliceState) =>
state.vesselGroups.workspace.error
-export const selectVesselGroupsVessels = (state: VesselGroupSliceState) =>
- state.vesselGroups.groupVessels
-export const selectWorkspaceVesselGroups = (state: VesselGroupSliceState) =>
- state.vesselGroups.workspace.vesselGroups
-export const selectVesselGroupSearchId = (state: VesselGroupSliceState) =>
- state.vesselGroups.search.id
-export const selectVesselGroupSearchStatus = (state: VesselGroupSliceState) =>
- state.vesselGroups.search.status
-export const selectVesselGroupSearchVessels = (state: VesselGroupSliceState) =>
- state.vesselGroups.search.vessels
-export const selectNewVesselGroupSearchVessels = (state: VesselGroupSliceState) =>
- state.vesselGroups.newSearchVessels
export const selectVesselGroupsStatusId = (state: VesselGroupSliceState) =>
state.vesselGroups.statusId
-export const selectCurrentDataviewIds = (state: VesselGroupSliceState) =>
- state.vesselGroups.currentDataviewIds
-export const selectVesselGroupEditId = (state: VesselGroupSliceState) =>
- state.vesselGroups.vesselGroupEditId
-export const selectVesselGroupConfirmationMode = (state: VesselGroupSliceState) =>
- state.vesselGroups.confirmationMode
export default vesselGroupsSlice.reducer
diff --git a/apps/fishing-map/features/vessel-groups/vessel-groups.utils.ts b/apps/fishing-map/features/vessel-groups/vessel-groups.utils.ts
index 52d87dd24e..7df6edd015 100644
--- a/apps/fishing-map/features/vessel-groups/vessel-groups.utils.ts
+++ b/apps/fishing-map/features/vessel-groups/vessel-groups.utils.ts
@@ -1,7 +1,139 @@
-import { VesselGroup } from '@globalfishingwatch/api-types'
+import { uniq, uniqBy } from 'es-toolkit'
+import {
+ IdentityVessel,
+ VesselGroup,
+ VesselGroupVessel,
+ VesselIdentitySourceEnum,
+} from '@globalfishingwatch/api-types'
import { PUBLIC_SUFIX } from 'data/config'
+import { getVesselId, getVesselIdentities, getVesselProperty } from 'features/vessel/vessel.utils'
+import { IdentityVesselData } from 'features/vessel/vessel.slice'
+import { VESSEL_GROUPS_REPORT_RELEASE_DATE } from './vessel-groups.config'
+import { VesselGroupVesselIdentity } from './vessel-groups-modal.slice'
+import { AddVesselGroupVessel } from './vessel-groups.hooks'
export const getVesselGroupLabel = (vesselGroup: VesselGroup) => {
const isPrivate = !vesselGroup.id.endsWith(`-${PUBLIC_SUFIX}`)
return `${isPrivate ? '🔒 ' : ''}${vesselGroup.name}`
}
+
+export const isOutdatedVesselGroup = (vesselGroup: VesselGroup) => {
+ return vesselGroup?.updatedAt && vesselGroup?.updatedAt < VESSEL_GROUPS_REPORT_RELEASE_DATE
+}
+
+export const getVesselGroupVesselsCount = (vesselGroup: VesselGroup) => {
+ return uniq(vesselGroup.vessels.map((v) => v.relationId || v.vesselId)).filter(Boolean).length
+}
+
+export const removeDuplicatedVesselGroupvessels = (vessels: VesselGroupVesselIdentity[]) => {
+ return uniqBy(vessels, (vessel) => [vessel.vesselId, vessel.dataset].join(','))
+}
+export const removeVesselGroupvesselIdentity = (vessels: VesselGroupVesselIdentity[]) => {
+ return vessels.map(({ identity, ...vessel }) => vessel)
+}
+export const prepareVesselGroupVesselsUpdate = (vessels: VesselGroupVesselIdentity[]) => {
+ return removeDuplicatedVesselGroupvessels(removeVesselGroupvesselIdentity(vessels))
+}
+
+export const getVesselGroupUniqVessels = (
+ vessels: VesselGroupVesselIdentity[] | null
+): VesselGroupVesselIdentity[] => {
+ if (!vessels) {
+ return []
+ }
+ return uniqBy(
+ vessels.flatMap((vessel) => {
+ const identities = getVesselIdentities(vessel.identity!, {
+ identitySource: VesselIdentitySourceEnum.SelfReported,
+ })
+ if (!identities.length) {
+ return []
+ }
+ return identities.map((identity) => ({
+ vesselId: identity.id,
+ dataset: identity.dataset as string,
+ relationId: vessel.relationId as string,
+ identity: (vessel.relationId === identity.id
+ ? vessel.identity
+ : undefined) as IdentityVessel,
+ }))
+ }),
+ (v) => v.vesselId
+ )
+}
+
+export const mergeVesselGroupVesselIdentities = (
+ vesselGroupVessels: VesselGroupVessel[],
+ vesselIdentities: IdentityVessel[]
+): VesselGroupVesselIdentity[] => {
+ return vesselGroupVessels
+ .flatMap((v) => {
+ const vesselIdentity = vesselIdentities.find((vesselIdentity) => {
+ const selftReportedIds = getVesselIdentities(vesselIdentity, {
+ identitySource: VesselIdentitySourceEnum.SelfReported,
+ })?.map((v) => v.id)
+ return selftReportedIds?.includes(v.vesselId)
+ })
+ if (!vesselIdentity) {
+ return []
+ }
+ const relationId = getVesselId(vesselIdentity)
+ return {
+ ...v,
+ relationId,
+ identity: (relationId === v.vesselId ? vesselIdentity : undefined) as IdentityVessel,
+ }
+ })
+ .toSorted((a, b) => {
+ const aValue = getVesselProperty(a.identity!, 'shipname')
+ const bValue = getVesselProperty(b.identity!, 'shipname')
+ if (aValue === bValue) {
+ return 0
+ }
+ return aValue > bValue ? 1 : -1
+ })
+}
+
+export const flatVesselGroupSearchVessels = (
+ vesselIdentities: IdentityVessel[]
+): VesselGroupVesselIdentity[] => {
+ return vesselIdentities.flatMap((vessel) => {
+ const identities = getVesselIdentities(vessel, {
+ identitySource: VesselIdentitySourceEnum.SelfReported,
+ })
+ if (!identities?.length) {
+ return []
+ }
+ const relationId = getVesselId(vessel)
+ return identities.map((i) => ({
+ vesselId: i.id,
+ dataset: i.dataset as string,
+ relationId,
+ identity: (relationId === i.id ? vessel : undefined) as IdentityVessel,
+ }))
+ })
+}
+
+export function parseVesselGroupVessels(
+ vessels: AddVesselGroupVessel[]
+): VesselGroupVesselIdentity[] {
+ return vessels.map((vessel) => {
+ if ((vessel as IdentityVesselData).identities?.length) {
+ const identityVessel = vessel as IdentityVesselData
+ const relationId = identityVessel.id
+ return {
+ vesselId: identityVessel.id,
+ dataset: identityVessel.datasetId || (identityVessel.dataset?.id as string),
+ relationId: relationId,
+ identity:
+ relationId === identityVessel.id
+ ? {
+ dataset: identityVessel.datasetId || identityVessel.dataset?.id,
+ selfReportedInfo: identityVessel.identities,
+ }
+ : undefined,
+ } as VesselGroupVesselIdentity
+ }
+ return vessel as VesselGroupVesselIdentity
+ })
+}
diff --git a/apps/fishing-map/features/vessel/vessel.config.ts b/apps/fishing-map/features/vessel/vessel.config.ts
index 45ce2cf80b..f0940510c9 100644
--- a/apps/fishing-map/features/vessel/vessel.config.ts
+++ b/apps/fishing-map/features/vessel/vessel.config.ts
@@ -7,6 +7,7 @@ import { VesselProfileState } from './vessel.types'
export const DEFAULT_VESSEL_IDENTITY_DATASET = 'public-global-vessel-identity'
export const DEFAULT_VESSEL_IDENTITY_VERSION = 'v3.0'
export const DEFAULT_VESSEL_IDENTITY_ID = `${DEFAULT_VESSEL_IDENTITY_DATASET}:${DEFAULT_VESSEL_IDENTITY_VERSION}`
+export const INCLUDES_RELATED_SELF_REPORTED_INFO_ID = 'POTENTIAL_RELATED_SELF_REPORTED_INFO'
export const CACHE_FALSE_PARAM = { id: 'cache', value: 'false' }
export const DEFAULT_VESSEL_STATE: VesselProfileState = {
diff --git a/apps/fishing-map/features/vessel/vessel.slice.ts b/apps/fishing-map/features/vessel/vessel.slice.ts
index 6354fc3572..657c104d17 100644
--- a/apps/fishing-map/features/vessel/vessel.slice.ts
+++ b/apps/fishing-map/features/vessel/vessel.slice.ts
@@ -6,12 +6,14 @@ import {
ApiEvent,
Dataset,
DatasetTypes,
+ GearType,
IdentityVessel,
Resource,
ResourceStatus,
SelfReportedInfo,
VesselCombinedSourcesInfo,
VesselRegistryInfo,
+ VesselType,
} from '@globalfishingwatch/api-types'
import { setResource } from '@globalfishingwatch/dataviews-client'
import { resolveEndpoint } from '@globalfishingwatch/datasets-client'
@@ -42,12 +44,16 @@ export type VesselDataIdentity = (SelfReportedInfo | VesselRegistryInfo) & {
identitySource: VesselIdentitySourceEnum
combinedSourcesInfo?: VesselCombinedSourcesInfo
positionsCounter?: number
+ dataset?: string
+ geartypes?: GearType[]
+ shiptypes?: VesselType[]
}
// Merges and plain all the identities of a vessel
export type IdentityVesselData = {
id: string
identities: VesselDataIdentity[]
dataset: Dataset
+ datasetId: string
} & VesselInstanceDatasets &
Pick<
IdentityVessel,
@@ -143,6 +149,7 @@ export const fetchVesselInfoThunk = createAsyncThunk(
return {
id: getVesselProperty(vessel, 'id'),
dataset: dataset,
+ datasetId: dataset?.id,
combinedSourcesInfo: vessel?.combinedSourcesInfo,
registryOwners: vessel?.registryOwners,
registryPublicAuthorizations: vessel?.registryPublicAuthorizations,
diff --git a/apps/fishing-map/features/vessel/vessel.utils.ts b/apps/fishing-map/features/vessel/vessel.utils.ts
index c9f0a30d7c..1ae5946751 100644
--- a/apps/fishing-map/features/vessel/vessel.utils.ts
+++ b/apps/fishing-map/features/vessel/vessel.utils.ts
@@ -18,6 +18,33 @@ import { IdentityVesselData, VesselDataIdentity } from 'features/vessel/vessel.s
import { TimeRange } from 'features/timebar/timebar.slice'
type GetVesselIdentityParams = { identityId?: string; identitySource?: VesselIdentitySourceEnum }
+
+const getVesselIdentitiesBySource = (
+ vessel: IdentityVessel,
+ { identitySource } = {} as Pick
+): VesselDataIdentity[] => {
+ if (!identitySource) {
+ return [] as VesselDataIdentity[]
+ }
+ return (vessel?.[identitySource] || []).map((identity) => {
+ const geartypes = getVesselCombinedSourceProperty(vessel, {
+ vesselId: identity.id,
+ property: 'geartypes',
+ })?.map((i) => i.name as GearType)
+ const shiptypes = getVesselCombinedSourceProperty(vessel, {
+ vesselId: identity.id,
+ property: 'shiptypes',
+ })?.map((i) => i.name as VesselType)
+ return {
+ ...identity,
+ identitySource,
+ geartypes,
+ shiptypes,
+ dataset: vessel.dataset,
+ } as VesselDataIdentity
+ })
+}
+
export const getVesselIdentities = (
vessel: IdentityVessel | IdentityVesselData,
{ identitySource } = {} as Pick
@@ -25,18 +52,18 @@ export const getVesselIdentities = (
if (!vessel) {
return [] as VesselDataIdentity[]
}
+
const identities = (vessel as IdentityVesselData).identities?.length
? (vessel as IdentityVesselData).identities
: [
- ...((vessel as IdentityVessel).registryInfo || []).map((i) => ({
- ...i,
+ ...getVesselIdentitiesBySource(vessel as IdentityVessel, {
identitySource: VesselIdentitySourceEnum.Registry,
- })),
- ...((vessel as IdentityVessel).selfReportedInfo || []).map((i) => ({
- ...i,
+ }),
+ ...getVesselIdentitiesBySource(vessel as IdentityVessel, {
identitySource: VesselIdentitySourceEnum.SelfReported,
- })),
+ }),
].sort((a, b) => (a.transmissionDateTo > b.transmissionDateTo ? -1 : 1))
+
return identitySource ? identities.filter((i) => i.identitySource === identitySource) : identities
}
diff --git a/apps/fishing-map/features/workspace/common/LayerFilters.tsx b/apps/fishing-map/features/workspace/common/LayerFilters.tsx
index 73e2e92f7b..bd0bf9e0cd 100644
--- a/apps/fishing-map/features/workspace/common/LayerFilters.tsx
+++ b/apps/fishing-map/features/workspace/common/LayerFilters.tsx
@@ -31,10 +31,7 @@ import HistogramRangeFilter from 'features/workspace/environmental/HistogramRang
import { useVesselGroupsOptions } from 'features/vessel-groups/vessel-groups.hooks'
import { selectVessselGroupsAllowed } from 'features/vessel-groups/vessel-groups.selectors'
import { useAppDispatch } from 'features/app/app.hooks'
-import {
- setVesselGroupCurrentDataviewIds,
- setVesselGroupsModalOpen,
-} from 'features/vessel-groups/vessel-groups.slice'
+import { setVesselGroupsModalOpen } from 'features/vessel-groups/vessel-groups-modal.slice'
import { trackEvent, TrackCategory } from 'features/app/analytics.hooks'
import { listAsSentence } from 'utils/shared'
import UserGuideLink from 'features/help/UserGuideLink'
@@ -252,7 +249,6 @@ function LayerFilters({
}: OnSelectFilterArgs) => {
if ((selection as MultiSelectOption)?.id === VESSEL_GROUPS_MODAL_ID) {
dispatch(setVesselGroupsModalOpen(true))
- dispatch(setVesselGroupCurrentDataviewIds([dataview.id]))
return
}
let filterValues: number | string[]
diff --git a/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsLayerPanel.tsx b/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsLayerPanel.tsx
index c051861529..87671948e1 100644
--- a/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsLayerPanel.tsx
+++ b/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsLayerPanel.tsx
@@ -13,10 +13,10 @@ import { formatInfoField } from 'utils/info'
import VesselGroupReportLink from 'features/reports/vessel-groups/VesselGroupReportLink'
import { useAppDispatch } from 'features/app/app.hooks'
import {
- setNewVesselGroupSearchVessels,
+ setVesselGroupModalVessels,
setVesselGroupEditId,
setVesselGroupsModalOpen,
-} from 'features/vessel-groups/vessel-groups.slice'
+} from 'features/vessel-groups/vessel-groups-modal.slice'
import { selectIsGFWUser } from 'features/user/selectors/user.selectors'
import { selectReadOnly } from 'features/app/selectors/app.selectors'
import Color from '../common/Color'
@@ -66,7 +66,7 @@ function VesselGroupLayerPanel({
const onEditClick = () => {
if (vesselGroup && (vesselGroup?.id || !vesselGroup?.vessels?.length)) {
dispatch(setVesselGroupEditId(vesselGroup.id))
- dispatch(setNewVesselGroupSearchVessels(vesselGroup.vessels))
+ dispatch(setVesselGroupModalVessels(vesselGroup.vessels))
dispatch(setVesselGroupsModalOpen(true))
}
}
diff --git a/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsSection.tsx b/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsSection.tsx
index c26039d785..cc3a32d294 100644
--- a/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsSection.tsx
+++ b/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsSection.tsx
@@ -13,12 +13,12 @@ import { useAppDispatch } from 'features/app/app.hooks'
import {
selectVesselGroupsStatusId,
selectWorkspaceVesselGroupsStatus,
- setVesselGroupsModalOpen,
} from 'features/vessel-groups/vessel-groups.slice'
import UserLoggedIconButton from 'features/user/UserLoggedIconButton'
import { NEW_VESSEL_GROUP_ID } from 'features/vessel-groups/vessel-groups.hooks'
import { AsyncReducerStatus } from 'utils/async-slice'
import { getVesselGroupDataviewInstance } from 'features/reports/vessel-groups/vessel-group-report.dataviews'
+import { setVesselGroupsModalOpen } from 'features/vessel-groups/vessel-groups-modal.slice'
import VesselGroupLayerPanel from './VesselGroupsLayerPanel'
function VesselGroupSection(): React.ReactElement {
diff --git a/apps/fishing-map/features/workspace/vessels/VesselsSection.tsx b/apps/fishing-map/features/workspace/vessels/VesselsSection.tsx
index a7df1e4709..72c44de3a8 100644
--- a/apps/fishing-map/features/workspace/vessels/VesselsSection.tsx
+++ b/apps/fishing-map/features/workspace/vessels/VesselsSection.tsx
@@ -29,14 +29,14 @@ import VesselGroupAddButton from 'features/vessel-groups/VesselGroupAddButton'
import { selectWorkspaceVessselGroupsIds } from 'features/vessel-groups/vessel-groups.selectors'
import { NEW_VESSEL_GROUP_ID } from 'features/vessel-groups/vessel-groups.hooks'
import UserLoggedIconButton from 'features/user/UserLoggedIconButton'
-import {
- selectVesselGroupsStatus,
- setVesselGroupConfirmationMode,
-} from 'features/vessel-groups/vessel-groups.slice'
+import { selectVesselGroupsStatus } from 'features/vessel-groups/vessel-groups.slice'
import { AsyncReducerStatus } from 'utils/async-slice'
import { useAppDispatch } from 'features/app/app.hooks'
import { getVesselGroupDataviewInstance } from 'features/reports/vessel-groups/vessel-group-report.dataviews'
import { selectActiveVesselsDataviews } from 'features/dataviews/selectors/dataviews.categories.selectors'
+import { setVesselGroupConfirmationMode } from 'features/vessel-groups/vessel-groups-modal.slice'
+import { IdentityVesselData } from 'features/vessel/vessel.slice'
+import { getVesselId, getVesselIdentities } from 'features/vessel/vessel.utils'
import VesselEventsLegend from './VesselEventsLegend'
import VesselLayerPanel from './VesselLayerPanel'
import VesselsFromPositions from './VesselsFromPositions'
@@ -147,7 +147,13 @@ function VesselsSection(): React.ReactElement {
)
const vesselsToVesselGroup = areVesselsLoading
? []
- : vesselResources.map((resource) => resource.data)
+ : vesselResources.map(({ data }) => {
+ return {
+ id: getVesselId(data),
+ identities: getVesselIdentities(data),
+ datasetId: data.dataset,
+ } as IdentityVesselData
+ })
return (
diff --git a/apps/fishing-map/public/locales/source/translations.json b/apps/fishing-map/public/locales/source/translations.json
index 9a39ddcd3d..1c5766d219 100644
--- a/apps/fishing-map/public/locales/source/translations.json
+++ b/apps/fishing-map/public/locales/source/translations.json
@@ -1013,6 +1013,7 @@
"addToWorkspace": "Add vessel group to workspace",
"addVessels": "Add vessels to vessel group",
"addVisibleVessels": "Add visible vessels to vessel group",
+ "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?",
"createNewGroup": "Create new group",
diff --git a/apps/fishing-map/reducers.ts b/apps/fishing-map/reducers.ts
index 5cf15acb8a..cbd25285ff 100644
--- a/apps/fishing-map/reducers.ts
+++ b/apps/fishing-map/reducers.ts
@@ -27,6 +27,7 @@ import timebarReducer from 'features/timebar/timebar.slice'
import titleReducer from 'routes/title.reducer'
import userReducer from 'features/user/user.slice'
import vesselGroupReportReducer from 'features/reports/vessel-groups/vessel-group-report.slice'
+import vesselGroupsModalReducer from 'features/vessel-groups/vessel-groups-modal.slice'
import vesselGroupsReducer from 'features/vessel-groups/vessel-groups.slice'
import vesselReducer from 'features/vessel/vessel.slice'
import workspaceReducer from 'features/workspace/workspace.slice'
@@ -62,6 +63,7 @@ export const rootReducer = combineReducers({
user: userReducer,
vessel: vesselReducer,
vesselGroupReport: vesselGroupReportReducer,
+ vesselGroupModal: vesselGroupsModalReducer,
vesselGroups: vesselGroupsReducer,
workspace: workspaceReducer,
workspaces: workspacesReducer,
diff --git a/libs/api-types/src/vesselGroups.ts b/libs/api-types/src/vesselGroups.ts
index f1481a1589..36a62890c8 100644
--- a/libs/api-types/src/vesselGroups.ts
+++ b/libs/api-types/src/vesselGroups.ts
@@ -1,6 +1,7 @@
export interface VesselGroupVessel {
dataset: string
vesselId: string
+ relationId: string
flag?: string
vesselType?: string
}
@@ -13,6 +14,7 @@ export interface VesselGroup {
ownerId?: number
ownerType?: string
createdAt?: string
+ updatedAt?: string
}
export type VesselGroupUpsert = Partial >
|