@datagrok/sequence-translator 1.10.22 → 1.10.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.10.22",
+  "version": "1.10.23",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"

package/src/oligo-renderer/analog-cache.ts

@@ -15,11 +15,14 @@
  * resolve fully.
  */
 
+import * as DG from 'datagrok-api/dg';
+
 import {IMonomerLib} from '@datagrok-libraries/bio/src/types/monomer-library';
 import {_package} from '../package';
 
-/** symbol → natural-analog letter, or null if absent / no analog. */
-const _cache = new Map<string, string | null>();
+/** symbol → natural-analog letter, or null if absent / no analog.
+ * LRU bound prevents unbounded growth across a long-lived session. */
+const _cache = new DG.LruCache<string, string | null>(256);
 
 /** Resolve `symbol` to its single-letter natural analog. Returns `null` for
  * unknowns, the canonical letter (uppercase) for matches. Pure sync. */

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

@@ -28,6 +28,8 @@
  * (and below antisense, when present).
  */
 
+import * as DG from 'datagrok-api/dg';
+
 import {
   BASE_COLORS, FALLBACK_COLOR,
   contrastTextColor,
@@ -54,8 +56,14 @@ const ASPECT_H_OVER_W = 1.25;
 const STRAND_GAP_RATIO = 0.5;
 const CHIP_GAP_RATIO = 0.40; // wide gaps give apex triangles room to breathe
 const MIN_CHIP_W = 5;
-const MAX_CHIP_W = 17;
+// No hard upper cap on chip width — chipW grows until either (a) the duplex
+// no longer fits in the cell's available width with all monomers shown at
+// their natural widened size, or (b) the cell's height budget runs out.
+// Show-everything is prioritised over making chips big.
 const PAD = 4;
+/** Vertical breathing room above the top apex zone and below the bottom one,
+ * so the linkage marks never butt right up against the cell border. */
+const V_PAD = 10;
 const LABEL_W = 30;
 /** Chip fill opacity — softens the often-saturated library backgrounds so the
  * sugar stripe and base label stay readable on top. */
@@ -122,20 +130,37 @@ export function computeLayout(
   const strandsCount = hasAnti ? 2 : 1;
   const maxLen = Math.max(1, senseLen, antiLen);
 
-  const availW = Math.max(0, cellW - LABEL_W - 2 * PAD);
-  const wChipW = availW / (maxLen + Math.max(0, maxLen - 1) * CHIP_GAP_RATIO);
-
-  // Vertical budget needs to account for apex zones: above sense (always),
-  // and below antisense when present. Each apex zone is APEX_RATIO * chipH.
+  // Height budget caps chipW from above (chip aspect ratio is fixed). The
+  // vertical pad reserves breathing room above/below the apex zones so the
+  // linkage marks never touch the cell border.
   const apexCount = hasAnti ? 2 : 1;
   const heightFactor =
     strandsCount + (strandsCount - 1) * STRAND_GAP_RATIO + apexCount * APEX_RATIO;
-  const hChipH = (cellH - 2 * PAD) / heightFactor;
-  const hChipW = hChipH / ASPECT_H_OVER_W;
-
-  let chipW = Math.min(MAX_CHIP_W, wChipW, hChipW);
-  const textOnlyFallback = chipW < MIN_CHIP_W;
-  if (chipW < MIN_CHIP_W) chipW = MIN_CHIP_W;
+  const hChipH = (cellH - 2 * V_PAD) / heightFactor;
+  const heightCap = hChipH / ASPECT_H_OVER_W;
+
+  // Pick chipW as the LARGEST value in [MIN_CHIP_W, heightCap] for which the
+  // *uniform* layout fits. We size based on uniform (every nucleotide at
+  // chipW, conjugates at their pill widths) so the canonical single-char
+  // chips stay as big as the cell allows. The body below then decides per
+  // cell whether the widened multi-char labels also fit at this chipW —
+  // if not, those few chips are ellipsized rather than shrinking every chip
+  // on the strand. Show-everything priority: shortening one long label is
+  // preferred over making the whole row smaller. If even uniform doesn't
+  // fit at MIN_CHIP_W, we fall back to a text-only summary.
+  let chipW: number;
+  let textOnlyFallback = false;
+  // `maxLen` is read so this remains a no-op binding when callers reference it later.
+  void maxLen;
+  if (heightCap < MIN_CHIP_W) {
+    chipW = MIN_CHIP_W;
+    textOnlyFallback = true;
+  } else if (fitsAtChipW(MIN_CHIP_W, cellW, model, o, 'uniform')) {
+    chipW = findMaxChipW(cellW, model, o, 'uniform', MIN_CHIP_W, heightCap);
+  } else {
+    chipW = MIN_CHIP_W;
+    textOnlyFallback = true;
+  }
 
   const chipH = chipW * ASPECT_H_OVER_W;
   const chipGap = Math.max(3, chipW * CHIP_GAP_RATIO);
@@ -144,7 +169,7 @@ export function computeLayout(
   const apexH = chipH * APEX_RATIO;
 
   const blockH = strandsCount * chipH + (strandsCount - 1) * strandGap + apexCount * apexH;
-  const blockTop = Math.max(PAD, (cellH - blockH) / 2);
+  const blockTop = Math.max(V_PAD, (cellH - blockH) / 2);
   // Sense always sits below a top apex zone; antisense (when present) has
   // its apex zone below it. Single-strand cases get a top apex zone only.
   const senseY = blockTop + apexH;
@@ -193,9 +218,9 @@ export function computeLayout(
   // Falls back to uniform chipW if either strand's chips don't fit.
   const widthBudget = seqEndX - (seqX + alignAt);
   if (!fitsInBudget(widths.sense, senseLeadW, chipGap, widthBudget) ||
-      !fitsInBudget(widths.anti, antiLeadW, chipGap, widthBudget)) {
+      !fitsInBudget(widths.anti, antiLeadW, chipGap, widthBudget))
     widths = uniformWidths(senseDisplay, antiDisplay, chipW, fontSize);
-  }
+
 
   const senseRes = placeStrand(
     model.sense, false, senseY, senseStartX, seqEndX, layoutBase, 'sense', widths.sense);
@@ -337,14 +362,70 @@ function uniformWidths(
   return {sense: senseDisplay.map(map), anti: antiDisplay.map(map)};
 }
 
-/** Whether the per-chip widths array fits in `budget` (after the leading shift). */
+/** Whether the per-chip widths array fits in `budget` (which is measured from
+ * the alignment point, i.e. `seqEndX − (seqX + alignAt)`).
+ *
+ * `widths` already includes any leading conjugates' pill widths at the front.
+ * Those leading conjugates occupy the SHIFT area to the LEFT of the alignment
+ * point (between `seqX` and `seqX + alignAt`) — so their cost against the
+ * post-alignment `budget` is zero. Equivalently: this strand's chips start at
+ * `seqX + (alignAt − leadW)` and span `chipsTotal`, fitting when
+ *   `chipsTotal ≤ seqEndX − (seqX + alignAt − leadW) = budget + leadW`. */
 function fitsInBudget(widths: number[], leadW: number, chipGap: number, budget: number): boolean {
-  let total = leadW;
+  let total = 0;
   for (let i = 0; i < widths.length; i++) {
     total += widths[i];
     if (i < widths.length - 1) total += chipGap;
   }
-  return total <= budget;
+  return total <= budget + leadW;
+}
+
+/** True iff a layout at this `chipW` (using either widened or uniform widths)
+ * places every chip inside the cell's horizontal budget. Same math as the
+ * main `computeLayout` body, just packaged so the binary search can probe. */
+function fitsAtChipW(
+  chipW: number, cellW: number, model: ParsedDuplex, opts: RenderOpts,
+  mode: 'widened' | 'uniform',
+): boolean {
+  const fontSize = Math.max(7, Math.min(13, chipW * 0.62));
+  const chipGap = Math.max(3, chipW * CHIP_GAP_RATIO);
+  const hasAnti = !!model.antisense && model.antisense.monomers.length > 0;
+  const antiReversed = hasAnti && opts.pairAlign;
+
+  const senseLeadW = leadingConjugateWidth(model.sense.monomers, false, chipW, fontSize, chipGap);
+  const antiLeadW = hasAnti ?
+    leadingConjugateWidth(model.antisense!.monomers, antiReversed, chipW, fontSize, chipGap) : 0;
+  const alignAt = Math.max(senseLeadW, antiLeadW);
+
+  const senseDisplay = model.sense.monomers;
+  const antiDisplay = hasAnti ?
+    (antiReversed ? model.antisense!.monomers.slice().reverse() : model.antisense!.monomers) :
+    [];
+  const widths = mode === 'widened' ?
+    computePairSyncedWidths(senseDisplay, antiDisplay, chipW, fontSize) :
+    uniformWidths(senseDisplay, antiDisplay, chipW, fontSize);
+
+  const widthBudget = (cellW - PAD) - ((PAD + LABEL_W) + alignAt);
+  if (widthBudget < 0) return false;
+  return fitsInBudget(widths.sense, senseLeadW, chipGap, widthBudget) &&
+         fitsInBudget(widths.anti, antiLeadW, chipGap, widthBudget);
+}
+
+/** Binary-search the largest chipW ∈ [lo, hi] where `fitsAtChipW(..., mode)`
+ * returns true. Assumes `fitsAtChipW(lo, ..., mode) === true` (caller checks).
+ * Layout fit is monotone-decreasing in chipW, so a 0.25-px termination gives
+ * sub-pixel resolution in a handful of iterations. */
+function findMaxChipW(
+  cellW: number, model: ParsedDuplex, opts: RenderOpts,
+  mode: 'widened' | 'uniform', lo: number, hi: number,
+): number {
+  if (fitsAtChipW(hi, cellW, model, opts, mode)) return hi;
+  while (hi - lo > 0.25) {
+    const mid = (lo + hi) / 2;
+    if (fitsAtChipW(mid, cellW, model, opts, mode)) lo = mid;
+    else hi = mid;
+  }
+  return lo;
 }
 
 /* ---------------------------------------------------------------- *
@@ -373,20 +454,25 @@ export function drawDuplex(
 
   // Strand label "S 5'" left of sense
   drawStrandLabel(g, 'S', '5\'', layout.padding, layout.senseY + layout.chipH / 2, layout);
-
-  // Chips first; apex triangles paint last so they appear on top of the
+  // first draw links so they are behind
+  for (const link of layout.senseLinks) drawLinkageApex(g, link, layout);
   // chip body's anti-aliased corners.
   drawChips(g, layout.senseChips, layout, o);
   drawTruncationMarker(g, layout.senseChips, model.sense.monomers.length, layout);
-  for (const link of layout.senseLinks) drawLinkageApex(g, link, layout);
 
   if (layout.antiY >= 0 && model.antisense) {
     // When reversed, the leftmost chip in display is the 3' end of antisense.
     const leftLabel = layout.antiReversed ? '3\'' : '5\'';
     drawStrandLabel(g, 'AS', leftLabel, layout.padding, layout.antiY + layout.chipH / 2, layout);
+    for (const link of layout.antiLinks) drawLinkageApex(g, link, layout);
     drawChips(g, layout.antiChips, layout, o);
     drawTruncationMarker(g, layout.antiChips, model.antisense.monomers.length, layout);
-    for (const link of layout.antiLinks) drawLinkageApex(g, link, layout);
+
+    // Watson-Crick base-pair indicators in the strand gap. Only meaningful
+    // when antisense is rendered anti-parallel (i.e. reversed for display) —
+    // that's what makes the vertical column alignment actually represent the
+    // duplex partner pairs.
+    if (layout.antiReversed) drawBasePairings(g, layout);
   }
 
   g.restore();
@@ -441,7 +527,10 @@ function drawChip(
   const baseColors = m.base ? getMonomerColors('base', m.base) : null;
   const bg = baseColors?.backgroundcolor ?? resolveBaseColor(m.base);
   const textC = baseColors?.textcolor ?? contrastTextColor(bg);
-  const r = Math.min(2.5, w / 4);
+  // Corner radius scales with the chip's smaller dimension so chips stay
+  // pleasantly rounded at every size — the previous hardcoded 2.5px cap made
+  // larger chips read as squares.
+  const r = Math.min(w, h) / 4;
   const stripeH = Math.max(2, h * SUGAR_STRIPE_RATIO);
 
   // Chip body — background from monomer library (HELM_BASE), softened with
@@ -517,8 +606,9 @@ function pickBaseLabel(base: string, chipW: number, fontSize: number): string {
 function drawLinkageApex(g: CanvasRenderingContext2D, link: LinkagePos, layout: DuplexLayout): void {
   const linkerColors = getMonomerColors('linker', link.phosphateSymbol);
   const color = linkerColors.backgroundcolor ?? resolvePhosphate(link.phosphateSymbol).color;
-
   const apexH = layout.apexH;
+
+  const apexWidthMult = Math.max(apexH / 10, 1);
   const halfW = apexH; // 45° → height equals half-base
   const centerX = link.x + link.w / 2;
   const decoSide = decorationSide(link.strand);
@@ -531,13 +621,124 @@ function drawLinkageApex(g: CanvasRenderingContext2D, link: LinkagePos, layout:
   g.beginPath();
   g.moveTo(centerX - halfW, baseY);
   g.quadraticCurveTo(centerX, ctrlY, centerX + halfW, baseY);
-  g.lineWidth = APEX_LINE_W;
+  g.lineWidth = APEX_LINE_W * apexWidthMult;
   g.lineCap = 'round';
   g.strokeStyle = color;
   g.stroke();
   g.restore();
 }
 
+/* ---------------------------------------------------------------- *
+ * Watson-Crick base pairing
+ *
+ * For each display column where a sense chip sits above an antisense chip
+ * (counted past leading conjugates), determine the pair kind and draw the
+ * canonical biology shorthand in the inter-strand gap:
+ *   - G ↔ C   → 3 vertical lines (3 hydrogen bonds — stronger color)
+ *   - A ↔ U / A ↔ T → 2 vertical lines (2 hydrogen bonds — lighter color)
+ *   - anything else → dashed line (mismatch / bulge)
+ *
+ * Non-canonical bases (modified analogs like `5meC`, `psiU`, `cpm6A`) are
+ * resolved via `getNaturalAnalog` against the central Bio monomer library;
+ * pairing is determined on the natural-analog letter, so a `2'-OMe-5meC`
+ * still pairs as `C` with a `G` partner.
+ * ---------------------------------------------------------------- */
+type PairKind = 'GC' | 'AU' | 'mismatch';
+const PAIR_COLOR_AU = '#4a5da8'; // 3 H-bonds — bolder indigo
+const PAIR_COLOR_GC = '#8c9dc8'; // 2 H-bonds — lighter blue-violet
+const PAIR_COLOR_MISMATCH = '#a5a5a5'; // dashed neutral gray
+const PAIR_LINE_W = 1.1;
+const MISMATCH_LINE_W = 1;
+
+function drawBasePairings(g: CanvasRenderingContext2D, layout: DuplexLayout): void {
+  const senseStart = layout.senseChips.findIndex((c) => c.monomer.kind === 'nucleotide');
+  const antiStart = layout.antiChips.findIndex((c) => c.monomer.kind === 'nucleotide');
+  if (senseStart < 0 || antiStart < 0) return;
+  const pairLen = Math.min(
+    layout.senseChips.length - senseStart,
+    layout.antiChips.length - antiStart,
+  );
+
+  const yTop = layout.senseY + layout.chipH;
+  const yBot = layout.antiY;
+  if (yBot <= yTop) return;
+
+  for (let i = 0; i < pairLen; i++) {
+    const sc = layout.senseChips[senseStart + i];
+    const ac = layout.antiChips[antiStart + i];
+    if (sc.monomer.kind !== 'nucleotide' || ac.monomer.kind !== 'nucleotide') continue;
+    const kind = basePairKind(
+      (sc.monomer as ParsedNucleotide).base,
+      (ac.monomer as ParsedNucleotide).base,
+    );
+    // Pair markers are anchored on the SENSE chip's center because both
+    // chips share the same X column when pair-aligned, but multi-char bases
+    // can give them slightly different widths.
+    const x = sc.x + sc.w / 2;
+    drawPairingMark(g, x, yTop, yBot, kind, sc.w);
+  }
+}
+
+function drawPairingMark(
+  g: CanvasRenderingContext2D, x: number, yTop: number, yBot: number,
+  kind: PairKind, chipW: number,
+): void {
+  g.save();
+  g.lineCap = 'round';
+  const lineWidthMult = Math.max(chipW / 20, 1);
+  if (kind === 'mismatch') {
+    g.strokeStyle = PAIR_COLOR_MISMATCH;
+    g.lineWidth = MISMATCH_LINE_W * lineWidthMult;
+    g.setLineDash([1, 1.6]);
+    g.beginPath();
+    g.moveTo(x, yTop);
+    g.lineTo(x, yBot);
+    g.stroke();
+  } else if (kind === 'GC') {
+    // Three lines — spacing scales with chip width to stay readable on
+    // both narrow and wide chips, capped so they don't bleed past the chip.
+    const off = chipW * 0.22;
+    g.strokeStyle = PAIR_COLOR_GC;
+    g.lineWidth = PAIR_LINE_W * lineWidthMult;
+    for (const dx of [-off, 0, off]) {
+      g.beginPath();
+      g.moveTo(x + dx, yTop + 1);
+      g.lineTo(x + dx, yBot - 1);
+      g.stroke();
+    }
+  } else { // AU / AT
+    const off = chipW * 0.14;
+    g.strokeStyle = PAIR_COLOR_AU;
+    g.lineWidth = PAIR_LINE_W * lineWidthMult;
+    for (const dx of [-off, off]) {
+      g.beginPath();
+      g.moveTo(x + dx, yTop + 1);
+      g.lineTo(x + dx, yBot - 1);
+      g.stroke();
+    }
+  }
+  g.restore();
+}
+
+/** Reduce any base to its canonical A/C/G/U/T letter for pair determination.
+ * Returns null when the base is missing or has no resolvable natural analog. */
+function canonicalizeBaseForPair(b: string | null): string | null {
+  if (!b) return null;
+  if (isCanonicalBase(b)) return b;
+  const analog = getNaturalAnalog(b);
+  return analog && isCanonicalBase(analog) ? analog : null;
+}
+
+function basePairKind(senseBase: string | null, antiBase: string | null): PairKind {
+  const s = canonicalizeBaseForPair(senseBase);
+  const a = canonicalizeBaseForPair(antiBase);
+  if (!s || !a) return 'mismatch';
+  if ((s === 'G' && a === 'C') || (s === 'C' && a === 'G')) return 'GC';
+  if ((s === 'A' && (a === 'U' || a === 'T')) ||
+      ((s === 'U' || s === 'T') && a === 'A')) return 'AU';
+  return 'mismatch';
+}
+
 function drawConjugate(
   g: CanvasRenderingContext2D, symbol: string, x: number, y: number,
   w: number, chipH: number, fontSize: number,
@@ -593,7 +794,7 @@ function drawFallbackText(
 }
 
 /** Apply alpha to any CSS color string, returning rgba(...). Memoized. */
-const _alphaCache = new Map<string, string>();
+const _alphaCache = new DG.LruCache<string, string>(256);
 function withAlpha(color: string, alpha: number): string {
   const key = `${color}|${alpha}`;
   const cached = _alphaCache.get(key);
@@ -605,7 +806,6 @@ function withAlpha(color: string, alpha: number): string {
   document.body.removeChild(probe);
   const m = rgb.match(/\d+/g);
   const out = m ? `rgba(${m[0]},${m[1]},${m[2]},${alpha})` : color;
-  if (_alphaCache.size > 256) _alphaCache.clear();
   _alphaCache.set(key, out);
   return out;
 }

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

@@ -0,0 +1,178 @@
+/**
+ * Cell-level user actions for OligoNucleotide cells.
+ *
+ * The corresponding decorated entry points live in `package.ts` so the
+ * platform can discover them — those methods are kept thin and forward to
+ * the implementations below. Keeping the logic here means `package.ts` stays
+ * structural and the oligo subsystem stays self-contained.
+ *
+ *   - `openOligoCanvasDialog`       — double-click handler: full-screen modal
+ *     with a hi-res canvas rendering, hover interactions reused from the
+ *     grid cell renderer.
+ *   - `openOligoHelmEditorDialog`   — "Edit HELM" action: HELM Web Editor;
+ *     OK writes the edited HELM back to the cell.
+ *   - `copyHelmToClipboard`         — "Copy as HELM" action.
+ *   - `copyDuplexImageToClipboard`  — "Copy as Image" action: hi-res PNG with
+ *     a transparent background, trimmed to the duplex's natural extent.
+ */
+
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
+
+import {parseHelmDuplex} from './helm-parser';
+import {drawDuplex, hitTest, DuplexLayout} from './canvas-renderer';
+import {showMonomerTooltip} from './tooltip';
+
+/** Reference layout dimensions used as the seed for sizing both the dialog
+ * canvas and the clipboard image. Wide enough that any real-world duplex
+ * fits without wrapping; the right edge is trimmed back to the real extent. */
+const REF_W = 1500;
+const REF_H = 120;
+const RIGHT_PAD = 20;
+
+/* -------------------------------------------------------------------------- *
+ * Canvas viewer dialog (double-click on a cell)
+ * -------------------------------------------------------------------------- */
+
+export function openOligoCanvasDialog(cell: DG.GridCell): void {
+  const helm = String(cell.cell?.value ?? '');
+  if (!helm) return;
+  const model = parseHelmDuplex(helm);
+
+  // Probe layout at the reference dimensions so we discover the natural
+  // horizontal extent of this particular duplex (varies with conjugates,
+  // multi-char bases, strand length).
+  const refLayout = drawDuplex(
+    null as unknown as CanvasRenderingContext2D, 0, 0, REF_W, REF_H, model, undefined, true);
+  const trimmedW = Math.max(REF_H, computeMaxChipEndX(refLayout) + RIGHT_PAD);
+
+  // Scale the trimmed layout up to fill the modal — screen width minus 200px.
+  const targetW = Math.max(400, window.innerWidth - 200);
+  const scale = targetW / trimmedW;
+  const finalW = trimmedW * scale; // === targetW by construction
+  const finalH = REF_H * scale;
+
+  // Backing canvas: dimensions in CSS px, pixel-density bumped by devicePixelRatio.
+  const dpr = window.devicePixelRatio || 1;
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round(finalW * dpr));
+  canvas.height = Math.max(1, Math.round(finalH * dpr));
+  canvas.style.width = `${finalW}px`;
+  canvas.style.height = `${finalH}px`;
+  canvas.style.display = 'block';
+  const g = canvas.getContext('2d');
+  if (!g) return;
+  g.scale(dpr, dpr);
+  const finalLayout = drawDuplex(g, 0, 0, finalW, finalH, model);
+
+  // Hover support — same hit-test → tooltip pipeline the grid renderer uses,
+  // just with canvas-local coords instead of GridCell.bounds-relative ones.
+  canvas.addEventListener('mousemove', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const localX = e.clientX - rect.left;
+    const localY = e.clientY - rect.top;
+    const hit = hitTest(localX, localY, model, finalLayout);
+    if (!hit) {
+      ui.tooltip.hide();
+      return;
+    }
+    showMonomerTooltip(hit, e.clientX, e.clientY);
+  });
+  canvas.addEventListener('mouseleave', () => ui.tooltip.hide());
+
+  const container = ui.div([canvas], {style: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+  }});
+
+  ui.dialog({title: 'Oligonucleotide', showHeader: true, showFooter: false})
+    .add(container)
+    .show({modal: true, fullScreen: true});
+}
+
+/* -------------------------------------------------------------------------- *
+ * HELM Web Editor action ("Edit HELM")
+ * -------------------------------------------------------------------------- */
+
+export async function openOligoHelmEditorDialog(value: DG.SemanticValue): Promise<void> {
+  if (!value?.cell) return;
+  const cell = value.cell;
+  // Helm:editMoleculeCell can't be reused: it calls seqHelper.getSeqHandler(col),
+  // which throws unless semType === Macromolecule. OligoNucleotide columns have
+  // semType=OligoNucleotide, so we drive the HELM Web Editor directly.
+  const helmHelper = await getHelmHelper();
+  const view = ui.div();
+  const app = helmHelper.createWebEditorApp(view, String(cell.value ?? ''));
+  ui.dialog({showHeader: false, showFooter: true})
+    .add(view)
+    .onOK(() => {
+      const helmValue = app.canvas!.getHelm(true)
+        .replace(/<\/span>/g, '')
+        .replace(/<span style='background:#bbf;'>/g, '');
+      cell.value = helmValue;
+    })
+    .show({modal: true, fullScreen: true});
+}
+
+/* -------------------------------------------------------------------------- *
+ * Copy as HELM
+ * -------------------------------------------------------------------------- */
+
+export function copyHelmToClipboard(value: DG.SemanticValue): void {
+  const helm = String(value?.value ?? '');
+  if (!helm) return;
+  navigator.clipboard.writeText(helm).then(() => grok.shell.info('HELM copied to clipboard'));
+}
+
+/* -------------------------------------------------------------------------- *
+ * Copy as Image
+ * -------------------------------------------------------------------------- */
+
+const IMAGE_SCALE = 8;
+
+export function copyDuplexImageToClipboard(value: DG.SemanticValue): void {
+  if (!value?.value) return;
+  const model = parseHelmDuplex(String(value.value));
+
+  // Probe layout at the reference size, then crop the canvas to the natural
+  // duplex extent so the resulting image isn't padded with blank pixels.
+  const refLayout = drawDuplex(
+    null as unknown as CanvasRenderingContext2D, 0, 0, REF_W, REF_H, model, undefined, true);
+  const width = Math.max(REF_H, computeMaxChipEndX(refLayout) + RIGHT_PAD);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round((width + RIGHT_PAD) * IMAGE_SCALE));
+  canvas.height = Math.max(1, Math.round(REF_H * IMAGE_SCALE));
+  const g = canvas.getContext('2d');
+  if (!g) return;
+  g.scale(IMAGE_SCALE, IMAGE_SCALE);
+  drawDuplex(g, 0, 0, width, REF_H, model);
+
+  canvas.toBlob((blob) => {
+    if (!blob) return;
+    navigator.clipboard.write([new ClipboardItem({'image/png': blob})])
+      .then(() => grok.shell.info('Image copied to clipboard'))
+      .catch((er) => grok.shell.error(`Failed to copy image: ${er?.message ?? er}`));
+  }, 'image/png');
+}
+
+/* -------------------------------------------------------------------------- *
+ * Internals
+ * -------------------------------------------------------------------------- */
+
+function computeMaxChipEndX(layout: DuplexLayout): number {
+  const lastSense = layout.senseChips.length ?
+    layout.senseChips[layout.senseChips.length - 1] : null;
+  const lastAnti = layout.antiChips.length ?
+    layout.antiChips[layout.antiChips.length - 1] : null;
+  return Math.max(
+    (lastSense?.x ?? 0) + (lastSense?.w ?? 0),
+    (lastAnti?.x ?? 0) + (lastAnti?.w ?? 0),
+  );
+}

package/src/oligo-renderer/monomer-colors.ts

@@ -10,6 +10,8 @@
  * Lookups are memoized in a small map keyed by `${kind}:${symbol}`.
  */
 
+import * as DG from 'datagrok-api/dg';
+
 import {HelmTypes} from '@datagrok-libraries/js-draw-lite/src/types/org';
 import {HelmType} from '@datagrok-libraries/bio/src/helm/types';
 import {_package} from '../package';
@@ -31,7 +33,7 @@ export interface MonomerColorTriple {
 }
 
 const EMPTY: MonomerColorTriple = {backgroundcolor: null, textcolor: null, linecolor: null};
-const _cache = new Map<string, MonomerColorTriple>();
+const _cache = new DG.LruCache<string, MonomerColorTriple>(256);
 
 /** Resolve background/text/line colors for a HELM monomer. Returns `null`s
  * when the library has no entry. Pure sync — backed by `_package.bioMonomerLib`. */
@@ -54,7 +56,6 @@ export function getMonomerColors(kind: MonomerKind, symbol: string): MonomerColo
     }
   } catch { /* lib not yet initialized — return all-null */ }
 
