@datagrok/helm 2.1.18 → 2.1.21

package/files/tests/sample_HELM-types.csv

@@ -0,0 +1,5 @@
+Helm,Protein,RNA,DNA
+PEPTIDE1{I.H.A.N.T.Thr_PO3H2.Aca.D-Tyr_Et}$$$$,IHANTK,ACGU,ACGT
+RNA1{r(A)p.r(C)p.r(G)p.r(U)p}$$$$,KHAQTRT,CGUG,CGGT
+RNA1{d(A)p.d(C)p.d(G)p.d(U)p}$$$$,IHANTKT,CCGU,ACCT
+RNA1{d(A)p.d(C)p.d(G)p.d(U)p}|PEPTIDE1{I.H.A.N.T.Thr_PO3H2}$$$$,PQRHLF,UAAA,CTAA

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.18",
+  "version": "2.1.21",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -15,15 +15,16 @@
     "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.38.0",
+    "@datagrok-libraries/bio": "^5.39.6",
     "@datagrok-libraries/utils": "^4.0.17",
     "cash-dom": "^8.1.1",
     "datagrok-api": "^1.10.2",
     "dayjs": "^1.10.6",
-    "rxjs": "^6.5.5"
+    "rxjs": "^6.5.5",
+    "wu": "latest"
   },
   "devDependencies": {
-    "@datagrok/bio": "^2.1.12",
+    "@types/wu": "latest",
     "path": "^0.12.7",
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.2.6",
@@ -33,10 +34,11 @@
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "eslint": "^8.18.0",
-    "eslint-config-google": "^0.14.0"
+    "eslint-config-google": "^0.14.0",
+    "@datagrok/bio": "^2.11.8"
   },
   "scripts": {
-    "link-all": "npm link datagrok-api  @datagrok-libraries/utils @datagrok-libraries/bio",
+    "link-all": "npm link datagrok-api @datagrok-libraries/utils @datagrok-libraries/bio",
     "debug-helm": "webpack && grok publish",
     "release-helm": "webpack && grok publish --release",
     "build-helm": "webpack",
@@ -51,7 +53,8 @@
     "lint-fix": "eslint \"./src/**/*.ts\" --fix",
     "test": "grok test",
     "test-dev": "grok test --host dev",
-    "test-local": "grok test --host localhost"
+    "test-local": "grok test --host localhost",
+    "build-all": "npm --prefix ./../../js-api run build && npm --prefix ./../../libraries/utils run build && npm --prefix ./../../libraries/bio run build && npm run build"
   },
   "canEdit": [
     "Developers"

package/src/cell-renderer.ts

@@ -8,7 +8,10 @@ import {printLeftOrCentered} from '@datagrok-libraries/bio/src/utils/cell-render
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
 import {findMonomers, parseHelm} from './utils';
-import {HelmMonomerPlacer} from './helm-monomer-placer';
+import {IEditor, HelmMonomerPlacer, IEditorMolAtom, ISeqMonomer} from './helm-monomer-placer';
+import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
+
+// import {_package} from './package'; // NullError: method not found: '_package' on null
 
 const enum tempTAGS {
   helmSumMaxLengthWords = 'helm-sum-maxLengthWords',
@@ -22,7 +25,154 @@ const helmGapStartRe = /\{(\*\.)+/g;
 const helmGapIntRe = /\.(\*\.)+/g;
 const helmGapEndRe = /(\.\*)+\}/g;
 
-type TempType = { [tagName: string]: any };
+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)
+    resSeqMonomer = {symbol: symbol};
+  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;
+}
+
+// patch window.dojox.gfx.svg.Text.prototype.getTextWidth hangs
+/** get the text width in pixels */
+// @ts-ignore
+window.dojox.gfx.svg.Text.prototype.getTextWidth = function() {
+  const rawNode = this.rawNode;
+  const oldParent = rawNode.parentNode;
+  const _measurementNode = rawNode.cloneNode(true);
+  _measurementNode.style.visibility = 'hidden';
+
+  // solution to the "orphan issue" in FF
+  let _width = 0;
+  const _text = _measurementNode.firstChild.nodeValue;
+  oldParent.appendChild(_measurementNode);
+
+  // solution to the "orphan issue" in Opera
+  // (nodeValue == "" hangs firefox)
+  if (_text != '') {
+    let watchdogCounter = 100;
+    while (!_width && --watchdogCounter > 0) { // <-- hangs
+      //Yang: work around svgweb bug 417 -- http://code.google.com/p/svgweb/issues/detail?id=417
+      if (_measurementNode.getBBox)
+        _width = parseInt(_measurementNode.getBBox().width);
+      else
+        _width = 68;
+    }
+  }
+  oldParent.removeChild(_measurementNode);
+  return _width;
+};
 
 /** 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.
@@ -43,68 +193,69 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       try { tableCol = gridCell.tableColumn; } catch { }
       if (!tableCol) return;
 
-      const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
-      const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
-
-      const maxIndex = Object.values(lengths).length - 1;
       const argsX = e.offsetX - gridCell.bounds.x;
-      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++;
-        }
+      const argsY = e.offsetY - gridCell.bounds.y;
+
+      const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
+      const editor: IEditor | null = helmPlacer.getEditor(gridCell.tableRowIndex!);
+      const seqMonomer: ISeqMonomer | null = editor ? getHoveredMonomerFromEditor(argsX, argsY, gridCell, editor) :
+        getHoveredMonomerFallback(argsX, argsY, gridCell, helmPlacer);
+      if (!seqMonomer) {
+        ui.tooltip.hide();
+        return;
       }
-      left = (argsX >= sumLengths[left]) ? left : left - 1; // correct left to between sumLengths
 
       const seq: string = !gridCell.cell.value ? '' : gridCell.cell.value
         .replaceAll(helmGapStartRe, '{').replaceAll(helmGapIntRe, '.').replaceAll(helmGapEndRe, '}')
         .replace('{*}', '{}');
       const monomerList = parseHelm(seq);
-      const monomers = new Set<string>(monomerList);
       const missedMonomers = findMonomers(monomerList);
 
-      const tooltipMessage: HTMLElement[] = [];
-      for (const [part, partI] of wu.enumerate(allParts)) {
-        if (missedMonomers.has(part)) {
-          tooltipMessage[partI] = ui.divV([
-            ui.divText(`Monomer ${allParts[partI]} not found.`),
-            ui.divText('Open the Context Panel, then expand Manage Libraries')
-          ]);
-        } else if (monomers.has(part)) {
-          const elList = [ui.div(part)];
-          const monomer = helmPlacer.getMonomer(part);
-          if (monomer) {
-            const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
-            const monomerSvg = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
-            elList.push(monomerSvg);
-          }
-          tooltipMessage[partI] = ui.divV(elList);
+      if (missedMonomers.has(seqMonomer.symbol)) {
+        ui.tooltip.show(ui.divV([
+          ui.divText(`Monomer ${seqMonomer.symbol} not found.`),
+          ui.divText('Open the Context Panel, then expand Manage Libraries'),
+        ]), e.x + 16, e.y + 16);
+      } else {
+        const monomer = helmPlacer.getMonomer(seqMonomer);
+        if (monomer) {
+          const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+          const monomerSvg = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
+          ui.tooltip.show(ui.divV([
+            ui.divText(seqMonomer.symbol),
+            monomerSvg,
+          ]), e.x + 16, e.y + 16);
         }
       }
 
-      (((tooltipMessage[left]?.childNodes.length ?? 0) > 0)) ?
-        ui.tooltip.show(tooltipMessage[left], e.x + 16, e.y + 16) :
-        ui.tooltip.hide();
+      // const tooltipMessage: HTMLElement[] = [];
+      // for (const [part, partI] of wu.enumerate(allParts)) {
+      //   if (missedMonomers.has(part)) {
+      //     tooltipMessage[partI] = ui.divV([
+      //       ui.divText(`Monomer ${allParts[partI]} not found.`),
+      //       ui.divText('Open the Context Panel, then expand Manage Libraries')
+      //     ]);
+      //   } else if (monomers.has(part)) {
+      //     const elList = [ui.div(part)];
+      //     const monomer = helmPlacer.getMonomer(part);
+      //     if (monomer) {
+      //       const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+      //       const monomerSvg = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
+      //       elList.push(monomerSvg);
+      //     }
+      //     tooltipMessage[partI] = ui.divV(elList);
+      //   }
+      // }
+      //
+      // (((tooltipMessage[left]?.childNodes.length ?? 0) > 0)) ?
+      //   ui.tooltip.show(tooltipMessage[left], e.x + 16, e.y + 16) :
+      //   ui.tooltip.hide();
     } catch (err: any) {
       const errMsg: string = errorToConsole(err);
       console.error('Helm: HelmCellRenderer.onMouseMove() error:\n' + errMsg);
+    } finally {
+      e.preventDefault();
+      e.stopPropagation();
     }
   }
 
@@ -132,13 +283,17 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
 
       if (missedMonomers.size == 0) {
-        helmPlacer.skipCell(gridCell.tableRowIndex!);
-        const host = ui.div([], {style: {width: `${w}px`, height: `${h}px`}});
+        // Recreate host to avoid hanging in window.dojox.gfx.svg.Text.prototype.getTextWidth
+        const host = gridCell.element = ui.div([],
+          {style: {width: `${w - 2}px`, height: `${h - 2}px`, margin: `${1}px`, backgroundColor: '#FFE0E0'}});
         host.setAttribute('dataformat', 'helm');
         host.setAttribute('data', seq /* gaps skipped */);
