@datagrok/helm 2.1.16 → 2.1.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.16",
+  "version": "2.1.17",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -15,7 +15,7 @@
     "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.33.2",
+    "@datagrok-libraries/bio": "^5.38.0",
     "@datagrok-libraries/utils": "^4.0.17",
     "cash-dom": "^8.1.1",
     "datagrok-api": "^1.10.2",

package/src/cell-renderer.ts

@@ -60,11 +60,11 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
           if (argsX >= sumLengths[mid] && argsX <= sumLengths[mid + 1]) {
             left = mid;
             found = true;
-          } else if (argsX < sumLengths[mid]) {
+          } else if (argsX < sumLengths[mid])
             right = mid - 1;
-          } else if (argsX > sumLengths[mid + 1]) {
+          else if (argsX > sumLengths[mid + 1])
             left = mid + 1;
-          }
+
           if (left == right)
             found = true;
 
@@ -73,7 +73,9 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       }
       left = (argsX >= sumLengths[left]) ? left : left - 1; // correct left to between sumLengths
 
-      const seq: string = gridCell.cell.value;
+      const seq: string = !gridCell.cell.value ? '' : gridCell.cell.value
+        .replaceAll(helmGapStartRe, '{').replaceAll(helmGapIntRe, '.').replaceAll(helmGapEndRe, '}')
+        .replace('{*}', '{}');
       const monomerList = parseHelm(seq);
       const monomers = new Set<string>(monomerList);
       const missedMonomers = findMonomers(monomerList);
@@ -121,15 +123,19 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       const monomerColor: string = '#404040';
       const frameColor: string = '#C0C0C0';
 
-      const seq = gridCell.cell.value;
+      const seq: string = !gridCell.cell.value ? '' : gridCell.cell.value
+        .replaceAll(helmGapStartRe, '{').replaceAll(helmGapIntRe, '.').replaceAll(helmGapEndRe, '}')
+        .replace('{*}', '{}');
       const monomerList = parseHelm(seq);
       const monomers: Set<string> = new Set<string>(monomerList);
       const missedMonomers: Set<string> = findMonomers(monomerList);
