feat(sbgn-view): change and operator visualization in sbgn view

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

@@ -209,6 +209,7 @@ export const useOlMapProcessLayer = ({
         shapes: reactionShapes,
         pointToProjection,
         vectorSource,
+        sbgnFormat,
         mapInstance,
       });
       return [reactionObject.lineFeature, ...reactionObject.reactionFeatures];
@@ -221,6 +222,7 @@ export const useOlMapProcessLayer = ({
     arrowTypes,
     pointToProjection,
     vectorSource,
+    sbgnFormat,
     mapInstance,
   ]);
 

src/components/Map/MapViewer/utils/shapes/reaction/Reaction.test.ts

@@ -42,6 +42,7 @@ describe('Layer', () => {
         return acc;
       }, {}),
       vectorSource: new VectorSource(),
+      sbgnFormat: false,
       mapInstance,
     };
   });

src/components/Map/MapViewer/utils/shapes/reaction/Reaction.ts

@@ -40,6 +40,7 @@ export interface ReactionProps {
   shapes: Array<Shape>;
   pointToProjection: UsePointToProjectionResult;
   vectorSource: VectorSource;
+  sbgnFormat: boolean;
   mapInstance: MapInstance;
 }
 
@@ -64,6 +65,8 @@ export default class Reaction {
 
   shapes: Array<Shape>;
 
+  sbgnFormat: boolean;
+
   pointToProjection: UsePointToProjectionResult;
 
   vectorSource: VectorSource;
@@ -89,6 +92,7 @@ export default class Reaction {
     shapes,
     pointToProjection,
     vectorSource,
+    sbgnFormat,
     mapInstance,
   }: ReactionProps) {
     this.id = id;
@@ -101,6 +105,7 @@ export default class Reaction {
     this.lineTypes = lineTypes;
     this.arrowTypes = arrowTypes;
     this.shapes = shapes;
+    this.sbgnFormat = sbgnFormat;
     this.pointToProjection = pointToProjection;
     this.vectorSource = vectorSource;
 
@@ -111,9 +116,6 @@ export default class Reaction {
   }
 
   private drawReaction(): void {
-    const reactionSquareFeature = this.getReactionSquare();
-    this.reactionFeatures.push(reactionSquareFeature);
-
     const lineStringElements: Array<LineString> = [];
     let lineStringWithArrows = this.getLineStringWithArrows(this.line);
     lineStringElements.push(lineStringWithArrows.lineString);
@@ -129,6 +131,8 @@ export default class Reaction {
       this.reactionFeatures.push(...lineStringWithArrows.arrowsFeatures);
       this.reactionFeatures.push(this.getOperator(operator));
     });
+    const reactionSquareFeature = this.getReactionSquare();
+    this.reactionFeatures.push(reactionSquareFeature);
 
     const multiLineString = new MultiLineString(lineStringElements);
 
@@ -164,7 +168,7 @@ export default class Reaction {
         arrow: line.startArrow,
         x: shortenedX1,
         y: shortenedY1,
-        zIndex: this.zIndex,
+        zIndex: this.zIndex + 1,
         rotation: startArrowRotation,
         lineWidth: line.width,
         color: line.color,
@@ -191,7 +195,7 @@ export default class Reaction {
         arrow: line.endArrow,
         x: shortenedX2,
         y: shortenedY2,
-        zIndex: this.zIndex,
+        zIndex: this.zIndex + 1,
         rotation: endArrowRotation,
         lineWidth: line.width,
         color: line.color,
@@ -251,7 +255,7 @@ export default class Reaction {
         fillColor: WHITE_COLOR,
         lineWidth: this.line.width,
         borderColor: this.line.color,
-        zIndex: this.zIndex + 1,
+        zIndex: this.zIndex + 2,
       });
       squarePolygon.set(
         'strokeStyle',
@@ -277,7 +281,7 @@ export default class Reaction {
       id: this.id,
       type: FEATURE_TYPE.REACTION,
       elementType: REACTION_ELEMENT_TYPES.SQUARE,
-      zIndex: this.zIndex,
+      zIndex: this.zIndex + 1,
     });
     squareFeature.setStyle(this.getReactionObjectStyle.bind(this));
     return squareFeature;
@@ -293,6 +297,11 @@ export default class Reaction {
       radius = Math.abs(
         this.pointToProjection({ x: 0, y: 0 })[0] - this.pointToProjection({ x: 6, y: 0 })[0],
       );
+    } else if (this.sbgnFormat) {
+      zIndex = this.zIndex + 1;
+      radius = Math.abs(
+        this.pointToProjection({ x: 0, y: 0 })[0] - this.pointToProjection({ x: 12, y: 0 })[0],
+      );
     } else {
       zIndex = this.zIndex;
       radius = Math.abs(
@@ -319,13 +328,13 @@ export default class Reaction {
       }),
     );
 
-    if (operator.operatorText) {
+    if (operator.operatorText || this.sbgnFormat) {
       circleStyle.getFill()?.setColor(rgbToHex(WHITE_COLOR));
       const textStyle = getTextStyle({
-        text: operator.operatorText,
+        text: operator.operatorText || 'AND',
         fontSize: 10,
         color: '#000000FF',
-        zIndex: this.zIndex,
+        zIndex,
         horizontalAlign: 'CENTER',
       }).getText();
       if (textStyle) {
@@ -340,7 +349,7 @@ export default class Reaction {
       type: FEATURE_TYPE.REACTION,
       elementType: REACTION_ELEMENT_TYPES.OPERATOR,
       fontSize: 10,
-      zIndex: this.zIndex,
+      zIndex,
     });
     circleFeature.setStyle(this.getReactionObjectStyle.bind(this));
     return circleFeature;