Deploy 8279a26

A named cut site answers a click

Source: https://github.com/WINTER4000/turingDNA/commit/8279a26cf5026404a3528af335d9946bfa2187fd

dee/static/app.css

@@ -8345,6 +8345,21 @@ body[data-pe-full="1"] .pe-fullbar { display: flex; }
 .plasmid-map-wrap[data-panning="1"] { user-select: none; }
 .pm-feat:hover, .pm-feat-rect:hover { filter: brightness(1.25); }
 .pm-feat-lbl:hover { text-decoration: underline; }
+/* Cut marks answer a click (showCutSite), so they have to say so. The tick is
+   1px wide — far too thin to aim at — and `stroke-width` would make it look
+   heavier, so the hit area is widened invisibly instead. */
+.pm-cut, .pm-cut-lbl { cursor: pointer; }
+.pm-cut { stroke-linecap: round; }
+.pm-cut:hover, .pm-cut-lbl:hover { stroke: var(--ink); color: var(--ink); }
+.pm-cut-lbl:hover { text-decoration: underline; }
+.pm-cut { pointer-events: stroke; stroke-width: 1; }
+.plasmid-map-wrap .pm-cut { paint-order: stroke; }
+.seqcut { cursor: pointer; }
+.seqcut:hover b { color: var(--ink); text-decoration: underline; }
+.seqcut:hover .seqcut-tick { background: var(--ink); }
+/* The positions printed under the pane are jumps to each remaining site. */
+.seq-cut-jump { color: var(--brand); text-decoration: none; cursor: pointer; }
+.seq-cut-jump:hover { text-decoration: underline; }
 
 @media (max-width: 900px) {
     /* Stack, and let each pane keep its own scroll. Side-by-side below ~900px

dee/static/app.js

@@ -8734,7 +8734,7 @@ function runOracle(opts){
         // Tick marks first, under every label.
         cutInfo.shown.forEach((c) => {
             const [x1, y1] = ptAt(c.pos, len, R - 12, cx, cy), [x2, y2] = ptAt(c.pos, len, R + 20, cx, cy);
-            svg += `<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" class="pm-cut"/>`;
+            svg += `<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" class="pm-cut" data-cut="${c.pos}" data-enz="${esc(c.name)}"/>`;
         });
         items.forEach((p) => {
             const anchor = p.right ? 'start' : 'end';
@@ -8748,6 +8748,7 @@ function runOracle(opts){
                      + `dominant-baseline="middle">${esc(p.f.name)}</text>`;
             } else {
                 svg += `<text x="${tx.toFixed(1)}" y="${p.ly.toFixed(1)}" class="pm-cut-lbl" `
+                     + `data-cut="${p.c.pos}" data-enz="${esc(p.c.name)}" `
                      + `text-anchor="${anchor}" dominant-baseline="middle">${esc(p.c.name)}`
                      + `<title>${esc(p.c.name)} · cuts at ${p.c.pos.toLocaleString()}`
                      + ` · ${p.c.cuts === 1 ? 'unique cutter' : p.c.cuts + ' sites'}</title></text>`;
@@ -9009,12 +9010,51 @@ function runOracle(opts){
         window.addEventListener('blur', end);
     }
 
+    /* A named cut site is a thing you can ACT on, so it answers a click.
+
+       It was decoration: the ring and the sequence both drew the tick and the
+       enzyme's name, and neither did anything when you pressed it — you read
+       "BsrGI" off the map and then went hunting for the coordinate by hand.
+
+       Clicking one puts the caret on that exact cut and scrolls the sequence
+       to it, then lists EVERY site that enzyme has. That second part is the
+       point: an enzyme cutting five times is a different decision from one
+       cutting once, and the map only ever draws a subset (see cutSitesForMap).
+       The positions come from the analysis, never from the drawing, so the
+       list is complete even when the ring is showing nine of a hundred. */
+    function showCutSite(pos, enz) {
+        if (!plasmid || !restriction) return;
+        const p = parseInt(pos, 10);
+        if (!Number.isInteger(p) || p < 1 || p > plasmid.length) return;
+        setSel(p, p);                  // the cut itself — 1 bp, a caret on it
+        scrollSelIntoView();
+        const e = (restriction.enzymes || []).find((x) => x.name === enz);
+        const sites = (e && e.sites) || [];
+        if (!sites.length) { showSeqOut(`<b>${esc(String(enz))}</b> cuts at ${p.toLocaleString()}.`); return; }
+        const idx = sites.indexOf(p);
+        const list = sites.map((s) => (s === p
+            ? `<b>${s.toLocaleString()}</b>`
+            : `<a href="#" class="seq-cut-jump" data-cut="${s}" data-enz="${esc(String(enz))}">${s.toLocaleString()}</a>`
+        )).join(', ');
+        showSeqOut(`<b>${esc(String(enz))}</b> — ${sites.length} site${sites.length === 1 ? '' : 's'}`
+            + (idx >= 0 ? ` (this is #${idx + 1})` : '')
+            + (e.overhang ? ` · ${esc(e.overhang)}` : '')
+            + `<br>cuts at ${list}`);
+    }
+
     function wireFeatureClicks() {
         wireFeatureDrag();
         wireMapPan();
         if (mapWrap.dataset.featWired === '1') return;
         mapWrap.dataset.featWired = '1';
         mapWrap.addEventListener('click', (e) => {
+            // A cut mark sits ON a feature arc, so it has to be checked first
+            // or the feature underneath swallows every click.
+            const cut = e.target.closest && e.target.closest('[data-cut]');
+            if (cut) {
+                showCutSite(cut.getAttribute('data-cut'), cut.getAttribute('data-enz'));
+                return;
+            }
             const el = e.target.closest && e.target.closest('[data-feat]');
             if (!el || !plasmid) return;
             // By INDEX when the element carries one. Resolving by name picked
@@ -9036,11 +9076,18 @@ function runOracle(opts){
         /* Clicking bare backbone drops a caret at that coordinate. This lived
            on the deleted companion map; without it the real map would have
            become click-to-select-features only, which is a capability LOSS
-           dressed up as a rewrite. Feature clicks are handled above and stop
-           here, so the two never fight over one click. */
+           dressed up as a rewrite. Feature AND cut-site clicks are handled
+           above and stop here, so they never fight over one click.
+           Both exclusions are load-bearing: this is a SEPARATE listener, so
+           returning early in the handler above does not stop it. A cut site
+           sits on a leader line pointing away from the ring, so without the
+           `[data-cut]` guard a click on the enzyme's name resolved to the
+           angle of the LABEL rather than the cut, and the caret landed
+           somewhere else entirely. */
         mapWrap.addEventListener('click', (e) => {
             if (!plasmid) return;
             if (e.target.closest && e.target.closest('[data-feat]')) return;
+            if (e.target.closest && e.target.closest('[data-cut]')) return;
             const svg = mapWrap.querySelector('svg');
             if (!svg || !svg.contains(e.target)) return;
             const r = svg.getBoundingClientRect();
@@ -9160,12 +9207,12 @@ function runOracle(opts){
         let lastCutX = -1e9;
         linCuts.shown.slice().sort((a, b) => a.pos - b.pos).forEach((c) => {
             const xx = x(c.pos);
-            svg += `<line x1="${xx.toFixed(1)}" y1="20" x2="${xx.toFixed(1)}" y2="${trackY + 30}" class="pm-cut"/>`;
+            svg += `<line x1="${xx.toFixed(1)}" y1="20" x2="${xx.toFixed(1)}" y2="${trackY + 30}" class="pm-cut" data-cut="${c.pos}" data-enz="${esc(c.name)}"/>`;
             // One baseline, so two names closer than ~46px would overlap.
             // Alternate rows rather than drop the second one.
             const row = (xx - lastCutX) < 46 ? 1 : 0;
             if (row === 0) lastCutX = xx;
-            svg += `<text x="${xx.toFixed(1)}" y="${row ? 6 : 15}" class="pm-cut-lbl" text-anchor="middle">${esc(c.name)}<title>${esc(c.name)} · cuts at ${c.pos.toLocaleString()} · ${c.cuts === 1 ? 'unique cutter' : c.cuts + ' sites'}</title></text>`;
+            svg += `<text x="${xx.toFixed(1)}" y="${row ? 6 : 15}" class="pm-cut-lbl" data-cut="${c.pos}" data-enz="${esc(c.name)}" text-anchor="middle">${esc(c.name)}<title>${esc(c.name)} · cuts at ${c.pos.toLocaleString()} · ${c.cuts === 1 ? 'unique cutter' : c.cuts + ' sites'}</title></text>`;
         });
         svg += `</svg>`;
         mapWrap.innerHTML = `<div class="plasmid-linear-scroll">${svg}</div>`;
@@ -10514,6 +10561,19 @@ function runOracle(opts){
         else showSeqOut('Clipboard not available here.');
     }
     function showSeqOut(html) { const o = $('plasmidSeqOutput'); if (o) { o.hidden = false; o.innerHTML = html; } }
+    /* Every position showCutSite prints is itself a jump — bound once, here,
+       rather than re-bound on each render. */
+    (function wireCutJumps() {
+        const o = $('plasmidSeqOutput');
+        if (!o || o.dataset.cutJumpWired === '1') return;
+        o.dataset.cutJumpWired = '1';
+        o.addEventListener('click', (e) => {
+            const a = e.target.closest && e.target.closest('.seq-cut-jump');
+            if (!a) return;
+            e.preventDefault();
+            showCutSite(a.getAttribute('data-cut'), a.getAttribute('data-enz'));
+        });
+    }());
 
     function _featColorAt(i, feats) { for (const f of feats) if (i >= f.start && i < f.end) return f.color || '#9AA0AA'; return ''; }
     function _inFind(i) { for (const h of findHits) if (i >= h && i < h + findLen) return true; return false; }
@@ -10586,7 +10646,9 @@ function runOracle(opts){
             out += '<div class="seqed-line seqed-cut"><span class="seqed-pos"></span>'
                  + `<span class="seqed-bases" style="--w:${w}">`;
             for (const c of inLine) {
-                out += `<span class="seqcut" style="left:${c.pos - ls}ch">`
+                out += `<span class="seqcut" style="left:${c.pos - ls}ch" `
+                     + `data-cut="${c.pos}" data-enz="${esc(c.name)}" `
+                     + `title="${esc(c.name)} cuts at ${c.pos.toLocaleString()} — click for every site">`
                      + `<i class="seqcut-tick"></i><b>${esc(c.name)}</b></span>`;
             }
             out += '</span></div>';
@@ -10816,6 +10878,14 @@ function runOracle(opts){
         // repaint and a full render is the only way to show the selection.
         if (seqSpans) paintSel(from - 1, to);
         else renderSequence();
+        // The From/To/length readout is part of the selection, not part of the
+        // render. It used to come along for free because setSel called
+        // renderSequence, which syncs it on the way past — so routing the fast
+        // path through paintSel left the boxes showing whatever was there
+        // before, on EVERY map click, feature or cut site. Cheap and
+        // idempotent, so it runs on both branches rather than only the fast
+        // one.
+        syncSelInputs();
         updateSelArc();
         renderStatus();
         announceSelection();
@@ -10993,7 +11063,17 @@ function runOracle(opts){
         else { const p = caret == null ? len : caret; caret = p + ins.length; replaceRange(p, p, ins, true); }
         sel = null; selAnchor = null; caretVisible(); focusEditor();
     }
+    /* A cut mark is a control, not a base. Without this the editor's
+       drag-select starts on mousedown, calls preventDefault, and the click on
+       the enzyme's name never arrives. */
+    seqWrap.addEventListener('click', (e) => {
+        const c = e.target.closest && e.target.closest('[data-cut]');
+        if (!c) return;
+        e.preventDefault();
+        showCutSite(c.getAttribute('data-cut'), c.getAttribute('data-enz'));
+    });
     seqWrap.addEventListener('mousedown', (e) => {
+        if (e.target.closest && e.target.closest('[data-cut]')) return;
         if (!isEditable()) return;
         const i = idxFromEvent(e); if (i == null) return;
         e.preventDefault();

dee/static/index.html

@@ -112,7 +112,7 @@
     <!-- ?v= query bumps invalidate browser + iframe asset caches when app.css /
          app.js change. Bump these numbers whenever you ship a frontend update —
          without them, users keep getting the stale file for up to a week. -->
-    <link rel="stylesheet" href="/static/app.css?v=20260824-cuts3" />
+    <link rel="stylesheet" href="/static/app.css?v=20260824-cutclick3" />
     <!-- The work catalog + the draggable rail. Kept out of app.css so two new
          self-contained surfaces stay reviewable; every colour is an app.css
          token, so both themes work with nothing added. -->
@@ -3132,9 +3132,9 @@
     <!-- Cloning reference data must load before app.js so the Designer
          can read VECTORS / ENZYMES / CLONING_METHODS / TAGS / LINKERS. -->
     <script src="/static/cloning_db.js?v=20260530-ui-polish" defer></script>
-    <script src="/static/context.js?v=20260824-cuts3" defer></script>
-    <script src="/static/lineage.js?v=20260824-cuts3" defer></script>
-    <script src="/static/app.js?v=20260824-cuts3" defer></script>
+    <script src="/static/context.js?v=20260824-cutclick3" defer></script>
+    <script src="/static/lineage.js?v=20260824-cutclick3" defer></script>
+    <script src="/static/app.js?v=20260824-cutclick3" defer></script>
     <!-- The decision trace, BEFORE cockpit.js: applyEvent calls TDTrace.push
          on the very first event, and both are `defer`, so document order is
          load order. Loading it after would drop the opening events of a
@@ -3143,7 +3143,7 @@
     <!-- THE COCKPIT — the persistent orchestrator rail. Loads after app.js so
          TDBench/TDStructure exist when a tool result asks the workspace to
          render something. This is the only conversation surface in the app. -->
-    <script src="/static/cockpit.js?v=20260824-cuts3" defer></script>
+    <script src="/static/cockpit.js?v=20260824-cutclick3" defer></script>
     <!-- structcard before catalog: the catalog calls TDStructCard.observe as
          soon as it paints. Both are defer, so document order is load order. -->
     <script src="/static/structcard.js?v=20260811-buildC" defer></script>

tests/test_plasmid_editor_ui.py

@@ -546,3 +546,64 @@ def test_a_cut_row_is_tall_enough_to_paint_its_own_enzyme_name():
         ".seqed-cut .seqed-bases must be vertical-align: bottom, or the label "
         "floats up by however much descender space the font happens to have"
     )
+
+
+# --- clicking a named cut site -------------------------------------------
+def test_every_drawn_cut_site_carries_the_data_a_click_needs():
+    """A named cut site answers a click (showCutSite), so every place one is
+    DRAWN has to tag it with the position and the enzyme — the circular tick
+    and label, the linear tick and label, and the sequence pane. Miss one and
+    that surface silently goes back to being decoration.
+
+    `_code` matters here: the comments around this feature say "data-cut"
+    repeatedly, and a guard that greps its own explanation passes for free.
+    """
+    js = _code(_read(_APP_JS))
+    emitters = re.findall(r'data-cut="\$\{[^"]+\}"', js)
+    assert len(emitters) >= 5, (
+        f"only {len(emitters)} render path(s) tag a cut site; expected the "
+        f"circular tick + label, the linear tick + label, and the sequence pane"
+    )
+    # position AND enzyme — the site list is per-enzyme, so a bare position
+    # cannot answer "what else does this cut?"
+    assert js.count("data-enz=") >= 5, "cut marks must name their enzyme too"
+    assert "function showCutSite" in js, "the click has no handler"
+
+
+def test_the_backbone_caret_does_not_swallow_a_cut_site_click():
+    """The map has TWO click listeners: one selects features and cut sites, a
+    second drops a caret wherever you click bare backbone. They are separate
+    listeners, so returning early in the first does not stop the second.
+
+    Without a `[data-cut]` guard in the second, clicking an enzyme's name
+    resolved to the angle of the LABEL — which sits out on a leader line — and
+    the caret landed somewhere else entirely, overwriting the correct
+    selection a few microseconds after it was made. Measured before the fix:
+    clicking BsaI at 794 selected 1153.
+    """
+    js = _code(_read(_APP_JS))
+    backbone = re.search(
+        r"mapWrap\.addEventListener\('click',\s*\(e\)\s*=>\s*\{\s*"
+        r"if \(!plasmid\) return;(.*?)\n\s*const svg", js, re.S)
+    assert backbone, "the bare-backbone caret handler moved or was renamed"
+    guards = backbone.group(1)
+    assert "data-feat" in guards, "backbone handler lost its feature guard"
+    assert "data-cut" in guards, (
+        "backbone handler must skip cut marks, or it overwrites the selection "
+        "showCutSite just made"
+    )
+
+
+def test_setting_a_selection_updates_the_from_to_readout():
+    """`setSel` paints the selection directly (paintSel) instead of rebuilding
+    the pane, which is what made map clicks fast. But the From/To/length boxes
+    were synced by renderSequence on the way past, so the fast path left them
+    showing the PREVIOUS selection — on every map click, feature or cut site.
+    """
+    js = _code(_read(_APP_JS))
+    body = re.search(r"function setSel\(from, to\)\s*\{(.*?)\n    \}", js, re.S)
+    assert body, "setSel moved or was renamed"
+    assert "syncSelInputs()" in body.group(1), (
+        "setSel must sync the From/To readout — paintSel does not, and "
+        "renderSequence is no longer on the common path"
+    )