@datagrok/helm 1.0.0 → 1.0.3

package/.eslintignore

@@ -0,0 +1,2 @@
+src/**/*.d.ts*
+src/seq_align.ts

package/.eslintrc.json

@@ -0,0 +1,51 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "google"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "indent": [
+      "error",
+      2
+    ],
+    "max-len": [
+      "error",
+      120
+    ],
+    "no-unused-vars": "warn",
+    "require-jsdoc": "off",
+    "spaced-comment": "off",
+    "linebreak-style": "off",
+    "curly": [
+      "error",
+      "multi-or-nest",
+      "consistent"
+    ],
+    "brace-style": [
+      "error",
+      "1tbs",
+      {
+        "allowSingleLine": true
+      }
+    ],
+    "block-spacing": [2, "always"],
+    "comma-dangle": ["error", {
+      "arrays": "only-multiline",
+      "functions": "never",
+      "objects": "only-multiline",
+      "imports": "only-multiline"
+    }],
+    "guard-for-in": "off"
+  }
+}

package/files/{samples → tests}/test.csv

@@ -1,6 +1,6 @@
-ID,Test type,HELM string,Valid?,Mol Weight,Mol Formula,SMILES
-RNA,Simple RNA ,RNA1{R(U)P.R(T)P.R(G)P.R(C)P.R(A)}$$$$,yes,1543.98,C48H61N17O34P4,[H]OCC1OC(N2C=CC(=O)NC2=O)C(O)C1OP(=O)(O)OCC3OC(N4C=C(C(=O)NC4=O)C)C(O)C3OP(=O)(O)OCC5OC(N6C=NC=7C(=O)NC(=NC76)N)C(O)C5OP(=O)(O)OCC8OC(N9C=CC(=NC9=O)N)C(O)C8OP(=O)(O)OCC%10OC(N%11C=NC=%12C(=NC=NC%12%11)N)C(O)C%10O[H] 
-Different arrangements of dots,Only dots beween the backbone monomers,RNA1{P.R(U)P.R(T)}$$$$,yes,644.37,C19H26N4O17P2,OP(O)(OC[C@H]1O[C@@H](N(C2=O)C=CC(N2)=O)[C@H](O)[C@@H]1OP(O)(OC[C@H]3O[C@@H](N(C4=O)C=C(C)C(N4)=O)[C@H](O)[C@@H]3O[H])=O)=O
-Different arrangements of dots,Dot after the branch,RNA1{P.R(U).P.R(T)}$$$$,yes,644.37,C19H26N4O17P2,OP(O)(OC[C@H]1O[C@@H](N(C2=O)C=CC(N2)=O)[C@H](O)[C@@H]1OP(O)(OC[C@H]3O[C@@H](N(C4=O)C=C(C)C(N4)=O)[C@H](O)[C@@H]3O[H])=O)=O
-Hydrogen bonding,RNA with hydrogen bonding,"RNA1{R(A)P.R(C)P.R(G)P}|RNA2{P.R(C)P.R(G)P.R(T)}$RNA1,RNA2,2:pair-9:pair|RNA1,RNA2,5:pair-6:pair|RNA1,RNA2,8:pair-3:pair$$$",yes,1986.2,C58H77N23O44P6,NA
+ID,Test type,HELM string,Valid?,Mol Weight,Mol Formula,SMILES
+RNA,Simple RNA ,RNA1{R(U)P.R(T)P.R(G)P.R(C)P.R(A)}$$$$,yes,1543.98,C48H61N17O34P4,[H]OCC1OC(N2C=CC(=O)NC2=O)C(O)C1OP(=O)(O)OCC3OC(N4C=C(C(=O)NC4=O)C)C(O)C3OP(=O)(O)OCC5OC(N6C=NC=7C(=O)NC(=NC76)N)C(O)C5OP(=O)(O)OCC8OC(N9C=CC(=NC9=O)N)C(O)C8OP(=O)(O)OCC%10OC(N%11C=NC=%12C(=NC=NC%12%11)N)C(O)C%10O[H] 
+Different arrangements of dots,Only dots beween the backbone monomers,RNA1{P.R(U)P.R(T)}$$$$,yes,644.37,C19H26N4O17P2,OP(O)(OC[C@H]1O[C@@H](N(C2=O)C=CC(N2)=O)[C@H](O)[C@@H]1OP(O)(OC[C@H]3O[C@@H](N(C4=O)C=C(C)C(N4)=O)[C@H](O)[C@@H]3O[H])=O)=O
+Different arrangements of dots,Dot after the branch,RNA1{P.R(U).P.R(T)}$$$$,yes,644.37,C19H26N4O17P2,OP(O)(OC[C@H]1O[C@@H](N(C2=O)C=CC(N2)=O)[C@H](O)[C@@H]1OP(O)(OC[C@H]3O[C@@H](N(C4=O)C=C(C)C(N4)=O)[C@H](O)[C@@H]3O[H])=O)=O
+Hydrogen bonding,RNA with hydrogen bonding,"RNA1{R(A)P.R(C)P.R(G)P}|RNA2{P.R(C)P.R(G)P.R(T)}$RNA1,RNA2,2:pair-9:pair|RNA1,RNA2,5:pair-6:pair|RNA1,RNA2,8:pair-3:pair$$$",yes,1986.2,C58H77N23O44P6,NA
 Hydrogen bonding,Shorter RNA with H bonding,"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$$$",yes,1320.8,C39H52N14O30P4,NA

