@datagrok/helm 2.1.34 → 2.2.1

package/src/utils/dummy-monomer.ts

@@ -0,0 +1,184 @@
+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 {Monomer} from '@datagrok-libraries/bio/src/types/index';
+import {
+  HELM_REQUIRED_FIELD as REQ, HELM_OPTIONAL_FIELDS as OPT, HELM_RGROUP_FIELDS as RGP,
+} from '@datagrok-libraries/bio/src/utils/const';
+
+export function getRS(smiles: string) {
+  const newS = smiles.match(/(?<=\[)[^\][]*(?=])/gm);
+  const res: { [name: string]: string } = {};
+  let el = '';
+  let digit;
+  if (!!newS) {
+    for (let i = 0; i < newS.length; i++) {
+      if (newS[i] != null) {
+        if (/\d/.test(newS[i])) {
+          digit = newS[i][newS[i].length - 1];
+          newS[i] = newS[i].replace(/[0-9]/g, '');
+          for (let j = 0; j < newS[i].length; j++) {
+            if (newS[i][j] != ':')
+              el += newS[i][j];
+          }
+          res['R' + digit] = el;
+          el = '';
+        }
+      }
+    }
+  }
+  return res;
+}
+
+export class LibraryWebEditorMonomer implements org.helm.WebEditorMonomer {
+  public get rs(): number { return Object.keys(this.at).length; }
+
+  /* eslint-disable max-params */
+  protected constructor(
+    public readonly id: string,
+    public readonly m: string,
+    public readonly n: string,
+    public readonly na: string | undefined,
+    public readonly type: org.helm.PolymerType,
+    public readonly mt: org.helm.MonomerType,
+    public readonly at: org.helm.WebEditorRGroups,
+  ) /* eslint-enable max-params */ {}
+
+  static fromMonomer(biotype: org.helm.HelmType, monomer: Monomer): org.helm.WebEditorMonomer {
+    let at: org.helm.WebEditorRGroups = {};
+    const smiles = monomer[REQ.SMILES];
+    if (monomer.rgroups.length > 0) {
+      monomer.rgroups.forEach((it) => {
+        at[it[RGP.LABEL]] = it[RGP.CAP_GROUP_NAME];
+      });
+    } else if (smiles) {
+      // Generate R-Groups from SMILES
+      at = getRS(smiles);
+    } else {
+      // broken
+      return new BrokenWebEditorMonomer(biotype, monomer[REQ.SYMBOL]);
+    }
+
+    return new LibraryWebEditorMonomer(
+      monomer[REQ.SYMBOL],
+      monomer[REQ.MOLFILE],
+      monomer[REQ.NAME],
+      monomer[OPT.NATURAL_ANALOG],
+      monomer[REQ.POLYMER_TYPE],
+      monomer[REQ.MONOMER_TYPE],
+      at);
+  }
+}
+
+/* eslint-disable camelcase */
+export abstract class DummyWebEditorMonomer implements org.helm.WebEditorMonomer {
+  //@formatter:off
+  public abstract get backgroundcolor(): string | undefined;
+  public abstract get linecolor(): string | undefined;
+  public abstract get textcolor(): string | undefined;
+  //@formatter:on
+
+  /** R-Group index os single digit only is allowed in Pistoia code */
+  public readonly at: org.helm.WebEditorRGroups = {
+    R1: 'H', R2: 'H', R3: 'H', R4: 'H', R5: 'H', R6: 'H', R7: 'H', R8: 'H', R9: 'H'
+  };
+
+  public get rs(): number { return Object.keys(this.at).length; }
+
+  protected constructor(
+    public readonly biotype: string,
+    /** symbol */ public readonly id: string,
+    /** name */ public readonly n: string | undefined = 'missing',
+    /** molfile */ public readonly m: string | undefined = undefined,
+    /* Pistoia.HELM deletes .type and .mt in Monomers.addOneMonomer() */
+    /** polymer type */ public readonly type: org.helm.PolymerType | undefined = undefined,
+    /** monomer type */ public readonly mt: org.helm.MonomerType | undefined = undefined,
+  ) {
+    if (!this.id)
+      throw new Error('Invalid arg undefined [id].');
+
+    // return new Proxy(this, {
+    //   get: (target: any, prop: string | symbol, _receiver: any) => {
+    //     const logPrefix = `${this.toLog()}.proxy.get( '${String(prop)}' )`;
+    //     switch (prop) {
+    //     case 'id':
+    //     case 'at':
+    //     case 'na':
+    //     case 'nature':
+    //     case 'backgroundcolor':
+    //     case 'linecolor':
+    //     case 'textcolor': {
+    //       // these attributes are known and handled
+    //       return target[prop];
+    //     }
+    //     case 'rs': {
+    //       /* R-Group count (?), 2 is default for monomer "?" */
+    //       throw new Error('Not supported get "rs" attribute.');
+    //     }
+    //     default:
+    //       // Unexpected attribute requested
+    //       _package.logger.warning(`${logPrefix}`);
+    //       return target[prop];
+    //     }
+    //   },
+    //   set: (target, prop, value: any, _receiver: any): boolean => {
+    //     throw new Error(`Not supported set '${String(prop)}' attribute, any.`);
+    //   },
+    //   apply: (target: any, thisArg: any, argArray: any[]): any | undefined => {
+    //     throw new Error(`Not supported call (apply) '${thisArg.toString()}' method, any.`);
+    //   }
+    // });
+  }
+
+  private static objCounter: number = -1;
+  private readonly objId: number = ++DummyWebEditorMonomer.objCounter;
+
+  private readonly className: string = 'DummyWebEditorMonomer';
+
+  protected toLog(): string {
+    return `Helm: ${this.className}<${this.objId}>`;
+  }
+}
+
+export class GapWebEditorMonomer extends DummyWebEditorMonomer {
+  public readonly backgroundcolor: string = '#FFFFFF';
+  public readonly linecolor: string = '#808080';
+  public readonly textcolor: string = '#808080';
+
+  constructor(biotype: string, id: string) {
+    super(biotype, id, 'gap');
+  }
+}
+
+export class AmbiguousWebEditorMonomer extends DummyWebEditorMonomer {
+  public readonly backgroundcolor: string = '#808080';
+  public readonly linecolor: string = '#000000';
+  public readonly textcolor: string = '#000000';
+
+  constructor(biotype: string, id: string) {
+    super(biotype, id, 'ambiguous');
+  }
+}
+
+export class MissingWebEditorMonomer extends DummyWebEditorMonomer {
+  public readonly backgroundcolor: string = '#FF4444';
+  public readonly linecolor: string = '#800000';
+  public readonly textcolor: string = '#FFFFFF';
+
+  constructor(biotype: string, id: string) {
+    super(biotype, id, 'missing');
+  }
+}
+
+export class BrokenWebEditorMonomer extends DummyWebEditorMonomer {
+  public readonly backgroundcolor: string = '#FFFF44';
+  public readonly linecolor: string = '#800000';
+  public readonly textcolor: string = '#000000';
+
+  constructor(biotype: string, id: string) {
+    super(biotype, id, 'broken');
+  }
+}

