@datagrok/helm 2.3.3 → 2.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"

package/src/package-utils.ts

@@ -30,7 +30,7 @@ declare const org: OrgHelmModule;
 type DojoConfigWindowType = {
   dojoConfig: {
     packages?: (string | { name: string, location: string })[],
-    deps?: string[], callback: Function, has?: any, parseOnLoad?: boolean, async?: boolean | string
+    deps?: string[], callback: Function, has?: any, parseOnLoad?: boolean, async?: boolean | string, locale?: string,
   };
 };
 type HelmWindowType = {
@@ -54,97 +54,85 @@ export async function initHelmLoadAndPatchDojo(): Promise<void> {
     await delay(2000);
     const requireBackup = window.require;
 
-    await timeout(async () => {
-
-      await new Promise<void>((resolve, reject) => {
-        window.dojoConfig = {
-          deps: [
-            // 'dojo/dom', 'dojo/window', 'dojo/io/script', 'dojo/io/iframe',
-            // 'dojox/storage/LocalStorageProvider',
-            // 'dijit/layout/ContentPane',
-          ],
-          // packages: [
-          //   'dojo.ready', 'dojo.window', 'dojo.io.script', 'dojo.io.iframe', 'dojo.dom',
-          //   'dojox.gfx', 'dojox.gfx.shape',
-          // ],
-          callback: () => { resolve(); },
-          // has: {
-          //   "dojo-firebug": true,
-          //   "dojo-debug-messages": true,
-          // },
-          parseOnLoad: true,
-          async: false
-        };
-        // Load dojo without package/sources section for the settings dojoConfig to take effect+
-        DG.Utils.loadJsCss([
-          // 'https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js.uncompressed.js',
-          `${_package.webRoot}/vendor/dojo-1.10.10/dojo/dojo.js.uncompressed.js`,
-        ]).then(() => {});
-      });
-
-      const dojoRequire = window.require;
-      const cmp = dojoRequire == requireBackup;
-      try {
+    // dojo.window','dojo.io.script','dojo.io.iframe','dojo.dom','dojox.gfx','dojox.gfx.svg','dojox.gfx.shape','dojox.charting'
+    const dojoTargetList: { name: string, checker: () => boolean }[] = [
+      {name: 'dojo.window', checker: () => !!dojo?.window},
+      {name: 'dojo.ready', checker: () => !!dojo?.ready},
+      {name: 'dojo.io.script', checker: () => !!dojo?.io?.script},
+      {name: 'dojo.io.iframe', checker: () => !!dojo?.io?.iframe},
+      // {name: 'dojo.dom', checker: () => !!dojo?.dom},
+      {name: 'dojox.gfx', checker: () => !!dojox?.gfx},
+      {name: 'dojox.gfx.svg', checker: () => !!dojox?.gfx?.svg},
+      {name: 'dojox.gfx.createSurface', checker: () => !!dojox?.gfx?.createSurface},
+      {name: 'dojox.gfx.shape', checker: () => !!dojox?.gfx?.shape},
+      {name: 'dojox.storage.Provider', checker: () => !!dojox?.storage?.Provider},
+      {name: 'dojox.storage.LocalStorageProvider', checker: () => !!dojox?.storage?.LocalStorageProvider},
+      // {name: 'dojox.charting', checker: () => !!dojox.charting},
+      // {name: 'dojox.charting.themes.Claro', checker: () => !!dojox.charting?.themes?.Claro},
+      // {name: 'dojox.charting.themes.Wetland', checker: () => !!dojox.charting?.themes?.Wetland},
+      // {name: 'dojox.charting.plot2d.Base', checker: () => !!dojox.charting?.plot2d?.Base},
+      // {name: 'dojox.charting.Series', checker: () => !!dojox?.charting?.Series},
+      // {name: 'dojox.charting.Chart2D', checker: () => !!dojox?.charting?.Chart2D},
+    ];
+    /** Gets list ofd modules not ready yet */
+    const getDojoNotReadyList = (): string[] => {
+      return dojoTargetList.filter((dt) => !dt.checker()).map((dt) => dt.name);
+    };
+
+    try {
+      await timeout(async () => {
+
         await new Promise<void>((resolve, reject) => {
-          dojoRequire(['dojo/window', 'dojo/dom', 'dojo/io/script', 'dojo/io/iframe',
-              'dojox/gfx', 'dojox/gfx/svg', 'dojox/gfx/shape',
-              'dijit/_base', 'dijit/Tooltip', 'dijit/form/_FormValueWidget',
-              'dijit/form/DropDownButton', 'dijit/layout/AccordionContainer', 'dijit/form/ComboButton',
-              'dijit/layout/StackController', 'dijit/layout/StackContainer',
-            ],
-            (...args: any[]) => {
-              resolve();
-            });
+          window.dojoConfig = {
+            callback: () => { resolve(); },
+            parseOnLoad: true,
+            async: false,
+            locale: 'en-us', // to limit dijit/nls file set
+          };
+          // Load dojo without package/sources section for the settings dojoConfig to take effect
+          DG.Utils.loadJsCss([
+            // 'https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js.uncompressed.js',
+            `${_package.webRoot}/vendor/dojo-1.10.10/dojo/dojo.js.uncompressed.js`,
+          ]).then(() => {});
         });
-      } finally {
-        window.require = function(...args: any[]) {
-          _package.logger.debug(`${logPrefix}, window.require( ${JSON.stringify(args)} )`);
-          dojoRequire(...args);
-        };
-      }
 
-      //await delay(50);
-
-      // dojo.window','dojo.io.script','dojo.io.iframe','dojo.dom','dojox.gfx','dojox.gfx.svg','dojox.gfx.shape','dojox.charting'
-      const dojoTargetList: { name: string, module: string | null, checker: () => boolean }[] = [
-        {name: 'dojo.window', module: null, checker: () => !!dojo?.window},
-        {name: 'dojo.ready', module: null, checker: () => !!dojo?.ready},
-        {name: 'dojo.io.script', module: null, checker: () => !!dojo?.io?.script},
-        {name: 'dojo.io.iframe', module: null, checker: () => !!dojo?.io?.iframe},
-        // //{name: 'dojo.request.script', module: 'dojo.request.script', checker: () => !!dojo?.request?.iframe},
-        // {name: 'dojo.dom', module: 'dojo.dom', checker: () => !!dojo?.dom},
-        // {name: 'dojox.gfx', module: 'dojox.gfx', checker: () => !!dojox?.gfx},
-        // {name: 'dojox.gfx.svg', module: 'dojox.gfx.svg', checker: () => !!dojox?.gfx?.svg},
-        {name: 'dojox.gfx.createSurface', module: null, checker: () => !!dojox?.gfx?.createSurface},
-        // {name: 'dojox.gfx.shape', module: 'dojox.gfx.shape', checker: () => !!dojox?.gfx?.shape},
-        // {name: 'dojox.charting.themes.Claro', module: 'dojox.charting.themes.Claro', checker: () => !!dojox.charting?.themes?.Claro},
-        // {name: 'dojox.charting.themes.Wetland', module: 'dojox.charting.themes.Wetland', checker: () => !!dojox.charting?.themes?.Wetland},
-        // {name: 'dojox.charting.plot2d.Base', module: 'dojox.charting.plot2d.Base', checker: () => !!dojox.charting?.plot2d?.Base},
-        // {name: 'dojox.charting.Series', module: 'dojox.charting.Series', checker: () => !!dojox?.charting?.Series},
-        // {name: 'dojox.charting.Chart2D', module: 'dojox.charting.Chart2D', checker: () => !!dojox?.charting?.Chart2D},
-        // //{module: 'dojox.charting', checker: () => !!dojox.charting},
-        // // {module: 'dojox.storage.Provider', checker: () => !!dojox?.storage?.Provider},
-        // // {module: 'dojox.storage.LocalStorageProvider', checker: () => !!dojox?.storage?.LocalStorageProvider},
-      ];
-      for (const dojoTarget of dojoTargetList) {
-        try { if (dojoTarget.module) dojo.require(dojoTarget.module); } catch (err: any) {
-          _package.logger.error(err.message);
+        const dojoRequire = window.require;
+        const cmp = dojoRequire == requireBackup;
+        try {
+          await new Promise<void>((resolve, reject) => {
+            dojoRequire(['dojo/window', 'dojo/dom', 'dojo/io/script', 'dojo/io/iframe',
+                'dojox/gfx', 'dojox/gfx/svg', 'dojox/gfx/shape',
+                'dojox/storage/Provider', 'dojox/storage/LocalStorageProvider',
+                'dijit/_base', 'dijit/Tooltip', 'dijit/form/_FormValueWidget',
+                'dijit/form/DropDownButton', 'dijit/layout/AccordionContainer', 'dijit/form/ComboButton',
+                'dijit/layout/StackController', 'dijit/layout/StackContainer',
+              ],
+              (...args: any[]) => {
+                resolve();
+              });
+          });
+        } finally {
+          // TODO: Check interference with NGL
+          window.require = function(...args: any[]) {
+            _package.logger.debug(`${logPrefix}, window.require( ${JSON.stringify(args)} )`);
+            dojoRequire(...args);
+          };
         }
-      }
-      /** Gets list ofd modules not ready yet */
-      const getDojoNotReadyList = (): string[] => {
-        return dojoTargetList.filter((dt) => !dt.checker()).map((dt) => dt.name);
-      };
-      /** List of dojo modules not ready yet */ let dojoNotReadyList: string[];
-      while ((dojoNotReadyList = getDojoNotReadyList()).length > 0) {
-        const dojoProgress = dojoTargetList.length - dojoNotReadyList.length;
-        pi.update(Math.round(100 * dojoProgress / dojoTargetList.length),
-          `Loading Helm Web Editor ${dojoProgress}/${dojoTargetList.length}`);
-        _package.logger.debug(`${logPrefix}, dojo loading ... ${dojoNotReadyList.map((m) => `'${m}'`).join(',')} ...`);
-        await delay(100);
-      }
-      _package.logger.debug(`${logPrefix}, dojo ready all modules`);
-    }, 60000, 'timeout dojox.gfx.svg');
+
+        /** List of dojo modules not ready yet */ let dojoNotReadyList: string[];
+        while ((dojoNotReadyList = getDojoNotReadyList()).length > 0) {
+          const dojoProgress = dojoTargetList.length - dojoNotReadyList.length;
+          pi.update(Math.round(100 * dojoProgress / dojoTargetList.length),
+            `Loading Helm Web Editor ${dojoProgress}/${dojoTargetList.length}`);
+          _package.logger.debug(`${logPrefix}, dojo loading ... ${dojoNotReadyList.map((m) => `'${m}'`).join(',')} ...`);
+          await delay(100);
+        }
+        _package.logger.debug(`${logPrefix}, dojo ready all modules`);
+      }, 60000, 'timeout dojox.gfx.svg');
+    } catch (err: any) {
+      const dojoNotReadyList = getDojoNotReadyList();
+      _package.logger.error(`${logPrefix}, dojo not ready ${dojoNotReadyList.map((m) => `'${m}'`).join(',')} ...`);
+    }
 
     _package.logger.debug(`${logPrefix}, patch window.dojox.gfx.svg.Text.prototype.getTextWidth`);
     // @ts-ignore
@@ -204,13 +192,9 @@ export class HelmPackage extends DG.Package {
     this.helmHelper = new HelmHelper(this.logger);
   }
 
-  setLibHelper(libHelper: IMonomerLibHelper) {
-    this.libHelper = libHelper;
-  }
-
   // -- Init --
   /** Loads Dojo and HelmWebEditor, waits for init, patches */
-  async initHelm(): Promise<void> {
+  async initHELMWebEditor(): Promise<void> {
     const logPrefix: string = 'Helm: Package.initDojo()';
 
     _package.logger.debug(`${logPrefix}, dependence loading …`);
@@ -235,12 +219,6 @@ export class HelmPackage extends DG.Package {
     _package.logger.debug(`${logPrefix}, dependence loaded, ET: ${(t2 - t1)} ms`);
   }
 
-  async getMonomerLib(): Promise<IMonomerLib> {
-    const libHelper = await getMonomerLibHelper();
-    _package.setLibHelper(libHelper);
-    return libHelper.getBioLib();
-  }
-
   public initHelmPatchScilAlert(): void {
     const logPrefix: string = 'Helm: initHelmPatchScilAlert()';
     this.alertOriginal = scil.Utils.alert;
@@ -300,21 +278,26 @@ export class HelmPackage extends DG.Package {
 
   // -- MonomerLib --
 
-  private _monomerLib: IMonomerLib;
   public get monomerLib(): IMonomerLib {
-    if (!this._monomerLib)
-      throw new Error(`Helm: _package._monomerLib is not initialized yet`);
-    return this._monomerLib;
+    if (!this.libHelper)
+      throw new Error(`Helm: _package.libHelper is not initialized yet`);
+    return this.libHelper.getBioLib();
   }
 
   private _monomerLibSub: Unsubscribable;
 
-  initMonomerLib(lib: IMonomerLib) {
-    if (!!this._monomerLib)
-      throw new Error(`Helm: _package._monomerLib is initialized already`);
-    this._monomerLib = lib;
-    rewriteLibraries(this._monomerLib); // initHelm()
-    this._monomerLibSub = this._monomerLib.onChanged
+  async initMonomerLibHelper(): Promise<void> {
+    if (!!this.libHelper)
+      throw new Error(`Helm: _package.libHelper is initialized already`);
+
+    this.libHelper = await getMonomerLibHelper();
+  }
+
+  /** Requires both Bio & HELMWebEditor initialized */
+  async initMonomerLib(): Promise<void> {
+    const lib = this.monomerLib;
+    rewriteLibraries(lib); // initHelm()
+    this._monomerLibSub = lib.onChanged
       .subscribe(this.monomerLibOnChangedHandler.bind(this));
 
     this.initHelmPatchPistoia();
@@ -323,7 +306,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}`)
@@ -337,7 +320,7 @@ export class HelmPackage extends DG.Package {
       grok.shell.info(libMsg);
 
       _package.logger.debug(`${logPrefix}, org,helm.webeditor.Monomers updating ...`);
-      rewriteLibraries(this._monomerLib); // initHelm() monomerLib.onChanged()
+      rewriteLibraries(this.monomerLib); // initHelm() monomerLib.onChanged()
       _package.logger.debug(`${logPrefix}, end, org.helm.webeditor.Monomers completed`);
     } catch (err: any) {
       const errMsg = errorToConsole(err);

package/src/package.ts

@@ -28,7 +28,7 @@ import {getRS} from './utils/get-monomer-dummy';
 import {buildWebEditorApp} from './helm-web-editor';
 import {JSDraw2HelmModule, OrgHelmModule, ScilModule} from './types';
 
-export const _package = new HelmPackage({debug: true}/**/);
+export const _package = new HelmPackage(/*{debug: true}/**/);
 
 let monomerLib: IMonomerLib | null = null;
 
@@ -51,13 +51,14 @@ export async function initHelm(): Promise<void> {
   _package.logger.debug(`${logPrefix}, start`);
 
   try {
-    const [_, lib]: [void, IMonomerLib] = await Promise.all([
-      _package.initHelm(),
-      _package.getMonomerLib(),
-    ]);
+    await Promise.all([
+      _package.initHELMWebEditor(),
+      _package.initMonomerLibHelper(),
+    ]).then(() => {
+      _package.initMonomerLib();
+    });
 
     _package.logger.debug(`${logPrefix}, then(), lib loaded`);
-    _package.initMonomerLib(lib);
   } catch (err: any) {
     const [errMsg, errStack] = errInfo(err);
     // const errMsg: string = err instanceof Error ? err.message : !!err ? err.toString() : 'Exception \'undefined\'';

package/src/tests/helm-input-tests.ts

@@ -4,7 +4,7 @@ import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 
-import {after, before, category, delay, expect, test, timeout} from '@datagrok-libraries/utils/src/test';
+import {after, before, category, delay, expect, test, testEvent} from '@datagrok-libraries/utils/src/test';
 import {IHelmHelper, getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
 import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 import {
@@ -61,26 +61,37 @@ async function _testTooltipOnHelmInput(): Promise<void> {
   const helmValue = 'PEPTIDE1{[meY].A.G.T}$$$$';
   const helmInput = (await ui.input.helmAsync('Macromolecule')) as HelmInput;
   helmInput.stringValue = helmValue;
+  // Show dialog to the right of the TestManager test tree
+  // to prevent interfering mousemove position for tooltip.
+  const tmBcr = grok.shell.v ? grok.shell.v.root.getBoundingClientRect() : null;
   const dlg = ui.dialog('Helm Input Test')
     .add(helmInput)
-    .show();
-  const dialogInputEl = $(dlg.root)
-    .find('div.d4-dialog-contents > div.ui-input-helm > div.ui-input-editor').get(0);
-  expect(helmInput.getInput(), dialogInputEl);
+    .show({...(tmBcr ? {x: tmBcr.right + 20, y: tmBcr.top + 20} : {})});
+  try {
+    const dialogInputEl = $(dlg.root)
+      .find('div.d4-dialog-contents > div.ui-input-helm > div.ui-input-editor').get(0);
+    expect(helmInput.getInput(), dialogInputEl);
 
-  const mon = {i: 0, elem: 'meY'};
-  const a = helmInput.value.atoms[mon.i];
-  const iEl = helmInput.getInput();
-  const iBcr = iEl.getBoundingClientRect();
-  const ev = new MouseEvent('mousemove', {
-    cancelable: true, bubbles: true, view: window, button: 0,
-    clientX: iBcr.left + a.p.x, clientY: iBcr.top + a.p.y
-  });
-  iEl.dispatchEvent(ev);
-  await delay(200);
-
-  const tooltipEl = $(document).find('body > div.d4-tooltip').get(0) as HTMLElement;
-  const elemDiv = $(tooltipEl).find('div > div.d4-flex-row.ui-div > div:nth-child(1)').get(0);
-  expect(tooltipEl.style.display != 'none', true);
-  expect(elemDiv?.innerText, mon.elem);
+    const mon = {i: 0, elem: 'meY'};
+    const a = helmInput.value.atoms[mon.i];
+    const iEl = helmInput.getInput();
+    const iBcr = iEl.getBoundingClientRect();
+    const ev = new MouseEvent('mousemove', {
+      cancelable: true, bubbles: true, view: window, button: 0,
+      clientX: iBcr.left + a.p.x, clientY: iBcr.top + a.p.y
+    });
+    await testEvent(ui.tooltip.onTooltipShown, () => { /* tooltip shown*/ },
+      () => {
+        iEl.dispatchEvent(ev);
+        // do not await after event dispatch before test tooltip content
+        // await leads to tooltip changed (with TestManager tree node tooltip)
+      }, 100, 'timeout await ui.tooltip.onTooltipShown');
+    const tooltipEl = $(document).find('body > div.d4-tooltip').get(0) as HTMLElement;
+    const elemDiv = $(tooltipEl).find('div > div.d4-flex-row.ui-div > div:nth-child(1)').get(0);
+    expect(tooltipEl.style.display != 'none', true);
+    expect(elemDiv?.innerText, mon.elem);
+  } finally {
+    await delay(50);
+    ui.tooltip.hide();
+  }
 }