Cloning customizer + mobile-responsive DEE app

dee/static/app.css

@@ -1621,6 +1621,108 @@ input:focus, textarea:focus, select:focus {
 .copy-btn:hover { border-color: var(--brand); color: var(--brand-deep); }
 .copy-btn.copied { background: var(--brand-50); border-color: var(--brand); color: var(--brand-deep); }
 
+/* =================================================== CLONING CUSTOMIZER */
+
+.cloning-section { gap: 14px; }
+.cloning-hint {
+    font-size: 12px;
+    color: var(--ink-soft);
+    line-height: 1.55;
+    margin: 4px 0 8px;
+    max-width: 64ch;
+}
+
+.cloning-controls { display: flex; flex-wrap: wrap; gap: 12px; }
+.cloning-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 240px; }
+.cloning-field-label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-faint);
+    font-weight: 600;
+}
+.cloning-field select { width: 100%; }
+
+.cloning-preview {
+    margin-top: 4px;
+    border: 1px solid var(--line);
+    border-radius: var(--r-2);
+    background: var(--gray-0);
+    overflow: hidden;
+}
+.cloning-preview:empty { display: none; }
+
+.cloning-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    align-items: center;
+    padding: 10px 14px;
+    background: var(--gray-1);
+    border-bottom: 1px solid var(--line);
+    font-size: 12px;
+    color: var(--ink-soft);
+    font-variant-numeric: tabular-nums;
+}
+.cloning-meta strong { color: var(--ink-strong); font-weight: 700; margin-right: 2px; }
+.cloning-legend {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    margin-left: auto;
+    font-size: 11px;
+    color: var(--ink-faint);
+}
+.legend-swatch {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    margin-right: 3px;
+    vertical-align: middle;
+}
+.legend-flank { background: #FEF3C7; border: 1px solid #FDE68A; }
+.legend-cds   { background: var(--brand-50); border: 1px solid var(--brand-100); }
+
+.cloning-preview-block {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-strong);
+    background: var(--gray-0);
+    padding: 14px 16px;
+    line-height: 1.65;
+    white-space: pre;
+    overflow: auto;
+    max-height: 240px;
+    letter-spacing: 0.04em;
+}
+.cloning-preview-block .sec-flank {
+    background: #FEF3C7;
+    color: #92400E;
+    border-radius: 1px;
+}
+.cloning-preview-block .sec-cds {
+    background: var(--brand-50);
+    color: var(--brand-deep);
+    border-radius: 1px;
+}
+
+.cloning-notes, .cloning-sublabel {
+    padding: 0 14px 12px;
+    font-size: 12px;
+    color: var(--ink-soft);
+    line-height: 1.6;
+}
+.cloning-notes strong { color: var(--ink-strong); font-weight: 700; }
+.cloning-sublabel { color: var(--ink-faint); }
+
+@media (max-width: 959px) {
+    .cloning-meta { padding: 9px 12px; font-size: 11px; gap: 10px; }
+    .cloning-legend { width: 100%; margin-left: 0; }
+    .cloning-preview-block { font-size: 11px; padding: 12px 12px; }
+    .cloning-notes, .cloning-sublabel { padding: 0 12px 12px; font-size: 11px; }
+}
+
 /* ====================================== SYNTH ROW (per-row vendor buttons) */
 
 .synth-row {

dee/static/app.js

@@ -908,6 +908,7 @@ function toggleDetailRow(idx, headRow, detailRow, v) {
     if (detailRow.dataset.populated !== '1') {
         detailRow.querySelector('td').innerHTML = renderDetailPanel(v);
         wireCopyButtons(detailRow);
+        wireCloningControls(detailRow);
         detailRow.dataset.populated = '1';
     }
     detailRow.hidden = false;
@@ -940,6 +941,194 @@ const VENDORS = {
     },
 };
 
+// =============================================================== CLONING
+// Minimal "prepare for synthesis" toolkit. Wraps the bare CDS with the
+// appropriate 5'/3' flanking for common cloning workflows. Pure
+// client-side computation — no backend involvement, no server roundtrip
+// per dropdown change. Add new presets here; each one is a pure function
+// from bare CDS string → formatted DNA string, plus metadata.
+//
+// Section coloring in the preview:
+//   - five_prime  → amber (added 5' flanking)
+//   - cds         → ink (original codon-optimized CDS)
+//   - three_prime → amber (added 3' flanking)
+// Mutations highlighting is preserved from the bare CDS view above.
+
+const STOP_CODONS = new Set(['TAA', 'TAG', 'TGA']);
+
+function stripLeadingAtg(cds) {
+    return cds.startsWith('ATG') ? cds.slice(3) : cds;
+}
+function stripTrailingStop(cds) {
+    return STOP_CODONS.has(cds.slice(-3).toUpperCase()) ? cds.slice(0, -3) : cds;
+}
+
+const CLONING_PRESETS = {
+    bare: {
+        name: 'Bare CDS · no flanking',
+        sublabel: 'Recommended when you order through a vendor cloning service (Twist Clonal Gene, IDT Genes, GenScript clone-into-vector). The vendor adds the overhangs internally — you just specify the destination vector at checkout.',
+        format(cds) {
+            return { five: '', cds, three: '' };
+        },
+        notes: '',
+    },
+
+    pet28a_ndei_xhoi: {
+        name: 'pET28a · NdeI + XhoI restriction sites',
+        sublabel: 'For traditional restriction cloning into pET28a. Digest the synthesized DNA with NdeI + XhoI, ligate into pET28a opened with the same enzymes. T7 promoter, IPTG induction, N-terminal His6 + thrombin site provided by the vector.',
+        format(cds) {
+            // NdeI = CATATG (the embedded ATG IS the start codon — strip the CDS's own).
+            // XhoI = CTCGAG, in pET28a is followed by C-term His6 + stop, so we strip
+            // the CDS's stop codon (the vector provides it).
+            const inner = stripTrailingStop(stripLeadingAtg(cds));
+            return {
+                five:  'AAAA' + 'CATATG',
+                cds:   inner,
+                three: 'CTCGAG' + 'AAAA',
+            };
+        },
+        notes: 'Strips the CDS\'s own ATG (NdeI provides the start codon) and stop codon (pET28a\'s C-term His6 + stop follow XhoI). 4 nt AAAA buffers ensure efficient enzyme cleavage at the ends.',
+    },
+
+    gibson_pet28a: {
+        name: 'Gibson · pET28a (NdeI / XhoI linearized)',
+        sublabel: 'For Gibson Assembly Master Mix into pET28a linearized by sequential NdeI + XhoI digest. 20+ bp homology arms; no restriction digest of your insert required.',
+        format(cds) {
+            // Real pET28a flanking sequences. Upstream of NdeI: T7 RBS through ATG.
+            // Downstream of XhoI: pET28a's encoded C-term His6 (which now follows in frame).
+            const inner = stripTrailingStop(stripLeadingAtg(cds));
+            return {
+                five:  'AAGGAGATATACATATG',                          // pET28a RBS + NdeI
+                cds:   inner,
+                three: 'CTCGAGCACCACCACCACCACCACTGA',                 // XhoI + His6 + stop
+            };
+        },
+        notes: 'The 5\' arm is pET28a\'s ribosome binding site through the NdeI ATG (which becomes your start codon). The 3\' arm continues into pET28a\'s built-in C-terminal His6 tag + stop codon, so the purified protein gets a C-term His6 for IMAC.',
+    },
+
+    goldengate_moclo: {
+        name: 'Golden Gate · BsaI · MoClo-compatible',
+        sublabel: 'BsaI sites flanking standard MoClo CDS overhangs (5\' AATG, 3\' GCTT). After digestion, the insert drops into any MoClo Level-1 destination vector accepting a CDS module.',
+        format(cds) {
+            // BsaI cuts GGTCTC(N1)|(N4)... → leaves a 4 nt 5' overhang we control.
+            // MoClo CDS module convention: 5' AATG (which encodes Met start) and 3' GCTT.
+            // So we put GGTCTC, 1 nt spacer (any nucleotide), then AATG / [CDS without ATG] / [no stop] / GCTT / 1 nt / GAGACC (BsaI on opposite strand).
+            const inner = stripTrailingStop(stripLeadingAtg(cds));
+            return {
+                five:  'AAA' + 'GGTCTC' + 'A' + 'AATG',
+                cds:   inner,
+                three: 'GCTT' + 'A' + 'GAGACC' + 'AAA',
+            };
+        },
+        notes: 'After BsaI cleavage, the insert is bounded by AATG (5\') and GCTT (3\') overhangs — the standard MoClo CDS module ends. The A before AATG becomes the methionine start codon. Compatible with MoClo / GoldenBraid / Loop Assembly toolkits.',
+    },
+};
+
+// Per-variant state for the live preview. Keyed by Variant_ID so two
+// expanded rows can have different formats picked simultaneously.
+const cloningState = new Map();   // variantId -> { presetKey, bareCds, mutationPositions }
+
+function applyCloningPreset(bareCds, presetKey) {
+    const preset = CLONING_PRESETS[presetKey] || CLONING_PRESETS.bare;
+    const parts = preset.format(bareCds);
+    return {
+        ...parts,
+        full: parts.five + parts.cds + parts.three,
+        preset,
+    };
+}
+
+function formattedDnaFor(variantId) {
+    const state = cloningState.get(variantId);
+    if (!state) return null;
+    return applyCloningPreset(state.bareCds, state.presetKey);
+}
+
+function renderCloningPreview(variantId) {
+    const host = document.querySelector(`.cloning-preview[data-variant="${cssEscape(variantId)}"]`);
+    if (!host) return;
+    const state = cloningState.get(variantId);
+    if (!state) { host.innerHTML = ''; return; }
+    const { five, cds, three, full, preset } = applyCloningPreset(state.bareCds, state.presetKey);
+    const gc = ((full.toUpperCase().match(/[GC]/g) || []).length / Math.max(1, full.length) * 100).toFixed(1);
+
+    // Build the codon-grouped, section-colored preview. Same wrap as formatDna
+    // (60 nt per line, 10-nt blocks) but with three colored ranges.
+    const html = renderSectionedSequence(five, cds, three);
+
+    host.innerHTML = `
+        <div class="cloning-meta">
+            <span><strong>${full.length}</strong> bp</span>
+            <span><strong>${gc}%</strong> GC</span>
+            ${state.presetKey === 'bare' ? '' : `
+                <span class="cloning-legend">
+                    <span class="legend-swatch legend-flank"></span> added flanking
+                    <span class="legend-swatch legend-cds"></span> codon-optimized CDS
+                </span>
+            `}
+        </div>
+        <div class="cloning-preview-block">${html}</div>
+        ${preset.notes ? `<p class="cloning-notes"><strong>How it ligates:</strong> ${escapeHtml(preset.notes)}</p>` : ''}
+        ${preset.sublabel ? `<p class="cloning-sublabel">${escapeHtml(preset.sublabel)}</p>` : ''}
+    `;
+}
+
+// Render a length-3-grouped, line-wrapped DNA sequence with colored sections.
+function renderSectionedSequence(five, cds, three) {
+    const lower = (five + cds + three).toLowerCase();
+    const fiveEnd = five.length;
+    const threeStart = five.length + cds.length;
+    const padWidth = String(lower.length).length;
+    const charsPerLine = 60;
+    const blockSize = 10;
+    const out = [];
+    for (let i = 0; i < lower.length; i += charsPerLine) {
+        const num = String(i + 1).padStart(padWidth, ' ');
+        let lineHtml = '';
+        for (let j = 0; j < charsPerLine && i + j < lower.length; j++) {
+            if (j > 0 && j % blockSize === 0) lineHtml += ' ';
+            const idx = i + j;
+            const ch = lower[idx];
+            const sectionClass = idx < fiveEnd ? 'sec-flank'
+                : idx >= threeStart ? 'sec-flank'
+                : 'sec-cds';
+            lineHtml += `<span class="${sectionClass}">${escapeHtml(ch)}</span>`;
+        }
+        out.push(`<span class="seq-num">${escapeHtml(num)}</span>  ${lineHtml}`);
+    }
+    return out.join('\n');
+}
+
+// CSS.escape polyfill — needed for querySelector with arbitrary user-supplied
+// variant IDs (V0001 etc. are safe, but defensive).
+function cssEscape(s) {
+    return typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(s) : String(s).replace(/[^a-zA-Z0-9_-]/g, '\\$&');
+}
+
+function wireCloningControls(scope) {
+    scope.querySelectorAll('.cloning-format').forEach((sel) => {
+        const variantId = sel.dataset.variant;
+        // Seed state for this variant on first render.
+        if (!cloningState.has(variantId)) {
+            const variant = (tableState.variants || []).find(v => v.Variant_ID === variantId);
+            if (variant) {
+                cloningState.set(variantId, {
+                    presetKey: sel.value,
+                    bareCds: variant.Optimized_DNA_Seq || '',
+                });
+            }
+        }
+        renderCloningPreview(variantId);
+
+        sel.addEventListener('change', () => {
+            const state = cloningState.get(variantId);
+            if (!state) return;
+            state.presetKey = sel.value;
+            renderCloningPreview(variantId);
+        });
+    });
+}
+
 async function synthesizeDna(dnaSeq, variantId, vendorKey) {
     // Twist gets the in-app gateway flow: live quote + order placement
     // against http://127.0.0.1:8765. GenScript + IDT remain external
@@ -1976,11 +2165,38 @@ function renderDetailPanel(v) {
             <div class="detail-section">
                 <h4>Optimized DNA sequence (${v.Length_bp} bp) · mutated codons highlighted</h4>
                 <div class="sequence-block">${formatDna(v.Optimized_DNA_Seq, mutPositionList)}</div>
+            </div>
+
+            <div class="detail-section cloning-section" data-variant-id="${escapeHtml(v.Variant_ID)}">
+                <h4>Prepare for synthesis</h4>
+                <p class="cloning-hint">
+                    Bare CDS won't drop into a vector — synthesis vendors price by length
+                    but you'll still need restriction sites, Gibson overhangs, or a
+                    vendor cloning service for it to be useful. Pick a format below
+                    to wrap the CDS with the right ends.
+                </p>
+
+                <div class="cloning-controls">
+                    <label class="cloning-field">
+                        <span class="cloning-field-label">Format</span>
+                        <select class="cloning-format" data-variant="${escapeHtml(v.Variant_ID)}">
+                            ${Object.entries(CLONING_PRESETS).map(([key, p]) => `
+                                <option value="${escapeHtml(key)}"${key === 'bare' ? ' selected' : ''}>${escapeHtml(p.name)}</option>
+                            `).join('')}
+                        </select>
+                    </label>
+                </div>
+
+                <!-- Live preview of the formatted DNA. Sections are color-coded:
+                     yellow = added 5'/3' flanking, brand = original CDS, magenta = embedded tag. -->
+                <div class="cloning-preview" data-variant="${escapeHtml(v.Variant_ID)}">
+                    <!-- Filled in by renderCloningPreview() on render and on format change. -->
+                </div>
+
                 <div class="synth-row">
                     <span class="synth-row-label">Synthesize via</span>
                     ${Object.entries(VENDORS).map(([key, vendor]) => `
                         <button class="copy-btn synth-btn"
-                                data-synth-dna="${escapeHtml(v.Optimized_DNA_Seq)}"
                                 data-synth-id="${escapeHtml(v.Variant_ID)}"
                                 data-synth-vendor="${escapeHtml(key)}">
                             <span>${escapeHtml(vendor.name)}</span>
@@ -1991,7 +2207,8 @@ function renderDetailPanel(v) {
                     `).join('')}
                 </div>
                 <div class="primer-actions" style="margin-top:10px">
-                    <button class="copy-btn" data-copy="${escapeHtml(v.Optimized_DNA_Seq)}">Copy DNA</button>
+                    <button class="copy-btn" data-cloning-copy="formatted" data-variant="${escapeHtml(v.Variant_ID)}">Copy formatted DNA</button>
+                    <button class="copy-btn" data-copy="${escapeHtml(v.Optimized_DNA_Seq)}">Copy bare CDS</button>
                     <button class="copy-btn" data-copy="${escapeHtml(v.Mutant_AA_Seq)}">Copy protein</button>
                 </div>
             </div>
@@ -2082,15 +2299,47 @@ function wireCopyButtons(scope) {
         });
     });
 
