#4555 – Preview for ambiguous monomers

packages/ketcher-core/src/application/editor/MacromoleculesConverter.ts

@@ -1,4 +1,5 @@
 import {
+  AmbiguousMonomer,
   Atom,
   Bond,
   FunctionalGroup,
@@ -88,14 +89,15 @@ export class MacromoleculesConverter {
     const attachmentPoint =
       monomer.monomerItem.attachmentPoints?.[attachmentPointIndex];
     const atomIdMap = monomerToAtomIdMap.get(monomer);
+    const attachmentPointAtomId =
+      monomer instanceof AmbiguousMonomer ? 0 : attachmentPoint?.attachmentAtom;
 
     return {
       globalAttachmentAtomId:
-        isNumber(attachmentPoint?.attachmentAtom) &&
-        atomIdMap?.get(attachmentPoint?.attachmentAtom as number),
+        isNumber(attachmentPointAtomId) &&
+        atomIdMap?.get(attachmentPointAtomId as number),
       attachmentAtomId:
-        isNumber(attachmentPoint?.attachmentAtom) &&
-        attachmentPoint?.attachmentAtom,
+        isNumber(attachmentPointAtomId) && attachmentPointAtomId,
       attachmentPointNumber,
     };
   }
@@ -132,8 +134,16 @@ export class MacromoleculesConverter {
           monomerMicromolecule.id,
           new ReSGroup(monomerMicromolecule),
         );
-
-        monomer.monomerItem.struct.atoms.forEach((oldAtom, oldAtomId) => {
+        const monomerAtoms =
+          monomer instanceof AmbiguousMonomer
+            ? monomer.monomers[0].monomerItem.struct.atoms
+            : monomer.monomerItem.struct.atoms;
+        const monomerBonds =
+          monomer instanceof AmbiguousMonomer
+            ? monomer.monomers[0].monomerItem.struct.bonds
+            : monomer.monomerItem.struct.bonds;
+
+        monomerAtoms.forEach((oldAtom, oldAtomId) => {
           const { atom, atomId } = this.addMonomerAtomToStruct(
             oldAtom,
             monomer,
@@ -162,9 +172,10 @@ export class MacromoleculesConverter {
               );
             },
           ) || [],
+          false,
         );
         struct.sGroupForest.insert(monomerMicromolecule);
-        monomer.monomerItem.struct.bonds.forEach((bond) => {
+        monomerBonds.forEach((bond) => {
           const bondClone = bond.clone();
           bondClone.begin = atomIdsMap.get(bondClone.begin) as number;
           bondClone.end = atomIdsMap.get(bondClone.end) as number;
@@ -224,10 +235,16 @@ export class MacromoleculesConverter {
     sgroupToMonomer: Map<SGroup, BaseMonomer>,
   ) {
     const command = new Command();
-    const monomerAdditionCommand = drawingEntitiesManager.addMonomer(
-      monomerMicromolecule.monomer.monomerItem,
-      monomerMicromolecule.pp as Vec2,
-    );
+    const monomerAdditionCommand =
+      monomerMicromolecule.monomer instanceof AmbiguousMonomer
+        ? drawingEntitiesManager.addAmbiguousMonomer(
+            monomerMicromolecule.monomer.variantMonomerItem,
+            monomerMicromolecule.monomer.position,
+          )
+        : drawingEntitiesManager.addMonomer(
+            monomerMicromolecule.monomer.monomerItem,
+            monomerMicromolecule.pp as Vec2,
+          );
     command.merge(monomerAdditionCommand);
     sgroupToMonomer.set(
       monomerMicromolecule,

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

@@ -32,10 +32,8 @@ export abstract class RNASequenceItemRenderer extends BaseSequenceItemRenderer {
 
   get symbolToDisplay(): string {
     return this.node.rnaBase instanceof AmbiguousMonomer
-      ? this.node.monomer.label
-      : this.node.monomer.attachmentPointsToBonds.R3?.getAnotherMonomer(
-          this.node.monomer,
-        )?.monomerItem?.props.MonomerNaturalAnalogCode || '@';
+      ? this.node.rnaBase.label
+      : this.node.rnaBase.monomerItem?.props.MonomerNaturalAnalogCode || '@';
   }
 
   protected drawCommonModification(node: Nucleoside | Nucleotide) {

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

@@ -15,6 +15,7 @@
  ***************************************************************************/
 
 import {
+  AmbiguousMonomer,
   Atom,
   Bond,
   FunctionalGroup,
@@ -64,7 +65,8 @@ class ReBond extends ReObject {
     atomId: number,
     sgroup?: SGroup,
   ) {
-    return sgroup instanceof MonomerMicromolecule
+    return sgroup instanceof MonomerMicromolecule &&
+      !(sgroup.monomer instanceof AmbiguousMonomer)
       ? (sgroup.getAttachmentAtomId() as number)
       : sgroup?.isContracted()
       ? sgroup?.getContractedPosition(struct).atomId

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

@@ -243,14 +243,17 @@ export class SGroup {
     return this.getConnectionPointsCount(struct) >= 1;
   }
 
-  addAttachmentPoint(attachmentPoint: SGroupAttachmentPoint): void {
+  addAttachmentPoint(
+    attachmentPoint: SGroupAttachmentPoint,
+    validateUniqueness = true,
+  ): void {
     const isAttachmentPointAlreadyExist = this.attachmentPoints.some(
       ({ atomId, leaveAtomId }) =>
         attachmentPoint.atomId === atomId &&
         attachmentPoint.leaveAtomId === leaveAtomId,
     );
 
-    if (isAttachmentPointAlreadyExist) {
+    if (isAttachmentPointAlreadyExist && validateUniqueness) {
       throw new Error(
         'The same attachment point cannot be added to an S-group more than once',
       );
@@ -263,9 +266,10 @@ export class SGroup {
     attachmentPoints:
       | ReadonlyArray<SGroupAttachmentPoint>
       | SGroupAttachmentPoint[],
+    validateUniqueness = true,
   ): void {
     for (const attachmentPoint of attachmentPoints) {
-      this.addAttachmentPoint(attachmentPoint);
+      this.addAttachmentPoint(attachmentPoint, validateUniqueness);
     }
   }
 

packages/ketcher-core/src/domain/helpers/monomers.ts

@@ -207,9 +207,9 @@ export const isRnaBaseVariantMonomer = (
 ) => monomer.monomerClass === KetMonomerClass.Base;
 
 export function isAmbiguousMonomerLibraryItem(
-  monomer: MonomerOrAmbiguousType,
+  monomer?: MonomerOrAmbiguousType,
 ): monomer is AmbiguousMonomerType {
-  return Boolean(monomer.isAmbiguous);
+  return Boolean(monomer && monomer.isAmbiguous);
 }
 
 export function isPeptideOrAmbiguousPeptide(

packages/ketcher-macromolecules/src/EditorEvents.tsx

@@ -15,12 +15,6 @@
  ***************************************************************************/
 import { useCallback, useEffect } from 'react';
 import {
-  BondPreviewState,
-  MonomerPreviewState,
-  PresetPosition,
-  PresetPreviewState,
-  PreviewStyle,
-  PreviewType,
   selectEditor,
   selectEditorActiveTool,
   selectTool,
@@ -33,14 +27,30 @@ import {
 } from 'components/modal/modalContainer';
 import { useAppDispatch, useAppSelector } from 'hooks';
 import { debounce } from 'lodash';
-import { Nucleoside, Nucleotide } from 'ketcher-core';
 import {
+  AmbiguousMonomer,
+  BaseMonomer,
+  Nucleoside,
+  Nucleotide,
+  PolymerBond,
+} from 'ketcher-core';
+import {
+  calculateAmbiguousMonomerPreviewLeft,
+  calculateAmbiguousMonomerPreviewTop,
   calculateBondPreviewPosition,
   calculateMonomerPreviewTop,
   calculateNucleoElementPreviewTop,
 } from 'helpers';
 import { selectAllPresets } from 'state/rna-builder';
-import { PolymerBond } from 'ketcher-core/dist/domain/entities/PolymerBond';
+import {
+  AmbiguousMonomerPreviewState,
+  BondPreviewState,
+  MonomerPreviewState,
+  PresetPosition,
+  PresetPreviewState,
+  PreviewStyle,
+  PreviewType,
+} from 'state/types';
 
 const noPreviewTools = ['bond-single'];
 
@@ -173,7 +183,27 @@ export const EditorEvents = () => {
       const cardCoordinates = e.target.getBoundingClientRect();
       const left = `${cardCoordinates.left + cardCoordinates.width / 2}px`;
       const sequenceNode = e.target.__data__?.node;
-      const monomer = e.target.__data__?.monomer || sequenceNode?.monomer;
+      const monomer: BaseMonomer | AmbiguousMonomer =
+        e.target.__data__?.monomer || sequenceNode?.monomer;
+
+      if (monomer instanceof AmbiguousMonomer) {
+        const ambiguousMonomerPreviewData: AmbiguousMonomerPreviewState = {
+          type: PreviewType.AmbiguousMonomer,
+          monomer: monomer.variantMonomerItem,
+          style: {
+            left: `${calculateAmbiguousMonomerPreviewLeft(
+              cardCoordinates.left,
+            )}px`,
+            top: calculateAmbiguousMonomerPreviewTop(
+              monomer.variantMonomerItem,
+            )(cardCoordinates),
+          },
+        };
+
+        debouncedShowPreview(ambiguousMonomerPreviewData);
+        return;
+      }
+
       const monomerItem = monomer.monomerItem;
       const attachmentPointsToBonds = { ...monomer.attachmentPointsToBonds };
       const isNucleotideOrNucleoside =
@@ -193,6 +223,25 @@ export const EditorEvents = () => {
                 sequenceNode.rnaBase.monomerItem,
               ];
 
+        if (sequenceNode.rnaBase instanceof AmbiguousMonomer) {
+          const ambiguousMonomerPreviewData: AmbiguousMonomerPreviewState = {
+            type: PreviewType.AmbiguousMonomer,
+            monomer: sequenceNode.rnaBase.variantMonomerItem,
+            presetMonomers: monomers,
+            style: {
+              left: `${calculateAmbiguousMonomerPreviewLeft(
+                cardCoordinates.left,
+              )}px`,
+              top: calculateAmbiguousMonomerPreviewTop(
+                sequenceNode.rnaBase.variantMonomerItem,
+              )(cardCoordinates),
+            },
+          };
+
+          debouncedShowPreview(ambiguousMonomerPreviewData);
+          return;
+        }
+
         const existingPreset = presets.find((preset) => {
           const presetMonomers = [preset.sugar, preset.base, preset.phosphate];
           return monomers.every((monomer, index) => {

packages/ketcher-macromolecules/src/components/monomerLibrary/RnaPresetGroup/RnaPresetGroup.tsx

@@ -14,9 +14,12 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { calculateNucleoElementPreviewTop } from 'helpers';
+import {
+  calculateAmbiguousMonomerPreviewTop,
+  calculateNucleoElementPreviewTop,
+} from 'helpers';
 import { useAppSelector } from 'hooks';
-import { MonomerItemType } from 'ketcher-core';
+import { MonomerItemType, isAmbiguousMonomerLibraryItem } from 'ketcher-core';
 import { debounce } from 'lodash';
 import React, { ReactElement, useCallback } from 'react';
 import {
@@ -32,18 +35,17 @@ import {
   GroupContainerRow,
   ItemsContainer,
 } from 'components/monomerLibrary/monomerLibraryGroup/styles';
-import {
-  PresetPosition,
-  PresetPreviewState,
-  PreviewType,
-  selectEditor,
-  selectShowPreview,
-  showPreview,
-} from 'state/common';
+import { selectEditor, selectShowPreview, showPreview } from 'state/common';
 import { RNAContextMenu } from 'components/contextMenu/RNAContextMenu';
 import { CONTEXT_MENU_ID } from 'components/contextMenu/types';
 import { useContextMenu } from 'react-contexify';
 import { IRnaPreset } from '../RnaBuilder/types';
+import {
+  AmbiguousMonomerPreviewState,
+  PresetPosition,
+  PresetPreviewState,
+  PreviewType,
+} from 'state';
 
 export const RnaPresetGroup = ({ presets, duplicatePreset, editPreset }) => {
   const activePreset = useAppSelector(selectActivePreset);
@@ -143,18 +145,27 @@ export const RnaPresetGroup = ({ presets, duplicatePreset, editPreset }) => {
     const cardCoordinates = e.currentTarget.getBoundingClientRect();
     const style = {
       left: `${cardCoordinates.left + cardCoordinates.width}px`,
-      top: preset ? calculateNucleoElementPreviewTop(cardCoordinates) : '',
+      top: isAmbiguousMonomerLibraryItem(preset.base)
+        ? calculateAmbiguousMonomerPreviewTop(preset.base)(cardCoordinates)
+        : calculateNucleoElementPreviewTop(cardCoordinates),
       transform: 'translate(-100%, 0)',
     };
-
-    const previewData: PresetPreviewState = {
-      type: PreviewType.Preset,
-      monomers,
-      name: preset.name,
-      idtAliases: preset.idtAliases,
-      position: PresetPosition.Library,
-      style,
-    };
+    const previewData: PresetPreviewState | AmbiguousMonomerPreviewState =
+      isAmbiguousMonomerLibraryItem(preset.base)
+        ? {
+            type: PreviewType.AmbiguousMonomer,
+            monomer: preset.base,
+            presetMonomers: monomers,
+            style,
+          }
+        : {
+            type: PreviewType.Preset,
+            monomers,
+            name: preset.name,
+            idtAliases: preset.idtAliases,
+            position: PresetPosition.Library,
+            style,
+          };
     debouncedShowPreview(previewData);
   };
   // endregion # Preview

packages/ketcher-macromolecules/src/components/monomerLibrary/monomerLibraryGroup/MonomerGroup.tsx

@@ -14,7 +14,11 @@
  * limitations under the License.
  ***************************************************************************/
 import { useCallback } from 'react';
-import { calculateMonomerPreviewTop, EmptyFunction } from 'helpers';
+import {
+  calculateAmbiguousMonomerPreviewTop,
+  calculateMonomerPreviewTop,
+  EmptyFunction,
+} from 'helpers';
 import { debounce } from 'lodash';
 import { MonomerItem } from '../monomerLibraryItem';
 import { GroupContainerColumn, GroupTitle, ItemsContainer } from './styles';
@@ -25,14 +29,9 @@ import {
   MonomerOrAmbiguousType,
 } from 'ketcher-core';
 import { useAppDispatch, useAppSelector } from 'hooks';
-import {
-  MonomerPreviewState,
-  PreviewType,
-  selectEditor,
-  selectTool,
-  showPreview,
-} from 'state/common';
+import { selectEditor, selectTool, showPreview } from 'state/common';
 import { selectGroupItemValidations } from 'state/rna-builder';
+import { PreviewStyle, PreviewType } from 'state';
 
 const MonomerGroup = ({
   items,
@@ -89,18 +88,30 @@ const MonomerGroup = ({
     e: React.MouseEvent<HTMLDivElement, MouseEvent>,
   ) => {
     handleItemMouseLeave();
+    const cardCoordinates = e.currentTarget.getBoundingClientRect();
+    let style: PreviewStyle;
+    let previewType: PreviewType;
+    let top: string;
+
     if (isAmbiguousMonomerLibraryItem(monomer)) {
-      return;
+      top = monomer
+        ? calculateAmbiguousMonomerPreviewTop(monomer)(cardCoordinates)
+        : '';
+      const left = `${cardCoordinates.left + cardCoordinates.width / 2}px`;
+      previewType = PreviewType.AmbiguousMonomer;
+      style = { left, top };
+    } else {
+      top = monomer ? calculateMonomerPreviewTop(cardCoordinates) : '';
+      style = { right: '-88px', top };
+      previewType = PreviewType.Monomer;
     }
 
-    const cardCoordinates = e.currentTarget.getBoundingClientRect();
-    const top = monomer ? calculateMonomerPreviewTop(cardCoordinates) : '';
-    const style = { right: '-88px', top };
-    const previewData: MonomerPreviewState = {
-      type: PreviewType.Monomer,
+    const previewData = {
+      type: previewType,
       monomer,
       style,
     };
+
     debouncedShowPreview(previewData);
   };