Macro: #3545 - N- C-ends /5' - 3' - ends display in peptide /RNA chai…

…ns (#3851)

Co-authored-by: Roman Rodionov <roman_rodionov@epam.com>

ketcher-autotests/tests/Macromolecule-editor/Macro-Micro-Switcher/macro-micro-switcher.spec.ts

@@ -17,6 +17,7 @@ import {
   waitForLoad,
   waitForPageInit,
   waitForRender,
+  moveMouseToTheMiddleOfTheScreen,
 } from '@utils';
 
 const topLeftCorner = {
@@ -276,6 +277,7 @@ test.describe('Macro-Micro-Switcher', () => {
     );
     await turnOnMicromoleculesEditor(page);
     await turnOnMacromoleculesEditor(page);
+    await moveMouseToTheMiddleOfTheScreen(page);
     // eslint-disable-next-line no-magic-numbers
     await zoomWithMouseWheel(page, -400);
 

packages/ketcher-core/__tests__/application/editor/tools/SelectRectangleTool.test.ts

@@ -142,6 +142,9 @@ describe('Select Rectangle Tool', () => {
     jest
       .spyOn(BaseMonomerRenderer.prototype, 'redrawEnumeration')
       .mockImplementation(() => {});
+    jest
+      .spyOn(BaseMonomerRenderer.prototype, 'reDrawChainBeginning')
+      .mockImplementation(() => {});
     const fn = jest
       .spyOn(window, 'requestAnimationFrame')
       .mockImplementation((func) => {

packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PeptideRenderer.test.ts.snap

@@ -42,9 +42,23 @@ exports[`PeptideRenderer should render peptide 1`] = `
       <text
         direction="rtl"
         fill="#7C7C7F"
+        font-size="12px"
+        font-weight="500"
+        line-height="14px"
+        text-align="right"
         x="20"
         y="-1"
       />
+      <text
+        direction="rtl"
+        fill="#0097A8"
+        font-size="12px"
+        font-weight="700"
+        line-height="14px"
+        text-align="right"
+        x="-13"
+        y="20"
+      />
     </g>
   </g>
 </svg>

packages/ketcher-core/src/application/editor/tools/Bond.ts

@@ -101,6 +101,7 @@ class PolymerBond implements BaseTool {
       this.editor.drawingEntitiesManager.hidePolymerBondInformation(
         renderer.polymerBond,
       );
+    this.editor.renderersContainer.markForRecalculateBegin();
     this.editor.renderersContainer.update(modelChanges);
   }
 
@@ -112,6 +113,7 @@ class PolymerBond implements BaseTool {
       this.editor.drawingEntitiesManager.showPolymerBondInformation(
         renderer.polymerBond,
       );
+    this.editor.renderersContainer.markForRecalculateBegin();
     this.editor.renderersContainer.update(modelChanges);
   }
 
@@ -142,6 +144,7 @@ class PolymerBond implements BaseTool {
         );
     }
 
+    this.editor.renderersContainer.markForRecalculateBegin();
     this.editor.renderersContainer.update(modelChanges);
   }
 
@@ -174,6 +177,7 @@ class PolymerBond implements BaseTool {
         );
     }
 
+    this.editor.renderersContainer.markForRecalculateBegin();
     this.editor.renderersContainer.update(modelChanges);
   }
 
@@ -188,6 +192,7 @@ class PolymerBond implements BaseTool {
           renderer.monomer,
           this.bondRenderer?.polymerBond,
         );
+      this.editor.renderersContainer.markForRecalculateBegin();
       this.editor.renderersContainer.update(modelChanges);
     }
   }
@@ -203,6 +208,7 @@ class PolymerBond implements BaseTool {
           renderer.monomer,
           this.bondRenderer?.polymerBond,
         );
+      this.editor.renderersContainer.markForRecalculateBegin();
       this.editor.renderersContainer.update(modelChanges);
     }
   }
@@ -255,6 +261,7 @@ class PolymerBond implements BaseTool {
       this.editor.renderersContainer.deletePolymerBond(
         this.bondRenderer.polymerBond,
         false,
+        false,
       );
       this.bondRenderer = undefined;
       event.stopPropagation();
@@ -344,6 +351,7 @@ class PolymerBond implements BaseTool {
       this.editor.renderersContainer.deletePolymerBond(
         this.bondRenderer.polymerBond,
         false,
+        false,
       );
       this.bondRenderer = undefined;
       this.history.update(modelChanges);
@@ -382,6 +390,7 @@ class PolymerBond implements BaseTool {
     this.editor.renderersContainer.deletePolymerBond(
       this.bondRenderer.polymerBond,
       false,
+      false,
     );
     this.bondRenderer = undefined;
   };

packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts

@@ -30,10 +30,13 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
 
   private monomerSymbolElement?: SVGUseElement | SVGRectElement;
   public monomerSize: { width: number; height: number };
-  private enumerationElement?: D3SvgElementSelection<SVGTextElement, void>;
 
+  private enumerationElement?: D3SvgElementSelection<SVGTextElement, void>;
   public enumeration: number | null = null;
 
+  private beginningElement?: D3SvgElementSelection<SVGTextElement, void>;
+  public beginning: string | null = null;
+
   static isSelectable() {
     return true;
   }
@@ -360,6 +363,11 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
     y: number;
   } | void;
 
+  protected abstract get beginningElementPosition(): {
+    x: number;
+    y: number;
+  } | void;
+
   public setEnumeration(enumeration: number | null) {
     this.enumeration = enumeration;
   }
@@ -371,6 +379,10 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
       .append('text')
       .attr('direction', 'rtl')
       .attr('fill', '#7C7C7F')
+      .attr('font-size', '12px')
+      .attr('line-height', '14px')
+      .attr('font-weight', '500')
+      .attr('text-align', 'right')
       .attr('x', this.enumerationElementPosition.x)
       .attr('y', this.enumerationElementPosition.y)
       .text(this.enumeration);
@@ -381,6 +393,35 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
     this.enumerationElement.text(this.enumeration);
   }
 
+  public setBeginning(beginning: string | null) {
+    this.beginning = beginning;
+  }
+
+  protected appendChainBeginning() {
+    assert(this.rootElement);
+    assert(this.beginningElementPosition);
+    this.beginningElement = this.rootElement
+      .append('text')
+      .attr('direction', 'rtl')
+      .attr('fill', '#0097A8')
+      .attr('font-size', '12px')
+      .attr('line-height', '14px')
+      .attr('font-weight', '700')
+      .attr('text-align', 'right')
+      .attr('x', this.beginningElementPosition.x)
+      .attr('y', this.beginningElementPosition.y)
+      .text(this.beginning);
+  }
+
+  public reDrawChainBeginning() {
+    assert(this.beginningElement);
+    assert(this.beginningElementPosition);
+    this.beginningElement
+      .attr('x', this.beginningElementPosition.x)
+      .attr('y', this.beginningElementPosition.y)
+      .text(this.beginning);
+  }
+
   public show(theme) {
     this.rootElement =
       this.rootElement ||

packages/ketcher-core/src/application/render/renderers/ChemRenderer.ts

@@ -31,4 +31,8 @@ export class ChemRenderer extends BaseMonomerRenderer {
   protected get enumerationElementPosition() {
     return undefined;
   }
+
+  protected get beginningElementPosition() {
+    return undefined;
+  }
 }

packages/ketcher-core/src/application/render/renderers/PeptideRenderer.ts

@@ -7,6 +7,8 @@ const PEPTIDE_HOVERED_ELEMENT_ID = '#peptide-hover';
 const PEPTIDE_SYMBOL_ELEMENT_ID = '#peptide';
 
 export class PeptideRenderer extends BaseMonomerRenderer {
+  public CHAIN_BEGINNING = 'N';
+
   constructor(public monomer: Peptide, scale?: number) {
     super(
       monomer,
@@ -32,9 +34,14 @@ export class PeptideRenderer extends BaseMonomerRenderer {
   show(theme) {
     super.show(theme);
     this.appendEnumeration();
+    this.appendChainBeginning();
   }
 
   protected get enumerationElementPosition() {
     return { x: 20, y: -1 };
   }
+
+  protected get beginningElementPosition() {
+    return { x: -13, y: 20 };
+  }
 }

packages/ketcher-core/src/application/render/renderers/PhosphateRenderer.ts

@@ -31,4 +31,8 @@ export class PhosphateRenderer extends BaseMonomerRenderer {
   protected get enumerationElementPosition() {
     return undefined;
   }
+
+  protected get beginningElementPosition() {
+    return undefined;
+  }
 }

packages/ketcher-core/src/application/render/renderers/RNABaseRenderer.ts

@@ -36,4 +36,8 @@ export class RNABaseRenderer extends BaseMonomerRenderer {
   protected get enumerationElementPosition() {
     return { x: 23, y: 10 };
   }
+
+  protected get beginningElementPosition() {
+    return undefined;
+  }
 }

packages/ketcher-core/src/application/render/renderers/RenderersManager.ts

@@ -21,6 +21,7 @@ export class RenderersManager {
   public monomers: Map<number, BaseMonomerRenderer> = new Map();
   public polymerBonds: Map<number, PolymerBondRenderer> = new Map();
   private needRecalculateMonomersEnumeration = false;
+  private needRecalculateMonomersBeginning = false;
 
   constructor({ theme }) {
     this.theme = theme;
@@ -46,12 +47,17 @@ export class RenderersManager {
     this.needRecalculateMonomersEnumeration = true;
   }
 
+  public markForRecalculateBegin() {
+    this.needRecalculateMonomersBeginning = true;
+  }
+
   public addMonomer(monomer: BaseMonomer, callback?: () => void) {
     const [, MonomerRenderer] = monomerFactory(monomer.monomerItem);
     const monomerRenderer = new MonomerRenderer(monomer);
     this.monomers.set(monomer.id, monomerRenderer);
     monomerRenderer.show(this.theme);
     this.markForReEnumeration();
+    this.markForRecalculateBegin();
     if (callback) {
       callback();
     }
@@ -71,6 +77,7 @@ export class RenderersManager {
     monomer.renderer?.remove();
     this.monomers.delete(monomer.id);
     this.markForReEnumeration();
+    this.markForRecalculateBegin();
   }
 
   public addPolymerBond(polymerBond: PolymerBond) {
@@ -79,6 +86,7 @@ export class RenderersManager {
     polymerBondRenderer.show();
     polymerBondRenderer.polymerBond.firstMonomer.renderer?.redrawAttachmentPoints();
     this.markForReEnumeration();
+    this.markForRecalculateBegin();
   }
 
   public movePolymerBond(polymerBond: PolymerBond) {
@@ -102,6 +110,7 @@ export class RenderersManager {
   public deletePolymerBond(
     polymerBond: PolymerBond,
     recalculateEnumeration = true,
+    recalculateBeginning = true,
   ) {
     polymerBond.renderer?.remove();
     polymerBond?.firstMonomer?.renderer?.redrawAttachmentPoints();
@@ -110,9 +119,14 @@ export class RenderersManager {
     if (recalculateEnumeration) {
       this.markForReEnumeration();
     }
+    if (recalculateBeginning) {
+      this.markForRecalculateBegin();
+    }
   }
 
-  private getNextMonomerInChain(monomer: BaseMonomer) {
+  private getNextMonomerInChain(monomer?: BaseMonomer) {
+    if (!monomer) return undefined;
+
     const r2PolymerBond = monomer.attachmentPointsToBonds.R2;
 
     return r2PolymerBond?.getAnotherMonomer(monomer);
@@ -161,13 +175,9 @@ export class RenderersManager {
   ) {
     let currentEnumeration = _currentEnumeration;
     if (rnaComponentRenderer instanceof SugarRenderer) {
-      const r3PolymerBond =
-        rnaComponentRenderer.monomer.attachmentPointsToBonds.R3;
-
-      const rnaBaseMonomer = r3PolymerBond?.getAnotherMonomer(
-        rnaComponentRenderer.monomer,
+      const rnaBaseMonomer = this.getRnaBaseMonomerFromSugar(
+        rnaComponentRenderer as SugarRenderer,
       );
-
       if (rnaBaseMonomer instanceof RNABase) {
         rnaBaseMonomer.renderer?.setEnumeration(currentEnumeration);
         rnaBaseMonomer.renderer?.redrawEnumeration();
@@ -272,12 +282,56 @@ export class RenderersManager {
     this.needRecalculateMonomersEnumeration = false;
   }
 
+  private isOnlyPartOfRnaChain(sugar: Sugar) {
+    const phosphate = this.getNextMonomerInChain(sugar);
+    const nextMonomerAfterPhospate = this.getNextMonomerInChain(phosphate);
+    return !sugar.attachmentPointsToBonds.R1 && !nextMonomerAfterPhospate;
+  }
+
+  private recalculateMonomersBeginning() {
+    this.monomers.forEach((monomerRenderer) => {
+      if (monomerRenderer instanceof PeptideRenderer) {
+        if (monomerRenderer.enumeration === 1) {
+          monomerRenderer.setBeginning(monomerRenderer.CHAIN_BEGINNING);
+        } else {
+          monomerRenderer.setBeginning(null);
+        }
+        monomerRenderer.reDrawChainBeginning();
+      }
+      if (monomerRenderer instanceof SugarRenderer) {
+        const rnaBaseMonomer = this.getRnaBaseMonomerFromSugar(
+          monomerRenderer as SugarRenderer,
+        );
+        if (
+          rnaBaseMonomer instanceof RNABase &&
+          rnaBaseMonomer.renderer?.enumeration === 1 &&
+          !this.isOnlyPartOfRnaChain(monomerRenderer.monomer)
+        ) {
+          monomerRenderer.setBeginning(monomerRenderer.CHAIN_BEGINNING);
+        } else {
+          monomerRenderer.setBeginning(null);
+        }
+        monomerRenderer.reDrawChainBeginning();
+      }
+    });
+    this.needRecalculateMonomersBeginning = false;
+  }
+
+  private getRnaBaseMonomerFromSugar(sugarRenderer: SugarRenderer) {
+    const r3PolymerBond = sugarRenderer.monomer.attachmentPointsToBonds.R3;
+    const rnaBaseMonomer = r3PolymerBond?.getAnotherMonomer(
+      sugarRenderer.monomer,
+    );
+    return rnaBaseMonomer;
+  }
+
   public finishPolymerBondCreation(polymerBond: PolymerBond) {
     assert(polymerBond.secondMonomer);
 
     const polymerBondRenderer = new PolymerBondRenderer(polymerBond);
     this.polymerBonds.set(polymerBond.id, polymerBondRenderer);
     this.markForReEnumeration();
+    this.markForRecalculateBegin();
     polymerBond.firstMonomer.renderer?.redrawAttachmentPoints();
     polymerBond.firstMonomer.renderer?.drawSelection();
     polymerBond.firstMonomer.renderer?.redrawHover();
@@ -327,5 +381,8 @@ export class RenderersManager {
     if (this.needRecalculateMonomersEnumeration) {
       this.recalculateMonomersEnumeration();
     }
+    if (this.needRecalculateMonomersBeginning) {
+      this.recalculateMonomersBeginning();
+    }
   }
 }