@datagrok/helm 2.3.4 → 2.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -16,7 +16,7 @@
     "css/helm.css"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.42.6",
+    "@datagrok-libraries/bio": "^5.42.9",
     "@datagrok-libraries/chem-meta": "^1.2.5",
     "@datagrok-libraries/utils": "^4.2.19",
     "cash-dom": "^8.1.1",
@@ -26,17 +26,18 @@
     "wu": "latest"
   },
   "devDependencies": {
-    "@datagrok-libraries/helm-web-editor": "^1.1.6",
-    "@datagrok-libraries/js-draw-lite": "^0.0.4",
-    "@datagrok/bio": "^2.13.3",
+    "@datagrok-libraries/helm-web-editor": "^1.1.8",
+    "@datagrok-libraries/js-draw-lite": "^0.0.6",
+    "@datagrok/bio": "^2.14.1",
     "@datagrok/chem": "^1.9.2",
     "@types/node": "17.0.45",
     "@types/wu": "latest",
-    "@typescript-eslint/eslint-plugin": "^5.11.0",
-    "@typescript-eslint/parser": "^5.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "datagrok-tools": "latest",
     "eslint": "^8.18.0",
     "eslint-config-google": "^0.14.0",
+    "eslint-plugin-rxjs": "^5.0.3",
     "path": "^0.12.7",
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.2.6",

package/src/cell-renderer.ts

@@ -4,19 +4,19 @@ import * as DG from 'datagrok-api/dg';
 
 import wu from 'wu';
 
-import {HelmType, ISeqMonomer, Mol} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmMol, ISeqMonomer} from '@datagrok-libraries/bio/src/helm/types';
 
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 import {getGridCellRendererBack} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 
 import {findMonomers, parseHelm, removeGapsFromHelm} from './utils';
 import {HelmMonomerPlacer} from './helm-monomer-placer';
-import {getHoveredMonomerFallback, getHoveredMonomerFromEditorMol} from './utils/get-hovered';
-import {JSDraw2HelmModule} from './types';
+import {getHoveredMonomerFallback, getHoveredMonomerFromEditorMol, getSeqMonomerFromHelmAtom} from './utils/get-hovered';
+import {JSDraw2Module} from './types';
 
 import {_package} from './package';
 
