feat: run comparison - compare page, run selection & routing by camielvs · Pull Request #2603 · TangleML/tangle-ui

camielvs · 2026-07-30T22:21:20Z

Description

Final PR in the Compare Runs stack — this is the one that turns all the previous pieces into a usable feature.

Adds the Compare page (/compare) that ties everything together: a header with both runs (labelled A/B, swap, share-link and close), the run metadata bar, and the Structured / YAML / Graph tabs.
Adds the ways to get there:
- Dashboard run list — checkboxes on each row; selecting exactly two runs shows a "Compare" action bar.
- Run view menu — a "Compare with another run…" item that pre-fills that run as side A.
If you land on /compare without both runs chosen, it shows a run picker for the missing side (and guards against comparing a run with itself).
Everything is gated behind a new compare-runs beta flag — the route redirects away and the entry points stay hidden when it's off.

Also moves the shared buildTaskExecutionStatusMap helper into utils/executionStatus (used by both the run view and the comparison).

Related Issue and Pull requests

Final PR in the Compare Runs stack. Builds on #2602 (#2596 → #2603).

Type of Change

New feature

Checklist

I have tested this does not break current pipelines / runs functionality
I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

Enable the Compare runs flag under Settings → Beta features.
From the dashboard: select exactly two runs with the row checkboxes — a Compare bar appears at the bottom. Click Compare.
From a run: open a run's menu and choose Compare with another run…, then pick a second run.
On the compare page, confirm:
- The header shows both runs (A/B); swap flips them, share copies the URL, close returns to the run list.
- The Structured, YAML and Graph tabs all work.
- Opening the page URL directly (with ?a=…&b=…) loads the same comparison; picking the same run twice is blocked.
Flag off: confirm the checkboxes, compare bar and run-menu item disappear, and visiting /compare redirects to the run list.
Regression: open a normal run view and confirm task statuses still render (the buildTaskExecutionStatusMap move).

Additional Comments

github-actions · 2026-07-30T22:21:30Z

🎩 Preview

A preview build has been created at: cmp-08-compare-page-and-wiring/d01767b

camielvs · 2026-07-30T22:21:32Z

feat: run comparison - compare page, run selection & routing #2603 : 2 dependent PRs (#2604 , #2641 ) 👈 (View in Graphite)
feat: run comparison - run picker & switcher #2634
feat: run comparison - graph diff view #2602
feat: run comparison - structured diff view #2601
feat: run comparison - run metadata comparison #2600
feat: run comparison - artifact comparison #2599
feat: run comparison - shared diff UI primitives #2598
feat: run comparison - merged graph & change summary logic #2597
feat: run comparison - pipeline diff engine #2596
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

camielvs · 2026-08-19T21:01:01Z

Merge activity

Aug 19, 9:01 PM UTC: A user started a stack merge that includes this pull request via Graphite.
Aug 19, 9:50 PM UTC: Graphite rebased this pull request as part of a merge.
Aug 19, 9:56 PM UTC: Graphite rebased this pull request as part of a merge.
Aug 19, 10:00 PM UTC: @camielvs merged this pull request with Graphite.

## Description First PR in the **Compare Runs** stack. Adds the core engine that diffs two pipeline runs — no UI yet, just the logic everything else builds on. Given two runs it aligns their tasks by id and works out, for each one, whether it was added, removed, changed, or unchanged. "Changed" covers a different component version, different arguments, different annotations, or a flipped cache setting. Pipeline inputs and outputs are compared the same way (including detecting when an output was rewired to a different task). Layout-only editor annotations (node positions, colours, etc.) are stripped out first so they don't show up as noise. It also tracks per-task execution outcome, so a task whose spec is identical but that succeeded in one run and failed in the other is still flagged as "outcome differs". A small helper for loading a single run's spec and execution status (`useRunComparisonSide`) and a shared `buildTaskExecutionStatusMap` util round out the PR. ## Related Issue and Pull requests  Part of the Compare Runs stack. Branches off `master`; the next PR (#2597) builds on this branch. ## Type of Change - [x] New feature ## Checklist  - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable)  ## Test Instructions This PR is pure logic and ships behind the (not-yet-added) `compare-runs` flag, so there's nothing to click through on its own. - Run the unit tests: `npm run test -- comparePipelines` - The suite covers added/removed/changed/unchanged tasks, argument and annotation diffs, cache changes, outcome differences, input/output alignment and rewired outputs. To exercise it in the real UI, check out the top of the stack (#2603), enable the **Compare runs** beta flag, and compare two runs. ## Additional Comments

