Merge branch 'feat/MIN-148-multimer' into 'development'

feat(multimer): change visualization of elements with homodimer > 1

Closes MIN-148

See merge request !415

src/components/Map/MapViewer/MapViewer.constants.ts

@@ -2,6 +2,10 @@ import { Color, ShapeRelAbs, ShapeRelAbsBezierPoint } from '@/types/models';
 
 export const MAP_VIEWER_ROLE = 'map-viewer';
 
+export const DEFAULT_HOMODIMER_OFFSET = 6;
+
+export const DEFAULT_HOMODIMER_SHIFT = 6;
+
 export const LAYER_TYPE = {
   PROCESS_LAYER: 'PROCESS_LAYER',
   COMMENTS_LAYER: 'COMMENTS_LAYER',
@@ -50,6 +54,7 @@ export const MAP_ELEMENT_TYPES = {
   ENTITY: 'ENTITY',
   OVERLAY: 'OVERLAY',
   COMPARTMENT: 'COMPARTMENT',
+  HOMODIMER_BOX: 'HOMODIMER_BOX',
 };
 
 export const LAYER_ELEMENT_TYPES = {

src/components/Map/MapViewer/utils/shapes/elements/BaseMultiPolygon.ts

@@ -315,14 +315,18 @@ export default abstract class BaseMultiPolygon {
       }
 
       if (
-        [MAP_ELEMENT_TYPES.MODIFICATION, MAP_ELEMENT_TYPES.TEXT].includes(type) &&
+        [
+          MAP_ELEMENT_TYPES.MODIFICATION,
+          MAP_ELEMENT_TYPES.TEXT,
+          MAP_ELEMENT_TYPES.HOMODIMER_BOX,
+        ].includes(type) &&
         scale < TEXT_CUTOFF_SCALE
       ) {
         return;
       }
 
       const textStyle = style.getText();
-      if (type === MAP_ELEMENT_TYPES.TEXT && textStyle) {
+      if ([MAP_ELEMENT_TYPES.HOMODIMER_BOX, MAP_ELEMENT_TYPES.TEXT].includes(type) && textStyle) {
         textStyle.setScale(scale);
       }
       if (strokeStyle) {

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

 /* eslint-disable no-magic-numbers */
-import { Style } from 'ol/style';
+import { Style, Text } from 'ol/style';
 import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
 import Polygon from 'ol/geom/Polygon';
 import { Color, Modification, Shape } from '@/types/models';
@@ -8,6 +8,8 @@ import { HorizontalAlign, VerticalAlign } from '@/components/Map/MapViewer/MapVi
 import {
   BLACK_COLOR,
   COMPLEX_SBO_TERMS,
+  DEFAULT_HOMODIMER_OFFSET,
+  DEFAULT_HOMODIMER_SHIFT,
   MAP_ELEMENT_TYPES,
   TRANSPARENT_COLOR,
   WHITE_COLOR,
@@ -29,6 +31,7 @@ import BaseMultiPolygon from '@/components/Map/MapViewer/utils/shapes/elements/B
 import { rgbToHex } from '@/components/Map/MapViewer/utils/shapes/style/rgbToHex';
 import getFill from '@/components/Map/MapViewer/utils/shapes/style/getFill';
 import getStroke from '@/components/Map/MapViewer/utils/shapes/style/getStroke';
+import getBoundingBoxPolygon from '@/components/Map/MapViewer/utils/shapes/elements/getBoundingBoxPolygon';
 
 export type MapElementProps = {
   id: number;
@@ -182,18 +185,39 @@ export default class MapElement extends BaseMultiPolygon {
     this.drawMultiPolygonFeature(mapInstance);
   }
 
+  private getMaxZIndex(): number {
+    let maxZIndex = -Infinity;
+    if (this.zIndex > maxZIndex) {
+      maxZIndex = this.zIndex;
+    }
+    this.modifications.forEach(modification => {
+      if (modification.z > maxZIndex) {
+        maxZIndex = modification.z;
+      }
+    });
+    return maxZIndex;
+  }
+
   protected createPolygons(): void {
     if (this.lineType) {
       this.lineDash = this.lineTypes[this.lineType] || [];
     }
 
-    const homodimerOffset = (this.homodimer - 1) * 6;
-    for (let i = 0; i < this.homodimer; i += 1) {
-      const homodimerShift = (this.homodimer - i - 1) * 6;
+    if (this.homodimer > 1) {
+      if (this.activity) {
+        this.drawActiveBorder(DEFAULT_HOMODIMER_SHIFT, DEFAULT_HOMODIMER_OFFSET);
+      }
+      this.drawElementPolygon(DEFAULT_HOMODIMER_SHIFT, DEFAULT_HOMODIMER_OFFSET);
+      if (this.activity) {
+        this.drawActiveBorder(0, DEFAULT_HOMODIMER_OFFSET);
+      }
+      this.drawElementPolygon(0, DEFAULT_HOMODIMER_OFFSET);
+      this.drawHomodimerInfoBox();
+    } else {
       if (this.activity) {
-        this.drawActiveBorder(homodimerShift, homodimerOffset);
+        this.drawActiveBorder(0, 0);
       }
-      this.drawElementPolygon(homodimerShift, homodimerOffset);
+      this.drawElementPolygon(0, 0);
     }
     this.drawOverlays();
 
@@ -210,6 +234,37 @@ export default class MapElement extends BaseMultiPolygon {
     });
   }
 
+  private drawHomodimerInfoBox(): void {
+    const width = 25;
+    const height = 15;
+    const x = this.x + this.width / 2 - width / 2 - DEFAULT_HOMODIMER_OFFSET / 2;
+    const y = this.y - height / 2;
+    const homodimerInfoBoxPolygon = getBoundingBoxPolygon({
+      x,
+      y,
+      width,
+      height,
+      pointToProjection: this.pointToProjection,
+    });
+    const homodimerInfoBoxStrokeStyle = getStroke({});
+    const homodimerInfoBoxStyle = new Style({
+      geometry: homodimerInfoBoxPolygon,
+      stroke: homodimerInfoBoxStrokeStyle,
+      fill: getFill({}),
+      zIndex: this.getMaxZIndex() + 1,
+      text: new Text({
+        text: `N:${this.homodimer}`,
+        font: '12pt Arial',
+        fill: getFill({ color: '#000' }),
+        overflow: true,
+      }),
+    });
+    homodimerInfoBoxPolygon.set('strokeStyle', homodimerInfoBoxStrokeStyle);
+    homodimerInfoBoxPolygon.set('type', MAP_ELEMENT_TYPES.HOMODIMER_BOX);
+    this.polygons.push(homodimerInfoBoxPolygon);
+    this.styles.push(homodimerInfoBoxStyle);
+  }
+
   drawModification(modification: Modification, shapes: Array<Shape>): void {
     shapes.forEach(shape => {
       const modificationPolygon = getShapePolygon({