-declare const JSDraw2: JSDraw2HelmModule;
+declare const JSDraw2: JSDraw2Module;
 
 const enum tempTAGS {
   helmSumMaxLengthWords = 'helm-sum-maxLengthWords',
@@ -50,12 +50,13 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       const argsY = e.offsetY - gcb.y;
 
       const monomerLib = _package.monomerLib;
-      const editorMol: Mol<HelmType> | null = helmPlacer.getEditorMol(gridCell.tableRowIndex!);
+      const editorMol: HelmMol | null = helmPlacer.getEditorMol(gridCell.tableRowIndex!);
       let seqMonomer: ISeqMonomer | null;
       let missedMonomers: Set<string> = new Set<string>(); // of .size = 0
-      if (editorMol)
-        seqMonomer = getHoveredMonomerFromEditorMol(argsX, argsY, editorMol, gridCell.bounds.height);
-      else {
+      if (editorMol) {
+        const hoveredAtom = getHoveredMonomerFromEditorMol(argsX, argsY, editorMol, gridCell.bounds.height);
+        seqMonomer = hoveredAtom ? getSeqMonomerFromHelmAtom(hoveredAtom) : null;
+      } else {
         const seq: string = !gridCell.cell.value ? '' : removeGapsFromHelm(gridCell.cell.value as string);
         const monomerList = parseHelm(seq);
         missedMonomers = findMonomers(monomerList, monomerLib);

package/src/helm-helper.ts

@@ -3,23 +3,26 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {
-  App, Atom, HelmType, GetMonomerFunc, GetMonomerResType, HelmString, HelmMol
+  App, Atom, HelmType, GetMonomerFunc, GetMonomerResType, HelmString, HelmMol,
+  MonomerExplorer, TabDescType, MonomersFuncs, MonomerSetType, HelmAtom, ISeqMonomer, PolymerType, MonomerType, type DojoType
 } from '@datagrok-libraries/bio/src/helm/types';
-
+import {HelmTypes, MonomerTypes, PolymerTypes} from '@datagrok-libraries/bio/src/helm/consts';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
 import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
-import {IHelmHelper, IInputInitOptions} from '@datagrok-libraries/bio/src/helm/helm-helper';
+import {HelmInputBase, IHelmHelper, IHelmInputInitOptions} from '@datagrok-libraries/bio/src/helm/helm-helper';
 import {IHelmWebEditor} from '@datagrok-libraries/bio/src/helm/types';
-import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
+import {IMonomerLib, IMonomerLinkData, IMonomerSetPlaceholder} from '@datagrok-libraries/bio/src/types/index';
+import {HelmTabKeys, IHelmDrawOptions} from '@datagrok-libraries/helm-web-editor/src/types/org-helm';
 
 import {HelmWebEditor} from './helm-web-editor';
 import {OrgHelmModule, ScilModule} from './types';
 import {getWebEditorMonomer} from './utils/get-monomer';
 import {HelmInput} from './widgets/helm-input';
+import {getHoveredMonomerFromEditorMol} from './utils/get-hovered';
 
 import {_package} from './package';
 
-
+declare const dojo: DojoType;
 declare const scil: ScilModule;
 declare const org: OrgHelmModule;
 
@@ -34,9 +37,9 @@ export class HelmHelper implements IHelmHelper {
       throw new Error(`HelmHelper must be a single.`);
   }
 
-  createHelmInput(name?: string, options?: IInputInitOptions<HelmMol>): DG.InputBase<HelmMol> {
+  createHelmInput(name?: string, options?: IHelmInputInitOptions): HelmInputBase {
     try {
-      const monomerLib: IMonomerLib = _package.libHelper.getBioLib();
+      const monomerLib: IMonomerLib = _package.libHelper!.getMonomerLib();
       return HelmInput.create(this, monomerLib, name, options);
     } catch (err: any) {
       const [errMsg, errStack] = errInfo(err);
@@ -45,8 +48,8 @@ export class HelmHelper implements IHelmHelper {
     }
   }
 
-  createHelmWebEditor(host?: HTMLDivElement): IHelmWebEditor {
-    return new HelmWebEditor(host);
+  createHelmWebEditor(host?: HTMLDivElement, drawOptions?: Partial<IHelmDrawOptions>): IHelmWebEditor {
+    return new HelmWebEditor(host, drawOptions);
   }
 
   createWebEditorApp(host: HTMLDivElement, helm: string): App {
@@ -59,7 +62,36 @@ export class HelmHelper implements IHelmHelper {
       mexmonomerstab: true,
       sequenceviewonly: false,
       mexfavoritefirst: true,
-      mexfilter: true
+      mexfilter: true,
+      // currentTabKey: HelmTabKeys.Helm,
+      overrideTabs: (tabs: Partial<TabDescType>[]): Partial<TabDescType>[] => {
+        const res: Partial<TabDescType>[] = [...tabs,
+          {caption: 'Placeholders', tabkey: 'placeholders'},
+        ];
+        return res;
+      },
+      onShowTab: (mex: MonomerExplorer, div: HTMLDivElement, key: string): void => {
+        switch (key) {
+        case 'placeholders': {
+          this.onShowTabPlaceholders(mex, div);
+          break;
+        }
+        case 'placeholders-meta': {
+          this.onShowTabPlaceholdersMeta(mex, div);
+          break;
+        }
+        case 'placeholders-sets': {
+          this.onShowTabPlaceholdersSets(mex, div);
+          break;
+        }
+        }
+        dojo.connect(div, 'onmousedown', function(e: MouseEvent) {
+          mex.select(e);
+        });
+        dojo.connect(div, 'ondblclick', function(e: MouseEvent) {
+          mex.dblclick(e);
+        });
+      }
     });
     const sizes = webEditorApp.calculateSizes();
     webEditorApp.canvas!.resize(sizes.rightwidth - 100, sizes.topheight - 210);
@@ -70,55 +102,215 @@ export class HelmHelper implements IHelmHelper {
     scil.apply(webEditorApp.properties!.parent.style, s);
     webEditorApp.structureview!.resize(sizes.rightwidth, sizes.bottomheight + webEditorApp.toolbarheight);
     webEditorApp.mex!.resize(sizes.topheight - 80);
-    setTimeout(() => {
-      webEditorApp.canvas!.helm!.setSequence(helm, 'HELM');
-    }, 200);
+    webEditorApp.canvas?.setHelm(helm);
     return webEditorApp;
   }
 
+  // -- MonomerExplorer.onShowTab --
+
+  public onShowTabPlaceholders(mex: MonomerExplorer, div: HTMLDivElement): void {
+    const d = scil.Utils.createElement(div, 'div', null, {paddingTop: '5px'});
+
+    /* eslint-disable max-len*/
+    // if (this.options.canvastoolbar == false) {
+    //   const b = scil.Utils.createElement(d, 'div', '<img src=\'' + scil.Utils.imgSrc('helm/arrow.png') + '\' style=\'vertical-align:middle\'>Mouse Pointer', {cursor: 'pointer', padding: '2px', border: 'solid 1px gray', margin: '5px'});
+    //   scil.connect(b, 'onclick', function() {
+    //     mex.plugin.jsd.doCmd('lasso');
+    //   });
+    // }
+    /* eslint-enable max-len*/
+
+    const phTabs: Partial<TabDescType>[] = [];
+    phTabs.push({caption: 'Meta', tabkey: 'placeholders-meta'});
+    phTabs.push({caption: 'Sets', tabkey: 'placeholders-sets'});
+    const placeholdersTabs = new scil.Tabs(d, {
+      onShowTab(td: HTMLTableCellElement) {
+        mex.onShowTab(td);
+      },
+      tabpadding: '5px 2px 1px 2px',
+      tabs: phTabs,
+      marginBottom: `0`,
+    });
+  }
+
+  public onShowTabPlaceholdersMeta(mex: MonomerExplorer, div: HTMLDivElement): void {
+
+  }
+
+  public onShowTabPlaceholdersSets(mex: MonomerExplorer, div: HTMLDivElement): void {
+    const monomerSets = _package.libHelper!.getMonomerSets();
+
+    const phSet: { [polymerType: string]: { [helmType: string]: IMonomerSetPlaceholder[] } } = {};
+    for (const ph of monomerSets.placeholders) {
+      let ofPolymerTypeSet = phSet[ph.polymerType];
+      if (!ofPolymerTypeSet) ofPolymerTypeSet = phSet[ph.polymerType] = {};
+
+      const phHelmType = this.toHelmType(ph.polymerType, ph.monomerType);
+      let phList = ofPolymerTypeSet[phHelmType];
+      if (!phList) phList = ofPolymerTypeSet[phHelmType] = [];
+      phList.push(ph);
+    }
+
+    const fillPlaceholders = (
+      parentDiv: HTMLDivElement, phList: IMonomerSetPlaceholder[], helmType: HelmType
+    ): void => {
+      for (const ph of phList) {
+        const phDiv = mex.createMonomerDiv(parentDiv, ph.symbol, helmType);
+        ui.tooltip.bind(phDiv, () => {
+          const phTooltipDiv = ui.div([
+            ui.table(ph.monomerLinks, (ml: IMonomerLinkData, idx: number) => {
+              return [ml.symbol, ml.source];
+            }, ['Symbol', 'Library source'])
+          ]);
+          return phTooltipDiv;
+        });
+      }
+    };
+
+    const polymerTypes: [string, PolymerType][] = [
+      ['Chem', PolymerTypes.CHEM],
+      ['Peptide', PolymerTypes.PEPTIDE],
+      ['RNA', PolymerTypes.RNA],
+      ['Blob', PolymerTypes.BLOB],
+      ['G', PolymerTypes.G],
+    ];
+    const polymerTypeAcc = ui.accordion();
+    for (const [name, polymerType] of polymerTypes) {
+      if (polymerType in phSet) {
+        polymerTypeAcc.addPane(name, () => {
+          const polymerTypeDiv = ui.div();
+          const ofPolymerTypeSet = phSet[polymerType];
+          if (Object.keys(ofPolymerTypeSet).length == 1) {
+            const [helmType, phList] = Object.entries(ofPolymerTypeSet)[0];
+            fillPlaceholders(polymerTypeDiv, phList, helmType as HelmType);
+          } else {
+            const helmTypeAcc = ui.accordion();
+            for (const [helmTypeName, helmType] of Object.entries(HelmTypes)) {
+              if (helmType in ofPolymerTypeSet) {
+                helmTypeAcc.addPane(helmTypeName, () => {
+                  const helmTypeDiv = ui.div();
+
+                  const phList = ofPolymerTypeSet[helmType];
+                  fillPlaceholders(helmTypeDiv, phList, helmType as HelmType);
+
+                  return helmTypeDiv;
+                });
+              }
+            }
+            polymerTypeDiv.appendChild(helmTypeAcc.root);
+          }
+          return polymerTypeDiv;
+        }, true, undefined, false);
+      }
+    }
+    div.appendChild(polymerTypeAcc.root);
+  }
+
   // -- GetMonomer --
 
-  public originalGetMonomer: GetMonomerFunc | null = null;
+  public originalMonomersFuncs: MonomersFuncs | null = null;
 
-  public revertOriginalGetMonomer(): GetMonomerFunc {
+  public revertOriginalMonomersFuncs(): MonomersFuncs {
     const logPrefix = `Helm: revertOriginalGetMonomer()`;
-    if (this.originalGetMonomer === null)
+    if (this.originalMonomersFuncs === null)
       throw new Error('Unable to revert original getMonomer');
 
     const monomers = org.helm.webeditor.Monomers;
-    const overriddenGetMonomer = monomers.getMonomer = this.originalGetMonomer;
-    this.originalGetMonomer = null;
-    return overriddenGetMonomer;
+    const overriddenMonomersFuncs: MonomersFuncs = {
+      getMonomer: monomers.getMonomer,
+      getMonomerSet: monomers.getMonomerSet,
+    };
+
+    monomers.getMonomer = this.originalMonomersFuncs.getMonomer;
+    monomers.getMonomerSet = this.originalMonomersFuncs.getMonomerSet;
+    this.originalMonomersFuncs = null;
+
+    return overriddenMonomersFuncs;
   }
 
-  public overrideGetMonomer(getMonomer: GetMonomerFunc): GetMonomerFunc {
-    const logPrefix = `Helm: overrideGetMonomer()`;
+  public overrideMonomersFuncs(monomersFuncs: MonomersFuncs): MonomersFuncs {
+    const logPrefix = `Helm: HelmHelper.overrideGetMonomer()`;
 
-    if (this.originalGetMonomer != null)
-      throw new Error('');
+    if (this.originalMonomersFuncs != null)
+      throw new Error(`${logPrefix}, originalGetMonomer is overridden already`);
 
     const monomers = org.helm.webeditor.Monomers;
-    this.originalGetMonomer = monomers.getMonomer.bind(monomers);
-    monomers.getMonomer = getMonomer;
-    return this.originalGetMonomer!;
+    this.originalMonomersFuncs = {
+      getMonomer: monomers.getMonomer.bind(monomers),
+      getMonomerSet: monomers.getMonomerSet.bind(monomers),
+    };
+    monomers.getMonomer = monomersFuncs.getMonomer;
+    monomers.getMonomerSet = monomersFuncs.getMonomerSet;
+    return this.originalMonomersFuncs!;
   }
 
-  public buildGetMonomerFromLib(monomerLib: IMonomerLib): GetMonomerFunc {
+  public buildMonomersFuncsFromLib(monomerLib: IMonomerLib): MonomersFuncs {
     const logPrefix = `Helm: HelmHelper.buildGetMonomerFromLib()`;
-    return (a: Atom<HelmType> | HelmType, name?: string): GetMonomerResType => {
-      const logPrefixInt = `${logPrefix}, org.helm.webeditor.Monomers.getMonomer()`;
-      try {
-        // logger.debug(`${logPrefixInt}, a: ${JSON.stringify(a, helmJsonReplacer)}, name: '${name}'`);
-
-        // Creates monomers in lib
-        const dgWem = getWebEditorMonomer(monomerLib, a, name);
-
-        return dgWem; //dgWem;
-      } catch (err) {
-        const [errMsg, errStack] = errInfo(err);
-        this.logger.error(`${logPrefixInt}, Error: ${errMsg}`, undefined, errStack);
-        throw err;
+
+    return {
+      getMonomer: (a: HelmAtom | HelmType, name?: string): GetMonomerResType => {
+        const logPrefixInt = `${logPrefix}, org.helm.webeditor.Monomers.getMonomer()`;
+        try {
+          // logger.debug(`${logPrefixInt}, a: ${JSON.stringify(a, helmJsonReplacer)}, name: '${name}'`);
+
+          // Creates monomers in lib
+          const dgWem = getWebEditorMonomer(monomerLib, a, name);
+
+          return dgWem; //dgWem;
+        } catch (err) {
+          const [errMsg, errStack] = errInfo(err);
+          this.logger.error(`${logPrefixInt}, Error: ${errMsg}`, undefined, errStack);
+          throw err;
+        }
+      },
+      getMonomerSet: (a: HelmAtom | HelmType | null): MonomerSetType | null => {
+        // if (a == null)
+        //   return null;
+        // const atom = a as HelmAtom;
+        // if (atom.T === 'ATOM')
+        //   a = atom.biotype();
+        // return monomerLib.getMonomerSet(a as HelmType);
+        return this.originalMonomersFuncs!.getMonomerSet(a);
       }
     };
   }
+
+  // helm2type(seqM: ISeqMonomer): HelmType {
+  //   if (seqM.polymerType == "PEPTIDE")
+  //     return org.helm.webeditor.HELM.AA;
+  //   else if (seqM.polymerType == "CHEM")
+  //     return org.helm.webeditor.HELM.CHEM;
+  //   else if (seqM.polymerType == "RNA") {
+  //     if (seqM.mt == "Branch")
+  //       return org.helm.webeditor.HELM.BASE;
+  //     if (seqM.mt == "Backbone") {
+  //       if (seqM.na == "P" || seqM.na == "p")
+  //         return org.helm.webeditor.HELM.LINKER;
+  //       else
+  //         return org.helm.webeditor.HELM.SUGAR;
+  //     }
+  //   }
+  //   throw new Error(`Not supported seq monomer ${JSON.stringify(seqM)}.`);
+  // }
+  private toHelmType(polymerType: PolymerType, monomerType: MonomerType, naturalAnalog?: string) {
+    if (polymerType == PolymerTypes.PEPTIDE)
+      return org.helm.webeditor.HELM.AA;
+    else if (polymerType == PolymerTypes.CHEM)
+      return org.helm.webeditor.HELM.CHEM;
+    else if (polymerType == PolymerTypes.RNA) {
+      if (monomerType == MonomerTypes.BRANCH)
+        return org.helm.webeditor.HELM.BASE;
+      if (monomerType == MonomerTypes.BACKBONE) {
+        if (naturalAnalog == 'P' || naturalAnalog == 'p')
+          return org.helm.webeditor.HELM.LINKER;
+        else
+          return org.helm.webeditor.HELM.SUGAR;
+      }
+    }
+    throw new Error(`Not supported monomer polymerType: '${polymerType}', monomerType: '${monomerType}'.`);
+  }
+
+  public getHoveredAtom(x: number, y: number, mol: HelmMol, height: number): HelmAtom | null {
+    return getHoveredMonomerFromEditorMol(x, y, mol, height);
+  }
 }

package/src/helm-monomer-placer.ts

@@ -73,7 +73,7 @@ export class HelmMonomerPlacer extends CellRendererBackBase<string> {
   // -- Handle events --
 
   private monomerLibOnChanged(_value: any): void {
-    this.reset();
+    this.dirty = true;
     this.invalidateGrid();
   }
 

package/src/helm-web-editor.ts

@@ -6,19 +6,19 @@ import {Unsubscribable} from 'rxjs';
 
 import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
 import {
-  App, Editor, HelmType, IHelmWebEditor
+  App, Editor, HelmType, IHelmWebEditor, HelmEditor, IHelmDrawOptions
 } from '@datagrok-libraries/bio/src/helm/types';
 
-import {JSDraw2HelmModule, OrgHelmModule, ScilModule} from './types';
+import {JSDraw2Module, OrgHelmModule, ScilModule} from './types';
 
 import {_package} from './package';
 
 declare const scil: ScilModule;
-declare const JSDraw2: JSDraw2HelmModule;
+declare const JSDraw2: JSDraw2Module;
 declare const org: OrgHelmModule;
 
 export class HelmWebEditor implements IHelmWebEditor {
-  editor: Editor<HelmType>;
+  editor: HelmEditor;
   host: HTMLDivElement;
 
   w = 200;
@@ -27,10 +27,19 @@ export class HelmWebEditor implements IHelmWebEditor {
 
   constructor(
     host?: HTMLDivElement,
+    drawOptions?: Partial<IHelmDrawOptions>,
     private logger: ILogger = _package.logger
   ) {
     this.host = host ?? ui.div([], {style: {width: `${this.w}px`, height: `${this.h}px`}});
-    this.editor = new JSDraw2.Editor(this.host, {width: this.w, height: this.h, viewonly: true});
+
+    const styleBackup = {width: this.host.style.width, height: this.host.style.height, overflow: this.host.style.overflow};
+    this.editor = new JSDraw2.Editor(this.host, {
+      width: this.w, height: this.h, viewonly: true,
+      drawOptions: drawOptions
+    });
+    this.host.style.width = styleBackup.width;
+    this.host.style.height = styleBackup.height;
+    this.host.style.overflow = styleBackup.overflow;
 
     this.subs = [];
     this.subs.push(ui.onSizeChanged(this.host).subscribe(this.hostOnSizeChanged.bind(this)));
@@ -40,38 +49,19 @@ export class HelmWebEditor implements IHelmWebEditor {
     return `Helm: HelmWebEditor<#>`;
   }
 
-  private hostOnSizeChanged(_: any): void {
-    const logPrefix = `${this.toLog()}.hostOnSizeChanged()`;
-    this.logger.debug(`${logPrefix}`);
-    this.editor.setSize(this.host.clientWidth, this.host.clientHeight);
+  private lastSize: { width: number, height: number } = {width: -1, height: -1};
+
+  private hostOnSizeChanged(value: any): void {
+    const size = {width: value.target.clientWidth, height: value.target.clientHeight};
+    if (this.lastSize.width != size.width || this.lastSize.height != size.height) {
+      const logPrefix = `${this.toLog()}.hostOnSizeChanged()`;
+      this.logger.debug(`${logPrefix}`);
+      this.editor.setSize(this.host.clientWidth, this.host.clientHeight);
+    }
+    this.lastSize = size;
   }
 
   resizeEditor(w: number, h: number) {
     this.editor.setSize(w, h);
   }
 }
-
-export function buildWebEditorApp(view: HTMLDivElement): App {
-  org.helm.webeditor.MolViewer.molscale = 0.8;
-  const app = new org.helm.webeditor.App(view, {
-    showabout: false,
-    mexfontsize: '90%',
-    mexrnapinontab: true,
-    topmargin: 20,
-    mexmonomerstab: true,
-    sequenceviewonly: false,
-    mexfavoritefirst: true,
-    mexfilter: true
-  });
-  const sizes = app.calculateSizes();
-  app.canvas!.resize(sizes.rightwidth - 100, sizes.topheight - 210);
-  let s = {width: sizes.rightwidth - 100 + 'px', height: sizes.bottomheight + 'px'};
-  scil.apply(app.sequence.style, s);
-  scil.apply(app.notation!.style, s);
-  s = {width: sizes.rightwidth + 'px', height: (sizes.bottomheight + app.toolbarheight) + 'px'};
-  scil.apply(app.properties!.parent.style, s);
-  app.structureview!.resize(sizes.rightwidth, sizes.bottomheight + app.toolbarheight);
-  app.mex!.resize(sizes.topheight - 80);
-
-  return app;
-}

package/src/package-utils.ts

@@ -5,6 +5,7 @@ import * as DG from 'datagrok-api/dg';
 import {Unsubscribable} from 'rxjs';
 
 import {delay, timeout} from '@datagrok-libraries/utils/src/test';
+import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
 import {
   DojoType, DojoxType, HweWindow, IOrgHelmWebEditor, Monomers
@@ -13,7 +14,6 @@ import {HelmServiceBase} from '@datagrok-libraries/bio/src/viewers/helm-service'
 import {IMonomerLib} from '@datagrok-libraries/bio/src/types';
 import {LoggerWrapper} from '@datagrok-libraries/bio/src/utils/logger';
 import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
-import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
 import {HelmHelper} from './helm-helper';
 import {HelmService} from './utils/helm-service';
@@ -31,7 +31,7 @@ type DojoConfigWindowType = {
   dojoConfig: {
     packages?: (string | { name: string, location: string })[],
     deps?: string[], callback: Function, has?: any, parseOnLoad?: boolean, async?: boolean | string, locale?: string,
-  };
+  },
 };
 type HelmWindowType = {
   $helmService?: HelmServiceBase,
@@ -51,7 +51,6 @@ export async function initHelmLoadAndPatchDojo(): Promise<void> {
   /** get the text width in pixels */
   const pi = DG.TaskBarProgressIndicator.create('Loading Helm Web Editor ...');
   try {
-    await delay(2000);
     const requireBackup = window.require;
 
     // dojo.window','dojo.io.script','dojo.io.iframe','dojo.dom','dojox.gfx','dojox.gfx.svg','dojox.gfx.shape','dojox.charting'
@@ -107,9 +106,7 @@ export async function initHelmLoadAndPatchDojo(): Promise<void> {
                 'dijit/form/DropDownButton', 'dijit/layout/AccordionContainer', 'dijit/form/ComboButton',
                 'dijit/layout/StackController', 'dijit/layout/StackContainer',
               ],
-              (...args: any[]) => {
-                resolve();
-              });
+              (...args: any[]) => { resolve(); });
           });
         } finally {
           // TODO: Check interference with NGL
@@ -180,9 +177,9 @@ export const helmJsonReplacer = (key: string, value: any): any => {
 };
 
 export class HelmPackage extends DG.Package {
-  public alertOriginal: (s: string) => void;
+  public alertOriginal: ((s: string) => void) | null = null;
   public readonly helmHelper: HelmHelper;
-  public libHelper: IMonomerLibHelper;
+  public libHelper!: IMonomerLibHelper;
 
   constructor(opts: { debug: boolean } = {debug: false}) {
     super();
@@ -234,7 +231,7 @@ export class HelmPackage extends DG.Package {
 
     this.logger.debug(`${logPrefix}, this.getMonomerOriginal stored`);
 
-    this.helmHelper.overrideGetMonomer(this.helmHelper.buildGetMonomerFromLib(this.monomerLib));
+    this.helmHelper.overrideMonomersFuncs(this.helmHelper.buildMonomersFuncsFromLib(this.monomerLib));
 
     // @ts-ignore, intercept with proxy to observe access and usage
     org.helm.webeditor.Monomers = new class {
@@ -281,20 +278,15 @@ export class HelmPackage extends DG.Package {
   public get monomerLib(): IMonomerLib {
     if (!this.libHelper)
       throw new Error(`Helm: _package.libHelper is not initialized yet`);
-    return this.libHelper.getBioLib();
+    return this.libHelper.getMonomerLib();
   }
 
-  private _monomerLibSub: Unsubscribable;
-
-  async initMonomerLibHelper(): Promise<void> {
-    if (!!this.libHelper)
-      throw new Error(`Helm: _package.libHelper is initialized already`);
-
-    this.libHelper = await getMonomerLibHelper();
-  }
+  private _monomerLibSub?: Unsubscribable;
 
   /** Requires both Bio & HELMWebEditor initialized */
-  async initMonomerLib(): Promise<void> {
+  initMonomerLib(libHelper: IMonomerLibHelper): void {
+    this.libHelper = libHelper;
+
     const lib = this.monomerLib;
     rewriteLibraries(lib); // initHelm()
     this._monomerLibSub = lib.onChanged
@@ -306,7 +298,7 @@ export class HelmPackage extends DG.Package {
   monomerLibOnChangedHandler(): void {
     const logPrefix = `Helm: _package.monomerLibOnChangedHandler()`;
     try {
-      const libSummary = this.monomerLib.getSummaryObj();
+      const libSummary = this.monomerLib!.getSummaryObj();
       const isLibEmpty = Object.keys(libSummary).length == 0;
       const libSummaryLog = isLibEmpty ? 'empty' : Object.entries(libSummary)
         .map(([pt, count]) => `${pt}: ${count}`)