Skip to content

feat: show parallel sub-dag runs in timeline - #2093

Merged
yohamta0 merged 2 commits into
mainfrom
issue-2048-feat-make-timeline-show-sub-graph-execut
May 5, 2026
Merged

yohamta0 merged 2 commits into
mainfrom
issue-2048-feat-make-timeline-show-sub-graph-execut

Conversation

@yohamta0

@yohamta0 yohamta0 commented May 5, 2026 •

Copy link
Copy Markdown
Member

Summary

  • show parallel sub-DAG executions as separate timeline items instead of folding everything into the parent step block
  • derive timeline items from DAG-run children so sub-DAG runs keep their own timing/status labels
  • add unit coverage for timeline item construction and chart rendering with parallel sub-DAG runs

Testing

  • pnpm exec vitest run src/features/dags/components/visualization/__tests__/TimelineChart.test.tsx src/features/dags/components/visualization/__tests__/timelineItems.test.ts

Closes #2048

Summary by CodeRabbit

  • New Features

    • Enhanced timeline visualization with unified status handling for runs and steps, improved coloring and labels.
    • Tooltips enriched with DAG/run metadata, run IDs, parameters, parent step and error details.
    • Better handling and ordering of parallel sub-DAG entries and correct queued vs skipped status display.
  • Tests

    • Added comprehensive tests covering timeline row construction, sub-DAG query behavior, tooltip content, and rendering order.

@coderabbitai

coderabbitai Bot commented May 5, 2026 •

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 62021c51-9f66-4ab1-81a8-e0032f876a0c

📥 Commits

Reviewing files that changed from the base of the PR and between 1c08b30 and 77c4207.

📒 Files selected for processing (3)
  • ui/src/features/dags/components/visualization/TimelineChart.tsx
  • ui/src/features/dags/components/visualization/__tests__/timelineItems.test.ts
  • ui/src/features/dags/components/visualization/timelineItems.ts
✅ Files skipped from review due to trivial changes (1)
  • ui/src/features/dags/components/visualization/tests/timelineItems.test.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • ui/src/features/dags/components/visualization/TimelineChart.tsx

📝 Walkthrough

Walkthrough

TimelineChart now constructs timeline rows via new helpers (buildTimelineRows), fetches sub-DAG run details conditionally while runs are active, and extends status labeling/coloring to support both DAG-run and node statuses; rendering and tooltips were updated to use the new TimelineRow shape with DAG/run metadata.

Changes

Sub-DAG Timeline Visualization

Layer / File(s) Summary
Data Shape
ui/src/features/dags/components/visualization/timelineItems.ts
Adds TimelineRow and SubRunQueryContext types capturing step vs sub-DAG row fields (ids, kind, label, statusSource, timing, optional dagName/dagRunId/params, depth).
Core Timeline Logic
ui/src/features/dags/components/visualization/timelineItems.ts
Adds buildTimelineRows, buildStepRow, buildSubDAGRow, getTimelineSubRuns, hasTimelineSubRuns, and getSubRunQueryContext to detect parallel sub-runs, normalize timing, and expand matching sub-DAG rows from sub-run details.
Component Integration & Data Fetching
ui/src/features/dags/components/visualization/TimelineChart.tsx
Refactors TimelineChart to compute items, timelineStart/end/timeMarkers via buildTimelineRows; uses useQuery to fetch sub-run details with conditional refresh enabled only when sub-runs exist and the DAG run is Running/Queued; triggers refetch when eligibility changes.
Status Handling & Coloring
ui/src/features/dags/components/visualization/TimelineChart.tsx
Splits status label maps into getNodeStatusLabel and getDAGRunStatusLabel, exposes unified getStatusLabel(row) and getStatusColor(row) that route by row.statusSource with color fallbacks; updates active-status check to consider status source.
Rendering & Presentation
ui/src/features/dags/components/visualization/TimelineChart.tsx
Row rendering switched to TimelineRow fields (item.id, item.label, item.kind, item.depth, item.statusSource); tooltips enriched with dagName, dagRunId, params, parentStepName, and item.error; status text uses getStatusLabel(item).
Component Tests
ui/src/features/dags/components/visualization/__tests__/TimelineChart.test.tsx
Adds/updates tests mocking useQuery and ResizeObserver to verify query initialization/params, nested query context, parallel vs non-parallel rendering, ordering/filtering, parent error preservation, and queued vs skipped tooltip status.
Utility Tests
ui/src/features/dags/components/visualization/__tests__/timelineItems.test.ts
Adds tests for buildTimelineRows, hasTimelineSubRuns, and getSubRunQueryContext covering parent-only timelines, sorting by start time, parallel inclusion only when details match, endpoint-detail scoping, error retention, and nested parentSubDAGRunId behavior.

Sequence Diagram

sequenceDiagram
    participant UI as TimelineChart UI
    participant BuildRows as buildTimelineRows()
    participant Hook as useQuery Hook
    participant API as Sub-DAG Runs API
    participant Render as Renderer

    UI->>BuildRows: buildTimelineRows(dagRun, subRunDetails? , nowMs)
    BuildRows-->>UI: TimelineRow[] (initial: steps only)
    UI->>Render: render initial step rows

    UI->>Hook: useQuery(fetch sub-dag-runs, refresh if active)
    Hook->>API: GET /dag-runs/{name}/{dagRunId}/sub-dag-runs
    API-->>Hook: subRunDetails[]
    Hook-->>UI: update subRunsData

    UI->>BuildRows: buildTimelineRows(dagRun, subRunsData, nowMs)
    BuildRows-->>UI: TimelineRow[] (steps + subdag rows)
    UI->>Render: render enriched timeline (rows with dagName, dagRunId, params, status)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely summarizes the main change: displaying parallel sub-DAG runs as separate timeline items.