package/src/utils/get-hovered.ts

@@ -0,0 +1,104 @@
+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 {helmTypeToPolymerType} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
+import {PolymerType} from '@datagrok-libraries/bio/src/types';
+
+import {HelmMonomerPlacer, ISeqMonomer} from '../helm-monomer-placer';
+
+export function getHoveredMonomerFromEditorMol(
+  argsX: number, argsY: number, gridCell: DG.GridCell, mol: JSDraw2.IEditorMol
+): ISeqMonomer | null {
+  let hoveredSeqMonomer: ISeqMonomer | null = null;
+
+  /** @return {[number, number]} [atom, distance] */
+  function getNearest(excluded: (number | undefined)[]): [number | undefined, number | undefined] {
+    let atom: number | undefined = undefined;
+    let distance: number | undefined = undefined;
+    for (let atomI = 0; atomI < mol.atoms.length; ++atomI) {
+      if (!excluded.includes(atomI)) {
+        const aX: number = mol.atoms[atomI].p.x;
+        const aY: number = mol.atoms[atomI].p.y;
+        const distanceToAtomI: number = Math.sqrt((argsX - aX) ** 2 + (argsY - aY) ** 2);
+        if (distance === undefined || distance > distanceToAtomI) {
+          atom = atomI;
+          distance = distanceToAtomI;
+        }
+      }
+    }
+    return [atom, distance];
+  }
+
+  const [firstAtomI, firstDistance] = getNearest([]);
+  const [secondAtomI, secondDistance] = getNearest([firstAtomI]);
+
+  if (firstAtomI !== undefined && firstDistance !== undefined) {
+    const firstAtom = mol.atoms[firstAtomI];
+    const firstSeqMonomer = getSeqMonomerFromHelmAtom(firstAtom);
+    if (secondAtomI !== undefined && secondDistance !== undefined) {
+      if (firstDistance < secondDistance * 0.45)
+        hoveredSeqMonomer = firstSeqMonomer;
+    } else {
+      if (firstDistance < 0.35 * gridCell.bounds.height)
+        hoveredSeqMonomer = firstSeqMonomer;
+    }
+  }
+  return hoveredSeqMonomer;
+}
+
+export function getHoveredMonomerFallback(
+  argsX: number, _argsY: number, gridCell: DG.GridCell, helmPlacer: HelmMonomerPlacer
+): ISeqMonomer | null {
+  let hoveredSeqMonomer: ISeqMonomer | null = null;
+  const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
+  const maxIndex = Object.values(lengths).length - 1;
+  let left = 0;
+  let right = maxIndex;
+  let found = false;
+  let iterCount: number = 0;
+
+  let mid = 0;
+  if (argsX > sumLengths[0]) {
+    while (!found && iterCount < sumLengths.length) {
+      mid = Math.floor((right + left) / 2);
+      if (argsX >= sumLengths[mid] && argsX <= sumLengths[mid + 1]) {
+        left = mid;
+        found = true;
+      } else if (argsX < sumLengths[mid])
+        right = mid - 1;
+      else if (argsX > sumLengths[mid + 1])
+        left = mid + 1;
+
+      if (left == right)
+        found = true;
+
+      iterCount++;
+    }
+  }
+  left = (argsX >= sumLengths[left]) ? left : left - 1; // correct left to between sumLengths
+  if (left >= 0)
+    hoveredSeqMonomer = getSeqMonomerFromHelm(allParts[0], allParts[left]);
+  return hoveredSeqMonomer;
+}
+
+function getSeqMonomerFromHelmAtom(atom: JSDraw2.IEditorMolAtom): ISeqMonomer {
+  const polymerType = helmTypeToPolymerType(atom.bio.type);
+  return {symbol: atom.elem, polymerType: polymerType};
+}
+
+function getSeqMonomerFromHelm(
+  helmPrefix: string, symbol: string
+): ISeqMonomer {
+  let resSeqMonomer: ISeqMonomer | undefined = undefined;
+  const polymerTypeList: PolymerType[] = ['RNA', 'PEPTIDE', 'CHEM', 'BLOB', 'G'];
+  for (const polymerType of polymerTypeList) {
+    if (helmPrefix.startsWith(polymerType))
+      resSeqMonomer = {symbol: symbol, polymerType: polymerType};
+  }
+  if (!resSeqMonomer)
+    throw new Error(`Monomer not found for symbol = '${symbol}' and helmPrefix = '${helmPrefix}'.`);
+  return resSeqMonomer;
+}

