Stack interchangeable jobs in the batch workflow graph

[dukesteen]

Summary

Batches with many jobs of the same type, like the fair-queue demo's 101 fair-queue-demo jobs, used to draw one card per job in a single very tall column. Those jobs now collapse into one stacked card.

What counts as stackable: jobs with the same name and exactly the same dependencies (same parents with the same triggers, and the same children). That makes them interchangeable in the drawing. A group only stacks when it has 3 or more jobs, so small parallel branches look the same as before.

Stacked card

• Shows layered cards behind it, the job name, a count (101 jobs), a per-state summary (11 active · 90 succeeded), and a bar showing the split across states.
• Takes its border colour from the most important state in the group: active, then failed, then waiting, and so on. A running or failing group stands out even when collapsed.
• Edges to and from the group's jobs are merged into single edges to and from the stack.

Expanding

• Clicking a stack (or pressing Enter/Space) shows the first 20 jobs as normal cards, followed by a dashed "N more …" card. Clicking that shows the next 20.
• Each expanded group gets a chip in the graph toolbar with a Collapse button. The existing "show all constraints" toggle sits next to it.
• Expanded groups reset when you switch to another batch.

Tests

• New component test covering: grouping, counts and the state summary, merged edges, a 2-job pair that stays unstacked, paging, the "more" card sorting after the visible jobs, selecting a job, and collapsing.
• npm run check passes (28 tests).
• Checked in Chrome against the SQLite sample's fair-queue demo, both mid-run and after it finished.

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 2 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 4a4ebad6-33a0-458c-89c7-cc32bf8fce22

📥 Commits

Reviewing files that changed from the base of the PR and between 2fe7856 and a983b0e.

📒 Files selected for processing (3)

• src/Immediate.Jobs.Dashboard/DashboardClient/src/components/WorkflowGraph.vue
• src/Immediate.Jobs.Dashboard/DashboardClient/src/styles.css
• src/Immediate.Jobs.Dashboard/DashboardClient/tests/components.test.ts

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coveralls]

Coverage Report for CI Build 36743995854

Coverage decreased (-0.09%) to 88.956%

Details

• Coverage decreased (-0.09%) from the base build.
• Patch coverage: No coverable lines changed in this PR.
• 12 coverage regressions across 1 file.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

12 previously-covered lines in 1 file lost coverage.

File	Lines Losing Coverage	Coverage
src/Immediate.Jobs.LinqToDB/LinqToDBJobStorage.cs	12	87.56%

---

Coverage Stats

Relevant Lines:	13410
Covered Lines:	11929
Line Coverage:	88.96%
Coverage Strength:	2.88 hits per line

---

💛 - Coveralls