feat: DAG view expandables implementation and improved task identification view with CTAs from DAG#180
Open
Vinyl-Davyl wants to merge 8 commits intoNetflix:masterfrom
Conversation
…etflix#88) Show a small pill badge below task IDs in the timeline for tasks that are part of a foreach loop. The badge displays the foreach variable value (e.g. 'country:US'), making it trivially easy to identify which task corresponds to which iteration without opening each one. Changes: - TaskListLabel.tsx: render ForeachLabel badge when task.foreach_label is set; update tooltip title to include the value - en.ts: add 'task.foreach-label' translation key - browser.js (mocks): add foreach_label to sample tasks for dev testing
…reach labels in the task list
…ilities to the DAG visualization
Vinyl-Davyl
changed the title
Author
This was referenced Mar 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Requirements for a pull request
Description of the Change
Closes Issue #88 and Partially #89
This PR introduces high-density monitoring capabilities to the DAG visualization while strictly adhering to the project's design system.
Added a new "Expand DAG" toggle. Steps now expand to show a high-density grid of task iterations.
Each iteration card indicates status via color-coding and surfaces iteration values (from foreach-stack metadata) directly.
Full point-and-click navigation from any graph card to its respective task log.
Switched graph connections to a discrete VerticalConnector system. This architectural change ensures connection lines only exist between nodes, physically eliminating bleed-through artifacts into boxes or containers.
Centralized all background and status colors into
theme.css
.
Removed all hardcoded hex values partaining to DAG (#f4faf4, #ffffff, etc.) in favor of standard CSS variables like var(--color-success-bg) for future Dark Mode Implementation prep.
Replaced technical internal IDs with user-friendly, inline value labels (TaskID · Value).
Automatically strips system prefixes for a cleaner, non-technical scanning experience.
Alternate Designs
Background Layering: Previously used a single background line, but it caused visual artifacts in complex foreach layers. The current connector system is graphically superior.
Possible Drawbacks
Wide foreaches will create deep nodes; this is managed by the graph's existing zoom-to-fit and scrolling mechanisms.
Verification Process
Run project.
Open the DAG tab and toggle "Expand DAG".
Verify that the task grid tiles have subtle, theme-consistent background colors.
Click on one of the expanded item to redirect to the task(s) open
Verify that the vertical lines are perfectly contained between nodes with zero bleed into the white or gray boxes.
Release Notes
Added an "Expand DAG" mode for granular task monitoring and update task identification flow from DAG, refactored the DAG component to use centralized theme variables for all status and structural colors.