Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Sep 24, 2025

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

  • Replaced dependencies: Removed vis-network and vis-data, added @vue-flow/core, @vue-flow/controls, @vue-flow/minimap, and @vue-flow/background
  • Modernized architecture: Converted from imperative vis-network API to reactive Vue Flow computed properties
  • Enhanced user experience: Added native Vue Flow controls including zoom in/out, fit view, and interactive minimap
  • Maintained compatibility: All existing functionality preserved including node shapes, colors, edge types, filtering, and live updates

Features Preserved

  • Node visualization: Controller (star), battery devices (square), mains-powered (hexagon) with color coding based on hop count
  • Edge rendering: Different route types (LWR, NLWR, Application, Return routes) with proper styling and speed indicators
  • Interactive features: Node selection, hover tooltips, drag and drop, zoom and pan
  • Filtering system: Location and node filters with invert options
  • Live updates: Real-time graph updates when network changes occur
  • Complete options panel: Legend, edge types, filters, and control buttons

Vue Flow Advantages

  • Vue 3 native: Better integration and performance with the Vue 3 composition API
  • Modern rendering: More efficient updates and better accessibility support
  • Built-in controls: Native zoom, pan, fit view, and minimap components
  • Extensibility: Easier to customize and extend for future enhancements

Testing

  • All 103 tests pass (51 backend + 52 frontend)
  • ESLint and Markdown linting pass
  • Manual testing with mock Z-Wave controller confirms full functionality
  • Build process completes successfully

Screenshots

Network graph with Vue Flow showing controller and device nodes:
Vue Flow Network Graph

Complete options panel with legend, edge types, and filters:
Vue Flow Options Panel

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.

Co-authored-by: robertsLando <11502495+robertsLando@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] feat: replace vis-network with vueflow.dev feat: replace vis-network with vueflow.dev for network graph Sep 24, 2025
@Copilot Copilot AI requested a review from robertsLando September 24, 2025 07:44
Copilot finished work on behalf of robertsLando September 24, 2025 07:44
@robertsLando robertsLando changed the title feat: replace vis-network with vueflow.dev for network graph feat(ui): replace vis-network with vueflow.dev for network graph Sep 24, 2025
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.

feat: replace vis-network with vueflow.dev
2 participants