Skip to content
GraphLens

Guide & Demo Workspace

↑

The demonstration is located at the GraphLens™ repo folder and contains an Angular v20 workspace featuring two simple applications with different architectural approaches: NgModules and Standalone API.

The purpose is to demonstrate the capabilities of the extension and provide a quick overview of its commands and typical initial workflow.

🚀 Get Started

Section titled “🚀 Get Started”

  1. Check the Quick Start Guide (PDF) and Current limitations.

  2. Option A: Install the Extension

    Install GraphLens from VS Code Marketplace or from the Extensions panel in the VS Code section.

    OR

    Option B: Use a Cloud IDE

    On the repo switch to the sandbox branch and use devcontainer.json for GitHub Codespaces (and others) or dev.nix for Firebase Studio. In this case, go straight to Step 4.

  3. Clone the Repository, Navigate to Demo & Install Dependencies

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

  4. Open & Trust

    Open the cloned folder in VS Code. Trust the opened folder by clicking "Manage" in the Restricted Mode banner, OR when prompted "Do you trust the authors...?" select "Yes" to enable the extension1.

  5. Wait for Initialization

    You will see the GraphLens cube icon appear in the Activity Bar, which looks like GraphLens Cube icon

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

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

  7. 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 entities3 structure.

  8. Visualize graphs

    Click the name of one of the applications in the Tree View. This opens the WebView in the editor area featuring a “General info” panel and tabs to explore three abstraction levels4 of the selected application architecture.

  9. 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!

📚 Notes & Terminology

Section titled “📚 Notes & Terminology”
  1. Workspace Trust: GraphLens requires a Trusted Workspace to execute analysis scripts and will not function in Restricted Mode.
  2. TS Server Reliance: GraphLens relies on the data provided by the TS Server to correctly analyze projects
  3. Program entities: Refer to the common building blocks of an Angular application, currently including Angular Modules, Routes, Components, and Directives
  4. Abstraction or program levels: Represent different layers of the application structure formed by these common entities and include Module Hierarchy, Navigation Map, and Component Tree

⚖️ License

Section titled “⚖️ License”

The contents of the demonstation are open source and available under the MIT License.