Skip to content

feat(network-trace-view): add trace view with node visualization and trace controls#99

Merged
benStre merged 13 commits intorelease/0.0.1from
feat/network-trace-view
May 6, 2026
Merged

feat(network-trace-view): add trace view with node visualization and trace controls#99
benStre merged 13 commits intorelease/0.0.1from
feat/network-trace-view

Conversation

@anmol-virk
Copy link
Copy Markdown
Collaborator

@anmol-virk anmol-virk commented Apr 1, 2026

Summary

Implements a network trace view that visualizes DATEX network paths as an interactive node graph.

Changes

New Route

  • Added /trace route → NetworkTraceView.vue

New Components

  • TraceControls.vue — UI with endpoint input, timeout input, Trace and Auto Trace buttons
  • NetworkTreeView.vue — canvas component for rendering trace results as a node graph (reuses node graph canvas logic without hardcoded example data)

New Composable

  • traceToNodeTree.ts — converts Datex.comHub.getTrace() result into NodeTree format
    • Each endpoint in the trace → node
    • Each socket/interface → field on the node
    • Connections between endpoints → edges
    • Incremental updates — subsequent traces add new endpoints instead of replacing the tree

Copied from feat/node-view

  • Node.vue, Edge.vue, parseNodeTree.ts, node-tree types, shadcn card components

How to test

  1. Go to http://localhost:5173/trace
  2. Type @example in the endpoint input
  3. Click Trace
  4. Two nodes should appear — your local endpoint and @example — connected by an edge

@anmol-virk anmol-virk marked this pull request as ready for review April 1, 2026 08:40
@anmol-virk anmol-virk requested a review from benStre April 1, 2026 13:46
@benStre benStre changed the base branch from main to release/0.0.1 April 1, 2026 14:46
Comment thread src/router/index.ts Outdated
@benStre
Copy link
Copy Markdown
Member

benStre commented Apr 7, 2026

I merged the node-view branch into release/0.0.1 so we don't have diverging implementations of the node view. Please rebase this branch on the latest commit of release/0.0.1 and make sure there's no redundant code for the node / tree view implementation (don't implement NetworkTreeView again, reuse the existing TreeView component and adjust it if needed)

@anmol-virk anmol-virk force-pushed the feat/network-trace-view branch from 891920b to 13127e2 Compare April 7, 2026 14:00
Copy link
Copy Markdown
Member

@benStre benStre left a comment

Choose a reason for hiding this comment

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

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

@benStre
Copy link
Copy Markdown
Member

benStre commented Apr 8, 2026

Screenshot 2026-04-08 at 16 17 04

Can you remove this padding? (top and bottom highlighted in green) or at least make it a bit smaller

@anmol-virk anmol-virk requested a review from benStre April 8, 2026 19:40
Copy link
Copy Markdown
Member

@benStre benStre left a comment

Choose a reason for hiding this comment

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

Can you also decrease the gap between the card title and body a bit

Image

Also, the text in the input elements is unreadable in light mode.

@anmol-virk anmol-virk requested a review from benStre April 9, 2026 12:16
Copy link
Copy Markdown
Member

@benStre benStre left a comment

Choose a reason for hiding this comment

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

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.getTrace returns 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))

@anmol-virk anmol-virk force-pushed the feat/network-trace-view branch from 61f1a7a to c7e6bf5 Compare April 13, 2026 15:56
@anmol-virk anmol-virk requested a review from benStre April 13, 2026 15:57
@benStre benStre force-pushed the feat/network-trace-view branch from c7e6bf5 to 320ea2e Compare May 6, 2026 20:22
@benStre benStre merged commit 34e12b8 into release/0.0.1 May 6, 2026
1 check passed
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>
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.

3 participants