feat(ui): replace vis-network with vueflow.dev for network graph #4390
+485
−345
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.
This PR replaces the legacy vis-network library with Vue Flow (vueflow.dev) for the Z-Wave network graph visualization in
ZwaveGraph.vue
. Vue Flow is Vue 3 native and provides better integration with the modern Vue ecosystem while offering enhanced customization options.Key Changes
vis-network
andvis-data
, added@vue-flow/core
,@vue-flow/controls
,@vue-flow/minimap
, and@vue-flow/background
Features Preserved
Vue Flow Advantages
Testing
Screenshots
Network graph with Vue Flow showing controller and device nodes:

Complete options panel with legend, edge types, and filters:

The new implementation provides the same professional appearance and functionality while offering better long-term maintainability and Vue 3 compatibility.
Fixes #4389.
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
224.0.0.251
If you need me to access, download, or install something from one of these locations, you can either:
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.