@datagrok/helm 0.0.4 → 1.0.1

package/package.json

@@ -1,48 +1,52 @@
 {
-	"name": "@datagrok/helm",
-	"beta": false,
-	"friendlyName": "Helm",
-	"version": "0.0.4",
-	"description": "",
-	"dependencies": {
-		"datagrok-api": "latest",
+  "name": "@datagrok/helm",
+  "beta": false,
+  "friendlyName": "Helm",
+  "version": "1.0.1",
+  "description": "",
+  "dependencies": {
+    "datagrok-api": "latest",
 		"cash-dom": "latest",
 		"dayjs": "latest",
-		"@datagrok-libraries/utils": "latest"
-	},
-	"sources": [
-		"css/helm.css",
-		"https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js",
-		"helm/JSDraw/Scilligence.JSDraw2.Lite.js",
-		"helm/JSDraw/Scilligence.JSDraw2.Resources.js",
-		"helm/JSDraw/Pistoia.HELM-uncompressed.js"
-	],
-	"devDependencies": {
-		"webpack": "latest",
-		"webpack-cli": "latest",
-		"ts-loader": "latest",
-		"typescript": "latest"
-	},
-	"scripts": {
-		"link-all": "",
-		"debug-helm": "webpack && grok publish ",
-		"release-helm": "webpack && grok publish --release",
-		"build-helm": "webpack",
-		"build": "webpack",
-		"debug-helm-dev": "grok publish dev --rebuild",
-		"release-helm-dev": "grok publish dev --rebuild --release",
-		"debug-helm-public": "grok publish public --rebuild",
-		"release-helm-public": "grok publish public --rebuild --release"
-	},
-	"canEdit": [
-		"Developers"
-	],
-	"canView": [
-		"All users"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/datagrok-ai/public.git",
-		"directory": "packages/Helm"
-	}
+		"@datagrok-libraries/utils": "latest",
+		"@datagrok-libraries/bio": "^2.8.2",
+		"ts-loader": "^9.2.5",
+		"typescript": "^4.4.2"
+  },
+  "sources": [
+    "css/helm.css",
+    "https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js",
+    "helm/JSDraw/Scilligence.JSDraw2.Lite.js",
+    "helm/JSDraw/Scilligence.JSDraw2.Resources.js",
+    "helm/JSDraw/Pistoia.HELM-uncompressed.js"
+  ],
+  "devDependencies": {
+    "webpack": "latest",
+    "webpack-cli": "latest",
+    "ts-loader": "latest",
+    "typescript": "latest"
+  },
+  "scripts": {
+    "link-all": "npm link datagrok-api  @datagrok-libraries/utils",
+    "debug-helm": "webpack && grok publish ",
+    "release-helm": "webpack && grok publish --release",
+    "build-helm": "webpack",
+    "build": "webpack",
+    "debug-helm-dev": "grok publish dev --rebuild",
+    "release-helm-dev": "grok publish dev --rebuild --release",
+    "debug-helm-public": "grok publish public --rebuild",
+    "release-helm-public": "grok publish public --rebuild --release"
+  },
+  "canEdit": [
+    "Developers"
+  ],
+  "canView": [
+    "All users"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/datagrok-ai/public.git",
+    "directory": "packages/Helm"
+  },
+  "category": "Bioinformatics"
 }

package/src/package-test.ts

@@ -1,13 +1,18 @@
 import * as DG from "datagrok-api/dg";
 import * as grok from "datagrok-api/grok";
 import {runTests, tests} from '@datagrok-libraries/utils/src/test';
+import './tests/helm-tests.ts'
+
+export const _package = new DG.Package();
+export {tests};
 
-export let _package = new DG.Package();
-export {tests}
 
 //name: test
+//input: string category {optional: true}
+//input: string test {optional: true}
 //output: dataframe result
-export async function test(): Promise<DG.DataFrame> {
-  let data = await runTests();
+//top-menu: Tools | Dev | JS API Tests
+export async function test(category: string, test: string): Promise<DG.DataFrame> {
+  const data = await runTests({category, test});
   return DG.DataFrame.fromObjects(data)!;
-}
+}