package/jest.config.js

@@ -0,0 +1,34 @@
+module.exports = {
+  "roots": [
+    "<rootDir>/src"
+  ],
+  "testMatch": [
+    "**/__jest__/**/*.test.+(ts|tsx)"
+  ],
+  moduleFileExtensions: [
+    'ts',
+    'js',
+  ],
+  "transform": {
+    "^.+\\.(ts|tsx)$": "ts-jest"
+  },
+  transformIgnorePatterns: ['^.+\\.js$'],
+  globals: {
+    'ts-jest': {
+      'tsconfig': {
+          "target": "es6",
+          "module": "es2020",
+      }
+    }
+  },
+  reporters: [
+    "default",
+    [
+      "./node_modules/jest-html-reporter",
+      {
+        "includeConsoleLog": true,
+        "includeFailureMsg": true
+      }
+    ]
+  ]
+}

package/package.json

@@ -2,13 +2,16 @@
   "name": "@datagrok/helm",
   "beta": false,
   "friendlyName": "Helm",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "",
   "dependencies": {
     "datagrok-api": "^1.4.12",
     "cash-dom": "latest",
     "dayjs": "latest",
-    "@datagrok-libraries/utils": "latest <1.2.0"
+    "@datagrok-libraries/utils": "latest",
+    "@datagrok-libraries/bio": "^2.8.3",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.2"
   },
   "sources": [
     "css/helm.css",
@@ -18,21 +21,39 @@
     "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "eslint": "latest",
+    "eslint-config-google": "latest",
+    "ts-loader": "latest",
+    "typescript": "latest",
     "webpack": "latest",
     "webpack-cli": "latest",
-    "ts-loader": "latest",
-    "typescript": "latest"
+    "@types/jest": "^27.0.0",
+    "jest": "^27.0.0",
+    "jest-html-reporter": "^3.5.0",
+    "puppeteer": "^13.7.0",
+    "ts-jest": "^27.0.0",
+    "@types/js-yaml": "^4.0.5",
+    "@types/node-fetch": "^2.6.1"
   },
   "scripts": {
-    "link-all": "npm link datagrok-api  @datagrok-libraries/utils",
+    "link-all": "npm link datagrok-api  @datagrok-libraries/utils @datagrok-libraries/bio",
     "debug-helm": "webpack && grok publish ",
     "release-helm": "webpack && grok publish --release",
     "build-helm": "webpack",
     "build": "webpack",
+    "debug-local": "grok publish local",
+    "release-local": "grok publish local --release",
     "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"
+    "release-helm-public": "grok publish public --rebuild --release",
+    "lint": "eslint \"./src/**/*.ts\"",
+    "lint-fix": "eslint \"./src/**/*.ts\" --fix",
+    "test": "set HOST=dev && jest",
+    "test-dev": "set HOST=dev && jest",
+    "test-local": "set HOST=localhost && jest"
   },
   "canEdit": [
     "Developers"

package/src/__jest__/remote.test.ts

@@ -0,0 +1,68 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as utils from './test-node';
+import puppeteer from 'puppeteer';
+
+const P_START_TIMEOUT: number = 100000;
+let browser: puppeteer.Browser;
+let page: puppeteer.Page;
+
+beforeAll(async () => {
+  let out = await utils.getBrowserPage(puppeteer);
+  browser = out.browser;
+  page = out.page;
+}, P_START_TIMEOUT);
+
+afterAll(async () => {
+  await browser?.close();
+});
+
+expect.extend({
+  checkOutput(received, expected, context) {
+    if (received === expected) {
+      return {
+        message: () => context,
+        pass: true
+      };
+    } else {
+      return {
+        message: () => context,
+        pass: false
+      };
+    }
+  }
+});
+
+it('TEST', async () => {
+  const targetPackage:string = process.env.TARGET_PACKAGE ?? 'Helm';
+  console.log(`Testing ${targetPackage} package`);
+
+  let r = await page.evaluate((targetPackage):Promise<object> => {
+    return new Promise<object>((resolve, reject) => {
+      (<any>window).grok.functions.eval(targetPackage + ':test()').then((df: any) => {
+        let cStatus = df.columns.byName('success');
+        let cMessage = df.columns.byName('result');
+        let cCat = df.columns.byName('category');
+        let cName = df.columns.byName('name');
+        let failed = false;
+        let passReport = '';
+        let failReport = '';
+        for (let i = 0; i < df.rowCount; i++) {
+          if (cStatus.get(i)) {
+            passReport += `Test result : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
+          } else {
+            failed = true;
+            failReport += `Test result : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
+          }
+        }
+        resolve({failReport, passReport, failed});
+      }).catch((e: any) => reject(e));
+    });
+  }, targetPackage);
+  // @ts-ignore
+  console.log(r.passReport);
+  // @ts-ignore
+  expect(r.failed).checkOutput(false, r.failReport);
+}, 100000);

package/src/__jest__/test-node.ts

@@ -0,0 +1,95 @@
+import * as path from "path";
+import * as os from "os";
+import * as fs from "fs";
+import * as yaml from 'js-yaml';
+import fetch from 'node-fetch';
+
+export async function getToken(url: string, key: string) {
+  let response = await fetch(`${url}/users/login/dev/${key}`, {method: 'POST'});
+  let json = await response.json() as Record<string, any>;
+  if (json.isSuccess == true)
+    return json.token;
+  else
+    throw 'Unable to login to server. Check your dev key';
+}
+
+export async function getWebUrl(url: string, token: string) {
+  let response = await fetch(`${url}/admin/plugins/admin/settings`, {headers: {Authorization: token}});
+  let json = await response.json() as Record<string, any>;
+  return json.settings.webRoot;
+}
+
+const grokDir = path.join(os.homedir(), '.grok');
+const confPath = path.join(grokDir, 'config.yaml');
+
+function mapURL(conf: Config): Indexable {
+  let urls: Indexable = {};
+  for (let server in conf.servers) {
+    urls[conf['servers'][server]['url']] = conf['servers'][server];
+  }
+  return urls;
+}
+
+export function getDevKey(hostKey: string): {url: string, key: string} {
+  let config = yaml.load(fs.readFileSync(confPath, 'utf8')) as any;
+  let host = hostKey == '' ? config.default : hostKey;
+  host = host.trim();
+  let urls = mapURL(config);
+  let key = '';
+  let url = '';
+  try {
+    let url = new URL(host).href;
+    if (url.endsWith('/')) url = url.slice(0, -1);
+    if (url in urls) key = config['servers'][urls[url]]['key'];
+  } catch (error) {
+    if (config['servers'][host] == null)
+      throw `Unknown server alias. Please add it to ${confPath}`;
+    url = config['servers'][host]['url'];
+    key = config['servers'][host]['key'];
+  }
+  return {url, key};
+}
+
+export async function getBrowserPage(puppeteer: any): Promise<{browser: any, page: any}> {
+  let url:string = process.env.HOST ?? '';
+  let cfg = getDevKey(url);
+  url = cfg.url;
+
+  let key = cfg.key;
+  let token = await getToken(url, key);
+  url = await getWebUrl(url, token);
+  console.log(`Using web root: ${url}`);
+
+  let browser = await puppeteer.launch({
+    args: ['--disable-dev-shm-usage', '--disable-features=site-per-process'],
+    ignoreHTTPSErrors: true,
+  });
+
+  let page = await browser.newPage();
+  await page.goto(`${url}/oauth/`);
+  await page.setCookie({name: 'auth', value: token});
+  await page.evaluate((token: any) => {
+    window.localStorage.setItem('auth', token);
+  }, token);
+  await page.goto(url);
+  try {
+    await page.waitForSelector('.grok-preloader');
+    await page.waitForFunction(() => document.querySelector('.grok-preloader') == null, {timeout: 100000});
+  } catch (error) {
+    throw error;
+  }
+  return {browser, page};
+}
+
+
+interface Config {
+  servers: {
+    [alias: string]: {
+      url: string,
+      key: string
+    }
+  },
+  default: string,
+}
+
+interface Indexable { [key: string]: any }

package/src/constants.ts

@@ -0,0 +1,31 @@
+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"
+}
+
+export const MONOMER_MANAGER_MAP = {
+    'id': 'symbol', 
+    'n': 'name',
+    'na': 'naturalAnalog',
+    'type': 'polymerType',
+    'mt': 'monomerType', 
+    'm': 'molfile', 
+}
+
+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";

