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)

nanoapi-io / napi

Enhance Dependency Visualizer with Multi-Level Views and Code Quality Insights #45