From 5b4982bc3857626c79190689bc3cb59e29a14605 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 29 Sep 2026 05:16:05 +0000 Subject: [PATCH] fix(ui): keep the timeline's total when filtering, drop empty diff lines, use --mono MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Timeline count: the filter path called timelineView.setData(filtered) through updateAll(), which made the filtered set the total. With one chip off, the count read "10 of 10 events"; after None it read "0 of 0". The timeline now takes the full set only on load, and a filter through applyFilter, so the count reads "10 of 12". - Wording changes: a first-seen sentence has no "before" and a removed one has no "after", and each printed an empty − or + line. That was 2 of 10 lines on the sample data; they are no longer printed. - RevertClusterDisplay, DiffView and CertaintyTimeline asked for var(--font-mono), which is defined nowhere, so their labels fell back to the body face. The token is --mono. - lint-staged: biome ignores Markdown and YAML and exits non-zero when every path it is handed is ignored, so any commit touching only a .md file failed the pre-commit hook. Both globs now pass --no-errors-on-unmatched. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01EpGaiBuSk5nCSV2hKyD6PN --- .lintstagedrc.json | 6 ++++-- src/disputes/RevertClusterDisplay.ts | 2 +- src/language/CertaintyTimeline.ts | 2 +- src/language/WordingDiffCard.ts | 30 +++++++++++++++++----------- src/main.ts | 6 +++++- src/timeline/DiffView.ts | 2 +- 6 files changed, 30 insertions(+), 18 deletions(-) diff --git a/.lintstagedrc.json b/.lintstagedrc.json index 2231dad..dcdfaf0 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,4 +1,6 @@ { - "*.{js,ts,tsx,jsx,mjs,cjs}": ["npx biome check --write"], - "*.{json,md,yaml,yml}": ["npx biome check --write"] + "*.{js,ts,tsx,jsx,mjs,cjs}": [ + "npx biome check --write --no-errors-on-unmatched" + ], + "*.{json,md,yaml,yml}": ["npx biome check --write --no-errors-on-unmatched"] } diff --git a/src/disputes/RevertClusterDisplay.ts b/src/disputes/RevertClusterDisplay.ts index 5a1ba64..1854120 100644 --- a/src/disputes/RevertClusterDisplay.ts +++ b/src/disputes/RevertClusterDisplay.ts @@ -66,7 +66,7 @@ export class RevertClusterDisplay { if (cluster.section) { const section = document.createElement("div"); section.style.cssText = - "font-size:0.78rem;color:var(--text-dim);margin-bottom:0.3rem;font-family:var(--font-mono);"; + "font-size:0.78rem;color:var(--text-dim);margin-bottom:0.3rem;font-family:var(--mono);"; section.textContent = cluster.section; card.appendChild(section); } diff --git a/src/language/CertaintyTimeline.ts b/src/language/CertaintyTimeline.ts index dfbc9e0..a7e8c51 100644 --- a/src/language/CertaintyTimeline.ts +++ b/src/language/CertaintyTimeline.ts @@ -100,7 +100,7 @@ export class CertaintyTimeline { const info = document.createElement("div"); info.id = "certainty-info"; info.style.cssText = - "font-size:0.78rem;color:var(--text-dim);margin-top:0.25rem;font-family:var(--font-mono);"; + "font-size:0.78rem;color:var(--text-dim);margin-top:0.25rem;font-family:var(--mono);"; info.textContent = "Click a dot for details."; this.container.appendChild(info); diff --git a/src/language/WordingDiffCard.ts b/src/language/WordingDiffCard.ts index 29a5d70..69b6077 100644 --- a/src/language/WordingDiffCard.ts +++ b/src/language/WordingDiffCard.ts @@ -60,19 +60,25 @@ export class WordingDiffCard { body.textContent = ch.summary; card.appendChild(body); + // A sentence seen for the first time has no "before" and a removed + // one has no "after"; each printed an empty − or + line. if (ch.before !== ch.after) { - const beforeEl = document.createElement("div"); - beforeEl.className = "card-diff"; - beforeEl.style.cssText += - ";border-left:3px solid var(--red);margin-bottom:2px;"; - beforeEl.textContent = `− ${ch.before}`; - card.appendChild(beforeEl); - - const afterEl = document.createElement("div"); - afterEl.className = "card-diff"; - afterEl.style.cssText += ";border-left:3px solid var(--green);"; - afterEl.textContent = `+ ${ch.after}`; - card.appendChild(afterEl); + if (ch.before.trim()) { + const beforeEl = document.createElement("div"); + beforeEl.className = "card-diff"; + beforeEl.style.cssText += + ";border-left:3px solid var(--red);margin-bottom:2px;"; + beforeEl.textContent = `− ${ch.before}`; + card.appendChild(beforeEl); + } + + if (ch.after.trim()) { + const afterEl = document.createElement("div"); + afterEl.className = "card-diff"; + afterEl.style.cssText += ";border-left:3px solid var(--green);"; + afterEl.textContent = `+ ${ch.after}`; + card.appendChild(afterEl); + } } grid.appendChild(card); diff --git a/src/main.ts b/src/main.ts index cba61a7..68adb63 100644 --- a/src/main.ts +++ b/src/main.ts @@ -70,6 +70,7 @@ new ImportUpload(document.getElementById("import-area")!, (events) => { exportCtrl.setData(events); const allTypes = collectEventTypes(events); filter.setTypes(allTypes); + timelineView.setData(events); updateAll(events); }); @@ -83,6 +84,7 @@ async function loadSampleData(): Promise { exportCtrl.setData(events); const allTypes = collectEventTypes(events); filter.setTypes(allTypes); + timelineView.setData(events); updateAll(events); } catch (err) { console.warn("Could not load sample data:", err); @@ -97,8 +99,10 @@ function collectEventTypes(events: EvidenceEvent[]): EventType[] { return Array.from(set).sort(); } +// Every panel but the timeline. The timeline takes the full set once, on load, +// and a filter through applyFilter, so its count reads "3 of 12". Setting its +// data from here made the filtered set its total, and the count read "3 of 3". function updateAll(events: EvidenceEvent[]): void { - timelineView.setData(events); citationChart.setData(events); certaintyTimeline.setData(events); schemaViewer.setData(events as unknown as Record[]); diff --git a/src/timeline/DiffView.ts b/src/timeline/DiffView.ts index 0bfa130..20b12f5 100644 --- a/src/timeline/DiffView.ts +++ b/src/timeline/DiffView.ts @@ -128,7 +128,7 @@ export class DiffView { const sectionInfo = document.createElement("div"); sectionInfo.style.cssText = - "font-size:0.78rem;color:var(--text-dim);margin-bottom:0.5rem;font-family:var(--font-mono);"; + "font-size:0.78rem;color:var(--text-dim);margin-bottom:0.5rem;font-family:var(--mono);"; sectionInfo.textContent = event.section || "(no section)"; this.container.appendChild(sectionInfo);