Skip to content

feat: add topology edge editor#31

Merged
zshleon merged 2 commits into
mainfrom
feature/topology-edge-editor
Apr 23, 2026
Merged

feat: add topology edge editor#31
zshleon merged 2 commits into
mainfrom
feature/topology-edge-editor

Conversation

@zshleon
Copy link
Copy Markdown
Owner

@zshleon zshleon commented Apr 23, 2026

Task

Closes or implements: topology-edge-editor

Summary

Implemented an edge property editor in the Topology page, allowing users to specify the link type (Ethernet, WiFi, or Unknown) for each connection in their network.

Changes

  • Edge Property Panel: Added a dedicated properties section in TopologyPage.tsx that activates when a connection line (edge) is clicked.
  • Link Type Selection: Users can now toggle between:
    • Ethernet (Wired): Solid line styling.
    • WiFi (Wireless): Dashed line styling for clear visual distinction.
    • Unknown / Legacy: Default state with standard labels.
  • Visual Distinction:
    • Ethernet connections use a solid, darker stroke.
    • WiFi connections use a dashed stroke (strokeDasharray: "5,5").
    • Selected edges are highlighted with a thicker stroke and darker color.
  • Persistence: The chosen link_type is saved to the backend via the saveTopology endpoint and correctly restored on page reload.
  • New Link Defaults: Newly created manual connections default to link_type: "unknown" but can be edited immediately.
  • TypeScript Fixes: Added explicit typing for edge mapping to resolve build warnings.

Test Plan

  • Backend checks run (python -m compileall app passed)
  • Frontend build run (npm run build passed)
  • Manual verification:
    • Click an edge -> Properties panel shows link type options.
    • Select "WiFi" -> Edge line becomes dashed instantly.
    • Select "Ethernet" -> Edge line becomes solid instantly.
    • Click Save -> Data persists and restores correctly after reload.
    • Click Pane -> Edge deselects, panel returns to default state.

Compatibility

  • Does not overwrite manual layout positions
  • Does not require database migration
  • Does not change Docker/LXC permissions

Notes

The editor provides a clean, segmented-control-like UI for selecting link types, fitting the minimal homelab aesthetic of the project.

@zshleon zshleon merged commit 5f9d38f into main Apr 23, 2026
3 checks passed
@zshleon zshleon deleted the feature/topology-edge-editor branch April 23, 2026 08:32
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.

1 participant