@datagrok/helm 2.1.13 → 2.1.15

package/src/cell-renderer.ts

@@ -2,15 +2,22 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {_package} from './package';
-import {findMonomers, parseHelm, getParts} from './utils';
+import wu from 'wu';
+
 import {printLeftOrCentered} from '@datagrok-libraries/bio/src/utils/cell-renderer';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
+import {findMonomers, parseHelm} from './utils';
+import {HelmMonomerPlacer} from './helm-monomer-placer';
+import {TAGS as helmTAGS} from './constants';
+
 const enum tempTAGS {
   helmSumMaxLengthWords = 'helm-sum-maxLengthWords',
   helmMaxLengthWords = 'helm-maxLengthWords',
+
+  helmPlacer = 'bio-helmPlacer',
 }
+
 // Global flag is for replaceAll
 const helmGapStartRe = /\{(\*\.)+/g;
 const helmGapIntRe = /\.(\*\.)+/g;
@@ -37,52 +44,62 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       try { tableCol = gridCell.tableColumn; } catch { }
       if (!tableCol) return;
 
-      const colTemp: TempType[] = tableCol.temp ?? new Array<TempType>(tableCol.length);
-      // Exit if no missed monomers (tags are not presented in colTemp)
-      if (!colTemp || Object.keys(colTemp).length == 0) return;
-
-      const maxLengthWordsSum: { [pos: number]: number } = colTemp[tempTAGS.helmSumMaxLengthWords];
-      const maxLengthWords: { [pos: number]: number } = colTemp[tempTAGS.helmMaxLengthWords];
+      const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
+      const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex);
 
-      const maxIndex = Object.values(maxLengthWords).length - 1;
-      const argsX = e.offsetX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x);
+      const maxIndex = Object.values(lengths).length - 1;
+      const argsX = e.offsetX - gridCell.bounds.x;
       let left = 0;
       let right = maxIndex;
       let found = false;
-      maxLengthWordsSum[maxIndex + 1] = argsX + 1;
+      let iterCount: number = 0;
+
       let mid = 0;
