#4880 – Adjust previews – add APs, show IDT aliases for previews in sequence mode, increase debounce time

ketcher-autotests/tests/Macromolecule-editor/Import-Saving-Files/import-saving-idt.spec.ts

@@ -39,6 +39,7 @@ import {
   toggleNucleotidesAccordion,
   togglePhosphatesAccordion,
 } from '@utils/macromolecules/rnaBuilder';
+import { clickOnSequenceSymbol } from '@utils/macromolecules/sequence';
 
 async function pasteFromClipboardAndAddToMacromoleculesCanvas(
   page: Page,
@@ -392,7 +393,7 @@ test.describe('Import-Saving .idt Files', () => {
       `A*C*G*C*G*C*G*A*C*T*A*T*A*C*G*C*G*C*C*T`,
     );
     await selectSequenceLayoutModeTool(page);
-    await page.getByText('G').locator('..').first().click({ button: 'right' });
+    await clickOnSequenceSymbol(page, 'G', { button: 'right' });
     await page.getByTestId('edit_sequence').click();
     await enterSequence(page, 'ttt');
     await page.keyboard.press('Escape');

ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts

@@ -6,6 +6,7 @@ import {
   selectSingleBondTool,
   waitForPageInit,
   takeEditorScreenshot,
+  moveMouseAway,
 } from '@utils';
 import { turnOnMacromoleculesEditor } from '@utils/macromolecules';
 import { bondTwoMonomers } from '@utils/macromolecules/polymerBond';
@@ -71,6 +72,7 @@ test.describe('Check attachment point rotation', () => {
     await bondTwoMonomers(page, peptide3, peptide4);
 
     // Hover 1th peptide
+    await moveMouseAway(page);
     await peptide1.hover();
 
     // Get rid of flakiness because of preview
@@ -79,6 +81,7 @@ test.describe('Check attachment point rotation', () => {
     await takeEditorScreenshot(page);
 
     // Hover 2nd peptide
+    await moveMouseAway(page);
     await peptide2.hover();
 
     // Get rid of flakiness because of preview
@@ -123,6 +126,7 @@ test.describe('Check attachment point rotation', () => {
     await bondTwoMonomers(page, peptide1, peptide2);
 
     // Hover 1th peptide
+    await moveMouseAway(page);
     await peptide1.hover();
 
     await takeEditorScreenshot(page);
@@ -134,6 +138,7 @@ test.describe('Check attachment point rotation', () => {
 
     await selectSingleBondTool(page);
     // Hover 1th peptide
+    await moveMouseAway(page);
     await peptide1.hover();
     await page.getByTestId('polymer-library-preview');
     await takeEditorScreenshot(page);

ketcher-autotests/tests/Macromolecule-editor/Snake-Mode/snake-bond-tool.spec.ts

@@ -711,11 +711,13 @@ test.describe('Snake Bond Tool', () => {
       `KET/peptides-flex-chain.ket`,
       page,
     );
-    scrollUp(page, 200);
+    await scrollUp(page, 200);
+    await moveMouseAway(page);
     await takeEditorScreenshot(page);
     await page.getByText('meS').locator('..').first().hover();
     await dragMouseTo(x, y, page);
     await page.mouse.click(x2, y2);
+    await moveMouseAway(page);
     await takeEditorScreenshot(page);
   });
 

ketcher-autotests/tests/test-data/KET/chem-connected-to-micro-structure-expected.ket

@@ -348,4 +348,4 @@
             }
         ]
     }
-}
+}

ketcher-autotests/tests/utils/macromolecules/sequence.ts

@@ -11,6 +11,7 @@ export async function clickOnSequenceSymbol(
     symbolText,
     clickOptions?.nthNumber,
   );
+  await symbolLocator.hover();
   await symbolLocator.click(clickOptions);
 }
 

packages/ketcher-core/src/application/editor/data/monomers.ket

@@ -168890,6 +168890,9 @@
     "id": "A",
     "name": "A",
     "class": "RNA",
+    "idtAliases": {
+      "base": "rA"
+    },
     "templates": [
       {
         "$ref": "monomerTemplate-R___Ribose"
@@ -168907,6 +168910,9 @@
     "id": "C",
     "name": "C",
     "class": "RNA",
+    "idtAliases": {
+      "base": "rC"
+    },
     "templates": [
       {
         "$ref": "monomerTemplate-R___Ribose"
@@ -168924,6 +168930,9 @@
     "id": "G",
     "name": "G",
     "class": "RNA",
+    "idtAliases": {
+      "base": "rG"
+    },
     "templates": [
       {
         "$ref": "monomerTemplate-R___Ribose"
@@ -168941,6 +168950,9 @@
     "id": "T",
     "name": "T",
     "class": "RNA",
+    "idtAliases": {
+      "base": "rT"
+    },
     "templates": [
       {
         "$ref": "monomerTemplate-R___Ribose"
@@ -168958,6 +168970,9 @@
     "id": "U",
     "name": "U",
     "class": "RNA",
+    "idtAliases": {
+      "base": "rU"
+    },
     "templates": [
       {
         "$ref": "monomerTemplate-R___Ribose"
@@ -169056,7 +169071,7 @@
     "name": "dR(U)P",
     "class": "RNA",
     "idtAliases": {
-      "base": "deoxyU"
+      "base": "U"
     },
     "templates": [
       {

packages/ketcher-core/src/application/render/render.types.ts

@@ -72,6 +72,7 @@ export type RenderOptions = {
   connectedMonomerAttachmentPoints?: string[];
   currentlySelectedMonomerAttachmentPoint?: string;
   labelInMonomerConnectionsModal?: boolean;
+  labelInPreview?: boolean;
 };
 
 export interface RelativeBox {

packages/ketcher-core/src/application/render/restruct/reatom.ts

@@ -790,6 +790,15 @@ function buildLabel(
   leftMargin: number;
   label: ElemAttr;
 } {
+  const {
+    atomColoring,
+    font,
+    fontsz,
+    currentlySelectedMonomerAttachmentPoint,
+    connectedMonomerAttachmentPoints,
+    labelInMonomerConnectionsModal,
+    labelInPreview,
+  } = options;
   // eslint-disable-line max-statements
   const label: any = {
     text: getLabelText(atom.a, atomId, sgroup),
@@ -801,18 +810,19 @@ function buildLabel(
 
   if (label.text === atom.a.label) {
     const element = Elements.get(label.text);
-    if (options.atomColoring && element) {
+    if (atomColoring && element) {
       atom.color = ElementColor[label.text] || '#000';
     }
   }
 
+  const shouldStyleLabel = labelInMonomerConnectionsModal || labelInPreview;
   const isMonomerAttachmentPoint = attachmentPointNames.includes(label.text);
   const isMonomerAttachmentPointSelected =
-    options.currentlySelectedMonomerAttachmentPoint === label.text;
+    currentlySelectedMonomerAttachmentPoint === label.text;
   const isMonomerAttachmentPointUsed =
-    options.connectedMonomerAttachmentPoints?.includes(label.text);
+    connectedMonomerAttachmentPoints?.includes(label.text);
 
-  if (isMonomerAttachmentPoint && options.labelInMonomerConnectionsModal) {
+  if (isMonomerAttachmentPoint && shouldStyleLabel) {
     atom.color = isMonomerAttachmentPointSelected
       ? '#FFF'
       : isMonomerAttachmentPointUsed
@@ -828,20 +838,20 @@ function buildLabel(
   const { previewOpacity } = options;
 
   label.path = paper.text(ps.x, ps.y, label.text).attr({
-    font: options.font,
-    'font-size': options.fontsz,
+    font,
+    'font-size': fontsz,
     fill: atom.color,
     'font-style': atom.a.pseudo ? 'italic' : '',
     'fill-opacity': atom.a.isPreview ? previewOpacity : 1,
   });
 
-  if (isMonomerAttachmentPoint && options.labelInMonomerConnectionsModal) {
+  if (isMonomerAttachmentPoint && shouldStyleLabel) {
     const fill = isMonomerAttachmentPointSelected
       ? '#167782'
       : isMonomerAttachmentPointUsed
       ? '#E1E5EA'
       : '#FFF';
-    const backgroundSize = options.fontsz * 2;
+    const backgroundSize = fontsz * 2;
 
     label.background = paper
       .rect(
@@ -852,7 +862,13 @@ function buildLabel(
         10,
       )
       .attr({ fill })
-      .attr({ stroke: isMonomerAttachmentPointUsed ? '#B4B9D6' : '#7C7C7F' });
+      .attr({
+        stroke: labelInPreview
+          ? 'none'
+          : isMonomerAttachmentPointUsed
+          ? '#B4B9D6'
+          : '#7C7C7F',
+      });
   }
   if (tooltip) {
     addTooltip(label.path.node, tooltip);

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

@@ -30,9 +30,9 @@ export abstract class BaseMonomer extends DrawingEntity {
   public potentialSecondAttachmentPointForBond: AttachmentPointName | null;
   public chosenSecondAttachmentPointForBond: AttachmentPointName | null;
 
-  public potentialAttachmentPointsToBonds: Partial<
-    Record<AttachmentPointName, PolymerBond | null>
-  > = {};
+  public potentialAttachmentPointsToBonds: {
+    [key: string]: PolymerBond | null | undefined;
+  } = {};
 
   public attachmentPointsVisible = false;
   public monomerItem: MonomerItemType;

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

@@ -53,3 +53,4 @@ export * from './EmptySequenceNode';
 export * from './LinkerSequenceNode';
 export * from './UnresolvedMonomer';
 export * from './UnsplitNucleotide';
+export * from './PolymerBond';

packages/ketcher-macromolecules/src/Editor.tsx

@@ -22,9 +22,9 @@ import { NodeSelection, PolymerBondRenderer } from 'ketcher-core';
 import { store } from 'state';
 import {
   defaultTheme,
-  muiOverrides,
   EditorTheme,
   MergedThemeType,
+  muiOverrides,
 } from 'theming/defaultTheme';
 import { getGlobalStyles } from 'theming/globalStyles';
 import { Layout } from 'components/Layout';
@@ -49,19 +49,19 @@ import {
   StyledToastContent,
 } from 'components/shared/StyledToast/styles';
 import {
-  PeptideAvatar,
   ChemAvatar,
-  SugarAvatar,
+  PeptideAvatar,
   PhosphateAvatar,
   RNABaseAvatar,
+  SugarAvatar,
   UnresolvedMonomerAvatar,
   NucleotideAvatar,
 } from 'components/shared/monomerOnCanvas';
 import { ErrorModal } from 'components/modal/Error';
 import {
-  TopMenuRightWrapper,
   EditorWrapper,
   TogglerComponentWrapper,
+  TopMenuRightWrapper,
 } from './styledComponents';
 import { useLoading } from './hooks/useLoading';
 import useSetRnaPresets from './hooks/useSetRnaPresets';