Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>CartoGraphXNew to Visual Studio Code? Get it now.
CartoGraphX

CartoGraphX

remote13

|
265 installs
| (0) | Free
Tracks data to be displayed on an interactive map of the source code. Visualization is aimed to make people understand the entire scope of their project and see what part of the project their team members are working on
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

CartoGraphX VS Code extension

The CartoGraphX VS Code extension is used to track and share user-metrics inside a team workspace to be viewed on the interactive source-code map displayed on our website. This tool will greatly increase accountability because each developer’s work will be visible in real time.

Running the extension

To run the extension you have clone the repo and open the extension folder in VS Code.
git clone https://github.com/cse112-sp20/CartoGraphX-VS-Extension.git
cd CartoGraphX-VS-Extension npm i
code .

Then, press F5 to open a new window with your extension loaded.
Open one of your workspaces.
Run the extension command by pressing the CGphX button on your status bar (bottom bar).

Features

To view the extension commands, press the CGphX button on your status bar (bottom bar). This will prompt a dropdown menu in your IDE providing you with the available commands.

CartoGraphX provides commands to sign up/in/out of the service using email and password. The color grey indicates that the user is not logged in while the color of white means that the user is logged in.

When signed in, you have the ability to do a variety of features. To access those features, hit the CGphX button again once logged in. The features and their descriptions are found below:

1. Display Current Working File: This command gives the user the ability to see which file the user is currently working in. This will display a window in the middle of the screen and match the open file that the user is currently working in. At the same time, the window displays the number of lines inside the file.

2. Get User Info: This command verifies the user of who is logged in. A VSCode window appears on the bottom right of the screen saying which email is signed in. This is especially helpful for those who have multiple accounts to make sure they are logged into the right place for the project they wish to work on.

3. Sign Out: This command will allow for the person to sign out of their CartoGraphX account.

4. Create Map: The Create Map button is the first step to creating a visualized map of any GitHub project, no matter how big or small. First, make sure that the user is also logged onto their GitHub and inside the repository they wish to use for their map. The button will first ask the user to provide a map name. This name could be the name of your GitHub project or whatever the user wants! Once a valid name has been entered, a map will appear in a newly created tab on the rightmost side of the tab view that models the project's GitHub master branch. To view the newly created map, simply go to that tab and hit "Display Map." At the same time, a popup window will appear containing that map's key. Save this key and use it to invite your teammate(s) to the map (see load map below). After that, CartoGraphX is good to go! Feel free to work on your project base and see how the map updates over time.

5. Load Map: Load Map allows you to jump into an existing map right where it left off! Simply take the Map Key either that was created for you when you created a map (see create map above) or was given to you by a teammate. Make sure first that you are logged into your GitHub account as it will not work otherwise. Next, in the text field that is generated by the command, enter in the map key that either your teammate invited you to or you have saved on your computer. From there, a new tab will pop up in VSCode containing your map. You can navigate to that tab to view the map. Once the steps above have been completed, CartoGraphX is good to go! Feel free to work on your project base and see how the map updates over time.

Testing

To run the unit tests, first run the command:
npm run pretest

Then, through the "Run & Debug" window choose "Extension Tests" and press the start debugging button.

Requirements

If you have any requirements or dependencies, add a section describing those and how to install and configure them.

Extension Settings

Include if your extension adds any VS Code settings through the contributes.configuration extension point.

For example:

This extension contributes the following settings:

  • myExtension.enable: enable/disable this extension
  • myExtension.thing: set to blah to do something

Known Issues

Calling out known issues can help limit users opening duplicate issues against your extension.

Release Notes

Users appreciate release notes as you update your extension.

1.0.0

Initial release of ...

1.0.1

Fixed issue #.

1.1.0

Added features X, Y, and Z.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft