Enhance Dependency Visualizer with Multi-Level Views and Code Quality Insights #45
Description
Description
The goal of this story is to design a UX/UI for the Dependency Visualizer tool.
This tool will provide an intuitive interface to explore dependencies across folder, file, and code levels while highlighting potential code quality issues.
The design should prioritize easy navigation, filtering, and actionable insights to improve code understanding and maintainability.
Sidebar
Hierarchical Display
- Display folders at the top level.
- Show files within folders and methods/functions/classes within files in an expandable hierarchy.
Navigation
When clicking on an element, navigate to the right view:
- clicking on a folder goes to the Folder Level Dependencies View
- clicking on a file goes to the File-Level Dependencies View
- clicking on a class, function goes to the Code-Level View
Filter/Search
- Add a filter/search bar at the top. Works with a REGEX to filter:
- folder
- files
- function, classes, variables.
- Allow dynamic updates to the view based on the search.
Main views
Folder Level Dependencies View
AI generated conceptual view
- Display a tree structure to show interactions between folders
- Indicate too many interdependencies visually (yellow)
- Indicate circular dependency visually (red)
File-Level Dependencies View
Extracted from structure 101 documentation
A simpler representation of what we need
Once a file is clicked (from the side bar or the Folder-level dependency view, this view is shown.
Enhanced Dependency view
- Show all the exports the selected file has (variable, functions, classes)
- For each export, show which import they use from other files.
- For each export, show what other file are using them.
Code quality
- Use a global score for each export and a color (green, orange, red)
- Mark unused export in gray
- Mark too many interdependencies visually (yellow)
- Mark circular dependencies (red)
Code-Level View
This view is triggered when a user click on a class or a function.
Function Metrics
Highlight functions with metrics like:
- Number of imports used by the function
- Function length (indicating overly long methods).
- Cyclomatic complexity (too many branching paths).
Variable Metrics
No view for this.
Class Metrics
Break down files into their constituent classes, methods, or functions, displayed as a nested hierarchy.
- Highlight unused sub classes, methods or function in gray
- For function show the same as for the function view (in a nested way)
Metadata
Metadata
Assignees
Type
Projects
Status