@datagrok/helm 2.1.25 → 2.1.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.25",
+  "version": "2.1.27",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -15,22 +15,23 @@
     "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.39.18",
+    "@datagrok-libraries/bio": "^5.39.24",
     "@datagrok-libraries/chem-meta": "^1.2.1",
-    "@datagrok-libraries/utils": "^4.0.17",
+    "@datagrok-libraries/utils": "^4.1.42",
     "cash-dom": "^8.1.1",
-    "datagrok-api": "^1.10.2",
+    "datagrok-api": "^1.17.0",
     "dayjs": "^1.10.6",
     "rxjs": "^6.5.5",
     "wu": "latest"
   },
   "devDependencies": {
+    "@types/node": "17.0.45",
     "@types/wu": "latest",
     "path": "^0.12.7",
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.2.6",
     "typescript": "^4.8.4",
-    "webpack": "^5.59.1",
+    "webpack": "^5.76.3",
     "webpack-cli": "^4.9.1",
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",

package/src/cell-renderer.ts

@@ -144,36 +144,6 @@ function getHoveredMonomerFallback(
   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.
  */

package/src/helm-helper.ts

@@ -0,0 +1,62 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {IHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
+import {IHelmWebEditor, IWebEditorApp} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmWebEditor} from './helm-web-editor';
+
+type HelmHelperWindowType = Window & {
+  $helmHelper?: HelmHelper,
+}
+declare const window: HelmHelperWindowType;
+
+export class HelmHelper implements IHelmHelper {
+  createHelmWebEditor(): IHelmWebEditor {
+    return new HelmWebEditor();
+  }
+
+  createWebEditorApp(host: HTMLDivElement, helm: string): IWebEditorApp {
+    // @ts-ignore
+    org.helm.webeditor.MolViewer.molscale = 0.8;
+    // @ts-ignore
+    const webEditorApp = new scil.helm.App(host, {
+      showabout: false,
+      mexfontsize: '90%',
+      mexrnapinontab: true,
+      topmargin: 20,
+      mexmonomerstab: true,
+      sequenceviewonly: false,
+      mexfavoritefirst: true,
+      mexfilter: true
+    }) as IWebEditorApp;
+    const sizes = webEditorApp.calculateSizes();
+    webEditorApp.canvas.resize(sizes.rightwidth - 100, sizes.topheight - 210);
+    let s = {width: sizes.rightwidth - 100 + 'px', height: sizes.bottomheight + 'px'};
+    //@ts-ignore
+    scil.apply(webEditorApp.sequence.style, s);
+    //@ts-ignore
+    scil.apply(webEditorApp.notation.style, s);
+    s = {width: sizes.rightwidth + 'px', height: (sizes.bottomheight + webEditorApp.toolbarheight) + 'px'};
+    //@ts-ignore
+    scil.apply(webEditorApp.properties.parent.style, s);
+    webEditorApp.structureview.resize(sizes.rightwidth, sizes.bottomheight + webEditorApp.toolbarheight);
+    webEditorApp.mex.resize(sizes.topheight - 80);
+    setTimeout(() => {
+      webEditorApp.canvas.helm.setSequence(helm, 'HELM');
+    }, 200);
+    return webEditorApp;
+  }
+
+  // -- Instance singleton --
+
+  public static async getInstance(): Promise<IHelmHelper> {
+    let res: HelmHelper = window.$helmHelper!;
+    if (!res) {
+      // create & init singleton
+      window.$helmHelper = res = new HelmHelper();
+      // await res.init();
+    }
+    return res;
+  }
+}

package/src/helm-web-editor.ts

@@ -2,7 +2,7 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {IHelmWebEditor} from '@datagrok-libraries/bio/src/types/editor';
+import {IHelmWebEditor} from '@datagrok-libraries/bio/src/helm/types';
 
 export class HelmWebEditor implements IHelmWebEditor {
   host: any;
@@ -18,38 +18,5 @@ export class HelmWebEditor implements IHelmWebEditor {
   resizeEditor(w: number, h: number) {
     this.editor.setSize(w, h);
   }
-
-  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%',
-      mexrnapinontab: true,
-      topmargin: 20,
-      mexmonomerstab: true,
-      sequenceviewonly: false,
-      mexfavoritefirst: true,
-      mexfilter: true
-    });
-    const sizes = webEditor.calculateSizes();
-    webEditor.canvas.resize(sizes.rightwidth - 100, sizes.topheight - 210);
-    let s = {width: sizes.rightwidth - 100 + 'px', height: sizes.bottomheight + 'px'};
-    //@ts-ignore
-    scil.apply(webEditor.sequence.style, s);
-    //@ts-ignore
-    scil.apply(webEditor.notation.style, s);
-    s = {width: sizes.rightwidth + 'px', height: (sizes.bottomheight + webEditor.toolbarheight) + 'px'};
-    //@ts-ignore
-    scil.apply(webEditor.properties.parent.style, s);
-    webEditor.structureview.resize(sizes.rightwidth, sizes.bottomheight + webEditor.toolbarheight);
-    webEditor.mex.resize(sizes.topheight - 80);
-    setTimeout(() => {
-      webEditor.canvas.helm.setSequence(value, 'HELM');
-    }, 200);
-    return {editorDiv: editorView, webEditor: webEditor};
-  }
 }
 