package/src/package-test.ts

@@ -1,7 +1,7 @@
-import * as DG from "datagrok-api/dg";
-import * as grok from "datagrok-api/grok";
+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'
+import './tests/helm-tests.ts';
 
 export const _package = new DG.Package();
 export {tests};

package/src/package.ts

@@ -2,17 +2,27 @@
 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 {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {createJsonMonomerLibFromSdf} from './utils';
+import {MONOMER_MANAGER_MAP, RGROUPS, RGROUP_CAP_GROUP_NAME, RGROUP_LABEL, SMILES} from './constants';
+//import {ConverterFunc, DfReaderFunc} from '../../Bio/src/tests/types';
 
 export const _package = new DG.Package();
 
-const lru = new DG.LruCache<any, any>(); 
+const lru = new DG.LruCache<any, any>();
+const STORAGE_NAME = 'Libraries';
+let i = 0;
+const LIB_PATH = 'libraries/';
+
 
 //tags: init
 export async function initChem(): Promise<void> {
   // apparently HELMWebEditor requires dojo to be initialized first
   return new Promise((resolve, reject) => {
     // @ts-ignore
-    dojo.ready(function () { resolve(null); });
+    dojo.ready(function() { resolve(null); });
   });
 }
 
@@ -22,78 +32,120 @@ export async function initChem(): Promise<void> {
 export function editMoleculeCell(cell: DG.GridCell): void {
   let view = ui.div();
   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 });
+  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" };
+  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" };
+  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);
-  setTimeout(function() {
-    app.canvas.helm.setSequence(cell.cell.value , 'HELM');
-  }, 200);
-  //@ts-ignore
-  ui.dialog({ showHeader: false, showFooter: true })
-  .add(view)
-  .onOK(() => {
-    cell.cell.value = app.canvas.getHelm(true);
-  }).show({ modal: true, fullScreen: true});
+  if (cell.gridColumn.column.tags[DG.TAGS.UNITS] === 'HELM') {
+    setTimeout(function() {
+      app.canvas.helm.setSequence(cell.cell.value, 'HELM');
+    }, 200);
+    //@ts-ignore
+    ui.dialog({showHeader: false, showFooter: true})
+      .add(view)
+      .onOK(() => {
+        const val = app.canvas.getHelm(true).replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
+        cell.cell.value = val;
+      }).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.convertStringToHelm(cell.cell.value, '-', '*');
+    setTimeout(function() {
+      app.canvas.helm.setSequence(resStr, 'HELM');
+    }, 200);
+    //@ts-ignore
+    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){
+export function detailsPanel(helmString: string) {
   //return new DG.Widget(ui.divText(lru.get(helmString)));
-  var result = lru.get(helmString).split(',');
+  const 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))),
+      '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))),*/
+      //'peptide analogue sequence': ui.wait(async () => ui.divText(await helmToPeptide(helmString))),
     })
