@datagrok/bio 2.22.4 → 2.22.5

package/package.json

@@ -5,7 +5,7 @@
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
   },
-  "version": "2.22.4",
+  "version": "2.22.5",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.54.4",
+    "@datagrok-libraries/bio": "^5.54.5",
     "@datagrok-libraries/chem-meta": "^1.2.7",
     "@datagrok-libraries/math": "^1.2.4",
     "@datagrok-libraries/ml": "^6.10.4",

package/src/utils/monomer-cell-renderer.ts

@@ -3,7 +3,7 @@ import * as DG from 'datagrok-api/dg';
 import {GridCell} from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 import {ALPHABET, monomerToShort} from '@datagrok-libraries/bio/src/utils/macromolecule';
-import {GAP_SYMBOL, TAGS as bioTAGS,} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import {GAP_SYMBOL, MONOMER_MOTIF_SPLITTER, TAGS as bioTAGS,} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
 import {MONOMER_RENDERER_TAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer';
 import {getGridCellColTemp} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 
@@ -16,6 +16,8 @@ const Tags = new class {
   tooltipHandlerTemp = 'tooltip-handler.Monomer';
 }();
 
+const DASH_GAP_SYMBOL = '-';
+
 export class MonomerCellRendererBack extends CellRendererWithMonomerLibBackBase {
   constructor(gridCol: DG.GridColumn | null, tableCol: DG.Column) {
     super(gridCol, tableCol);
@@ -25,39 +27,51 @@ export class MonomerCellRendererBack extends CellRendererWithMonomerLibBackBase
     x: number, y: number, w: number, h: number, gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
   ): void {
     g.save();
+    // clip the cell
+    g.beginPath();
+    g.rect(x, y, w, h);
+    g.clip();
     try {
       if (!gridCell.isTableCell) return;
       const applyToBackground = gridCell.cell?.column && gridCell.cell.column?.dart && gridCell.cell.column.getTag(MONOMER_RENDERER_TAGS.applyToBackground) === 'true';
 
       g.font = `12px monospace`;
       g.textBaseline = 'middle';
-      g.textAlign = 'center';
-
-      const symbol: string = gridCell.cell.value;
-      if (!symbol || symbol == GAP_SYMBOL) return;
-
-      let textcolor = undefinedColor;
-      let backgroundcolor = 'rgb(255, 255, 255)';
-      if (this.monomerLib) {
-        const alphabet = this.tableCol.getTag(bioTAGS.alphabet);
-        const biotype = alphabet === ALPHABET.RNA || alphabet === ALPHABET.DNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA;
-        if (applyToBackground) {
-          const colors = this.monomerLib.getMonomerColors(biotype, symbol);
-          textcolor = colors?.textcolor ?? textcolor;
-          backgroundcolor = colors?.backgroundcolor ?? backgroundcolor;
-        } else
-          textcolor = this.monomerLib.getMonomerTextColor(biotype, symbol);
-      }
+      g.textAlign = 'left';
 
+      let value: string = gridCell.cell.value;
+      if (!value || value === GAP_SYMBOL)
+        value = DASH_GAP_SYMBOL;
+      const symbols = value.split(MONOMER_MOTIF_SPLITTER).map((s) => !s || s === GAP_SYMBOL ? DASH_GAP_SYMBOL : s.trim());
       //cell width of monomer should dictate how many characters can be displayed
       // for width 40, 6 characters can be displayed (0.15 is 6 / 40)
-      const maxChars = Math.max(2, Math.floor(w * 0.15));
-      if (applyToBackground) {
-        g.fillStyle = backgroundcolor;
-        g.fillRect(x, y, w, h);
+      const shortSymbols = symbols.map((s) => monomerToShort(s, Math.max(2, Math.floor(w * 0.15 / symbols.length))));
+      const symbolWidths = shortSymbols.map((s) => g.measureText(s).width);
+      const totalWidth = symbolWidths.reduce((a, b) => a + b, 0);
+      const xOffset = (w - totalWidth) / 2;
+      let xPos = x + xOffset;
+      const alphabet = this.tableCol.getTag(bioTAGS.alphabet);
+      const biotype = alphabet === ALPHABET.RNA || alphabet === ALPHABET.DNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA;
+      for (let i = 0; i < shortSymbols.length; i++) {
+        const symbol: string = symbols[i];
+        let textcolor = undefinedColor;
+        let backgroundcolor = 'rgb(255, 255, 255)';
+        if (this.monomerLib) {
+          if (applyToBackground) {
+            const colors = this.monomerLib.getMonomerColors(biotype, symbol);
+            textcolor = colors?.textcolor ?? textcolor;
+            backgroundcolor = colors?.backgroundcolor ?? backgroundcolor;
+          } else
+            textcolor = this.monomerLib.getMonomerTextColor(biotype, symbol);
+        }
+        if (applyToBackground && symbols.length == 1) {
+          g.fillStyle = backgroundcolor;
+          g.fillRect(x, y, w, h);
+        }
+        g.fillStyle = textcolor;
+        g.fillText(shortSymbols[i], xPos, y + (h / 2), w);
+        xPos += symbolWidths[i];
       }
-      g.fillStyle = textcolor;
-      g.fillText(monomerToShort(symbol, maxChars), x + (w / 2), y + (h / 2), w);
     } finally {
       g.restore();
     }
@@ -70,12 +84,12 @@ export class MonomerCellRendererBack extends CellRendererWithMonomerLibBackBase
     ) return false;
 
     const alphabet = gridCell.tableColumn.getTag(bioTAGS.alphabet) as ALPHABET;
-    const monomerName = gridCell.cell.value;
+    const monomerName: string = gridCell.cell.value;
     const canvasClientRect = gridCell.grid.canvas.getBoundingClientRect();
     const x1 = gridCell.bounds.right + canvasClientRect.left - 4;
     const y1 = gridCell.bounds.bottom + canvasClientRect.top - 4;
 
-    if (monomerName == GAP_SYMBOL) {
+    if (!monomerName || monomerName == GAP_SYMBOL || monomerName == DASH_GAP_SYMBOL) {
       ui.tooltip.show(ui.divText('gap'), x1, y1);
       return true;
     }
@@ -86,7 +100,18 @@ export class MonomerCellRendererBack extends CellRendererWithMonomerLibBackBase
     }
 
     const biotype = alphabet === ALPHABET.RNA || alphabet === ALPHABET.DNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA;
-    const tooltipEl = this.monomerLib.getTooltip(biotype, monomerName);
+    const tooltipEls = monomerName.split(MONOMER_MOTIF_SPLITTER)
+      .map((s) => !s || s === GAP_SYMBOL || s === DASH_GAP_SYMBOL ? ui.divText('gap') : this.monomerLib!.getTooltip(biotype, s));
+    const tooltipEl = ui.divH(tooltipEls, {style: {alignItems: 'top'}});
+    // tooltip max width is 600px, so we need to shrink the canvases a bit if needed. by default, it is 250px
+    const canvases = Array.from(tooltipEl.querySelectorAll('canvas'));
+    if (canvases.length > 2) {
+      const side = Math.floor(550 / canvases.length);
+      canvases.forEach((c) => {
+        c.style.setProperty('max-width', `${side}px`, 'important');
+        c.style.setProperty('max-height', `${side}px`, 'important');
+      });
+    }
     ui.tooltip.show(tooltipEl, x1, y1);
 
     return true; // To prevent default tooltip behaviour