## Description Second PR in the **Compare Runs** stack. Builds two more pieces of logic on top of the diff engine — still no UI. - **Merged graph** — takes the task/input/output diffs and turns them into a single combined graph that overlays both runs. Every task, input and output from either run becomes one node, and every connection is tagged as belonging to run A only, run B only, or both. This is what the Graph tab later renders. - **Change summaries** — small helpers that turn a task or input/output diff into a short human caption (e.g. "component · 2 arguments · cache disabled", or "source rewired") for use as subdued labels on graph nodes. ## Related Issue and Pull requests  Part of the Compare Runs stack. Builds on #2596; the next PR (#2598) builds on this branch. ## Type of Change - [x] New feature ## Checklist  - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable)  ## Test Instructions Pure logic, no standalone UI. - Run the unit tests: `npm run test -- buildMergedGraph summarizeChange` - Coverage includes unioning tasks from both runs into single nodes, tagging edges as A-only / B-only / shared, dropping edges to unknown tasks, wiring input→task→output edges, rewired outputs, and the wording of the change summaries. To see it end-to-end, check out the top of the stack (#2603), enable the **Compare runs** flag, and open the Graph tab of a comparison. ## Additional Comments

## Description Third PR in the **Compare Runs** stack. Adds the small, shared UI building blocks that the later comparison views reuse, so they stay consistent. Nothing here is wired into a page yet. - **CompareRunPicker** — a list of recent runs used to pick a run for either side of the comparison. - **DiffStatusBadge** — the coloured Added / Removed / Changed / Unchanged badge. - **RunTag / RunTags** — the small "A" / "B" pills that mark which run a value belongs to. - **FieldDiffRow** — a single field's before/after values with expand-to-see-more for long values. - **YamlDiffView** — a side-by-side YAML diff of the two run specs (Monaco diff editor). ## Related Issue and Pull requests  Part of the Compare Runs stack. Builds on #2597; the next PR (#2599) builds on this branch. ## Type of Change - [x] New feature ## Checklist  - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable)  ## Test Instructions These are shared presentational components with no entry point of their own on this branch. They're exercised through the full feature. - Check out the top of the stack (#2603) and enable the **Compare runs** beta flag (Settings → Beta features). - Compare two runs and confirm the status badges, A/B run tags and field rows render correctly, and that the YAML tab shows a readable side-by-side diff. ## Additional Comments

## Description Fourth PR in the **Compare Runs** stack. Adds artifact comparison — the ability to see how a task's output artifacts differ between the two runs. For each output artifact it shows whether it was added, removed, changed or unchanged. Small inline values are shown directly side by side; larger artifacts show their type and size, with a **Compare** button that opens a full-screen dialog previewing both runs' versions next to each other (reusing the existing artifact preview components). Artifacts that are too large or can't be previewed are handled gracefully. Not wired into a page yet — the later task diff view consumes this. ## Related Issue and Pull requests  Part of the Compare Runs stack. Builds on #2598; the next PR (#2600) builds on this branch. ## Type of Change - [x] New feature ## Checklist  - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable)  ## Test Instructions Reachable once the stack is wired up (#2603). - Check out the top of the stack, enable the **Compare runs** beta flag, and compare two runs that both produced output artifacts on the same task. - Expand a task and confirm: - Artifacts show the correct Added / Removed / Changed / Unchanged status. - Small inline values are shown side by side for both runs. - Larger/previewable artifacts show a **Compare** button that opens the dialog with both runs' previews. - Non-previewable or oversized artifacts show a sensible message instead of erroring. ## Additional Comments