-  )
+  );
 }
 
 
-async function loadDialog () {
+async function loadDialog() {
   //@ts-ignore
-  let res = await grok.dapi.files.list('System:AppData/Helm', false, '');
+  let res = await grok.dapi.files.list('System:AppData/Helm/libraries', 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(() => monomerManager(FilesList.value)).show();
+    .add(FilesList)
+    .onOK(async () => {
+      await monomerManager(FilesList.value);
+      grok.dapi.userDataStorage.postValue(STORAGE_NAME, i.toString(), FilesList.value, true);
+      i += 1;
+      grid.invalidate();
+    }).show();
 };
 
-//name: Library
+//name: Manage Libraries
 //tags: panel, widgets
-//input: string helmString {semType: Macromolecule}
+//input: column helmColumn {semType: Macromolecule}
 //output: widget result
-export function libraryPanel(helmString: string) {
+export async function libraryPanel(helmColumn: DG.Column) {
   //@ts-ignore
   let loadButton = ui.button('Load Library');
   loadButton.addEventListener('click', loadDialog);
-  return new DG.Widget(ui.divH([loadButton]));
+  let list = (await grok.dapi.files.list('System:AppData/Helm/libraries', false, '')).toString().split(',');
+  let usedLibraries = [];
+  for (let j = 0; j <= i; j++) {
+    usedLibraries.push(await grok.dapi.userDataStorage.getValue(STORAGE_NAME, j.toString(), true));
+  }
+  let unusedLibraries = list.filter(x => !usedLibraries.includes(x));
+  return new DG.Widget(
+    ui.tableFromMap({
+      'Uploaded libraries': ui.divText(usedLibraries.toString()),
+      'Not used libraries': ui.divText(unusedLibraries.toString()),
+      'Upload new library': ui.divH([loadButton]),
+    })
+  );
 }
 
 async function accessServer(url: string, key: string) {
   const params: RequestInit = {
-    method: 'GET', 
+    method: 'GET',
     headers: {
       'Accept': 'application/json',
     }
@@ -108,7 +160,7 @@ async function accessServer(url: string, key: string) {
 //input: string helmString {semType: Macromolecule}
 //output: string res
 export async function helmToFasta(helmString: string) {
-  const url = `http://localhost:8081/WebService/service/Fasta/Produce/${helmString}`
+  const url = `http://localhost:8081/WebService/service/Fasta/Produce/${helmString}`;
   return await accessServer(url, 'FastaFile');
 }
 
@@ -117,7 +169,7 @@ export async function helmToFasta(helmString: string) {
 //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}`
+  const url = `http://localhost:8081/WebService/service/Fasta/Convert/RNA/${helmString}`;
   return await accessServer(url, 'Sequence');
 }
 
@@ -127,7 +179,7 @@ export async function helmToRNA(helmString: string) {
 //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}`
+  const url = `http://localhost:8081/WebService/service/Fasta/Convert/PEPTIDE/${helmString}`;
   return await accessServer(url, 'Sequence');
 }
 
@@ -136,24 +188,23 @@ export async function helmToPeptide(helmString: string) {
 //input: string helmString {semType: Macromolecule}
 //output: string smiles {semType: Molecule}
 export async function helmToSmiles(helmString: string) {
-  const url = `http://localhost:8081/WebService/service/SMILES/${helmString}`
+  const url = `http://localhost:8081/WebService/service/SMILES/${helmString}`;
   return await accessServer(url, 'SMILES');
 }
 
 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];
-            }
+  const newS = smiles.match(/(?<=\[)[^\][]*(?=])/gm);
+  const res = {};
+  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];
         }
         res['R' + digit] = el;
         el = '';
@@ -164,22 +215,36 @@ function getRS(smiles: string) {
 }
 
 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()),
+  let df: any[];
+  const libName = value.substring(value.lastIndexOf('/') + 1);
+  if (value.endsWith('.sdf')) {
+    const file = await _package.files.readAsBytes(`${LIB_PATH}${libName}`);
+    const dfSdf = await grok.functions.call('Chem:importSdf', {bytes: file});
+    df = createJsonMonomerLibFromSdf(dfSdf[0]);
+
+  } else {
+    const file = await _package.files.readAsText(`${LIB_PATH}${libName}`);
+    df = JSON.parse(file);
+  }
+
+  df.forEach(monomer => {
+    const m = {};
+    Object.keys(MONOMER_MANAGER_MAP).forEach(field => {
+      m[field] = monomer[MONOMER_MANAGER_MAP[field]] ?? '';
+    });
+    if (monomer[RGROUPS]) {
+      m['rs'] = monomer[RGROUPS].length;
+      const at = {};
+      monomer[RGROUPS].forEach(it => {
+        at[it[RGROUP_LABEL]] = it[RGROUP_CAP_GROUP_NAME];
+      });
+      m['at'] = at;
+    } else {
+      m['rs'] = Object.keys(getRS(df[SMILES].toString())).length;
+      m['at'] = getRS(df[SMILES].toString());
     }
     org.helm.webeditor.Monomers.addOneMonomer(m);
-  }
+  });
 }
 
 //name: helmColumnToSmiles
