@datagrok/helm 2.1.34 → 2.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.34",
+  "version": "2.2.1",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -12,33 +12,33 @@
     "https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js",
     "helm/JSDraw/Scilligence.JSDraw2.Lite.js",
     "helm/JSDraw/Scilligence.JSDraw2.Resources.js",
-    "helm/JSDraw/Pistoia.HELM-uncompressed.js"
+    "helm/JSDraw/Pistoia.HELM.js"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.40.8",
+    "@datagrok-libraries/bio": "^5.41.2",
     "@datagrok-libraries/chem-meta": "^1.2.5",
-    "@datagrok-libraries/utils": "^4.2.1",
+    "@datagrok-libraries/utils": "^4.2.2",
     "cash-dom": "^8.1.1",
-    "datagrok-api": "^1.17.0",
+    "datagrok-api": "^1.17.4",
     "dayjs": "^1.10.6",
     "rxjs": "^6.5.5",
     "wu": "latest"
   },
   "devDependencies": {
+    "@datagrok/bio": "^2.12.18",
+    "@datagrok/chem": "^1.9.2",
     "@types/node": "17.0.45",
     "@types/wu": "latest",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
+    "eslint": "^8.18.0",
+    "eslint-config-google": "^0.14.0",
     "path": "^0.12.7",
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.2.6",
     "typescript": "^4.8.4",
     "webpack": "^5.76.3",
-    "webpack-cli": "^4.9.1",
-    "@typescript-eslint/eslint-plugin": "^5.11.0",
-    "@typescript-eslint/parser": "^5.11.0",
-    "eslint": "^8.18.0",
-    "eslint-config-google": "^0.14.0",
-    "@datagrok/bio": "^2.12.11",
-    "@datagrok/chem": "^1.9.0"
+    "webpack-cli": "^4.9.1"
   },
   "scripts": {
     "link-all": "npm link @datagrok-libraries/chem-meta datagrok-api @datagrok-libraries/utils @datagrok-libraries/bio",

package/src/cell-renderer.ts

@@ -2,16 +2,18 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
+import * as JSDraw2 from 'JSDraw2';
 import wu from 'wu';
 
 import {printLeftOrCentered} from '@datagrok-libraries/bio/src/utils/cell-renderer';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
+import {getGridCellRendererBack} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 
 import {findMonomers, parseHelm, removeGapsFromHelm} from './utils';
-import {IEditor, HelmMonomerPlacer, IEditorMolAtom, ISeqMonomer, Temps} from './helm-monomer-placer';
-import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
+import {HelmMonomerPlacer, ISeqMonomer} from './helm-monomer-placer';
+import {getHoveredMonomerFallback, getHoveredMonomerFromEditorMol} from './utils/get-hovered';
 
-// import {_package} from './package'; // NullError: method not found: '_package' on null
+import {getMonomerLib} from './package';
 
 const enum tempTAGS {
   helmSumMaxLengthWords = 'helm-sum-maxLengthWords',
@@ -20,145 +22,6 @@ const enum tempTAGS {
   helmPlacer = 'bio-helmPlacer',
 }
 
-function getSeqMonomerFromHelm(
-  helmPrefix: string, symbol: string, monomerLib: IMonomerLib
-): ISeqMonomer {
-  let resSeqMonomer: ISeqMonomer | undefined = undefined;
-  for (const polymerType of monomerLib.getPolymerTypes()) {
-    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;
-}
-
-function getSeqMonomerFromHelmAtom(atom: IEditorMolAtom): ISeqMonomer {
-  let polymerType: string | undefined = undefined;
-  // @ts-ignore
-  switch (atom.bio.type) {
-  case 'HELM_BASE':
-  case 'HELM_SUGAR': // r - ribose, d - deoxyribose
-  case 'HELM_LINKER': // p - phosphate
-    polymerType = 'RNA';
-    break;
-  case 'HELM_AA':
-    polymerType = 'PEPTIDE';
-    break;
-  default:
-    polymerType = 'PEPTIDE';
-  }
-  return {symbol: atom.elem, polymerType: polymerType};
-}
-
-function getHoveredMonomerFromEditor(
-  argsX: number, argsY: number, gridCell: DG.GridCell, editor: IEditor
-): 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 < editor.m.atoms.length; ++atomI) {
-      if (!excluded.includes(atomI)) {
-        const aX: number = editor.m.atoms[atomI].p.x;
-        const aY: number = editor.m.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]);
-
-  // for (let atomI = 0; atomI < editor.m.atoms.length; ++atomI) {
-  //   const aX: number = editor.m.atoms[atomI].p.x;
-  //   const aY: number = editor.m.atoms[atomI].p.y;
-  //   const distanceToAtomI: number = Math.sqrt((argsX - aX) ** 2 + (argsY - aY) ** 2);
-  //   if (firstDistance === undefined || firstDistance > distanceToAtomI) {
-  //     secondAtomI = firstAtomI;
-  //     firstAtomI = atomI;
-  //
-  //     secondDistance = firstDistance;
-  //     firstDistance = distanceToAtomI;
-  //   }
-  // }
-
-  if (firstAtomI !== undefined && firstDistance !== undefined) {
-    const firstAtom = editor.m.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;
-}
-
-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], helmPlacer.monomerLib);
-  return hoveredSeqMonomer;
-}
-
-type RendererGridCellTemp = {
-  [Temps.helmMonomerPlacer]: HelmMonomerPlacer;
-}
-
-function getRendererGridCellTemp(gridCell: DG.GridCell
-): [DG.GridColumn | null, DG.Column | null, RendererGridCellTemp] {
-  /** Primarily store/get MonomerPlacer at GridColumn, fallback at (Table) Column for scatter plot tooltip  */
-  let temp: RendererGridCellTemp | null = null;
-
-  let gridCol: DG.GridColumn | null = null;
-  try { gridCol = gridCell.gridColumn; } catch { gridCol = null; }
-  temp = gridCol ? gridCol.temp as RendererGridCellTemp : null;
-
-  const tableCol: DG.Column = gridCell.cell.column;
-  if (!temp) temp = tableCol.temp;
-
-  if (temp === null) throw new Error(`Monomer placer store (GridColumn or Column) not found.`);
-  return [gridCol, tableCol, temp];
-}
-
 /** Helm cell renderer in case of no missed monomer draws with JSDraw2.Editor (webeditor),
  * in case of missed monomers presented, draws linear sequences aligned in width per monomer.
  */