package/src/package-test.ts

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

package/src/package.ts

@@ -3,14 +3,18 @@ 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 {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 {IHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
 
 import {findMonomers, parseHelm} from './utils';
-import {HelmWebEditor} from './helm-web-editor';
 import {HelmCellRenderer} from './cell-renderer';
+import {HelmHelper} from './helm-helper';
+import {getPropertiesWidget} from './widgets/properties-widget';
 
 let monomerLib: IMonomerLib | null = null;
 
@@ -18,6 +22,38 @@ import {WebEditorMonomer, RGROUP_CAP_GROUP_NAME, RGROUP_LABEL, SMILES} from './c
 
 export const _package = new DG.Package();
 
+function initHelmPatchDojo(): void {
+  // 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;
+  };
+}
+
 //tags: init
 export async function initHelm(): Promise<void> {
   //@ts-ignore
@@ -27,6 +63,8 @@ export async function initHelm(): Promise<void> {
     new Promise((resolve, reject) => {
       // @ts-ignore
       dojo.ready(function() { resolve(null); });
+    }).then(() => {
+      initHelmPatchDojo();
     }),
     grok.functions.call('Bio:getBioLib'),
   ])
@@ -105,7 +143,7 @@ function rewriteLibraries() {
   });
 
   // Obsolete
-  const grid: DG.Grid = grok.shell.tv.grid;
+  const grid: DG.Grid = grok.shell.tv?.grid;
   if (grid) grid.invalidate();
 }
 
@@ -159,29 +197,11 @@ export function openEditor(mol: string): void {
 }
 
 //name: Properties
-//tags: panel, widgets
-//input: string helmString {semType: Macromolecule}
+//tags: panel, bio, helm, widgets
+//input: semantic_value sequence {semType: Macromolecule}
 //output: widget result