@@ -193,36 +258,42 @@ export function helmColumnToSmiles(helmColumn: DG.Column) {
 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 monomerNames = [];
+  for (let i = 0; i < types.length; i++) {
+    // Synonym to overcome eslint error
+    const GetMonomerSet = scil.helm.Monomers.getMonomerSet;
+    monomers.push(new GetMonomerSet(types[i]));
+    Object.keys(monomers[i]).forEach((k) => {
+      monomerNames.push(monomers[i][k].id);
     });
   }
-  const split_string = helmString.match(/[^\s.,\/\\(){}$]+/gim);
-  return new Set(split_string.filter(val => !monomer_names.includes(val)));
+  const splitString = WebLogo.splitterAsHelm(helmString);
+  return new Set(splitString.filter((val) => !monomerNames.includes(val)));
 }
 
 class HelmCellRenderer extends DG.GridCellRenderer {
-
   get name() { return 'macromolecule'; }
+
   get cellType() { return 'macromolecule'; }
+
   get defaultWidth(): number | null { return 400; }
+
   get defaultHeight(): number | null { return 100; }
 
-  render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell, cellStyle: DG.GridCellStyle) {
-    let host = ui.div([], { style: { width: `${w}px`, height: `${h}px`}});
+  render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
+    gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
+  ) {
+    const host = ui.div([], {style: {width: `${w}px`, height: `${h}px`}});
     host.setAttribute('dataformat', 'helm');
     host.setAttribute('data', gridCell.cell.value);
 
     gridCell.element = host;
-    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;
+    const canvas = new JSDraw2.Editor(host, {width: w, height: h, skin: 'w8', viewonly: true});
+    const formula = canvas.getFormula(true);
+    const molWeight = Math.round(canvas.getMolWeight() * 100) / 100;
+    const coef = Math.round(canvas.getExtinctionCoefficient(true) * 100) / 100;
+    const molfile = canvas.getMolfile();
+    const result = formula + ', ' + molWeight + ', ' + coef + ', ' + molfile;
     lru.set(gridCell.cell.value, result);
   }
 }

