#4427 - Macro: Store custom presets in browser local cache

ketcher-autotests/tests/Macromolecule-editor/RNA-Builder/rna-library.spec.ts

@@ -291,6 +291,26 @@ test.describe('RNA Library', () => {
     await takePresetsScreenshot(page);
   });
 
+  test('Add Custom preset to Presets section and display after page reload', async ({
+    page,
+  }) => {
+    await expandCollapseRnaBuilder(page);
+    await selectMonomer(page, Sugars.TwelveddR);
+    await selectMonomer(page, Bases.Adenine);
+    await selectMonomer(page, Phosphates.Test6Ph);
+    await page.getByTestId('add-to-presets-btn').click();
+    await page.getByTestId('12ddR(A)Test-6-Ph_A_12ddR_Test-6-Ph').click();
+    await expandCollapseRnaBuilder(page);
+    await takePresetsScreenshot(page);
+    await page.reload();
+    await waitForPageInit(page);
+    await turnOnMacromoleculesEditor(page);
+    await page.getByTestId('RNA-TAB').click();
+    await page.getByTestId('12ddR(A)Test-6-Ph_A_12ddR_Test-6-Ph').click();
+    await expandCollapseRnaBuilder(page);
+    await takePresetsScreenshot(page);
+  });
+
   test('Add Custom preset to Canvas', async ({ page }) => {
     /* 
     Test case: #2507 - Add RNA monomers to canvas

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

@@ -70,10 +70,20 @@ interface ToolEventHandler {
 
 export interface IRnaPreset {
   name?: string;
+  nameInList?: string;
   base?: MonomerItemType;
   sugar?: MonomerItemType;
   phosphate?: MonomerItemType;
-  presetInList?: IRnaPreset;
+  default?: boolean;
+  favorite?: boolean;
+  editedName?: boolean;
+}
+
+export interface IRnaLabeledPreset
+  extends Omit<IRnaPreset, 'base' | 'sugar' | 'phosphate'> {
+  base?: string;
+  sugar?: string;
+  phosphate?: string;
 }
 
 export type LabeledNucleotideWithPositionInSequence = {

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

@@ -32,4 +32,8 @@ export class Command {
     );
     renderersManagers.runPostRenderMethods();
   }
+
+  public clear() {
+    this.operations = [];
+  }
 }

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

@@ -1,3 +1,5 @@
+import pick from 'lodash/pick';
+import omit from 'lodash/omit';
 import { AttachmentPointName, MonomerItemType } from 'domain/types';
 import { Vec2 } from 'domain/entities/vec2';
 import { Command } from 'domain/entities/Command';
@@ -53,7 +55,9 @@ import { ChainsCollection } from 'domain/entities/monomer-chains/ChainsCollectio
 import { SequenceRenderer } from 'application/render/renderers/sequence/SequenceRenderer';
 import { Nucleoside } from './Nucleoside';
 import { Nucleotide } from './Nucleotide';
-import { SequenceMode } from 'application/editor';
+import { IRnaPreset, SequenceMode } from 'application/editor';
+import { IRnaLabeledPreset } from 'application/editor/tools';
+import { getRnaPartLibraryItem } from 'domain/helpers/rna';
 
 const HORIZONTAL_DISTANCE_FROM_MONOMER = 25;
 const VERTICAL_DISTANCE_FROM_MONOMER = 30;
@@ -887,7 +891,9 @@ export class DrawingEntitiesManager {
     if (rnaBase && rnaBasePosition) {
       monomersToAdd.push([rnaBase, rnaBasePosition]);
     }
-    monomersToAdd.push([sugar, sugarPosition]);
+    if (sugar && sugarPosition) {
+      monomersToAdd.push([sugar, sugarPosition]);
+    }
     if (phosphate && phosphatePosition) {
       monomersToAdd.push([phosphate, phosphatePosition]);
     }
@@ -909,6 +915,10 @@ export class DrawingEntitiesManager {
         const attPointEnd = monomer.getValidSourcePoint(previousMonomer);
 
         assert(attPointStart);
+        if (!attPointEnd) {
+          command.clear();
+          return;
+        }
         assert(attPointEnd);
 
         const operation = new PolymerBondFinishCreationOperation(
@@ -929,6 +939,53 @@ export class DrawingEntitiesManager {
     return { command, monomers };
   }
 
+  public createRnaPresetFromLabeledRnaPreset(preset: IRnaLabeledPreset) {
+    const editor = CoreEditor.provideEditorInstance();
+    const modifiedPreset: Partial<IRnaPreset> = omit(preset, [
+      'sugar',
+      'base',
+      'phosphate',
+    ]);
+    const position = Coordinates.canvasToModel(new Vec2(0, 0));
+    let rnaBaseLibraryItem;
+    let phosphateLibraryItem;
+    let sugarLibraryItem;
+
+    if (preset.base) {
+      rnaBaseLibraryItem = getRnaPartLibraryItem(editor, preset.base);
+      rnaBaseLibraryItem && assert(rnaBaseLibraryItem);
+    }
+    if (preset.phosphate) {
+      phosphateLibraryItem = getRnaPartLibraryItem(editor, preset.phosphate);
+      phosphateLibraryItem && assert(phosphateLibraryItem);
+    }
+    if (preset.sugar) {
+      sugarLibraryItem = getRnaPartLibraryItem(editor, preset.sugar);
+      sugarLibraryItem && assert(sugarLibraryItem);
+    }
+
+    const { monomers } = editor.drawingEntitiesManager.addRnaPreset({
+      sugar: sugarLibraryItem,
+      sugarPosition: position,
+      rnaBase: rnaBaseLibraryItem,
+      rnaBasePosition: position,
+      phosphate: phosphateLibraryItem,
+      phosphatePosition: position,
+    });
+    for (const monomer of monomers) {
+      const props = pick(monomer.monomerItem, ['label', 'props', 'struct']);
+      if (monomer instanceof RNABase) {
+        modifiedPreset.base = { ...props };
+      } else if (monomer instanceof Sugar) {
+        modifiedPreset.sugar = { ...props };
+      } else if (monomer instanceof Phosphate) {
+        modifiedPreset.phosphate = { ...props };
+      }
+    }
+
+    return modifiedPreset;
+  }
+
   private findChainByMonomer(
     monomer: BaseMonomer,
     monomerChain: BaseMonomer[] = [],

packages/ketcher-macromolecules/src/Editor.tsx

@@ -47,10 +47,6 @@ import {
   selectTool,
   showPreview,
 } from 'state/common';
-import {
-  loadMonomerLibrary,
-  setFavoriteMonomersFromLocalStorage,
-} from 'state/library';
 import {
   useAppDispatch,
   useAppSelector,
@@ -87,15 +83,9 @@ import { calculatePreviewPosition } from 'helpers';
 import { ErrorModal } from 'components/modal/Error';
 import { EditorWrapper, TogglerComponentWrapper } from './styledComponents';
 import { useLoading } from './hooks/useLoading';
+import useSetRnaPresets from './hooks/useSetRnaPresets';
 import { Loader } from 'components/Loader';
 import { FullscreenButton } from 'components/FullscreenButton';
-import { getDefaultPresets } from 'src/helpers/getDefaultPreset';
-import {
-  setDefaultPresets,
-  setFavoritePresetsFromLocalStorage,
-  clearFavorites,
-} from 'state/rna-builder';
-import { IRnaPreset } from 'components/monomerLibrary/RnaBuilder/types';
 import { LayoutModeButton } from 'components/LayoutModeButton';
 import { useContextMenu } from 'react-contexify';
 import { CONTEXT_MENU_ID } from 'components/contextMenu/types';
@@ -174,28 +164,7 @@ function Editor({ theme, togglerComponent }: EditorProps) {
     };
   }, [dispatch]);
 
-  useEffect(() => {
-    if (editor) {
-      const monomersLibrary = editor.monomersLibrary;
-      const defaultPresetsTemplates = editor.defaultRnaPresetsLibraryItems;
-
-      dispatch(loadMonomerLibrary(monomersLibrary));
-      dispatch(setFavoriteMonomersFromLocalStorage(null));
-
-      const defaultPresets: IRnaPreset[] = getDefaultPresets(
-        monomersLibrary,
-        defaultPresetsTemplates,
-      );
-
-      dispatch(setDefaultPresets(defaultPresets));
-      dispatch(setFavoritePresetsFromLocalStorage());
-    }
-
-    return () => {
-      dispatch(loadMonomerLibrary([]));
-      dispatch(clearFavorites());
-    };
-  }, [editor]);
+  useSetRnaPresets();
 
   const dispatchShowPreview = useCallback(
     (payload) => dispatch(showPreview(payload)),

packages/ketcher-macromolecules/src/components/contextMenu/RNAContextMenu.test.tsx

@@ -85,7 +85,8 @@ describe('RNA ContextMenu', () => {
             monomers: monomerData,
           },
           rnaBuilder: {
-            presets: mockedPresets,
+            presetsDefault: mockedPresets,
+            presetsCustom: [],
           },
         },
       ),
@@ -112,7 +113,8 @@ describe('RNA ContextMenu', () => {
             monomers: monomerData,
           },
           rnaBuilder: {
-            presets: mockedPresets,
+            presetsDefault: mockedPresets,
+            presetsCustom: [],
           },
         },
       ),
@@ -141,7 +143,8 @@ describe('RNA ContextMenu', () => {
             monomers: monomerData,
           },
           rnaBuilder: {
-            presets: mockedPresets,
+            presetsDefault: mockedPresets,
+            presetsCustom: [],
           },
         },
       ),

packages/ketcher-macromolecules/src/components/modal/Delete/Delete.test.tsx

@@ -37,13 +37,28 @@ describe('Delete component', () => {
     },
     name: 'A',
   };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const presetCustom: any = {
+    base: {
+      label: '25A',
+    },
+    phosphate: {
+      label: 'P',
+    },
+    sugar: {
+      label: 'R',
+    },
+    name: 'MyRna',
+    nameInList: 'MyRna',
+  };
   it('should render correctly', () => {
     expect(
       render(
         withThemeAndStoreProvider(<Delete {...mockProps} />, {
           rnaBuilder: {
-            activePresetForContextMenu: { presetInList: preset, name: 'name' },
-            presets: [preset],
+            activePresetForContextMenu: { nameInList: 'name', name: 'name' },
+            presetsDefault: [preset],
+            presetsCustom: [],
           },
         }),
       ),
@@ -53,8 +68,9 @@ describe('Delete component', () => {
     render(
       withThemeAndStoreProvider(<Delete {...mockProps} />, {
         rnaBuilder: {
-          activePresetForContextMenu: { presetInList: preset, name: 'name' },
-          presets: [preset],
+          activePresetForContextMenu: { nameInList: 'name', name: 'name' },
+          presetsDefault: [preset],
+          presetsCustom: [],
         },
       }),
     );
@@ -67,8 +83,9 @@ describe('Delete component', () => {
     render(
       withThemeAndStoreProvider(<Delete {...mockProps} />, {
         rnaBuilder: {
-          activePresetForContextMenu: { presetInList: preset, name: 'name' },
-          presets: [preset],
+          activePresetForContextMenu: { nameInList: 'name', name: 'name' },
+          presetsDefault: [preset],
+          presetsCustom: [presetCustom],
         },
         editor: {
           editor: {

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

@@ -26,7 +26,7 @@ import { setSearchFilter } from 'state/library';
 import { Icon } from 'ketcher-react';
 import { IRnaPreset } from './RnaBuilder/types';
 import {
-  selectPresets,
+  selectAllPresets,
   setActivePreset,
   setIsEditMode,
   setUniqueNameError,
@@ -50,7 +50,7 @@ const MonomerLibrary = React.memo(() => {
   const isDisabledTabsPanels =
     isSequenceMode && !isSequenceEditInRNABuilderMode;
 
-  useAppSelector(selectPresets, (presets) => {
+  useAppSelector(selectAllPresets, (presets) => {
     presetsRef.current = presets;
     return true;
   });
@@ -68,10 +68,11 @@ const MonomerLibrary = React.memo(() => {
       return;
     }
 
+    const nameToSet = presetWithSameName ? `${name}_Copy` : name;
     const duplicatedPreset = {
       ...preset,
-      presetInList: undefined,
-      name: presetWithSameName ? `${name}_Copy` : name,
+      name: nameToSet,
+      nameInList: nameToSet,
       default: false,
       favorite: false,
     };

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

@@ -42,8 +42,10 @@ export const RnaBuilder = ({ libraryName, duplicatePreset, editPreset }) => {
         onClose={closeErrorModal}
       >
         <Modal.Content>
-          Preset with name "{uniqueNameError}" already exists. Please choose
-          another name.
+          <div style={{ padding: '12px' }}>
+            Preset with name "{uniqueNameError}" already exists. Please choose
+            another name.
+          </div>
         </Modal.Content>
         <Modal.Footer>
           <StyledButton onClick={closeErrorModal}>Close</StyledButton>

packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditor.tsx

@@ -69,7 +69,7 @@ export const RnaEditor = ({ duplicatePreset }) => {
 
   const expandEditor = () => {
     setExpanded(!expanded);
-    if (!activePreset?.presetInList) {
+    if (!activePreset?.nameInList) {
       dispatch(setIsEditMode(true));
     }
   };

packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/RnaEditorExpanded.test.tsx

@@ -19,22 +19,11 @@ describe('Test Rna Editor Expanded component', () => {
         {
           rnaBuilder: {
             activePreset: {
-              name: 'MyRna',
-              sugar: {
-                props: {
-                  MonomerName: '',
-                },
-              },
-              phosphate: {
-                props: {
-                  MonomerName: '',
-                },
-              },
-              base: {
-                props: {
-                  MonomerName: '',
-                },
-              },
+              name: '',
+              nameInList: '',
+              sugar: undefined,
+              phosphate: undefined,
+              base: undefined,
             },
           },
         },
@@ -74,6 +63,8 @@ describe('Test Rna Editor Expanded component', () => {
                 nodeIndexOverall: 1,
               },
             ],
+            presetsDefault: [],
+            presetsCustom: [],
           },
         },
       ),
@@ -112,8 +103,10 @@ describe('Test Rna Editor Expanded component', () => {
                   MonomerName: '',
                 },
               },
-              presetInList: {},
+              nameInList: 'MyRna',
             },
+            presetsDefault: [],
+            presetsCustom: [],
           },
         },
       ),