ng-dependency-graph
ng-dependency-graph copied to clipboard
Add JSON export functionality for dependency graph data
This PR implements a comprehensive JSON export feature for the AngularJS dependency graph extension, allowing users to export their current graph data for external analysis and integration workflows.
Changes
UI Enhancement:
- Added an "Export as JSON" button in the Options section of the info panel
- Applied consistent styling that matches the existing UI design
Core Implementation:
- Created
exportService.jswith methods to serialize graph data and handle file downloads - Updated
InfoPanelCtrl.jsto handle export functionality with proper error handling - Added the new service to the application module loading sequence
Export Features:
- Exports complete graph structure including all nodes, links, and dependency relationships
- Captures current view state (active filters, scope selection, selected node)
- Includes node positions for visual state recreation
- Adds comprehensive metadata (export timestamp, version, graph statistics)
- Handles circular references properly to create clean JSON output
- Works seamlessly with both modules and components views
Data Structure: The exported JSON follows a structured format containing:
{
"metadata": {
"exportedAt": "2025-09-08T10:20:12.186Z",
"exportVersion": "1.0.0",
"scope": "components",
"totalNodes": 60,
"totalLinks": 77
},
"currentView": {
"scope": "components",
"filters": { /* current filter state */ },
"options": { /* current options state */ },
"selectedNode": { /* currently selected node */ }
},
"graph": {
"nodes": [ /* all graph nodes with dependencies */ ],
"links": [ /* all connections between nodes */ ]
}
}
Testing & Quality:
- Created comprehensive unit tests covering all export scenarios
- Manually tested functionality in both modules and components views
- Verified proper error handling for edge cases
- Updated README.md documentation with feature details
The feature enables users to backup their current graph state, perform external data analysis, and integrate dependency information with other development tools and workflows.
Fixes #22.
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.