Merge branch 'feat/MIN-149-sbgn-view-Ion-Channel' into 'development'

feat(sbgn-view): add info box about element activity

Closes MIN-149

See merge request !416

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

@@ -20,6 +20,16 @@ export const COMPLEX_SBO_TERMS = ['SBO:0000253', 'SBO:0000297', 'SBO:0000289'];
 
 export const COMPARTMENT_SBO_TERM = 'SBO:0000290';
 
+export const ION_CHANNEL_SBO_TERM = 'SBO:0000284';
+
+export const HOMODIMER_INFO_BOX_WIDTH = 40;
+
+export const HOMODIMER_INFO_BOX_HEIGHT = 18;
+
+export const ACTIVITY_INFO_BOX_WIDTH = 40;
+
+export const ACTIVITY_INFO_BOX_HEIGHT = 18;
+
 export const TEXT_CUTOFF_SCALE = 0.34;
 export const OUTLINE_CUTOFF_SCALE = 0.18;
 export const COMPLEX_CONTENTS_CUTOFF_SCALE = 0.215;

src/components/Map/MapViewer/utils/config/processLayer/processModelElements.ts

@@ -26,6 +26,7 @@ export default function processModelElements(
   mapInstance: MapInstance,
   pointToProjection: UsePointToProjectionResult,
   backgroundId: number,
+  sbgnFormat: boolean,
   mapSize: MapSize,
 ): Array<MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway | Glyph> {
   const overlaysVisible = Boolean(overlaysOrder.length);
@@ -133,6 +134,7 @@ export default function processModelElements(
           overlaysVisible,
           getOverlayColor,
           backgroundId,
+          sbgnFormat,
           mapSize,
         }),
       );

src/components/Map/MapViewer/utils/config/processLayer/useOlMapProcessLayer.ts

@@ -49,6 +49,7 @@ import MapElement from '@/components/Map/MapViewer/utils/shapes/elements/MapElem
 import areOverlayOrdersNotEqual from '@/components/Map/MapViewer/utils/shapes/overlay/areOverlayOrdersNotEqual';
 import { LAYER_TYPE } from '@/components/Map/MapViewer/MapViewer.constants';
 import { modelLoadedSuccessfullySelector, modelLoadingSelector } from '@/redux/selectors';
