@datagrok/bio 2.26.7 → 2.26.8

package/package.json

@@ -5,7 +5,7 @@
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
   },
-  "version": "2.26.7",
+  "version": "2.26.8",
   "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",

package/src/package.ts

@@ -390,7 +390,7 @@ export class PackageFunctions {
   })
   static monomerInfoPanel(
     @grok.decorators.param({options: {semType: 'Monomer'}}) monomerSv: DG.SemanticValue): DG.Widget {
-    return getMonomerInfoWidget(monomerSv.value as string, _package.monomerLib);
+    return getMonomerInfoWidget(monomerSv, _package.monomerLib);
   }
 
   @grok.decorators.func({

package/src/utils/cell-renderer.ts

@@ -225,8 +225,8 @@ export class MacromoleculeDifferenceCellRendererBack extends CellRendererWithMon
     const splitter = this.tableCol.temp[SeqTemps.notationProvider]?.separatorSplitter ?? this.tableCol.temp[SeqTemps.notationProvider]?.splitter ?? getSplitter(units, separator);
     const s1SS = splitter(s1);
     const s2SS = splitter(s2);
-    const subParts1 = wu.count(0).take(s1SS.length).map((posIdx) => s1SS.getCanonical(posIdx)).toArray();
-    const subParts2 = wu.count(0).take(s2SS.length).map((posIdx) => s2SS.getCanonical(posIdx)).toArray();
+    const subParts1 = wu.count(0).take(s1SS.length).map((posIdx) => s1SS.getOriginal(posIdx)).toArray();
+    const subParts2 = wu.count(0).take(s2SS.length).map((posIdx) => s2SS.getOriginal(posIdx)).toArray();
     const alphabet = this.tableCol.getTag(bioTAGS.alphabet);
     const biotype = alphabet === ALPHABET.RNA || alphabet === ALPHABET.DNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA;
     drawMoleculeDifferenceOnCanvas(g, x, y, w, h, subParts1, subParts2, biotype, this.monomerLib, undefined, undefined);

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

@@ -154,7 +154,7 @@ export class MonomerCellRendererBack extends CellRendererWithMonomerLibBackBase
         const actBioType: HelmType = this.getHelmType(gridCell, biotype);
         return this.monomerLib!.getTooltip(actBioType, s);
       });
-    const tooltipEl = ui.divH(tooltipEls, {style: {alignItems: 'top'}});
+    const tooltipEl = ui.divH(tooltipEls, {style: {alignItems: 'top', flexWrap: 'wrap', gap: '4px'}});
     // 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) {

package/src/widgets/monomer-info-widget.ts

@@ -5,14 +5,11 @@ import * as DG from 'datagrok-api/dg';
 
 import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types/monomer-library';
 import {HELM_REQUIRED_FIELD as REQ, HELM_RGROUP_FIELDS as RGP} from '@datagrok-libraries/bio/src/utils/const';
+import {MONOMER_MOTIF_SPLITTER, MONOMER_CANONICALIZER_TEMP} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import {IMonomerCanonicalizer} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
 
 import {getCorrectedSmiles, capSmiles} from '../utils/monomer-lib/monomer-manager/monomer-manager';
 