## Description Fifth PR in the **Compare Runs** stack. Adds run-level metadata comparison — the context around the two runs, as opposed to their pipeline structure. It compares who created each run, when, and any run-level annotations and arguments, and surfaces what changed. Two things are deliberately handled specially: - **Created-at** is shown for context but never counts as a "change" on its own — two different runs always have different timestamps. - Superficial keys (notes, tags) and layout-only editor annotations are ignored so they don't create noise. Annotation and argument keys are treated generically, so whatever a given deployment stores shows up without needing hardcoded knowledge of the keys. Rendered as a compact summary bar that expands to show the details when something actually differs. ## Related Issue and Pull requests  Part of the Compare Runs stack. Builds on #2599; the next PR (#2601) builds on this branch. ## Type of Change - [x] New feature ## Checklist  - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable)  ## Test Instructions - Run the unit tests: `npm run test -- compareRunMetadata` - Covers author changes, the created-at exception, generic annotation/argument diffing, and exclusion of superficial/frontend-only keys. - End-to-end (via the top of the stack, #2603, with the **Compare runs** flag on): - Compare two runs by different authors and confirm the metadata bar flags the author change and expands to show details. - Confirm two runs by the same author with only different timestamps are reported as unchanged. ## Additional Comments

## Description Sixth PR in the **Compare Runs** stack. Adds the **Structured** view — the main list-based way of reading a comparison. It shows a summary line (how many tasks were added / removed / changed / unchanged, plus how many had a different outcome) and a **Show unchanged** toggle to hide the noise. Below that, inputs, tasks and outputs are listed in sections, each row showing exactly what changed: - Per-task detail: diff status, per-run execution status (with an arrow when the outcome differs), changed arguments/annotations, cache changes, and the artifact comparison from the previous PR. - A **Compare logs** button that opens a side-by-side log diff for tasks that ran in both runs and changed. - Input/output detail rows with the same treatment. ## Related Issue and Pull requests  Part of the Compare Runs stack. Builds on #2600; the next PR (#2602) builds on this branch. ## Type of Change - [x] New feature ## Checklist  - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable)  ## Test Instructions Reachable once the stack is wired up (#2603). - Check out the top of the stack, enable the **Compare runs** beta flag, and compare two runs. - On the **Structured** tab, confirm: - The summary counts (added / removed / changed / unchanged / outcome differs) look right, and **Show unchanged** hides/shows unchanged rows. - Tasks, inputs and outputs are grouped into sections, with changed fields listed on each row. - A task with a different outcome is highlighted and shows both runs' statuses. - **Compare logs** opens a side-by-side log diff for a task that ran in both runs. - Two identical runs show a "no differences" state. ## Additional Comments

## Description Seventh PR in the **Compare Runs** stack. Adds the **Graph** view — a visual, side-by-side-in-one-canvas take on the comparison. It renders the merged graph (from #2597) with colour-coded nodes and edges: green for added, red for removed, amber for changed, grey for unchanged, plus a legend. Nodes show each task's status, digest and a short change summary; clicking one opens a detail popover reusing the same task/IO diff detail from the Structured view. A **Highlight A / B / Both** control dims everything not present in the chosen run and switches nodes to show that run's actual values. Also refactors the run view's status indicator to extract a reusable `StatusTab` so the merged task nodes can show per-run (A/B) status tabs. ## Related Issue and Pull requests  Part of the Compare Runs stack. Builds on #2601; the final PR (#2603) builds on this branch. ## Type of Change - [x] New feature - [x] Cleanup/Refactor ## Checklist  - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable)  ## Test Instructions Reachable once the stack is wired up (#2603). - Check out the top of the stack, enable the **Compare runs** beta flag, and compare two runs. - On the **Graph** tab, confirm: - The merged graph lays out and node/edge colours match the legend (added / removed / changed / unchanged). - Clicking a node opens its detail popover; clicking the background closes it. - **Highlight A / B / Both** dims the other run and shows the highlighted run's values. - Regression check the refactor: open a normal run's graph and confirm task status indicators (including the cache-disabled state) still render as before. ## Additional Comments

