@datagrok/helm 2.0.3 → 2.0.6

package/src/package.ts

@@ -2,34 +2,34 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
+import * as bio from '@datagrok-libraries/bio';
+
 import {createJsonMonomerLibFromSdf} from './utils';
 import {MONOMER_MANAGER_MAP, RGROUPS, RGROUP_CAP_GROUP_NAME, RGROUP_LABEL, SMILES} from './constants';
-import {printLeftOrCentered} from '@datagrok-libraries/bio/src/utils/cell-renderer';
+import {HelmWebEditor} from './helm-web-editor';
+import {Observable, Subject} from 'rxjs';
 
 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/';
 
-
 //tags: init
 export async function initHelm(): Promise<void> {
-  let grid = grok.shell.tv.grid;
-  for (let j = 0; j <= i; j++) {
-    await monomerManager(await grok.dapi.userDataStorage.getValue(STORAGE_NAME, j.toString(), true));
-  }
-  grid.invalidate();
-  
-  return new Promise((resolve, reject) => {
+  return new Promise(async (resolve, reject) => {
     // @ts-ignore
     dojo.ready(function() { resolve(null); });
+    await loadLibraries();
   });
 }
 
+
+async function loadLibraries() {
+  let uploadedLibraries: string[] = Object.values(await grok.dapi.userDataStorage.get(STORAGE_NAME, true));
+  for (let i = 0; i < uploadedLibraries.length; ++i)
+    await monomerManager(uploadedLibraries[i]);
+}
+
 //name: helmCellRenderer
 //tags: cellRenderer
 //meta.cellType: helm
@@ -40,7 +40,7 @@ export function helmCellRenderer(): HelmCellRenderer {
 }
 
 
-export function webEditor(value: string) {
+function webEditor(cell?: DG.GridCell, value?: string) {
   let view = ui.div();
   org.helm.webeditor.MolViewer.molscale = 0.8;
   let app = new scil.helm.App(view, {
@@ -66,15 +66,20 @@ export function webEditor(value: string) {
   app.structureview.resize(sizes.rightwidth, sizes.bottomheight + app.toolbarheight);
   app.mex.resize(sizes.topheight - 80);
   setTimeout(function() {
-    app.canvas.helm.setSequence(value, 'HELM');
+    if (typeof cell !== 'undefined') {
+      app.canvas.helm.setSequence(cell.cell.value, 'HELM');
+    } else {
+      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});
+    .add(view)
+    .onOK(() => {
+      if (typeof cell !== 'undefined') {
+        cell.cell.value = app.canvas.getHelm(true).replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
+      }
+    }).show({modal: true, fullScreen: true});
 }
 
 
@@ -83,9 +88,7 @@ export function webEditor(value: string) {
 //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();
+    webEditor(cell);
   }
 }
 
@@ -95,9 +98,9 @@ export function editMoleculeCell(cell: DG.GridCell): void {
 //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'));
+  let converter = new bio.NotationConverter(df.columns.bySemType('Macromolecule'));
   const resStr = converter.convertStringToHelm(mol, '/');
-  webEditor(resStr);
+  webEditor(undefined, resStr);
 }
 
 //name: Properties
@@ -105,73 +108,58 @@ export function openEditor(mol: string): void {
 //input: string helmString {semType: Macromolecule}
 //output: widget result
 export async function propertiesPanel(helmString: string) {
-  //const lru = await getLru();
-  const result = lru.get(helmString).split(',');
+  let grid = grok.shell.tv.grid;
+  let parent = grid.root.parentElement;
+  const host = ui.div([]);
+  parent.appendChild(host);
+  let editor = new JSDraw2.Editor(host, {viewonly: true});
+  host.style.width = '0px';
+  host.style.height = '0px';
+  editor.setHelm(helmString);
+  let formula = editor.getFormula(true);
+  let molWeight = Math.round(editor.getMolWeight() * 100) / 100;
+  let coef = Math.round(editor.getExtinctionCoefficient(true) * 100) / 100;
+  parent.lastChild.remove();
   return new DG.Widget(
     ui.tableFromMap({
-      'formula': result[0].replace(/<sub>/g, '').replace(/<\/sub>/g, ''),
-      'molecular weight': result[1],
-      'extinction coefficient': result[2],
-      /*'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))),*/
+      'formula': formula.replace(/<sub>/g, '').replace(/<\/sub>/g, ''),
+      'molecular weight': molWeight,
+      'extinction coefficient': coef,
     })
   );
 }
 
-//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));
-}
-
-
-//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;
-  ui.dialog('Load library from file')
-    .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: Manage Libraries
 //tags: panel, widgets
 //input: column helmColumn {semType: Macromolecule}
 //output: widget result
-export async function libraryPanel(helmColumn: DG.Column) {
-  //@ts-ignore
-  let loadButton = ui.button('Load Library');
-  loadButton.addEventListener('click', loadDialog);
+export async function libraryPanel(helmColumn: DG.Column): Promise<DG.Widget> {
   //@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 filesButton: HTMLButtonElement = ui.button('Manage', manageFiles);
+  let divInputs: HTMLDivElement = ui.div();
+  let librariesList: string[] = (await _package.files.list(`${LIB_PATH}`, false, '')).map(it => it.fileName);
+  let uploadedLibraries: string[] = Object.values(await grok.dapi.userDataStorage.get(STORAGE_NAME, true));
+  for (let i = 0; i < uploadedLibraries.length; ++i) {
+    let libraryName: string = uploadedLibraries[i];
+    divInputs.append(ui.boolInput(libraryName, true, async v => {
+      org.helm.webeditor.Monomers.clear();
+      grok.dapi.userDataStorage.remove(STORAGE_NAME, libraryName, true);
+      await loadLibraries();
+      grok.shell.tv.grid.invalidate();
+    }).root);
+  }
+  let unusedLibraries: string[] = librariesList.filter(x => !uploadedLibraries.includes(x));
+  for (let i = 0; i < unusedLibraries.length; ++i) {
+    let libraryName: string = unusedLibraries[i];
+    divInputs.append(ui.boolInput(libraryName, false, v => {
+      monomerManager(libraryName);
+      grok.dapi.userDataStorage.postValue(STORAGE_NAME, libraryName, libraryName, true);
+    }).root);
   }
-  let unusedLibraries = list.filter(x => !usedLibraries.includes(x));
   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]),
-    ])
+    divInputs,
+    ui.divV([filesButton])
   ]));
 }
 
