@datagrok/sequence-translator 1.10.17 → 1.10.19

package/package.json

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

package/src/apps/common/model/oligo-toolkit-package.ts

@@ -31,6 +31,17 @@ export class OligoToolkitPackage extends DG.Package implements ITranslationHelpe
     return this._helmHelper.seqHelper;
   }
 
+  /** Central Bio monomer library (HELMCore + any extra libraries the user has
+   * loaded, including our oligo-conjugates set). Populated synchronously from
+   * `getMonomerLibHelper()` during package init — guaranteed available the
+   * moment any other package function (cell renderer, panels, …) can run. */
+  private _bioMonomerLib?: IMonomerLib;
+  get bioMonomerLib(): IMonomerLib {
+    if (!this._bioMonomerLib)
+      throw new Error('Package SequenceTranslator .bioMonomerLib is not initialized');
+    return this._bioMonomerLib;
+  }
+
   private _monomerLib?: IMonomerLib;
   get monomerLib(): IMonomerLib {
     if (!this._monomerLib)
@@ -65,8 +76,9 @@ export class OligoToolkitPackage extends DG.Package implements ITranslationHelpe
     this._initPromise = initPromise;
   }
 
-  completeInit(helmHelper: IHelmHelper): void {
+  completeInit(helmHelper: IHelmHelper, bioMonomerLib: IMonomerLib): void {
     this._helmHelper = helmHelper;
+    this._bioMonomerLib = bioMonomerLib;
   }
 
   private initLibDataPromise?: Promise<void>;

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

@@ -0,0 +1,48 @@
+/**
+ * Synchronous lookup of HELM monomer symbol → natural-analog letter.
+ *
+ * The central Bio monomer library is fetched once during package init
+ * (see `initSequenceTranslatorInt` → `_package.completeInit`) and parked on
+ * `_package.bioMonomerLib`. Datagrok's `@init` decorator guarantees this
+ * runs before any other package function — including cell-renderer factory
+ * calls and the renderer's `render()` invocations — so by the time we look
+ * up an analog, the lib is always present.
+ *
+ * Lookups are memoized in a small Map. No async, no subscriptions, no
+ * grid invalidation. If the cache is queried before init has finished
+ * (defensive — shouldn't happen in normal flow), we return `null` and the
+ * caller falls back to a neutral color; the next render after init will
+ * resolve fully.
+ */
+
+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>();
+
+/** Resolve `symbol` to its single-letter natural analog. Returns `null` for
+ * unknowns, the canonical letter (uppercase) for matches. Pure sync. */
+export function getNaturalAnalog(symbol: string): string | null {
+  if (!symbol) return null;
+  const cached = _cache.get(symbol);
+  if (cached !== undefined) return cached;
+
+  let lib: IMonomerLib | null = null;
+  try { lib = _package.bioMonomerLib; } catch { /* not yet initialized */ }
+  if (!lib) return null;
+
+  const analog = lookup(lib, symbol);
+  _cache.set(symbol, analog);
+  return analog;
+}
+
+function lookup(lib: IMonomerLib, symbol: string): string | null {
+  for (const pt of lib.getPolymerTypes()) {
+    const m = lib.getMonomer(pt, symbol);
+    const na = m?.naturalAnalog;
+    if (na && typeof na === 'string' && na.length === 1)
+      return na.toUpperCase();
+  }
+  return null;
+}

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-params */
 /**
  * Canvas drawing for the OligoNucleotide cell renderer.
  *
@@ -26,9 +27,11 @@
 import {
   BASE_COLORS, FALLBACK_COLOR,
   canonicalPhosphateSymbol, canonicalSugarSymbol,
+  displayBase, isCanonicalBase,
   ParsedDuplex, ParsedMonomer, ParsedNucleotide, ParsedStrand,
   resolveConjugate, resolvePhosphate, resolveSugar,
 } from './types';
+import {getNaturalAnalog} from './analog-cache';
 
 export interface RenderOpts {
   /** Show base letter inside chip. False at very small sizes. */
@@ -39,7 +42,7 @@ export interface RenderOpts {
   scheme?: string;
 }
 
-const DEFAULT_OPTS: RenderOpts = {showLetters: true, pairAlign: true};
+export const DEFAULT_OPTS: RenderOpts = {showLetters: true, pairAlign: true};
 
 /* Visual tuning. */
 const ASPECT_H_OVER_W = 1.25;
@@ -159,10 +162,28 @@ export function computeLayout(
   const senseStartX = seqX + (alignAt - senseLeadW);
   const antiStartX = seqX + (alignAt - antiLeadW);
 
-  const senseRes = placeStrand(model.sense, false, senseY, senseStartX, seqEndX, layoutBase, 'sense');
-  const antiRes = hasAnti ?
-    placeStrand(model.antisense!, antiReversed, antiY, antiStartX, seqEndX, layoutBase, 'antisense') :
-    {chips: [], links: []};
+  // Per-chip widths: nucleotides with multi-char bases (e.g. `cpm6A`) want a
+  // wider chip so the full symbol fits. We try the wide layout first; if the
+  // total doesn't fit in the cell, we fall back to uniform chipW + ellipsis.
+  // For pair alignment, columns sync across strands (pair-aligned column
+  // takes the max width of the two strands' chips at that pair-index).
+  const senseDisplay = model.sense.monomers;
+  const antiDisplay = hasAnti ?
+    (antiReversed ? model.antisense!.monomers.slice().reverse() : model.antisense!.monomers) :
+    [];
+  let widths = computePairSyncedWidths(senseDisplay, antiDisplay, chipW, fontSize);
+  // 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)) {
+    widths = uniformWidths(senseDisplay, antiDisplay, chipW, fontSize);
+  }
+
+  const senseRes = placeStrand(
+    model.sense, false, senseY, senseStartX, seqEndX, layoutBase, 'sense', widths.sense);
+  const antiRes = hasAnti ? placeStrand(
+    model.antisense!, antiReversed, antiY, antiStartX, seqEndX, layoutBase, 'antisense', widths.anti,
+  ) : {chips: [], links: []};
 
   return {
     ...layoutBase,
@@ -174,11 +195,14 @@ export function computeLayout(
   };
 }
 
-/** Place chips for one strand, optionally reversed. Returns chip and linkage positions. */
+/** Place chips for one strand, optionally reversed. Returns chip and linkage positions.
+ * `chipWidths` is per-display-monomer (i.e. matches the order of `strand.monomers` after
+ * reversal if `reverse=true`). */
 function placeStrand(
   strand: ParsedStrand, reverse: boolean, y: number, startX: number, endX: number,
   layout: Omit<DuplexLayout, 'senseChips' | 'antiChips' | 'senseLinks' | 'antiLinks' | 'antiReversed'>,
   side: StrandSide,
+  chipWidths: number[],
 ): { chips: ChipPos[]; links: LinkagePos[] } {
   const monomers = reverse ? strand.monomers.slice().reverse() : strand.monomers;
   const chips: ChipPos[] = [];
@@ -187,9 +211,7 @@ function placeStrand(
 
   for (let i = 0; i < monomers.length; i++) {
     const m = monomers[i];
-    const w = m.kind === 'conjugate' ?
-      estimateConjugateWidth(m.symbol, layout.chipW, layout.fontSize) :
-      layout.chipW;
+    const w = chipWidths[i] ?? layout.chipW;
 
     if (x + w > endX) break; // truncate at cell edge
 
@@ -241,6 +263,66 @@ function leadingConjugateWidth(
   return w;
 }
 
+/** Desired width for one monomer if we render its base label in full (no
+ * ellipsis). Conjugates get their pill width. Single/two-char bases just use
+ * `chipW`; multi-char bases widen to fit the full label, capped at 3× chipW. */
+function desiredChipWidth(m: ParsedMonomer, chipW: number, fontSize: number): number {
+  if (m.kind === 'conjugate') return estimateConjugateWidth(m.symbol, chipW, fontSize);
+  const base = (m as ParsedNucleotide).base ?? '';
+  if (base.length <= 2) return chipW;
+  // Empirical: glyph width ≈ fontSize * 0.55 for system-ui at our weights.
+  const charW = fontSize * 0.55;
+  const textW = base.length * charW;
+  const padding = chipW * 0.4;
+  return Math.max(chipW, Math.min(chipW * 3, textW + padding));
+}
+
+interface SyncedWidths { sense: number[]; anti: number[]; }
+
+/** For each strand returns a per-chip width array; when both strands have a
+ * chip at the same pair-index (counted past leading conjugates), the column
+ * width is `max(senseDesired, antiDesired)` so pair-aligned positions stay
+ * column-locked even when one side has a long base name. */
+function computePairSyncedWidths(
+  senseDisplay: ParsedMonomer[], antiDisplay: ParsedMonomer[], chipW: number, fontSize: number,
+): SyncedWidths {
+  const senseW = senseDisplay.map((m) => desiredChipWidth(m, chipW, fontSize));
+  const antiW = antiDisplay.map((m) => desiredChipWidth(m, chipW, fontSize));
+
+  // Strip leading conjugates: the first non-conjugate in display order.
+  const senseStart = senseDisplay.findIndex((m) => m.kind === 'nucleotide');
+  const antiStart = antiDisplay.findIndex((m) => m.kind === 'nucleotide');
+  if (senseStart >= 0 && antiStart >= 0) {
+    const pairLen = Math.min(senseDisplay.length - senseStart, antiDisplay.length - antiStart);
+    for (let i = 0; i < pairLen; i++) {
+      const si = senseStart + i;
+      const ai = antiStart + i;
+      const w = Math.max(senseW[si], antiW[ai]);
+      senseW[si] = w; antiW[ai] = w;
+    }
+  }
+  return {sense: senseW, anti: antiW};
+}
+
+/** Uniform-width fallback (every chip = chipW; conjugates still pill-wide). */
+function uniformWidths(
+  senseDisplay: ParsedMonomer[], antiDisplay: ParsedMonomer[], chipW: number, fontSize: number,
+): SyncedWidths {
+  const map = (m: ParsedMonomer) => m.kind === 'conjugate' ?
+    estimateConjugateWidth(m.symbol, chipW, fontSize) : chipW;
+  return {sense: senseDisplay.map(map), anti: antiDisplay.map(map)};
+}
+
+/** Whether the per-chip widths array fits in `budget` (after the leading shift). */
+function fitsInBudget(widths: number[], leadW: number, chipGap: number, budget: number): boolean {
+  let total = leadW;
+  for (let i = 0; i < widths.length; i++) {
+    total += widths[i];
+    if (i < widths.length - 1) total += chipGap;
+  }
+  return total <= budget;
+}
+
 /* ---------------------------------------------------------------- *
  * Drawing
  * ---------------------------------------------------------------- */
@@ -248,11 +330,11 @@ function leadingConjugateWidth(
 export function drawDuplex(
   g: CanvasRenderingContext2D, cellX: number, cellY: number,
   cellW: number, cellH: number, model: ParsedDuplex,
-  opts: Partial<RenderOpts> = {},
+  opts: Partial<RenderOpts> = {}, skipDrawing = false,
 ): DuplexLayout {
   const o: RenderOpts = {...DEFAULT_OPTS, ...opts};
   const layout = computeLayout(cellW, cellH, model, o);
-
+  if (skipDrawing) return layout;
   g.save();
   g.beginPath();
   g.rect(cellX, cellY, cellW, cellH);
@@ -324,11 +406,11 @@ function drawChip(
   w: number, h: number, fontSize: number, opts: RenderOpts,
 ): void {
   const sugarRes = resolveSugar(m.sugar, m.base);
-  const baseColor = BASE_COLORS[m.base ?? ''] ?? FALLBACK_COLOR;
+  const baseColor = resolveBaseColor(m.base);
   const isModSugar = isModifiedSugar(m.sugar);
   const r = Math.min(2.5, w / 4);
 
-  // Chip body — base-canonical pale color
+  // Chip body — base-canonical pale color (or analog's color for custom bases)
   drawRoundRect(g, x, y, w, h, r);
   g.fillStyle = withAlpha(baseColor, CHIP_FILL_ALPHA);
   g.fill();
@@ -347,17 +429,45 @@ function drawChip(
     g.restore();
   }
 
-  // Base letter — biased upward to leave room for stripe
+  // Base label — biased upward to leave room for stripe.
+  // Pick full label or shortened (`X…`) based on whether the chip is wide
+  // enough at the current fontSize. This way, when the layout granted us a
+  // wider chip, the user sees the full HELM symbol; otherwise it's clipped
+  // to first-letter + ellipsis for legibility.
   if (opts.showLetters && m.base && fontSize >= 8) {
     const stripeH = isModSugar ? Math.max(2, h * SUGAR_STRIPE_RATIO) : 0;
+    const label = pickBaseLabel(m.base, w, fontSize);
     g.fillStyle = '#1a1a1a';
     g.font = `600 ${fontSize}px system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`;
     g.textBaseline = 'middle';
     g.textAlign = 'center';
-    g.fillText(m.base, x + w / 2, y + (h - stripeH) / 2 + 0.5);
+    g.fillText(label, x + w / 2, y + (h - stripeH) / 2 + 0.5);
   }
 }
 
+/** Resolve a chip background color for any base, including custom (multi-char)
+ * symbols whose color follows their natural analog (`A` / `C` / `G` / `U` / `T`).
+ * Sync — backed by the central Bio monomer library that's wired up at
+ * package init. */
+function resolveBaseColor(base: string | null): string {
+  if (!base) return FALLBACK_COLOR;
+  if (BASE_COLORS[base]) return BASE_COLORS[base];
+  if (isCanonicalBase(base)) return BASE_COLORS[base] ?? FALLBACK_COLOR;
+  const analog = getNaturalAnalog(base);
+  if (analog && BASE_COLORS[analog]) return BASE_COLORS[analog];
+  return FALLBACK_COLOR;
+}
+
+/** Decide the on-chip label given the chip's actual width: full base symbol
+ * if it fits, else `firstLetter + …`. Single/two-char bases always show fully. */
+function pickBaseLabel(base: string, chipW: number, fontSize: number): string {
+  if (base.length <= 2) return base;
+  const charW = fontSize * 0.55;
+  const fullW = base.length * charW + 4; // small horizontal padding
+  if (fullW <= chipW) return base;
+  return displayBase(base);
+}
+
 function isModifiedSugar(sugar: string): boolean {
   const c = canonicalSugarSymbol(sugar);
   return c !== 'r' && c !== 'd';

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

@@ -14,7 +14,7 @@
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 
-import {drawDuplex, hitTest, DuplexLayout} from './canvas-renderer';
+import {drawDuplex, hitTest, DuplexLayout, RenderOpts, DEFAULT_OPTS} from './canvas-renderer';
 import {looksLikeHelm, parseHelmDuplex} from './helm-parser';
 import {ParsedDuplex} from './types';
 import {showMonomerTooltip} from './tooltip';
@@ -23,9 +23,9 @@ 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>();
+  private modelCache = new DG.LruCache<string, ParsedDuplex>();
   /** Last-rendered layout per cell key, for hit-testing on subsequent moves. */
-  private layoutCache = new Map<string, DuplexLayout>();
+  private layoutCache = new DG.LruCache<string, DuplexLayout>();
 
   get name(): string { return CELL_TYPE; }
   get cellType(): string { return CELL_TYPE; }
@@ -54,11 +54,16 @@ export class OligoNucleotideCellRenderer extends DG.GridCellRenderer {
     }
 
     const model = this.getOrParse(value);
+    if (!gridCell.cell?.dart || !gridCell.cell.column) {
+      w = g.canvas.width;
+      h = g.canvas.height;
+      x = 0;
+      y = 0;
+      // this happens in forms....
+    }
     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();
+    this.layoutCache.set(this.cellKey(value, w, h, DEFAULT_OPTS), layout);
   }
 
   override onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
@@ -68,7 +73,11 @@ export class OligoNucleotideCellRenderer extends DG.GridCellRenderer {
       return;
     }
     const model = this.getOrParse(value);
-    const layout = this.layoutCache.get(this.cellKey(gridCell));
+    const layout = this.layoutCache.getOrCreate(
+      this.cellKey(value, gridCell.bounds.width, gridCell.bounds.height, DEFAULT_OPTS), (v) => drawDuplex(
+        null as unknown as CanvasRenderingContext2D, 0, 0, gridCell.bounds.width, gridCell.bounds.height,
+        model, DEFAULT_OPTS, true,
+      ));
     if (!layout) return;
 
     const bounds = gridCell.bounds;
@@ -88,24 +97,14 @@ export class OligoNucleotideCellRenderer extends DG.GridCellRenderer {
   }
 
   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;
+    return this.modelCache.getOrCreate(helm, (h) => parseHelmDuplex(h));
   }
 
   /** Cache key for a cell's layout. Includes the column's `version` so any
    * edit to the column (which bumps version) orphans previous cache entries
    * — preventing onMouseMove from hit-testing a stale layout that was cached
    * before the edit and not yet replaced by a fresh render(). */
-  private cellKey(gridCell: DG.GridCell): string {
-    const col = gridCell.tableColumn;
-    const colName = col?.name ?? gridCell.gridColumn?.name ?? '?';
-    const ver = col?.version ?? 0;
-    return `${colName}@${ver}::${gridCell.tableRowIndex ?? -1}`;
+  private cellKey(value: string, width: number, height: number, opts: RenderOpts): string {
+    return `${value}::${Math.floor(width)}x${Math.floor(height)}::${JSON.stringify(opts)}`;
   }
 }

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

@@ -13,6 +13,7 @@
  *    (see Apr 2026 commits around RNA triplet splitting)
  */
 
+import {cleanupHelmSymbol} from '@datagrok-libraries/bio/src/helm/utils';
 import {
   canonicalPhosphateSymbol, canonicalSugarSymbol,
   ParsedConjugate, ParsedDuplex, ParsedMonomer, ParsedNucleotide, ParsedStrand,
@@ -84,7 +85,7 @@ function parseMonomer(s: string, position: number): ParsedMonomer {
   // base in parens (optional)
   if (s[i] === '(') {
     const end = s.indexOf(')', i);
-    base = s.substring(i + 1, end);
+    base = cleanupHelmSymbol(s.substring(i + 1, end));
     i = end + 1;
   }
 
@@ -131,7 +132,7 @@ function serializeCanonicalMonomer(m: ParsedMonomer): string {
   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})` : '';
+  const baseStr = !nt.base ? '' : (nt.base.length === 1 ? `(${nt.base})` : `([${nt.base}])`);
   return `${sugarPart}${baseStr}${phosPart}`;
 }
 

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

@@ -14,9 +14,12 @@ import * as ui from 'datagrok-api/ui';
 
 import {parseHelmDuplex} from './helm-parser';
 import {
+  BASE_COLORS, FALLBACK_COLOR,
   canonicalPhosphateSymbol, canonicalSugarSymbol,
+  isCanonicalBase,
   ParsedNucleotide, resolveConjugate, resolvePhosphate, resolveSugar,
 } from './types';
+import {getNaturalAnalog} from './analog-cache';
 
 export function buildOligoPanel(value: DG.SemanticValue): DG.Widget {
   const helm: string = value.value ?? '';
@@ -29,12 +32,16 @@ export function buildOligoPanel(value: DG.SemanticValue): DG.Widget {
   const sugarCounts = new Map<string, number>();
   const phosCounts = new Map<string, number>();
   const conjCounts = new Map<string, number>();
+  /** Custom (non-canonical) base symbols, e.g. `cpm6A`, `5BrU`, `psiU`. */
+  const baseCounts = 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);
+      if (nt.base && !isCanonicalBase(nt.base))
+        bump(baseCounts, nt.base);
     } else {
       bump(conjCounts, m.symbol);
     }
@@ -46,7 +53,7 @@ export function buildOligoPanel(value: DG.SemanticValue): DG.Widget {
   root.appendChild(section('Summary', ui.tableFromMap({
     'Sense length': `${sLen} nt`,
     'Antisense length': aLen ? `${aLen} nt` : 'single-strand',
-    'Modifications used': humanizeModSet(sugarCounts, phosCounts),
+    'Modifications used': humanizeModSet(sugarCounts, phosCounts, baseCounts),
     'Conjugates': conjCounts.size ?
       Array.from(conjCounts.entries()).map(([s, n]) => `${resolveConjugate(s).meta.name} ×${n}`).join(', ') :
       '—',
@@ -55,7 +62,7 @@ export function buildOligoPanel(value: DG.SemanticValue): DG.Widget {
   // 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)));
+  root.appendChild(section('Legend', buildCellLegend(sugarCounts, phosCounts, conjCounts, baseCounts)));
 
   return DG.Widget.fromRoot(root);
 }
@@ -64,7 +71,9 @@ 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 {
+function humanizeModSet(
+  sugars: Map<string, number>, phos: Map<string, number>, bases: Map<string, number>,
+): string {
   const parts: string[] = [];
   // Aggregate by canonical name so legacy + canonical symbols collapse correctly
   const sugarByName = new Map<string, number>();
@@ -83,6 +92,9 @@ function humanizeModSet(sugars: Map<string, number>, phos: Map<string, number>):
   }
   for (const [name, n] of phosByName.entries()) parts.push(`${name} ×${n}`);
 
+  // Custom bases — list each by its raw HELM symbol
+  for (const [sym, n] of bases.entries()) parts.push(`${sym} ×${n}`);
+
   return parts.length ? parts.join(', ') : 'unmodified';
 }
 
@@ -98,14 +110,17 @@ function section(title: string, body: HTMLElement): HTMLElement {
 
 /** 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. */
+ * canonical symbol so legacy/canonical aliases share a row. Custom bases
+ * (non-A/C/G/U/T HELM symbols) are listed with their natural-analog color
+ * — resolved async via the central Bio monomer library. */
 function buildCellLegend(
-  sugars: Map<string, number>, phos: Map<string, number>, conjs: Map<string, number>,
+  sugars: Map<string, number>, phos: Map<string, number>,
+  conjs: Map<string, number>, bases: 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
+  // Sugar mods — 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);
@@ -117,6 +132,7 @@ function buildCellLegend(
     items.push({label: meta.name, color: meta.color, count: n});
   }
 
+  // Phosphate / linkage mods
   const phosByCanon = new Map<string, number>();
   for (const [sym, n] of phos.entries()) {
     const c = canonicalPhosphateSymbol(sym);
@@ -128,6 +144,15 @@ function buildCellLegend(
     items.push({label: `${meta.name} (linkage)`, color: meta.color, count: n});
   }
 
+  // Custom bases — color via natural analog from the central Bio lib (sync).
+  for (const [sym, n] of bases.entries()) {
+    const analog = getNaturalAnalog(sym);
+    const color = (analog && BASE_COLORS[analog]) ? BASE_COLORS[analog] : FALLBACK_COLOR;
+    const label = analog ? `${sym} (base, analog ${analog})` : `${sym} (base)`;
+    items.push({label, color, count: n});
+  }
+
+  // Conjugates
   for (const [sym, n] of conjs.entries()) {
     const meta = resolveConjugate(sym).meta;
     items.push({label: meta.name, color: meta.color, count: n});

package/src/oligo-renderer/types.ts

@@ -148,8 +148,29 @@ export const BASE_COLORS: Readonly<Record<string, string>> = Object.freeze({
   T: '#F0C5C5',
 });
 
+/** The canonical single-letter base symbols. Anything else is a custom /
+ * modified base (e.g. `cpm6A`, `5BrU`, `psiU`) and gets its color via natural
+ * analog lookup against the central Bio monomer library. */
+export const CANONICAL_BASES: Readonly<Set<string>> = new Set(['A', 'C', 'G', 'U', 'T']);
+
 export const FALLBACK_COLOR = '#BCBCBC';
 
+/** True if `base` is one of the canonical single-letter symbols. */
+export function isCanonicalBase(base: string | null | undefined): boolean {
+  return !!base && CANONICAL_BASES.has(base);
+}
+
+/** Shorten a multi-character base symbol to a chip-friendly label.
+ *  - 1-2 char symbols: returned as-is
+ *  - 3+ char symbols: first letter + ellipsis (e.g. `cpm6A` → `c…`)
+ * The renderer also has a width-aware path that shows the full symbol when
+ * the chip can fit it; this helper is the safe fallback. */
+export function displayBase(base: string | null): string {
+  if (!base) return '';
+  if (base.length <= 2) return base;
+  return base[0] + '…';
+}
+
 /** Deterministic color for unknown HELM monomer symbols. Stable across cells. */
 export function hashColor(symbol: string): string {
   let h = 0;

package/src/package-api.ts

@@ -162,6 +162,13 @@ export namespace funcs {
     return await grok.functions.call('SequenceTranslator:OligoNucleotideCellRenderer', {});
   }
 
+  /**
+  OligoNucleotide
+  */
+  export async function editOligoNucleotideCell(cell: any ): Promise<void> {
+    return await grok.functions.call('SequenceTranslator:EditOligoNucleotideCell', { cell });
+  }
+
   /**
   Modifications, lengths, conjugates and color legend for an OligoNucleotide cell
   */

package/src/package-test.ts

@@ -18,6 +18,7 @@ import './tests/polytool-chain-parse-notation-tests';
 import './tests/polytool-chain-from-notation-tests';
 import './tests/toAtomicLevel-tests';
 import './tests/oligo-renderer-tests';
+import './tests/oligo-cell-editor-tests';
 
 import {OligoToolkitTestPackage} from './tests/utils';
 

package/src/package.g.ts

@@ -239,6 +239,14 @@ export function oligoNucleotideCellRenderer() : any {
   return PackageFunctions.oligoNucleotideCellRenderer();
 }
 
+//description: OligoNucleotide
+//tags: cellEditor
+//input: grid_cell cell 
+//meta.role: cellEditor
+export async function editOligoNucleotideCell(cell: any) : Promise<void> {
+  await PackageFunctions.editOligoNucleotideCell(cell);
+}
+
 //name: Oligo-Nucleotide
 //description: Modifications, lengths, conjugates and color legend for an OligoNucleotide cell
 //tags: panel, widgets

package/src/package.ts

@@ -32,6 +32,7 @@ import {CyclizedNotationProvider} from './utils/cyclized';
 import {getSeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
 import {PolyToolDataRole, PolyToolTags} from './consts';
 import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
+import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/types/monomer-library';
 import {getPTCombineDialog} from './polytool/pt-combine-dialog';
 import {PolyToolEnumeratorTypes} from './polytool/types';
 import {splitterAsHelm} from '@datagrok-libraries/bio/src/utils/macromolecule';
@@ -74,10 +75,11 @@ export const _package: OligoToolkitPackage = new OligoToolkitPackage({debug: tru
 let initSequenceTranslatorPromise: Promise<void> | null = null;
 
 async function initSequenceTranslatorInt(): Promise<void> {
-  const [helmHelper] = await Promise.all([
+  const [helmHelper, bioLibHelper] = await Promise.all([
     getHelmHelper(),
+    getMonomerLibHelper(),
   ]);
-  _package.completeInit(helmHelper);
+  _package.completeInit(helmHelper, bioLibHelper.getMonomerLib());
 }
 
 export class PackageFunctions {
@@ -448,6 +450,34 @@ export class PackageFunctions {
     return new OligoNucleotideCellRenderer();
   }
 
+  @grok.decorators.func({
+    name: 'editOligoNucleotideCell',
+    description: 'OligoNucleotide',
+    tags: ['cellEditor'],
+    meta: {
+      role: 'cellEditor',
+    },
+  })
+  static async editOligoNucleotideCell(
+    @grok.decorators.param({type: 'grid_cell'}) cell: DG.GridCell,
+  ): Promise<void> {
+    // Helm:editMoleculeCell can't be reused: it calls seqHelper.getSeqHandler(col),
+    // which throws unless semType === Macromolecule. OligoNucleotide columns have
+    // semType=OligoNucleotide, so we open the HELM Web Editor directly.
+    const helmHelper = await getHelmHelper();
+    const view = ui.div();
+    const app = helmHelper.createWebEditorApp(view, (cell.cell.value as string | null) ?? '');
+    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.setValue(helmValue);
+      })
+      .show({modal: true, fullScreen: true});
+  }
+
   @grok.decorators.func({
     name: 'Oligo-Nucleotide',
     description: 'Modifications, lengths, conjugates and color legend for an OligoNucleotide cell',