@datagrok/helm 2.1.33 → 2.2.0

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

@@ -0,0 +1,201 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+
+import * as JSDraw2 from 'JSDraw2';
+import wu from 'wu';
+
+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 {ISeqMonomer} from '../helm-monomer-placer';
+import {getHoveredMonomerFromEditorMol} from './get-hovered';
+import {_getHelmService} from '../package-utils';
+import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
+import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
+import {getGridCellRendererBack} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
+import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
+
+import {_package, getMonomerLib} from '../package';
+
+class WrapLogger implements ILogger {
+  constructor(
+    private readonly base: ILogger
+  ) {}
+
+  error(message: any, params?: object | undefined, stackTrace?: string | undefined): void {
+    this.base.error(message, params, stackTrace);
+  }
+
+  warning(message: string, params?: object | undefined): void {
+    this.base.warning(message, params);
+  }
+
+  info(message: string, params?: object | undefined): void {
+    // this.base.info(message, params);
+  }
+
+  debug(message: string, params?: object | undefined): void {
+    // this.base.debug(message, params);
+  }
+}
+
+export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProps, HelmAux> {
+  private _auxList: (HelmAux | null)[];
+  private readonly monomerLib: IMonomerLib;
+
+  constructor(
+    gridCol: DG.GridColumn | null,
+    tableCol: DG.Column<string>,
+  ) {
+    super(gridCol, tableCol, new WrapLogger(_package.logger) /* _package.logger */, true);
+    this.monomerLib = getMonomerLib();
+    this.subs.push(this.monomerLib.onChanged.subscribe(this.monomerLibOnChanged.bind(this)));
+  }
+
+  protected override reset(): void {
+    super.reset();
+    this._auxList = new Array<HelmAux | null>(this.tableCol.length).fill(null);
+    if (this.gridCol && this.gridCol.dart) this.gridCol.grid?.invalidate();
+  }
+
+  protected override getRenderService(): RenderServiceBase<HelmProps, HelmAux> {
+    return _getHelmService();
+  }
+
+  protected override getRenderTaskProps(
+    gridCell: DG.GridCell, backColor: number, width: number, height: number,
+  ): HelmProps {
+    return new HelmProps(gridCell.cell.value, backColor, width, height);
+  }
+
+  protected override storeAux(gridCell: DG.GridCell, aux: HelmAux): void {
+    if (gridCell.tableRowIndex !== null)
+      this._auxList[gridCell.tableRowIndex] = aux;
+  }
+
+  /** Renders cell from image data (cache), returns true to update the cell by service.
+   * @param gridCellBounds {DG.Rect} Grid cell bounds
+   */
+  protected override renderCellImageData(
+    gridCtx: CanvasRenderingContext2D, gridCellBounds: DG.Rect, gridCell: DG.GridCell, cellImageData: ImageData,
+  ): boolean {
+    const dpr = window.devicePixelRatio;
+    if (gridCell.tableRowIndex === null) return false;
+    const aux = this._auxList[gridCell.tableRowIndex];
+    if (!aux) return true;
+
+    // Draw cell image data to scale it with drawImage() while transform()
+    const cellCanvas = ui.canvas(cellImageData.width, cellImageData.height);
+    const cellCtx = cellCanvas.getContext('2d')!;
+    cellCtx.putImageData(cellImageData, 0, 0);
+
+    // Get bbox canvas
+    const bBoxImageData = cellCtx.getImageData(aux.bBox.x, aux.bBox.y, aux.bBox.width, aux.bBox.height);
+    const bBoxCanvas = ui.canvas(aux.bBox.width, aux.bBox.height);
+    const bBoxCtx = bBoxCanvas.getContext('2d')!;
+    bBoxCtx.putImageData(bBoxImageData, 0, 0);
+
+    const fitCanvasWidth = gridCellBounds.width * dpr - 2;
+    const fitCanvasHeight = gridCellBounds.height * dpr - 2;
+
+    const bBoxRatio = Math.max(aux.bBox.width / aux.cBox.width, aux.bBox.height / aux.cBox.height);
+    const bBoxFullWidth = aux.bBox.width / bBoxRatio;
+    const bBoxFullHeight = aux.bBox.height / bBoxRatio;
+
+    const fitScale = Math.min(fitCanvasWidth / bBoxFullWidth, fitCanvasHeight / bBoxFullHeight);
+
+    // Relative shift of bbox center to cbox center
+    const bBoxShiftHR = (aux.bBox.left + aux.bBox.width / 2 - aux.cBox.width / 2) / aux.cBox.width;
+    const bBoxShiftVR = (aux.bBox.top + aux.bBox.height / 2 - aux.cBox.height / 2) / aux.cBox.height;
+
+    const bBoxFitLeft = fitCanvasWidth / 2 - bBoxCanvas.width * fitScale * (1 - 2 * bBoxShiftHR) / 2;
+    const bBoxFitTop = fitCanvasHeight / 2 - bBoxCanvas.height * fitScale * (1 - 2 * bBoxShiftVR) / 2;
+
+    const fitCanvas = ui.canvas(fitCanvasWidth, fitCanvasHeight);
+    const fitCtx = fitCanvas.getContext('2d')!;
+    // fitCtx.fillStyle = '#FFFFA0';
+    // fitCtx.fillRect(0, 0, fitCanvasWidth, fitCanvasHeight);
+    fitCtx.transform(fitScale, 0, 0, fitScale, bBoxFitLeft, bBoxFitTop);
+    fitCtx.drawImage(bBoxCanvas, 0, 0); // draw with scale transform
+
+    const fitCanvasData = fitCtx.getImageData(0, 0, fitCanvasWidth, fitCanvasHeight);
+    this.renderOnGrid(gridCtx, gridCellBounds, gridCell, fitCanvasData);
+    return true; // request rendering
+  }
+
+  onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
+    if (gridCell.tableRowIndex === null) return;
+    const aux = this._auxList[gridCell.tableRowIndex];
+    if (!aux) return;
+
+    const logPrefix = `${this.toLog()}.onMouseMove()`;
+    const dpr = window.devicePixelRatio;
+
+    /** {@link gridCell}.bounds */ const gcb = gridCell.bounds;
+    const argsX = (e.offsetX - gcb.x) * dpr;
+    const argsY = (e.offsetY - gcb.y) * dpr;
+
+    const editorMol: JSDraw2.IEditorMol | null = aux.mol;
+    if (!editorMol) {
+      this.logger.warning(`${logPrefix}, editorMol of the cell not found.`);
+      return; // The gridCell is not rendered yet
+    }
+    const seqMonomer: ISeqMonomer | null = getHoveredMonomerFromEditorMol(argsX, argsY, gridCell, editorMol);
+
+    if (seqMonomer) {
+      const tooltipEl = this.monomerLib.getTooltip(seqMonomer.polymerType, seqMonomer.symbol);
+      ui.tooltip.show(tooltipEl, e.x + 16, e.y + 16);
+    } else {
+      // Tooltip for missing monomers
+      ui.tooltip.hide();
+    }
+  }
+
+  // -- Handle events --
+  private monomerLibOnChanged(_value: any): void {
+    this.reset();
+    this.invalidateGrid();
+  }
+
+  static getOrCreate(gridCell: DG.GridCell): HelmGridCellRendererBack {
+    const [gridCol, tableCol, temp] =
+      getGridCellRendererBack<string, HelmGridCellRendererBack>(gridCell);
+
+    let res: HelmGridCellRendererBack = temp['rendererBack'];
+    if (!res) res = temp['rendererBack'] = new HelmGridCellRendererBack(gridCol, tableCol);
+    return res;
+  }
+}
+
+export class HelmGridCellRenderer extends DG.GridCellRenderer {
+  get name() { return 'helm'; }
+
+  get cellType() { return 'helm'; }
+
+  get defaultWidth(): number | null { return 400; }
+
+  get defaultHeight(): number | null { return 100; }
+
+  override onMouseMove(gridCell: DG.GridCell, e: MouseEvent) {
+    const logPrefix = `Helm: HelmGridCellRenderer.onMouseMove()`;
+    try {
+      HelmGridCellRendererBack.getOrCreate(gridCell).onMouseMove(gridCell, e);
+    } catch (err: any) {
+      const [errMsg, errStack] = errInfo(err);
+      _package.logger.error(errMsg, undefined, errStack);
+    } finally {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
+  override render(
+    g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
+    gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
+  ): void {
+    HelmGridCellRendererBack.getOrCreate(gridCell).render(g, x, y, w, h, gridCell, cellStyle);
+  }
+}

package/src/utils/helm-service.ts

@@ -0,0 +1,157 @@
+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 scil from 'scil';
+import * as JSDraw2 from 'JSDraw2';
+
+import $ from 'cash-dom';
+import {Subject, Unsubscribable} from 'rxjs';
+
+import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
+import {HelmAux, HelmProps, HelmServiceBase} from '@datagrok-libraries/bio/src/viewers/helm-service';
+import {RenderTask} from '@datagrok-libraries/bio/src/utils/cell-renderer-async-base';
+import {svgToImage} from '@datagrok-libraries/utils/src/svg';
+
+import {_package} from '../package';
+import {DummyWebEditorMonomer} from './dummy-monomer';
+
+export class HelmService extends HelmServiceBase {
+  private readonly hostDiv: HTMLDivElement;
+
+  private editor: JSDraw2.Editor | null = null;
+  private image: HTMLImageElement | null = null;
+
+  constructor() {
+    super(_package.logger);
+
+    this.hostDiv = ui.box();
+    // this.hostDiv.style.display = 'none'; // Disables drawing at all
+    this.hostDiv.style.position = 'absolute';
+    this.hostDiv.style.left = '0px';
+    this.hostDiv.style.right = '0px';
+    this.hostDiv.style.width = '0px';
+    this.hostDiv.style.height = '0px';
+    this.hostDiv.style.visibility = 'hidden';
+    document.body.appendChild(this.hostDiv);
+  }
+
+  protected override toLog(): string {
+    return `Helm: ${super.toLog()}`;
+  }
+
+  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;
+
+    if (!this.editor) {
+      this.editor = new JSDraw2.Editor(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);
+    const helmStr = task.props.helm;
+    let hasMissing: boolean = false;
+    if (helmStr) {
+      const monomers = org.helm.webeditor.Monomers;
+      const originalGetMonomer = monomers.getMonomer;
+      const originalAlert = scil.Utils.alert;
+      try {
+        org.helm.webeditor.Monomers.getMonomer = (a: org.helm.IAtom | string, name: string): org.helm.IAtom | null => {
+          let resAtom: any = originalGetMonomer.bind(monomers)(a, name);
+
+          if (!resAtom) {
+            // Input logic
+            if (a == null && name == null)
+              return null;
+
+            let s: string;
+            let biotype: string;
+            if (name == null) {
+              biotype = (a as org.helm.IAtom).biotype();
+              s = (a as org.helm.IAtom).elem;
+            } else {
+              biotype = a as string;
+              s = org.helm.webeditor.IO.trimBracket(name);
+            }
+            resAtom = new DummyWebEditorMonomer(biotype, s);
+            //hasMissing = true;
+          }
+          return resAtom;
+        };
+        // Preventing alert message box for missing monomers with compressed Scilligence.JSDraw2.Lite.js
+        scil.Utils.alert = (s: string): void => {
+          this.logger.warning(`${logPrefix}, scil.Utils.alert() s = 's'.`);
+        };
+        this.logger.debug(`${logPrefix}, editor.setData( '${helmStr}' )`);
+        this.editor.setData(helmStr, 'helm');
+      } finally {
+        monomers.getMonomer = originalGetMonomer;
+        scil.Utils.alert = originalAlert;
+      }
+    }
+    if (!helmStr || hasMissing)
+      this.editor.reset();
+
+    const bBox = (this.editor.div.children[0] as SVGSVGElement).getBBox();
+    const aux: HelmAux = {
+      mol: this.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),
+    };
+    const lET = window.performance.now();
+
+    const svgEl = $(this.hostDiv).find('svg').get(0) as unknown as SVGSVGElement;
+    const dpr = window.devicePixelRatio;
+
+    const rST = window.performance.now();
+    const renderHandlerInt = (): void => {
+      const rET: number = window.performance.now();
+      this.logger.debug(`${logPrefix}.renderHandlerInt(), ` +
+        `key: ${key?.toString()}, ` +
+        `load: ${lET - lST} ms,\n    ` + `renderET: ${rET - rST} ms, ` +
+        `emptyCanvasHash: ${emptyCanvasHash}`);
+      renderHandler(aux);
+    };
+
+    const renderEvent = new Subject();
+    const renderSub = renderEvent.subscribe(() => {
+      const logPrefixInt = `${logPrefix} on renderEvent`;
+      this.logger.debug(`${logPrefixInt}`);
+    });
+    const trigger = (): void => {
+      svgToImage(svgEl, dpr).then((imageEl) => {
+        this.image = imageEl;
+        renderHandlerInt(); // calls onRendered()
+      });
+    };
+    this.logger.debug(`${logPrefix}, end, ` + `key: ${key?.toString()}`);
+    return [renderSub, -1, trigger];
+  }
+
+  protected onRendered(
+    key: keyof any | undefined, task: RenderTask<HelmProps, HelmAux>, emptyCanvasHash: number, aux: HelmAux
+  ): boolean {
+    const dpr = window.devicePixelRatio;
+    const canvas = ui.canvas(task.props.width, task.props.height);
+    try {
+      const g = canvas.getContext('2d');
+      if (!this.image || !g) return false;
+      // g.fillStyle = '#C0C0FF';
+      // g.fillRect(0, 0, canvas.width, canvas.height);
+      g.drawImage(this.image, 0, 0);
+      task.onAfterRender(canvas, aux);
+    } finally {
+      canvas.remove();
+    }
+    return true;
+  }
+
+  async reset(): Promise<void> { }
+}

package/src/utils/index.ts

@@ -1,5 +1,10 @@
 import * as DG from 'datagrok-api/dg';
 
+import * as scil from 'scil';
+import * as org from 'org';
+
+import {_package} from '../package';
+
 import {
   RGROUP_CAP_GROUP_NAME,
   RGROUP_CAP_GROUP_SMILES,
@@ -39,7 +44,6 @@ export function parseHelm(s: string): string[] {
   const sections = split(s, '$');
   s = sections[0];
   const monomers = [];
-  //@ts-ignore
   if (!scil.Utils.isNullOrEmpty(s)) {
     const seqs = split(s, '|');
     for (let i = 0; i < seqs.length; ++i) {
@@ -88,13 +92,11 @@ export function parseHelm(s: string): string[] {
 //  * used in org.helm.webeditor / scil.helm.Monomers / org.helm.webeditor.Monomers .
 //  */
 // export function findMonomers(helmString: string) {
-//   //@ts-ignore
 //   const types: string[] = Object.keys(org.helm.webeditor.monomerTypeList());
 //   const monomerNameList: any[] = [];
 //   const monomerNameI: number = 0;
 //   const weMonomers = org.helm.webeditor.Monomers;
 //   for (let typeI = 0; typeI < types.length; typeI++) {
-//     //@ts-ignore
 //     const ofTypeMonomers: {} = weMonomers.getMonomerSet(types[typeI]) ?? {};
 //     Object.keys(ofTypeMonomers).forEach((key) => {
 //       const monomer: any = ofTypeMonomers[key];
@@ -112,9 +114,9 @@ export function findMonomers(monomerSymbolList: string[]): Set<string> {
   const monomers: any = [];
   const monomerNames: any = [];
   for (let i = 0; i < types.length; i++) {
-    //@ts-ignore
+    // @ts-ignore
     // eslint-disable-next-line new-cap
-    monomers.push(new scil.helm.Monomers.getMonomerSet(types[i]));
+    monomers.push(new org.helm.webeditor.Monomers.getMonomerSet(types[i]));
     Object.keys(monomers[i]).forEach((k) => {
       monomerNames.push(monomers[i][k].id);
     });
@@ -210,7 +212,6 @@ function detachAnnotation(s: string) {
 
 function _detachAppendix(s: string, c: string) {
   let tag = null;
-  //@ts-ignore
   if (scil.Utils.endswith(s, c)) {
     let p = s.length - 1;
     while (p > 0) {
@@ -230,7 +231,6 @@ function _detachAppendix(s: string, c: string) {
 }
 
 function unescape(s: string) {
-  //@ts-ignore
   if (scil.Utils.isNullOrEmpty(s))
     return s;
 

package/webpack.config.js

@@ -2,6 +2,9 @@ const path = require('path');
 const packageName = path.parse(require('./package.json').name).name.toLowerCase().replace(/-/g, '');
 
 module.exports = {
+  cache: {
+    type: 'filesystem',
+  },
   mode: 'development',
   entry: {
     package: './src/package.ts',
@@ -36,6 +39,10 @@ module.exports = {
     'cash-dom': '$',
     'dayjs': 'dayjs',
     'wu': 'wu',
+    'scil': 'scil',
+    'org': 'org',
+    'dojo': 'dojo',
+    'JSDraw2': 'JSDraw2',
   },
   output: {
     filename: '[name].js',