@datagrok/helm 2.1.28 → 2.1.30

package/files/tests/sample_HELM-missedInLib.csv

@@ -2,7 +2,7 @@ HELM,Activity
 PEPTIDE1{meI.missed2.Aca.N.T.dE.Thr_PO3H2.Aca.D-Tyr_Et.Tyr_ab-dehydroMe.dV.E.N.D-Orn.D-aThr.Phe_4Me}$$$$,5.307510973968128
 PEPTIDE1{meI.hHis.Aca.Cys_SEt.T.dK.Thr_PO3H2.Aca.Tyr_PO3H2.D-Chg.dV.Phe_ab-dehydro.N.D-Orn.D-aThr.Phe_4Me}$$$$,5.723876853431544
 PEPTIDE1{missed1.hHis.Aca.Cys_SEt.T.dK.Thr_PO3H2.Aca.Tyr_PO3H2.D-Chg.dV.Thr_PO3H2.N.D-Orn.D-aThr.Phe_4Me}$$$$,5.185811246022437
-PEPTIDE1{meI.hHis.Aca.m0.T.dK.Thr_PO3H2.Aca.Tyr_PO3H2.D-Chg.dV.Thr_PO3H2.N.D-Orn.D-aThr.Phe_4Me}$$$$,6.223502390804369
+PEPTIDE1{meI.m0.Aca.m1.T.m2.m3.Aca.Tyr_PO3H2.D-Chg.dV.Thr_PO3H2.N.D-Orn.D-aThr.Phe_4Me}$$$$,6.223502390804369
 ,3.8459123763832412
 PEPTIDE1{meI.hHis.Aca.N.T.dK.Thr_PO3H2.Aca.D-Tyr_Et.Tyr_Bn.dV.E.N.dV.Phe_4Me}$$$$,3.27920438824657
 PEPTIDE1{meI.hHis.Aca.N.T.dK.Thr_PO3H2.Aca.D-Tyr_Et.Aze.dV.E.N.dV.Phe_4Me}$$$$,2.105852152992568

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.28",
+  "version": "2.1.30",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -15,9 +15,9 @@
     "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.39.24",
-    "@datagrok-libraries/chem-meta": "^1.2.1",
-    "@datagrok-libraries/utils": "^4.1.42",
+    "@datagrok-libraries/bio": "^5.39.29",
+    "@datagrok-libraries/chem-meta": "^1.2.2",
+    "@datagrok-libraries/utils": "^4.1.45",
     "cash-dom": "^8.1.1",
     "datagrok-api": "^1.17.0",
     "dayjs": "^1.10.6",
@@ -37,7 +37,8 @@
     "@typescript-eslint/parser": "^5.11.0",
     "eslint": "^8.18.0",
     "eslint-config-google": "^0.14.0",
