2b:null 2c:["$","title",null,{"children":"GitHub Diff | Fabian Iwand | Observable"}] 31:T40c,

${matched.matcher.type !== "pr" ? "" : htl.html`

${meta.title}
${matched.match.owner}/${matched.match.repo}#${meta.number} by ${meta.user.login}

Lines added in new files: ${ d3.sum(files.filter(d => d.status === "added"), d => d.additions) } / ${ d3.sum(files, d => d.additions) } total Lines removed in deleted files: ${ d3.sum(files.filter(d => d.status === "removed"), d => d.deletions) } / ${ d3.sum(files, d => d.deletions) } total

32:T718,viewof chartOptions = Inputs.form({ net: Object.defineProperty( htl.html` net`, "value", {get() { return this.firstChild.checked }} ), sort: addCss( Inputs.radio( [ "filename", "status", "changes", "additions", "deletions", ], { label: "Sort", value: params.sort ?? "filename" } ), `:scope { max-width: initial !important }` ), filter: onEvent( Inputs.search(data.files, { label: "Filter", filter: filterFields(["filename"]), query: params.filter }), function() { let added = 0, deleted = 0; for(const d of this.value) added += d.additions, deleted += d.deletions; this.output.append(` (+${added} / -${deleted})`); } ), rowHeight: Inputs.range([10, 20], { value: +(params.rowHeight ?? 16), step: 1, label: "Row height" }), hiddenOpacity: Inputs.range([0, 1], { label: "Opacity of hidden items", value: +(params.hiddenOpacity ?? 0), step: 0.01 }) }, { template: ({net, sort, filter, ...inputs}) => { const setNetState = () => net.firstElementChild.disabled = ["filename", "status"].includes(sort.value); setNetState(); sort.addEventListener("input", setNetState); return htl.html`

${sort}

${net}

${filter}

Display options

${Object.values(inputs)} `; } })33:T54c,diff = { const height = this?.shadowRoot?.querySelector(".d2h-file-diff,.d2h-files-diff")?.style.height || this?.dataset.height || "auto"; //console.log({height, dataset: this?.dataset.height, root: this?.shadowRoot}); const element = !file ? htl.html`` : file.patch == null ? htl.html`Diff not available` : renderDiff(asGitDiff(file), null, { outputFormat: diffFormat, css: ` .d2h-file-diff, .d2h-files-diff { resize: vertical; overflow: auto; height: ${height}; min-height: 100px; max-height: max-content; } .d2h-diff-table { font:11px/1.5 var(--monospace) } .d2h-code-linenumber, .d2h-code-side-linenumber { position: sticky; left: 0; } .d2h-code-line, .d2h-code-side-line { padding: 0 1ch; } .d2h-code-side-linenumber { position: sticky; left: 0; padding-right: 1ch !important; } .d2h-diff-tbody { display: grid; grid-template-columns:min-content 1fr; } .d2h-diff-tbody tr { display: grid; grid-column-start: 1; grid-column-end: -1; grid-template-columns: subgrid; } ` }); element.dataset.height = height; return element; }34:T63b,matchers = [ { type: "pr", pattern: new RegExp("^/(?[^/]+)/(?[^/]+)/pull/(?\\d+)($|/)"), async data(match, octokit) { const [{data: meta}, files] = await Promise.all([ octokit.rest.pulls.get(match), octokit.paginate(octokit.rest.pulls.listFiles, match) ]); return {meta, files: await addFileDiffUrls(`${meta.html_url}/files`, files)}}, }, { type: "compare", pattern: new RegExp("^/(?[^/]+)/(?[^/]+)/compare/(?[^#]+)"), async data(match, octokit) { let basehead = decodeURIComponent(match.basehead); // compareCommitsWithBasehead() requires two refs but in the UI "main..." is optional. // Prefix the default branch (assume "main") if only one ref is listed. if(!basehead.includes("...")) basehead = `main...${basehead}`; const {commits: _, files, ...meta} = (await octokit.rest.repos.compareCommitsWithBasehead({ ...match, basehead, // Only affects .commits, not .files. Passing 0 uses the default instead. per_page: 1 })).data; return {meta, files: await addFileDiffUrls(meta.html_url, files)}; } }, { type: "commit", pattern: new RegExp("^/(?[^/]+)/(?[^/]+)/commit/(?[^/]+)"), async data(match, octokit) { const pages = await octokit.paginate(octokit.rest.repos.getCommit, match); const {files: _, ...meta} = pages[0]; const files = pages.map(d => d.files).flat(); return {meta, files: await addFileDiffUrls(meta.html_url, files)}; } }, ]35:Tf23,function renderChart(files, options = {}) { const { sort = "changes", filter = "", net = false, rowHeight = 1.5, hiddenOpacity = .25, } = options; // Remove filtered out rows if their hidden opacity is set to 0. const filterOpacity = hiddenOpacity ? (d => filter.includes(d) ? 1 : hiddenOpacity) : 1; const filterFn = hiddenOpacity ? () => true : d => filter.includes(d); // See https://github.com/observablehq/plot/issues/2298 const renderStopPointerDown = (...args) => { const ret = args.pop().apply(this, args); ret.addEventListener("pointerdown", e => e.stopPropagation()); return ret; }; const domain = d3.sort(files, ...({ changes: [ net ? d => -Math.abs(d.additions - d.deletions) : d => -d.changes, d => d.filename ], additions: [ net ? d => -d.additions + d.deletions : d => -d.additions, d => d.deletions, d => d.filename ], deletions: [ net ? d => -d.deletions + d.additions : d => -d.deletions, d => d.additions, d => d.filename ], filename: [d => d.filename], status: [d => ({renamed: "modified"})[d.status] ?? d.status, d => d.filename], })[sort]).filter(filterFn).map((d) => d.filename); const plot = Plot.plot({ width, height: domain.length * rowHeight + 25, style: { overflow: "visible", }, y: { label: "files", tickFormat: null, tickSize: 0, domain, grid: true, }, x: { grid: true, label: "changed lines" }, inset: 4, insetLeft: 40, insetRight: 40, marginRight: 500, marginTop: 0, marginBottom: 25, color: { legend: true, label: "File status", domain: ["added", "removed", "modified"], range: ["hsl(80,50%,60%)", "hsl(0,100%,70%)", "hsl(210,50%,70%)"] }, marks: [ Plot.frame(), // Highlight rows on hover Plot.rect(files, Plot.pointerY({ opacity: .1, y: "filename", maxRadius: Infinity, fill: "#000", insetRight: -480 })), Plot.axisY(files, { opacity: filterOpacity, y: "filename", text: d => `${d.filename}${d.status === "renamed" ? " (renamed)" : ""}`, fill: "black", anchor: "right", label: null, textAnchor: "start", fontFamily: "monospace", channels: {[sort]: sort}, render: renderStopPointerDown, href: "diff_url", target: "_top", }), Plot.barX(files, { opacity: filterOpacity, x1: "additions", x2: (d) => -d.deletions, y: "filename", fill: d => ({renamed: "modified"})[d.status] ?? d.status, }), // Left-hand bar labels ("-123") Plot.textX(files, { opacity: filterOpacity, filter: "deletions", x: d => -d.deletions, y: "filename", dx: -5, text: d => `-${d.deletions}`, textAnchor: "end", }), // Right-hand bar labels ("+123") Plot.textX(files, { opacity: filterOpacity, filter: "additions", x: d => d.additions, y: "filename", dx: 5, text: d => `+${d.additions}`, textAnchor: "start", }), Plot.ruleX([0]), ] }); plot.__rowHeight = rowHeight; return addCss(plot, ` :scope { overflow: auto; resize: vertical; max-height: max-content; height: ${ // Reset height if the number of rows changes. domain.length === this?.scale("y").domain.length && this?.__rowHeight === rowHeight ? getComputedStyle(this).height : "auto" }; } :scope { overflow: hidden; padding-bottom: 40px; } :scope svg { max-height: 100%; } `); }36:[] 2f:{"id":"054904e2eadabf58","slug":"github-diff","title":"GitHub Diff","thumbnail":"94fb362b39a41ab511366303377dab24b748fc3341e133093f31e21332a10092","access_level":"public","create_time":"$D2026-04-28T21:48:50.857Z","update_time":"$D2026-05-05T18:50:17.422Z","view_time":null,"first_public_time":"$D2026-04-30T11:21:27.939Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":144,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"},{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"GitHub Diff","cells":[{"id":73,"value":"# GitHub Diff\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4,"value":"This notebook provides a bird's-eye view on large GitHub diffs (be it a PR, individual commit or a commit range).\n\nFeatures:\n- filter files by path\n- sort by various criteria\n- view individual changes on hover (shown below the chart)\n- files link back to GitHub ([with some exceptions](https://github.com/orgs/community/discussions/154101))\n\n**View an example:**\n[pull request](?${new URLSearchParams({\n url: \"https://github.com/observablehq/framework/pull/1523\",\n sort: \"additions\",\n filter: \"-test/\",\n})}) / \n[compare view](?${new URLSearchParams({\n url: \"https://github.com/observablehq/framework/compare/v1.12.0...v1.13.2\",\n sort: \"additions\",\n filter: \"-test/\",\n})}) / \n[commit](?${new URLSearchParams({\n url: \"https://github.com/observablehq/framework/commit/dfb6bda4b3466c0d1e326bbd154b49dbb32911fd\",\n sort: \"additions\",\n filter: \"-test/\",\n})})\n\n_Todo: Header for compare view and commit_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"viewof url = Inputs.text({\n type: \"url\",\n width: \"100%\",\n value: params.url ?? (params.pr ? `https://github.com/observablehq/observablehq/pull/${params.pr}` : undefined),\n placeholder: \"e.g. https://github.com/octo/cat/pull/123, https://github.com/octo/cat/compare/main...next\",\n label: \"Diff URL\",\n submit: true,\n autocomplete: \"off\",\n required: true,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":8,"value":"
\n Share link · Reset to defaults\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"viewof file = renderChart.call(this, files, chartOptions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"viewof diffFormat = Inputs.radio([\"line-by-line\", \"side-by-side\"], {value: \"side-by-side\", label: \"Diff format\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":57,"value":"viewof auth = {\n const storageKey = \"GITHUB_DIFF_PAT\";\n const token = localStorage.getItem(storageKey);\n const form = Inputs.password({\n submit: true,\n label: \"Personal access token\",\n placeholder: \"(unauthenticated)\",\n autocomplete: \"off\",\n value: token,\n });\n const remember = htl.html` { e.stopPropagation(); onChange() }}\n > Remember token`;\n \n const onChange = () => {\n remember.firstChild.checked && form.value\n ? localStorage.setItem(storageKey, form.value)\n : localStorage.removeItem(storageKey);\n };\n form.addEventListener(\"input\", onChange);\n \n const wrapper = htl.html`
${form}${remember}`;\n return Object.defineProperty(wrapper, \"value\", {get: () => form.value}); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"matched = matchUrl(url, matchers)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"data = matched.matcher.data(matched.match, octokit)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"meta = data.meta","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"files = data.files","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"files","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"params = Object.fromEntries(new URL(document.baseURI).searchParams)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"import {addCss, tokenizeQuery} from \"@observablehq/fabians-toolbox\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"import {tokenize} from \"@mootari/tokenize-query\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"import {diff as renderDiff, diff2html} from \"da54b9467957e2a9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"Octokit = (await import(\"https://esm.run/@octokit/rest@22\")).Octokit","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"octokit = new Octokit({auth /* or e.g. Secret(\"my_secret_token\") */})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"function matchUrl(url, matchers) {\n const path = new URL(url).pathname;\n for(const matcher of matchers) {\n const match = path.match(matcher.pattern)?.groups;\n if(match) return {matcher, match};\n }\n throw new Error(\"Invalid path\"); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"function onEvent(input, handler, options = {}) {\n const {\n event = \"input\",\n init = true,\n invalidation: invalidated = null\n } = options;\n input.addEventListener(event, handler);\n invalidated?.then(() => input.removeEventListener(event, handler));\n if(init) handler.call(input);\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"filterFields = (fields, data = null) => {\n const toStrings = d => fields.map(n => String(d[n]).toLowerCase());\n const map = data ? new Map(data.map(d => [d, toStrings(d)])) : null;\n const stringsOf = map ? d => map.get(d) : toStrings;\n return q => {\n const terms = tokenize(q.toLowerCase());\n if(!terms.length) return () => true;\n const matcher = ({term, quoted}) => {\n if(quoted === \"`\") {\n const pattern = new RegExp(term, \"i\");\n return s => s.match(pattern);\n }\n return s => s.includes(term);\n }\n \n const any = terms.filter(d => d.modifier === null).map(matcher);\n const all = terms.filter(d => d.modifier === \"+\").map(matcher);\n const none = terms.filter(d => d.modifier === \"-\").map(matcher);\n return d => {\n const strings = stringsOf(d);\n const match = t => strings.some(t);\n return !none.some(match)\n && (!all.length || all.every(match))\n && (!any.length || any.some(match))\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"function asGitDiff(file) {\n return `--- a/${file.filename}\\n+++ b/${file.filename}\\n` + file.patch;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"sha256 = async str => {\n const buffer = await crypto.subtle.digest(\"SHA-256\", new TextEncoder().encode(str));\n return Array.from(new Uint8Array(buffer))\n .map((b) => b.toString(16).padStart(2, \"0\"))\n .join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"function addFileDiffUrls(baseUrl, files) {\n return Promise.all(files.map(async d => ({...d, diff_url: `${baseUrl}?mode=single#diff-${await sha256(d.filename)}`})));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"function urlWithParams(url, params) {\n const u = new URL(url);\n u.search = new URLSearchParams(params);\n return u;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"