-  if (_cache.size > 512) _cache.clear();
   _cache.set(key, result);
   return result;
 }

package/src/oligo-renderer/tooltip.ts

@@ -14,6 +14,7 @@
 
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
 
 import {getMonomerLibHelper, IMonomerLib} from '@datagrok-libraries/bio/src/types/monomer-library';
 
@@ -208,14 +209,13 @@ function makeStructureCell(label: string): { root: HTMLElement; body: HTMLDivEle
  * Since only one tooltip is visible at a time, moving the cached node
  * between tooltip hosts via `appendChild` is safe: the previous host is
  * being torn down. */
-const _structCache = new Map<string, HTMLElement>();
+const _structCache = new DG.LruCache<string, HTMLElement>(256);
 
 function drawMolfileCached(host: HTMLDivElement, molfile: string, cacheKey: string): void {
   try {
     let cached = _structCache.get(cacheKey);
     if (!cached) {
       cached = grok.chem.drawMolecule(molfile, STRUCT_W, STRUCT_H, false);
-      if (_structCache.size > 256) _structCache.clear();
       _structCache.set(cacheKey, cached);
     }
     host.innerHTML = '';

package/src/package-api.ts

@@ -162,6 +162,13 @@ export namespace funcs {
     return await grok.functions.call('SequenceTranslator:EditOligoNucleotideCell', { cell });
   }
 
+  /**
+  Edit the oligonucleotide HELM in the HELM Web Editor
+  */
+  export async function openOligoHelmEditor(value: any ): Promise<void> {
+    return await grok.functions.call('SequenceTranslator:OpenOligoHelmEditor', { value });
+  }
+
   /**
   Modifications, lengths, conjugates and color legend for an OligoNucleotide cell
   */
@@ -176,6 +183,20 @@ export namespace funcs {
     return await grok.functions.call('SequenceTranslator:OligoNucleotideStructuresPanel', { value });
   }
 
+  /**
+  Copy the HELM string of an oligo cell to the clipboard
+  */
+  export async function copyOligoAsHelm(value: any ): Promise<void> {
+    return await grok.functions.call('SequenceTranslator:CopyOligoAsHelm', { value });
+  }
+
+  /**
+  Copy a high-resolution image of the oligo duplex
+  */
+  export async function copyOligoAsImage(value: any ): Promise<void> {
+    return await grok.functions.call('SequenceTranslator:CopyOligoAsImage', { value });
+  }
+
   /**
   Create a new column tagged as OligoNucleotide so HELM duplex cells render with the oligo view
   */