@@ -185,7 +173,6 @@ export async function manageFiles() {
 }
 
 
-
 async function accessServer(url: string, key: string) {
   const params: RequestInit = {
     method: 'GET',
@@ -271,7 +258,7 @@ export async function monomerManager(value: string) {
       dfSdf = await grok.functions.call('Chem:importSdf', {bytes: file});
       df = createJsonMonomerLibFromSdf(dfSdf[0]);
     } else {
-      grok.shell.warning("Chem package is not installed");
+      grok.shell.warning('Chem package is not installed');
     }
   } else {
     const file = await _package.files.readAsText(`${LIB_PATH}${value}`);
@@ -296,6 +283,14 @@ export async function monomerManager(value: string) {
     }
     org.helm.webeditor.Monomers.addOneMonomer(m);
   });
+
+  // Now after updating org.helm.webeditor.Monomers we update MonomerLib window singleton (fires onChanged event)
+  (getMonomerLibObj() as MonomerLib).update(getAllLibsData());
+  //grok.events.fireCustomEvent('monomersLibChanged', null);
+
+  // Obsolete
+  let grid: DG.Grid = grok.shell.tv.grid;
+  grid.invalidate();
 }
 
 //name: helmColumnToSmiles
@@ -304,52 +299,45 @@ 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 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;
+    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;
@@ -358,81 +346,86 @@ function split(s: string, sep: string) {
 function detachAnnotation(s: string) {
   var ret = _detachAppendix(s, '\"');
   if (ret.tag != null)
-      return ret;
+    return ret;
 
   var r = _detachAppendix(s, '\'');
-  return { tag: ret.tag, repeat: r.tag, str: r.str };
+  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;
-      }
+    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 (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 };
+    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);
-      }
+    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) {
+//name: parseHelm
+//input: string s
+export 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);
-            }
+    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 if (monomer.includes('[') && monomer.includes(']')) {
+          var element = monomer.match(/(?<=\[).*?(?=\])/g, '');
+          monomers.push(element[0]);
+        } else {
+          monomers.push(monomer);
+        }
       }