-/** Finds a monomer in the library across all polymer types. */
-function findMonomer(monomerLib: IMonomerLib, symbol: string): Monomer | null {
-  return monomerLib.getMonomer(null, symbol);
-}
-
 /** Caps the monomer (replaces R-groups with cap atoms) and returns capped SMILES. */
 function getCappedSmiles(monomer: Monomer): string | null {
   try {
@@ -22,58 +19,101 @@ function getCappedSmiles(monomer: Monomer): string | null {
   return null;
 }
 
+/** Renders a single-monomer details pane content. */
+function renderMonomerDetails(monomer: Monomer): HTMLElement {
+  const map: {[key: string]: any} = {
+    'Symbol': monomer[REQ.SYMBOL],
+    'Name': monomer[REQ.NAME],
+    'Polymer Type': monomer[REQ.POLYMER_TYPE],
+    'Monomer Type': monomer[REQ.MONOMER_TYPE],
+  };
+  if (monomer[REQ.AUTHOR])
+    map['Author'] = monomer[REQ.AUTHOR];
+  if (monomer.naturalAnalog)
+    map['Natural Analog'] = monomer.naturalAnalog;
+  if (monomer.lib?.source) {
+    let source = monomer.lib.source;
+    if (source.endsWith('.json'))
+      source = source.substring(0, source.length - 5);
+    map['Library'] = source;
+  }
+
+  // Structure
+  if (monomer.molfile)
+    map['Structure'] = grok.chem.drawMolecule(monomer.molfile, 150, 150);
+  else if (monomer.smiles)
+    map['Structure'] = grok.chem.drawMolecule(monomer.smiles, 150, 150);
+
+  // R-Groups
+  const rgroups = monomer[REQ.RGROUPS];
+  if (rgroups && rgroups.length > 0) {
+    for (const rg of rgroups)
+      map[rg[RGP.LABEL] ?? '?'] = rg[RGP.ALTERNATE_ID] ?? '';
+  }
+
+  return ui.tableFromMap(map);
+}
+
+/** Renders the molecule info panel pane content for a single monomer. */
+function renderMoleculePane(monomer: Monomer): HTMLElement {
+  const cappedMol = getCappedSmiles(monomer);
+  if (!cappedMol)
+    return ui.divText('No molecular structure available');
+
+  const molSv = DG.SemanticValue.fromValueType(cappedMol, DG.SEMTYPE.MOLECULE);
+  return ui.panels.infoPanel(molSv).root;
+}
+
+/** Tries to get the canonicalizer from the SemanticValue's cell column. */
+function getCanonicalizer(sv: DG.SemanticValue): IMonomerCanonicalizer | null {
+  try {
+    const col = sv.cell?.column;
+    if (col)
+      return col.temp[MONOMER_CANONICALIZER_TEMP] ?? null;
+  } catch { /* no cell context */ }
+  return null;
+}
+
 /** Creates a widget for the monomer info panel shown in the context panel. */
-export function getMonomerInfoWidget(symbol: string, monomerLib: IMonomerLib): DG.Widget {
-  const monomer = findMonomer(monomerLib, symbol);
-  if (!monomer)
-    return new DG.Widget(ui.divText(`Monomer '${symbol}' not found in the library.`));
+export function getMonomerInfoWidget(sv: DG.SemanticValue, monomerLib: IMonomerLib): DG.Widget {
+  const rawValue = sv.value as string;
+  if (!rawValue)
+    return new DG.Widget(ui.divText('No monomer value.'));
 
-  const acc = ui.accordion('Monomer');
+  // Canonicalize if a canonicalizer is available from the column context
+  const canonicalizer = getCanonicalizer(sv);
+  const canonicalized = canonicalizer ? canonicalizer.canonicalize(rawValue) : rawValue;
 
-  // Details pane — includes general info, structure, and R-groups in one table
-  acc.addPane('Details', () => {
-    const map: {[key: string]: any} = {
-      'Symbol': monomer[REQ.SYMBOL],
-      'Name': monomer[REQ.NAME],
-      'Polymer Type': monomer[REQ.POLYMER_TYPE],
-      'Monomer Type': monomer[REQ.MONOMER_TYPE],
-    };
-    if (monomer[REQ.AUTHOR])
-      map['Author'] = monomer[REQ.AUTHOR];
-    if (monomer.naturalAnalog)
-      map['Natural Analog'] = monomer.naturalAnalog;
-    if (monomer.lib?.source) {
-      let source = monomer.lib.source;
-      if (source.endsWith('.json'))
-        source = source.substring(0, source.length - 5);
-      map['Library'] = source;
-    }
+  // Split by motif splitter — a cell value may contain multiple monomers
+  const symbols = canonicalized.split(MONOMER_MOTIF_SPLITTER).map((s) => s.trim()).filter((s) => s.length > 0);
 
-    // Structure
-    if (monomer.molfile)
-      map['Structure'] = grok.chem.drawMolecule(monomer.molfile, 150, 150);
-    else if (monomer.smiles)
-      map['Structure'] = grok.chem.drawMolecule(monomer.smiles, 150, 150);
-
-    // R-Groups
-    const rgroups = monomer[REQ.RGROUPS];
-    if (rgroups && rgroups.length > 0) {
-      for (const rg of rgroups)
-        map[rg[RGP.LABEL] ?? '?'] = rg[RGP.ALTERNATE_ID] ?? '';
-    }
+  // Resolve monomers from library
+  const monomers: {symbol: string; monomer: Monomer | null}[] =
+    symbols.map((s) => ({symbol: s, monomer: monomerLib.getMonomer(null, s)}));
 
-    return ui.tableFromMap(map);
-  }, true);
+  const found = monomers.filter((m) => m.monomer !== null);
+  if (found.length === 0)
+    return new DG.Widget(ui.divText(`Monomer '${rawValue}' not found in the library.`));
 
-  // Molecule panel pane — cap the monomer first, then embed the generic Molecule context panel
-  acc.addPane('Molecule', () => {
-    const cappedMol = getCappedSmiles(monomer);
-    if (!cappedMol)
-      return ui.divText('No molecular structure available');
+  const acc = ui.accordion('Monomer');
 
-    const molSv = DG.SemanticValue.fromValueType(cappedMol, DG.SEMTYPE.MOLECULE);
-    return ui.panels.infoPanel(molSv).root;
-  }, true);
+  if (found.length === 1) {
+    // Single monomer — flat panes
+    const m = found[0].monomer!;
+    acc.addPane('Details', () => renderMonomerDetails(m), true);
+    acc.addPane('Molecule', () => renderMoleculePane(m), true);
+  } else {
+    // Multiple monomers — one pane per monomer
+    for (const {symbol, monomer} of found) {
+      acc.addPane(symbol, () => {
+        return ui.divV([
+          renderMonomerDetails(monomer!),
+          ui.element('hr'),
+          renderMoleculePane(monomer!),
+        ]);
+      }, true);
+    }
+  }
 
   return new DG.Widget(acc.root);
 }