+import { projectSbgnFormatSelector } from '@/redux/project/project.selectors';
 
 export const useOlMapProcessLayer = ({
   mapInstance,
@@ -75,6 +76,7 @@ export const useOlMapProcessLayer = ({
   const reactionsForCurrentModel = useAppSelector(newReactionsForCurrentModelSelector);
   const modelElementsLoading = useAppSelector(modelElementsCurrentModelLoadingSelector);
   const reactionsLoading = useAppSelector(newReactionsLoadingSelector);
+  const sbgnFormat = useAppSelector(projectSbgnFormatSelector);
 
   const modelElementsForCurrentModel = useAppSelector(modelElementsForCurrentModelSelector);
   const debouncedBioEntities = useDebouncedValue(bioEntities, 1000);
@@ -239,6 +241,7 @@ export const useOlMapProcessLayer = ({
       mapInstance,
       pointToProjection,
       backgroundId,
+      sbgnFormat,
       mapSize,
     );
   }, [
@@ -253,6 +256,7 @@ export const useOlMapProcessLayer = ({
     mapInstance,
     pointToProjection,
     backgroundId,
+    sbgnFormat,
     mapSize,
   ]);
 

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

@@ -75,6 +75,7 @@ describe('MapElement', () => {
         height: 0,
         tileSize: DEFAULT_TILE_SIZE,
       },
+      sbgnFormat: false,
     };
 
     (getTextStyle as jest.Mock).mockReturnValue(

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

@@ -6,10 +6,15 @@ import { Color, Modification, Shape } from '@/types/models';
 import { MapInstance } from '@/types/map';
 import { HorizontalAlign, VerticalAlign } from '@/components/Map/MapViewer/MapViewer.types';
 import {
+  ACTIVITY_INFO_BOX_HEIGHT,
+  ACTIVITY_INFO_BOX_WIDTH,
   BLACK_COLOR,
   COMPLEX_SBO_TERMS,
   DEFAULT_HOMODIMER_OFFSET,
   DEFAULT_HOMODIMER_SHIFT,
+  HOMODIMER_INFO_BOX_HEIGHT,
+  HOMODIMER_INFO_BOX_WIDTH,
+  ION_CHANNEL_SBO_TERM,
   MAP_ELEMENT_TYPES,
   TRANSPARENT_COLOR,
   WHITE_COLOR,
@@ -71,9 +76,31 @@ export type MapElementProps = {
   overlaysVisible: boolean;
   getOverlayColor: GetOverlayBioEntityColorByAvailableProperties;
   backgroundId: number;
+  sbgnFormat: boolean;
   mapSize: MapSize;
 };
 
+function getActivityInfoBoxOffset(withHomodimer: boolean): number {
+  if (withHomodimer) {
+    return -(
+      (HOMODIMER_INFO_BOX_WIDTH + ACTIVITY_INFO_BOX_WIDTH) / 2 -
+      HOMODIMER_INFO_BOX_WIDTH +
+      DEFAULT_HOMODIMER_OFFSET / 2
+    );
+  }
+  return -(ACTIVITY_INFO_BOX_WIDTH / 2);
+}
+
+function getHomodimerInfoBoxOffset(withActivity: boolean): number {
+  if (withActivity) {
+    return -(
+      (HOMODIMER_INFO_BOX_WIDTH + ACTIVITY_INFO_BOX_WIDTH) / 2 +
+      DEFAULT_HOMODIMER_OFFSET / 2
+    );
+  }
+  return -(HOMODIMER_INFO_BOX_WIDTH / 2 + DEFAULT_HOMODIMER_OFFSET / 2);
+}
+
 export default class MapElement extends BaseMultiPolygon {
   shapes: Array<Shape>;
 
@@ -93,6 +120,8 @@ export default class MapElement extends BaseMultiPolygon {
 
   lineDash: Array<number> = [];
 
+  sbgnFormat: boolean = false;
+
   overlays: Array<OverlayBioEntityRender> = [];
 
   overlaysOrder: Array<OverlayOrder> = [];
@@ -137,6 +166,7 @@ export default class MapElement extends BaseMultiPolygon {
     overlaysVisible,
     getOverlayColor,
     backgroundId,
+    sbgnFormat,
     mapSize,
   }: MapElementProps) {
     super({
@@ -169,6 +199,7 @@ export default class MapElement extends BaseMultiPolygon {
       mapSize,
       mapInstance,
     });
+    this.sbgnFormat = sbgnFormat;
     this.shapes = shapes;
     this.lineWidth = lineWidth;
     this.lineType = lineType;
@@ -203,18 +234,26 @@ export default class MapElement extends BaseMultiPolygon {
       this.lineDash = this.lineTypes[this.lineType] || [];
     }
 
-    if (this.homodimer > 1) {
-      if (this.activity) {
-        this.drawActiveBorder(DEFAULT_HOMODIMER_SHIFT, DEFAULT_HOMODIMER_OFFSET);
+    const showActivityInfoBox = this.sbgnFormat && this.sboTerm === ION_CHANNEL_SBO_TERM;
+    const showHomodimerInfoBox = this.homodimer > 1;
+
+    if (showHomodimerInfoBox) {
+      if (showActivityInfoBox) {
+        this.drawActivityInfoBox(getActivityInfoBoxOffset(true));
+        this.drawHomodimerInfoBox(getHomodimerInfoBoxOffset(true));
+      } else {
+        if (this.activity) {
+          this.drawActiveBorder(DEFAULT_HOMODIMER_SHIFT, DEFAULT_HOMODIMER_OFFSET);
+          this.drawActiveBorder(0, DEFAULT_HOMODIMER_OFFSET);
+        }
+        this.drawHomodimerInfoBox(getHomodimerInfoBoxOffset(false));
       }
       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) {
+      if (showActivityInfoBox) {
+        this.drawActivityInfoBox(getActivityInfoBoxOffset(false));
+      } else if (this.activity) {
         this.drawActiveBorder(0, 0);
       }
       this.drawElementPolygon(0, 0);
@@ -234,10 +273,41 @@ 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;
+  private drawActivityInfoBox(offset: number): void {
+    const width = ACTIVITY_INFO_BOX_WIDTH;
+    const height = ACTIVITY_INFO_BOX_HEIGHT;
+    const x = this.x + this.width / 2 + offset;
+    const y = this.y - height / 2;
+    const activityInfoBoxPolygon = getBoundingBoxPolygon({
+      x,
+      y,
+      width,
+      height,
+      pointToProjection: this.pointToProjection,
+    });
+    const activityInfoBoxStrokeStyle = getStroke({});
+    const activityInfoBoxStyle = new Style({
+      geometry: activityInfoBoxPolygon,
+      stroke: activityInfoBoxStrokeStyle,
+      fill: getFill({}),
+      zIndex: this.getMaxZIndex() + 1,
+      text: new Text({
+        text: this.activity ? 'open' : 'closed',
+        font: '12pt Arial',
+        fill: getFill({ color: '#000' }),
+        overflow: true,
+      }),
+    });
+    activityInfoBoxPolygon.set('strokeStyle', activityInfoBoxStrokeStyle);
+    activityInfoBoxPolygon.set('type', MAP_ELEMENT_TYPES.HOMODIMER_BOX);
+    this.polygons.push(activityInfoBoxPolygon);
+    this.styles.push(activityInfoBoxStyle);
+  }
+
+  private drawHomodimerInfoBox(offset: number): void {
+    const width = HOMODIMER_INFO_BOX_WIDTH;
+    const height = HOMODIMER_INFO_BOX_HEIGHT;
+    const x = this.x + this.width / 2 + offset;
     const y = this.y - height / 2;
     const homodimerInfoBoxPolygon = getBoundingBoxPolygon({
       x,

src/models/projectSchema.ts

@@ -31,4 +31,5 @@ export const projectSchema = z.object({
   topMap: z.object({
     id: z.number().int().nonnegative(),
   }),
+  sbgnFormat: z.boolean(),
 });

src/redux/project/project.selectors.ts

@@ -35,6 +35,11 @@ export const projectIdSelector = createSelector(
   projectData => projectData?.projectId,
 );
 
+export const projectSbgnFormatSelector = createSelector(
+  projectDataSelector,
+  projectData => projectData?.sbgnFormat || false,
+);
+
 export const projectNameSelector = createSelector(
   projectDataSelector,
   projectData => projectData?.name,