@datagrok/sequence-translator 1.10.14 → 1.10.16

package/src/oligo-renderer/cell-renderer.ts

@@ -0,0 +1,105 @@
+/**
+ * OligoNucleotide grid cell renderer.
+ *
+ * - Cell value is HELM (under the hood). The renderer parses once per
+ *   distinct value (cached by reference) and draws a duplex view.
+ * - No image cache: drawing is cheap; reparses only when the value changes.
+ * - Tooltip on hover shows monomer details + an async-loaded RDKit
+ *   structure for the hovered monomer.
+ *
+ * Self-contained: does not require `_package.initLibData()` to draw.
+ * The library is consulted lazily inside the tooltip for structure rendering.
+ */
+
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+
+import {drawDuplex, hitTest, DuplexLayout} from './canvas-renderer';
+import {looksLikeHelm, parseHelmDuplex} from './helm-parser';
+import {ParsedDuplex} from './types';
+import {showMonomerTooltip} from './tooltip';
+
+const CELL_TYPE = 'OligoNucleotide';
+
+export class OligoNucleotideCellRenderer extends DG.GridCellRenderer {
+  /** WeakMap-by-value cache of parsed HELM. Avoids reparsing on redraw. */
+  private modelCache = new Map<string, ParsedDuplex>();
+  /** Last-rendered layout per cell key, for hit-testing on subsequent moves. */
+  private layoutCache = new Map<string, DuplexLayout>();
+
+  get name(): string { return CELL_TYPE; }
+  get cellType(): string { return CELL_TYPE; }
+  get defaultWidth(): number | null { return 320; }
+  get defaultHeight(): number | null { return 64; }
+
+  render(
+    g: CanvasRenderingContext2D,
+    x: number, y: number, w: number, h: number,
+    gridCell: DG.GridCell, _cellStyle: DG.GridCellStyle,
+  ): void {
+    const value = gridCell.cell.value as string | null;
+    if (!value || !looksLikeHelm(value)) {
+      // Render raw value as plain text — same fallback as default DG cell.
+      g.save();
+      g.beginPath();
+      g.rect(x, y, w, h);
+      g.clip();
+      g.fillStyle = '#8b949e';
+      g.font = '11px ui-monospace, Menlo, monospace';
+      g.textBaseline = 'middle';
+      g.textAlign = 'left';
+      g.fillText(value ?? '', x + 4, y + h / 2);
+      g.restore();
+      return;
+    }
+
+    const model = this.getOrParse(value);
+    const layout = drawDuplex(g, x, y, w, h, model);
+    // Cache for hit-test on subsequent mouse moves over the same cell.
+    this.layoutCache.set(this.cellKey(gridCell), layout);
+    // Avoid unbounded growth on big tables.
+    if (this.layoutCache.size > 5000) this.layoutCache.clear();
+  }
+
+  override onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
+    const value = gridCell.cell.value as string | null;
+    if (!value || !looksLikeHelm(value)) {
+      ui.tooltip.hide();
+      return;
+    }
+    const model = this.getOrParse(value);
+    const layout = this.layoutCache.get(this.cellKey(gridCell));
+    if (!layout) return;
+
+    const bounds = gridCell.bounds;
+    const localX = e.offsetX - bounds.x;
+    const localY = e.offsetY - bounds.y;
+    const hit = hitTest(localX, localY, model, layout);
+    if (!hit) {
+      ui.tooltip.hide();
+      return;
+    }
+
+    showMonomerTooltip(hit, e.clientX, e.clientY);
+  }
+
+  override onMouseLeave(_gridCell: DG.GridCell, _e: MouseEvent): void {
+    ui.tooltip.hide();
+  }
+
+  private getOrParse(helm: string): ParsedDuplex {
+    let m = this.modelCache.get(helm);
+    if (!m) {
+      m = parseHelmDuplex(helm);
+      // Cap cache to avoid unbounded growth on huge tables.
+      if (this.modelCache.size > 5000) this.modelCache.clear();
+      this.modelCache.set(helm, m);
+    }
+    return m;
+  }
+
+  private cellKey(gridCell: DG.GridCell): string {
+    const colName = gridCell.tableColumn?.name ?? gridCell.gridColumn?.name ?? '?';
+    return `${colName}::${gridCell.tableRowIndex ?? -1}`;
+  }
+}

package/src/oligo-renderer/converters.ts