-        gridCell.element = host;
-        //@ts-ignore
-        const canvas = new JSDraw2.Editor(host, {width: w, height: h, skin: 'w8', viewonly: true});
+
+        // 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);
+
+        helmPlacer.skipCell(gridCell.tableRowIndex!);
         return;
       }
 

package/src/helm-monomer-placer.ts

@@ -13,11 +13,39 @@ 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 {
+  symbol: string,
+  polymerType?: string
+}
+
 export class HelmMonomerPlacer {
-  private _allPartsList: (string[] | null)[] | null = null;
-  private _lengthsList: (number[] | null) [] | null = null;
+  private readonly _allPartsList: (string[] | null)[];
+  private readonly _lengthsList: (number[] | null)[];
+  private readonly _editorList: (IEditor | null)[];
 
-  private monomerLib: IMonomerLib;
+  public readonly monomerLib: IMonomerLib;
 
   public monomerCharWidth: number = 7;
   public leftPadding: number = 5;
@@ -26,25 +54,20 @@ export class HelmMonomerPlacer {
     this.col.dataFrame.onDataChanged.subscribe();
     this.monomerLib = getMonomerLib();
     this.monomerLib.onChanged.subscribe(this.monomerLibOnChanged.bind(this));
+
+    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);
   }
 
+  /** Skips cell for the fallback rendering */
   public skipCell(rowIdx: number): void {
-    if (this._allPartsList === null)
-      this._allPartsList = new Array<string[] | null>(this.col.length).fill(null);
-    if (this._lengthsList === null)
-      this._lengthsList = new Array<number[] | null>(this.col.length).fill(null);
-
     this._allPartsList[rowIdx] = [];
     this._lengthsList[rowIdx] = [];
   }
 
   /** @param rowIdx Row index of the table {@link DG.DataFrame}, HelmMonomerPlacer is {@link DG.Column} based */
   public getCellAllPartsLengths(rowIdx: number): [string[], number[], number[]] {
-    if (this._allPartsList === null)
-      this._allPartsList = new Array<string[] | null>(this.col.length).fill(null);
-    if (this._lengthsList === null)
-      this._lengthsList = new Array<number[] | null>(this.col.length).fill(null);
-
     const [allParts, lengths] = this.getCellMonomerLengthsForSeq(rowIdx);
 
     const sumLengths: number[] = new Array<number>(lengths.length + 1);
@@ -77,11 +100,15 @@ export class HelmMonomerPlacer {
     return seq ? getParts(monomerList, seq) : [];
   }
 
-  getMonomer(monomerSymbol: any): Monomer | null {
+  getMonomer(monomer: ISeqMonomer): Monomer | null {
     let res: Monomer | null = null;
-    for (const polymerType of this.monomerLib.getPolymerTypes()) {
-      res = this.monomerLib.getMonomer(polymerType, monomerSymbol);
-      if (res) break;
+    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;
   }
@@ -89,8 +116,9 @@ export class HelmMonomerPlacer {
   // -- Handle events --
 
   private monomerLibOnChanged(_value: any): void {
-    this._lengthsList = null;
-    this._allPartsList = null;
+    this._lengthsList.fill(null);
+    this._allPartsList.fill(null);
+    this._editorList.fill(null);
     // TODO: Invalidate all grids of this.col.dataFrame
   }
 
@@ -98,4 +126,12 @@ export class HelmMonomerPlacer {
     if (!(Temps.helmMonomerPlacer in col.temp)) col.temp[Temps.helmMonomerPlacer] = new HelmMonomerPlacer(col);
     return col.temp[Temps.helmMonomerPlacer];
   }
+
+  public setEditor(tableRowIndex: number, editor: IEditor) {
+    this._editorList![tableRowIndex] = editor;
+  }
+
+  public getEditor(tableRowIndex: number): IEditor | null {
+    return this._editorList![tableRowIndex];
+  }
 }

package/src/package.ts

@@ -3,17 +3,19 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {WebEditorMonomer, RGROUP_CAP_GROUP_NAME, RGROUP_LABEL, SMILES} from './constants';
-import {HelmWebEditor} from './helm-web-editor';
-import {HelmCellRenderer} from './cell-renderer';
-import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types';
-import {GapSymbols, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
-import {findMonomers, parseHelm} from './utils';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {GapSymbols, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types';
+
+import {findMonomers, parseHelm} from './utils';
+import {HelmWebEditor} from './helm-web-editor';
+import {HelmCellRenderer} from './cell-renderer';
 
 let monomerLib: IMonomerLib | null = null;
 
+import {WebEditorMonomer, RGROUP_CAP_GROUP_NAME, RGROUP_LABEL, SMILES} from './constants';
+
 export const _package = new DG.Package();
 
 //tags: init
@@ -110,7 +112,7 @@ function rewriteLibraries() {
 //name: helmCellRenderer
 //tags: cellRenderer
 //meta.cellType: helm
-//meta.columnTags: units=helm
+//meta.columnTags: quality=Macromolecule, units=helm
 //output: grid_cell_renderer result
 export function helmCellRenderer(): HelmCellRenderer {
   return new HelmCellRenderer();
@@ -281,7 +283,7 @@ export function getMolfiles(col: DG.Column): DG.Column {
 }
 
 //name: helmWebEditor
-//output: object
+//output: object result
 export function helmWebEditor(): HelmWebEditor {
   return new HelmWebEditor();
 }