[cueweb/docs] Job graph: show layers, right-click layer menu, double-click to open#2457
Merged
ramonfigueiredo merged 1 commit intoJun 23, 2026
Conversation
…click to open
JobDependencyGraph (Cuetopia > View Job Graph) now matches CueGUI's JobMonitorGraph more closely:
- Always render the focus job's layers (ingestFocusLayers via /api/job/getlayers), so a job with no cross-job dependencies still shows its structure instead of an empty "No dependencies found" panel.
- Right-click a layer node for a context menu that reuses the Layers-table actions via a { original: layer } shim: Auto Layout Nodes; Dependencies (View Dependencies / Dependency Wizard / Mark done); Reorder Frames;
Stagger Frames; Properties; Kill / Eat / Retry / Retry Dead Frames. The layer dialogs + Dependency Wizard are already mounted by the host page, so the events resolve in both the inline panel and /jobs/[name].
- Open the job detail page on double-click (onNodeDoubleClick) instead of a single click, so a click no longer navigates away by accident.
Docs: updated the Job Dependency Graph coverage across the user-guide, reference, developer-guide, other-guides, quick-starts, tutorials, and concepts, and added the graph + right-click-menu screenshots (light mode; dropped two redundant *_dark images).
Contributor
📝 WalkthroughWalkthrough
ChangesJob Dependency Graph Enhancement
Sequence Diagram(s)sequenceDiagram
actor User
participant ReactFlow as JobDependencyGraph
participant ingestFocusLayers
participant LayersAPI as /api/job/getlayers
participant NodeContextMenu
User->>ReactFlow: select job (toggle on)
ReactFlow->>ingestFocusLayers: walkDependencyTree → ingestFocusLayers(focusJob)
ingestFocusLayers->>LayersAPI: GET layers
LayersAPI-->>ingestFocusLayers: Layer[]
ingestFocusLayers-->>ReactFlow: LAYER nodes + "contains" edges added
User->>ReactFlow: double-click node
ReactFlow->>ReactFlow: onNodeNavigate(jobName) or router.push(/jobs/<name>?tab=overview)
User->>ReactFlow: right-click layer node
ReactFlow->>NodeContextMenu: open at cursor with layer context
User->>NodeContextMenu: select action (e.g. kill/eat/retry/auto-layout)
NodeContextMenu->>ReactFlow: invoke *_GivenRow helper or fitView
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
cueweb/components/ui/job-dependency-graph.tsx (1)
619-641: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider hoisting
ItemandSepcomponents outsideNodeContextMenu.These helper components are redefined on every render of
NodeContextMenu. While the menu is short-lived and the impact is minimal, hoisting them to module scope (or memoizing) would improve React reconciliation and follow idiomatic patterns.Suggested approach
+// Hoisted outside NodeContextMenu for stable identity +const MenuSep = () => <div className="my-1 h-px bg-border" />; + +const MenuItem = ({ + label, + icon, + onClick, + danger, +}: { + label: string; + icon: React.ReactNode; + onClick: () => void; + danger?: boolean; +}) => ( + <button + type="button" + onClick={onClick} + className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent hover:text-accent-foreground ${ + danger ? "text-red-500" : "" + }`} + > + {icon} + <span className="truncate">{label}</span> + </button> +); function NodeContextMenu({ ... }) { const layer = data.layer; const row = layer ? ({ original: layer } as any) : null; function run(fn: () => void) { fn(); onClose(); } - const Item = ({ ... }) => ( ... ); - const Sep = () => <div className="my-1 h-px bg-border" />; + // Use hoisted MenuItem/MenuSep, wrapping onClick with run()🤖 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 `@cueweb/components/ui/job-dependency-graph.tsx` around lines 619 - 641, The Item and Sep components are currently defined inside the NodeContextMenu component and are recreated on every render. Move both the Item component (which accepts label, icon, onClick, and danger props) and the Sep component outside of NodeContextMenu to module scope, placing them before the NodeContextMenu definition. This ensures these helper components are defined only once instead of being redefined on each render, improving React reconciliation performance.
🤖 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.
Nitpick comments:
In `@cueweb/components/ui/job-dependency-graph.tsx`:
- Around line 619-641: The Item and Sep components are currently defined inside
the NodeContextMenu component and are recreated on every render. Move both the
Item component (which accepts label, icon, onClick, and danger props) and the
Sep component outside of NodeContextMenu to module scope, placing them before
the NodeContextMenu definition. This ensures these helper components are defined
only once instead of being redefined on each render, improving React
reconciliation performance.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0af8779e-6362-4342-8961-b494ffa5ec2e
⛔ Files ignored due to path filters (4)
docs/assets/images/cueweb/cueweb_dependency_graph.pngis excluded by!**/*.pngdocs/assets/images/cueweb/cueweb_dependency_graph_dark.pngis excluded by!**/*.pngdocs/assets/images/cueweb/cueweb_dependency_graph_menu_options.pngis excluded by!**/*.pngdocs/assets/images/cueweb/cueweb_dependency_graph_menu_options_dark.pngis excluded by!**/*.png
📒 Files selected for processing (8)
cueweb/components/ui/job-dependency-graph.tsxdocs/_docs/concepts/cueweb-rest-gateway.mddocs/_docs/developer-guide/cueweb-development.mddocs/_docs/other-guides/cueweb.mddocs/_docs/quick-starts/quick-start-cueweb.mddocs/_docs/reference/cueweb.mddocs/_docs/tutorials/cueweb-tutorial.mddocs/_docs/user-guides/cueweb-user-guide.md
Collaborator
Author
|
@DiegoTavares / @lithorus |
DiegoTavares
approved these changes
Jun 23, 2026
ramonfigueiredo
merged commit 39d6abe
into
AcademySoftwareFoundation:master
27 checks passed
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
2 participants
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.
Related Issues
Main issue:
Issues related to this PR:
Summarize your change.
JobDependencyGraph (Cuetopia > View Job Graph) now matches CueGUI's JobMonitorGraph more closely:
Docs: updated the Job Dependency Graph coverage across the user-guide, reference, developer-guide, other-guides, quick-starts, tutorials, and concepts, and added the graph + right-click-menu screenshots (light mode; dropped two redundant *_dark images).
LLM usage disclosure
Parts of this solution's implementation were developed with assistance from Claude Opus.