package/src/package.ts

@@ -2,9 +2,15 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
+//import {lru} from '../../Bio/src/utils/cell-renderer';
+import {NotationConverter, NOTATION} from '@datagrok-libraries/bio/src/utils/notation-converter';
+//import {ConverterFunc, DfReaderFunc} from '../../Bio/src/tests/types';
 
 export const _package = new DG.Package();
 
+const lru = new DG.LruCache<any, any>(); 
+
+
 
 //tags: init
 export async function initChem(): Promise<void> {
@@ -15,73 +21,217 @@ export async function initChem(): Promise<void> {
   });
 }
 
-
-//name: helmCellRenderer
-//tags: cellRenderer,cellRenderer-HELM
-//meta.cellType: HELM
-//meta-cell-renderer-sem-type: HELM
-//output: grid_cell_renderer result
-export function helmCellRenderer(): DG.GridCellRenderer {
-  return new HelmCellRenderer();
-}
-
 //tags: cellEditor
-//description: HELM
+//description: Macromolecule
 //input: grid_cell cell
 export function editMoleculeCell(cell: DG.GridCell): void {
   let view = ui.div();
-  let app: { canvas: { helm: { setSequence: (arg0: any, arg1: string) => void; }; }; };
-  setTimeout(function () {
+  org.helm.webeditor.MolViewer.molscale = 0.8;
+  let app = new scil.helm.App(view, { showabout: false, mexfontsize: "90%", mexrnapinontab: true, topmargin: 20, mexmonomerstab: true, sequenceviewonly: false, mexfavoritefirst: true, mexfilter: true });
+  var sizes = app.calculateSizes();
+  app.canvas.resize(sizes.rightwidth, sizes.topheight - 210);
+  var s = { width: sizes.rightwidth + "px", height: sizes.bottomheight + "px" };
+  //@ts-ignore
+  scil.apply(app.sequence.style, s);
+  //@ts-ignore
+  scil.apply(app.notation.style, s);
+  s = { width: sizes.rightwidth + "px", height: (sizes.bottomheight + app.toolbarheight) + "px" };
+  //@ts-ignore
+  scil.apply(app.properties.parent.style, s);
+  app.structureview.resize(sizes.rightwidth, sizes.bottomheight + app.toolbarheight);
+  app.mex.resize(sizes.topheight - 80);
+  if (cell.gridColumn.column.tags[DG.TAGS.UNITS] === "HELM"){
+    setTimeout(function() {
+      app.canvas.helm.setSequence(cell.cell.value , 'HELM');
+    }, 200);
     //@ts-ignore
-    org.helm.webeditor.MolViewer.molscale = 0.8;
-    //@ts-ignore
-    app = new scil.helm.App(view, { showabout: false, mexfontsize: "90%", mexrnapinontab: true, topmargin: 20, mexmonomerstab: true, sequenceviewonly: false, mexfavoritefirst: true, mexfilter: true });
-  });
-  setTimeout(function() {
+    ui.dialog({ showHeader: false, showFooter: true })
+    .add(view)
+    .onOK(() => {
+      cell.cell.value = app.canvas.getHelm(true);
+    }).show({ modal: true, fullScreen: true});
+  }
+  else if (cell.gridColumn.column.tags[DG.TAGS.UNITS] === "fasta:SEQ:PT") {
+    const converter = new NotationConverter(cell.gridColumn.column);
+    const resStr = converter.convertFastaStringToHelm(null, null, cell.cell.value);
+    setTimeout(function() {
+      app.canvas.helm.setSequence(resStr , 'HELM');
+    }, 200);
     //@ts-ignore
-    app.canvas.helm.setSequence(cell.cell.value , 'HELM');
-  }, 200);
-
-  let dlg = ui.dialog()
-  .add(view)
-  .onOK(() => {
-    view;
-  }).show({ modal: true, fullScreen: true});
-  dlg.root.children[0].remove();
-  dlg.root.children[1].classList.remove('ui-panel'); 
-  dlg.root.children[1].classList.remove('ui-box');
+    ui.dialog({ showHeader: false, showFooter: true })
+    .add(view)
+    .onOK(() => {
+      cell.cell.value;
+    }).show({ modal: true, fullScreen: true});
+  }
+}
+
+//name: Details
+//tags: panel, widgets
+//input: string helmString {semType: Macromolecule}
+//output: widget result
+export function detailsPanel(helmString: string){
+  //return new DG.Widget(ui.divText(lru.get(helmString)));
+  var result = lru.get(helmString).split(',');
+  return new DG.Widget(
+    ui.tableFromMap({
+      'formula': result[0].replace(/<sub>/g, '').replace(/<\/sub>/g, ''),
+      'molecular weight': result[1],
+      'extinction coefficient': result[2],
+      'molfile': result[3],
+      'fasta': ui.wait(async () => ui.divText(await helmToFasta(helmString))),
+      'rna analogue sequence': ui.wait(async () => ui.divText(await helmToRNA(helmString))),
+      'smiles': ui.wait(async () => ui.divText(await helmToSmiles(helmString))),
+      //'peptide analogue sequence': ui.wait(async () => ui.divText(await helmToPeptide(helmString))),
+    })
+  )
+}
+
+
+async function loadDialog () {
+  //@ts-ignore
+  let res = await grok.dapi.files.list('System:AppData/Helm', false, '');
+  //@ts-ignore
+  res = res.map((e) => e.path);
+  //@ts-ignore
+  let FilesList = await ui.choiceInput('Monomer Libraries', ' ', res);
+  let grid = grok.shell.tv.grid;
+  ui.dialog('Load library from file')
+  .add(FilesList)
+  .onOK(async () => {
+    await monomerManager(FilesList.value);
+    grid.invalidate()
+  }).show();
+};
+
+//name: Library
+//tags: panel, widgets
+//input: string helmString {semType: Macromolecule}
+//output: widget result
+export function libraryPanel(helmString: string) {
+  //@ts-ignore
+  let loadButton = ui.button('Load Library');
+  loadButton.addEventListener('click', loadDialog);
+  return new DG.Widget(ui.divH([loadButton]));
+}
+
+async function accessServer(url: string, key: string) {
+  const params: RequestInit = {
+    method: 'GET', 
+    headers: {
+      'Accept': 'application/json',
+    }
+  };
+  const response = await fetch(url, params);
+  const json = await response.json();
+  return json[key];
+}
+
+
+//name: helmToFasta
+//input: string helmString {semType: Macromolecule}
+//output: string res
+export async function helmToFasta(helmString: string) {
+  const url = `http://localhost:8081/WebService/service/Fasta/Produce/${helmString}`
+  return await accessServer(url, 'FastaFile');
+}
+
+//name: helmToRNA
+//description: converts to rna analogue sequence
+//input: string helmString {semType: Macromolecule}
+//output: string res
+export async function helmToRNA(helmString: string) {
+  const url = `http://localhost:8081/WebService/service/Fasta/Convert/RNA/${helmString}`
+  return await accessServer(url, 'Sequence');
+}
+
+
+//name: helmToPeptide
+//description: converts to peptide analogue sequence
+//input: string helmString {semType: Macromolecule}
+//output: string res
+export async function helmToPeptide(helmString: string) {
+  const url = `http://localhost:8081/WebService/service/Fasta/Convert/PEPTIDE/${helmString}`
+  return await accessServer(url, 'Sequence');
 }
 
 //name: helmToSmiles
