@datagrok/helm 1.0.1 → 1.0.2

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/package.json

@@ -2,16 +2,16 @@
   "name": "@datagrok/helm",
   "beta": false,
   "friendlyName": "Helm",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "dependencies": {
-    "datagrok-api": "latest",
-		"cash-dom": "latest",
-		"dayjs": "latest",
-		"@datagrok-libraries/utils": "latest",
-		"@datagrok-libraries/bio": "^2.8.2",
-		"ts-loader": "^9.2.5",
-		"typescript": "^4.4.2"
+    "datagrok-api": "^1.4.12",
+    "cash-dom": "latest",
+    "dayjs": "latest",
+    "@datagrok-libraries/utils": "latest",
+    "@datagrok-libraries/bio": "^2.8.3",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.2"
   },
   "sources": [
     "css/helm.css",
@@ -21,21 +21,29 @@
     "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "devDependencies": {
-    "webpack": "latest",
-    "webpack-cli": "latest",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "eslint": "latest",
+    "eslint-config-google": "latest",
     "ts-loader": "latest",
-    "typescript": "latest"
+    "typescript": "latest",
+    "webpack": "latest",
+    "webpack-cli": "latest"
   },
   "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"
   },
   "canEdit": [
     "Developers"

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

@@ -4,12 +4,12 @@ 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 {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>();
 
 
 //tags: init
@@ -17,7 +17,7 @@ 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); });
   });
 }
 
@@ -25,54 +25,57 @@ export async function initChem(): Promise<void> {
 //description: Macromolecule
 //input: grid_cell cell
 export function editMoleculeCell(cell: DG.GridCell): void {
-  let view = ui.div();
+  const 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 });
-  var sizes = app.calculateSizes();
+  const app = new scil.helm.App(view, {
+    showabout: false,
+    mexfontsize: '90%',
+    mexrnapinontab: true,
+    topmargin: 20,
+    mexmonomerstab: true,
+    sequenceviewonly: false,
+    mexfavoritefirst: true,
+    mexfilter: true
+  });
+  const sizes = app.calculateSizes();
   app.canvas.resize(sizes.rightwidth, sizes.topheight - 210);
-  var s = { width: sizes.rightwidth + "px", height: sizes.bottomheight + "px" };
+  let 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);
-  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(() => {
-      cell.cell.value = app.canvas.getHelm(true);
-    }).show({ modal: true, fullScreen: true});
+
+  let dialogValue: string;
+  if (cell.gridColumn.column.tags[DG.TAGS.UNITS] === 'HELM') {
+    dialogValue = cell.cell.value;
+  } else {
+    const converter: NotationConverter = new NotationConverter(cell.cell.column);
+    dialogValue = converter.convertStringToHelm(cell.cell.value);
   }
-  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
-    ui.dialog({ showHeader: false, showFooter: true })
+
+  setTimeout(function() {
+    app.canvas.helm.setSequence(dialogValue, 'HELM');
+  }, 200);
+  //@ts-ignore
+  ui.dialog({showHeader: false, showFooter: true})
     .add(view)
     .onOK(() => {
       cell.cell.value;
-    }).show({ modal: true, fullScreen: true});
-  }
+    }).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, ''),
@@ -84,24 +87,24 @@ export function detailsPanel(helmString: string){
       'smiles': ui.wait(async () => ui.divText(await helmToSmiles(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, '');
   //@ts-ignore
   res = res.map((e) => e.path);
   //@ts-ignore
-  let FilesList = await ui.choiceInput('Monomer Libraries', ' ', res);
-  let grid = grok.shell.tv.grid;
+  const FilesList = await ui.choiceInput('Monomer Libraries', ' ', res);
+  const grid = grok.shell.tv.grid;
   ui.dialog('Load library from file')
-  .add(FilesList)
-  .onOK(async () => {
-    await monomerManager(FilesList.value);
-    grid.invalidate()
-  }).show();
+    .add(FilesList)
+    .onOK(async () => {
+      await monomerManager(FilesList.value);
+      grid.invalidate();
+    }).show();
 };
 
 //name: Library
@@ -110,14 +113,14 @@ async function loadDialog () {
 //output: widget result
 export function libraryPanel(helmString: string) {
   //@ts-ignore
-  let loadButton = ui.button('Load Library');
+  const 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', 
+    method: 'GET',
     headers: {
       'Accept': 'application/json',
     }
@@ -132,7 +135,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');
 }
 
@@ -141,7 +144,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');
 }
 
@@ -151,7 +154,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');
 }
 
@@ -160,24 +163,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 = '';
@@ -190,18 +192,18 @@ 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++){
+  let m;
+  for (let i = 0; i < df.rowCount; i++) {
     m = {
-      'id': df.get('symbol', i).toString(), 
+      '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()),
-    }
+      '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);
   }
 }
@@ -212,41 +214,48 @@ export function helmColumnToSmiles(helmColumn: DG.Column) {
   //todo: add column with smiles to col.dataFrame.
 }
 
+// Synonym to overcome eslint error
+const GetMonomerSet = scil.helm.Monomers.getMonomerSet;
+
 //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 monomerNames = [];
+  for (let i = 0; i < types.length; i++) {
+    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,44 @@
 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')
+    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('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('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');
   });
 });