@datagrok/helm 2.1.24 → 2.1.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.24",
+  "version": "2.1.26",
   "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/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

@@ -7,10 +7,12 @@ 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;
 
@@ -159,29 +161,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) {
@@ -282,8 +266,10 @@ export function getMolfiles(col: DG.Column): DG.Column {
   return res;
 }
 
-//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/utils/index.ts

@@ -46,14 +46,16 @@ export function parseHelm(s: string): string[] {
       for (const monomer of ss) {
         if (!monomer || monomer === '') continue;
         if (monomer.startsWith('[') && monomer.includes(']')) {
-          const element = monomer.substring(1, monomer.indexOf(']'));
+          const closingIndex = findClosing(monomer, 1, '[', ']');
+          const element = monomer.substring(1, closingIndex);
           monomers.push(element);
-          const residue = monomer.substring(monomer.indexOf(']') + 1);
+          const residue = monomer.substring(closingIndex + 1);
           ss.push(residue);
         } else if (monomer.includes('[') && monomer.endsWith(']')) {
-          const element = monomer.substring(monomer.lastIndexOf('[') + 1, monomer.length - 1);
+          const openingIndex = findOpening(monomer, monomer.length - 2, '[', ']');
+          const element = monomer.substring(openingIndex + 1, monomer.length - 1);
           monomers.push(element);
-          const residue = monomer.substring(0, monomer.lastIndexOf('['));
+          const residue = monomer.substring(0, openingIndex);
           ss.push(residue);
         } else if (monomer.includes('(') && monomer.includes(')')) {
           // here we only want to split the string at first '(' and last ')'
@@ -64,9 +66,8 @@ export function parseHelm(s: string): string[] {
           const elements = [firstPiece, secondPiece, thirdPiece];
           for (const el of elements)
             ss.push(el);
-        } else {
+        } else
           monomers.push(monomer);
-        }
       }
     }
   }
@@ -111,6 +112,40 @@ export function findMonomers(monomerSymbolList: string[]): Set<string> {
   return new Set(monomerSymbolList.filter((val) => !monomerNames.includes(val)));
 }
 
+function findClosing(s: string, start: number, open: string, close: string) {
+  let i = start;
+  let count = 0;
+  while (i < s.length) {
+    if (s[i] === open)
+      count++;
+
+    if (s[i] === close) {
+      if (count === 0)
+        return i;
+      count--;
+    }
+    i++;
+  }
+  return -1;
+}
+
+function findOpening(s: string, start: number, open: string, close: string) {
+  let i = start;
+  let count = 0;
+  while (i >= 0) {
+    if (s[i] === close)
+      count++;
+
+    if (s[i] === open) {
+      if (count === 0)
+        return i;
+      count--;
+    }
+    i--;
+  }
+  return -1;
+}
+
 function split(s: string, sep: string) {
   const ret = [];
   let frag = '';
@@ -136,19 +171,18 @@ function split(s: string, sep: string) {
       if (c == '\"') {
         if (!(i > 0 && s.substring(i - 1, i) == '\\'))
           quote = quote == 0 ? 1 : 0;
-      } else if (c == '[') {
+      } else if (c == '[')
         ++bracket;
-      } else if (c == ']') {
+      else if (c == ']')
         --bracket;
-      } else if (c == '(') {
+      else if (c == '(')
         ++parentheses;
-      } else if (c == ')') {
+      else if (c == ')')
         --parentheses;
-      } else if (c == '{') {
+      else if (c == '{')
         ++braces;
-      } else if (c == '}') {
+      else if (c == '}')
         --braces;
-      }
     }
   }
   ret.push(frag);

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'}});
+  try {
+    document.documentElement.appendChild(host);
+    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"
   }
 }