@datagrok/helm 2.0.0 → 2.0.3

package/helm/JSDraw/test.html

@@ -15,6 +15,9 @@
 <script type="text/javascript">
   dojo.ready(function () {
     var jsd = new JSDraw("Div2", { width: 800, height: 400, skin: "w8", viewonly: true });
+    var mol = jsd.getMolfile();
+    var m = new JSDraw2.Mol();
+    console.log(JSDraw2.FormulaParser.getAtomStats(m.setMolfile(mol)));
   });
 </script>
 </body>

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@datagrok/helm",
-  "beta": false,
   "friendlyName": "Helm",
-  "version": "2.0.0",
+  "version": "2.0.3",
+  "author": {
+    "name": "Oleksandra Serhiienko",
+    "email": "oserhiienko@datagrok.ai"
+  },
   "description": "",
   "dependencies": {
-    "datagrok-api": "^1.4.12",
-    "cash-dom": "latest",
-    "dayjs": "latest",
-    "@datagrok-libraries/utils": "^1.4.0",
-    "@datagrok-libraries/bio": "^2.8.4",
-    "ts-loader": "^9.2.5",
-    "typescript": "^4.4.2"
+    "datagrok-api": "^1.6.0",
+    "cash-dom": "^8.1.1",
+    "dayjs": "^1.10.6",
+    "@datagrok-libraries/utils": "^1.6.2",
+    "@datagrok-libraries/bio": "^3.1.1"
+
   },
   "sources": [
     "css/helm.css",
@@ -21,21 +23,24 @@
     "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",
     "@types/jest": "^27.0.0",
     "jest": "^27.0.0",
-    "jest-html-reporter": "^3.5.0",
+    "jest-html-reporter": "^3.6.0",
+    "path": "^0.12.7",
     "puppeteer": "^13.7.0",
     "ts-jest": "^27.0.0",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.4.4",
+    "webpack": "^5.59.1",
+    "webpack-cli": "^4.9.1",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
+    "eslint": "^8.18.0",
+    "eslint-config-google": "^0.14.0",
     "@types/js-yaml": "^4.0.5",
-    "@types/node-fetch": "^2.6.1"
+    "js-yaml": "^4.1.0",
+    "@types/node-fetch": "^2.6.2",
+    "node-fetch": "^2.6.7"
   },
   "scripts": {
     "link-all": "npm link datagrok-api  @datagrok-libraries/utils @datagrok-libraries/bio",
@@ -51,7 +56,7 @@
     "release-helm-public": "grok publish public --release",
     "lint": "eslint \"./src/**/*.ts\"",
     "lint-fix": "eslint \"./src/**/*.ts\" --fix",
-    "test": "set HOST=dev && jest",
+    "test": "jest",
     "test-dev": "set HOST=dev && jest",
     "test-local": "set HOST=localhost && jest"
   },

package/src/__jest__/remote.test.ts

@@ -5,7 +5,7 @@
 import * as utils from './test-node';
 import puppeteer from 'puppeteer';
 
-const P_START_TIMEOUT: number = 100000;
+const P_START_TIMEOUT: number = 3600000;
 let browser: puppeteer.Browser;
 let page: puppeteer.Page;
 
@@ -51,10 +51,10 @@ it('TEST', async () => {
         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`;
+            passReport += `Test result : Success : ${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`;
+            failReport += `Test result : Failed : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
           }
         }
         resolve({failReport, passReport, failed});
@@ -65,4 +65,4 @@ it('TEST', async () => {
   console.log(r.passReport);
   // @ts-ignore
   expect(r.failed).checkOutput(false, r.failReport);
-}, 100000);
+}, 3600000);

package/src/__jest__/test-node.ts

@@ -66,6 +66,7 @@ export async function getBrowserPage(puppeteer: any): Promise<{browser: any, pag
   });
 
   let page = await browser.newPage();
