@datagrok/helm 2.1.31 → 2.1.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.31",
+  "version": "2.1.33",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -15,9 +15,9 @@
     "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.40.0",
-    "@datagrok-libraries/chem-meta": "^1.2.3",
-    "@datagrok-libraries/utils": "^4.1.45",
+    "@datagrok-libraries/bio": "^5.40.8",
+    "@datagrok-libraries/chem-meta": "^1.2.5",
+    "@datagrok-libraries/utils": "^4.2.1",
     "cash-dom": "^8.1.1",
     "datagrok-api": "^1.17.0",
     "dayjs": "^1.10.6",
@@ -37,7 +37,7 @@
     "@typescript-eslint/parser": "^5.11.0",
     "eslint": "^8.18.0",
     "eslint-config-google": "^0.14.0",
-    "@datagrok/bio": "^2.12.0",
+    "@datagrok/bio": "^2.12.11",
     "@datagrok/chem": "^1.9.0"
   },
   "scripts": {

package/src/cell-renderer.ts

@@ -8,7 +8,7 @@ import {printLeftOrCentered} from '@datagrok-libraries/bio/src/utils/cell-render
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
 import {findMonomers, parseHelm, removeGapsFromHelm} from './utils';
-import {IEditor, HelmMonomerPlacer, IEditorMolAtom, ISeqMonomer} from './helm-monomer-placer';
+import {IEditor, HelmMonomerPlacer, IEditorMolAtom, ISeqMonomer, Temps} from './helm-monomer-placer';
 import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
 
 // import {_package} from './package'; // NullError: method not found: '_package' on null
@@ -29,7 +29,7 @@ function getSeqMonomerFromHelm(
       resSeqMonomer = {symbol: symbol, polymerType: polymerType};
   }
   if (!resSeqMonomer)
-    resSeqMonomer = {symbol: symbol};
+    throw new Error(`Monomer not found for symbol = '${symbol}' and helmPrefix = '${helmPrefix}'.`);
   return resSeqMonomer;
 }
 
