refactor(vector-map): rendering modifications after element rendering

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts

@@ -156,18 +156,6 @@ export default class MapElement extends BaseMultiPolygon {
   }
 
   protected createPolygons(): void {
-    this.modifications.forEach(modification => {
-      if (modification.state === null) {
-        return;
-      }
-
-      const shapes = this.bioShapes[modification.sboTerm];
-      if (!shapes) {
-        return;
-      }
-      this.drawModification(modification, shapes);
-    });
-
     if (this.lineType) {
       this.lineDash = this.lineTypes[this.lineType] || [];
     }
@@ -181,6 +169,18 @@ export default class MapElement extends BaseMultiPolygon {
       this.drawElementPolygon(homodimerShift, homodimerOffset);
     }
     this.drawOverlays();
+
+    this.modifications.forEach(modification => {
+      if (modification.state === null) {
+        return;
+      }
+
+      const shapes = this.bioShapes[modification.sboTerm];
+      if (!shapes) {
+        return;
+      }
+      this.drawModification(modification, shapes);
+    });
   }
 
   drawModification(modification: Modification, shapes: Array<Shape>): void {

src/redux/bioEntity/bioEntity.reducers.ts

@@ -141,18 +141,18 @@ export const setMultipleBioEntityContentsReducer = (
   state: BioEntityContentsState,
   action: PayloadAction<Array<BioEntity>>,
 ): void => {
-  state.data = [
-    {
-      data: action.payload.map(bioEntity => {
-        return {
+  state.data = action.payload.map(bioEntity => {
+    return {
+      data: [
+        {
           bioEntity,
           perfect: true,
-        };
-      }),
+        },
+      ],
+      searchQueryElement: bioEntity.id.toString(),
       loading: 'succeeded',
       error: DEFAULT_ERROR,
-      searchQueryElement: 'asd',
-    },
-  ];
+    };
+  });
   state.loading = 'succeeded';
 };