#3734 - Macro: Displaying modified nucleotide chains in sequence representation

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

@@ -44,6 +44,8 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     this._isEditingSymbol = isEditingSymbol;
   }
 
+  protected abstract drawModification(): void;
+
   protected appendHover(): D3SvgElementSelection<SVGUseElement, void> | void {
     return undefined;
   }
@@ -98,10 +100,6 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
       .attr('rx', 2)
       .attr('cursor', 'text');
 
-    if (this.node.modified) {
-      backgroundElement?.attr('stroke', '#585858').attr('stroke-width', '1px');
-    }
-
     backgroundElement?.attr(
       'fill',
       this.isSequenceEditModeTurnedOn ? '#FF7A001A' : 'transparent',
@@ -170,13 +168,6 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
       .attr('class', 'blinking');
   }
 
-  private drawHover() {
-    this.backgroundElement?.attr(
-      'fill',
-      this.isSequenceEditModeTurnedOn ? '#FF7A0033' : '#EFF2F5',
-    );
-  }
-
   protected removeHover() {
     this.backgroundElement?.attr(
       'fill',
@@ -220,15 +211,9 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
       this.counterElement = this.appendCounterElement(this.rootElement);
     }
 
-    this.rootElement.on('mouseover', () => {
-      if (!this.node.monomer.selected) {
-        this.drawHover();
-      }
-    });
-
-    this.rootElement.on('mouseleave', () => {
-      this.removeHover();
-    });
+    if (this.node.modified) {
+      this.drawModification();
+    }
   }
 
   drawSelection(): void {
@@ -241,6 +226,9 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
       this.raiseElement();
     } else {
       this.removeSelection();
+      if (this.node.modified) {
+        this.drawModification();
+      }
     }
   }
 

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

@@ -4,4 +4,6 @@ export class ChemSequenceItemRenderer extends BaseSequenceItemRenderer {
   get symbolToDisplay(): string {
     return '@';
   }
+
+  protected drawModification() {}
 }

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

@@ -4,4 +4,6 @@ export class EmptySequenceItemRenderer extends BaseSequenceItemRenderer {
   get symbolToDisplay(): string {
     return '';
   }
+
+  protected drawModification() {}
 }

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

@@ -1,11 +1,45 @@
 import { BaseSequenceItemRenderer } from 'application/render/renderers/sequence/BaseSequenceItemRenderer';
+import { Nucleotide } from 'domain/entities';
+import { D3SvgElementSelection } from 'application/render/types';
 
 export class NucleotideSequenceItemRenderer extends BaseSequenceItemRenderer {
+  private phosphateModificationCircleElement?: D3SvgElementSelection<
+    SVGCircleElement,
+    void
+  >;
+
   get symbolToDisplay(): string {
     return (
       this.node.monomer.attachmentPointsToBonds.R3?.getAnotherMonomer(
         this.node.monomer,
       )?.monomerItem?.props.MonomerNaturalAnalogCode || '@'
     );
   }
+
+  protected drawModification() {
+    const node = this.node as Nucleotide;
+
+    if (this.phosphateModificationCircleElement) {
+      this.phosphateModificationCircleElement.remove();
+    }
+
+    if (node.rnaBase.isModification) {
+      this.backgroundElement?.attr('fill', '#CAD3DD');
+    }
+
+    if (node.sugar.isModification) {
+      this.backgroundElement
+        ?.attr('stroke', '#585858')
+        .attr('stroke-width', '1px');
+    }
+
+    if (node.phosphate?.isModification) {
+      this.phosphateModificationCircleElement = this.rootElement
+        ?.append('circle')
+        .attr('r', '4px')
+        .attr('fill', '#585858')
+        .attr('cx', '10')
+        .attr('cy', '-15');
+    }
+  }
 }

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

@@ -4,4 +4,6 @@ export class PeptideSequenceItemRenderer extends BaseSequenceItemRenderer {
   get symbolToDisplay(): string {
     return this.node.monomer.monomerItem.props.MonomerNaturalAnalogCode || '@';
   }
+
+  protected drawModification() {}
 }

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

@@ -4,4 +4,6 @@ export class PhosphateSequenceItemRenderer extends BaseSequenceItemRenderer {
   get symbolToDisplay(): string {
     return 'p';
   }
+
+  protected drawModification() {}
 }

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

@@ -11,6 +11,7 @@ import { EmptySequenceNode } from 'domain/entities/EmptySequenceNode';
 import { EmptySequenceItemRenderer } from 'application/render/renderers/sequence/EmptySequenceItemRenderer';
 import { BaseMonomerRenderer } from 'application/render';
 import { BaseSequenceItemRenderer } from 'application/render/renderers/sequence/BaseSequenceItemRenderer';