package/src/tests/helm-tests.ts

@@ -1,43 +1,46 @@
 import {before, category, expect, test} from '@datagrok-libraries/utils/src/test';
-import { helmToFasta, helmToPeptide, helmToRNA } from '../package';
-import { _package } from '../package-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');
-  });
+  // These tests require webservice that is not present on test stand
+  // 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');
+  //   // eslint-disable-next-line max-len
+  //   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');
+  //   // eslint-disable-next-line max-len
+  //   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 file = await _package.files.readAsText('tests/test.csv');
     const df = DG.DataFrame.fromCsv(file);
-    let col = df.columns.byName('HELM string');
+    const 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 file = await _package.files.readAsText('tests/test.csv');
     const df = DG.DataFrame.fromCsv(file);
-    let col = df.columns.byName('HELM string');
+    const col = df.columns.byName('HELM string');
     await grok.data.detectSemanticTypes(df);
-    expect(col.tags[DG.TAGS.UNITS], "HELM");
+    expect(col.tags[DG.TAGS.UNITS], 'HELM');
   });
 });

package/src/utils.ts

@@ -0,0 +1,35 @@
+import * as DG from 'datagrok-api/dg';
+import { RGROUP_CAP_GROUP_NAME, RGROUP_CAP_GROUP_SMILES, jsonSdfMonomerLibDict, MONOMER_SYMBOL, RGROUP_ALTER_ID, RGROUPS, RGROUP_LABEL, SDF_MONOMER_NAME } from "./constants";
+
+export function createJsonMonomerLibFromSdf(table: DG.DataFrame): any {
+    const resultLib = [];
+    for (let i = 0; i < table.rowCount; i++) {
+      const monomer: { [key: string]: string | any } = {};
+      Object.keys(jsonSdfMonomerLibDict).forEach(key => {
+        if (key === MONOMER_SYMBOL) {
+          const monomerSymbol = table.get(jsonSdfMonomerLibDict[key], i);
+          monomer[key] = monomerSymbol === '.' ? table.get(SDF_MONOMER_NAME, i) : monomerSymbol;
+        } else if (key === RGROUPS) {
+          const rgroups = table.get(jsonSdfMonomerLibDict[key], i).split('\n');
+          const jsonRgroups: any[] = [];
+          rgroups.forEach((g: string) => {
+            const rgroup: { [key: string]: string | any } = {};
+            const altAtom = g.substring(g.lastIndexOf("]") + 1);
+            let radicalNum = g.match(/\[R(\d+)\]/)![1];
+            rgroup[RGROUP_CAP_GROUP_SMILES] = altAtom === 'H' ? `[*:${radicalNum}][H]` : `O[*:${radicalNum}]`;
+            rgroup[RGROUP_ALTER_ID] = altAtom === 'H' ? `R${radicalNum}-H` : `R${radicalNum}-OH`;
+            rgroup[RGROUP_CAP_GROUP_NAME] = altAtom === 'H' ? `H` : `OH`;
+            rgroup[RGROUP_LABEL] = `R${radicalNum}`;
+            jsonRgroups.push(rgroup);
+          })
+          monomer[key] = jsonRgroups;
+        } else {
+          if((jsonSdfMonomerLibDict as { [key: string]: string | any })[key]) {
+            monomer[key] = table.get((jsonSdfMonomerLibDict as { [key: string]: string | any })[key], i);
+          }
+        }
+      })
+      resultLib.push(monomer);
+    }
+    return resultLib;
+  }

