Skip to content

Refactor Graph Visualization to use G6 Library #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Jul 10, 2025
Merged

Refactor Graph Visualization to use G6 Library #139

merged 18 commits into from
Jul 10, 2025

Conversation

benc-uk
Copy link
Owner

@benc-uk benc-uk commented Jul 10, 2025

🔖 Title: Refactor Graph Visualization to use G6 Library

✨ Summary:

This PR replaces the previous graph visualization system with G6, a more powerful graph visualization library. The change improves performance, adds better caching for Kubernetes resources and events, and enhances the UI with updated styling and FontAwesome icons. The refactoring includes improvements to the layout engine, filtering capabilities, and side panel functionality.

🔧 Changes:

  • public/ext/g6-esm.js, public/ext/g6.min.js: Added G6 visualization library
  • public/ext/versions.md: Added to track external package versions, replacing metadata.md
  • public/js/graph.js, public/js/graph-utils.js: Refactored graph rendering to use G6
  • public/js/cache.js: Implemented new caching module for Kubernetes resources
  • public/css/main.css: Updated styling to support G6 visualization
  • public/ext/fa/*: Added FontAwesome webfonts and CSS
  • public/js/side-panel.js: Refactored to use new event system
  • public/js/config.js: Added spacing configuration option
  • readme.md, docs/*: Added screenshots and updated documentation

🌐 Backend/API:

  • server/services/kubernetes.go: Updated connection logic and added pause functionality
  • go.mod, go.sum: Updated dependencies

👁️ Frontend:

  • Replaced previous graph visualization with G6 library
  • Improved layout and filtering capabilities for resource graphs
  • Enhanced UI with FontAwesome icons
  • Added spacing configuration option for graph layout
  • Updated navbar structure and refresh button functionality
  • Implemented more robust event handling

📝 Documentation:

  • Added new screenshots showing the refactored UI
  • Updated diagram.drawio.png with current architecture
  • Added versions.md to track external library versions
  • Updated readme with better visualization

🆗 Impact:

  • Performance: G6 library should provide better performance for large Kubernetes clusters
  • Usability: Improved filtering and layout will make navigating complex clusters easier
  • Maintainability: Better code organization with modular approach and type definitions
  • Stability: Improved caching should reduce API calls to Kubernetes and improve reliability
  • Users will need to clear browser cache to ensure proper loading of the new visualization library

benc-uk added 18 commits July 6, 2025 00:19
- Added fa-brands-400.ttf and fa-brands-400.woff2 for brand icons.
- Added fa-solid-900.ttf and fa-solid-900.woff2 for solid icons.
- Removed outdated metadata.md and replaced it with versions.md to better track external packages and their versions.
- Updated index.html to link to the new FontAwesome CSS file structure.
- Modified graph-utils.js to improve type definitions and ensure compatibility with G6.
- Updated main.js to import Graph and GraphEvent from the new G6 module structure.
- Refactored side-panel.js to utilize the new event imports from G6.
- Cleaned up custom.d.ts by removing the global G6 declaration for better type safety.
@benc-uk benc-uk merged commit 474cbaa into main Jul 10, 2025
1 check passed
@benc-uk benc-uk deleted the refactor-g6 branch July 10, 2025 21:25
@Ghostbird Ghostbird mentioned this pull request Jul 11, 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.

1 participant