@datagrok/helm 2.1.17 → 2.1.19

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.17",
+  "version": "2.1.19",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -15,7 +15,7 @@
     "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.38.0",
+    "@datagrok-libraries/bio": "^5.38.8",
     "@datagrok-libraries/utils": "^4.0.17",
     "cash-dom": "^8.1.1",
     "datagrok-api": "^1.10.2",

package/src/cell-renderer.ts

@@ -8,7 +8,9 @@ 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} from './helm-monomer-placer';
+
+// import {_package} from './package'; // NullError: method not found: '_package' on null
 
 const enum tempTAGS {
   helmSumMaxLengthWords = 'helm-sum-maxLengthWords',
@@ -22,7 +24,120 @@ const helmGapStartRe = /\{(\*\.)+/g;
 const helmGapIntRe = /\.(\*\.)+/g;
 const helmGapEndRe = /(\.\*)+\}/g;
 
-type TempType = { [tagName: string]: any };
+function getHoveredMonomerFromEditor(
+  argsX: number, argsY: number, gridCell: DG.GridCell, editor: IEditor
+): string | null {
+  let hoveredMonomerSymbol: string | 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) {
+    if (secondAtomI !== undefined && secondDistance !== undefined) {
+      if (firstDistance < secondDistance * 0.45)
+        hoveredMonomerSymbol = editor.m.atoms[firstAtomI].elem;
+    } else {
+      if (firstDistance < 0.35 * gridCell.bounds.height)
+        hoveredMonomerSymbol = editor.m.atoms[firstAtomI].elem;
+    }
+  }
+  return hoveredMonomerSymbol;
+}
+
+function getHoveredMonomerFallback(
+  argsX: number, _argsY: number, gridCell: DG.GridCell, helmPlacer: HelmMonomerPlacer
+): string | null {
+  let hoveredMonomerSymbol: string | 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)
+    hoveredMonomerSymbol = allParts[left];
+  return hoveredMonomerSymbol;
+}
+
+// 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 != '') {
+//     while (!_width) { // <-- 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,65 +158,63 @@ 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 hoveredMonomerSymbol = editor ? getHoveredMonomerFromEditor(argsX, argsY, gridCell, editor) :
+        getHoveredMonomerFallback(argsX, argsY, gridCell, helmPlacer);
+      if (!hoveredMonomerSymbol) {
+        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(hoveredMonomerSymbol)) {
+        ui.tooltip.show(ui.divV([
+          ui.divText(`Monomer ${hoveredMonomerSymbol} not found.`),
+          ui.divText('Open the Context Panel, then expand Manage Libraries'),
+        ]), e.x + 16, e.y + 16);
+      } else {
+        const monomer = helmPlacer.getMonomer(hoveredMonomerSymbol);
+        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(hoveredMonomerSymbol),
+            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);
@@ -132,13 +245,16 @@ 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}px`, height: `${h}px`}});
         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,9 +13,32 @@ 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 class HelmMonomerPlacer {
-  private _allPartsList: (string[] | null)[] | null = null;
-  private _lengthsList: (number[] | null) [] | null = null;
+  private _allPartsList: (string[] | null)[];
+  private _lengthsList: (number[] | null)[];
+  private _editorList: (IEditor | null)[];
 
   private monomerLib: IMonomerLib;
 
@@ -26,25 +49,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);
@@ -89,8 +107,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 +117,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,21 +3,26 @@ 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
 export async function initHelm(): Promise<void> {
+  //@ts-ignore
+  org.helm.webeditor.kCaseSensitive = true; // GROK-13880
+
   return Promise.all([
     new Promise((resolve, reject) => {
       // @ts-ignore
@@ -59,6 +64,7 @@ export function getMonomerLib(): IMonomerLib {
   return monomerLib!;
 }
 
+/** Fills org.helm.webeditor.Monomers dictionary for WebEditor */
 function rewriteLibraries() {
   // @ts-ignore
   org.helm.webeditor.Monomers.clear();

package/src/utils.ts

@@ -94,9 +94,8 @@ export function parseHelm(s: string): string[] {
 //   return new Set(helmPartList.filter((val) => !monomerNameList.includes(val)));
 // }
 
-/** Searches monomers of {@link helmString} for missed. */
+/** Searches monomers of helmString for missed. */
 export function findMonomers(monomerSymbolList: string[]): Set<string> {
-  //@ts-ignore
   const types = Object.keys(org.helm.webeditor.monomerTypeList());
   const monomers: any = [];
   const monomerNames: any = [];