@@ -0,0 +1,77 @@
+/**
+ * Column converters for the OligoNucleotide semantic type.
+ *
+ * - `tagAsOligoNucleotide(col)` — flags an existing HELM column so the
+ *   platform's renderer registry picks up the oligo cell renderer.
+ * - `convertHelmColumnToOligo(table, helmCol)` — creates a NEW column
+ *   with the same HELM values but tagged as OligoNucleotide. Adds it to
+ *   the table next to the source column. Original column is left intact.
+ * - `combineSenseAntisenseToOligo(table, senseCol, antiCol)` — produces
+ *   an OligoNucleotide column from two existing single-strand HELM columns.
+ *
+ * No autodetection: the user opts in by calling one of these.
+ */
+
+import * as DG from 'datagrok-api/dg';
+
+import {looksLikeHelm} from './helm-parser';
+import {OLIGO_SEM_TYPE, OLIGO_UNITS} from './types';
+
+/** Set the OligoNucleotide semType + unit + cell-renderer hint on a column. */
+export function tagAsOligoNucleotide(col: DG.Column<string>): DG.Column<string> {
+  col.semType = OLIGO_SEM_TYPE;
+  col.meta.units = OLIGO_UNITS;
+  // Make the renderer choice explicit even if the platform's autodiscovery
+  // hasn't run yet for this session.
+  col.setTag('cell.renderer', OLIGO_SEM_TYPE);
+  col.setTag('quality', OLIGO_SEM_TYPE);
+  return col;
+}
+
+/** Clone a HELM column and tag the clone as OligoNucleotide. */
+export function convertHelmColumnToOligo(
+  table: DG.DataFrame, helmCol: DG.Column<string>, newName?: string,
+): DG.Column<string> {
+  const values: string[] = new Array(helmCol.length);
+  for (let i = 0; i < helmCol.length; i++)
+    values[i] = helmCol.get(i) ?? '';
+  const out = DG.Column.fromStrings(table.columns.getUnusedName(newName ?? `${helmCol.name} (oligo)`), values);
+  tagAsOligoNucleotide(out);
+  table.columns.add(out);
+  return out;
+}
+
+/** Build an OligoNucleotide column from separate sense + antisense HELM columns.
+ * Each cell becomes `RNA1{...}|RNA2{...}` with the original chain bodies.
+ * If a row's value isn't HELM, that cell is left empty. */
+export function combineSenseAntisenseToOligo(
+  table: DG.DataFrame, senseCol: DG.Column<string>, antiCol: DG.Column<string>, newName?: string,
+): DG.Column<string> {
+  if (senseCol.length !== antiCol.length)
+    throw new Error('Sense and antisense columns must have the same length');
+
+  const values: string[] = new Array(senseCol.length);
+  for (let i = 0; i < senseCol.length; i++) {
+    const s = senseCol.get(i) ?? '';
+    const a = antiCol.get(i) ?? '';
+    if (!looksLikeHelm(s)) { values[i] = ''; continue; }
+    const senseChain = renumberChain(s, 1);
+    const antiChain = looksLikeHelm(a) ? renumberChain(a, 2) : '';
+    const polymerSection = antiChain ? `${senseChain}|${antiChain}` : senseChain;
+    values[i] = `${polymerSection}$$$$`;
+  }
+
+  const out = DG.Column.fromStrings(
+    table.columns.getUnusedName(newName ?? `${senseCol.name}+${antiCol.name} (oligo)`),
+    values,
+  );
+  tagAsOligoNucleotide(out);
+  table.columns.add(out);
+  return out;
+}
+
+/** Strip the polymer-section index off `RNA1{...}` / `RNA2{...}` and rewrite to `RNA<n>{...}`. */
+function renumberChain(helm: string, n: number): string {
+  const polymerSection = helm.split('$')[0];
+  return polymerSection.replace(/^(RNA|DNA|PEPTIDE|CHEM|BLOB)\d+\{/, `$1${n}{`);
+}

package/src/oligo-renderer/helm-parser.ts

@@ -0,0 +1,154 @@
+/**
+ * Lightweight HELM parser dedicated to RNA / DNA duplex visualization.
+ *
+ * Parses strings of the shape `RNA1{...}|RNA2{...}$$$$` (single or two
+ * chain), with each monomer in `sugar(base)phosphate` form (with brackets
+ * around multi-char codes). Conjugates / linkers without a base are
+ * recognized as standalone units (e.g. `[GalNAc]`, `[L3]`, `[Chol]`).
+ *
+ * Why a custom parser rather than reusing bio's `HelmHelper.parse()`:
+ *  - we want plain `{sugar, base, phosphate}` triples, not a JSDraw2 mol graph
+ *  - parsing is on the cell-render hot path; this is ~zero-allocation
+ *  - bio's HELM splitter has had several normalization changes recently
+ *    (see Apr 2026 commits around RNA triplet splitting)
+ */
+
+import {
+  canonicalPhosphateSymbol, canonicalSugarSymbol,
+  ParsedConjugate, ParsedDuplex, ParsedMonomer, ParsedNucleotide, ParsedStrand,
+} from './types';
+
+/** Parse the whole HELM string. Tolerant of whitespace and missing `$$$$`. */
+export function parseHelmDuplex(helm: string): ParsedDuplex {
+  const polymerSection = (helm ?? '').split('$')[0] ?? '';
+  const chains = polymerSection.split('|').map((c) => c.trim()).filter((c) => c.length > 0);
+
+  const parsedChains: ParsedStrand[] = chains.map(parseChain);
+  return {
+    sense: parsedChains[0] ?? {type: 'RNA', monomers: []},
+    antisense: parsedChains[1] ?? null,
+    raw: helm,
+  };
+}
+
+function parseChain(chain: string): ParsedStrand {
+  // RNA1{...}, DNA2{...}, CHEM3{...}
+  const match = chain.match(/^(RNA|DNA|CHEM|PEPTIDE|BLOB)\d+\{(.*)\}$/);
+  if (!match)
+    return {type: 'CHEM', monomers: []};
+  const type = match[1];
+  const content = match[2];
+  return {type, monomers: parseMonomers(content)};
+}
+
+/** Split chain contents on top-level dots (depth-aware to preserve `[a.b]`/`(c.d)`). */
+function parseMonomers(content: string): ParsedMonomer[] {
+  const out: ParsedMonomer[] = [];
+  let depth = 0;
+  let cur = '';
+  let pos = 0;
+  for (const ch of content) {
+    if (ch === '[' || ch === '(') {
+      depth++;
+    } else if (ch === ']' || ch === ')') {
+      depth--;
+    } else if (ch === '.' && depth === 0) {
+      if (cur) out.push(parseMonomer(cur, pos++));
+      cur = '';
+      continue;
+    }
+    cur += ch;
+  }
+  if (cur) out.push(parseMonomer(cur, pos));
+  return out;
+}
+
+/** Parse one monomer text into a structured triple OR conjugate. */
+function parseMonomer(s: string, position: number): ParsedMonomer {
+  let i = 0;
+  let sugar = '';
+  let base: string | null = null;
+  let phosphate = '';
+  const raw = s;
+
+  // sugar (optional brackets)
+  if (s[0] === '[') {
+    const end = s.indexOf(']');
+    sugar = s.substring(1, end);
+    i = end + 1;
+  } else {
+    sugar = s[0] ?? '';
+    i = 1;
+  }
+
+  // base in parens (optional)
+  if (s[i] === '(') {
+    const end = s.indexOf(')', i);
+    base = s.substring(i + 1, end);
+    i = end + 1;
+  }
+
+  // phosphate / linkage (optional, possibly bracketed)
+  if (i < s.length) {
+    if (s[i] === '[') {
+      const end = s.indexOf(']', i);
+      phosphate = s.substring(i + 1, end);
+      i = end + 1;
+    } else {
+      phosphate = s.substring(i);
+    }
+  }
+
+  // No base → it's a conjugate / linker / cap (e.g. [GalNAc], [Chol], [L3])
+  if (base === null) {
+    const conj: ParsedConjugate = {kind: 'conjugate', position, symbol: sugar, raw};
+    return conj;
+  }
+
+  const nt: ParsedNucleotide = {kind: 'nucleotide', position, sugar, base, phosphate, raw};
+  return nt;
+}
+
+/** Quick check that a string is HELM-like enough to attempt parsing. */
+export function looksLikeHelm(s: string): boolean {
+  return /^\s*(?:RNA|DNA|PEPTIDE|CHEM|BLOB)\d+\s*\{/.test(s ?? '');
+}
+
+/* ---------------------------------------------------------------- *
+ * Canonicalization — rewrite aliased sugar / phosphate symbols
+ * (e.g. `mR` → `m`, `fR` → `fl2r`, `LR` → `lna`, `sP` → `sp`) to the
+ * HELMCore canonical forms before sending the HELM to Bio's
+ * monomer-library-driven pipelines (toAtomicLevelPanel, helmToMolfileV3K, …).
+ * Without this, the central Bio library can't find aliased monomers.
+ * ---------------------------------------------------------------- */
+
+/** Serialize a parsed monomer back to HELM, bracketing multi-char symbols
+ * and using canonical (HELMCore) sugar / phosphate codes. */
+function serializeCanonicalMonomer(m: ParsedMonomer): string {
+  if (m.kind === 'conjugate') return `[${m.symbol}]`;
+  const nt = m as ParsedNucleotide;
+  const sugar = canonicalSugarSymbol(nt.sugar);
+  const phos = canonicalPhosphateSymbol(nt.phosphate);
+  const sugarPart = sugar.length === 1 ? sugar : `[${sugar}]`;
+  const phosPart = !phos ? '' : (phos.length === 1 ? phos : `[${phos}]`);
+  const baseStr = nt.base ? `(${nt.base})` : '';
+  return `${sugarPart}${baseStr}${phosPart}`;
+}
+
+/** Canonicalize the body (between `{...}`) of a HELM chain. */
+export function canonicalizeChainBody(body: string): string {
+  return parseMonomers(body).map(serializeCanonicalMonomer).join('.');
+}
+
+/** Canonicalize a full HELM string (any number of `|`-separated chains). */
+export function canonicalizeHelm(helm: string): string {
+  const polymerSection = (helm ?? '').split('$')[0];
+  const chains = polymerSection.split('|').map((c) => c.trim()).filter(Boolean);
+  const out = chains.map((c) => {
+    const m = c.match(/^((?:RNA|DNA|PEPTIDE|CHEM|BLOB)\d+)\{(.*)\}$/);
+    if (!m) return c;
+    const [, prefix, body] = m;
+    return `${prefix}{${canonicalizeChainBody(body)}}`;
+  });
+  return `${out.join('|')}$$$$`;
+}

package/src/oligo-renderer/legend-panel.ts

@@ -0,0 +1,154 @@
+/**
+ * Context-panel widget for an OligoNucleotide cell.
+ *
+ * - Per-cell summary (lengths, modification counts, conjugates).
+ * - Color legend for the column (one-time visual key, not per-cell repeat).
+ * - Quick actions: copy HELM, open in pattern designer (TODO).
+ *
+ * Registered via `tags: panel` + `input: semantic_value oligo {semType: OligoNucleotide}`
+ * so the platform shows it automatically when an oligo cell is selected.
+ */
+
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+
+import {parseHelmDuplex} from './helm-parser';
+import {
+  canonicalPhosphateSymbol, canonicalSugarSymbol,
+  ParsedNucleotide, resolveConjugate, resolvePhosphate, resolveSugar,
+} from './types';
+
+export function buildOligoPanel(value: DG.SemanticValue): DG.Widget {
+  const helm: string = value.value ?? '';
+  const model = parseHelmDuplex(helm);
+
+  const sLen = model.sense.monomers.filter((m) => m.kind === 'nucleotide').length;
+  const aLen = model.antisense ? model.antisense.monomers.filter((m) => m.kind === 'nucleotide').length : 0;
+
+  // Aggregate modification usage in this oligo
+  const sugarCounts = new Map<string, number>();
+  const phosCounts = new Map<string, number>();
+  const conjCounts = new Map<string, number>();
+  const allMonomers = [...model.sense.monomers, ...(model.antisense?.monomers ?? [])];
+  for (const m of allMonomers) {
+    if (m.kind === 'nucleotide') {
+      const nt = m as ParsedNucleotide;
+      bump(sugarCounts, nt.sugar);
+      if (nt.phosphate) bump(phosCounts, nt.phosphate);
+    } else {
+      bump(conjCounts, m.symbol);
+    }
+  }
+
+  const root = ui.divV([], {style: {fontSize: '12px'}});
+
+  // Summary
+  root.appendChild(section('Summary', ui.tableFromMap({
+    'Sense length': `${sLen} nt`,
+    'Antisense length': aLen ? `${aLen} nt` : 'single-strand',
+    'Modifications used': humanizeModSet(sugarCounts, phosCounts),
+    'Conjugates': conjCounts.size ?
+      Array.from(conjCounts.entries()).map(([s, n]) => `${resolveConjugate(s).meta.name} ×${n}`).join(', ') :
+      '—',
+  })));
+
+  // Legend — only modifications actually present in this cell.
+  // Note: there's no "Copy" section here — the platform already adds a
+  // default "Actions | Copy value" entry for any cell.
+  root.appendChild(section('Legend', buildCellLegend(sugarCounts, phosCounts, conjCounts)));
+
+  return DG.Widget.fromRoot(root);
+}
+
+function bump(map: Map<string, number>, key: string): void {
+  map.set(key, (map.get(key) ?? 0) + 1);
+}
+
+function humanizeModSet(sugars: Map<string, number>, phos: Map<string, number>): string {
+  const parts: string[] = [];
+  // Aggregate by canonical name so legacy + canonical symbols collapse correctly
+  const sugarByName = new Map<string, number>();
+  for (const [sym, n] of sugars.entries()) {
+    const meta = resolveSugar(sym, null).meta;
+    if (meta.short === 'RNA' || meta.short === 'DNA') continue;
+    sugarByName.set(meta.short, (sugarByName.get(meta.short) ?? 0) + n);
+  }
+  for (const [name, n] of sugarByName.entries()) parts.push(`${name} ×${n}`);
+
+  const phosByName = new Map<string, number>();
+  for (const [sym, n] of phos.entries()) {
+    const meta = resolvePhosphate(sym).meta;
+    if (meta.short === 'PO') continue;
+    phosByName.set(meta.short, (phosByName.get(meta.short) ?? 0) + n);
+  }
+  for (const [name, n] of phosByName.entries()) parts.push(`${name} ×${n}`);
+
+  return parts.length ? parts.join(', ') : 'unmodified';
+}
+
+function section(title: string, body: HTMLElement): HTMLElement {
+  return ui.divV([
+    ui.divText(title, {style: {
+      fontWeight: '600', marginTop: '8px', marginBottom: '4px',
+      color: 'var(--grey-5, #555)', textTransform: 'uppercase', fontSize: '10px', letterSpacing: '0.04em',
+    }}),
+    body,
+  ]);
+}
+
+/** Build a legend filtered to modifications actually present in this cell.
+ * One row per unique mod, with the count to the right. Items collapse by
+ * canonical symbol so legacy/canonical aliases share a row. */
+function buildCellLegend(
+  sugars: Map<string, number>, phos: Map<string, number>, conjs: Map<string, number>,
+): HTMLElement {
+  type Item = { label: string; color: string; count: number };
+  const items: Item[] = [];
+
+  // Collapse by canonical symbol so e.g. mR + m → one row
+  const sugarByCanon = new Map<string, number>();
+  for (const [sym, n] of sugars.entries()) {
+    const c = canonicalSugarSymbol(sym);
+    if (c === 'r' || c === 'd') continue; // unmodified
+    sugarByCanon.set(c, (sugarByCanon.get(c) ?? 0) + n);
+  }
+  for (const [c, n] of sugarByCanon.entries()) {
+    const meta = resolveSugar(c, null).meta;
+    items.push({label: meta.name, color: meta.color, count: n});
+  }
+
+  const phosByCanon = new Map<string, number>();
+  for (const [sym, n] of phos.entries()) {
+    const c = canonicalPhosphateSymbol(sym);
+    if (c === 'p') continue;
+    phosByCanon.set(c, (phosByCanon.get(c) ?? 0) + n);
+  }
+  for (const [c, n] of phosByCanon.entries()) {
+    const meta = resolvePhosphate(c).meta;
+    items.push({label: `${meta.name} (linkage)`, color: meta.color, count: n});
+  }
+
+  for (const [sym, n] of conjs.entries()) {
+    const meta = resolveConjugate(sym).meta;
+    items.push({label: meta.name, color: meta.color, count: n});
+  }
+
+  if (items.length === 0) {
+    return ui.divText('No modifications. Chip color reflects the base (A/C/G/U).', {
+      style: {fontSize: '12px', color: 'var(--grey-4, #888)', lineHeight: '1.4'},
+    });
+  }
+
+  const rows = items.map(({label, color, count}) => ui.divH([
+    ui.div([], {style: {
+      width: '14px', height: '14px', borderRadius: '3px',
+      background: color, border: '1px solid rgba(0,0,0,0.15)', flexShrink: '0',
+    }}),
+    ui.divText(label, {style: {fontSize: '12px', flex: '1'}}),
+    ui.divText(`×${count}`, {style: {
+      fontSize: '11px', color: 'var(--grey-4, #888)', fontVariantNumeric: 'tabular-nums',
+    }}),
+  ], {style: {gap: '6px', alignItems: 'center', marginBottom: '3px'}}));
+
+  return ui.divV(rows);
+}

package/src/oligo-renderer/structures-panel.ts

@@ -0,0 +1,96 @@
+/**
+ * Context-panel widget that renders the sense and antisense strands of an
+ * OligoNucleotide cell as separate full molecular structures via Bio's
+ * `Bio:toAtomicLevelPanel` function.
+ *
+ * The duplex HELM (e.g. `RNA1{...}|RNA2{...}$$$$`) is split into two
+ * standalone HELM strings (`RNA1{...}$$$$` each), placed into a tiny
+ * temporary DataFrame with proper Macromolecule/HELM tags, and each row's
+ * cell is wrapped in a `DG.SemanticValue` and forwarded to `toAtomicLevelPanel`.
+ *
+ * Each strand is rendered as a collapsible accordion pane with lazy content:
+ * the molfile assembly only runs when the pane is first expanded, so opening
+ * a row's context panel never blocks on rendering antisense if the user only
+ * cares about sense (and vice versa).
+ */
+
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+
+import {canonicalizeHelm} from './helm-parser';
+
+const HELM_SECTION_RE = /^(RNA|DNA|PEPTIDE|CHEM|BLOB)\d+\{/;
+
+export function buildOligoStructuresPanel(value: DG.SemanticValue): DG.Widget {
+  const helm: string = value.value ?? '';
+  const polymerSection = helm.split('$')[0];
+  const chains = polymerSection.split('|').map((c) => c.trim()).filter((c) => c.length > 0);
+
+  if (chains.length === 0) {
+    return DG.Widget.fromRoot(ui.divText('No HELM chains found', {
+      style: {fontSize: '12px', color: 'var(--grey-4, #888)'},
+    }));
+  }
+
+  // Renumber each chain to "RNA1{...}" and canonicalize aliased symbols
+  // (e.g. `mR` → `m`, `fR` → `fl2r`, `LR` → `lna`, `sP` → `sp`) so the
+  // central Bio monomer library — which only knows the canonical HELMCore
+  // forms — can resolve every monomer when assembling the molfile.
+  const standaloneHelms = chains.map((c) =>
+    canonicalizeHelm(c.replace(HELM_SECTION_RE, '$11{') + '$$$$'),
+  );
+  const labels = chains.length === 1 ? ['Strand'] : ['Sense', 'Antisense'];
+
+  // Build a temp DataFrame whose helm column carries the right tags so
+  // Bio:toAtomicLevelPanel sees a real Macromolecule cell.
+  const helmCol = DG.Column.fromStrings('helm', standaloneHelms);
+  helmCol.semType = DG.SEMTYPE.MACROMOLECULE;
+  helmCol.meta.units = 'helm';
+  helmCol.setTag('aligned', 'SEQ');
+  helmCol.setTag('alphabet', 'RNA');
+  helmCol.setTag('cell.renderer', 'helm');
+  const df = DG.DataFrame.fromColumns([helmCol]);
+
+  const acc = ui.accordion('oligo chemical structures');
+  for (let i = 0; i < df.rowCount; i++) {
+    const label = labels[i];
+    const cell = df.cell(i, 'helm');
+    // Lazy content: the molfile assembly fires only when the pane expands.
+    acc.addPane(label, () => buildStrandPaneContent(cell, label));
+  }
+  return DG.Widget.fromRoot(acc.root);
+}
+
+/** Builds the host element for one strand's molecular structure. The actual
+ * Bio:toAtomicLevelPanel call is async — the host is returned immediately so
+ * the accordion expands without blocking, then content swaps in when ready. */
+function buildStrandPaneContent(cell: DG.Cell, label: string): HTMLElement {
+  const host = ui.div([], {style: {minHeight: '60px'}});
+  host.appendChild(ui.divText('Building structure…', {
+    style: {fontSize: '11px', color: 'var(--grey-4, #888)', padding: '4px'},
+  }));
+
+  (async () => {
+    try {
+      const sv = DG.SemanticValue.fromTableCell(cell);
+      const widget = await grok.functions.call('Bio:toAtomicLevelPanel', {sequence: sv}) as DG.Widget;
+      host.innerHTML = '';
+      host.appendChild(widget?.root ?? notAvailable());
+    } catch (e) {
+      host.innerHTML = '';
+      host.appendChild(ui.divText(
+        `${label} render failed: ${(e as Error)?.message ?? String(e)}`,
+        {style: {fontSize: '11px', color: 'var(--grey-4, #888)'}},
+      ));
+    }
+  })();
+
+  return host;
+}
+
+function notAvailable(): HTMLElement {
+  return ui.divText('Structure not available', {
+    style: {fontSize: '11px', color: 'var(--grey-4, #888)'},
+  });
+}