#5990 – Extend Ketcher API to allow updating monomers library

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

@@ -60,6 +60,7 @@ interface ICoreEditorConstructorParams {
   theme;
   canvas: SVGSVGElement;
   mode?: BaseMode;
+  monomersLibraryUpdate?: string | JSON;
 }
 
 function isMouseMainButtonPressed(event: MouseEvent) {
@@ -97,7 +98,12 @@ export class CoreEditor {
   private pasteEventHandler: (event: ClipboardEvent) => void = () => {};
   private keydownEventHandler: (event: KeyboardEvent) => void = () => {};
 
-  constructor({ theme, canvas, mode }: ICoreEditorConstructorParams) {
+  constructor({
+    theme,
+    canvas,
+    mode,
+    monomersLibraryUpdate,
+  }: ICoreEditorConstructorParams) {
     this._type = EditorType.Macromolecules;
     this.theme = theme;
     this.canvas = canvas;
@@ -109,6 +115,9 @@ export class CoreEditor {
     this.events = editorEvents;
     this.setMonomersLibrary(monomersDataRaw);
     this._monomersLibraryParsedJson = JSON.parse(monomersDataRaw);
+    if (monomersLibraryUpdate) {
+      this.updateMonomersLibrary(monomersLibraryUpdate);
+    }
     this.subscribeEvents();
     this.renderersContainer = new RenderersManager({ theme });
     this.drawingEntitiesManager = new DrawingEntitiesManager();
@@ -131,13 +140,49 @@ export class CoreEditor {
     return editor;
   }
 
-  private setMonomersLibrary(monomersDataRaw: string) {
-    const monomersLibraryParsedJson = JSON.parse(monomersDataRaw);
-    this._monomersLibraryParsedJson = monomersLibraryParsedJson;
+  private parseMonomersLibrary(monomersDataRaw: string | JSON) {
+    const monomersLibraryParsedJson =
+      typeof monomersDataRaw === 'string'
+        ? JSON.parse(monomersDataRaw)
+        : monomersDataRaw;
     const serializer = new KetSerializer();
-    this._monomersLibrary = serializer.convertMonomersLibrary(
+    const monomersLibrary = serializer.convertMonomersLibrary(
       monomersLibraryParsedJson,
     );
+
+    return { monomersLibraryParsedJson, monomersLibrary };
+  }
+
+  private setMonomersLibrary(monomersDataRaw: string) {
+    const { monomersLibraryParsedJson, monomersLibrary } =
+      this.parseMonomersLibrary(monomersDataRaw);
+    this._monomersLibraryParsedJson = monomersLibraryParsedJson;
+    this._monomersLibrary = monomersLibrary;
+  }
+
+  public updateMonomersLibrary(monomersDataRaw: string | JSON) {
+    const { monomersLibraryParsedJson, monomersLibrary } =
+      this.parseMonomersLibrary(monomersDataRaw);
+
+    this._monomersLibraryParsedJson = monomersLibraryParsedJson;
+    monomersLibrary.forEach((newMonomer) => {
+      const existingMonomerIndex = this._monomersLibrary.findIndex(
+        (monomer) => {
+          return (
+            monomer?.props?.MonomerName === newMonomer?.props?.MonomerName &&
+            monomer?.props?.MonomerClass === newMonomer?.props?.MonomerClass
+          );
+        },
+      );
+
+      if (existingMonomerIndex !== -1) {
+        this._monomersLibrary[existingMonomerIndex] = newMonomer;
+      } else {
+        this._monomersLibrary.push(newMonomer);
+      }
+    });
+
+    this.events.updateMonomersLibrary.dispatch();
   }
 
   public get monomersLibraryParsedJson() {

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

@@ -177269,4 +177269,4 @@
       }
     ]
   }
-}
+}

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

@@ -53,6 +53,7 @@ export function resetEditorEvents() {
     doubleClickOnSequenceItem: new Subscription(),
     openConfirmationDialog: new Subscription(),
     mouseUpAtom: new Subscription(),
+    updateMonomersLibrary: new Subscription(),
   };
 }
 resetEditorEvents();

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

@@ -39,6 +39,7 @@ import {
 import {
   deleteAllEntitiesOnCanvas,
   getStructure,
+  ketcherProvider,
   parseAndAddMacromoleculesOnCanvas,
   prepareStructToRender,
 } from './utils';
@@ -535,4 +536,18 @@ export class Ketcher {
   public sendCustomAction(name: string) {
     this.eventBus.emit('CUSTOM_BUTTON_PRESSED', name);
   }
+
+  public updateMonomersLibrary(rawMonomersData: string | JSON) {
+    const editor = CoreEditor.provideEditorInstance();
+
+    ketcherProvider.getKetcher();
+
+    if (!editor) {
+      throw new Error(
+        'Updating monomer library in small molecules mode is not allowed, please switch to macromolecules mode',
+      );
+    }
+
+    editor.updateMonomersLibrary(rawMonomersData);
+  }
 }

packages/ketcher-macromolecules/src/Editor.tsx

@@ -92,21 +92,21 @@ import { EditorEvents } from './EditorEvents';
 
 const muiTheme = createTheme(muiOverrides);
 
-interface EditorContainerProps {
-  onInit?: () => void;
+interface EditorProps {
   theme?: DeepPartial<EditorTheme>;
   togglerComponent?: JSX.Element;
+  monomersLibraryUpdate?: string | JSON;
 }
 
-interface EditorProps {
-  theme?: DeepPartial<EditorTheme>;
-  togglerComponent?: JSX.Element;
+interface EditorContainerProps extends EditorProps {
+  onInit?: () => void;
 }
 
 function EditorContainer({
   onInit,
   theme,
   togglerComponent,
+  monomersLibraryUpdate,
 }: EditorContainerProps) {
   const rootElRef = useRef<HTMLDivElement>(null);
   const editorTheme: EditorTheme = theme
@@ -126,14 +126,22 @@ function EditorContainer({
       <ThemeProvider theme={mergedTheme}>
         <Global styles={getGlobalStyles} />
         <EditorWrapper ref={rootElRef} className={EditorClassName}>
-          <Editor theme={editorTheme} togglerComponent={togglerComponent} />
+          <Editor
+            theme={editorTheme}
+            togglerComponent={togglerComponent}
+            monomersLibraryUpdate={monomersLibraryUpdate}
+          />
         </EditorWrapper>
       </ThemeProvider>
     </Provider>
   );
 }
 
-function Editor({ theme, togglerComponent }: EditorProps) {
+function Editor({
+  theme,
+  togglerComponent,
+  monomersLibraryUpdate,
+}: EditorProps) {
   const dispatch = useAppDispatch();
   const canvasRef = useRef<SVGSVGElement>(null);
   const errorTooltipText = useAppSelector(selectErrorTooltipText);
@@ -151,7 +159,9 @@ function Editor({ theme, togglerComponent }: EditorProps) {
   });
 
   useEffect(() => {
-    dispatch(createEditor({ theme, canvas: canvasRef.current }));
+    dispatch(
+      createEditor({ theme, canvas: canvasRef.current, monomersLibraryUpdate }),
+    );
 
     return () => {
       dispatch(destroyEditor(null));

packages/ketcher-macromolecules/src/EditorEvents.tsx

@@ -46,6 +46,7 @@ import {
   PreviewType,
 } from 'state/types';
 import { calculateBondPreviewPosition } from 'ketcher-react';
+import { loadMonomerLibrary } from 'state/library';
 
 const noPreviewTools = ['bond-single'];
 
@@ -55,6 +56,18 @@ export const EditorEvents = () => {
   const dispatch = useAppDispatch();
   const presets = useAppSelector(selectAllPresets);
 
+  const handleMonomersLibraryUpdate = useCallback(() => {
+    dispatch(loadMonomerLibrary(editor?.monomersLibrary));
+  }, [editor]);
+
+  useEffect(() => {
+    editor?.events.updateMonomersLibrary.add(handleMonomersLibraryUpdate);
+
+    return () => {
+      editor?.events.updateMonomersLibrary.remove(handleMonomersLibraryUpdate);
+    };
+  }, [editor]);
+
   useEffect(() => {
     const handler = (toolName: string) => {
       if (toolName !== activeTool) {

packages/ketcher-macromolecules/src/state/common/editorSlice.ts

@@ -70,6 +70,7 @@ export const editorSlice: Slice = createSlice({
       action: PayloadAction<{
         theme: DeepPartial<ThemeType>;
         canvas: SVGSVGElement;
+        monomersLibraryUpdate?: string | JSON;
       }>,
     ) => {
       state.editor = new CoreEditor({
@@ -78,6 +79,7 @@ export const editorSlice: Slice = createSlice({
         mode: state.editorLayoutMode
           ? new modesMap[state.editorLayoutMode]()
           : undefined,
+        monomersLibraryUpdate: action.payload.monomersLibraryUpdate,
       });
     },
     destroyEditor: (state) => {