@datagrok/bio 2.14.2 → 2.15.0

package/src/utils/monomer-lib/library-file-manager/file-manager.ts

@@ -63,7 +63,7 @@ export class MonomerLibFileManager implements IMonomerLibFileManager {
   }
 
   /** Add standard .json monomer library  */
-  async addLibraryFile(fileContent: string, fileName: string): Promise<void> {
+  async addLibraryFile(fileContent: string, fileName: string, reload = true): Promise<void> {
     try {
       const alreadyFileExists = await grok.dapi.files.exists(LIB_PATH + `${fileName}`);
       if (alreadyFileExists) {

package/src/utils/monomer-lib/library-file-manager/file-validator.ts

@@ -45,6 +45,7 @@ export class MonomerLibFileValidator {
 
   private validateJsonContent(jsonContent: any[], fileName: string): boolean {
     let isValid = true;
+    const existingMonomerSymbols = new Set<string>();
     for (const monomer of jsonContent) {
       const name = monomer[REQ.SYMBOL] ?? monomer[REQ.ID] ?? monomer[REQ.NAME] ?? NA_CODE;
       isValid = this.validateMonomerSchema(monomer);
@@ -59,6 +60,13 @@ export class MonomerLibFileValidator {
         );
         break;
       }
+      const key = `${(monomer[REQ.POLYMER_TYPE] ?? '')}-${name}`;
+      if (existingMonomerSymbols.has(key)) {
+        console.warn(`Bio: Monomer Library File Validator file ${fileName}, monomer '${name}' is duplicated.`,
+          'Please, verify that the monomer library file does not contain duplicated monomer symbols.'
+        );
+      }
+      existingMonomerSymbols.add(key);
     }
     return isValid;
   }

package/src/utils/monomer-lib/library-file-manager/ui.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 /* Do not change these import lines to match external modules in webpack configuration */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
@@ -15,11 +16,18 @@ import {getMonomerLibHelper, IMonomerLibFileManager} from '@datagrok-libraries/b
 
 import {MonomerLibFileEventManager} from './event-manager';
 import {_package} from '../../../package';
+import {MonomerManager} from '../monomer-manager/monomer-manager';
+import {DuplicateMonomerManager} from '../monomer-manager/duplicate-monomer-manager';
+import {MonomerLibManager} from '../lib-manager';
 
 export async function showManageLibrariesDialog(): Promise<void> {
   await DialogWrapper.showDialog();
 }
 
+export async function showManageLibrariesView() {
+  await LibManagerView.showView();
+}
+
 export async function getMonomerLibraryManagerLink(): Promise<DG.Widget> {
   const link = ui.label('Manage monomer libraries');
   $(link).addClass('d4-link-action');
@@ -52,6 +60,11 @@ class MonomerLibraryManagerWidget {
     return MonomerLibraryManagerWidget.instancePromise;
   }
 
+  static async reloadWidget(): Promise<void> {
+    const instance = await MonomerLibraryManagerWidget.getInstance();
+    instance._widget = await instance.createWidget();
+  }
+
   private async createWidget() {
     const content = await this.getWidgetContent();
     const monomerLibHelper = await getMonomerLibHelper();
@@ -125,7 +138,7 @@ class LibraryControlsManager {
     return inputsForm;
   }
 
-  private updateControlsForm(): void {
+  public updateControlsForm(): void {
     const updatedForm = this._createControlsForm();
     $('.monomer-lib-controls-form').replaceWith(updatedForm);
   }
@@ -139,12 +152,16 @@ class LibraryControlsManager {
     const logPrefix = `${this.toLog()}.createLibInput()`;
     _package.logger.debug(`${logPrefix}, libFileName = '${libFileName}', start`);
     const isMonomerLibrarySelected = !this.userLibSettings.exclude.includes(libFileName);
-    const libInput = ui.input.bool(libFileName, {value: isMonomerLibrarySelected, onValueChanged: (input) => {
-      this.fileManager.eventManager.updateLibrarySelectionStatus(libFileName, input.value);
+    const libInput = ui.input.bool(libFileName, {value: isMonomerLibrarySelected, onValueChanged: () => {
+      this.fileManager.eventManager.updateLibrarySelectionStatus(libFileName, libInput.value);
     }});
     ui.tooltip.bind(libInput.root, `Include monomers from ${libFileName}`);
     const deleteIcon = ui.iconFA('trash-alt', () => this.promptForLibraryDeletion(libFileName));
+    const editIcon = ui.icons.edit(async () => {
+      grok.shell.v = await (await MonomerManager.getInstance()).getViewRoot(libFileName);
+    }, 'Edit monomer library');
     ui.tooltip.bind(deleteIcon, `Delete ${libFileName}`);
+    libInput.addOptions(editIcon);
     libInput.addOptions(deleteIcon);
     _package.logger.debug(`${logPrefix}, libFileName = '${libFileName}', end`);
     return libInput;
@@ -235,3 +252,133 @@ class DialogWrapper {
     return dialog;
   }
 }
+
+class LibManagerView {
+  private constructor() {};
+  private static _instance: LibManagerView;
+  private _view: DG.View;
+  private _duplicateManager: DuplicateMonomerManager;
+  private libManager: MonomerLibManager;
+  private async getView() {
+    const eventManager = MonomerLibFileEventManager.getInstance();
+    const widget = (await MonomerLibraryManagerWidget.getInstance()).widget;
+    const addButton = ui.bigButton('Add',
+      () => eventManager.addLibraryFile(), 'Upload new HELM monomer library');
+    const mergeButton =
+      ui.bigButton('Merge', () => { this.mergeSelectedLibs(); }, 'Merge selected libraries into one');
+
+    const v = ui.splitH(
+      [ui.divV([widget.root, ui.buttonsInput([addButton, mergeButton])], {classes: 'ui-form'}),
+        this._duplicateManager.root],
+      {style: {width: '100%', height: '100%'}},
+      true);
+    this._view = grok.shell.newView('Manage Monomer Libraries', [v]);
+
+    ui.tools.waitForElementInDom(v).then(() => {
+      setTimeout(() => {
+        const children = Array.from(v.children as HTMLCollectionOf<HTMLElement>)
+          .filter((el) => el.classList.contains('ui-box'));
+        if (children.length !== 2)
+          return;
+        const [left, right] = children;
+        const combinedWidth = left.getBoundingClientRect().width + right.getBoundingClientRect().width;
+        const leftWidth = combinedWidth * 0.3;
+        left.style.width = `${leftWidth}px`;
+        const rightWidth = combinedWidth - leftWidth;
+        right.style.width = `${rightWidth}px`;
+      }, 100);
+      this._view.subs.push(grok.events.onCurrentViewChanged.subscribe(async () => {
+        try {
+          const inst = LibManagerView._instance;
+          if (inst && inst._view && 'id' in grok.shell.v && grok.shell.v.id === inst._view.id)
+            inst._duplicateManager?.refresh();
+        } catch (e) {
+          console.error(e);
+        }
+      }));
+    });
+    //grok.shell.dockManager.dock(this._duplicateManager.root, DG.DOCK_TYPE.RIGHT, null, '', 0.4);
+  }
+
+  static async showView() {
+    if (!LibManagerView._instance)
+      LibManagerView._instance = new LibManagerView();
+    if (!LibManagerView._instance._duplicateManager)
+      LibManagerView._instance._duplicateManager = await DuplicateMonomerManager.getInstance();
+    if (!LibManagerView._instance.libManager)
+      LibManagerView._instance.libManager = await MonomerLibManager.getInstance();
+    if (LibManagerView._instance._view &&
+        Array.from(grok.shell.views).find((v) => v.id && v.id === LibManagerView._instance._view.id)) {
+      grok.shell.v = LibManagerView._instance._view;
+      await LibManagerView._instance._duplicateManager.refresh();
+      return;
+    }
+    LibManagerView._instance.getView();
+  }
+  async mergeSelectedLibs() {
+    const libraryExistsError = 'Library with this name already exists';
+    const libManager = await MonomerLibManager.getInstance();
+    await libManager.awaitLoaded();
+    await libManager.loadLibrariesPromise;
+    if (!libManager.duplicatesHandled) {
+      grok.shell.warning(`Selected libraries contain repeating symbols with different monomers.
+        Please choose the correct monomer for each symbol using duplicate monomomer manager.`);
+      return;
+    }
+    const libJSON = libManager.getBioLib().toJSON();
+    const dialog = ui.dialog('Merge selected libraries');
+    const newFileNameInput = ui.input.string('Library Name', {
+      placeholder: 'Enter new library name',
+      nullable: false,
+      onValueChanged: () => {
+        const res = validateInput(newFileNameInput.value);
+        dialog.getButton('Download')?.classList?.toggle('d4-disabled', !!res && res !== libraryExistsError);
+        dialog.getButton('Save')?.classList?.toggle('d4-disabled', !!res);
+      }
+    });
+    const validLibPaths = (await this.libManager.getFileManager()).getValidLibraryPaths();
+    newFileNameInput.addValidator(validateInput);
+    function getFileNameInputValue() {
+      let fileName = newFileNameInput.value;
+      if (!fileName.endsWith('.json'))
+        fileName += '.json';
+      return fileName;
+    };
+
+    function validateInput(v: string) {
+      if (!v || !v.trim()) return 'Library name cannot be empty';
+      if ((v.endsWith('.json') && validLibPaths.includes(v)) || validLibPaths.includes(v + '.json'))
+        return libraryExistsError;
+      return null;
+    }
+    dialog
+      .add(newFileNameInput)
+      .add(ui.divText(`Total monomers: ${libJSON.length}`))
+      .addButton('Download', () => { DG.Utils.download(getFileNameInputValue(), JSON.stringify(libJSON)); })
+      .addButton('Save', async () => {
+        dialog.close();
+        const fileName = getFileNameInputValue();
+        const content = JSON.stringify(libJSON);
+        const fileManager = await this.libManager.getFileManager();
+        this._view && ui.setUpdateIndicator(this._view.root, true);
+        try {
+          await fileManager.addLibraryFile(content, fileName, false); // we will reload after updating settings
+          const settings = await getUserLibSettings();
+          settings.exclude = validLibPaths; // exclude all previous libraries
+          await setUserLibSettings(settings);
+          await this.libManager.loadLibraries(true);
+          await MonomerLibraryManagerWidget.reloadWidget();
+        } catch (e) {
+          grok.shell.error(`Failed to save library ${fileName}. see console for details.`);
+          console.error(e);
+        } finally {
+          this._view && ui.setUpdateIndicator(this._view.root, false);
+        }
+      })
+      .show();
+    dialog.getButton('Download')?.classList?.add('d4-disabled');
+    dialog.getButton('Save')?.classList?.add('d4-disabled');
+  }
+}
+
+

package/src/utils/monomer-lib/monomer-lib.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 /* Do not change these import lines to match external modules in webpack configuration */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
@@ -18,12 +19,21 @@ import {helmTypeToPolymerType} from '@datagrok-libraries/bio/src/monomer-works/m
 import '../../../css/cell-renderer.css';
 
 import {_package} from '../../package';
+import {getUserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
+import {UserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/types';
 
 /** Wrapper for monomers obtained from different sources. For managing monomere
  * libraries, use MolfileHandler class instead */
 export class MonomerLib implements IMonomerLib {
   private _monomers: { [polymerType: string]: { [monomerSymbol: string]: Monomer } } = {};
   private _onChanged = new Subject<any>();
+  private _duplicateMonomers: { [polymerType: string]: { [monomerSymbol: string]: Monomer[] } } = {};
+  public get duplicateMonomers(): { [polymerType: string]: { [monomerSymbol: string]: Monomer[] } } {
+    return this._duplicateMonomers;
+  }
+  private _duplicatesHandled = true;
+  public get duplicatesHandled() { return this._duplicatesHandled; }
+  private duplicatesNotified: boolean = false;
 
   constructor(
     monomers: { [polymerType: string]: { [monomerSymbol: string]: Monomer } },
@@ -37,6 +47,15 @@ export class MonomerLib implements IMonomerLib {
     }
   }
 
+  toJSON(): Monomer[] {
+    const resJSON: Monomer[] = [];
+    for (const set of Object.values(this._monomers)) {
+      for (const m of Object.values(set))
+        resJSON.push({...m, lib: undefined, wem: undefined});
+    }
+    return resJSON;
+  }
+
   /** Creates missing {@link Monomer} */
   addMissingMonomer(polymerType: PolymerType, monomerSymbol: string): Monomer {
     let mSet = this._monomers[polymerType];
@@ -92,7 +111,7 @@ export class MonomerLib implements IMonomerLib {
     if (!polymerType) {
       _package.logger.warning(`${logPrefix} symbol '${argMonomerSymbol}', polymerType not specified.`);
       // Assume any polymer type
-      for (const [polymerType, dict] of Object.entries(this._monomers)) {
+      for (const [_polymerType, dict] of Object.entries(this._monomers)) {
         res = dict[monomerSymbol];
         if (res) break;
       }
@@ -138,7 +157,7 @@ export class MonomerLib implements IMonomerLib {
   /** Get a list of monomers with specified element attached to specified
    * R-group
    * WARNING: RGroup numbering starts from 1, not 0*/
-  getMonomerSymbolsByRGroup(rGroupNumber: number, polymerType: PolymerType, element?: string): string[] {
+  getMonomerSymbolsByRGroup(rGroupNumber: number, polymerType: PolymerType, _element?: string): string[] {
     const monomerSymbols = this.getMonomerSymbolsByType(polymerType);
     let monomers = monomerSymbols.map((sym) => this.getMonomer(polymerType, sym));
     monomers = monomers.filter((el) => el !== null);
@@ -155,7 +174,7 @@ export class MonomerLib implements IMonomerLib {
         return false;
       let criterion = monomer?.rgroups.length >= rGroupNumber;
       const molfileHandler = MolfileHandler.getInstance(monomer.molfile);
-      const rGroupIndices = findAllIndices(molfileHandler.atomTypes, 'R#');
+      const _rGroupIndices = findAllIndices(molfileHandler.atomTypes, 'R#');
       criterion &&= true;
       return criterion;
     });
@@ -178,6 +197,11 @@ export class MonomerLib implements IMonomerLib {
 
       const monomers = lib.getMonomerSymbolsByType(type);
       monomers.forEach((monomerSymbol) => {
+        if (this._monomers[type][monomerSymbol]) {
+          this._duplicateMonomers[type] ??= {};
+          this._duplicateMonomers[type][monomerSymbol] ??= [this._monomers[type][monomerSymbol]];
+          this._duplicateMonomers[type][monomerSymbol].push(lib.getMonomer(type, monomerSymbol)!);
+        }
         this._monomers[type][monomerSymbol] = lib.getMonomer(type, monomerSymbol)!;
       });
     });
@@ -191,11 +215,40 @@ export class MonomerLib implements IMonomerLib {
   public updateLibs(libList: IMonomerLib[], reload: boolean = false): void {
     if (reload)
       this._monomers = {};
+    this._duplicateMonomers = {}; // Reset duplicates
     for (const lib of libList)
       if (!lib.error) this._updateLibInt(lib);
+    if (Object.entries(this.duplicateMonomers).length > 0) {
+      getUserLibSettings().then((settings) => {
+        this.assignDuplicatePreferances(settings);
+      });
+    } else
+      this._duplicatesHandled = true;
+
     this._onChanged.next();
   }
 
+  /** Checks wether all duplicated monomers have set preferences in user settings. overwrites those which have. */
+  assignDuplicatePreferances(userSettings: UserLibSettings): boolean {
+    let res = true;
+    for (const polymerType in this.duplicateMonomers) {
+      for (const monomerSymbol in this.duplicateMonomers[polymerType]) {
+        if (!userSettings.duplicateMonomerPreferences?.[polymerType]?.[monomerSymbol])
+          res = false;
+        else {
+          const source = userSettings.duplicateMonomerPreferences[polymerType][monomerSymbol];
+          const monomer = this.duplicateMonomers[polymerType][monomerSymbol].find((m) => m.lib?.source === source);
+          if (!monomer)
+            res = false;
+          else
+            this._monomers[polymerType][monomerSymbol] = monomer;
+        }
+      }
+    }
+    this._duplicatesHandled = res;
+    return res;
+  }
+
   public clear(): void {
     this._monomers = {};
     this._onChanged.next();
@@ -250,7 +303,7 @@ export class MonomerLib implements IMonomerLib {
     if (monomer) {
       // Symbol & Name
       const symbol = monomer[REQ.SYMBOL];
-      const name = monomer[REQ.NAME];
+      const _name = monomer[REQ.NAME];
       res.append(ui.divH([
         ui.div([symbol], {style: {fontWeight: 'bolder', textWrap: 'nowrap', marginRight: '6px'}}),
         ui.div([monomer.name])
@@ -259,10 +312,9 @@ export class MonomerLib implements IMonomerLib {
       // Structure
       const chemOptions = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
       let structureEl: HTMLElement;
-      if (monomer.molfile) {
-        //
+      if (monomer.molfile)
         structureEl = grok.chem.svgMol(monomer.molfile, undefined, undefined, chemOptions);
-      } else if (monomer.smiles) {
+      else if (monomer.smiles) {
         structureEl = ui.divV([
           grok.chem.svgMol(monomer.smiles, undefined, undefined, chemOptions),
           ui.divText('from smiles', {style: {fontSize: 'smaller'}}),
@@ -276,20 +328,6 @@ export class MonomerLib implements IMonomerLib {
 
       // Source
       res.append(ui.divText(monomer.lib?.source ?? 'Missed in libraries'));
-
-      // const label = (s: string) => {
-      //   return ui.label(s /* span ? */, {classes: 'ui-input-label'});
-      // };
-      // res.append(ui.div([
-      //   label('Name'),
-      //   ui.divText(monomer.name, {classes: 'ui-input-text'})
-      // ], {classes: 'ui-input-root'}));
-      //
-      //
-      // res.append(ui.div([
-      //   label('Source'),
-      //   ui.divText(monomer.lib?.source ?? 'unknown', {classes: 'ui-input-text'}),
-      // ], {classes: 'ui-input-root'}));
     } else {
       res.append(ui.divV([
         ui.divText(`Monomer '${monomerSymbol}' of type '${polymerType}' not found.`),

package/src/utils/monomer-lib/monomer-manager/duplicate-monomer-manager.ts

@@ -0,0 +1,155 @@
+/* eslint-disable max-len */
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {Monomer} from '@datagrok-libraries/bio/src/types';
+import {UserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/types';
+import {getUserLibSettings, setUserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
+import '../../../../css/monomer-manager.css';
+import {MonomerLibManager} from '../lib-manager';
+
+class MonomerCard {
+  root: HTMLElement = ui.divV([], {classes: 'monomer-card-root'});
+
+  private _selected: boolean = false;
+  get selected(): boolean { return this._selected; }
+  set selected(value: boolean) {
+    this._selected = value;
+    this.root.style.border = value ? '2px solid var(--green-2)' : '2px solid var(--grey-2)';
+  }
+
+  constructor(public monomer: Monomer) {}
+
+  render() {
+    ui.empty(this.root);
+    const monomerMolSvg = this.monomer.smiles && grok.chem.checkSmiles(this.monomer.smiles) ?
+      grok.chem.drawMolecule(this.monomer.smiles, 200, 200) : grok.chem.drawMolecule(this.monomer.molfile ?? '', 200, 200);
+    this.root.appendChild(monomerMolSvg);
+    const monomerName =
+      ui.divH([ui.divText('Monomer Name: '), ui.divText(this.monomer.name)], {classes: 'monomer-card-info-row'});
+
+    this.root.appendChild(monomerName);
+    ui.tooltip.bind(monomerName, this.monomer.name);
+    if (this.monomer.lib?.source) {
+      const monomerSource =
+        ui.divH([ui.divText('Source: '), ui.divText(this.monomer.lib.source)], {classes: 'monomer-card-info-row'});
+      this.root.appendChild(monomerSource);
+      ui.tooltip.bind(monomerSource, this.monomer.lib.source);
+    }
+    const monomerType = ui.divH([ui.divText('Polymer Type: '), ui.divText(this.monomer.polymerType)], {classes: 'monomer-card-info-row'});
+    this.root.appendChild(monomerType);
+    ui.tooltip.bind(monomerType, this.monomer.polymerType);
+
+    ui.tooltip.bind(this.root, 'Select Monomer');
+  }
+}
+
+class DuplicateSymbolRow {
+  root: HTMLElement = ui.divH([],
+      {style: {
+        alignItems: 'center',
+        width: '100%',
+        overflow: 'hidden',
+        visibility: 'visible',
+      }, classes: 'duplicate-monomer-symbol-row'}
+  );
+  monomerCards: MonomerCard[];
+  constructor(
+    public monomerSymbol: string, private monomers: Monomer[],
+    selectedMonomer: Monomer | null, onMonomerSelected: (monomer: Monomer) => void) {
+    this.monomerCards = monomers.map((monomer) => new MonomerCard(monomer));
+    const monomerGallery = ui.divH([], {style: {overflowX: 'auto', width: '100%'}});
+    const monomerSymbolDiv = ui.h1(monomerSymbol, {style: {lineHeight: '2em', fontSize: '1.5em', marginRight: '20px', width: '100px', overflow: 'hidden', textOverflow: 'elipsis'}});
+    ui.tooltip.bind(monomerSymbolDiv, monomerSymbol);
+    this.root.appendChild(monomerSymbolDiv);
+    this.root.appendChild(monomerGallery);
+    this.monomerCards.forEach((card) => {
+      card.root.onclick = () => {
+        this.monomerCards.forEach((c) => c.selected = false);
+        card.selected = true;
+        onMonomerSelected(card.monomer);
+      };
+      if (selectedMonomer && card.monomer === selectedMonomer)
+        card.selected = true;
+      monomerGallery.appendChild(card.root);
+    });
+  }
+
+  render() {
+    this.monomerCards.forEach((card) => card.render());
+  }
+}
+
+export class DuplicateMonomerManager {
+  monomerCardRows: DuplicateSymbolRow[] = [];
+  private saveSettingsPromise: Promise<void> = Promise.resolve();
+  private searchInput: DG.InputBase<string>;
+  private _root: HTMLElement;
+  private monomers: { [polymerType: string]: { [monomerSymbol: string]: Monomer[] } };
+  private settings: UserLibSettings;
+  private filteredMonomerRows: DuplicateSymbolRow[] = [];
+  private static _instance: DuplicateMonomerManager;
+  private vv: DG.VirtualView;
+
+  static async getInstance() {
+    if (!DuplicateMonomerManager._instance) {
+      DuplicateMonomerManager._instance = new DuplicateMonomerManager();
+      await DuplicateMonomerManager._instance.refresh();
+      const libManager = await MonomerLibManager.getInstance();
+      libManager.getMonomerLib().onChanged.subscribe(async () => await DuplicateMonomerManager._instance.refresh());
+    }
+    DuplicateMonomerManager._instance.refresh();
+    return DuplicateMonomerManager._instance;
+  }
+
+  public async refresh() {
+    this.settings = await getUserLibSettings();
+    const libManager = await MonomerLibManager.getInstance();
+    await libManager.awaitLoaded();
+    await libManager.loadLibrariesPromise;
+    this.monomers = libManager.duplicateMonomers;
+    this.monomerCardRows = [];
+    for (const polymerType in this.monomers) {
+      for (const monomerSymbol in this.monomers[polymerType]) {
+        const selectedMonomerSource = this.settings.duplicateMonomerPreferences?.[polymerType]?.[monomerSymbol] ?? null;
+        const selectedMonomer = selectedMonomerSource ? this.monomers[polymerType][monomerSymbol].find((monomer) => monomer.lib?.source === selectedMonomerSource) ?? null : null;
+
+        this.monomerCardRows.push(new DuplicateSymbolRow(monomerSymbol, this.monomers[polymerType][monomerSymbol], selectedMonomer,
+          async (monomer) => {
+            this.saveSettingsPromise = this.saveSettingsPromise.then(async () => {
+              if (!monomer.lib?.source)
+                return;
+              this.settings.duplicateMonomerPreferences = this.settings.duplicateMonomerPreferences ?? {};
+              this.settings.duplicateMonomerPreferences[polymerType] = this.settings.duplicateMonomerPreferences[polymerType] ?? {};
+              this.settings.duplicateMonomerPreferences[polymerType][monomerSymbol] = monomer.lib.source;
+              await setUserLibSettings(this.settings);
+              grok.shell.info(`Monomer '${monomer.name}' from source '${monomer.lib.source}' selected for symbol '${monomerSymbol}'.`);
+              libManager.assignDuplicatePreferances(this.settings);
+            });
+          }));
+      }
+    }
+    this.filteredMonomerRows = this.monomerCardRows;
+    if (!this.vv) {
+      this.vv = ui.virtualView(this.monomerCardRows.length, (i) => { this.monomerCardRows[i].render(); return this.monomerCardRows[i].root; });
+      this.vv.root.classList.add('duplicate-monomers-virtual-view');
+      this.searchInput = ui.input.string('Search', {placeholder: 'Monomer Symbol', value: '', onValueChanged: () => search(this.searchInput.value)});
+      this.searchInput.root.style.justifyContent = 'center';
+      this.searchInput.input.style.width = '200px';
+      this._root = ui.divV([ui.h1('Manage Duplicate Monomer Symbols', {style: {textAlign: 'center'}}),
+        this.searchInput.root, ui.divV([this.vv.root], {style: {overflowY: 'auto', height: '100%'}})], {style: {height: '100%'}});
+
+      const search = (query: string) => {
+        this.filteredMonomerRows = this.monomerCardRows.filter((row) => row.monomerSymbol.toLowerCase().includes(query.toLowerCase()));
+        this.vv.setData(this.filteredMonomerRows.length, (i) => { this.filteredMonomerRows[i].render(); return this.filteredMonomerRows[i].root; });
+      };
+    } else
+      this.vv.setData(this.filteredMonomerRows.length, (i) => { this.filteredMonomerRows[i].render(); return this.filteredMonomerRows[i].root; } );
+  }
+
+  private constructor() {}
+  get root() {
+    return this._root;
+  }
+}