+  await page.setDefaultNavigationTimeout(0);
   await page.goto(`${url}/oauth/`);
   await page.setCookie({name: 'auth', value: token});
   await page.evaluate((token: any) => {
@@ -73,8 +74,8 @@ export async function getBrowserPage(puppeteer: any): Promise<{browser: any, pag
   }, token);
   await page.goto(url);
   try {
-    await page.waitForSelector('.grok-preloader');
-    await page.waitForFunction(() => document.querySelector('.grok-preloader') == null, {timeout: 100000});
+    await page.waitForSelector('.grok-preloader', { timeout: 1800000 });
+    await page.waitForFunction(() => document.querySelector('.grok-preloader') == null, {timeout: 3600000});
   } catch (error) {
     throw error;
   }

package/src/package-test.ts

@@ -11,7 +11,6 @@ export {tests};
 //input: string category {optional: true}
 //input: string test {optional: true}
 //output: dataframe result
-//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,16 +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 {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
 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';
+import {printLeftOrCentered} from '@datagrok-libraries/bio/src/utils/cell-renderer';
 
 export const _package = new DG.Package();
 
 const lru = new DG.LruCache<any, any>();
+const molfiles = new DG.LruCache<any, any>();
 const STORAGE_NAME = 'Libraries';
 let i = 0;
 const LIB_PATH = 'libraries/';
@@ -24,22 +23,24 @@ export async function initHelm(): Promise<void> {
     await monomerManager(await grok.dapi.userDataStorage.getValue(STORAGE_NAME, j.toString(), true));
   }
   grid.invalidate();
+  
+  return new Promise((resolve, reject) => {
+    // @ts-ignore
+    dojo.ready(function() { resolve(null); });
+  });
 }
 
-//name: initHelp
-export function initHelp(){
-  return;
+//name: helmCellRenderer
+//tags: cellRenderer
+//meta.cellType: helm
+//meta.columnTags: units=helm
+//output: grid_cell_renderer result
+export function helmCellRenderer(): HelmCellRenderer {
+  return new HelmCellRenderer();
 }
 
-//name: getLru
-export async function getLru() {
-  return await grok.functions.call('Bio:Lru');
-}
 
-//tags: cellEditor
-//description: Macromolecule
-//input: grid_cell cell
-export function editMoleculeCell(cell: DG.GridCell): void {
+export function webEditor(value: string) {
   let view = ui.div();
   org.helm.webeditor.MolViewer.molscale = 0.8;
   let app = new scil.helm.App(view, {
@@ -64,55 +65,72 @@ export function editMoleculeCell(cell: DG.GridCell): void {
   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(() => {
-        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});
+  setTimeout(function() {
+    app.canvas.helm.setSequence(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, '');
+    value = val;
+  }).show({modal: true, fullScreen: true});
+}
+
+
+//tags: cellEditor
+//description: Macromolecule
+//input: grid_cell cell
+export function editMoleculeCell(cell: DG.GridCell): void {
+  if (cell.gridColumn.column.tags[DG.TAGS.UNITS] === 'helm') {
+    let grid = grok.shell.tv.grid;
+    webEditor(cell.cell.value);
+    grid.invalidate();
   }
 }
 
-//name: Details
+//name: Open Helm Web Editor
+//description: Adds editor
+//meta.action: Open Helm Web Editor
+//input: string mol { semType: Macromolecule }
+export function openEditor(mol: string): void {
+  let df = grok.shell.tv.grid.dataFrame;
+  let converter = new NotationConverter(df.columns.bySemType('Macromolecule'));
+  const resStr = converter.convertStringToHelm(mol, '/');
+  webEditor(resStr);
+}
+
+//name: Properties
 //tags: panel, widgets
 //input: string helmString {semType: Macromolecule}
 //output: widget result
-export async function detailsPanel(helmString: string) {
-  const lru = await getLru();
+export async function propertiesPanel(helmString: string) {
+  //const lru = await getLru();
   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))),*/
     })
   );
 }
 
+//name: Molfile
+//tags: panel, widgets
+//input: string helmString {semType: Macromolecule}
+//output: widget result
+export async function molfilePanel(helmString: string) {
+  return ui.textInput('', await getMolfile(helmString));
+}
 
-async function loadDialog() {
+
+//name: loadDialog
+export async function loadDialog() {
   let res = (await _package.files.list(`${LIB_PATH}`, false, '')).map(it => it.fileName);
   let FilesList = await ui.choiceInput('Monomer Libraries', ' ', res);
   let grid = grok.shell.tv.grid;
@@ -134,21 +152,40 @@ export async function libraryPanel(helmColumn: DG.Column) {
   //@ts-ignore
   let loadButton = ui.button('Load Library');
   loadButton.addEventListener('click', loadDialog);
+  //@ts-ignore
+  let filesButton = ui.button('Manage');
+  filesButton.addEventListener('click', manageFiles);
   let list = (await _package.files.list(`${LIB_PATH}`, false, '')).map(it => it.fileName);
   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]),
-    })
-  );
+  return new DG.Widget(ui.splitV([
+    ui.splitH([
+      ui.tableFromMap({
+        'Uploaded libraries': ui.divText(usedLibraries.toString()),
+        'Not used libraries': ui.divText(unusedLibraries.toString()),
+      })
+    ]),
+    ui.splitH([
+      ui.divH([loadButton]),
+      ui.divH([filesButton]),
+    ])
+  ]));
 }
 