Linked Issues check ✅ Passed The PR implements all core requirements: displays parallel sub-DAG executions as separate timeline entries, derives items from DAG-run children preserving timing/status, and adds comprehensive test coverage.
Out of Scope Changes check ✅ Passed All changes are directly related to the feature scope: new timeline helpers, chart updates to use shared helpers, and test coverage for the new functionality.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch issue-2048-feat-make-timeline-show-sub-graph-execut

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
ui/src/features/dags/components/visualization/TimelineChart.tsx (1)

287-326: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Include sub-run query results in the timeline memo dependencies.

The memo derives items from subRunsData?.subRuns (line 290), but the dependency array only includes status.nodes. When the useQuery call resolves or refreshes with new sub-run data, the memoized values remain stale because the memo doesn't re-calculate. This causes sub-DAG rows and timing information to either never appear or display outdated statuses until status.nodes changes.

🐛 Fix
-  }, [status.nodes]);
+  }, [status.nodes, subRunsData?.subRuns]);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/src/features/dags/components/visualization/TimelineChart.tsx` around lines
287 - 326, The memo that computes items, timelineStart, timelineEnd and
timeMarkers (the useMemo block that calls buildTimelineRows) currently only
lists status.nodes in its dependency array, so it must also include the sub-run
query data used (subRunsData or subRunsData?.subRuns) and any other values
referenced inside (e.g., timeFormat) so the memo recalculates when sub-run
results arrive; update the useMemo dependencies to include subRunsData?.subRuns
(or subRunsData) and any other referenced props/state to ensure
buildTimelineRows runs when sub-run data changes.
🧹 Nitpick comments (1)
ui/src/features/dags/components/visualization/__tests__/timelineItems.test.ts (1)

19-28: ⚡ Quick win

Avoid the as never escape in this fixture.

statusLabel: 'succeeded' as never sidesteps the generated schema contract, so this test will keep compiling even if the backend enum changes. Please use the generated enum value here instead.

♻️ Suggested change
-import { components, NodeStatus, Status, StatusLabel } from '@/api/v1/schema';
+import {
+  components,
+  NodeStatus,
+  NodeStatusLabel,
+  Status,
+  StatusLabel,
+} from '@/api/v1/schema';
...
-    statusLabel: 'succeeded' as never,
+    statusLabel: NodeStatusLabel.succeeded,

As per coding guidelines, "Frontend API types must be generated from OpenAPI spec via pnpm gen:api to maintain type safety with the backend."

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@ui/src/features/dags/components/visualization/__tests__/timelineItems.test.ts`
around lines 19 - 28, The fixture function node(...) is using a type escape with
statusLabel: 'succeeded' as never which bypasses the generated API types;
replace that literal cast by assigning the proper generated enum value (the enum
member exported by the generated API types) to statusLabel in the node(...)
return object so the test fails if the backend OpenAPI enum changes, and
regenerate/validate types with pnpm gen:api if needed to import the correct enum
symbol.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@ui/src/features/dags/components/visualization/TimelineChart.tsx`:
- Around line 287-326: The memo that computes items, timelineStart, timelineEnd
and timeMarkers (the useMemo block that calls buildTimelineRows) currently only
lists status.nodes in its dependency array, so it must also include the sub-run
query data used (subRunsData or subRunsData?.subRuns) and any other values
referenced inside (e.g., timeFormat) so the memo recalculates when sub-run
results arrive; update the useMemo dependencies to include subRunsData?.subRuns
(or subRunsData) and any other referenced props/state to ensure
buildTimelineRows runs when sub-run data changes.

---

Nitpick comments:
In
`@ui/src/features/dags/components/visualization/__tests__/timelineItems.test.ts`:
- Around line 19-28: The fixture function node(...) is using a type escape with
statusLabel: 'succeeded' as never which bypasses the generated API types;
replace that literal cast by assigning the proper generated enum value (the enum
member exported by the generated API types) to statusLabel in the node(...)
return object so the test fails if the backend OpenAPI enum changes, and
regenerate/validate types with pnpm gen:api if needed to import the correct enum
symbol.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: acf66491-ca2f-4280-8209-3449a8258049

📥 Commits

Reviewing files that changed from the base of the PR and between 6b9cc5b and 1c08b30.

📒 Files selected for processing (4)
  • ui/src/features/dags/components/visualization/TimelineChart.tsx
  • ui/src/features/dags/components/visualization/__tests__/TimelineChart.test.tsx
  • ui/src/features/dags/components/visualization/__tests__/timelineItems.test.ts
  • ui/src/features/dags/components/visualization/timelineItems.ts

yohamta0 commented May 5, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented May 5, 2026

Copy link
Copy Markdown
✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@yohamta0
yohamta0 merged commit e29c43e into main May 5, 2026
15 of 16 checks passed
@yohamta0
yohamta0 deleted the issue-2048-feat-make-timeline-show-sub-graph-execut branch May 5, 2026 16:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: make timeline show sub graph execution (when using parallel)

1 participant