diff --git a/frontend/src/domain/entities/vessel/types.ts b/frontend/src/domain/entities/vessel/types.ts index ffd89f0a1b..412b766019 100644 --- a/frontend/src/domain/entities/vessel/types.ts +++ b/frontend/src/domain/entities/vessel/types.ts @@ -229,13 +229,10 @@ export type TrackTypeRecordItem = { export type VesselEnhancedLastPositionWebGLObject = { coordinates: number[] - course: number filterPreview: number // 0 is False, 1 is True - for WebGL hasBeaconMalfunction: boolean - isAtPort: boolean isFiltered: number // 0 is False, 1 is True - for WebGL lastPositionSentAt: number - speed: number vesselFeatureId: VesselFeatureId vesselProperties: Vessel.VesselEnhancedObject } diff --git a/frontend/src/domain/shared_slices/Vessel.ts b/frontend/src/domain/shared_slices/Vessel.ts index 7cd89393b8..8138b3fa3c 100644 --- a/frontend/src/domain/shared_slices/Vessel.ts +++ b/frontend/src/domain/shared_slices/Vessel.ts @@ -1,9 +1,10 @@ -import { reportingIsAnInfractionSuspicion } from '@features/Reporting/utils' -import { createSlice } from '@reduxjs/toolkit' -import { transform } from 'ol/proj' +import {reportingIsAnInfractionSuspicion} from '@features/Reporting/utils' +import type {PayloadAction} from '@reduxjs/toolkit' +import {createEntityAdapter, createSlice, type EntityState} from '@reduxjs/toolkit' +import {transform} from 'ol/proj' -import { ReportingType, ReportingTypeCharacteristics } from '../../features/Reporting/types' -import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '../entities/map/constants' +import {ReportingType, ReportingTypeCharacteristics} from '../../features/Reporting/types' +import {OPENLAYERS_PROJECTION, WSG84_PROJECTION} from '../entities/map/constants' import { atLeastOneVesselSelected, getOnlyVesselIdentityProperties, @@ -18,41 +19,17 @@ import type { VesselEnhancedLastPositionWebGLObject, VesselFeatureId, VesselIdentity, + VesselLastPosition, VesselPosition } from '../entities/vessel/types' -import type { Vessel as VesselTypes } from '@features/Vessel/Vessel.types' -import type { PayloadAction } from '@reduxjs/toolkit' +import type {Vessel as VesselTypes} from '@features/Vessel/Vessel.types' const NOT_FOUND = -1 -function filterFirstFoundReportingType(reportingType) { - let reportingTypeHasBeenRemoved = false - - return (acc, returnedReportingType) => { - if (returnedReportingType === reportingType && !reportingTypeHasBeenRemoved) { - reportingTypeHasBeenRemoved = true - - return acc - } - - acc.push(returnedReportingType) - - return acc - } -} - -function filterFirstFoundReportingTypes(reportingTypes, vesselReportingsToRemove) { - let vesselReportingWithoutFirstFoundReportingTypes = reportingTypes - - vesselReportingsToRemove.forEach(reportingToRemove => { - vesselReportingWithoutFirstFoundReportingTypes = vesselReportingWithoutFirstFoundReportingTypes.reduce( - filterFirstFoundReportingType(reportingToRemove.type), - [] - ) - }) - - return vesselReportingWithoutFirstFoundReportingTypes -} +export const vesselsAdapter = createEntityAdapter({ + selectId: (vessel: VesselEnhancedLastPositionWebGLObject) => vessel.vesselFeatureId, + sortComparer: false +}); // TODO Properly type this redux state. export type VesselState = { @@ -72,7 +49,7 @@ export type VesselState = { vesselSidebarIsOpen: boolean vesselSidebarTab: VesselSidebarTab vesselTrackExtent: any | null - vessels: VesselEnhancedLastPositionWebGLObject[] + vessels: EntityState vesselsEstimatedPositions: any[] vesselsTracksShowed: Record } @@ -90,7 +67,7 @@ const INITIAL_STATE: VesselState = { tripMessagesLastToFormerDEPDateTimes: [], uniqueVesselsDistricts: [], uniqueVesselsSpecies: [], - vessels: [], + vessels: vesselsAdapter.getInitialState(), vesselsEstimatedPositions: [], vesselSidebarIsOpen: false, vesselSidebarTab: VesselSidebarTab.SUMMARY, @@ -406,48 +383,32 @@ const vesselSlice = createSlice({ state.selectedVesselPositions = null }, - /** - * Reset the vessel track features extent - * @function setVesselTrackExtent - * - * @param {Object} state - */ - resetVesselTrackExtent(state) { - state.vesselTrackExtent = null - }, - setAllVesselsAsUnfiltered(state) { - if (!state.vessels.find(vessel => vessel.isFiltered)) { - return + // Check if any vessel has `isFiltered` set to true + if (!Object.values(state.vessels).some(vessel => vessel.isFiltered)) { + return; } - state.vessels = state.vessels.map(vessel => ({ - ...vessel, - isFiltered: 0 - })) + // Update all vessels' `isFiltered` field to 0 + vesselsAdapter.updateAll(state.vessels, { + changes: { isFiltered: 0 } + }) }, - /** - * Set filtered features as true - * @function setFilteredVesselsFeatures - * @param {Object} state - * @param {{payload: string[]}} action - the vessel features uids - */ - setFilteredVesselsFeatures(state, action) { + setFilteredVesselsFeatures(state, action: PayloadAction) { const filteredVesselsFeaturesUids = action.payload - state.vessels = state.vessels.map(vessel => { - if (filteredVesselsFeaturesUids.indexOf(vessel.vesselFeatureId) !== NOT_FOUND) { - return { - ...vessel, - isFiltered: 1 + const vesselIds = vesselsAdapter.getSelectors().selectIds(state.vessels) + + // Update only the vessels that match the filtered IDs + vesselsAdapter.updateMany( + state.vessels, + vesselIds.map(vesselId => ({ + id: vesselId, + changes: { + isFiltered: filteredVesselsFeaturesUids.includes(vesselId) ? 1 : 0 } - } - - return { - ...vessel, - isFiltered: 0 - } - }) + })) + ) }, /** @@ -525,19 +486,18 @@ const vesselSlice = createSlice({ state.vesselsEstimatedPositions = action.payload }, - setVesselsFromAPI(state, action) { - // FIXME : find a way to update state.vessel[vessels] without overriding - // "private" properties like isFiltered / filterPreview when uploading from api - state.vessels = action.payload?.map(vessel => ({ + setVesselsFromAPI(state, action: PayloadAction) { + if (!action.payload || !Array.isArray(action.payload)) { + return + } + + vesselsAdapter.setMany(state.vessels, action.payload.map(vessel => ({ + vesselFeatureId: Vessel.getVesselFeatureId(vessel), coordinates: transform([vessel.longitude, vessel.latitude], WSG84_PROJECTION, OPENLAYERS_PROJECTION), - course: vessel.course, filterPreview: 0, hasBeaconMalfunction: !!vessel.beaconMalfunctionId, - isAtPort: vessel.isAtPort, isFiltered: 0, lastPositionSentAt: new Date(vessel.dateTime).getTime(), - speed: vessel.speed, - vesselFeatureId: Vessel.getVesselFeatureId(vessel), vesselProperties: { ...vessel, flagState: vessel.flagState, @@ -553,7 +513,7 @@ const vesselSlice = createSlice({ ? Array.from(new Set(vessel.speciesOnboard.map(species => species.species))) : [] } - })) + }))); }, setVesselsSpeciesAndDistricts(state, action) { @@ -659,6 +619,35 @@ const vesselSlice = createSlice({ } }) +function filterFirstFoundReportingType(reportingType) { + let reportingTypeHasBeenRemoved = false + + return (acc, returnedReportingType) => { + if (returnedReportingType === reportingType && !reportingTypeHasBeenRemoved) { + reportingTypeHasBeenRemoved = true + + return acc + } + + acc.push(returnedReportingType) + + return acc + } +} + +function filterFirstFoundReportingTypes(reportingTypes, vesselReportingsToRemove) { + let vesselReportingWithoutFirstFoundReportingTypes = reportingTypes + + vesselReportingsToRemove.forEach(reportingToRemove => { + vesselReportingWithoutFirstFoundReportingTypes = vesselReportingWithoutFirstFoundReportingTypes.reduce( + filterFirstFoundReportingType(reportingToRemove.type), + [] + ) + }) + + return vesselReportingWithoutFirstFoundReportingTypes +} + export const { addVesselReporting, addVesselTrackShowed, @@ -671,7 +660,6 @@ export const { resetHighlightedVesselTrackPosition, resetLoadingVessel, resetSelectedVessel, - resetVesselTrackExtent, setAllVesselsAsUnfiltered, setFilteredVesselsFeatures, setHideNonSelectedVessels, diff --git a/frontend/src/domain/use_cases/vessel/showVessel.ts b/frontend/src/domain/use_cases/vessel/showVessel.ts index c31df39eec..60609ad2c9 100644 --- a/frontend/src/domain/use_cases/vessel/showVessel.ts +++ b/frontend/src/domain/use_cases/vessel/showVessel.ts @@ -9,7 +9,7 @@ import { displayedComponentActions } from '../../shared_slices/DisplayedComponen import { displayedErrorActions } from '../../shared_slices/DisplayedError' import { addSearchedVessel, removeError, setError } from '../../shared_slices/Global' import { doNotAnimate } from '../../shared_slices/Map' -import { loadingVessel, resetLoadingVessel, setSelectedVessel } from '../../shared_slices/Vessel' +import {loadingVessel, resetLoadingVessel, setSelectedVessel, vesselsAdapter} from '../../shared_slices/Vessel' import { displayOrLogError } from '../error/displayOrLogError' import type { VesselIdentity } from '../../entities/vessel/types' @@ -22,7 +22,10 @@ export const showVessel = (vesselIdentity: VesselIdentity, isFromSearch: boolean, isFromUserAction: boolean) => async (dispatch, getState) => { try { const { fishingActivities, map, vessel } = getState() - const { selectedVesselTrackRequest, vessels } = vessel + const selectedVesselTrackRequest = vessel.selectedVesselTrackRequest + const vesselsSelector = vessel.vessels + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) + console.log(vessels) const { defaultVesselTrackDepth } = map const { areFishingActivitiesShowedOnMap } = fishingActivities // TODO How to handle both the control unit dialog and the vessel sidebar ? diff --git a/frontend/src/features/Vessel/useCases/applyFilterToVessels.ts b/frontend/src/features/Vessel/useCases/applyFilterToVessels.ts index a7ea16ed65..f2d115fe50 100644 --- a/frontend/src/features/Vessel/useCases/applyFilterToVessels.ts +++ b/frontend/src/features/Vessel/useCases/applyFilterToVessels.ts @@ -1,5 +1,9 @@ import { setError } from '../../../domain/shared_slices/Global' -import { setAllVesselsAsUnfiltered, setFilteredVesselsFeatures } from '../../../domain/shared_slices/Vessel' +import { + setAllVesselsAsUnfiltered, + setFilteredVesselsFeatures, + vesselsAdapter +} from '../../../domain/shared_slices/Vessel' import { getFilteredVessels } from '../../../domain/use_cases/vessel/getFilteredVessels' import NoVesselsInFilterError from '../../../errors/NoVesselsInFilterError' @@ -7,7 +11,11 @@ import type { MainAppThunk } from '@store' export const applyFilterToVessels = (): MainAppThunk => (dispatch, getState) => { const showedFilter = getState().filter?.filters?.find(filter => filter.showed) - const { vessels } = getState().vessel + const vesselsSelector = getState().vessel.vessels + if (!vesselsSelector) { + return + } + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) if (!showedFilter) { return dispatch(setAllVesselsAsUnfiltered()) } diff --git a/frontend/src/features/VesselList/index.tsx b/frontend/src/features/VesselList/index.tsx index 726273f4f6..8798411eed 100644 --- a/frontend/src/features/VesselList/index.tsx +++ b/frontend/src/features/VesselList/index.tsx @@ -19,7 +19,7 @@ import { setDisplayedComponents } from '../../domain/shared_slices/DisplayedComp import { addFilter } from '../../domain/shared_slices/Filter' import { setBlockVesselsUpdate, setPreviewFilteredVesselsMode } from '../../domain/shared_slices/Global' import { animateToExtent } from '../../domain/shared_slices/Map' -import { setPreviewFilteredVesselsFeatures } from '../../domain/shared_slices/Vessel' +import {setPreviewFilteredVesselsFeatures, vesselsAdapter} from '../../domain/shared_slices/Vessel' import { addVesselListFilterZone } from '../../domain/use_cases/vessel/addVesselListFilterZone' import { getFilteredVessels } from '../../domain/use_cases/vessel/getFilteredVessels' import { unselectVessel } from '../../domain/use_cases/vessel/unselectVessel' @@ -70,8 +70,9 @@ export function VesselList({ namespace }) { const { uniqueVesselsDistricts: districts, uniqueVesselsSpecies: species, - vessels } = useMainAppSelector(state => state.vessel) + const vesselsSelector = useMainAppSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const getFleetSegmentsQuery = useGetFleetSegmentsQuery() const gears = useMainAppSelector(state => state.gear.gears) diff --git a/frontend/src/features/VesselSearch/index.tsx b/frontend/src/features/VesselSearch/index.tsx index 96a235bc38..3ff2614246 100644 --- a/frontend/src/features/VesselSearch/index.tsx +++ b/frontend/src/features/VesselSearch/index.tsx @@ -18,6 +18,7 @@ import { showVessel } from '../../domain/use_cases/vessel/showVessel' import type { VesselIdentity } from '../../domain/entities/vessel/types' import type { ChangeEvent, InputHTMLAttributes, MutableRefObject } from 'react' import type { Promisable } from 'type-fest' +import {vesselsAdapter} from "../../domain/shared_slices/Vessel"; type VesselSearchProps = Omit, 'defaultValue' | 'onChange'> & { baseRef?: MutableRefObject | undefined @@ -51,7 +52,8 @@ export function VesselSearch({ const dispatch = useMainAppDispatch() const baseUrl = window.location.origin const selectedVesselIdentity = useMainAppSelector(state => state.vessel.selectedVesselIdentity) - const vessels = useMainAppSelector(state => state.vessel.vessels) + const vesselsSelector = useMainAppSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const searchQueryRef = useRef('') const wrapperRef = useRef(null) diff --git a/frontend/src/features/map/MapMenu.tsx b/frontend/src/features/map/MapMenu.tsx index cbafcd2f15..6478f3b93c 100644 --- a/frontend/src/features/map/MapMenu.tsx +++ b/frontend/src/features/map/MapMenu.tsx @@ -6,12 +6,14 @@ import MapMenuOverlay from './overlays/MapMenuOverlay' import { HIT_PIXEL_TO_TOLERANCE } from '../../constants/constants' import { LayerProperties } from '../../domain/entities/layers/constants' import { MonitorFishLayer } from '../../domain/entities/layers/types' -import { useMainAppSelector } from '../../hooks/useMainAppSelector' import type { VesselEnhancedLastPositionWebGLObject } from '../../domain/entities/vessel/types' +import {vesselsAdapter} from "../../domain/shared_slices/Vessel"; +import {useMainAppSelector} from "@hooks/useMainAppSelector"; export function MapMenu() { - const { vessels } = useMainAppSelector(state => state.vessel) + const vesselsSelector = useMainAppSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const [coordinates, setCoordinates] = useState([]) const vessel = useRef() diff --git a/frontend/src/features/map/layers/Vessel/VesselAlertAndBeaconMalfunctionLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselAlertAndBeaconMalfunctionLayer.jsx index 06a10920fd..39ad090383 100644 --- a/frontend/src/features/map/layers/Vessel/VesselAlertAndBeaconMalfunctionLayer.jsx +++ b/frontend/src/features/map/layers/Vessel/VesselAlertAndBeaconMalfunctionLayer.jsx @@ -10,15 +10,17 @@ import { getVesselAlertAndBeaconMalfunctionStyle } from './style' import { getVesselCompositeIdentifier, vesselIsShowed } from '../../../../domain/entities/vessel/vessel' import { useIsSuperUser } from '../../../../auth/hooks/useIsSuperUser' import { monitorfishMap } from '../../monitorfishMap' +import { vesselsAdapter } from '../../../../domain/shared_slices/Vessel' const VesselAlertAndBeaconMalfunctionLayer = () => { const isSuperUser = useIsSuperUser() const { - vessels, hideNonSelectedVessels, selectedVesselIdentity, vesselsTracksShowed } = useSelector(state => state.vessel) + const vesselsSelector = useSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const { nonFilteredVesselsAreHidden diff --git a/frontend/src/features/map/layers/Vessel/VesselAlertLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselAlertLayer.jsx index f48d4de0ce..487d322ec6 100644 --- a/frontend/src/features/map/layers/Vessel/VesselAlertLayer.jsx +++ b/frontend/src/features/map/layers/Vessel/VesselAlertLayer.jsx @@ -15,16 +15,18 @@ import { } from '../../../../domain/entities/vessel/vessel' import { useIsSuperUser } from '../../../../auth/hooks/useIsSuperUser' import { monitorfishMap } from '../../monitorfishMap' +import { vesselsAdapter } from '../../../../domain/shared_slices/Vessel' const VesselAlertLayer = () => { const isSuperUser = useIsSuperUser() const { - vessels, hideNonSelectedVessels, selectedVesselIdentity, vesselsTracksShowed } = useSelector(state => state.vessel) + const vesselsSelector = useSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const { nonFilteredVesselsAreHidden diff --git a/frontend/src/features/map/layers/Vessel/VesselBeaconMalfunctionLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselBeaconMalfunctionLayer.jsx index 09d73fb28a..589442d129 100644 --- a/frontend/src/features/map/layers/Vessel/VesselBeaconMalfunctionLayer.jsx +++ b/frontend/src/features/map/layers/Vessel/VesselBeaconMalfunctionLayer.jsx @@ -10,16 +10,18 @@ import { getVesselBeaconMalfunctionStyle } from './style' import { getVesselCompositeIdentifier, vesselIsShowed } from '../../../../domain/entities/vessel/vessel' import { useIsSuperUser } from '../../../../auth/hooks/useIsSuperUser' import { monitorfishMap } from '../../monitorfishMap' +import { vesselsAdapter } from '../../../../domain/shared_slices/Vessel' const VesselBeaconMalfunctionLayer = () => { const isSuperUser = useIsSuperUser() const { - vessels, hideNonSelectedVessels, vesselsTracksShowed, selectedVesselIdentity } = useSelector(state => state.vessel) + const vesselsSelector = useSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const { nonFilteredVesselsAreHidden diff --git a/frontend/src/features/map/layers/Vessel/VesselEstimatedPositionLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselEstimatedPositionLayer.jsx index 19853ab0b4..6a60ce94cf 100644 --- a/frontend/src/features/map/layers/Vessel/VesselEstimatedPositionLayer.jsx +++ b/frontend/src/features/map/layers/Vessel/VesselEstimatedPositionLayer.jsx @@ -7,14 +7,16 @@ import { getVesselLastPositionVisibilityDates, Vessel, vesselIsShowed } from '.. import { Vector } from 'ol/layer' import { getEstimatedPositionStyle } from '../styles/vesselEstimatedPosition.style' import { monitorfishMap } from '../../monitorfishMap' +import { vesselsAdapter } from '../../../../domain/shared_slices/Vessel' const VesselEstimatedPositionLayer = () => { const { - vessels, hideNonSelectedVessels, vesselsTracksShowed, selectedVesselIdentity } = useSelector(state => state.vessel) + const vesselsSelector = useSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const { nonFilteredVesselsAreHidden diff --git a/frontend/src/features/map/layers/Vessel/VesselInfractionSuspicionLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselInfractionSuspicionLayer.jsx index c28cf204a3..75ec9808e2 100644 --- a/frontend/src/features/map/layers/Vessel/VesselInfractionSuspicionLayer.jsx +++ b/frontend/src/features/map/layers/Vessel/VesselInfractionSuspicionLayer.jsx @@ -15,16 +15,18 @@ import { } from '../../../../domain/entities/vessel/vessel' import { useIsSuperUser } from '../../../../auth/hooks/useIsSuperUser' import { monitorfishMap } from '../../monitorfishMap' +import { vesselsAdapter } from '../../../../domain/shared_slices/Vessel' const VesselInfractionSuspicionLayer = () => { const isSuperUser = useIsSuperUser() const { - vessels, hideNonSelectedVessels, selectedVesselIdentity, vesselsTracksShowed } = useSelector(state => state.vessel) + const vesselsSelector = useSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const { nonFilteredVesselsAreHidden diff --git a/frontend/src/features/map/layers/Vessel/VesselsLabelsLayer.tsx b/frontend/src/features/map/layers/Vessel/VesselsLabelsLayer.tsx index 6e7636d281..dd5619e8a1 100644 --- a/frontend/src/features/map/layers/Vessel/VesselsLabelsLayer.tsx +++ b/frontend/src/features/map/layers/Vessel/VesselsLabelsLayer.tsx @@ -24,6 +24,7 @@ import type { VectorLayerWithName } from '../../../../domain/types/layer' import type { Feature } from 'ol' import type { Geometry } from 'ol/geom' import type { MutableRefObject } from 'react' +import {vesselsAdapter} from "../../../../domain/shared_slices/Vessel"; const MAX_LABELS_DISPLAYED = 200 const MAX_LABELS_DISPLAYED_IN_PREVIEW = 400 @@ -36,7 +37,8 @@ export function VesselsLabelsLayer({ mapMovingAndZoomEvent }) { const hideNonSelectedVessels = useMainAppSelector(state => state.vessel.hideNonSelectedVessels) const selectedVessel = useMainAppSelector(state => state.vessel.selectedVessel) - const vessels = useMainAppSelector(state => state.vessel.vessels) + const vesselsSelector = useMainAppSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const vesselsTracksShowed = useMainAppSelector(state => state.vessel.vesselsTracksShowed) const areVesselsDisplayed = useMainAppSelector(state => state.displayedComponent.areVesselsDisplayed) const previewFilteredVesselsMode = useMainAppSelector(state => state.global.previewFilteredVesselsMode) diff --git a/frontend/src/features/map/layers/Vessel/VesselsLayer/index.tsx b/frontend/src/features/map/layers/Vessel/VesselsLayer/index.tsx index 6ff609f50f..58b9a762f5 100644 --- a/frontend/src/features/map/layers/Vessel/VesselsLayer/index.tsx +++ b/frontend/src/features/map/layers/Vessel/VesselsLayer/index.tsx @@ -18,13 +18,15 @@ import { getWebGLVesselStyle } from '../style' import type { VesselLastPositionFeature } from '../../../../../domain/entities/vessel/types' import type { WebGLPointsLayerWithName } from '../../../../../domain/types/layer' +import {vesselsAdapter} from "../../../../../domain/shared_slices/Vessel"; function UnmemoizedVesselsLayer() { const dispatch = useMainAppDispatch() const areVesselsDisplayed = useMainAppSelector(state => state.displayedComponent.areVesselsDisplayed) const hideNonSelectedVessels = useMainAppSelector(state => state.vessel.hideNonSelectedVessels) - const vessels = useMainAppSelector(state => state.vessel.vessels) + const vesselsSelector = useMainAppSelector(state => state.vessel.vessels) + const vessels = vesselsAdapter.getSelectors().selectAll(vesselsSelector) const hideVesselsAtPort = useMainAppSelector(state => state.map.hideVesselsAtPort) const selectedBaseLayer = useMainAppSelector(state => state.map.selectedBaseLayer) @@ -100,16 +102,17 @@ function UnmemoizedVesselsLayer() { }, [areVesselsDisplayed]) useEffect(() => { + console.log('here! ') const features = vessels.map(vessel => { const propertiesUsedForStyling = { coordinates: vessel.coordinates, - course: vessel.course, + course: vessel.vesselProperties.course, filterPreview: vessel.filterPreview, hasBeaconMalfunction: vessel.hasBeaconMalfunction, - isAtPort: vessel.isAtPort, + isAtPort: vessel.vesselProperties.isAtPort, isFiltered: vessel.isFiltered, lastPositionSentAt: vessel.lastPositionSentAt, - speed: vessel.speed + speed: vessel.vesselProperties.speed } const feature = new Feature({