## Description The **Compare Runs** stack needs a way to actually choose the two runs you're comparing. This PR adds that: the run chips in the page header, and the dialog behind them. - **Run chips (A and B)** — each side of the comparison is a small coloured chip: blue for A, green for B. The chip shows the pipeline name and run number, and gives you three things: click the name to open that run in a new tab, a **swap-in** button to replace it with a different run, and an **✕** to clear the slot. An empty slot is a dashed **"Select run A / B"** button instead. - **Run picker dialog** — opens from either chip. It's a searchable list of recent runs with: - search by pipeline name (debounced, with a clear button), - a **created by** filter, - a **date range** filter (UTC), - one row per run showing status icon, pipeline name, run number, the task status bar, when it ran and who ran it. - The run already selected on the *other* side is filtered out of the list, so you can't accidentally compare a run with itself. Two small things worth knowing: - The picker reuses the **same cached run list as the runs dashboard**, so opening it with no filters applied is instant rather than a fresh fetch. - Nothing in this PR is rendered yet — these are the pieces the compare page in #2603 mounts. Reviewing this on its own is a component read; to see it on screen, use #2603. ## Related Issue and Pull requests  Part of the Compare Runs stack. Builds on #2602, consumed by #2603 (#2596 → #2603). ## Type of Change - [x] New feature ## Checklist  - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable)  ## Test Instructions These components are only visible once #2603 is in, so test from the tip of the stack: 1. Enable the **Compare runs** flag under Settings → Beta features and open the compare page. 2. Click **Select run A** — the picker opens. Try each filter: type a pipeline name, pick a **created by** value, set a **date range**. Confirm the list narrows and shows "No runs match your filters." when nothing matches. 3. Pick a run — the dialog closes and the chip fills in with the pipeline name and run number. 4. Repeat for **B**, and confirm the run you picked for A is **not** in B's list. 5. On a filled chip: click the name (opens that run in a new tab), the swap-in icon (reopens the picker), and **✕** (clears the slot). 6. Confirm the runs dashboard still lists and filters runs as before — the picker shares its query cache. ## Additional Comments  No existing behaviour changes; everything here is new and scoped to the compare page.

This was referenced Jul 30, 2026

feat: run comparison - pipeline diff engine #2596

Merged

feat: run comparison - merged graph & change summary logic #2597

Merged

feat: run comparison - shared diff UI primitives #2598

Merged

feat: run comparison - artifact comparison #2599

Merged

This was referenced Jul 30, 2026

feat: run comparison - run metadata comparison #2600

Merged

feat: run comparison - structured diff view #2601

Merged

camielvs mentioned this pull request Jul 30, 2026

feat: run comparison - graph diff view #2602

Merged

4 tasks

camielvs force-pushed the cmp-07-graph-diff-view branch from e34d81d to 22f985a Compare July 30, 2026 23:22

camielvs force-pushed the cmp-08-compare-page-and-wiring branch 2 times, most recently from 091c054 to 8d790d4 Compare July 31, 2026 00:24

camielvs force-pushed the cmp-07-graph-diff-view branch 2 times, most recently from a1c4ec9 to 69226d7 Compare July 31, 2026 01:05

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from 8d790d4 to 357bd26 Compare July 31, 2026 01:05

camielvs force-pushed the cmp-07-graph-diff-view branch from 69226d7 to cf080ba Compare July 31, 2026 01:36

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from 357bd26 to 89ec2e4 Compare July 31, 2026 01:36

camielvs mentioned this pull request Jul 31, 2026

feat: v2 - always-on Compare page with in-page run switching #2604

Closed

4 tasks

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from 89ec2e4 to a65446a Compare August 14, 2026 18:17

camielvs force-pushed the cmp-07-graph-diff-view branch from cf080ba to e6b562b Compare August 14, 2026 18:17

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from a65446a to adf468d Compare August 14, 2026 19:07

