feat(network-trace-view): add trace view with node visualization and trace controls#99
Merged
benStre merged 13 commits intorelease/0.0.1from May 6, 2026
Merged
Conversation
benStre
reviewed
Apr 7, 2026
Member
|
I merged the node-view branch into |
891920b to
13127e2
Compare
benStre
requested changes
Apr 8, 2026
Member
benStre
left a comment
There was a problem hiding this comment.
The shortcuts (CMD+C, CMD+A) etc are intercepted by the NodeTree view when focusing on the endpoint input on the top left. The keyboard shortcuts should not be intercepted when focused on other elements
Member
benStre
requested changes
Apr 9, 2026
benStre
requested changes
Apr 9, 2026
Member
benStre
left a comment
There was a problem hiding this comment.
Additional Adjustments:
- When doing an Auto Trace, the auto trace button should change to a loading state and get disabled, the trace button should not change its text, but also get disabled.
- Read only mode should be enforced, without displaying the edit/read only toggle in this case (pass as option to the NodeTree component)
- After doing a trace, the nodes should automatically be centered
- When a trace fails (endpoint not reachable),
Datex.comHub.getTracereturns undefined. This should be handled and an error message should be displayed somewhere (maybe add shadcn notifications and show a notifcation (top center of the screen))
61f1a7a to
c7e6bf5
Compare
…ith node visualization and trace controls
…cate edges on re-trace
c7e6bf5 to
320ea2e
Compare
benStre
approved these changes
May 6, 2026
jonasstrehle
approved these changes
May 6, 2026
benStre
added a commit
that referenced
this pull request
May 6, 2026
…trace controls (#99) * git push --force-with-leasefeat(network-trace-view): add trace view with node visualization and trace controls * fix(network-trace-view): fix auto-trace to extract endpoints from interface sockets * fix(network-trace-view): disable timeout input - not supported by runtime * fix(network-trace-view): use socket_uuid as field id to prevent duplicate edges on re-trace * fix(network-trace-view): reuse TreeView component, remove duplicate NetworkTreeView * fix: don't intercept keyboard shortcuts when focused on input elements * fix: reduce node card padding * fix: reduce node card gap, fix input text visibility in light mode * fix: separate loading states for trace and auto-trace buttons * fix: enforce read-only mode in network trace view, hide edit toggle * fix: auto-center nodes when tree data changes * feat: toast notifications for trace errors, fix toast position * fixes --------- Co-authored-by: Benedikt Strehle <benedikt@unyt.org>
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
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.


Summary
Implements a network trace view that visualizes DATEX network paths as an interactive node graph.
Changes
New Route
/traceroute →NetworkTraceView.vueNew Components
TraceControls.vue— UI with endpoint input, timeout input, Trace and Auto Trace buttonsNetworkTreeView.vue— canvas component for rendering trace results as a node graph (reuses node graph canvas logic without hardcoded example data)New Composable
traceToNodeTree.ts— convertsDatex.comHub.getTrace()result intoNodeTreeformatCopied from feat/node-view
Node.vue,Edge.vue,parseNodeTree.ts, node-tree types, shadcn card componentsHow to test
http://localhost:5173/trace@examplein the endpoint input@example— connected by an edge