+//name: manageFiles
+export async function manageFiles() {
+  const a = ui.dialog({title: 'Manage files'})
+    //@ts-ignore
+    .add(ui.fileBrowser({path: 'System:AppData/Helm/libraries'}).root)
+    .addButton('OK', () => a.close())
+    .show();
+}
+
+
+
 async function accessServer(url: string, key: string) {
   const params: RequestInit = {
     method: 'GET',
@@ -220,12 +257,22 @@ function getRS(smiles: string) {
   return res;
 }
 
-async function monomerManager(value: string) {
+//name: monomerManager
+//input: string value
+export async function monomerManager(value: string) {
   let df: any[];
+  let file;
+  let dfSdf;
   if (value.endsWith('.sdf')) {
-    const file = await _package.files.readAsBytes(`${LIB_PATH}${value}`);
-    const dfSdf = await grok.functions.call('Chem:importSdf', {bytes: file});
-    df = createJsonMonomerLibFromSdf(dfSdf[0]);
+    const funcList: DG.Func[] = DG.Func.find({package: 'Chem', name: 'importSdf'});
+    console.debug(`Helm: initHelm() funcList.length = ${funcList.length}`);
+    if (funcList.length === 1) {
+      file = await _package.files.readAsBytes(`${LIB_PATH}${value}`);
+      dfSdf = await grok.functions.call('Chem:importSdf', {bytes: file});
+      df = createJsonMonomerLibFromSdf(dfSdf[0]);
+    } else {
+      grok.shell.warning("Chem package is not installed");
+    }
   } else {
     const file = await _package.files.readAsText(`${LIB_PATH}${value}`);
     df = JSON.parse(file);
@@ -257,28 +304,161 @@ export function helmColumnToSmiles(helmColumn: DG.Column) {
   //todo: add column with smiles to col.dataFrame.
 }
 
+//name: getMolfile
+//input: string helmString {semType: Macromolecule}
+export async function getMolfile(helmString) {
+  return molfiles.get(helmString);
+}
+
+function split(s: string, sep: string) {
+  var ret = [];
+  var frag = "";
+  var parentheses = 0;
+  var bracket = 0;
+  var braces = 0;
+  var quote = 0;
+  for (var i = 0; i < s.length; ++i) {
+      var c = s.substring(i, i + 1);
+      if (c == sep && bracket == 0 && parentheses == 0 && braces == 0 && quote == 0) {
+          ret.push(frag);
+          frag = "";
+      }
+      else {
+          frag += c;
+          if (quote > 0) {
+              if (c == '\\' && i + 1 < s.length) {
+                  ++i;
+                  var c2 = s.substring(i, i + 1);
+                  frag += c2;
+                  c += c2;
+              }
+          }
+          if (c == '\"') {
+              if (!(i > 0 && s.substring(i - 1, i) == '\\'))
+                  quote = quote == 0 ? 1 : 0;
+          }
+          else if (c == '[')
+              ++bracket;
+          else if (c == ']')
+              --bracket;
+          else if (c == '(')
+              ++parentheses;
+          else if (c == ')')
+              --parentheses;
+          else if (c == '{')
+              ++braces;
+          else if (c == '}')
+              --braces;
+      }
+  }
+  ret.push(frag);
+  return ret;
+}
+
+function detachAnnotation(s: string) {
+  var ret = _detachAppendix(s, '\"');
+  if (ret.tag != null)
+      return ret;
+
+  var r = _detachAppendix(s, '\'');
+  return { tag: ret.tag, repeat: r.tag, str: r.str };
+}
+
+function _detachAppendix(s: string, c: string) {
+  var tag = null;
+  //@ts-ignore
+  if (scil.Utils.endswith(s, c)) {
+      var p = s.length - 1;
+      while (p > 0) {
+          p = s.lastIndexOf(c, p - 1);
+          if (p <= 0 || s.substring(p - 1, p) != '\\')
+              break;
+      }
+
+      if (p > 0 && p < s.length - 1) {
+          tag = s.substring(p + 1, s.length - 1);
+          s = s.substring(0, p);
+      }
+  }
+  if (tag != null)
+      tag = tag.replace(new RegExp("\\" + c, "g"), c);
+  return { tag: unescape(tag), str: s };
+}
+
+function unescape(s: string) {
+  //@ts-ignore
+  if (scil.Utils.isNullOrEmpty(s))
+      return s;
+
+  return s.replace(/[\\]./g, function (m) {
+      switch (m) {
+          case "\\r":
+              return "\r";
+          case "\\n":
+              return "\n";
+          case "\\t":
+              return "\t";
+          default:
+              return m.substring(1);
+      }
+  });
+}
+
+function parseHelm(s: string) {
+  var sections = split(s, '$');
+  s = sections[0];
+  var monomers = [];
+  //@ts-ignore
+  if (!scil.Utils.isNullOrEmpty(s)) {
+      var seqs = split(s, '|');
+      for (var i = 0; i < seqs.length; ++i) {
+          var e = detachAnnotation(seqs[i]);
+          s = e.str;
+
+          var p = s.indexOf("{");
+          
+          s = s.substring(p + 1);
+          p = s.indexOf('}');
+          s = s.substring(0, p);
+
+          var ss = split(s, '.');
+          for (var monomer of ss) {
+            if (monomer.includes('(') && monomer.includes(')')) {
+                var elements = monomer.replace(/[()]/g, "").split("");
+                for (var el of elements) {
+                    monomers.push(el);
+                }
+            } else {
+                monomers.push(monomer);
+            }
+          }
+      }
+  }
+  return monomers;
+}
+
 //name: findMonomers
-//input: string helmString { semType: Macromolecule }
-export async function findMonomers(helmString: string) {
+//input: string helmString
+export function findMonomers(helmString: string) {
+  //@ts-ignore
   const types = Object.keys(org.helm.webeditor.monomerTypeList());
-  const monomers = [];
-  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 monomers: any = [];
+  const monomer_names: any = [];
+  for (var i = 0; i < types.length; i++) {
+    //@ts-ignore
+    monomers.push(new scil.helm.Monomers.getMonomerSet(types[i]));
+    Object.keys(monomers[i]).forEach(k => {
+      monomer_names.push(monomers[i][k].id);
     });
   }
-  const splitString = WebLogo.splitterAsHelm(helmString);
-  return new Set(splitString.filter((val) => !monomerNames.includes(val)));
+  const split_string = parseHelm(helmString);
+  return new Set(split_string.filter(val => !monomer_names.includes(val)));
 }
 
 class HelmCellRenderer extends DG.GridCellRenderer {
-  get name() { return 'macromolecule'; }
+  get name() { return 'helm'; }
 
-  get cellType() { return 'macromolecule'; }
+  get cellType() { return 'helm'; }
 
   get defaultWidth(): number | null { return 400; }
 
@@ -287,17 +467,55 @@ class HelmCellRenderer extends DG.GridCellRenderer {
   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;
-    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);
+    const grid = gridCell.gridRow !== -1 ? gridCell.grid : undefined;
+    const undefinedColor = 'rgb(100,100,100)';
+    const grayColor = '#808080';
+    const monomers = findMonomers(gridCell.cell.value);
+    if (monomers.size == 0) {
+      const host = ui.div([], {style: {width: `${w}px`, height: `${h}px`}});
+      host.setAttribute('dataformat', 'helm');
+      host.setAttribute('data', gridCell.cell.value);
+      gridCell.element = host;
+        //@ts-ignore
+        const canvas = new JSDraw2.Editor(host, {width: w, height: h, skin: 'w8', viewonly: true});
+        const formula = canvas.getFormula(true);
+        if (!formula) {
+          gridCell.element = ui.divText(gridCell.cell.value, {style: {color: 'red'}});
+        }
+        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;
+        lru.set(gridCell.cell.value, result);
+        molfiles.set(gridCell.cell.value, molfile);
+        return;
+      }
+      if (monomers.size > 0) {
+        w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
+        g.save();
+        g.beginPath();
+        g.rect(x, y, w, h);
+        g.clip();
+        g.font = '12px monospace';
+        g.textBaseline = 'top';
+        let x1 = x;
+        const s: string = gridCell.cell.value ?? '';
+        let subParts: string[] = parseHelm(s);
+        subParts.forEach((amino, index) => {
+          let color = monomers.has(amino) ? 'red' : grayColor;
+          g.fillStyle = undefinedColor;
+          let last = index === subParts.length - 1;
+          x1 = printLeftOrCentered(x1, y, w, h, g, amino, color, 0, true, 1.0, '/', last);
+        });
+        g.restore();
+        return;
+      }
   }
 }
+
+//name: getMonomerLib
+//input: string type
+//output: string monomerSetJSON
+export function getMonomerLib(type: string): string {
+  return JSON.stringify(scil.helm.Monomers.getMonomerSet(type));
+}