⚠️ Repository Moved

Note: The repo is archived because the demo workspace has been moved to GraphLens main repo

---

GraphLens Demo Workspace (archived)

This demonstration repository contains an Angular v20 workspace featuring two simple 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 initial workflow.

🚀 Getting Started

1. Install the Extension

   Install GraphLens from the Extensions panel in VS Code and check the current limitations.

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 "Do you trust the authors...?", select "Yes" to enable the extension.

4. Wait for Initialization

   You will see the GraphLens cube icon appear in the Activity Bar 

   • Let the TypeScript Language Server initially scan the repository and provide diagnostics¹.
   • GraphLens will automatically start the initial exploration process indicated by the loading animation/badge on the icon.

5. Ready to Explore

   Once the exploration is complete, you can see the status bar message GraphLens: Explored in <time> s. This indicates the extension is ready for use.

6. Visualize structure

   Click the GraphLens icon in the Activity Bar. You will see the interactive Tree View of your Angular workspace and containing projects that provide their program entities² structure.

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 architecture.

8. Experiment

   Now you are ready to use GraphLens!

   Select nodes, use left or right clicks, check extension commands, navigate the graphs and program entities, explore the structure and architecture of projects. Experience is the best teacher!

   Since it's the holiday season, don't forget to apply the Holiday Atmosphere in the "General info" panel! 🎄❄️✨

📚 Notes & Terminology

1. TS Server Reliance: GraphLens relies on the data provided by the TS Server to correctly analyze projects
2. Program entities: Refer to the common building blocks of Angular application, currently including Angular Modules, Routes, Components, and Directives
3. Abstraction or program levels: Represent different layers of the application structure formed by these common entities and include Modules Hierarchy, Navigation Map, and Components Tree