@datagrok/helm 2.1.14 → 2.1.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.14",
+  "version": "2.1.16",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -16,7 +16,7 @@
   ],
   "dependencies": {
     "@datagrok-libraries/bio": "^5.33.2",
-    "@datagrok-libraries/utils": "^2.5.0",
+    "@datagrok-libraries/utils": "^4.0.17",
     "cash-dom": "^8.1.1",
     "datagrok-api": "^1.10.2",
     "dayjs": "^1.10.6",
@@ -27,7 +27,7 @@
     "path": "^0.12.7",
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.2.6",
-    "typescript": "^4.4.4",
+    "typescript": "^4.8.4",
     "webpack": "^5.59.1",
     "webpack-cli": "^4.9.1",
     "@typescript-eslint/eslint-plugin": "^5.11.0",

package/src/cell-renderer.ts

@@ -44,7 +44,7 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       if (!tableCol) return;
 
       const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
-      const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex);
+      const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
 
       const maxIndex = Object.values(lengths).length - 1;
       const argsX = e.offsetX - gridCell.bounds.x;
@@ -122,8 +122,9 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       const frameColor: string = '#C0C0C0';
 
       const seq = gridCell.cell.value;
-      const monomers: Set<string> = new Set<string>(parseHelm(seq));
-      const missedMonomers: Set<string> = findMonomers(seq);
+      const monomerList = 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`}});
@@ -152,7 +153,7 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
         g.font = '12px monospace';
         g.textBaseline = 'top';
         const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
-        const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRow.idx);
+        const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
 
         for (let i = 0; i < allParts.length; ++i) {
           const part: string = allParts[i];

package/src/constants.ts

@@ -1,33 +1,37 @@
 export const jsonSdfMonomerLibDict = {
-    "monomerType": null, 
-    "smiles": null, 
-    "name": "MonomerName", 
-    "author": null, 
-    "molfile": "molecule", 
-    "naturalAnalog": "MonomerNaturalAnalogCode", 
-    "rgroups": "MonomerCaps",
-    "createDate": null, 
-    "id": null, 
-    "polymerType": "MonomerType", 
-    "symbol": "MonomerCode"
-}
+  'monomerType': null,
+  'smiles': null,
+  'name': 'MonomerName',
+  'author': null,
+  'molfile': 'molecule',
+  'naturalAnalog': 'MonomerNaturalAnalogCode',
+  'rgroups': 'MonomerCaps',
+  'createDate': null,
+  'id': null,
+  'polymerType': 'MonomerType',
+  'symbol': 'MonomerCode'
+};
 
 export type WebEditorMonomer = {
-    id: string,     //symbol
-    n: string,      //name
-    na: string,     //natural analog
-    type: string,   //polymer type
-    mt: string,     //monomer type
-    m: string,      //molfile
-    at: {[group: string]: string},   //substituents
-    rs: number      //number of substituents
-  };
+  /** 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";
-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

@@ -14,8 +14,8 @@ export const enum Temps {
 }
 
 export class HelmMonomerPlacer {
-  private _allPartsList: string[][] = null;
-  private _lengthsList: number[][] = null;
+  private _allPartsList: (string[] | null)[] | null = null;
+  private _lengthsList: (number[] | null) [] | null = null;
 
   private monomerLib: IMonomerLib;
 
@@ -30,10 +30,10 @@ export class HelmMonomerPlacer {
   /** @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);
+      this._allPartsList = new Array<string[] | null>(this.col.length).fill(null);
 
     if (this._lengthsList === null)
-      this._lengthsList = new Array<number[]>(this.col.length).fill(null);
+      this._lengthsList = new Array<number[] | null>(this.col.length).fill(null);
 
     const [allParts, lengths] = this.getCellMonomerLengthsForSeq(rowIdx);
 
@@ -45,8 +45,8 @@ export class HelmMonomerPlacer {
   }
 
   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);
+    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;
@@ -58,17 +58,17 @@ export class HelmMonomerPlacer {
 
   getAllParts(rowIdx: number): string[] {
     const seq: string | null = this.col.get(rowIdx);
-    const subParts: string[] = parseHelm(seq);
-    return seq ? getParts(subParts, seq) : [];
+    const monomerList: string[] = seq ? parseHelm(seq) : [];
+    return seq ? getParts(monomerList, seq) : [];
   }
 
   getMonomer(monomerSymbol: any): Monomer | null {
-    let res: Monomer = null;
+    let res: Monomer | null = null;
     for (const polymerType of this.monomerLib.getPolymerTypes()) {
       res = this.monomerLib.getMonomer(polymerType, monomerSymbol);
       if (res) break;
     }
-    return res ?? null;
+    return res;
   }
 
   public static getOrCreate(col: DG.Column<string>): HelmMonomerPlacer {

package/src/helm-web-editor.ts

@@ -7,6 +7,7 @@ export class HelmWebEditor {
   editor: any;
   w = 200;
   h = 100;
+
   constructor() {
     this.host = ui.div([], {style: {width: `${this.w}px`, height: `${this.h}px`}});
     this.editor = new JSDraw2.Editor(this.host, {width: this.w, height: this.h, viewonly: true});
@@ -18,7 +19,9 @@ export class HelmWebEditor {
 
   createWebEditor(value: string) {
     const editorView = ui.div();
+    // @ts-ignore
     org.helm.webeditor.MolViewer.molscale = 0.8;
+    // @ts-ignore
     const webEditor = new scil.helm.App(editorView, {
       showabout: false,
       mexfontsize: '90%',

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

@@ -8,7 +8,7 @@ import {HelmWebEditor} from './helm-web-editor';
 import {HelmCellRenderer} from './cell-renderer';
 import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types';
 import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
-import {findMonomers} from './utils';
+import {findMonomers, parseHelm} from './utils';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
@@ -24,17 +24,17 @@ export async function initHelm(): Promise<void> {
     }),
     grok.functions.call('Bio:getBioLib'),
   ])
-    .then(([_, lib]: [void, IMonomerLib]) => {
+    .then(([_, lib]: [unknown, IMonomerLib]) => {
       monomerLib = lib;
       rewriteLibraries(); // initHelm()
       monomerLib.onChanged.subscribe((_) => {
         try {
           rewriteLibraries(); // initHelm()
 
-          const monTypeList: string[] = monomerLib.getPolymerTypes();
+          const monTypeList: string[] = monomerLib!.getPolymerTypes();
           const msgStr: string = 'Monomer lib updated:<br />' + (
             monTypeList.length == 0 ? 'empty' : monTypeList.map((monType) => {
-              return `${monType} ${monomerLib.getMonomerSymbolsByType(monType).length}`;
+              return `${monType} ${monomerLib!.getMonomerSymbolsByType(monType).length}`;
             }).join('<br />'));
 
           grok.shell.info(msgStr);
@@ -55,16 +55,17 @@ export async function initHelm(): Promise<void> {
 }
 
 export function getMonomerLib(): IMonomerLib {
-  return monomerLib;
+  return monomerLib!;
 }
 
 function rewriteLibraries() {
+  // @ts-ignore
   org.helm.webeditor.Monomers.clear();
-  monomerLib.getPolymerTypes().forEach((polymerType) => {
-    const monomerSymbols = monomerLib.getMonomerSymbolsByType(polymerType);
+  monomerLib!.getPolymerTypes().forEach((polymerType) => {
+    const monomerSymbols = monomerLib!.getMonomerSymbolsByType(polymerType);
     monomerSymbols.forEach((monomerSymbol) => {
       let isBroken = false;
-      const monomer: Monomer = monomerLib.getMonomer(polymerType, monomerSymbol);
+      const monomer: Monomer = monomerLib!.getMonomer(polymerType, monomerSymbol)!;
       const webEditorMonomer: WebEditorMonomer = {
         id: monomerSymbol,
         m: monomer.molfile,
@@ -78,7 +79,7 @@ function rewriteLibraries() {
 
       if (monomer.rgroups.length > 0) {
         webEditorMonomer.rs = monomer.rgroups.length;
-        const at = {};
+        const at: { [prop: string]: any } = {};
         monomer.rgroups.forEach((it) => {
           at[it[RGROUP_LABEL]] = it[RGROUP_CAP_GROUP_NAME];
         });
@@ -90,8 +91,10 @@ function rewriteLibraries() {
         isBroken = true;
       }
 
-      if (!isBroken)
+      if (!isBroken) {
+        // @ts-ignore
         org.helm.webeditor.Monomers.addOneMonomer(webEditorMonomer);
+      }
     });
   });
 
@@ -110,8 +113,9 @@ export function helmCellRenderer(): HelmCellRenderer {
 }
 
 function checkMonomersAndOpenWebEditor(cell?: DG.Cell, value?: string, units?: string) {
-  const cellValue = typeof units === 'undefined' ? cell.value : value;
-  const monomers = findMonomers(cellValue);
+  const cellValue: string = !!cell && units === undefined ? cell.value : value;
+  const monomerList: string[] = parseHelm(cellValue);
+  const monomers = findMonomers(monomerList);
   if (monomers.size == 0) { webEditor(cell, value, units); } else {
     grok.shell.warning(`Monomers ${Array.from(monomers).join(', ')} are absent! <br/>` +
       `Please, upload the monomer library! <br/>` +
@@ -133,7 +137,7 @@ export function editMoleculeCell(cell: DG.GridCell): void {
 //input: string mol { semType: Macromolecule }
 export function openEditor(mol: string): void {
   const df = grok.shell.tv.grid.dataFrame;
-  const col = df.columns.bySemType('Macromolecule');
+  const col = df.columns.bySemType('Macromolecule')!;
   const colUnits = col.getTag(DG.TAGS.UNITS);
   if (colUnits === NOTATION.HELM)
     checkMonomersAndOpenWebEditor(df.currentCell, undefined, undefined);
@@ -148,7 +152,7 @@ export function openEditor(mol: string): void {
 //output: widget result
 export async function propertiesPanel(helmString: string) {
   const grid = grok.shell.tv.grid;
-  const parent = grid.root.parentElement;
+  const parent = grid.root.parentElement!;
   const host = ui.div([]);
   parent.appendChild(host);
   const editor = new JSDraw2.Editor(host, {viewonly: true});
@@ -158,7 +162,7 @@ export async function propertiesPanel(helmString: string) {
   const formula = editor.getFormula(true);
   const molWeight = Math.round(editor.getMolWeight() * 100) / 100;
   const coef = Math.round(editor.getExtinctionCoefficient(true) * 100) / 100;
-  parent.lastChild.remove();
+  parent.lastChild!.remove();
   return new DG.Widget(
     ui.tableFromMap({
       'formula': formula.replace(/<sub>/g, '').replace(/<\/sub>/g, ''),
@@ -171,8 +175,10 @@ export async function propertiesPanel(helmString: string) {
 function webEditor(cell?: DG.Cell, value?: string, units?: string) {
   const view = ui.div();
   const df = grok.shell.tv.grid.dataFrame;
-  const converter = new NotationConverter(df.columns.bySemType('Macromolecule'));
+  const converter = new NotationConverter(df.columns.bySemType('Macromolecule')!);
+  // @ts-ignore
   org.helm.webeditor.MolViewer.molscale = 0.8;
+  // @ts-ignore
   const app = new scil.helm.App(view, {
     showabout: false,
     mexfontsize: '90%',
@@ -196,7 +202,7 @@ function webEditor(cell?: DG.Cell, value?: string, units?: string) {
   app.structureview.resize(sizes.rightwidth, sizes.bottomheight + app.toolbarheight);
   app.mex.resize(sizes.topheight - 80);
   setTimeout(() => {
-    if (typeof units === 'undefined')
+    if (!!cell && units === undefined)
       app.canvas.helm.setSequence(cell.value, 'HELM');
     else
       app.canvas.helm.setSequence(value, 'HELM');
@@ -207,31 +213,35 @@ function webEditor(cell?: DG.Cell, value?: string, units?: string) {
     .onOK(() => {
       const helmValue = app.canvas.getHelm(true).replace(/<\/span>/g, '')
         .replace(/<span style='background:#bbf;'>/g, '');
-      if (typeof units === 'undefined') {
-        cell.value = helmValue;
-      } else {
-        const convertedRes = converter.convertHelmToFastaSeparator(helmValue, units);
-        cell.value = convertedRes;
+      if (!!cell) {
+        if (units === undefined) {
+          cell.value = helmValue;
+        } else {
+          const convertedRes = converter.convertHelmToFastaSeparator(helmValue, units!);
+          cell.value = convertedRes;
+        }
       }
     }).show({modal: true, fullScreen: true});
 }
 
 function getRS(smiles: string) {
   const newS = smiles.match(/(?<=\[)[^\][]*(?=])/gm);
-  const res = {};
+  const res: { [name: string]: string } = {};
   let el = '';
   let digit;
-  for (let i = 0; i < newS.length; i++) {
-    if (newS[i] != null) {
-      if (/\d/.test(newS[i])) {
-        digit = newS[i][newS[i].length - 1];
-        newS[i] = newS[i].replace(/[0-9]/g, '');
-        for (let j = 0; j < newS[i].length; j++) {
-          if (newS[i][j] != ':')
-            el += newS[i][j];
+  if (!!newS) {
+    for (let i = 0; i < newS.length; i++) {
+      if (newS[i] != null) {
+        if (/\d/.test(newS[i])) {
+          digit = newS[i][newS[i].length - 1];
+          newS[i] = newS[i].replace(/[0-9]/g, '');
+          for (let j = 0; j < newS[i].length; j++) {
+            if (newS[i][j] != ':')
+              el += newS[i][j];
+          }
+          res['R' + digit] = el;
+          el = '';
         }
-        res['R' + digit] = el;
-        el = '';
       }
     }
   }
@@ -243,7 +253,7 @@ function getRS(smiles: string) {
 //output: column res
 export function getMolfiles(col: DG.Column): DG.Column {
   const grid = grok.shell.tv.grid;
-  const parent = grid.root.parentElement;
+  const parent = grid.root.parentElement!;
   const res = DG.Column.string('mols', col.length);
   const host = ui.div([]);
   parent.appendChild(host);
@@ -255,7 +265,7 @@ export function getMolfiles(col: DG.Column): DG.Column {
     const mol = editor.getMolfile();
     return mol;
   });
-  parent.lastChild.remove();
+  parent.lastChild!.remove();
   return res;
 }
 

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

@@ -24,7 +24,7 @@ export function getParts(subParts: string[], s: string): string[] {
   return allParts;
 }
 
-export function parseHelm(s: string) {
+export function parseHelm(s: string): string[] {
   const sections = split(s, '$');
   s = sections[0];
   const monomers = [];
@@ -181,8 +181,8 @@ function _detachAppendix(s: string, c: string) {
     }
   }
   if (tag != null)
-    tag = tag.replace(new RegExp('\\' + c, 'g'), c);
-  return {tag: unescape(tag), str: s};
+    tag = unescape(tag.replace(new RegExp('\\' + c, 'g'), c));
+  return {tag: tag, str: s};
 }
 
 function unescape(s: string) {

package/tsconfig.json

@@ -25,7 +25,7 @@
     // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
-    "strict": false,                                 /* Enable all strict type-checking options. */
+    "strict": true,                                 /* Enable all strict type-checking options. */
     // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                    /* Enable strict null checks. */
     // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */

package/webpack.config.js

@@ -13,11 +13,11 @@ module.exports = {
   },
   resolve: {
     fallback: {'url': false},
-    extensions: ['.wasm', '.mjs', '.ts', '.js', '.json', '.tsx'],
+    extensions: ['.ts', '.tsx', '.js', '.wasm', '.mjs', '.json'],
   },
   module: {
     rules: [
-      {test: /\.js$/, enforce: 'pre', use: ['source-map-loader']},
+      {test: /\.js$/, enforce: 'pre', use: ['source-map-loader'], exclude: /node_modules/},
       {test: /\.ts(x?)$/, use: 'ts-loader', exclude: /node_modules/},
       {test: /\.css$/, use: ['style-loader', 'css-loader'], exclude: /node_modules/},
     ],