camielvs force-pushed the cmp-07-graph-diff-view branch from e6b562b to 659f92c Compare August 14, 2026 19:07

camielvs changed the base branch from cmp-07-graph-diff-view to graphite-base/2603 August 14, 2026 21:01

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from adf468d to c5a8ffa Compare August 14, 2026 21:01

camielvs force-pushed the graphite-base/2603 branch from 659f92c to 5c839e1 Compare August 14, 2026 21:01

camielvs changed the base branch from graphite-base/2603 to cmp-08-run-picker August 14, 2026 21:02

camielvs mentioned this pull request Aug 14, 2026

feat: run comparison - run picker & switcher #2634

Merged

3 tasks

camielvs force-pushed the cmp-08-run-picker branch from 5c839e1 to 006504f Compare August 14, 2026 23:47

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from c5a8ffa to 4e67563 Compare August 14, 2026 23:47

camielvs commented Aug 17, 2026

View reviewed changes

Comment thread src/components/Home/RunSection/RunBulkActionsBar.tsx Outdated

camielvs force-pushed the cmp-08-run-picker branch from a2685c2 to 6f70ada Compare August 18, 2026 00:56

camielvs marked this pull request as ready for review August 18, 2026 01:20

camielvs requested a review from a team as a code owner August 18, 2026 01:20

Mbeaulne reviewed Aug 18, 2026

View reviewed changes

Comment thread src/routes/v2/pages/CompareView/CompareView.tsx Outdated

camielvs force-pushed the cmp-08-run-picker branch from 6f70ada to 35a1397 Compare August 18, 2026 21:00

camielvs force-pushed the cmp-08-compare-page-and-wiring branch 2 times, most recently from 17429f6 to 22f6aab Compare August 18, 2026 21:59

camielvs force-pushed the cmp-08-run-picker branch 2 times, most recently from 30dcaac to 7766fb7 Compare August 18, 2026 23:07

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from 22f6aab to 3a0c6f9 Compare August 18, 2026 23:07

camielvs requested a review from Mbeaulne August 19, 2026 00:00

Mbeaulne approved these changes Aug 19, 2026

View reviewed changes

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from 3a0c6f9 to 8b22c42 Compare August 19, 2026 20:50

camielvs force-pushed the cmp-08-run-picker branch from 7766fb7 to 50b803a Compare August 19, 2026 20:50

camielvs changed the base branch from cmp-08-run-picker to graphite-base/2603 August 19, 2026 21:42

camielvs changed the base branch from graphite-base/2603 to master August 19, 2026 21:48

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from 8b22c42 to 79c5f53 Compare August 19, 2026 21:49

feat: run comparison - compare page, run selection & routing

d01767b

camielvs force-pushed the cmp-08-compare-page-and-wiring branch from 79c5f53 to d01767b Compare August 19, 2026 21:55

camielvs merged commit ba92d0e into master Aug 19, 2026
17 checks passed

camielvs deleted the cmp-08-compare-page-and-wiring branch August 19, 2026 22:00

Navigation Menu

Uh oh!

feat: run comparison - compare page, run selection & routing - #2603

feat: run comparison - compare page, run selection & routing#2603
camielvs merged 1 commit into
masterfrom
cmp-08-compare-page-and-wiring

camielvs commented Jul 30, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 30, 2026 •

edited

Loading

Uh oh!

camielvs commented Jul 30, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

camielvs commented Aug 19, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

camielvs commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue and Pull requests

Type of Change

Checklist

Screenshots (if applicable)

Test Instructions

Additional Comments

Uh oh!

github-actions Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎩 Preview

Uh oh!

camielvs commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

camielvs commented Aug 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

camielvs commented Jul 30, 2026 •

edited

Loading

github-actions Bot commented Jul 30, 2026 •

edited

Loading

camielvs commented Jul 30, 2026 •

edited

Loading

camielvs commented Aug 19, 2026 •

edited

Loading