package/src/utils/get-monomer.ts

@@ -0,0 +1,111 @@
+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 Atom = JSDraw2.Atom;
+
+import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
+import {HelmType, IMonomerLib, Monomer, WebEditorMonomer} from '@datagrok-libraries/bio/src/types';
+import {helmTypeToPolymerType} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
+import {PolymerTypes, HelmTypes} from '@datagrok-libraries/bio/src/utils/const';
+import {
+  HELM_REQUIRED_FIELD as REQ
+} from '@datagrok-libraries/bio/src/utils/const';
+
+import {AmbiguousWebEditorMonomer, GapWebEditorMonomer, LibraryWebEditorMonomer} from './dummy-monomer';
+
+const monomerRe = /[\w()]+/;
+//** Do not mess with monomer symbol with parenthesis enclosed in square brackets */
+const ambMonomerRe = RegExp(String.raw`\(${monomerRe}(,${monomerRe})+\)`);
+
+export type GetMonomerResType = WebEditorMonomer | null;
+
+export type GetMonomerFunc = (a: Atom<HelmType> | HelmType, name: string | undefined) => GetMonomerResType;
+type GetMonomerOverridingFunc = (
+  a: Atom<HelmType> | HelmType, name: string, monomerLib: IMonomerLib,
+  originalGetMonomer: (a: Atom<HelmType> | HelmType, name: string) => GetMonomerResType) => GetMonomerResType;
+
+export function getMonomerOverrideAndLogAlert(
+  monomerLib: IMonomerLib, getMonomerOverriding: GetMonomerOverridingFunc, trigger: () => void, logger: ILogger,
+): void {
+  const logPrefix = 'Helm: overrideGetMonomerAndAlert()';
+  const monomers = org.helm.webeditor.Monomers;
+  const getMonomerOriginal = monomers.getMonomer.bind(monomers);
+  const alertOriginal = scil.Utils.alert;
+  try {
+    org.helm.webeditor.Monomers.getMonomer = (
+      a: Atom<HelmType> | HelmType, name: string
+    ): GetMonomerResType => {
+      return getMonomerOverriding(a, name, monomerLib, getMonomerOriginal);
+    };
+    // Preventing alert message box for missing monomers with compressed Scilligence.JSDraw2.Lite.js
+    scil.Utils.alert = (s: string): void => {
+      logger.warning(`${logPrefix}, scil.Utils.alert() s = 's'.`);
+    };
+    trigger();
+  } finally {
+    monomers.getMonomer = getMonomerOriginal;
+    scil.Utils.alert = alertOriginal;
+  }
+}
+
+/** Inputs logic */
+export function getMonomerHandleArgs(
+  a: Atom<HelmType> | HelmType, name?: string
+): [/** biotype */ HelmType, /** elem */ string] {
+  let biotype: HelmType;
+  let elem: string;
+  if ((a as Atom<HelmType>).T === 'ATOM') {
+    biotype = (a as Atom<HelmType>).biotype();
+    elem = (a as Atom<HelmType>).elem;
+  } else {
+    biotype = a as HelmType;
+    elem = org.helm.webeditor.IO.trimBracket(name!);
+  }
+  return [biotype, elem];
+}
+
+
+/** Substitutes {@link org.helm.webeditor.Monomers.getMonomer()} */
+export function getWebEditorMonomer(
+  monomerLib: IMonomerLib,
+  a: Atom<HelmType> | HelmType, argName: string,
+): WebEditorMonomer | null {
+  const [biotype, elem] = getMonomerHandleArgs(a, argName);
+  const pt = helmTypeToPolymerType(biotype);
+
+  /** Get or create {@link Monomer} object (in case it is missing in monomer library current config) */
+  let m: Monomer | null = monomerLib.getMonomer(pt, elem);
+  if (m && biotype == HelmTypes.LINKER && m[REQ.RGROUPS].length != 2) {
+    // Web Editor expects null
+    return null;
+  }
+  if (m && biotype == HelmTypes.SUGAR && m[REQ.RGROUPS].length != 3) {
+    // Web Editor expects null
+    return null;
+  }
+  if (!m /* && biotype != HelmTypes.LINKER*/)
+    m = monomerLib.addMissingMonomer(pt, elem);
+
+  /** Get or create {@link org,helm.WebEditorMonomer} */
+  let resWem: WebEditorMonomer | undefined = m.wem;
+  if (!resWem) {
+    if (elem === '*')
+      resWem = m.wem = new GapWebEditorMonomer(biotype, elem);
+    else if (
+      (biotype === 'HELM_NUCLETIDE' && elem === 'N') ||
+      (biotype === 'HELM_AA' && elem === 'X') ||
+      (biotype === 'HELM_CHEM' && false) || // TODO: Ambiguous monomer for CHEM
+      ambMonomerRe.test(elem) // e.g. (A,R,_)
+    )
+      resWem = m.wem = new AmbiguousWebEditorMonomer(biotype, elem);
+
+    if (!resWem)
+      resWem = m.wem = LibraryWebEditorMonomer.fromMonomer(biotype, m);
+  }
+
+  return resWem;
+}

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

@@ -0,0 +1,199 @@
+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 {_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)[];
+
+  constructor(
+    gridCol: DG.GridColumn | null,
+    tableCol: DG.Column<string>,
+  ) {
+    super(gridCol, tableCol, new WrapLogger(_package.logger) /* _package.logger */, true);
+  }
+
+  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 monomerLib = getMonomerLib();
+      const tooltipEl = monomerLib ? monomerLib.getTooltip(seqMonomer.polymerType, seqMonomer.symbol) :
+        ui.divText('Monomer library is not available');
+      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);
+  }
+}