@datagrok/helm 2.5.3 → 2.5.5

package/src/utils/helm-grid-cell-renderer.ts

@@ -8,22 +8,24 @@ import {HelmType, ISeqMonomer, Mol} from '@datagrok-libraries/bio/src/helm/types
 import {
   CellRendererBackAsyncBase, RenderServiceBase
 } from '@datagrok-libraries/bio/src/utils/cell-renderer-async-base';
-import {HelmAux, HelmProps} from '@datagrok-libraries/bio/src/viewers/helm-service';
-import {_getHelmService} from '../package-utils';
+import {HelmAux, HelmProps, HelmServiceBase} from '@datagrok-libraries/bio/src/viewers/helm-service';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
 import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
 import {getGridCellColTemp} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
-import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
+import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {IMonomerLibBase} from '@datagrok-libraries/bio/src/types/index';
 import {execMonomerHoverLinks} from '@datagrok-libraries/bio/src/monomer-works/monomer-hover';
+import {MmcrTemps} from '@datagrok-libraries/bio/src/utils/cell-renderer-consts';
 
 import {getHoveredMonomerFromEditorMol, getSeqMonomerFromHelmAtom} from './get-hovered';
 
-import {_package} from '../package';
+import {_package, getHelmService} from '../package';
 
 export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProps, HelmAux> {
   private _auxList: (HelmAux | null)[];
 
-  private monomerLib: IMonomerLib | null = null;
+  private sysMonomerLib: IMonomerLibBase | null = null;
+  private helmRenderService: HelmServiceBase | null = null;
 
   // eslint-disable-next-line max-len
   private readonly uuid: string = wu.repeat(1).map(() => Math.floor((Math.random() * 36)).toString(36)).take(4).toArray().join('');
@@ -35,23 +37,48 @@ export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProp
     super(gridCol, tableCol, _package.logger, true);
   }
 
+  public async init(): Promise<void> {
+    await Promise.all([
+      (async () => {
+        const libHelper = await getMonomerLibHelper();
+        this.sysMonomerLib = libHelper.getMonomerLib();
+      })(),
+      (async () => {
+        this.helmRenderService = await getHelmService();
+      })(),
+    ]);
+
+    this.subs.push(this.sysMonomerLib!.onChanged.subscribe(() => {
+      this.dirty = true;
+      this.invalidateGrid();
+    }));
+
+    this.dirty = true;
+    this.invalidateGrid();
+  }
+
+  protected getMonomerLib(): IMonomerLibBase {
+    return this.tableCol.temp[MmcrTemps.overriddenLibrary] ?? this.sysMonomerLib;
+  }
+
   protected override reset(): void {
     const logPrefix = `${this.toLog()}.reset()`;
     this.logger.debug(`${logPrefix}, start`);
     super.reset();
     this._auxList = new Array<HelmAux | null>(this.tableCol.length).fill(null);
-    if (this.gridCol && this.gridCol.dart) this.gridCol.grid?.invalidate();
+    this.invalidateGrid();
     this.logger.debug(`${logPrefix}, end`);
   }
 