-    "@datagrok/bio": "^2.11.8"
+    "@datagrok/bio": "^2.11.38",
+    "@datagrok/chem": "^1.8.13"
   },
   "scripts": {
     "link-all": "npm link @datagrok-libraries/chem-meta datagrok-api @datagrok-libraries/utils @datagrok-libraries/bio",

package/src/cell-renderer.ts

@@ -7,7 +7,7 @@ import wu from 'wu';
 import {printLeftOrCentered} from '@datagrok-libraries/bio/src/utils/cell-renderer';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
-import {findMonomers, parseHelm} from './utils';
+import {findMonomers, parseHelm, removeGapsFromHelm} from './utils';
 import {IEditor, HelmMonomerPlacer, IEditorMolAtom, ISeqMonomer} from './helm-monomer-placer';
 import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
 
@@ -20,11 +20,6 @@ const enum tempTAGS {
   helmPlacer = 'bio-helmPlacer',
 }
 
-// Global flag is for replaceAll
-const helmGapStartRe = /\{(\*\.)+/g;
-const helmGapIntRe = /\.(\*\.)+/g;
-const helmGapEndRe = /(\.\*)+\}/g;
-
 function getSeqMonomerFromHelm(
   helmPrefix: string, symbol: string, monomerLib: IMonomerLib
 ): ISeqMonomer {
@@ -42,16 +37,16 @@ function getSeqMonomerFromHelmAtom(atom: IEditorMolAtom): ISeqMonomer {
   let polymerType: string | undefined = undefined;
   // @ts-ignore
   switch (atom.bio.type) {
-    case 'HELM_BASE':
-    case 'HELM_SUGAR': // r - ribose, d - deoxyribose
-    case 'HELM_LINKER': // p - phosphate
-      polymerType = 'RNA';
-      break;
-    case 'HELM_AA':
-      polymerType = 'PEPTIDE';
-      break;
-    default:
-      polymerType = 'PEPTIDE';
+  case 'HELM_BASE':
+  case 'HELM_SUGAR': // r - ribose, d - deoxyribose
+  case 'HELM_LINKER': // p - phosphate
+    polymerType = 'RNA';
+    break;
+  case 'HELM_AA':
+    polymerType = 'PEPTIDE';
+    break;
+  default:
+    polymerType = 'PEPTIDE';
   }
   return {symbol: atom.elem, polymerType: polymerType};
 }
@@ -163,63 +158,63 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       try { tableCol = gridCell.tableColumn; } catch { }
       if (!tableCol) return;
 
-      const argsX = e.offsetX - gridCell.bounds.x;
-      const argsY = e.offsetY - gridCell.bounds.y;
+      /** {@link gridCell}.bounds */ const gcb = gridCell.bounds;
+      const argsX = e.offsetX - gcb.x;
+      const argsY = e.offsetY - gcb.y;
 
       const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
       const editor: IEditor | null = helmPlacer.getEditor(gridCell.tableRowIndex!);
-      const seqMonomer: ISeqMonomer | null = editor ? getHoveredMonomerFromEditor(argsX, argsY, gridCell, editor) :
-        getHoveredMonomerFallback(argsX, argsY, gridCell, helmPlacer);
-      if (!seqMonomer) {
-        ui.tooltip.hide();
-        return;
+      let seqMonomer: ISeqMonomer | null;
+      let missedMonomers: Set<string> = new Set<string>(); // of .size = 0
+      if (editor)
+        seqMonomer = getHoveredMonomerFromEditor(argsX, argsY, gridCell, editor);
+      else {
+        const seq: string = !gridCell.cell.value ? '' : removeGapsFromHelm(gridCell.cell.value as string);
+        const monomerList = parseHelm(seq);
+        missedMonomers = findMonomers(monomerList);
+        const parsedMonomers = new Set<string>(monomerList);
+        seqMonomer = getHoveredMonomerFallback(argsX, argsY, gridCell, helmPlacer);
+        if (seqMonomer && !parsedMonomers.has(seqMonomer.symbol)) seqMonomer = null;
+        if (seqMonomer) {
+          const textSize = helmPlacer.monomerTextSizeMap[seqMonomer.symbol];
+          if (textSize) {
+            const textBaseLine = gcb.height / 2 -
+              (textSize.fontBoundingBoxAscent + textSize.fontBoundingBoxDescent) / 2 + 1;
+            const textTop = textBaseLine - textSize.fontBoundingBoxAscent;
+            const textBottom = textBaseLine + textSize.fontBoundingBoxDescent;
+            if (argsY < textTop || textBottom < argsY) seqMonomer = null;
+          }
+        }
       }
 
-      const seq: string = !gridCell.cell.value ? '' : gridCell.cell.value
-        .replaceAll(helmGapStartRe, '{').replaceAll(helmGapIntRe, '.').replaceAll(helmGapEndRe, '}')
-        .replace('{*}', '{}');
-      const monomerList = parseHelm(seq);
-      const missedMonomers = findMonomers(monomerList);
-
-      if (missedMonomers.has(seqMonomer.symbol)) {
-        ui.tooltip.show(ui.divV([
-          ui.divText(`Monomer ${seqMonomer.symbol} not found.`),
-          ui.divText('Open the Context Panel, then expand Manage Libraries'),
-        ]), e.x + 16, e.y + 16);
-      } else {
-        const monomer = helmPlacer.getMonomer(seqMonomer);
-        if (monomer) {
-          const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
-          const monomerSvg = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
+      if (seqMonomer) {
+        if (!missedMonomers.has(seqMonomer.symbol)) {
+          const monomer = helmPlacer.getMonomer(seqMonomer);
+          if (monomer) {
+            const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+            const monomerSvg = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
+            ui.tooltip.show(ui.divV([
+              ui.divText(seqMonomer.symbol),
+              monomerSvg,
+            ]), e.x + 16, e.y + 16);
+          }
+        } else {
           ui.tooltip.show(ui.divV([
-            ui.divText(seqMonomer.symbol),
-            monomerSvg,
+            ui.divText(`Monomer '${seqMonomer.symbol}' not found.`),
+            ui.divText('Open the Context Panel, then expand Manage Libraries'),
           ]), e.x + 16, e.y + 16);
         }
+      } else if (missedMonomers.size == 0) {
+        ui.tooltip.hide();
+        return;
+      } else { // seqMonomer == null && missedMonomers.size > 0
+        const mmStrList = wu(missedMonomers.keys()).toArray().sort()
+          .filter((_, i) => i < 3);
+        const missedMonomersStr = mmStrList.join(', ') + (missedMonomers.size > 3 ? ', ...' : '');
+        ui.tooltip.show(ui.divV([ui.divText('Monomers missed in monomer libraries:'),
+          ui.divText(missedMonomersStr)
+        ]), e.x + 16, e.y + 16);
       }
-
-      // const tooltipMessage: HTMLElement[] = [];
-      // for (const [part, partI] of wu.enumerate(allParts)) {
-      //   if (missedMonomers.has(part)) {
-      //     tooltipMessage[partI] = ui.divV([
-      //       ui.divText(`Monomer ${allParts[partI]} not found.`),
-      //       ui.divText('Open the Context Panel, then expand Manage Libraries')
-      //     ]);
-      //   } else if (monomers.has(part)) {
-      //     const elList = [ui.div(part)];
-      //     const monomer = helmPlacer.getMonomer(part);
-      //     if (monomer) {
-      //       const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
-      //       const monomerSvg = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
-      //       elList.push(monomerSvg);
-      //     }
-      //     tooltipMessage[partI] = ui.divV(elList);
-      //   }
-      // }
-      //
-      // (((tooltipMessage[left]?.childNodes.length ?? 0) > 0)) ?
-      //   ui.tooltip.show(tooltipMessage[left], e.x + 16, e.y + 16) :
-      //   ui.tooltip.hide();
     } catch (err: any) {
       const errMsg: string = errorToConsole(err);
       console.error('Helm: HelmCellRenderer.onMouseMove() error:\n' + errMsg);
@@ -229,6 +224,7 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
     }
   }
 
+
   render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
     gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
   ) {
@@ -244,9 +240,7 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       const monomerColor: string = '#404040';
       const frameColor: string = '#C0C0C0';
 
-      const seq: string = !gridCell.cell.value ? '' : gridCell.cell.value
-        .replaceAll(helmGapStartRe, '{').replaceAll(helmGapIntRe, '.').replaceAll(helmGapEndRe, '}')
-        .replace('{*}', '{}');
+      const seq: string = !gridCell.cell.value ? '' : removeGapsFromHelm(gridCell.cell.value);
       const monomerList = parseHelm(seq);
       const monomers: Set<string> = new Set<string>(monomerList);
       const missedMonomers: Set<string> = findMonomers(monomerList);
@@ -281,14 +275,14 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
         }
 
         w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
-        g.save();
+        //g.save();
         g.beginPath();
         g.rect(x, y, w, h);
         g.clip();
         g.transform(1, 0, 0, 1, x, y);
         g.font = '12px monospace';
         g.textBaseline = 'top';
-        const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
+        const [allParts, _lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
 
         for (let i = 0; i < allParts.length; ++i) {
           const part: string = allParts[i];
@@ -298,7 +292,9 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
                 monomers.has(part) ? monomerColor :
                   frameColor;
           g.fillStyle = color;
-          printLeftOrCentered(sumLengths[i], 0, w, h, g, allParts[i], color, 0, true, 1.0);
+          printLeftOrCentered(sumLengths[i], 0, w, h, g, allParts[i], color, 0, true, 1.0,
+            undefined, undefined, undefined, undefined, undefined,
+            undefined, undefined, undefined, helmPlacer.monomerTextSizeMap);
         }
       }
     } finally {

package/src/helm-monomer-placer.ts

@@ -49,6 +49,7 @@ export class HelmMonomerPlacer {
 
   public monomerCharWidth: number = 7;
   public leftPadding: number = 5;
+  public monomerTextSizeMap: { [p: string]: TextMetrics } = {};
 
   constructor(public readonly col: DG.Column<string>) {
     this.col.dataFrame.onDataChanged.subscribe();

package/src/tests/findMonomers-tests.ts

@@ -3,9 +3,10 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {after, before, category, delay, expect, expectObject, test} from '@datagrok-libraries/utils/src/test';
+import {UserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/types';
 import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 import {
-  getUserLibSettings, LibSettings, setUserLibSettings, setUserLibSettingsForTests
+  getUserLibSettings, setUserLibSettings, setUserLibSettingsForTests
 } from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
 
 import {findMonomers, parseHelm} from '../utils';
@@ -15,7 +16,7 @@ import {findMonomers, parseHelm} from '../utils';
 category('findMonomers', () => {
   let monomerLibHelper: IMonomerLibHelper;
   /** Backup actual user's monomer libraries settings */
-  let userLibSettings: LibSettings;
+  let userLibSettings: UserLibSettings;
 
   before(async () => {
     monomerLibHelper = await getMonomerLibHelper();

package/src/tests/get-molfiles.ts

@@ -4,8 +4,9 @@ import * as DG from 'datagrok-api/dg';
 
 import {after, before, category, delay, expect, test, expectArray, testEvent} from '@datagrok-libraries/utils/src/test';
 import {
-  getUserLibSettings, LibSettings, setUserLibSettings, setUserLibSettingsForTests
+  getUserLibSettings, setUserLibSettings, setUserLibSettingsForTests
 } from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
+import {UserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/types';
 import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 import {MolfileHandler} from '@datagrok-libraries/chem-meta/src/parsing-utils/molfile-handler';
 import {MolfileHandlerBase} from '@datagrok-libraries/chem-meta/src/parsing-utils/molfile-handler-base';
@@ -16,7 +17,7 @@ import {_package} from '../package-test';
 
 category('getMolfiles', () => {
   let monomerLibHelper: IMonomerLibHelper;
-  let userLibSettings: LibSettings;
+  let userLibSettings: UserLibSettings;
 
   before(async () => {
     monomerLibHelper = await getMonomerLibHelper();

package/src/utils/index.ts

@@ -11,6 +11,16 @@ import {
   SDF_MONOMER_NAME
 } from '../constants';
 
+// Global flag is for replaceAll
+const helmGapStartRe = /\{(\*\.)+/g;
+const helmGapIntRe = /\.(\*\.)+/g;
+const helmGapEndRe = /(\.\*)+\}/g;
+
+export function removeGapsFromHelm(srcHelm: string): string {
+  return srcHelm.replaceAll(helmGapStartRe, '{').replaceAll(helmGapIntRe, '.')
+    .replaceAll(helmGapEndRe, '}').replace('{*}', '{}');
+}
+
 export function getParts(subParts: string[], s: string): string[] {
   const j = 0;
   const allParts: string[] = [];
@@ -226,14 +236,14 @@ function unescape(s: string) {
 
   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);
+    case '\\r':
+      return '\r';
+    case '\\n':
+      return '\n';
+    case '\\t':
+      return '\t';
+    default:
+      return m.substring(1);
     }
   });
 }

package/src/widgets/properties-widget.ts

@@ -7,11 +7,12 @@ import $ from 'cash-dom';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
+import {removeGapsFromHelm} from '../utils';
+
 export function getPropertiesDict(seq: string, uh: UnitsHandler): {} {
   const helmString = uh.isHelm() ? seq : uh.getConverter(NOTATION.HELM)(seq);
   // Remove gap symbols for compatibility with WebEditor
-  const helmString2 = helmString.replaceAll(/\.(\*\.)+/g, '.')
-    .replaceAll(/\{(\*\.)+/g, '{').replaceAll(/(\.\*)+}/g, '}');
+  const helmString2 = removeGapsFromHelm(helmString);
 
   const host = ui.div([], {style: {width: '0', height: '0'}});
   document.documentElement.appendChild(host);