-      if (argsX > maxLengthWordsSum[0]) {
-        while (!found) {
+      if (argsX > sumLengths[0]) {
+        while (!found && iterCount < sumLengths.length) {
           mid = Math.floor((right + left) / 2);
-          if (argsX >= maxLengthWordsSum[mid] && argsX <= maxLengthWordsSum[mid + 1]) {
+          if (argsX >= sumLengths[mid] && argsX <= sumLengths[mid + 1]) {
             left = mid;
             found = true;
-          } else if (argsX < maxLengthWordsSum[mid]) {
+          } else if (argsX < sumLengths[mid]) {
             right = mid - 1;
-          } else if (argsX > maxLengthWordsSum[mid + 1]) {
+          } else if (argsX > sumLengths[mid + 1]) {
             left = mid + 1;
           }
           if (left == right)
             found = true;
+
+          iterCount++;
         }
       }
-      left = (argsX >= maxLengthWordsSum[left]) ? left + 1 : left;
-      const monomers = findMonomers(gridCell.cell.value);
-      const s: string = gridCell.cell.value ?? '';
-      const subParts: string[] = parseHelm(s);
-      const allParts: string[] = getParts(subParts, s);
+      left = (argsX >= sumLengths[left]) ? left : left - 1; // correct left to between sumLengths
+
+      const seq: string = gridCell.cell.value;
+      const monomerList = parseHelm(seq);
+      const monomers = new Set<string>(monomerList);
+      const missedMonomers = findMonomers(monomerList);
+
       const tooltipMessage: HTMLElement[] = [];
-      for (let partI = 0; partI < allParts.length; ++partI) {
-        if (monomers.has(allParts[partI])) {
+      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(ui.div(tooltipMessage[left]), e.x + 16, e.y + 16) :
+        ui.tooltip.show(tooltipMessage[left], e.x + 16, e.y + 16) :
         ui.tooltip.hide();
     } catch (err: any) {
       const errMsg: string = errorToConsole(err);
@@ -93,20 +110,22 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
   render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
     gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
   ) {
+    /* Can not do anything without tableColumn containing temp */
+    let tableCol: DG.Column | null = null;
+    try { tableCol = gridCell.tableColumn; } catch { }
+    if (!tableCol) return;
+
     g.save();
     try {
-      /* Can not do anything without tableColumn containing temp */
-      let tableCol: DG.Column | null = null;
-      try { tableCol = gridCell.tableColumn; } catch { }
-      if (!tableCol) return;
-
       const grid = gridCell.gridRow !== -1 ? gridCell.grid : undefined;
-      const undefinedColor = 'rgb(100,100,100)';
-      const grayColor = '#808080';
+      const missedColor = 'red';
+      const monomerColor: string = '#404040';
+      const frameColor: string = '#C0C0C0';
 
-      const missedMonomers = findMonomers(gridCell.cell.value);
-      const s: string = gridCell.cell.value ?? '';
-      const subParts: string[] = parseHelm(s);
+      const seq = gridCell.cell.value;
+      const monomerList: string[] = parseHelm(seq);
+      const monomers: Set<string> = new Set<string>(monomerList);
+      const missedMonomers: Set<string> = findMonomers(monomerList);
 
       if (missedMonomers.size == 0) {
         const host = ui.div([], {style: {width: `${w}px`, height: `${h}px`}});
@@ -122,40 +141,37 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
         if (!grid) {
           const r = window.devicePixelRatio;
           h = 28;
-          g.canvas.height = h*r;
+          g.canvas.height = h * r;
           g.canvas.style.height = `${h}px`;
         }
-        const maxLengthWords: number[] = tableCol.temp[tempTAGS.helmMaxLengthWords] ?? [];
-        if (subParts.length > maxLengthWords.length)
-          maxLengthWords.push(...(new Array<number>(subParts.length - maxLengthWords.length).fill(-1)));
 
         w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
         g.save();
         g.beginPath();
         g.rect(x, y, w, h);
         g.clip();
+        g.transform(1, 0, 0, 1, x, y);
         g.font = '12px monospace';
         g.textBaseline = 'top';
-        let x1 = x;
-        const allParts: string[] = getParts(subParts, s);
+        const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
+        const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRow.idx);
+
         for (let i = 0; i < allParts.length; ++i) {
-          maxLengthWords[i] = Math.max(maxLengthWords[i], allParts[i].length * 7); /* What is 7, width of char ? */
-          const color = missedMonomers.has(allParts[i]) ? 'red' : grayColor;
-          g.fillStyle = undefinedColor;
-          x1 = printLeftOrCentered(x1, y, w, h, g, allParts[i], color, 0, true, 1.0);
+          const part: string = allParts[i];
+          const color: string =
+            part === '.' || part.endsWith('{') || part.startsWith('}') ? frameColor :
+              missedMonomers.has(part) ? missedColor :
+                monomers.has(part) ? monomerColor :
+                  frameColor;
+          g.fillStyle = color;
+          printLeftOrCentered(sumLengths[i], 0, w, h, g, allParts[i], color, 0, true, 1.0);
         }
-
-        const maxLengthWordSum: number[] = new Array<number>(maxLengthWords.length);
-        maxLengthWordSum[0] = maxLengthWords[0];
-        for (let partI = 1; partI < allParts.length; partI++)
-          maxLengthWordSum[partI] = maxLengthWordSum[partI - 1] + maxLengthWords[partI];
-
-        tableCol.temp = {
-          [tempTAGS.helmSumMaxLengthWords]: maxLengthWordSum,
-          [tempTAGS.helmMaxLengthWords]: maxLengthWords
-        };
-        return;
       }
+    } catch (err: any) {
+      const errMsg = err instanceof Error ? err.message : err.toString();
+      const errStack = err instanceof Error ? err.stack : undefined;
+      tableCol.setTag(helmTAGS.cellRendererRenderError, JSON.stringify({message: errMsg, stack: errStack}));
+      throw err;
     } finally {
       g.restore();
     }

package/src/constants.ts

@@ -1,14 +1,14 @@
 export const jsonSdfMonomerLibDict = {
-    "monomerType": null, 
-    "smiles": null, 
-    "name": "MonomerName", 
-    "author": null, 
-    "molfile": "molecule", 
-    "naturalAnalog": "MonomerNaturalAnalogCode", 
+    "monomerType": null,
+    "smiles": null,
+    "name": "MonomerName",
+    "author": null,
+    "molfile": "molecule",
+    "naturalAnalog": "MonomerNaturalAnalogCode",
     "rgroups": "MonomerCaps",
-    "createDate": null, 
-    "id": null, 
-    "polymerType": "MonomerType", 
+    "createDate": null,
+    "id": null,
+    "polymerType": "MonomerType",
     "symbol": "MonomerCode"
 }
 
@@ -24,10 +24,14 @@ export type WebEditorMonomer = {
   };
 
 export const SMILES = 'smiles';
-export const RGROUPS = "rgroups";
-export const MONOMER_SYMBOL = "symbol";
-export const RGROUP_CAP_GROUP_SMILES = "capGroupSmiles";
-export const RGROUP_ALTER_ID = "alternateId";
-export const RGROUP_CAP_GROUP_NAME = "capGroupName";
-export const RGROUP_LABEL = "label";
-export const SDF_MONOMER_NAME = "MonomerName";
+export const RGROUPS = 'rgroups';
+export const MONOMER_SYMBOL = 'symbol';
+export const RGROUP_CAP_GROUP_SMILES = 'capGroupSmiles';
+export const RGROUP_ALTER_ID = 'alternateId';
+export const RGROUP_CAP_GROUP_NAME = 'capGroupName';
+export const RGROUP_LABEL = 'label';
+export const SDF_MONOMER_NAME = 'MonomerName';
+
+export const enum TAGS {
+  cellRendererRenderError = '.cell-renderer.render.error',
+}

package/src/helm-monomer-placer.ts

@@ -0,0 +1,78 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import wu from 'wu';
+
+import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types/index';
+
+import {getParts, parseHelm} from './utils';
+import {getMonomerLib} from './package';
+
+export const enum Temps {
+  helmMonomerPlacer = 'bio-helmMonomerPlacer',
+}
+
+export class HelmMonomerPlacer {
+  private _allPartsList: string[][] = null;
+  private _lengthsList: number[][] = null;
+
+  private monomerLib: IMonomerLib;
+
+  public monomerCharWidth: number = 7;
+  public leftPadding: number = 5;
+
+  constructor(public readonly col: DG.Column<string>) {
+    this.col.dataFrame.onDataChanged.subscribe();
+    this.monomerLib = getMonomerLib();
+  }
+
+  /** @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[]>(this.col.length).fill(null);
+
+    if (this._lengthsList === null)
+      this._lengthsList = new Array<number[]>(this.col.length).fill(null);
+
+    const [allParts, lengths] = this.getCellMonomerLengthsForSeq(rowIdx);
+
+    const sumLengths: number[] = new Array<number>(lengths.length + 1);
+    sumLengths[0] = this.leftPadding; // padding
+    for (let pos: number = 1; pos < sumLengths.length; pos++)
+      sumLengths[pos] = sumLengths[pos - 1] + lengths[pos - 1];
+    return [allParts, lengths, sumLengths];
+  }
+
+  private getCellMonomerLengthsForSeq(rowIdx: number): [string[], number[]] {
+    const allParts: string[] = this._allPartsList[rowIdx] = this.getAllParts(rowIdx);
+    const lengths: number[] = this._lengthsList[rowIdx] = new Array<number>(allParts.length);
+
+    for (const [part, partI] of wu.enumerate(allParts)) {
+      const partWidth: number = part.length * this.monomerCharWidth;
+      lengths[partI] = partWidth;
+    }
+
+    return [allParts, lengths];
+  }
+
+  getAllParts(rowIdx: number): string[] {
+    const seq: string | null = this.col.get(rowIdx);
+    const subParts: string[] = parseHelm(seq);
+    return seq ? getParts(subParts, seq) : [];
+  }
+
+  getMonomer(monomerSymbol: any): Monomer | null {
+    let res: Monomer = null;
+    for (const polymerType of this.monomerLib.getPolymerTypes()) {
+      res = this.monomerLib.getMonomer(polymerType, monomerSymbol);
+      if (res) break;
+    }
+    return res ?? null;
+  }
+
+  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];
+  }
+}

package/src/package-test.ts

@@ -4,6 +4,7 @@ import {runTests, tests, TestContext} from '@datagrok-libraries/utils/src/test';
 
 import './tests/helm-tests.ts';
 import './tests/findMonomers-tests';
+import './tests/renderers-tests';
 
 export const _package = new DG.Package();
 export {tests};

package/src/package.ts

@@ -17,10 +17,13 @@ let monomerLib: IMonomerLib | null = null;
 
 //tags: init
 export async function initHelm(): Promise<void> {
-  return Promise.all([new Promise((resolve, reject) => {
-    // @ts-ignore
-    dojo.ready(function() { resolve(null); });
-  }), grok.functions.call('Bio:getBioLib')])
+  return Promise.all([
+    new Promise((resolve, reject) => {
+      // @ts-ignore
+      dojo.ready(function() { resolve(null); });
+    }),
+    grok.functions.call('Bio:getBioLib'),
+  ])
     .then(([_, lib]: [void, IMonomerLib]) => {
       monomerLib = lib;
       rewriteLibraries(); // initHelm()
@@ -51,6 +54,10 @@ export async function initHelm(): Promise<void> {
     });
 }
 
+export function getMonomerLib(): IMonomerLib {
+  return monomerLib;
+}
+
 function rewriteLibraries() {
   org.helm.webeditor.Monomers.clear();
   monomerLib.getPolymerTypes().forEach((polymerType) => {

package/src/tests/findMonomers-tests.ts

@@ -4,7 +4,7 @@ import * as DG from 'datagrok-api/dg';
 
 import {_package} from '../package-test';
 import {after, before, category, delay, expect, expectObject, test} from '@datagrok-libraries/utils/src/test';
-import {findMonomers} from '../utils';
+import {findMonomers, parseHelm} from '../utils';
 import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 
 const LIB_STORAGE_NAME = 'Libraries';
@@ -50,7 +50,8 @@ category('findMonomers', () => {
   }
 
   function _testFindMonomers(testHelmValue: string, tgtMissedSet: Set<string>): void {
-    const resMissedSet: Set<string> = findMonomers(testHelmValue);
+    const monomerSymbolList: string[] = parseHelm(testHelmValue);
+    const resMissedSet: Set<string> = findMonomers(monomerSymbolList);
     expectObject(resMissedSet, tgtMissedSet);
   }
 });

package/src/tests/helm-tests.ts

@@ -2,11 +2,11 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {_package} from '../package-test';
 import {after, before, category, delay, expect, test, expectArray} from '@datagrok-libraries/utils/src/test';
 //import {findMonomers, helmToFasta, helmToPeptide, helmToRNA, initHelm} from '../package';
 import {parseHelm} from '../utils';
 
+import {_package} from '../package-test';
 
 category('Helm', () => {
   //These tests require webservice that is not present on test stand

package/src/tests/renderers-tests.ts

@@ -0,0 +1,35 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import $ from 'cash-dom';
+
+import {category, expect, test, awaitCheck, delay} from '@datagrok-libraries/utils/src/test';
+import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {TAGS as helmTAGS} from '../constants';
+
+category('renderers', () => {
+  test('missedInLib', async () => { await _testMissedInLib(); });
+});
+
+async function _testMissedInLib() {
+  const df: DG.DataFrame = await grok.dapi.files.readCsv('System:AppData/Helm/tests/sample_HELM-missedInLib.csv');
+  const helmCol: DG.Column<string> = df.getCol('HELM');
+
+  const tv: DG.TableView = grok.shell.addTableView(df);
+  await awaitCheck(() => {
+    return $(tv.root).find('.d4-grid canvas').length > 0;
+  }, 'Table view canvas not found', 100);
+
+  expect(helmCol.semType, DG.SEMTYPE.MACROMOLECULE);
+  expect(helmCol.getTag(DG.TAGS.UNITS), NOTATION.HELM);
+  expect(helmCol.getTag(DG.TAGS.CELL_RENDERER), 'helm');
+
+  const cellRendererErrorJson: string = helmCol.getTag(helmTAGS.cellRendererRenderError);
+  if (!!cellRendererErrorJson) {
+    const cellRendererError: any = JSON.parse(cellRendererErrorJson);
+    const err = new Error(cellRendererError['message']);
+    err.stack = cellRendererError['stack'];
+    throw err;
+  }
+}

package/src/utils.ts

@@ -60,7 +60,7 @@ export function parseHelm(s: string) {
           const firstPiece = monomer.substring(0, monomer.indexOf('('));
           const thirdPiece = monomer.substring(monomer.lastIndexOf(')') + 1);
           const secondPiece = monomer.substring(firstPiece.length + 1, monomer.length - thirdPiece.length - 1);
-          const elements =[firstPiece, secondPiece, thirdPiece];
+          const elements = [firstPiece, secondPiece, thirdPiece];
           for (const el of elements)
             ss.push(el);
         } else {
@@ -94,7 +94,8 @@ export function parseHelm(s: string) {
 //   return new Set(helmPartList.filter((val) => !monomerNameList.includes(val)));
 // }
 
-export function findMonomers(helmString: string) {
+/** Searches monomers of {@link helmString} for missed. */
+export function findMonomers(monomerSymbolList: string[]): Set<string> {
   //@ts-ignore
   const types = Object.keys(org.helm.webeditor.monomerTypeList());
   const monomers: any = [];
@@ -107,8 +108,7 @@ export function findMonomers(helmString: string) {
       monomerNames.push(monomers[i][k].id);
     });
   }
-  const splitString = parseHelm(helmString);
-  return new Set(splitString.filter((val) => !monomerNames.includes(val)));
+  return new Set(monomerSymbolList.filter((val) => !monomerNames.includes(val)));
 }
 
 function split(s: string, sep: string) {
@@ -192,14 +192,14 @@ function unescape(s: string) {
 
   return s.replace(/[\\]./g, function(m) {
     switch (m) {
-    case '\\r':
-      return '\r';
-    case '\\n':
-      return '\n';
-    case '\\t':
-      return '\t';
-    default:
-      return m.substring(1);
+      case '\\r':
+        return '\r';
+      case '\\n':
+        return '\n';
+      case '\\t':
+        return '\t';
+      default:
+        return m.substring(1);
     }
   });
 }