+    // "Copy formatted DNA" — reads the live cloning-state for this variant
+    // so the user gets the currently-previewed format (not stale data baked
+    // into a data-copy attribute at render time).
+    scope.querySelectorAll('[data-cloning-copy]').forEach((el) => {
+        if (!el.classList.contains('copy-btn')) return;
+        el.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            const variantId = el.dataset.variant;
+            const formatted = formattedDnaFor(variantId);
+            if (!formatted) return;
+            try {
+                await navigator.clipboard.writeText(formatted.full);
+                const original = el.innerHTML;
+                el.classList.add('copied');
+                el.textContent = `Copied ✓ (${formatted.full.length} bp)`;
+                setTimeout(() => {
+                    el.classList.remove('copied');
+                    el.innerHTML = original;
+                }, 1600);
+            } catch (_) { /* clipboard denied */ }
+        });
+    });
+
     // Synthesize-via-X buttons — one per vendor, each carrying its vendor
-    // key in data-synth-vendor. Click copies sequence, shows toast, then
-    // opens that specific vendor's site in a new tab.
+    // key in data-synth-vendor. Sends the *currently-selected* formatted
+    // DNA (per the cloning section's dropdown), not the bare CDS, so the
+    // vendor receives an order with proper cloning ends already attached.
     scope.querySelectorAll('.synth-btn').forEach((el) => {
         el.addEventListener('click', (e) => {
             e.stopPropagation();
-            const dna = el.dataset.synthDna;
             const variantId = el.dataset.synthId;
             const vendorKey = el.dataset.synthVendor;
+            const formatted = formattedDnaFor(variantId);
+            // Fall back to the bare CDS in the unlikely event the cloning
+            // state wasn't seeded (e.g. user clicked the synth button
+            // before the dropdown wired up).
+            let dna = formatted ? formatted.full : '';
+            if (!dna) {
+                const v = (tableState.variants || []).find(x => x.Variant_ID === variantId);
+                dna = v?.Optimized_DNA_Seq || '';
+            }
             synthesizeDna(dna, variantId, vendorKey);
             const original = el.innerHTML;
             el.classList.add('copied');