Backmerge: #4399 - Different chains shown by the same sequence in seq…

…uence mode (system ignores sugar presence) (#4681)

packages/ketcher-core/src/application/render/renderers/sequence/NucleosideSequenceItemRenderer.ts

@@ -0,0 +1,37 @@
+import { Nucleoside, Phosphate } from 'domain/entities';
+import { getNextMonomerInChain } from 'domain/helpers/monomers';
+import { RNASequenceItemRenderer } from './RNASequenceItemRenderer';
+import { D3SvgElementSelection } from 'application/render/types';
+
+export class NucleosideSequenceItemRenderer extends RNASequenceItemRenderer {
+  private nucleosideCircleElement?: D3SvgElementSelection<
+    SVGCircleElement,
+    void
+  >;
+
+  protected drawModification() {
+    const node = this.node as Nucleoside;
+    const nextNode = getNextMonomerInChain(node.sugar);
+
+    this.drawCommonModification(node);
+
+    if (this.nucleosideCircleElement) {
+      this.nucleosideCircleElement.remove();
+    }
+
+    // show modification for not last Nucleoside
+    if (nextNode && !(nextNode instanceof Phosphate)) {
+      this.nucleosideCircleElement = this.rootElement
+        ?.append('circle')
+        .attr('r', '3px')
+        .attr(
+          'stroke',
+          this.isSequenceEditInRnaBuilderModeTurnedOn ? '#24545A' : '#585858',
+        )
+        .attr('stroke-width', '1px')
+        .attr('fill', 'none')
+        .attr('cx', '10')
+        .attr('cy', '-16');
+    }
+  }
+}

packages/ketcher-core/src/application/render/renderers/sequence/NucleotideSequenceItemRenderer.ts

@@ -1,50 +1,23 @@
-import { BaseSequenceItemRenderer } from 'application/render/renderers/sequence/BaseSequenceItemRenderer';
 import { Nucleotide } from 'domain/entities';
 import { D3SvgElementSelection } from 'application/render/types';
 
-export class NucleotideSequenceItemRenderer extends BaseSequenceItemRenderer {
+import { RNASequenceItemRenderer } from './RNASequenceItemRenderer';
+
+export class NucleotideSequenceItemRenderer extends RNASequenceItemRenderer {
   private phosphateModificationCircleElement?: D3SvgElementSelection<
     SVGCircleElement,
     void
   >;
 
-  get symbolToDisplay(): string {
-    return (
-      this.node.monomer.attachmentPointsToBonds.R3?.getAnotherMonomer(
-        this.node.monomer,
-      )?.monomerItem?.props.MonomerNaturalAnalogCode || '@'
-    );
-  }
-
-  protected drawModification() {
+  drawModification() {
     const node = this.node as Nucleotide;
 
+    this.drawCommonModification(node);
+
     if (this.phosphateModificationCircleElement) {
       this.phosphateModificationCircleElement.remove();
     }
 
-    if (node.rnaBase.isModification) {
-      this.backgroundElement?.attr(
-        'fill',
-        this.node.monomer.selected
-          ? this.isSequenceEditInRnaBuilderModeTurnedOn
-            ? '#41A8B2'
-            : '#3ACA6A'
-          : this.isSequenceEditModeTurnedOn
-          ? '#ff7a004f'
-          : '#CAD3DD',
-      );
-    }
-
-    if (node.sugar.isModification) {
-      this.backgroundElement
-        ?.attr(
-          'stroke',
-          this.isSequenceEditInRnaBuilderModeTurnedOn ? '#24545A' : '#585858',
-        )
-        .attr('stroke-width', '1px');
-    }
-
     if (node.phosphate?.isModification) {
       this.phosphateModificationCircleElement = this.rootElement
         ?.append('circle')

packages/ketcher-core/src/application/render/renderers/sequence/RNASequenceItemRenderer.ts

@@ -0,0 +1,36 @@
+import { BaseSequenceItemRenderer } from 'application/render/renderers/sequence/BaseSequenceItemRenderer';
+import { Nucleoside, Nucleotide } from 'domain/entities';
+
+export abstract class RNASequenceItemRenderer extends BaseSequenceItemRenderer {
+  get symbolToDisplay(): string {
+    return (
+      this.node.monomer.attachmentPointsToBonds.R3?.getAnotherMonomer(
+        this.node.monomer,
+      )?.monomerItem?.props.MonomerNaturalAnalogCode || '@'
+    );
+  }
+
+  protected drawCommonModification(node: Nucleoside | Nucleotide) {
+    if (node.rnaBase.isModification) {
+      this.backgroundElement?.attr(
+        'fill',
+        this.node.monomer.selected
+          ? this.isSequenceEditInRnaBuilderModeTurnedOn
+            ? '#41A8B2'
+            : '#3ACA6A'
+          : this.isSequenceEditModeTurnedOn
+          ? '#ff7a004f'
+          : '#CAD3DD',
+      );
+    }
+
+    if (node.sugar.isModification) {
+      this.backgroundElement
+        ?.attr(
+          'stroke',
+          this.isSequenceEditInRnaBuilderModeTurnedOn ? '#24545A' : '#585858',
+        )
+        .attr('stroke-width', '1px');
+    }
+  }
+}

packages/ketcher-core/src/application/render/renderers/sequence/SequenceNodeRendererFactory.ts

@@ -12,6 +12,7 @@ import { EmptySequenceItemRenderer } from 'application/render/renderers/sequence
 import { BaseMonomerRenderer } from 'application/render';
 import { BaseSequenceItemRenderer } from 'application/render/renderers/sequence/BaseSequenceItemRenderer';
 import { LinkerSequenceNode } from 'domain/entities/LinkerSequenceNode';
+import { NucleosideSequenceItemRenderer } from './NucleosideSequenceItemRenderer';
 
 export class SequenceNodeRendererFactory {
   static fromNode(
@@ -30,7 +31,7 @@ export class SequenceNodeRendererFactory {
         RendererClass = NucleotideSequenceItemRenderer;
         break;
       case Nucleoside:
-        RendererClass = NucleotideSequenceItemRenderer;
+        RendererClass = NucleosideSequenceItemRenderer;
         break;
       case EmptySequenceNode:
         RendererClass = EmptySequenceItemRenderer;

packages/ketcher-core/src/domain/entities/Nucleoside.ts

@@ -2,6 +2,7 @@ import { RNABase } from 'domain/entities/RNABase';
 import { Sugar } from 'domain/entities/Sugar';
 import assert from 'assert';
 import {
+  getNextMonomerInChain,
   getRnaBaseFromSugar,
   isValidNucleoside,
   isValidNucleotide,
@@ -97,6 +98,12 @@ export class Nucleoside {
   }
 
   public get modified() {
-    return this.rnaBase.isModification || this.sugar.isModification;
+    // TODO move isNotLastNode to separate getter because it is not modification
+    //  It was added here because it needs to show similar icon as for phosphates modifications
+    const isNotLastNode = !!getNextMonomerInChain(this.sugar);
+
+    return (
+      this.rnaBase.isModification || this.sugar.isModification || isNotLastNode
+    );
   }
 }