GraphLens Demo Workspace

This demonstration repository contains an Angular v20 workspace featuring two applications with different architectural approaches: NgModules and Standalone API.

The purpose of this repo is to demonstrate the capabilities of the GraphLens extension for VS Code and provide a quick overview of its commands and typical workflow.

🚀 Getting Started

1. Install the Extension: Install GraphLens from the Extensions panel in VS Code.

2. Clone the Repository & Install Dependencies:

   git clone https://github.com/GraphLens/demo.git
   cd demo
   npm install

3. Open & Trust: Open the cloned folder in VS Code. When prompted, select "Yes, I trust the authors" to enable the extension.

4. Wait for Initialization: You will see the GraphLens (cube) icon appear in the Activity Bar.

   • Allow the TypeScript Language Server a moment to scan the repository.
   • GraphLens will automatically start the initial exploration process (indicated by the loading animation on the icon).

5. Ready to Explore: Once the exploration is complete, look for the status bar message: GraphLens: Explored in <time> s. This indicates the extension is ready.

6. Visualize structure: Click the GraphLens icon in the Activity Bar to open the Side View. You will see the interactive Tree View of your Angular workspace.

7. Visualize graphs: Click the name of one of the applications in the Tree View. This opens the WebView in the editor area featuring General info panel and tabs to explore three abstraction levels of the selected application.

8. Experiment: Now you are ready to use GraphLens! Select nodes, navigate the graphs, and explore the architecture. The best way to learn is by doing!