-  protected override getRenderService(): RenderServiceBase<HelmProps, HelmAux> {
-    return _getHelmService();
+  protected override getRenderService(): RenderServiceBase<HelmProps, HelmAux> | null {
+    return this.helmRenderService;
   }
 
   protected override getRenderTaskProps(
     gridCell: DG.GridCell, backColor: number, width: number, height: number,
   ): HelmProps {
-    return new HelmProps(gridCell.cell.value, backColor, width, height);
+    const monomerLib = this.getMonomerLib();
+    return new HelmProps(gridCell.cell.value, monomerLib, backColor, width, height);
   }
 
   protected override storeAux(gridCell: DG.GridCell, aux: HelmAux): void {
@@ -133,7 +160,7 @@ export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProp
     let seqMonomer: ISeqMonomer | null = null;
     if (hoveredAtom) {
       seqMonomer = getSeqMonomerFromHelmAtom(hoveredAtom);
-      const monomerLib = _package.monomerLib;
+      const monomerLib = this.tableCol.temp[MmcrTemps.overriddenLibrary] ?? _package.monomerLib;
       const tooltipEl = monomerLib ? monomerLib.getTooltip(seqMonomer.biotype, seqMonomer.symbol) :
         ui.divText('Monomer library is not available');
       ui.tooltip.show(tooltipEl, e.x + 16, e.y + 16);
@@ -149,30 +176,23 @@ export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProp
     execMonomerHoverLinks(gridCell, null);
   }
 
-  public override render(g: CanvasRenderingContext2D,
-    x: number, y: number, w: number, h: number,
-    gridCell: DG.GridCell, cellStyle: DG.GridCellStyle) {
-    if (!this.monomerLib) {
-      this.monomerLib = _package.monomerLib;
-      if (this.monomerLib)
-        this.subs.push(this.monomerLib.onChanged.subscribe(this.monomerLibOnChanged.bind(this)));
-    }
-    super.render(g, x, y, w, h, gridCell, cellStyle);
-  }
+  // public override render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
+  //   gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
+  // ) {
+  //   super.render(g, x, y, w, h, gridCell, cellStyle);
+  // }
 
   // -- Handle events --
 
-  private monomerLibOnChanged(_value: any): void {
-    this.dirty = true;
-    this.invalidateGrid();
-  }
-
   static getOrCreate(gridCell: DG.GridCell): HelmGridCellRendererBack {
     const [gridCol, tableCol, temp] =
       getGridCellColTemp<string, HelmGridCellRendererBack>(gridCell);
 
     let res: HelmGridCellRendererBack = temp.rendererBack;
-    if (!res) res = temp.rendererBack = new HelmGridCellRendererBack(gridCol, tableCol);
+    if (!res) {
+      res = temp.rendererBack = new HelmGridCellRendererBack(gridCol, tableCol);
+      res.init().then(() => {});
+    }
     return res;
   }
 }

package/src/utils/helm-service.ts

@@ -4,8 +4,9 @@ import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 import {Subject, Unsubscribable} from 'rxjs';
+import {LRUCache} from 'lru-cache';
 
-import {HelmEditor, HelmType, IHelmDrawOptions} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmEditor, HelmType, IHelmEditorOptions} from '@datagrok-libraries/bio/src/helm/types';
 import {RenderTask} from '@datagrok-libraries/bio/src/utils/cell-renderer-async-base';
 import {HelmAux, HelmProps, HelmServiceBase} from '@datagrok-libraries/bio/src/viewers/helm-service';
 import {svgToImage} from '@datagrok-libraries/utils/src/svg';
