perf(vector-map): remove unnecessary filtering on array

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(() => {