@@ -173,8 +36,9 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
 
   onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
     try {
-      const [_gridCol, tableCol, temp] = getRendererGridCellTemp(gridCell);
-      const helmPlacer = temp[Temps.helmMonomerPlacer];
+      const [_gridCol, tableCol, temp] =
+        getGridCellRendererBack<string, HelmMonomerPlacer>(gridCell);
+      const helmPlacer = temp['rendererBack'];
       /* Can not do anything without tableColumn */
       if (!tableCol) return;
 
@@ -182,11 +46,11 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       const argsX = e.offsetX - gcb.x;
       const argsY = e.offsetY - gcb.y;
 
-      const editor: IEditor | null = helmPlacer.getEditor(gridCell.tableRowIndex!);
+      const editorMol: JSDraw2.IEditorMol | null = helmPlacer.getEditorMol(gridCell.tableRowIndex!);
       let seqMonomer: ISeqMonomer | null;
       let missedMonomers: Set<string> = new Set<string>(); // of .size = 0
-      if (editor)
-        seqMonomer = getHoveredMonomerFromEditor(argsX, argsY, gridCell, editor);
+      if (editorMol)
+        seqMonomer = getHoveredMonomerFromEditorMol(argsX, argsY, gridCell, editorMol);
       else {
         const seq: string = !gridCell.cell.value ? '' : removeGapsFromHelm(gridCell.cell.value as string);
         const monomerList = parseHelm(seq);
@@ -209,7 +73,9 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       if (seqMonomer) {
         if (!missedMonomers.has(seqMonomer.symbol)) {
           const tooltipElements: HTMLElement[] = [ui.div(seqMonomer.symbol)];
-          const monomerDiv = helmPlacer.monomerLib.getTooltip(seqMonomer.polymerType, seqMonomer.symbol);
+          const monomerLib = getMonomerLib();
+          const monomerDiv = monomerLib ? monomerLib.getTooltip(seqMonomer.polymerType, seqMonomer.symbol) :
+            ui.divText('Monomer library is not available.');
           tooltipElements.push(monomerDiv);
           ui.tooltip.show(ui.divV(tooltipElements), e.x + 16, e.y + 16);
         } else {
@@ -244,11 +110,12 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
   ) {
     g.save();
     try {
-      const [gridCol, tableCol, temp] = getRendererGridCellTemp(gridCell);
+      const [gridCol, tableCol, temp] =
+        getGridCellRendererBack<string, HelmMonomerPlacer>(gridCell);
       /* Can not do anything without tableColumn containing temp */
       if (!tableCol) return;
-      let helmPlacer = temp[Temps.helmMonomerPlacer];
-      if (!helmPlacer) helmPlacer = temp[Temps.helmMonomerPlacer] = new HelmMonomerPlacer(gridCol, tableCol);
+      let helmPlacer = temp['rendererBack'];
+      if (!helmPlacer) helmPlacer = temp['rendererBack'] = new HelmMonomerPlacer(gridCol, tableCol);
 
       const grid = gridCell.gridRow !== -1 ? gridCell.grid : undefined;
       const missedColor = 'red';
@@ -273,8 +140,9 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
         }
 
         // Recreate editor to avoid hanging in window.dojox.gfx.svg.Text.prototype.getTextWidth
-        const editor = new JSDraw2.Editor(host, {width: w, height: h, skin: 'w8', viewonly: true}) as IEditor;
-        helmPlacer.setEditor(gridCell.tableRowIndex!, editor);
+        const editor = new JSDraw2.Editor(host,
+          {width: w, height: h, skin: 'w8', viewonly: true});
+        helmPlacer.setEditorMol(gridCell.tableRowIndex!, editor.m);
 
         helmPlacer.skipCell(gridCell.tableRowIndex!);
         return;

package/src/constants.ts

@@ -12,17 +12,6 @@ export const jsonSdfMonomerLibDict = {
   'symbol': 'MonomerCode'
 };
 
-export type WebEditorMonomer = {
-  /** symbol */ id: string,
-  /** name */ n: string,
-  /** natural analog */ na?: string,
-  /** polymer type */type: string,
-  /** monomer type */ mt: string,
-  /** molfile */ m: string,
-  /** substituents */ at: { [group: string]: string },
-  /** number of substituents */ rs: number
-};
-
 export const SMILES = 'smiles';
 export const RGROUPS = 'rgroups';
 export const MONOMER_SYMBOL = 'symbol';

package/src/helm-helper.ts

@@ -2,8 +2,12 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
+import * as scil from 'scil';
+import * as org from 'org';
+
 import {IHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
-import {IHelmWebEditor, IWebEditorApp} from '@datagrok-libraries/bio/src/helm/types';
+import {IHelmWebEditor} from '@datagrok-libraries/bio/src/helm/types';
+
 import {HelmWebEditor} from './helm-web-editor';
 
 type HelmHelperWindowType = Window & {
@@ -16,11 +20,9 @@ export class HelmHelper implements IHelmHelper {
     return new HelmWebEditor();
   }
 
-  createWebEditorApp(host: HTMLDivElement, helm: string): IWebEditorApp {
-    // @ts-ignore
+  createWebEditorApp(host: HTMLDivElement, helm: string): org.helm.IWebEditorApp {
     org.helm.webeditor.MolViewer.molscale = 0.8;
-    // @ts-ignore
-    const webEditorApp = new scil.helm.App(host, {
+    const webEditorApp: org.helm.IWebEditorApp = new org.helm.webeditor.App(host, {
       showabout: false,
       mexfontsize: '90%',
       mexrnapinontab: true,
@@ -29,16 +31,13 @@ export class HelmHelper implements IHelmHelper {
       sequenceviewonly: false,
       mexfavoritefirst: true,
       mexfilter: true
-    }) as IWebEditorApp;
+    });
     const sizes = webEditorApp.calculateSizes();
     webEditorApp.canvas.resize(sizes.rightwidth - 100, sizes.topheight - 210);
-    let s = {width: sizes.rightwidth - 100 + 'px', height: sizes.bottomheight + 'px'};
-    //@ts-ignore
+    let s: Partial<CSSStyleDeclaration> = {width: sizes.rightwidth - 100 + 'px', height: sizes.bottomheight + 'px'};
     scil.apply(webEditorApp.sequence.style, s);
-    //@ts-ignore
     scil.apply(webEditorApp.notation.style, s);
     s = {width: sizes.rightwidth + 'px', height: (sizes.bottomheight + webEditorApp.toolbarheight) + 'px'};
-    //@ts-ignore
     scil.apply(webEditorApp.properties.parent.style, s);
     webEditorApp.structureview.resize(sizes.rightwidth, sizes.bottomheight + webEditorApp.toolbarheight);
     webEditorApp.mex.resize(sizes.topheight - 80);

package/src/helm-monomer-placer.ts

@@ -2,94 +2,43 @@ 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 JSDraw2 from 'JSDraw2';
 import wu from 'wu';
-import {Unsubscribable} from 'rxjs';
 
 import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types/index';
+import {CellRendererBackBase} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
+import {IEditorMol} from '@datagrok-libraries/bio/src/types/helm-web-editor';
 
 import {getParts, parseHelm} from './utils';
 
 import {_package, getMonomerLib} from './package';
 
-export const enum Temps {
-  helmMonomerPlacer = 'bio-helmMonomerPlacer',
-}
-
-export interface IEditor {
-  get m(): IEditorMol;
-
-  redraw(): void;
-}
-
-export interface IEditorMol {
-  get atoms(): IEditorMolAtom[];
-}
-
-export interface IEditorMolAtom {
-  get p(): IEditorPoint;
-
-  get elem(): string;
-}
-
-export interface IEditorPoint {
-  get x(): number;
-
-  get y(): number;
-}
-
 export interface ISeqMonomer {
-  polymerType: string
-  symbol: string,
+  polymerType: org.helm.PolymerType;
+  symbol: string;
 }
 
-export class HelmMonomerPlacer {
-  private readonly grid: DG.Grid | null;
-  public readonly monomerLib: IMonomerLib;
-
+export class HelmMonomerPlacer extends CellRendererBackBase<string> {
   private _allPartsList: (string[] | null)[];
   private _lengthsList: (number[] | null)[];
-  private _editorList: (IEditor | null)[];
+  private _editorMolList: (JSDraw2.IEditorMol | null)[];
 
   public monomerCharWidth: number = 7;
   public leftPadding: number = 5;
   public monomerTextSizeMap: { [p: string]: TextMetrics } = {};
 
-  private subs: Unsubscribable[] = [];
-
   public constructor(
-    public readonly gridCol: DG.GridColumn | null,
-    public readonly col: DG.Column<string>
+    gridCol: DG.GridColumn | null,
+    tableCol: DG.Column<string>
   ) {
-    this.grid = this.gridCol ? this.gridCol.grid : null;
-    this.reset();
-    if (this.grid) {
-      this.subs.push(this.col.dataFrame.onDataChanged.subscribe(() => {
-        try {
-          this.reset();
-        } catch (err: any) {
-          console.error(err);
-        }
-      }));
-      this.subs.push(grok.events.onViewRemoved.subscribe((view: DG.View) => {
-        try {
-          if (this.grid && this.grid.view?.id === view.id) this.destroy();
-        } catch (err: any) {
-          console.error(err);
-        }
-      }));
-    }
-    this.monomerLib = getMonomerLib();
-    this.subs.push(this.monomerLib.onChanged.subscribe(this.monomerLibOnChanged.bind(this)));
+    super(gridCol, tableCol, _package.logger);
   }
 
-  private reset(): void {
-    this._allPartsList = new Array<string[] | null>(this.col.length).fill(null);
-    this._lengthsList = new Array<number[] | null>(this.col.length).fill(null);
-    this._editorList = new Array<IEditor | null>(this.col.length).fill(null);
-  }
-
-  private destroy(): void {
-    for (const sub of this.subs) sub.unsubscribe();
+  protected override reset(): void {
+    this._allPartsList = new Array<string[] | null>(this.tableCol.length).fill(null);
+    this._lengthsList = new Array<number[] | null>(this.tableCol.length).fill(null);
+    this._editorMolList = new Array<JSDraw2.IEditorMol | null>(this.tableCol.length).fill(null);
   }
 
   /** Skips cell for the fallback rendering */
@@ -112,7 +61,7 @@ export class HelmMonomerPlacer {
   private getCellMonomerLengthsForSeq(rowIdx: number): [string[], number[]] {
     let allParts: string[] | null = this._allPartsList![rowIdx];
     if (allParts === null) {
-      const seq = this.col.get(rowIdx);
+      const seq = this.tableCol.get(rowIdx);
       allParts = this._allPartsList![rowIdx] = getAllParts(seq);
     }
 
@@ -128,32 +77,19 @@ export class HelmMonomerPlacer {
     return [allParts, lengths];
   }
 
-  getMonomer(monomer: ISeqMonomer): Monomer | null {
-    let res: Monomer | null = null;
-    if (monomer.polymerType)
-      res = this.monomerLib.getMonomer(monomer.polymerType, monomer.symbol);
-    else {
-      for (const polymerType of this.monomerLib.getPolymerTypes()) {
-        res = this.monomerLib.getMonomer(polymerType, monomer.symbol);
-        if (res) break;
-      }
-    }
-    return res;
-  }
-
   // -- Handle events --
 
   private monomerLibOnChanged(_value: any): void {
     this.reset();
-    if (this.grid) this.grid.invalidate();
+    this.invalidateGrid();
   }
 
-  public setEditor(tableRowIndex: number, editor: IEditor) {
-    this._editorList![tableRowIndex] = editor;
+  public setEditorMol(tableRowIndex: number, editorMol: JSDraw2.IEditorMol) {
+    this._editorMolList![tableRowIndex] = editorMol.clone(false);
   }
 
-  public getEditor(tableRowIndex: number): IEditor | null {
-    return this._editorList![tableRowIndex];
+  public getEditorMol(tableRowIndex: number): JSDraw2.IEditorMol | null {
+    return this._editorMolList![tableRowIndex];
   }
 }
 

package/src/helm-web-editor.ts

@@ -2,11 +2,14 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
+import * as JSDraw2 from 'JSDraw2';
+
 import {IHelmWebEditor} from '@datagrok-libraries/bio/src/helm/types';
 
 export class HelmWebEditor implements IHelmWebEditor {
-  host: any;
-  editor: any;
+  editor: JSDraw2.Editor;
+  host: HTMLDivElement;
+
   w = 200;
   h = 100;
 

package/src/package-test.ts

@@ -1,14 +1,17 @@
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 
+import '@datagrok-libraries/bio/src/types/helm';
 import {runTests, tests, TestContext} from '@datagrok-libraries/utils/src/test';
 
 import './tests/helm-tests.ts';
 import './tests/findMonomers-tests';
+import './tests/helm-service-tests';
 import './tests/renderers-tests';
-import './tests/get-molfiles';
+import './tests/get-molfiles-tests';
 import './tests/properties-widget-tests';
 import './tests/get-all-parts-tests';
+import './tests/get-monomer-tests';
 
 export const _package = new DG.Package();
 export {tests};
@@ -20,6 +23,7 @@ export {tests};
 //input: object testContext {optional: true}
 //output: dataframe result
 export async function test(category: string, test: string, testContext: TestContext): Promise<DG.DataFrame> {
-  const data = await runTests({category, test, testContext});
+  // verbose: true - for tests returning dataframe
+  const data = await runTests({category, test, testContext, verbose: true});
   return DG.DataFrame.fromObjects(data)!;
 }