-export async function propertiesPanel(helmString: string) {
-  const grid = grok.shell.tv.grid;
-  const parent = grid.root.parentElement!;
-  const host = ui.div([]);
-  parent.appendChild(host);
-  const editor = new JSDraw2.Editor(host, {viewonly: true});
-  host.style.width = '0px';
-  host.style.height = '0px';
-  editor.setHelm(helmString);
-  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();
-  return new DG.Widget(
-    ui.tableFromMap({
-      'formula': formula.replace(/<sub>/g, '').replace(/<\/sub>/g, ''),
-      'molecular weight': molWeight,
-      'extinction coefficient': coef,
-    })
-  );
+export function propertiesWidget(sequence: DG.SemanticValue): DG.Widget {
+  return getPropertiesWidget(sequence);
 }
 
 function webEditor(cell?: DG.Cell, value?: string, units?: string) {
@@ -265,25 +285,28 @@ function getRS(smiles: string) {
 //input: column col {semType: Macromolecule}
 //output: column res
 export function getMolfiles(col: DG.Column): DG.Column {
-  const grid = grok.shell.tv.grid;
-  const parent = grid.root.parentElement!;
   const res = DG.Column.string('mols', col.length);
-  const host = ui.div([]);
-  parent.appendChild(host);
-  const editor = new JSDraw2.Editor(host, {viewonly: true});
-  host.style.width = '0px';
-  host.style.height = '0px';
-  res.init((i) => {
-    editor.setHelm(col.get(i));
-    const mol = editor.getMolfile();
-    return mol;
-  });
-  parent.lastChild!.remove();
-  return res;
+
+  const host = ui.div([], {style: {width: '0', height: '0'}});
+  document.documentElement.appendChild(host);
+  try {
+    const editor = new JSDraw2.Editor(host, {viewonly: true});
+    res.init((i) => {
+      editor.setHelm(col.get(i));
+      const mol = editor.getMolfile();
+      return mol;
+    });
+    return res;
+  } finally {
+    $(host).empty();
+    host.remove();
+  }
 }
 
-//name: helmWebEditor
+// -- Utils --
+
+//name: getHelmHelper
 //output: object result
-export function helmWebEditor(): HelmWebEditor {
-  return new HelmWebEditor();
+export async function getHelmHelper(): Promise<IHelmHelper> {
+  return HelmHelper.getInstance();
 }

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

@@ -0,0 +1,81 @@
+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 {ALPHABET, NOTATION, TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+
+import {getPropertiesDict} from '../widgets/properties-widget';
+
+const enum MolProps {
+  formula = 'formula',
+  mw = 'molecular weight',
+  extinctCoef = 'extinction coefficient',
+}
+
+const enum Tests {
+  helm = 'Helm',
+  separator = 'separator',
+  separator2 = 'separator2', // with a few gaps in a row
+  separatorGaps = 'separator-gaps',
+  fastaPt = 'fasta-PT',
+  fastaPtMsa = 'fasta-PT-MSA',
+  fastaDna = 'fasta-DNA',
+}
+
+const TestsData: {
+  [testName: string]: { seq: string, units: NOTATION, separator?: string, alphabet?: ALPHABET, res: {} }
+} = {
+  [Tests.helm]: {
+    seq: 'PEPTIDE1{I.H.A.C.T.[Thr_PO3H2].[Aca].[D-Tyr_Et]}|PEPTIDE2{E.A.[meG]}$PEPTIDE1,PEPTIDE2,4:R3-1:R1$$$V2.0',
+    units: NOTATION.HELM,
+    res: {[MolProps.formula]: 'C58H94N13O21SP', [MolProps.mw]: 1372.48, [MolProps.extinctCoef]: 1.55}
+  },
+  [Tests.separator]: {
+    seq: 'I/H/A/C/T/Thr_PO3H2/Aca/D-Tyr_Et',
+    units: NOTATION.SEPARATOR, separator: '/', alphabet: ALPHABET.UN,
+    res: {[MolProps.formula]: 'C47H77N10O15SP', [MolProps.mw]: 1085.21, [MolProps.extinctCoef]: 1.55}
+  },
+  [Tests.separator2]: {
+    seq: 'meI/hHis/Aca/N/T/dK/Thr_PO3H2/Aca/D-Tyr_Et/Aze/dV/E/N////Phe_4Me',
+    units: NOTATION.SEPARATOR, separator: '/', alphabet: ALPHABET.UN,
+    res: {[MolProps.formula]: 'C91H146N19O25P', [MolProps.mw]: 1937.21, [MolProps.extinctCoef]: 1.49},
+  },
+  [Tests.separatorGaps]: {
+    seq: 'I/H/A//T/Thr_PO3H2/Aca/D-Tyr_Et',
+    units: NOTATION.SEPARATOR, separator: '/', alphabet: ALPHABET.UN,
+    res: {[MolProps.formula]: 'C44H72N9O14P', [MolProps.mw]: 982.07, [MolProps.extinctCoef]: 1.49},
+  },
+  [Tests.fastaPt]: {
+    seq: 'IHACTTAY',
+    units: NOTATION.FASTA, alphabet: ALPHABET.PT,
+    res: {[MolProps.formula]: 'C38H58N10O12S', [MolProps.mw]: 878.99, [MolProps.extinctCoef]: 1.55}
+  },
+  [Tests.fastaDna]: {
+    seq: 'ACGTATTCC',
+    units: NOTATION.FASTA, alphabet: ALPHABET.DNA,
+    res: {[MolProps.formula]: 'C87H113N30O56P9', [MolProps.mw]: 2753.76, [MolProps.extinctCoef]: 91.74}
+  }
+};
+
+category('properties-widget', () => {
+  for (const [testName, testData] of Object.entries(TestsData)) {
+    test(testName, async () => {
+      testPropertiesDict(testData.seq, testData.units, testData.separator, testData.alphabet, testData.res);
+    });
+  }
+});
+
+function testPropertiesDict(
+  seq: string, units: NOTATION, separator: string | undefined, alphabet: ALPHABET | undefined, expPropDict: {}
+) {
+  const col = DG.Column.fromList(DG.COLUMN_TYPE.STRING, 'seq', [seq]);
+  col.semType = DG.SEMTYPE.MACROMOLECULE;
+  col.setTag(DG.TAGS.UNITS, units);
+  if (separator) col.setTag(bioTAGS.separator, separator);
+  if (alphabet) col.setTag(bioTAGS.alphabet, alphabet);
+  const uh = UnitsHandler.getOrCreate(col);
+  const actPropDict = getPropertiesDict(seq, uh);
+  expectObject(actPropDict, expPropDict);
+}

package/src/widgets/properties-widget.ts

@@ -0,0 +1,43 @@
+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 {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+
+export function getPropertiesDict(seq: string, uh: UnitsHandler): {} {
+  const helmString = uh.isHelm() ? seq : uh.getConverter(NOTATION.HELM)(seq);
+  // Remove gap symbols for compatibility with WebEditor
+  const helmString2 = helmString.replaceAll(/\.(\*\.)+/g, '.')
+    .replaceAll(/\{(\*\.)+/g, '{').replaceAll(/(\.\*)+}/g, '}');
+
+  const host = ui.div([], {style: {width: '0', height: '0'}});
+  document.documentElement.appendChild(host);
+  try {
+    const editor = new JSDraw2.Editor(host, {viewonly: true});
+    editor.setHelm(helmString2);
+
+    const formula = editor.getFormula(true);
+    const molWeight = Math.round(editor.getMolWeight() * 100) / 100;
+    const coef = Math.round(editor.getExtinctionCoefficient(true) * 100) / 100;
+    return {
+      'formula': formula.replace(/<sub>/g, '').replace(/<\/sub>/g, ''),
+      'molecular weight': molWeight,
+      'extinction coefficient': coef,
+    };
+  } finally {
+    $(host).empty();
+    host.remove();
+  }
+}
+
+
+export function getPropertiesWidget(value: DG.SemanticValue): DG.Widget {
+  const uh = UnitsHandler.getOrCreate(value.cell.column);
+  const propDict = getPropertiesDict(value.value, uh);
+  return new DG.Widget(
+    ui.tableFromMap(propDict)
+  );
+}

package/tsconfig.json

@@ -4,9 +4,9 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es6",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "target": "es2020",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     "module": "es2020",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    "lib": ["ES2022", "dom"],      /* Specify library files to be included in the compilation. */
+    "lib": ["ES2022", "ES2022.String", "dom"],      /* Specify library files to be included in the compilation. */
     "allowJs": true,                                /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
@@ -61,11 +61,12 @@
     // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
 
     /* Experimental Options */
-    // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
+    "experimentalDecorators": true,                 /* Enables experimental support for ES7 decorators. */
+    "emitDecoratorMetadata": true,                  /* Enables experimental support for emitting type metadata for decorators. */
 
     /* Advanced Options */
     "skipLibCheck": false,                          /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true,       /* Disallow inconsistently-cased references to the same file. */
+    //"jsx": "react"
   }
 }