@@ -139,6 +139,28 @@ function getHoveredMonomerFallback(
   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;
+
+  let tableCol: DG.Column | null = null;
+  if (!temp) {
+    try { tableCol = gridCell.cell.column; } catch { tableCol = null; }
+    temp = tableCol ? tableCol.temp as RendererGridCellTemp : null;
+  }
+  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.
  */
@@ -153,16 +175,15 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
 
   onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
     try {
-      /* Can not do anything without tableColumn containing temp */
-      let tableCol: DG.Column | null = null;
-      try { tableCol = gridCell.tableColumn; } catch { }
+      const [_gridCol, tableCol, temp] = getRendererGridCellTemp(gridCell);
+      const helmPlacer = temp[Temps.helmMonomerPlacer];
+      /* Can not do anything without tableColumn */
       if (!tableCol) return;
 
       /** {@link gridCell}.bounds */ const gcb = gridCell.bounds;
       const argsX = e.offsetX - gcb.x;
       const argsY = e.offsetY - gcb.y;
 
-      const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
       const editor: IEditor | null = helmPlacer.getEditor(gridCell.tableRowIndex!);
       let seqMonomer: ISeqMonomer | null;
       let missedMonomers: Set<string> = new Set<string>(); // of .size = 0
@@ -189,15 +210,10 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
 
       if (seqMonomer) {
         if (!missedMonomers.has(seqMonomer.symbol)) {
-          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);
-          }
+          const tooltipElements: HTMLElement[] = [ui.div(seqMonomer.symbol)];
+          const monomerDiv = helmPlacer.monomerLib.getTooltip(seqMonomer.polymerType, seqMonomer.symbol);
+          tooltipElements.push(monomerDiv);
+          ui.tooltip.show(ui.divV(tooltipElements), e.x + 16, e.y + 16);
         } else {
           ui.tooltip.show(ui.divV([
             ui.divText(`Monomer '${seqMonomer.symbol}' not found.`),
@@ -230,10 +246,11 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
   ) {
     g.save();
     try {
+      const [gridCol, tableCol, temp] = getRendererGridCellTemp(gridCell);
       /* Can not do anything without tableColumn containing temp */
-      let tableCol: DG.Column | null = null;
-      try { tableCol = gridCell.tableColumn; } catch { }
       if (!tableCol) return;
+      let helmPlacer = temp[Temps.helmMonomerPlacer];
+      if (!helmPlacer) helmPlacer = temp[Temps.helmMonomerPlacer] = new HelmMonomerPlacer(gridCol, tableCol);
 
       const grid = gridCell.gridRow !== -1 ? gridCell.grid : undefined;
       const missedColor = 'red';
@@ -244,7 +261,6 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       const monomerList = parseHelm(seq);
       const monomers: Set<string> = new Set<string>(monomerList);
       const missedMonomers: Set<string> = findMonomers(monomerList);
-      const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
 
       if (missedMonomers.size == 0) {
         // Recreate host to avoid hanging in window.dojox.gfx.svg.Text.prototype.getTextWidth

package/src/helm-monomer-placer.ts

@@ -3,11 +3,13 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import wu from 'wu';
+import {Unsubscribable} from 'rxjs';
 
 import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types/index';
 
 import {getParts, parseHelm} from './utils';
-import {getMonomerLib} from './package';
+
+import {_package, getMonomerLib} from './package';
 
 export const enum Temps {
   helmMonomerPlacer = 'bio-helmMonomerPlacer',
@@ -36,31 +38,60 @@ export interface IEditorPoint {
 }
 
 export interface ISeqMonomer {
+  polymerType: string
   symbol: string,
-  polymerType?: string
 }
 
 export class HelmMonomerPlacer {
-  private readonly _allPartsList: (string[] | null)[];
-  private readonly _lengthsList: (number[] | null)[];
-  private readonly _editorList: (IEditor | null)[];
-
+  private readonly grid: DG.Grid | null;
   public readonly monomerLib: IMonomerLib;
 
+  private _allPartsList: (string[] | null)[];
+  private _lengthsList: (number[] | null)[];
+  private _editorList: (IEditor | null)[];
+
   public monomerCharWidth: number = 7;
   public leftPadding: number = 5;
   public monomerTextSizeMap: { [p: string]: TextMetrics } = {};
 
-  constructor(public readonly col: DG.Column<string>) {
-    this.col.dataFrame.onDataChanged.subscribe();
+  private subs: Unsubscribable[] = [];
+
+  public constructor(
+    public readonly gridCol: DG.GridColumn | null,
+    public readonly col: 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.monomerLib.onChanged.subscribe(this.monomerLibOnChanged.bind(this));
+    this.subs.push(this.monomerLib.onChanged.subscribe(this.monomerLibOnChanged.bind(this)));
+  }
 
+  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();
+  }
+
   /** Skips cell for the fallback rendering */
   public skipCell(rowIdx: number): void {
     this._allPartsList[rowIdx] = [];
@@ -80,8 +111,10 @@ export class HelmMonomerPlacer {
 
   private getCellMonomerLengthsForSeq(rowIdx: number): [string[], number[]] {
     let allParts: string[] | null = this._allPartsList![rowIdx];
-    if (allParts === null)
-      allParts = this._allPartsList![rowIdx] = this.getAllParts(rowIdx);
+    if (allParts === null) {
+      const seq = this.col.get(rowIdx);
+      allParts = this._allPartsList![rowIdx] = getAllParts(seq);
+    }
 
     let lengths: number[] | null = this._lengthsList![rowIdx];
     if (lengths === null) {
@@ -95,12 +128,6 @@ export class HelmMonomerPlacer {
     return [allParts, lengths];
   }
 
-  getAllParts(rowIdx: number): string[] {
-    const seq: string | null = this.col.get(rowIdx);
-    const monomerList: string[] = seq ? parseHelm(seq) : [];
-    return seq ? getParts(monomerList, seq) : [];
-  }
-
   getMonomer(monomer: ISeqMonomer): Monomer | null {
     let res: Monomer | null = null;
     if (monomer.polymerType)
@@ -117,15 +144,8 @@ export class HelmMonomerPlacer {
   // -- Handle events --
 
   private monomerLibOnChanged(_value: any): void {
-    this._lengthsList.fill(null);
-    this._allPartsList.fill(null);
-    this._editorList.fill(null);
-    // TODO: Invalidate all grids of this.col.dataFrame
-  }
-
-  public static getOrCreate(col: DG.Column<string>): HelmMonomerPlacer {
-    if (!(Temps.helmMonomerPlacer in col.temp)) col.temp[Temps.helmMonomerPlacer] = new HelmMonomerPlacer(col);
-    return col.temp[Temps.helmMonomerPlacer];
+    this.reset();
+    if (this.grid) this.grid.invalidate();
   }
 
   public setEditor(tableRowIndex: number, editor: IEditor) {
@@ -136,3 +156,8 @@ export class HelmMonomerPlacer {
     return this._editorList![tableRowIndex];
   }
 }
+
+export function getAllParts(seq: string | null): string[] {
+  const monomerList: string[] = !!seq ? parseHelm(seq) : [];
+  return !!seq ? getParts(monomerList, seq) : [];
+}

package/src/package-test.ts

@@ -8,6 +8,7 @@ import './tests/findMonomers-tests';
 import './tests/renderers-tests';
 import './tests/get-molfiles';
 import './tests/properties-widget-tests';
+import './tests/get-all-parts-tests';
 
 export const _package = new DG.Package();
 export {tests};

package/src/tests/get-all-parts-tests.ts

@@ -0,0 +1,34 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {after, before, category, delay, expect, test, expectArray} from '@datagrok-libraries/utils/src/test';
+
+import {getAllParts} from '../helm-monomer-placer';
+
+category('getAllParts', () => {
+  /** All parts of Helm string are required for fallback rendering. */
+
+  const tests: { [testName: string]: { tgt: string[]; seq: string } } = {
+    'peptideSimpleSingleChar': {
+      seq: 'PEPTIDE1{L.V.A}$$$$',
+      tgt: ['PEPTIDE1{', 'L', '.', 'V', '.', 'A', '}$$$$'],
+    },
+    'peptideSimpleMultiChar': {
+      seq: 'PEPTIDE1{[Ac].V.A}$$$$',
+      /* doubt joining square brackets to separator or notation is correct */
+      tgt: ['PEPTIDE1{[', 'Ac', '].', 'V', '.', 'A', '}$$$$'],
+    }
+  };
+
+  for (const [testName, testData] of Object.entries(tests)) {
+    test(`${testName}`, async () => {
+      await _testAllParts(testData.seq, testData.tgt);
+    });
+  }
+});
+
+async function _testAllParts(seq: string | null, tgt: string[]): Promise<void> {
+  const res: string[] = getAllParts(seq);
+  expectArray(res, tgt);
+}

package/src/tests/properties-widget-tests.ts

@@ -2,9 +2,11 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 
-import {category, expect, expectObject, test} from '@datagrok-libraries/utils/src/test';
+import {after, before, category, expect, expectObject, test} from '@datagrok-libraries/utils/src/test';
 import {ALPHABET, NOTATION, TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
+import {getUserLibSettings, setUserLibSettings, setUserLibSettingsForTests} from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
+import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 
 import {getPropertiesDict} from '../widgets/properties-widget';
 
@@ -60,6 +62,22 @@ const TestsData: {
 };
 
 category('properties-widget', () => {
+  let monomerLibHelper: IMonomerLibHelper;
+  /** Backup actual user's monomer libraries settings */
+  let userLibSettings: any = null;
+
+  before(async () => {
+    monomerLibHelper = await getMonomerLibHelper();
+    userLibSettings = getUserLibSettings();
+    await setUserLibSettingsForTests();
+    await monomerLibHelper.loadLibraries(true); // load default libraries
+  });
+
+  after(async () => {
+    await setUserLibSettings(userLibSettings);
+    await monomerLibHelper.loadLibraries(true); // load user settings libraries
+  });
+
   for (const [testName, testData] of Object.entries(TestsData)) {
     test(testName, async () => {
       testPropertiesDict(testData.seq, testData.units, testData.separator, testData.alphabet, testData.res);

package/src/utils/index.ts

@@ -24,7 +24,7 @@ export function removeGapsFromHelm(srcHelm: string): string {
 export function getParts(subParts: string[], s: string): string[] {
   const j = 0;
   const allParts: string[] = [];
-  for (let k = 0; k < subParts.length; ++k) {
+  for (let k = 0; k < (subParts ?? []).length; ++k) {
     const indexOfMonomer = s.indexOf(subParts[k]);
     const helmBeforeMonomer = s.slice(j, indexOfMonomer);
     allParts.push(helmBeforeMonomer);