package/test-Helm-34f75e5127b8-f7696845.html

@@ -0,0 +1,251 @@
+<html><head><meta charset="utf-8"/><title>Helm Test Report. Datagrok version datagrok/datagrok:latest SHA=34f75e5127b8. Commit f7696845.</title><style type="text/css">html,
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1rem;
+  margin: 0;
+  padding: 0;
+  color: #333;
+}
+body {
+  padding: 2rem 1rem;
+  font-size: 0.85rem;
+}
+#jesthtml-content {
+  margin: 0 auto;
+  max-width: 70rem;
+}
+header {
+  display: flex;
+  align-items: center;
+}
+#title {
+  margin: 0;
+  flex-grow: 1;
+}
+#logo {
+  height: 4rem;
+}
+#timestamp {
+  color: #777;
+  margin-top: 0.5rem;
+}
+
+/** SUMMARY */
+#summary {
+  color: #333;
+  margin: 2rem 0;
+  display: flex;
+  font-family: monospace;
+  font-size: 1rem;
+}
+#summary > div {
+  margin-right: 2rem;
+  background: #eee;
+  padding: 1rem;
+  min-width: 15rem;
+}
+#summary > div:last-child {
+  margin-right: 0;
+}
+@media only screen and (max-width: 720px) {
+  #summary {
+    flex-direction: column;
+  }
+  #summary > div {
+    margin-right: 0;
+    margin-top: 2rem;
+  }
+  #summary > div:first-child {
+    margin-top: 0;
+  }
+}
+
+.summary-total {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+.summary-passed {
+  color: #4f8a10;
+  border-left: 0.4rem solid #4f8a10;
+  padding-left: 0.5rem;
+}
+.summary-failed,
+.summary-obsolete-snapshots {
+  color: #d8000c;
+  border-left: 0.4rem solid #d8000c;
+  padding-left: 0.5rem;
+}
+.summary-pending {
+  color: #9f6000;
+  border-left: 0.4rem solid #9f6000;
+  padding-left: 0.5rem;
+}
+.summary-empty {
+  color: #999;
+  border-left: 0.4rem solid #999;
+}
+
+.test-result {
+  padding: 1rem;
+  margin-bottom: 0.25rem;
+}
+.test-result:last-child {
+  border: 0;
+}
+.test-result.passed {
+  background-color: #dff2bf;
+  color: #4f8a10;
+}
+.test-result.failed {
+  background-color: #ffbaba;
+  color: #d8000c;
+}
+.test-result.pending {
+  background-color: #ffdf61;
+  color: #9f6000;
+}
+
+.test-info {
+  display: flex;
+  justify-content: space-between;
+}
+.test-suitename {
+  width: 20%;
+  text-align: left;
+  font-weight: bold;
+  word-break: break-word;
+}
+.test-title {
+  width: 40%;
+  text-align: left;
+  font-style: italic;
+}
+.test-status {
+  width: 20%;
+  text-align: right;
+}
+.test-duration {
+  width: 10%;
+  text-align: right;
+  font-size: 0.75rem;
+}
+
+.failureMessages {
+  padding: 0 1rem;
+  margin-top: 1rem;
+  border-top: 1px dashed #d8000c;
+}
+.failureMessages.suiteFailure {
+  border-top: none;
+}
+.failureMsg {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+
+.suite-container {
+  margin-bottom: 2rem;
+}
+.suite-info {
+  padding: 1rem;
+  background-color: #eee;
+  color: #777;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+.suite-info .suite-path {
+  word-break: break-all;
+  flex-grow: 1;
+  font-family: monospace;
+  font-size: 1rem;
+}
+.suite-info .suite-time {
+  margin-left: 0.5rem;
+  padding: 0.2rem 0.3rem;
+  font-size: 0.75rem;
+}
+.suite-info .suite-time.warn {
+  background-color: #d8000c;
+  color: #fff;
+}
+
+/* CONSOLE LOGS */
+.suite-consolelog {
+  margin-bottom: 0.25rem;
+  padding: 1rem;
+  background-color: #efefef;
+}
+.suite-consolelog-header {
+  font-weight: bold;
+}
+.suite-consolelog-item {
+  padding: 0.5rem;
+}
+.suite-consolelog-item pre {
+  margin: 0.5rem 0;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+.suite-consolelog-item-origin {
+  color: #777;
+  font-weight: bold;
+}
+.suite-consolelog-item-message {
+  color: #000;
+  font-size: 1rem;
+  padding: 0 0.5rem;
+}
+
+/* OBSOLETE SNAPSHOTS */
+.suite-obsolete-snapshots {
+  margin-bottom: 0.25rem;
+  padding: 1rem;
+  background-color: #ffbaba;
+  color: #d8000c;
+}
+.suite-obsolete-snapshots-header {
+  font-weight: bold;
+}
+.suite-obsolete-snapshots-item {
+  padding: 0.5rem;
+}
+.suite-obsolete-snapshots-item pre {
+  margin: 0.5rem 0;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+.suite-obsolete-snapshots-item-message {
+  color: #000;
+  font-size: 1rem;
+  padding: 0 0.5rem;
+}
+</style></head><body><div id="jesthtml-content"><header><h1 id="title">Helm Test Report. Datagrok version datagrok/datagrok:latest SHA=34f75e5127b8. Commit f7696845.</h1></header><div id="metadata-container"><div id="timestamp">Started: 2022-07-15 13:16:11</div><div id="summary"><div id="suite-summary"><div class="summary-total">Suites (1)</div><div class="summary-passed summary-empty">0 passed</div><div class="summary-failed">1 failed</div><div class="summary-pending summary-empty">0 pending</div></div><div id="test-summary"><div class="summary-total">Tests (1)</div><div class="summary-passed summary-empty">0 passed</div><div class="summary-failed">1 failed</div><div class="summary-pending summary-empty">0 pending</div></div></div></div><div id="suite-1" class="suite-container"><div class="suite-info"><div class="suite-path">/home/runner/work/public/public/packages/Helm/src/__jest__/remote.test.ts</div><div class="suite-time warn">12.196s</div></div><div class="suite-tests"><div class="test-result failed"><div class="test-info"><div class="test-suitename"> </div><div class="test-title">TEST</div><div class="test-status">failed</div><div class="test-duration">1.124s</div></div><div class="failureMessages"> <pre class="failureMsg">Error: Test result : Helm.Helm.detectMacromolecule : Error: Expected "Macromolecule", got "null"
+Test result : Helm.Helm.detectHelm : Error: Expected "HELM", got "null"
+
+    at /home/runner/work/public/public/packages/Helm/src/__jest__/remote.test.ts:67:20
+    at Generator.next (&lt;anonymous&gt;)
+    at fulfilled (/home/runner/work/public/public/packages/Helm/src/__jest__/remote.test.ts:31:58)
+    at processTicksAndRejections (internal/process/task_queues.js:97:5)</pre></div></div></div><div class="suite-consolelog"><div class="suite-consolelog-header">Console Log</div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at Object.&lt;anonymous&gt; (/home/runner/work/public/public/packages/Helm/src/__jest__/test-node.ts:61:11)
+    at Generator.next (&lt;anonymous&gt;)
+    at fulfilled (/home/runner/work/public/public/packages/Helm/src/__jest__/test-node.ts:28:58)
+    at processTicksAndRejections (internal/process/task_queues.js:97:5)</pre><pre class="suite-consolelog-item-message">Using web root: http://localhost:8080</pre></div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at /home/runner/work/public/public/packages/Helm/src/__jest__/remote.test.ts:40:11
+    at Generator.next (&lt;anonymous&gt;)
+    at /home/runner/work/public/public/packages/Helm/src/__jest__/remote.test.ts:34:71
+    at new Promise (&lt;anonymous&gt;)
+    at Object.&lt;anonymous&gt;.__awaiter (/home/runner/work/public/public/packages/Helm/src/__jest__/remote.test.ts:30:12)
+    at Object.&lt;anonymous&gt; (/home/runner/work/public/public/packages/Helm/src/__jest__/remote.test.ts:38:23)
+    at Promise.then.completed (/home/runner/work/public/public/packages/Helm/node_modules/jest-circus/build/utils.js:391:28)
+    at new Promise (&lt;anonymous&gt;)</pre><pre class="suite-consolelog-item-message">Testing Helm package</pre></div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at /home/runner/work/public/public/packages/Helm/src/__jest__/remote.test.ts:65:11
+    at Generator.next (&lt;anonymous&gt;)
+    at fulfilled (/home/runner/work/public/public/packages/Helm/src/__jest__/remote.test.ts:31:58)
+    at processTicksAndRejections (internal/process/task_queues.js:97:5)</pre><pre class="suite-consolelog-item-message"/></div></div></div></div></body></html>

package/webpack.config.js

@@ -16,7 +16,16 @@ module.exports = {
   },
   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',