@@ -19,7 +20,9 @@ declare const JSDraw2: JSDraw2Module;
 export class HelmService extends HelmServiceBase {
   private readonly hostDiv: HTMLDivElement;
 
-  private editor!: HelmEditor;
+  private readonly editorLruCache: LRUCache<string, HelmEditor>;
+
+  // private editor!: HelmEditor;
   private image: HTMLImageElement | null = null;
 
   constructor() {
@@ -34,27 +37,43 @@ export class HelmService extends HelmServiceBase {
     this.hostDiv.style.height = '0px';
     this.hostDiv.style.visibility = 'hidden';
     document.body.appendChild(this.hostDiv);
+
+    this.editorLruCache = new LRUCache<string, HelmEditor>({max: 20});
   }
 
   protected override toLog(): string {
     return `Helm: ${super.toLog()}`;
   }
 
+  private getEditor(props: HelmProps): HelmEditor {
+    const editorKey = props.monomerLib.source;
+
+    let resEditor: HelmEditor | undefined = this.editorLruCache.get(editorKey);
+    if (!resEditor) {
+      const getMonomerFuncs = _package.helmHelper.buildMonomersFuncsFromLib(props.monomerLib);
+      resEditor = new JSDraw2.Editor<HelmType, IHelmEditorOptions>(this.hostDiv, {
+        width: props.width, height: props.height, skin: 'w8', viewonly: true,
+        drawOptions: {getMonomer: getMonomerFuncs.getMonomer},
+      });
+      this.editorLruCache.set(editorKey, resEditor);
+    }
+    return resEditor;
+  }
+
   protected override async requestRender(
     key: keyof any | undefined, task: RenderTask<HelmProps, HelmAux>, renderHandler: (aux: HelmAux) => void
   ): Promise<[Unsubscribable, number, () => void]> {
     const logPrefix = `${this.toLog()}.requestRender()`;
     this.logger.debug(`${logPrefix}, start, ` + `key: ${key?.toString()}`);
     const emptyCanvasHash: number = 0;
+    const monomerLib = task.props.monomerLib;
+
+    const editor = this.getEditor(task.props);
 
-    if (!this.editor) {
-      this.editor = new JSDraw2.Editor<HelmType, IHelmDrawOptions>(this.hostDiv,
-        {width: task.props.width, height: task.props.height, skin: 'w8', viewonly: true});
-    }
     const lST = window.performance.now();
-    this.editor.options.width = task.props.width;
-    this.editor.options.height = task.props.height;
-    this.editor.resize(task.props.width, task.props.height);
+    editor.options.width = task.props.width;
+    editor.options.height = task.props.height;
+    editor.resize(task.props.width, task.props.height);
     const helmStr = task.props.helm;
     if (helmStr) {
       // getMonomerOverrideAndLogAlert(
@@ -65,14 +84,14 @@ export class HelmService extends HelmServiceBase {
       //     this.editor.setData(helmStr, 'helm');
       //   }, this.logger);
       this.logger.debug(`${logPrefix}, editor.setData( '${helmStr}' )`);
-      this.editor.setData(helmStr, 'helm');
+      editor.setData(helmStr, 'helm');
     }
     if (!helmStr)
-      this.editor.reset();
+      editor.reset();
 
-    const bBox = (this.editor.div.children[0] as SVGSVGElement).getBBox();
+    const bBox = (editor.div.children[0] as SVGSVGElement).getBBox();
     const aux: HelmAux = {
-      mol: this.editor.m.clone(false),
+      mol: editor.m.clone(false),
       bBox: new DG.Rect(bBox.x, bBox.y, bBox.width + 2, bBox.height + 2) /* adjust for clipping right/bottom */,
       cBox: new DG.Rect(0, 0, task.props.width, task.props.height),
     };

package/src/widgets/helm-input.ts

@@ -7,7 +7,7 @@ import {fromEvent, Observable, Unsubscribable} from 'rxjs';
 
 import {IMonomerLibBase} from '@datagrok-libraries/bio/src/types/index';
 import {HelmInputBase, IHelmHelper, IHelmInputInitOptions} from '@datagrok-libraries/bio/src/helm/helm-helper';
-import {HelmAtom, HelmMol, HelmString, IHelmWebEditor} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmAtom, HelmMol, HelmString, IHelmEditorOptions, IHelmWebEditor} from '@datagrok-libraries/bio/src/helm/types';
 
 import {defaultErrorHandler} from '../utils/err-info';
 import {getHoveredMonomerFromEditorMol, getSeqMonomerFromHelmAtom} from '../utils/get-hovered';
@@ -86,7 +86,7 @@ export class HelmInput extends HelmInputBase {
       style: {width: '100%', height: '100%', overflow: 'hidden'},
     });
     this.viewer = this.helmHelper.createHelmWebEditor(this.viewerHost, {
-      monomerNumbering: MonomerNumberingTypes.continuous
+      drawOptions: {monomerNumbering: MonomerNumberingTypes.continuous},
     });
 
     this.editHintDiv = ui.divH([

package/src/widgets/properties-widget.ts

@@ -4,12 +4,14 @@ import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 
-import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
+import {ISeqHandler} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
 import {JSDraw2Module} from '../types';
 import {removeGapsFromHelm} from '../utils';
 
+import {_package} from '../package';
+
 declare const JSDraw2: JSDraw2Module;
 
 export class SeqPropertiesError extends Error {
@@ -18,7 +20,7 @@ export class SeqPropertiesError extends Error {
   }
 }
 
-export function getPropertiesDict(seq: string, sh: SeqHandler): {} {
+export function getPropertiesDict(seq: string, sh: ISeqHandler): {} {
   const host = ui.div([], {style: {width: '0', height: '0'}});
   document.documentElement.appendChild(host);
   try {
@@ -48,7 +50,7 @@ export function getPropertiesDict(seq: string, sh: SeqHandler): {} {
 
 
 export function getPropertiesWidget(value: DG.SemanticValue<string>): DG.Widget {
-  const sh = SeqHandler.forColumn(value.cell.column as DG.Column<string>);
+  const sh = _package.seqHelper.getSeqHandler(value.cell.column as DG.Column<string>);
   try {
     const propDict = getPropertiesDict(value.value, sh);
     return new DG.Widget(