Adds TypeScript/JavaScript Function Usage Graphs#32
Open
ccpu wants to merge 4 commits into
Open
Conversation
- Introduced a new command `codevisualizer.visualizeFunctionUsage` to visualize the usage of functions in TypeScript and JavaScript. - Implemented `FunctionUsageProvider` to handle the display of the usage graph in a webview. - Created `CallGraphAnalyzer` to analyze function definitions and their callers within the workspace. - Added `CallGraphMermaidGenerator` to render the usage graph in Mermaid format. - Enhanced `TsAstParser` to extract function call information for building the call graph. - Updated `package.json` to include new scripts and dependencies for local installation and testing. - Improved the overall structure and organization of the codebase to support the new functionality.
* Keep usage graphs and flowcharts in separate panels so callers can be explored without losing context. * Clean up command labels and menus to surface the new navigation flow more clearly.
…gation@99` for better organization.
* keeps the diagram readable after moving or resizing the panel, because svg-pan-zoom only measures the viewport once * bumps the extension version for the release carrying this fix
Owner
|
I like the direction, but I would not merge this yet. The main issue is that the usage graph resolves calls by function name only. Names like save, init, render, and load are reused a lot. This can merge unrelated functions into the same graph and make node clicks jump to the wrong definition. The existing flowchart feature is tied to a specific file and function range, so this new graph should be at least that precise. There is also a mismatch between the analyzer and the command. The analyzer indexes forms like const fn = function () {} and class field arrows, but the command uses findFunctionAtPosition(), which does not recognize all of those forms. So some functions can be indexed but cannot be used as the starting point. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds TypeScript/JavaScript Function Usage Graphs that build a reverse caller graph for the function under the cursor. The graph supports source navigation and drill-in code-flow popups for caller functions, with linked panel reuse so split usage/flow workflows stay in the expected editor group. Also updates command metadata to use clean context-menu labels while preserving CodeVisualizer command-palette grouping, and documents the new feature and current language support.