diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts index b2d02aea728bf48c334fd15964554ae6b9d7e9da..60d5330aab6cdb1c12abe8685333ad7a20cc1bdb 100644 --- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts +++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts @@ -33,12 +33,15 @@ export const useOlMapReactionsLayer = ({ const shapes = useSelector(bioShapesSelector); const lineTypes = useSelector(lineTypesSelector); - const elements = useMemo(() => { - if (modelElements) { - return modelElements.content.map(element => { - const shape = shapes.find(bioShape => bioShape.sboTerm === element.sboTerm); - if (shape) { - return new MapElement({ + const elements: Array<MapElement> = useMemo(() => { + if (!modelElements || !shapes) return []; + + const validElements: Array<MapElement> = []; + modelElements.content.forEach(element => { + const shape = shapes.find(bioShape => bioShape.sboTerm === element.sboTerm); + if (shape) { + validElements.push( + new MapElement({ shapes: shape.shapes, x: element.x, y: element.y, @@ -62,18 +65,15 @@ export const useOlMapReactionsLayer = ({ modifications: element.modificationResidues, lineTypes, bioShapes: shapes, - }); - } - return undefined; - }); - } - return []; + }), + ); + } + }); + return validElements; }, [modelElements, shapes, pointToProjection, mapInstance, lineTypes]); const features = useMemo(() => { - return elements - .filter((element): element is MapElement => element !== undefined) - .map(element => element.multiPolygonFeature); + return elements.map(element => element.multiPolygonFeature); }, [elements]); const vectorSource = useMemo(() => {