@datagrok/helm 2.2.1 → 2.3.0

package/package.json

@@ -1,31 +1,30 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
   },
   "description": "Provides support for HELM notation (importing, detecting, rendering, conversion).",
   "sources": [
-    "css/helm.css",
-    "https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js",
-    "helm/JSDraw/Scilligence.JSDraw2.Lite.js",
-    "helm/JSDraw/Scilligence.JSDraw2.Resources.js",
-    "helm/JSDraw/Pistoia.HELM.js"
+    "https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js.uncompressed.js",
+    "css/helm.css"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.41.2",
+    "@datagrok-libraries/bio": "^5.42.3",
     "@datagrok-libraries/chem-meta": "^1.2.5",
-    "@datagrok-libraries/utils": "^4.2.2",
+    "@datagrok-libraries/utils": "^4.2.11",
     "cash-dom": "^8.1.1",
-    "datagrok-api": "^1.17.4",
+    "datagrok-api": "^1.18.6",
     "dayjs": "^1.10.6",
     "rxjs": "^6.5.5",
     "wu": "latest"
   },
   "devDependencies": {
-    "@datagrok/bio": "^2.12.18",
+    "@datagrok-libraries/helm-web-editor": "^1.1.5",
+    "@datagrok-libraries/js-draw-lite": "^0.0.3",
+    "@datagrok/bio": "^2.13.2",
     "@datagrok/chem": "^1.9.2",
     "@types/node": "17.0.45",
     "@types/wu": "latest",

package/src/cell-renderer.ts

@@ -2,9 +2,10 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import * as JSDraw2 from 'JSDraw2';
 import wu from 'wu';
 
+import {HelmType, Mol} from '@datagrok-libraries/bio/src/helm/types';
+
 import {printLeftOrCentered} from '@datagrok-libraries/bio/src/utils/cell-renderer';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 import {getGridCellRendererBack} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
@@ -12,9 +13,12 @@ import {getGridCellRendererBack} from '@datagrok-libraries/bio/src/utils/cell-re
 import {findMonomers, parseHelm, removeGapsFromHelm} from './utils';
 import {HelmMonomerPlacer, ISeqMonomer} from './helm-monomer-placer';
 import {getHoveredMonomerFallback, getHoveredMonomerFromEditorMol} from './utils/get-hovered';
+import {JSDraw2HelmModule} from './types';
 
 import {getMonomerLib} from './package';
 
+declare const JSDraw2: JSDraw2HelmModule;
+
 const enum tempTAGS {
   helmSumMaxLengthWords = 'helm-sum-maxLengthWords',
   helmMaxLengthWords = 'helm-maxLengthWords',
@@ -46,7 +50,7 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       const argsX = e.offsetX - gcb.x;
       const argsY = e.offsetY - gcb.y;
 
-      const editorMol: JSDraw2.IEditorMol | null = helmPlacer.getEditorMol(gridCell.tableRowIndex!);
+      const editorMol: Mol<HelmType> | null = helmPlacer.getEditorMol(gridCell.tableRowIndex!);
       let seqMonomer: ISeqMonomer | null;
       let missedMonomers: Set<string> = new Set<string>(); // of .size = 0
       if (editorMol)
@@ -148,37 +152,8 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
         return;
       }
 
-      if (missedMonomers.size > 0) {
-        if (!grid) {
-          const r = window.devicePixelRatio;
-          h = 28;
-          g.canvas.height = h * r;
-          g.canvas.style.height = `${h}px`;
-        }
-
-        w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
-        //g.save();
-        g.beginPath();
-        g.rect(x, y, w, h);
-        g.clip();
-        g.transform(1, 0, 0, 1, x, y);
-        g.font = '12px monospace';
-        g.textBaseline = 'top';
-        const [allParts, _lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
-
-        for (let i = 0; i < allParts.length; ++i) {
-          const part: string = allParts[i];
-          const color: string =
-            part === '.' || part.endsWith('{') || part.startsWith('}') ? frameColor :
-              missedMonomers.has(part) ? missedColor :
-                monomers.has(part) ? monomerColor :
-                  frameColor;
-          g.fillStyle = color;
-          printLeftOrCentered(sumLengths[i], 0, w, h, g, allParts[i], color, 0, true, 1.0,
-            undefined, undefined, undefined, undefined, undefined,
-            undefined, undefined, undefined, helmPlacer.monomerTextSizeMap);
-        }
-      }
+      if (missedMonomers.size > 0)
+        throw new Error('Unexpected missed monomers');
     } finally {
       g.restore();
     }

package/src/helm-helper.ts

@@ -2,27 +2,43 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import * as scil from 'scil';
-import * as org from 'org';
+import {
+  App, Atom, HelmType, GetMonomerFunc, GetMonomerResType
+} from '@datagrok-libraries/bio/src/helm/types';
 
+import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
+import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
 import {IHelmHelper} 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 {HelmWebEditor} from './helm-web-editor';
+import {OrgHelmModule, ScilModule} from './types';
+import {getWebEditorMonomer} from './utils/get-monomer';
 
-type HelmHelperWindowType = Window & {
-  $helmHelper?: HelmHelper,
-}
-declare const window: HelmHelperWindowType;
+import {_package} from './package';
+
+declare const scil: ScilModule;
+declare const org: OrgHelmModule;
 
 export class HelmHelper implements IHelmHelper {
+  private static instanceCount: number = 0;
+
+  constructor(
+    private readonly logger: ILogger
+  ) {
+    // Watchdog for singleton
+    if ((++HelmHelper.instanceCount) > 1)
+      throw new Error(`HelmHelper must be a single.`);
+  }
+
   createHelmWebEditor(): IHelmWebEditor {
     return new HelmWebEditor();
   }
 
-  createWebEditorApp(host: HTMLDivElement, helm: string): org.helm.IWebEditorApp {
+  createWebEditorApp(host: HTMLDivElement, helm: string): App {
     org.helm.webeditor.MolViewer.molscale = 0.8;
-    const webEditorApp: org.helm.IWebEditorApp = new org.helm.webeditor.App(host, {
+    const webEditorApp: App = new org.helm.webeditor.App(host, {
       showabout: false,
       mexfontsize: '90%',
       mexrnapinontab: true,
@@ -47,15 +63,49 @@ export class HelmHelper implements IHelmHelper {
     return webEditorApp;
   }
 
-  // -- Instance singleton --
+  // -- GetMonomer --
+
+  public originalGetMonomer: GetMonomerFunc | null = null;
+
+  public revertOriginalGetMonomer(): GetMonomerFunc {
+    const logPrefix = `Helm: revertOriginalGetMonomer()`;
+    if (this.originalGetMonomer === 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;
+  }
+
+  public overrideGetMonomer(getMonomer: GetMonomerFunc): GetMonomerFunc {
+    const logPrefix = `Helm: overrideGetMonomer()`;
+
+    if (this.originalGetMonomer != null)
+      throw new Error('');
+
+    const monomers = org.helm.webeditor.Monomers;
+    this.originalGetMonomer = monomers.getMonomer.bind(monomers);
+    monomers.getMonomer = getMonomer;
+    return this.originalGetMonomer!;
+  }
+
+  public buildGetMonomerFromLib(monomerLib: IMonomerLib): GetMonomerFunc {
+    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);
 
-  public static async getInstance(): Promise<IHelmHelper> {
-    let res: HelmHelper = window.$helmHelper!;
-    if (!res) {
-      // create & init singleton
-      window.$helmHelper = res = new HelmHelper();
-      // await res.init();
-    }
-    return res;
+        return dgWem; //dgWem;
+      } catch (err) {
+        const [errMsg, errStack] = errInfo(err);
+        this.logger.error(`${logPrefixInt}, Error: ${errMsg}`, undefined, errStack);
+        throw err;
+      }
+    };
   }
 }

package/src/helm-monomer-placer.ts

@@ -2,27 +2,25 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import * as org from 'org';
-import * as JSDraw2 from 'JSDraw2';
 import wu from 'wu';
 
-import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types/index';
+import {HelmType, Mol, PolymerType} from '@datagrok-libraries/bio/src/helm/types';
+
 import {CellRendererBackBase} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
-import {IEditorMol} from '@datagrok-libraries/bio/src/types/helm-web-editor';
 
 import {getParts, parseHelm} from './utils';
 
 import {_package, getMonomerLib} from './package';
 
 export interface ISeqMonomer {
-  polymerType: org.helm.PolymerType;
+  polymerType: PolymerType;
   symbol: string;
 }
 
 export class HelmMonomerPlacer extends CellRendererBackBase<string> {
   private _allPartsList: (string[] | null)[];
   private _lengthsList: (number[] | null)[];
-  private _editorMolList: (JSDraw2.IEditorMol | null)[];
+  private _editorMolList: (Mol<HelmType> | null)[];
 
   public monomerCharWidth: number = 7;
   public leftPadding: number = 5;
@@ -38,7 +36,7 @@ export class HelmMonomerPlacer extends CellRendererBackBase<string> {
   protected override reset(): void {
     this._allPartsList = new Array<string[] | null>(this.tableCol.length).fill(null);
     this._lengthsList = new Array<number[] | null>(this.tableCol.length).fill(null);
-    this._editorMolList = new Array<JSDraw2.IEditorMol | null>(this.tableCol.length).fill(null);
+    this._editorMolList = new Array<Mol<HelmType> | null>(this.tableCol.length).fill(null);
   }
 
   /** Skips cell for the fallback rendering */
@@ -84,11 +82,11 @@ export class HelmMonomerPlacer extends CellRendererBackBase<string> {
     this.invalidateGrid();
   }
 
-  public setEditorMol(tableRowIndex: number, editorMol: JSDraw2.IEditorMol) {
+  public setEditorMol(tableRowIndex: number, editorMol: Mol<HelmType>) {
     this._editorMolList![tableRowIndex] = editorMol.clone(false);
   }
 
-  public getEditorMol(tableRowIndex: number): JSDraw2.IEditorMol | null {
+  public getEditorMol(tableRowIndex: number): Mol<HelmType> | null {
     return this._editorMolList![tableRowIndex];
   }
 }

package/src/helm-web-editor.ts

@@ -2,12 +2,18 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import * as JSDraw2 from 'JSDraw2';
+import {
+  App, Editor, HelmType, IHelmWebEditor
+} from '@datagrok-libraries/bio/src/helm/types';
 
-import {IHelmWebEditor} from '@datagrok-libraries/bio/src/helm/types';
+import {JSDraw2HelmModule, OrgHelmModule, ScilModule} from './types';
+
+declare const scil: ScilModule;
+declare const JSDraw2: JSDraw2HelmModule;
+declare const org: OrgHelmModule;
 
 export class HelmWebEditor implements IHelmWebEditor {
-  editor: JSDraw2.Editor;
+  editor: Editor<HelmType>;
   host: HTMLDivElement;
 
   w = 200;
@@ -23,3 +29,27 @@ export class HelmWebEditor implements IHelmWebEditor {
   }
 }
 
+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-test.ts

@@ -1,10 +1,14 @@
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 
-import '@datagrok-libraries/bio/src/types/helm';
+// Do not import anything from JsDrawLite or HelmWebEditor, only to the main Helm package
+// import {JSDraw2ModuleType} from '@datagrok/js-draw-lite/src/types/jsdraw2';
+// import {HelmType, OrgHelmModuleType} from '@datagrok/helm-web-editor/src/types/org-helm';
+
 import {runTests, tests, TestContext} from '@datagrok-libraries/utils/src/test';
+import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
 
-import './tests/helm-tests.ts';
+import './tests/helm-tests';
 import './tests/findMonomers-tests';
 import './tests/helm-service-tests';
 import './tests/renderers-tests';
@@ -12,11 +16,12 @@ import './tests/get-molfiles-tests';
 import './tests/properties-widget-tests';
 import './tests/get-all-parts-tests';
 import './tests/get-monomer-tests';
+import './tests/parse-helm-tests';
+import './tests/helm-web-editor-tests';
 
 export const _package = new DG.Package();
 export {tests};
 
-
 //name: test
 //input: string category {optional: true}
 //input: string test {optional: true}

package/src/package-utils.ts

@@ -2,19 +2,27 @@ import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
-import * as org from 'org';
-import * as scil from 'scil';
-import * as JSDraw2 from 'JSDraw2';
-import Atom = JSDraw2.Atom;
-
+import {delay, timeout} from '@datagrok-libraries/utils/src/test';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
+import type {
+  DojoType, DojoxType, IOrgHelmWebEditor, Monomers
+} from '@datagrok-libraries/bio/src/helm/types';
 import {HelmServiceBase} from '@datagrok-libraries/bio/src/viewers/helm-service';
-import {IMonomerLib, HelmType} from '@datagrok-libraries/bio/src/types';
-import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
+import {IMonomerLib} from '@datagrok-libraries/bio/src/types';
 
+import {HelmHelper} from './helm-helper';
 import {HelmService} from './utils/helm-service';
-import {GetMonomerFunc, GetMonomerResType, getWebEditorMonomer} from './utils/get-monomer';
+import {OrgHelmModule, ScilModule} from './types';
+
+import {_package} from './package';
+
+declare const dojo: DojoType;
+declare const dojox: DojoxType;
+declare const scil: ScilModule;
+declare const org: OrgHelmModule;
 
+// eslint-disable-next-line
+var dojoConfig = {async: true};
 
 type HelmWindowType = Window & {
   $helmService?: HelmServiceBase,
@@ -27,11 +35,42 @@ export function _getHelmService(): HelmServiceBase {
   return res;
 }
 
-export function initHelmPatchDojo(): void {
+export async function initHelmLoadAndPatchDojo(): Promise<void> {
+  const logPrefix = `Helm: _package.initHelmPatchDojo()`;
   // patch window.dojox.gfx.svg.Text.prototype.getTextWidth hangs
   /** get the text width in pixels */
   // @ts-ignore
+  await timeout(async () => {
+    const dojoTargetList: { module: string, checker: () => boolean }[] = [
+      {module: 'dojo.ready', checker: () => !!dojo?.ready},
+      {module: 'dojo.window', checker: () => !!dojo?.window},
+      {module: 'dojo.io.script', checker: () => !!dojo?.io?.script},
+      // {module: 'dojo.request.iframe', checker: () => !!dojo?.request?.iframe},
+      {module: 'dojo.dom', checker: () => !!dojo?.dom},
+      {module: 'dojox.gfx', checker: () => !!dojox?.gfx},
+      {module: 'dojox.gfx.svg', checker: () => !!dojox?.gfx?.svg},
+      {module: 'dojox.gfx.shape', checker: () => !!dojox?.gfx?.shape},
+    ];
+    for (const dojoTarget of dojoTargetList) {
+      try { dojo.require(dojoTarget.module); } catch (err: any) {
+        _package.logger.error(err.message);
+      }
+    }
+    const getDojoProgress = (): string[] => {
+      return dojoTargetList.filter((dt) => !dt.checker()).map((dt) => dt.module);
+    };
+    /** List of dojo modules not ready yet */ let dojoProgress: string[];
+    while ((dojoProgress = getDojoProgress()).length > 0) {
+      _package.logger.debug(`${logPrefix}, dojo loading ... ${dojoProgress.map((m) => `'${m}'`).join(',')} ...`);
+      await delay(100);
+    }
+    _package.logger.debug(`${logPrefix}, dojo ready all modules`);
+  }, 60000, 'timeout dojox.gfx.svg');
+
+  _package.logger.debug(`${logPrefix}, patch window.dojox.gfx.svg.Text.prototype.getTextWidth`);
+  // @ts-ignore
   window.dojox.gfx.svg.Text.prototype.getTextWidth = function() {
+    // Patched via Datagrok Helm package
     const rawNode = this.rawNode;
     const oldParent = rawNode.parentNode;
     const _measurementNode = rawNode.cloneNode(true);
@@ -57,6 +96,7 @@ export function initHelmPatchDojo(): void {
     oldParent.removeChild(_measurementNode);
     return _width;
   };
+  _package.logger.debug(`${logPrefix}, end`);
 }
 
 export const helmJsonReplacer = (key: string, value: any): any => {
@@ -70,47 +110,34 @@ export const helmJsonReplacer = (key: string, value: any): any => {
 };
 
 export class HelmPackage extends DG.Package {
-  public getMonomerOriginal: GetMonomerFunc;
   public alertOriginal: (s: string) => void;
+  public readonly hh: HelmHelper;
+
+  constructor() {
+    super();
+    this.hh = new HelmHelper(this.logger);
+  }
+
+  public initHelmPatchScilAlert(): void {
+    const logPrefix: string = 'Helm: initHelmPatchScilAlert()';
+    this.alertOriginal = scil.Utils.alert;
+    scil.Utils.alert = (s: string): void => {
+      this.logger.warning(`${logPrefix}, scil.Utils.alert() s: "${s}".`);
+    };
+  }
 
   /** Patches Pistoia Monomers.getMonomer method to utilize DG Bio monomer Lib */
-  public initHelmPatchPistoia(monomerLib: IMonomerLib, logger: ILogger): void {
+  public async initHelmPatchPistoia(monomerLib: IMonomerLib): Promise<void> {
     const logPrefix: string = 'Helm: initHelmPatchPistoia()';
     const monomers = org.helm.webeditor.Monomers;
 
-    this.getMonomerOriginal = monomers.getMonomer.bind(monomers);
     this.logger.debug(`${logPrefix}, this.getMonomerOriginal stored`);
 
-    this.alertOriginal = scil.Utils.alert;
-
-    org.helm.webeditor.Monomers.getMonomer = (
-      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);
-
-        // // Returns null for gap
-        // const oWem = this.getMonomerOriginal(a, name);
-        // if (!oWem)
-        //   logger.warning(`${logPrefixInt}, getMonomerOriginal( a: ${a}, name: ${name}) returns null`);
-        return dgWem; //dgWem;
-      } catch (err) {
-        const [errMsg, errStack] = errInfo(err);
-        logger.error(`${logPrefixInt}, Error: ${errMsg}`, undefined, errStack);
-        throw err;
-      }
-    };
-    scil.Utils.alert = (s: string): void => {
-      logger.warning(`${logPrefix}, scil.Utils.alert() s = 's'.`);
-    };
+    this.hh.overrideGetMonomer(this.hh.buildGetMonomerFromLib(monomerLib));
 
     // @ts-ignore, intercept with proxy to observe access and usage
     org.helm.webeditor.Monomers = new class {
-      constructor(base: org.helm.IMonomers) {
+      constructor(base: Monomers) {
         return new Proxy(base, {
           get(target: any, p: string | symbol, _receiver: any): any {
             return target[p];
@@ -127,11 +154,11 @@ export class HelmPackage extends DG.Package {
           },
         });
       }
-    }(org.helm.webeditor.Monomers) as org.helm.IMonomers;
+    }(org.helm.webeditor.Monomers) as Monomers;
 
     // @ts-ignore, intercept with proxy to observe access and usage
     org.helm.webeditor = new class {
-      constructor(base: org.helm.IOrgHelmWebEditor) {
+      constructor(base: IOrgHelmWebEditor) {
         return new Proxy(base, {
           get(target: any, p: string | symbol, _receiver: any): any {
             return target[p];
@@ -145,6 +172,6 @@ export class HelmPackage extends DG.Package {
           },
         });
       }
-    }(org.helm.webeditor) as org.helm.IOrgHelmWebEditor;
+    }(org.helm.webeditor) as IOrgHelmWebEditor;
   }
 }