@datagrok/helm 2.8.2 → 2.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.8.2",
+  "version": "2.10.0",
   "author": {
     "name": "Maria Dolotova",
     "email": "mdolotova@datagrok.ai"
@@ -16,7 +16,7 @@
     "css/helm.css"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.50.0",
+    "@datagrok-libraries/bio": "^5.50.1",
     "@datagrok-libraries/chem-meta": "^1.2.7",
     "cash-dom": "^8.1.1",
     "@datagrok-libraries/utils": "^4.4.0",
@@ -24,10 +24,10 @@
     "dayjs": "^1.10.6",
     "lru-cache": "^10.4.3",
     "rxjs": "^6.5.5",
-    "wu": "^2.1.0"
+    "wu": "^2.1.0",
+    "@datagrok-libraries/helm-web-editor": "^1.1.14"
   },
   "devDependencies": {
-    "@datagrok-libraries/helm-web-editor": "^1.1.13",
     "@datagrok-libraries/js-draw-lite": "^0.0.10",
     "@datagrok/bio": "^2.18.4",
     "@datagrok/chem": "^1.13.0",

package/src/helm-helper.ts

@@ -9,6 +9,8 @@ import {
   App, Point, HelmType, IHelmBio, HelmAtom, HelmBond, HelmMol, GetMonomerFunc, GetMonomerResType,
   MonomerExplorer, TabDescType, MonomersFuncs, MonomerSetType, ISeqMonomer, PolymerType, MonomerType,
   DojoType, JSDraw2ModuleType, IHelmEditorOptions, IHelmDrawOptions,
+  Editor,
+  IBio,
 } from '@datagrok-libraries/bio/src/helm/types';
 import {HelmTabKeys, HelmTypes, MonomerTypes, PolymerTypes} from '@datagrok-libraries/bio/src/helm/consts';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
@@ -28,6 +30,7 @@ import {getHoveredMonomerFromEditorMol} from './utils/get-hovered';
 /* eslint-enable max-len */
 
 import {_package} from './package';
+import { IEditorOptions } from '@datagrok-libraries/js-draw-lite/src/types/jsdraw2';
 
 declare const dojo: DojoType;
 declare const JSDraw2: JSDraw2ModuleType;
@@ -326,20 +329,48 @@ export class HelmHelper implements IHelmHelper {
     return getHoveredMonomerFromEditorMol(x, y, mol, height);
   }
 
+  //if molfiles are accessed too often, it is better to cache it
+  private _molfilesEditor: Editor<unknown, IBio<unknown>, IEditorOptions> | null = null;
+  private _molfilesEditorHost: HTMLDivElement | null = null;
+  private get molfilesEditor(): Editor<unknown, IBio<unknown>, IEditorOptions> {
+    if (this._molfilesEditorRemovingTimer)
+      clearTimeout(this._molfilesEditorRemovingTimer);
+    if (this._molfilesEditor == null) {
+      this._molfilesEditorHost = ui.div([], {style: {width: '0px', height: '0px', position: 'fixed'}});
+      document.documentElement.appendChild(this._molfilesEditorHost);
+      this._molfilesEditor = new JSDraw2.Editor(this._molfilesEditorHost, {viewonly: true});
+    }
+    this._molfilesEditorRemovingTimer = setTimeout(() => {
+      this.removeMolfilesEditor();
+    }, 1000);
+    return this._molfilesEditor;
+  }
+
+  // after batch conversion, remove the editor to avoid sliding pages
+  private _molfilesEditorRemovingTimer: any = null;
+  private removeMolfilesEditor(): void {
+    if (this._molfilesEditorHost) {
+      $(this._molfilesEditorHost).empty();
+      this._molfilesEditorHost.remove();
+      this._molfilesEditorHost = null;
+      this._molfilesEditor = null;
+    }
+  }
+
   public getMolfiles(helmStrList: string[]): string[] {
-    const host = ui.div([], {style: {width: '0', height: '0'}});
-    document.documentElement.appendChild(host);
     try {
-      const editor = new JSDraw2.Editor(host, {viewonly: true});
+      const editor = this.molfilesEditor;
       const resList = helmStrList.map((helmStr, i) => {
+        //no-draw instruction to avoid time spent on rendering
+        editor.helm && (editor.helm.noDraw = true);
         editor.setHelm(helmStr);
         const mol = editor.getMolfile();
         return mol;
       });
       return resList;
     } finally {
-      $(host).empty();
-      host.remove();
+      // $(host).empty();
+      // host.remove();
     }
   }
 

package/src/utils/helm-service.ts

@@ -40,6 +40,18 @@ export class HelmService extends HelmServiceBase {
     this.editorLruCache = new LRUCache<string, HelmEditor>({max: 20});
   }
 
+  private getNewEditorHost() {
+    const hostDiv = ui.box();
+    hostDiv.style.position = 'absolute';
+    hostDiv.style.left = '0px';
+    hostDiv.style.right = '0px';
+    hostDiv.style.width = '0px';
+    hostDiv.style.height = '0px';
+    hostDiv.style.visibility = 'hidden';
+    this.hostDiv.appendChild(hostDiv);
+    return hostDiv;
+  }
+
   protected override toLog(): string {
     return `Helm: ${super.toLog()}`;
   }
@@ -50,7 +62,8 @@ export class HelmService extends HelmServiceBase {
     let resEditor: HelmEditor | undefined = this.editorLruCache.get(editorKey);
     if (!resEditor) {
       const getMonomerFuncs = _package.helmHelper.buildMonomersFuncsFromLib(props.monomerLib, );
-      resEditor = new JSDraw2.Editor<HelmType, IHelmBio, IHelmEditorOptions>(this.hostDiv, {
+      const hostDiv = this.getNewEditorHost();
+      resEditor = new JSDraw2.Editor<HelmType, IHelmBio, IHelmEditorOptions>(hostDiv, {
         width: props.width, height: props.height, skin: 'w8', viewonly: true,
         drawOptions: {getMonomer: getMonomerFuncs.getMonomer},
       });