+import { LinkerSequenceNode } from 'domain/entities/LinkerSequenceNode';
 
 export class SequenceNodeRendererFactory {
   static fromNode(
@@ -34,6 +35,9 @@ export class SequenceNodeRendererFactory {
       case EmptySequenceNode:
         RendererClass = EmptySequenceItemRenderer;
         break;
+      case LinkerSequenceNode:
+        RendererClass = ChemSequenceItemRenderer;
+        break;
       default:
         switch (node.monomer.constructor) {
           case Phosphate:

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

@@ -480,4 +480,8 @@ export abstract class BaseMonomer extends DrawingEntity {
   public get isPartOfRna() {
     return false;
   }
+
+  public get isModification() {
+    return this.monomerItem.props.MonomerNaturalAnalogCode !== this.label;
+  }
 }

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

@@ -0,0 +1,52 @@
+import { BaseMonomer } from 'domain/entities/BaseMonomer';
+import {
+  getNextMonomerInChain,
+  isValidNucleoside,
+  isValidNucleotide,
+} from 'domain/helpers/monomers';
+import { Chem } from 'domain/entities/Chem';
+import { Phosphate } from 'domain/entities/Phosphate';
+import { RNABase } from 'domain/entities/RNABase';
+import { Sugar } from 'domain/entities/Sugar';
+
+export class LinkerSequenceNode {
+  constructor(public monomer: BaseMonomer) {}
+
+  public get SubChainConstructor() {
+    return this.monomer.SubChainConstructor;
+  }
+
+  public get firstMonomerInNode() {
+    return this.monomer;
+  }
+
+  public get lastMonomerInNode() {
+    return this.monomers[this.monomers.length - 1];
+  }
+
+  public get monomers() {
+    const monomers = [this.firstMonomerInNode];
+    let nextMonomer = getNextMonomerInChain(this.firstMonomerInNode);
+    while (
+      nextMonomer instanceof Chem ||
+      nextMonomer instanceof Phosphate ||
+      nextMonomer instanceof RNABase ||
+      (nextMonomer instanceof Sugar &&
+        !isValidNucleotide(nextMonomer) &&
+        !isValidNucleoside(nextMonomer))
+    ) {
+      monomers.push(nextMonomer);
+      nextMonomer = getNextMonomerInChain(nextMonomer);
+    }
+
+    return monomers;
+  }
+
+  public get renderer() {
+    return this.monomer.renderer;
+  }
+
+  public get modified() {
+    return false;
+  }
+}

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

@@ -24,6 +24,6 @@ export class MonomerSequenceNode {
   }
 
   public get modified() {
-    return false;
+    return this.monomer.isModification;
   }
 }

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

@@ -15,7 +15,6 @@ import {
   getRnaPartLibraryItem,
   getSugarBySequenceType,
 } from 'domain/helpers/rna';
-import { RNA_DNA_NON_MODIFIED_PART } from 'domain/constants/monomers';
 
 export class Nucleoside {
   constructor(public sugar: Sugar, public rnaBase: RNABase) {}
@@ -98,6 +97,6 @@ export class Nucleoside {
   }
 
   public get modified() {
-    return this.sugar.label !== RNA_DNA_NON_MODIFIED_PART.SUGAR_RNA;
+    return this.rnaBase.isModification || this.sugar.isModification;
   }
 }

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

@@ -105,6 +105,10 @@ export class Nucleotide {
   }
 
   public get modified() {
-    return this.sugar.label !== RNA_DNA_NON_MODIFIED_PART.SUGAR_RNA;
+    return (
+      this.rnaBase.isModification ||
+      this.sugar.isModification ||
+      this.phosphate.isModification
+    );
   }
 }

packages/ketcher-core/src/domain/entities/monomer-chains/Chain.ts

@@ -1,15 +1,15 @@
 import { BaseSubChain } from 'domain/entities/monomer-chains/BaseSubChain';
-import { BaseMonomer, Sugar } from 'domain/entities';
+import { BaseMonomer, Peptide, Phosphate, Sugar } from 'domain/entities';
 import {
   getNextMonomerInChain,
-  getPhosphateFromSugar,
   isValidNucleoside,
   isValidNucleotide,
 } from 'domain/helpers/monomers';
 import { Nucleoside } from 'domain/entities/Nucleoside';
 import { Nucleotide } from 'domain/entities/Nucleotide';
 import { MonomerSequenceNode } from 'domain/entities/MonomerSequenceNode';
 import { EmptySequenceNode } from 'domain/entities/EmptySequenceNode';
+import { LinkerSequenceNode } from 'domain/entities/LinkerSequenceNode';
 
 export class Chain {
   public subChains: BaseSubChain[] = [];
@@ -29,26 +29,31 @@ export class Chain {
       this.subChains.push(new monomer.SubChainConstructor());
     }
 
-    if (!(monomer instanceof Sugar)) {
-      this.lastSubChain.add(new MonomerSequenceNode(monomer));
-    } else if (isValidNucleoside(monomer)) {
+    const nextMonomer = getNextMonomerInChain(monomer);
+
+    if (monomer instanceof Sugar && isValidNucleoside(monomer)) {
       this.lastSubChain.add(Nucleoside.fromSugar(monomer));
-    } else if (isValidNucleotide(monomer)) {
+    } else if (monomer instanceof Sugar && isValidNucleotide(monomer)) {
       this.lastSubChain.add(Nucleotide.fromSugar(monomer));
-    } else {
+    } else if (monomer instanceof Peptide) {
+      this.lastSubChain.add(new MonomerSequenceNode(monomer));
+    } else if (
+      monomer instanceof Phosphate &&
+      (this.lastNode instanceof Nucleoside ||
+        (nextMonomer instanceof Sugar &&
+          (isValidNucleotide(nextMonomer) || isValidNucleotide(nextMonomer))))
+    ) {
       this.lastSubChain.add(new MonomerSequenceNode(monomer));
+    } else {
+      this.lastSubChain.add(new LinkerSequenceNode(monomer));
     }
   }
 
   private fillSubChains(monomer?: BaseMonomer) {
     if (!monomer) return;
 
     this.add(monomer);
-    if (this.lastNode instanceof Nucleotide) {
-      this.fillSubChains(getNextMonomerInChain(getPhosphateFromSugar(monomer)));
-    } else {
-      this.fillSubChains(getNextMonomerInChain(monomer));
-    }
+    this.fillSubChains(getNextMonomerInChain(this.lastNode?.lastMonomerInNode));
   }
 
   public get lastSubChain() {