23:null 24:["$","title",null,{"children":"Disambiguating DOM element selection by nearest common ancestor | Toph Tucker | Observable"}] 29:T5f0,// This could be any HTML; this is just scrounged together to get a little variety in the nesting. node = htl.html`

${Inputs.table(penguins)}

${Plot.dot(penguins, {x: "culmen_length_mm", y: "flipper_length_mm", fill: "species"}) .plot({title: "Flippers vs. culmens", caption: "Do you know what a penguin “culmen” is?", height: 240})}

These are just some nonsense form elements for testing. Here, for instance, I have put a link.

${Inputs.form({ option1: Inputs.checkbox(["A", "B"], {label: "Select some"}), option2: Inputs.range([0, 100], {label: "Amount", step: 1}), option3: Inputs.select(new Set(penguins.map(d => d.island)), {label: "Island"}), option4: Inputs.checkbox(new Set(penguins.map(d => d.species)), {label: "Species"}), option5: Inputs.date() })}

${Plot.plot({ height: 300, y: {grid: true, label: "↑ Annual revenue (billions, adj.)", transform: (d) => d / 1000}, marks: [Plot.areaY(riaa, {x: "year", y: "revenue", z: "format", fill: "group", offset: "wiggle"})] })}

`2a:T89e,function inspect(node) { let a, b, parent, dragging; // Create the menu function onPointerDown(e) { if (e.target.closest(".toph-highlight")) return; dragging = true; node.dataset.dragging = dragging; a = e.target; b = e.target; update(); } function onPointerMove(e) { if (!dragging) return; b = e.target; update(); } // Remove the menu function onPointerUp(e) { if (!dragging) return; dragging = false; node.dataset.dragging = dragging; d3.select(node) .selectAll(".toph-highlight") .filter((d) => d !== parent) .transition() .style("opacity", 0) .remove(); a = undefined; b = undefined; } function onClickBreadcrumb(el) { a = el; b = el; update(); } // Render the selection grow with a little animation function update() { parent = nearestCommonAncestor(a, b); const bb0 = node.getBoundingClientRect(); const els = [parent, a, b]; d3.select(node) .selectAll(".toph-highlight") .data(els) .join((enter) => enter .append("div") .call((sel) => sel.append("div").attr("class", "frame")) .call((sel) => sel.append("div").attr("class", "path")) ) .attr("class", (d, i) => `toph-highlight ${!i ? "parent" : "child"}`) .each(function (d, i) { const bb = d.getBoundingClientRect(); d3.select(this) .transition() .ease(d3.easeCubicOut) .style("left", `${bb.left - bb0.left}px`) .style("top", `${bb.top - bb0.top}px`) .style("width", `${bb.width}px`) .style("height", `${bb.height}px`); }) .call((sel) => sel .select(".path") .html("") .append((d) => d === parent ? elToBreadcrumb(d, node.parentNode, true, onClickBreadcrumb) : elToBreadcrumb(d, parent, true, onClickBreadcrumb) ) ); } // Mutate node to add event listeners node.onpointerdown = onPointerDown; node.onpointerup = onPointerUp; node.onpointermove = onPointerMove; node.style.position = "relative"; node.dataset.tophInspected = "true"; }2b:T68e,2c:[] 27:{"id":"de7c3bbe7ff4fccd","slug":"disambiguating-dom-element-nearest-common-ancestor","title":"Disambiguating DOM element selection by nearest common ancestor","thumbnail":"14b362921f2f9baadd0f0bc030f50b02dc51e6babecae85cc00131c011c746ed","access_level":"public","create_time":"$D2025-12-17T05:02:30.832Z","update_time":"$D2025-12-18T17:56:57.472Z","view_time":null,"first_public_time":"$D2025-12-18T04:09:02.631Z","fork":{"id":"521112b702f45917","slug":"disambiguating-dom-element-selection","title":"Disambiguating DOM element selection","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"stars":1,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024"},"version":609,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"},{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"ee48d2d87f751f74","slug":"sketches","title":"Sketches","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Disambiguating DOM element selection by nearest common ancestor","cells":[{"id":100,"value":"# Disambiguating DOM element selection by nearest common ancestor\nWhen you click on a web page, your pointer could be hitting any number of elements. Here, on pointer down, you select the deepest element it’s over; as you drag to another element, the selection updates to the nearest common ancestor of where you started and where you’re now pointing. Breadcrumbs show for the start element, the end element, and their nearest common ancestor; the first two are shown relative to their common ancestor. When you release, only the breadcrumb for the common ancestor remains; that element is now “selected”. In that breadcrumb, you can click a parent to select it.\n\n_Previously: [table row/column scrubber](https://observablehq.com/@tophtucker/disambiguating-selection-in-a-2d-tree); [DOM hierarchy scrubber](https://observablehq.com/@tophtucker/disambiguating-dom-element-selection). Inspired by staring at the wall pointing at things with Omar. Next: Disambiguating scroll in nested containers!_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":124,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"Try performing some selection tasks here, then compare your performance using your browser’s inspector.\n- Select the SVG G group containing each x-axis and y-axis\n- Select the SVG G group containing all the marks in the plot area\n- Select the table body, but not the whole table\n- Select a single table row\n- Select the DIV wrapping one of the checkbox groups\n- Select one of the four “cell” DIVs\n- Tricky one: select a single gridline in the area chart! (How could that be easier?)\n- Tricky one: try selecting the hyperlink or form elements without activating them! (How could I improve my pointer event handling?)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":300,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":136,"value":"// Mutates an arbitrary DOM node to add event listeners; here, it’s the grid above\ninspect(node)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$2a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"// Gets the little purple/red selector indicator, like div#my-thing.active\nfunction elToSelector(el) {\n const id = el.id;\n const classes = [...el.classList];\n return htl.html`${el.tagName.toLowerCase()}${id ? `#${id}` : \"\"}${classes.length ? `.${classes.join(\".\")}` : \"\"}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"// Will go up to but not include parent\nfunction elToBreadcrumb(el, parent, highlight, onClick) {\n if (!el || el === parent) return null;\n return htl.html`${elToBreadcrumb(el.parentNode, parent, false, onClick)} ⏵ onClick(el)}>${elToSelector(el)}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"elToBreadcrumb(node, document.body, true, (d) => {\n // console.log(d)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"// Written by ChatGPT\nfunction nearestCommonAncestor(a, b) {\n if (!a || !b) return null;\n if (a === b) return a;\n\n // Only works within the same document tree.\n const rootA = a.getRootNode?.();\n const rootB = b.getRootNode?.();\n if (rootA && rootB && rootA !== rootB) return null;\n\n const seen = new Set();\n for (let n = a; n; n = n.parentNode) seen.add(n);\n for (let n = b; n; n = n.parentNode) if (seen.has(n)) return n;\n\n return null;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"$2b","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":281,"value":"// Just for sample data for area chart\nimport {riaa} from \"@observablehq/plot-stack-offset\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 28:"$27:body"