Add selected node action tray - #4
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a compact “selected node” action tray to production graph nodes, allowing users to toggle a node’s done state and clear the current selection without introducing new persisted state.
Changes:
- Render a selected-node tray inside graph nodes with “Done/Undo” and “Clear” actions.
- Add component methods to generate tray labels/titles and emit existing outputs for actions.
- Add focused template tests covering tray visibility, done toggling, and selection clearing.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/web/src/features/graph/production-graph.component.ts | Adds tray helper methods and click handlers that emit existing outputs. |
| apps/web/src/features/graph/production-graph.component.html | Renders the selected-node tray UI within selected nodes. |
| apps/web/src/features/graph/production-graph.component.css | Styles the selected-node tray and its buttons. |
| apps/web/src/features/graph/production-graph.component.test.ts | Adds coverage for tray rendering and action behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @if (isNodeSelected(node.id)) { | ||
| <div | ||
| class="selected-node-tray" | ||
| aria-label="Selected node actions" | ||
| (pointerdown)="stopNodeControlEvent($event)" |
There was a problem hiding this comment.
Good catch. Added role="group" to the tray container so the existing accessible label is exposed as a labelled control group, and added a focused test assertion for the role/label. Verified with npm.cmd test -- apps/web/src/features/graph/production-graph.component.test.ts and git diff --check.
Summary
Test plan
npm.cmd test -- apps/web/src/features/graph/production-graph.component.test.tsgit diff --checkReview