+    }
   }
   return monomers;
 }
@@ -455,6 +448,89 @@ export function findMonomers(helmString: string) {
   return new Set(split_string.filter(val => !monomer_names.includes(val)));
 }
 
+
+class MonomerLib implements bio.IMonomerLib {
+  private _monomers: { [type: string]: { [name: string]: bio.Monomer } };
+  private _onChanged = new Subject<any>();
+
+  get(monomerType: string, monomerName: string): bio.Monomer | null {
+    if (monomerType in this._monomers && monomerName in this._monomers[monomerType])
+      return this._monomers[monomerType][monomerName];
+    else
+      return null;
+  }
+
+  get onChanged(): Observable<any> {
+    return this._onChanged;
+  }
+
+  public update(monomers: { [type: string]: { [name: string]: bio.Monomer } }): void {
+    this._monomers = monomers;
+    this._onChanged.next();
+  }
+}
+
+function getAllLibsData(): { [type: string]: { [name: string]: bio.Monomer } } {
+  //@ts-ignore
+  const types = Object.keys(org.helm.webeditor.monomerTypeList());
+  //const monomers: any = [];
+  const monomers: { [type: string]: { [name: string]: bio.Monomer } } = {};
+  for (let i = 0; i < types.length; i++) {
+    monomers[types[i]] = new scil.helm.Monomers.getMonomerSet(types[i]);
+    //@ts-ignore
+    //monomers.push(new scil.helm.Monomers.getMonomerSet(types[i]));
+  }
+
+  return monomers;
+}
+
+//name: getMonomerLibObj
+//description: Get object of IMonomerLib interface (singleton)
+//output: object result
+export function getMonomerLibObj(): bio.IMonomerLib {
+  if (!('monomerLib' in window)) {
+    window['monomerLib'] = new MonomerLib();
+    window['monomerLib'].update(getAllLibsData()); // TODO: refactor
+  }
+
+  return window['monomerLib'];
+}
+
+//name: getMolfiles
+//input: column col {semType: Macromolecule}
+//output: column res 
+export function getMolfiles(col: DG.Column): DG.Column {
+  let grid = grok.shell.tv.grid;
+  let parent = grid.root.parentElement;
+  let res = DG.Column.string('mols', col.length);
+  const host = ui.div([]);
+  parent.appendChild(host);
+  let editor = new JSDraw2.Editor(host, {viewonly: true});
+  host.style.width = '0px';
+  host.style.height = '0px';
+  res.init((i) => {
+    editor.setHelm(col.get(i));
+    let mol = editor.getMolfile();
+    return mol;
+  });
+  parent.lastChild.remove();
+  return res;
+}
+
+function getParts(subParts: string[], s: string): string[] {
+  let j = 0;
+  let allParts: string[] = [];
+  for (let k = 0; k < subParts.length; ++k) {
+    let indexOfMonomer = s.indexOf(subParts[k]);
+    let helmBeforeMonomer = s.slice(j, indexOfMonomer);
+    allParts.push(helmBeforeMonomer);
+    allParts.push(subParts[k]);
+    s = s.substring(indexOfMonomer + subParts[k].length);
+  }
+  allParts.push(s);
+  return allParts;
+}
+
 class HelmCellRenderer extends DG.GridCellRenderer {
   get name() { return 'helm'; }
 
@@ -464,6 +540,49 @@ class HelmCellRenderer extends DG.GridCellRenderer {
 
   get defaultHeight(): number | null { return 100; }
 
+  onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
+    const maxLengthWordsSum = gridCell.cell.column.temp['helm-sum-maxLengthWords'];
+    const maxIndex = Object.values(gridCell.cell.column.temp['helm-maxLengthWords']).length - 1;
+    const argsX = e.offsetX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x);
+    let left = 0;
+    let right = maxIndex;
+    let found = false;
+    maxLengthWordsSum[maxIndex + 1] = argsX + 1;
+    let mid = 0;
+    if (argsX > maxLengthWordsSum[0]) {
+      while (!found) {
+        mid = Math.floor((right + left) / 2);
+        if (argsX >= maxLengthWordsSum[mid] && argsX <= maxLengthWordsSum[mid + 1]) {
+          left = mid;
+          found = true;
+        } else if (argsX < maxLengthWordsSum[mid]) {
+          right = mid - 1;
+        } else if (argsX > maxLengthWordsSum[mid + 1]) {
+          left = mid + 1;
+        }
+        if (left == right) {
+          found = true;
+        }
+      }
+    }
+    left = (argsX >= maxLengthWordsSum[left]) ? left + 1 : left;
+    const monomers = findMonomers(gridCell.cell.value);
+    let s: string = gridCell.cell.value ?? '';
+    let subParts: string[] = parseHelm(s);
+    let allParts: string[] = getParts(subParts, s);
+    let tooltipMessage: HTMLElement[] = [];
+    for (let i = 0; i < allParts.length; ++i) {
+      if (monomers.has(allParts[i]))
+        tooltipMessage[i] = ui.divV([
+          ui.divText(`Monomer ${allParts[i]} not found.`),
+          ui.divText('Open the Property Panel, then expand Manage Libraries')
+        ]);
+    }
+    (((tooltipMessage[left]?.childNodes.length ?? 0) > 0))
+      ? ui.tooltip.show(ui.div(tooltipMessage[left]), e.x + 16, e.y + 16)
+      : ui.tooltip.hide();
+  }
+
   render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
     gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
   ) {
@@ -471,45 +590,47 @@ class HelmCellRenderer extends DG.GridCellRenderer {
     const undefinedColor = 'rgb(100,100,100)';
     const grayColor = '#808080';
     const monomers = findMonomers(gridCell.cell.value);
+    let s: string = gridCell.cell.value ?? '';
+    let subParts: string[] = parseHelm(s);
     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;
+      //@ts-ignore
+      const canvas = new JSDraw2.Editor(host, {width: w, height: h, skin: 'w8', viewonly: true});
+      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;
+      let maxLengthWords: any = {};
+      let maxLengthWordSum: any = {};
+      let allParts: string[] = getParts(subParts, s);
+      for (let i = 0; i < allParts.length; ++i) {
+        maxLengthWords[i] = allParts[i].length * 7;
+        let color = monomers.has(allParts[i]) ? 'red' : grayColor;
+        g.fillStyle = undefinedColor;
+        x1 = bio.printLeftOrCentered(x1, y, w, h, g, allParts[i], color, 0, true, 1.0);
       }
-      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;
+
+      maxLengthWordSum[0] = maxLengthWords[0];
+      for (let i = 1; i < allParts.length; i++) {
+        maxLengthWordSum[i] = maxLengthWordSum[i - 1] + maxLengthWords[i];
       }
+      gridCell.cell.column.temp = {
+        'helm-sum-maxLengthWords': maxLengthWordSum,
+        'helm-maxLengthWords': maxLengthWords
+      };
+      g.restore();
+      return;
+    }
   }
 }
 
@@ -517,5 +638,13 @@ class HelmCellRenderer extends DG.GridCellRenderer {
 //input: string type
 //output: string monomerSetJSON
 export function getMonomerLib(type: string): string {
+  // TODO: deprecate
   return JSON.stringify(scil.helm.Monomers.getMonomerSet(type));
 }
+
+
+//name: helmWebEditor
+//output: object
+export function helmWebEditor(): HelmWebEditor {
+  return new HelmWebEditor();
+}