-//tags: converter
+//description: converts to smiles
+//input: string helmString {semType: Macromolecule}
 //output: string smiles {semType: Molecule}
-export function helmToSmiles(helm: string): string {
-  //todo: call webservice
-  return 'foo';
+export async function helmToSmiles(helmString: string) {
+  const url = `http://localhost:8081/WebService/service/SMILES/${helmString}`
+  return await accessServer(url, 'SMILES');
 }
 
-//name: helmToFasta
-//tags: converter
-//output: string smiles {semType: fasta}
-export function helmToFasta(helm: string): string {
-  return 'foo';
+function getRS(smiles: string) {
+  var new_s = smiles.match(/(?<=\[)[^\][]*(?=])/gm);
+  var res = {};
+  var el = '';
+  var digit;
+  for (var i = 0; i < new_s.length; i++) {
+    if (new_s[i] != null){
+      if (/\d/.test(new_s[i])) {
+        digit = new_s[i][new_s[i].length - 1];
+        new_s[i] = new_s[i].replace(/[0-9]/g, '');
+        for (var j = 0; j < new_s[i].length; j++) {
+            if (new_s[i][j] != ':'){
+                el += new_s[i][j];
+            }
+        }
+        res['R' + digit] = el;
+        el = '';
+      }
+    }
+  }
+  return res;
 }
 
+async function monomerManager(value: string) {
+  const file = await _package.files.readAsText(value.split('/')[1]);
+  const df = DG.DataFrame.fromJson(file);
+  var m;
+  for (var i = 0; i < df.rowCount; i++){
+    m = {
+      'id': df.get('symbol', i).toString(), 
+      'n': df.get('name', i).toString(),
+      'na': df.get('naturalAnalog', i).toString(),
+      'type': df.get('polymerType', i).toString(),
+      'mt': df.get('monomerType', i).toString(), 
+      'm': df.get('molfile', i).toString(), 
+      rs: Object.keys(getRS(df.get('smiles', i).toString())).length,
+      at: getRS(df.get('smiles', i).toString()),
+    }
+    org.helm.webeditor.Monomers.addOneMonomer(m);
+  }
+}
 
 //name: helmColumnToSmiles
-//input: column helmColumn {semType: HELM}
+//input: column helmColumn {semType: Macromolecule}
 export function helmColumnToSmiles(helmColumn: DG.Column) {
   //todo: add column with smiles to col.dataFrame.
 }
 
-// todo: "Details" panel (see Toxicity)
-// smiles, mol weight, mol formula, extinction coefficient, "combined"
-
+//name: findMonomers
+//input: string helmString { semType: Macromolecule }
+export async function findMonomers(helmString: string) {
+  const types = Object.keys(org.helm.webeditor.monomerTypeList());
+  const monomers = [];
+  const monomer_names = [];
+  for (var i = 0; i < types.length; i++) {
+    monomers.push(new scil.helm.Monomers.getMonomerSet(types[i]));
+    Object.keys(monomers[i]).forEach(k => {
+      monomer_names.push(monomers[i][k].id);
+    });
+  }
+  const split_string = helmString.match(/[^\s.,\/\\(){}$]+/gim);
+  return new Set(split_string.filter(val => !monomer_names.includes(val)));
+}
 
 class HelmCellRenderer extends DG.GridCellRenderer {
 
-  get name() { return 'helm'; }
-  get cellType() { return 'helm'; }
+  get name() { return 'macromolecule'; }
+  get cellType() { return 'macromolecule'; }
   get defaultWidth(): number | null { return 400; }
   get defaultHeight(): number | null { return 100; }
 
@@ -91,7 +241,12 @@ class HelmCellRenderer extends DG.GridCellRenderer {
     host.setAttribute('data', gridCell.cell.value);
 
     gridCell.element = host;
-    // @ts-ignore
-    new JSDraw2.Editor(host, { width: w, height: h, skin: "w8", viewonly: true });
+    var canvas = new JSDraw2.Editor(host, { width: w, height: h, skin: "w8", viewonly: true });
+    var formula = canvas.getFormula(true);
+    var molWeight = Math.round(canvas.getMolWeight() * 100) / 100;
+    var coef = Math.round(canvas.getExtinctionCoefficient(true) * 100) / 100;
+    var molfile = canvas.getMolfile();
+    var result = formula + ', ' + molWeight + ', ' + coef + ', ' + molfile;
+    lru.set(gridCell.cell.value, result);
   }
 }

package/src/tests/helm-tests.ts

@@ -0,0 +1,43 @@
+import {before, category, expect, test} from '@datagrok-libraries/utils/src/test';
+import { helmToFasta, helmToPeptide, helmToRNA } from '../package';
+import { _package } from '../package-test';
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+
+
+category('Helm', () => {
+
+  test('helmToFasta', async () => {
+    expect(await helmToFasta('RNA1{R(U)P.R(T)P.R(G)P.R(C)P.R(A)}$$$$'), '>RNA1UTGCA');
+    expect(await helmToFasta('RNA1{P.R(U).P.R(T)}$$$$'), '>RNA1UT');
+    expect(await helmToFasta('PEPTIDE1{A.G}$$$$V2.0'), '>PEPTIDE1AG')
+  });
+
+  test('helmToRNA', async () => {
+    expect(await helmToRNA('RNA1{R(U)P.R(T)P.R(G)P.R(C)P.R(A)}$$$$'), 'UTGCA');
+    expect(await helmToRNA('RNA1{P.R(U).P.R(T)}$$$$'), 'UT');
+    expect(await helmToRNA('RNA1{R(U)P.R(T)P}|RNA2{P.R(A)P.R(A)}$RNA1,RNA2,2:pair-6:pair|RNA1,RNA2,5:pair-3:pair$$$'), 'UT AA');
+  });
+
+  test('helmToPeptide', async () => {
+    expect(await helmToPeptide('PEPTIDE1{A.G}$$$$V2.0'), 'AG');
+    expect(await helmToPeptide('PEPTIDE1{L.V.A}|PEPTIDE2{L.V.A}$$$$'), 'LVA LVA');
+    expect(await helmToPeptide('PEPTIDE1{A.R.C.A.A.K.T.C.D.A}$PEPTIDE1,PEPTIDE1,8:R3-3:R3$$$'), 'ARCAAKTCDA');
+  });
+
+  test('detectMacromolecule', async () => {
+    const file = await _package.files.readAsText('test.csv')
+    const df = DG.DataFrame.fromCsv(file);
+    let col = df.columns.byName('HELM string');
+    await grok.data.detectSemanticTypes(df);
+    expect(col.semType, DG.SEMTYPE.MACROMOLECULE);
+  });
+
+  test('detectHelm', async () => {
+    const file = await _package.files.readAsText('test.csv')
+    const df = DG.DataFrame.fromCsv(file);
+    let col = df.columns.byName('HELM string');
+    await grok.data.detectSemanticTypes(df);
+    expect(col.tags[DG.TAGS.UNITS], "HELM");
+  });
+});

package/tsconfig.json

@@ -7,7 +7,7 @@
     "target": "es6",                                /* 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": ["es2020", "dom"],                       /* Specify library files to be included in the compilation. */
-    // "allowJs": true,                             /* Allow javascript files to be compiled. */
+    "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'. */
     // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
@@ -25,7 +25,7 @@
     // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
-    "strict": true,                                 /* Enable all strict type-checking options. */
+    "strict": false,                                 /* 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

@@ -4,15 +4,28 @@ const packageName = path.parse(require('./package.json').name).name.toLowerCase(
 module.exports = {
   mode: 'development',
   entry: {
-    test: {filename: 'package-test.js', library: {type: 'var', name:`${packageName}_test`}, import: './src/package-test.ts'},
-    package: './src/package.ts'
+    package: './src/package.ts',
+    test: {
+      filename: 'package-test.js',
+      library: {type: 'var', name: `${packageName}_test`},
+      import: './src/package-test.ts',
+    },
   },
   resolve: {
     extensions: ['.wasm', '.mjs', '.js', '.json', '.ts', '.tsx'],
   },
   module: {
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader' }
+      {
+        test: /\.ts(x?)$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+        exclude: /node_modules/,
+      },
     ],
   },
   devtool: 'inline-source-map',