+      const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
 
       if (missedMonomers.size == 0) {
+        helmPlacer.skipCell(gridCell.tableRowIndex!);
         const host = ui.div([], {style: {width: `${w}px`, height: `${h}px`}});
         host.setAttribute('dataformat', 'helm');
-        host.setAttribute('data', gridCell.cell.value);
+        host.setAttribute('data', seq /* gaps skipped */);
         gridCell.element = host;
         //@ts-ignore
         const canvas = new JSDraw2.Editor(host, {width: w, height: h, skin: 'w8', viewonly: true});
@@ -152,7 +158,6 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
         g.transform(1, 0, 0, 1, x, y);
         g.font = '12px monospace';
         g.textBaseline = 'top';
-        const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
         const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
 
         for (let i = 0; i < allParts.length; ++i) {

package/src/helm-monomer-placer.ts

@@ -25,13 +25,23 @@ export class HelmMonomerPlacer {
   constructor(public readonly col: DG.Column<string>) {
     this.col.dataFrame.onDataChanged.subscribe();
     this.monomerLib = getMonomerLib();
+    this.monomerLib.onChanged.subscribe(this.monomerLibOnChanged.bind(this));
+  }
+
+  public skipCell(rowIdx: number): void {
+    if (this._allPartsList === null)
+      this._allPartsList = new Array<string[] | null>(this.col.length).fill(null);
+    if (this._lengthsList === null)
+      this._lengthsList = new Array<number[] | null>(this.col.length).fill(null);
+
+    this._allPartsList[rowIdx] = [];
+    this._lengthsList[rowIdx] = [];
   }
 
   /** @param rowIdx Row index of the table {@link DG.DataFrame}, HelmMonomerPlacer is {@link DG.Column} based */
   public getCellAllPartsLengths(rowIdx: number): [string[], number[], number[]] {
     if (this._allPartsList === null)
       this._allPartsList = new Array<string[] | null>(this.col.length).fill(null);
-
     if (this._lengthsList === null)
       this._lengthsList = new Array<number[] | null>(this.col.length).fill(null);
 
@@ -45,12 +55,17 @@ export class HelmMonomerPlacer {
   }
 
   private getCellMonomerLengthsForSeq(rowIdx: number): [string[], number[]] {
-    const allParts: string[] = this._allPartsList![rowIdx] = this.getAllParts(rowIdx);
-    const lengths: number[] = this._lengthsList![rowIdx] = new Array<number>(allParts.length);
-
-    for (const [part, partI] of wu.enumerate(allParts)) {
-      const partWidth: number = part.length * this.monomerCharWidth;
-      lengths[partI] = partWidth;
+    let allParts: string[] | null = this._allPartsList![rowIdx];
+    if (allParts === null)
+      allParts = this._allPartsList![rowIdx] = this.getAllParts(rowIdx);
+
+    let lengths: number[] | null = this._lengthsList![rowIdx];
+    if (lengths === null) {
+      lengths = this._lengthsList![rowIdx] = new Array<number>(allParts.length);
+      for (const [part, partI] of wu.enumerate(allParts)) {
+        const partWidth: number = part.length * this.monomerCharWidth;
+        lengths[partI] = partWidth;
+      }
     }
 
     return [allParts, lengths];
@@ -71,6 +86,14 @@ export class HelmMonomerPlacer {
     return res;
   }
 
+  // -- Handle events --
+
+  private monomerLibOnChanged(_value: any): void {
+    this._lengthsList = null;
+    this._allPartsList = null;
+    // TODO: Invalidate all grids of this.col.dataFrame
+  }
+
   public static getOrCreate(col: DG.Column<string>): HelmMonomerPlacer {
     if (!(Temps.helmMonomerPlacer in col.temp)) col.temp[Temps.helmMonomerPlacer] = new HelmMonomerPlacer(col);
     return col.temp[Temps.helmMonomerPlacer];

package/src/package.ts

@@ -7,14 +7,15 @@ import {WebEditorMonomer, RGROUP_CAP_GROUP_NAME, RGROUP_LABEL, SMILES} from './c
 import {HelmWebEditor} from './helm-web-editor';
 import {HelmCellRenderer} from './cell-renderer';
 import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types';
-import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
+import {GapSymbols, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 import {findMonomers, parseHelm} from './utils';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
-export const _package = new DG.Package();
 let monomerLib: IMonomerLib | null = null;
 
+export const _package = new DG.Package();
+
 //tags: init
 export async function initHelm(): Promise<void> {
   return Promise.all([
@@ -87,9 +88,8 @@ function rewriteLibraries() {
       } else if (monomer[SMILES] != null) {
         webEditorMonomer.rs = Object.keys(getRS(monomer[SMILES].toString())).length;
         webEditorMonomer.at = getRS(monomer[SMILES].toString());
-      } else {
+      } else
         isBroken = true;
-      }
 
       if (!isBroken) {
         // @ts-ignore
@@ -116,8 +116,13 @@ function checkMonomersAndOpenWebEditor(cell?: DG.Cell, value?: string, units?: s
   const cellValue: string = !!cell && units === undefined ? cell.value : value;
   const monomerList: string[] = parseHelm(cellValue);
   const monomers = findMonomers(monomerList);
-  if (monomers.size == 0) { webEditor(cell, value, units); } else {
-    grok.shell.warning(`Monomers ${Array.from(monomers).join(', ')} are absent! <br/>` +
+  if (monomers.size === 0)
+    webEditor(cell, value, units);
+  else if (monomers.size === 1 && monomers.has(GapSymbols[NOTATION.HELM]))
+    grok.shell.warning(`WebEditor doesn't support Helm with gaps '${GapSymbols[NOTATION.HELM]}'.`);
+  else {
+    grok.shell.warning(
+      `Monomers ${Array.from(monomers).map((m) => `'${m}'`).join(', ')} are absent! <br/>` +
       `Please, upload the monomer library! <br/>` +
       `<a href="https://datagrok.ai/help/domains/bio/macromolecules" target="_blank">Learn more</a>`);
   }
@@ -138,12 +143,13 @@ export function editMoleculeCell(cell: DG.GridCell): void {
 export function openEditor(mol: string): void {
   const df = grok.shell.tv.grid.dataFrame;
   const col = df.columns.bySemType('Macromolecule')!;
+  const colUh = UnitsHandler.getOrCreate(col);
   const colUnits = col.getTag(DG.TAGS.UNITS);
   if (colUnits === NOTATION.HELM)
     checkMonomersAndOpenWebEditor(df.currentCell, undefined, undefined);
-  const converter = new NotationConverter(col);
-  const resStr = converter.convertStringToHelm(mol, '/');
-  checkMonomersAndOpenWebEditor(df.currentCell, resStr, col.getTag(DG.TAGS.UNITS));
+  const convert = colUh.getConverter(NOTATION.HELM);
+  const helmMol = convert(mol);
+  checkMonomersAndOpenWebEditor(df.currentCell, helmMol, col.getTag(DG.TAGS.UNITS));
 }
 
 //name: Properties
@@ -175,7 +181,8 @@ export async function propertiesPanel(helmString: string) {
 function webEditor(cell?: DG.Cell, value?: string, units?: string) {
   const view = ui.div();
   const df = grok.shell.tv.grid.dataFrame;
-  const converter = new NotationConverter(df.columns.bySemType('Macromolecule')!);
+  const col = df.columns.bySemType('Macromolecule')!;
+  const uh = UnitsHandler.getOrCreate(col);
   // @ts-ignore
   org.helm.webeditor.MolViewer.molscale = 0.8;
   // @ts-ignore
@@ -214,10 +221,10 @@ function webEditor(cell?: DG.Cell, value?: string, units?: string) {
       const helmValue = app.canvas.getHelm(true).replace(/<\/span>/g, '')
         .replace(/<span style='background:#bbf;'>/g, '');
       if (!!cell) {
-        if (units === undefined) {
+        if (units === undefined)
           cell.value = helmValue;
-        } else {
-          const convertedRes = converter.convertHelmToFastaSeparator(helmValue, units!);
+        else {
+          const convertedRes = uh.convertHelmToFastaSeparator(helmValue, units!);
           cell.value = convertedRes;
         }
       }