Lets' provide Project workflow treeview Explorer view.

What

Let's create our own commands for development convenience.

Why

When we are working on vscode extension, sometimes we might want to create our own commands for convenience.

For example, when I was working on webviews, I wanted to do "reloading webviews" and "opening webview developer tools" at the same time.

Here, I'm going to share with you how I made my own commands.

1. Add activationEvents in package.json

2. Add Commands to contributes in package.json

Please note that it categorized into ONE Developer.

3. Get command ID that you want to run

4. Register related command in src/extension.ts

Note that you should insert the command ID into vscode.commands.executeCommand.

Then

You can see the command:)

And, it works well!!

You can make your own commands, and if there are commands that many people can use in the future, it would be good to merge them into the main branch. And, feel free to share your command that you think it's good to have.

Lets' provide an interface to invoke build by sending necessary information in Objects to Project.Builder.

• define the inferface and the Object structure
• provide the interface
• provide example how to use

I have two questions about the JSON data provided.

1. What does the key value of Args mean? And I wonder what the other json data that comes in there means.

2. As far as I know, the key ph means the event type, right? Then, I know that all the data you gave me in json are 'x' type, but I wonder if only 'x' type comes in.

What?

It provides convenience to users who create cfg files using vscode (text editor).

How?

• Snippets
  • It is automatically completed by creating a prefix for each tool.
• Codelens
  • First, a code lens will be provided at the top of each tool.
  • If you click on the corresponding codelens, you will be provided with an additional codelens for the sub-attributes.
  • If you press the code lens for each attribute, that code lens disappears.
  • If you want to see the hidden property again, press the tool's codelens.
• Hover
  • This shows a list of options if you mouse over the names of each tool.

Examples

• Snippets
  
• Codelens
  
• Hover
  

Features

• Automatic completion function using snippets.
  • one-build
  • oncc
  • each tools
• Description of tools and attributes using Codelens
  • Calculate the scope of the tool
  • Provide codelenses for tools
  • Command operation for the codelens of the tool
  • Calculate the range of attributes you want to hide
  • Provide code lenses for properties to hide
  • Command for attributes to hide
• Description of tools and attributes using Hover

Related Issues

• #43
• #44
• #243

Reference

• Snippets
  • user guide : https://code.visualstudio.com/docs/editor/userdefinedsnippets
  • example : https://github.com/microsoft/vscode-extension-samples/tree/main/snippet-sample
• Codelens
  • user guide : https://code.visualstudio.com/blogs/2017/02/12/code-lens-roundup
  • example : https://github.com/microsoft/vscode-extension-samples/tree/main/codelens-sample

Pre-step

We finished analyzing the circle file structure and identifying the relationship between nodes using typescript. (#36, #46)

• Node relationship analysis was performed with reference to netron.

Current-step

We match the information of the json file generated from Backend to the corresponding node and implement the visualization function.
This function compares the old json file with the new json file and visualizes it. (Both json files refer to the same circle file)

Current Progress

Todo

• Register the command to execute the function #183
• Read circle file with typescript
  • Add a dependency to use flatbuffers #195
  • Compile Flatbuffers with typescript #199
  • Define the type of tensor #207
  • Analyze builtinOptions #213
  • Register tensor in subgraph in advance #217
  • Get the input data corresponding to each operator #209
  • Get the output data corresponding to each operator #211
• Analyze the circle file and process the data
• Reads two json files and maps them to processed data
• Visualize the processed data in the form of a node graph
• Display duration next to each node graph

Question

I was going to run an extension on the main branch.
However, the .vscode is contained in the gitignore, so there is no .vscode folder in the repository.
So it can't be executed 😥 @seanshpark

1. Could you upload the .vscode folder additionally?

2. May I know what kind of function the extension you're making is performing?

Problem

This is the Draft #52 I posted last time and the link to the visualization function currently under development.

We use React for visualization. React was needed for selection of bar graphs or various interactions.
However, in the process of using React, there have been many changes in file structure and defense.

So I'm having a big problem writing PR and draft now. Our file structure can be seen here.

How can we solve this problem? If you have an idea, I'll accept it!

The functions we created are as follows.

Done

• Click Load, a file selection dialog will pop up
• You can visualize JSON files.
• Zoom-in/Zoom-out is possible.
• pid(GPU/CPU) usage is displayed.
• You can click on the bar to see More info.
• You can open/close the panel.
• Fixed left bar
• Make the color a bit prettier
• When zoomed in/out, the scale is dynamically created/deleted.
• Zoom in with the slider.
• It's linked to the me in vcode. All elements follow the vscdoe theme color.

dark+	light+	All vcode theme support.

(I'll leave a draft after I finish what I'm currently developing.)

We hope this feature will really help one developers. So I hope this problem will be solved and merge. 🙏

What

We will use require in the process of converting typescript to javascript. However, require is a feature of nodejs, so it cannot be used on the client side.

How

I found a way after searching and found that there is a solution using module bundler.

There is a way to combine them into one js using browserify or webpack.
However, in this case, it will be combined into a file of 8800 lines. In this case, it is difficult to explain the code as all Flatbuffers related codes are included in the Pull Request.

For convenience, I think the most efficient method is to combine them into one file using browserify or webpack.

What would be a good way?

WHAT

Let's enable format checker for the PRs.

• mainly TypeScript (JavaScript) for now
• expand to other files gradually

WHY

To make our codes clean and good readability.

INFO

I've used this as of now

npm run lint
bash infra/format $(ARGS)

Related Issue : #5

We need to deal with one-codegen together in the toolchain workflow. But we don't have a backend compiler(=target compiler) available. Therefore, it is necessary to develop a dummy backend compiler.

What

Let's introduce webview for our one-vscode extension.

Why

I described it a bit at #10 (comment).

How about using the vscode extension's GUI a little more? It will also be helpful for users who are not familiar with ONE.

The webview allows our extension to create fully customizable views, which can be used to build complex user interfaces. I'm going to start drafting with basic webview panel API first. I hope it will help you guys who want to start our project.

What

A function that helps you understand the functions of tools and options in .cfg file.

Why

It is difficult to easily understand the functions of many tools and options when writing .cfg files.

How

Use codelens to describe the functions of tools and options.

Here's an example of a function.

This is a sample of codelens and description of tools.

If you place the mouse on this comment, you will find the required options.

If you click on this comment, a message will be output.

Let's add CI job that compiles our TypeScript codes.

This guide is written for those who are unfamiliar with the approach of deserializing a circle file. It's not perfect, so please comment if there are any mistakes. I will edit and add.

What

Getting Started Guide to Deserializing Circle Files Using Flatbuffers

Why

To make circle node graph, some people need to interpret the contents of the circle file.

How

It goes with typescript.

1. I complie this flatbuffers schema(maybe, this schema is just example..) to typescript. You can understand this process in issue #36.
2. You can make package.json and install some library by these commands.

// project setting
npm init -y

// using typescript
npm i typescript

// using flatbuffers
npm i --save-dev flatbuffers
npm i --save-dev @types/flatbuffers

You can make tsconfig.json file by using this command

tsc --init

I set tsconfig.json like this to test deserializing circle file. It is just for test.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true, 
    "strict": true, 
    "skipLibCheck": true, 
    "outDir": "./dist"
  }
}

You can get output in dist directory

3. You make .ts file in project, and you can deserialize circle file like this.

In this .fbs file, root_type is specified as "Model", so you have to import model.ts(get by compiling .fbs file) among many ts compile output, and You have to import flatbuffers, fs, and path.
(The .ts files compiled by .fbs should be moved in this project.)

import * as circle from './{path}/model';
import * as flatbuffers from 'flatbuffers/js/flatbuffers';
import fs from 'fs';
import path from 'path';

To read circle file(binary file), you need to add this code.

let bytes = new Uint8Array(fs.readFileSync(path.resolve(__dirname, "./{path}/{circlefile_name}.circle")));

let buf = new flatbuffers.ByteBuffer(bytes);

// get Model
let myModel = circle.Model.getRootAsModel(buf);

// information of circle
let metadataBuffer = myModel.metadataBuffer;
let description = myModel.description();

I do this by using Reading Orc FlatBuffers in Flatbuffers Tutorial. You can get more information from the tutorial.

You can run it using this command

tsc

// run
node dist/{test_filename}.js

To visualize the json file, which is backend output, we want to use webview in visual studio extension, and we want to implement it using the React.js framework in webview, is that okay?

If we use React.js, we want to use the relevant chart library that uses React.js. :)

This issue was originally posted here, but it was considered more appropriate to be in the ONE-vscode Issues. The original issue is closed.

Hi! This is team Cosmos developing Circle-OpSelector

This Issue introduces the GUI tool for Circle-OpSelector.

why

Circle-OpSelector is a tool to slice a circle model for convenience in debugging. An user can slice a circle model by typing code in CLI.

We thought that if this could be done by GUI, that is, if the slicing can be done in a graphical environment, the convenience would increase. That is why we are trying to develop a GUI tool for Circle-OpSelector.

goal

The main purpose of this tool is to enable Circle-OpSelector features using mouse cursor. Slicing the graph should be done by just a couple of mouse clicks.

The picture below is the blueprint of the usage of the tool. Visualization is done using inception_v3 file and Netron .

By selecting several nodes with the cursor, the user would be able to create a subgraph(a new circle file).

how

I'm using Vue to create this application. Vue is a JS framework for creating web pages, web applications, etc. The only reason why I chose this framework is because I am used to using Vue, so I can't guarantee that this is the best option.

Todo List

• create flatbuffers.js
• create a Vue project
• make the application read Circle file input(using flatbuffers.js)
• visualize the graph
• enable selecting nodes by click event
• create a new subgraph using the selected nodes.

For creating a new subgraph, there are 2 options I'm considering.

1. Activate the developed Circle-OpSelector via the application.
2. Develop the Circle-OpSelector in Javascript.

Currently I'm considering the first option and looking for a way to enable it.

ps. I wanted to make sure I know all the codes in the visualization app, so I know where to apply the Circle-OpSelectorcode. This is the reason why I'm developing this tool from scratch and not using the codes in Netron.

What?

Let's show following profiling json file in vscode extension.

Sample data

• sample.profile.json.txt
• sample2.profile.json.txt

Preview

Todo

• Register this feature at Command list. #154
• Click Load, a file selection dialog will pop up. #159
• Show timeline (with scroll bar) and bar-chart. #184
• Show pid`(GPU/CPU) utilization ratio. #170
• Open or close the panel. #170
• Make the color a bit prettier. #155
• Zoom in / Zoom out #141
  • by button
  • by scroll
• Change The scale dynamically as you zoom in or out. #171
• You can click on the bar to see More info. #188
  • A single choice.
  • A multi-selection
• All elements follow the vscdoe theme color. #142
• Show the node graph as a new web view, If you click Origin.
• Capture
  • Capture complete message pop-up
  • Solve the Rejected problem from vcode webview due to security issues
• If the scroll bar moves too fast, the scale will not be deleted or created normally. #141

How to run

1. npm install
2. npm run build
3. Press F5 to run extension
4. When a new window in vscode opens, press ctrl + shift + P to enter ONE: one-vscode-extension command.

Linked draft and Issue

• #93
• #28

Need

It hasn't been PR yet, so if you want to use the demo version, please refer to the draft. :)
After using it, please write in the comments about the feature you need or want to fix.
We will develop it after reviewing it.

/cc @Code1995 @yesfordev @parkjisu6239 @donggillee-dev @wnsdud4197
/thanks to @llFreetimell

About Graph Design

I have a question about visualizing the json file.

By referring to the chrome tracing we are currently using, we are making the screen configuration and design similar.
Using fields such as start time, run time, and so on, and representing them as bar graphs, I think there will be limitations in making them completely new designs.

So the questions I have are as follows.

1. Would it be a problem to make it in a similar form to chrome tracing?
2. From the perspective of real users, among the features of Chrome Tracing, which features would you like to have and which ones you don't really need?
3. What function do you want to add?

I have two questions about codelenses...

1. The current codelens is provided as soon as it starts. This is because the variable(one-vscode.enableCodelens) in package is true as a default value. Should I maintain the current way? Or should we call the command once and provide it?

2. If the attribute name is the same in each tool, the description is the same. For example, input_path or output_path...
   Currently, if you press the input_path codelens of one-import-onnx, only the input_path in onnx will be hidden. Or should we hide the explanation of input_path in other tools?

We are visualizing using a webview.
React has several issues (license, package.json etc...), so we made it vanilla js.
js is a script that only works in webview.
It cannot access the main VS Code APIS directly.

Is it okay to add the js file to the src sub-folder?

Let's import cfg file to WorkFlow

• Add more Job classes: for one-pack , one-codegen, one-profile (?)
• Support minimum options for functional implementation

In this task, we will NOT

• export to .cfg file
• support all options, like there are lots of optimization options

what
변환할 모델을 들고 온 사용자가 .cfg 파일을 자동으로 만들 수 있으면 좋겠다.

why
.cfg파일을 제대로 작성하는 것도 다른 파일들을 보며 공부해야할 일이고 진입장벽이 될 수 있기 때문에

how
숙련자들은 스스로 작성하길 원할 수 있기 때문에 html snippets처럼 .cfg파일 내에서 단축키를 누르면 써야할 항목들이 자동완성되도록
초심자들은 자신의 모델의 정보와 어떻게 변환하길 원하는 지 옵션들을 선택하는 식으로 완성된 .cfg 파일을 받아볼 수 있도록

Revise ToolRunner to execute tools with full path.

• Only one-build and onecc are added to /usr/bin
• Other tools are not in PATH

Let's enable import for ONNX and TFlite format files

• add sample cfg for ONNX
• add sample cfg for TFlite
• enable imports

Hello all. I'm new here. I'm trying building the extension. But, I faced the following error log when I ran Run Extension and Extension Tests.

My host vscode window poped up the message.

The terminal process "C:\windows\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run watch" terminated with exit code: 1.

My debug vscode window poped up the message

Activating extension 'undefined_publisher.one-vscode' failed: Cannot find module 'c:\Users\yons.kim\Documents\GitHub\ONE-vscode\out\extension.js' Require stack: - c:\Users\yons.kim\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js - c:\Users\yons.kim\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js - c:\Users\yons.kim\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js.

What did I miss?

We need to check commit message is OK

As js files are introduce into media folder but there seems difference in format by developers.
It'll be better to provide uniform format for readability and better communication.

I am trying to use an open source chart library, but it is marked like the image above.
If private use is listed, is it not possible to use it in our project?

What

Let's help ONE developers to make .cfg files easier!

Features

• Show File Explorer to get the path of model file
• Able/Disable the tool with toggle button
• Export completed .cfg file
• Import existing .cfg file
  • Read options from file and show them
• Run one-build with button

Examples

• You can select a tool in the Tools and set options in the Options for [selected_tool].
• Different input types depending on the value of the option.
  • Path of model file : File Explorer button
  • True/False : Toggle button
  • Others : Text input

• You can disable the tool you don't need.

Related Issues

• #10
• #24

Discussions

• Where to extract the completed .cfg file?
  • After setting all the options, Export Configuration button will extract the .cfg file.
  • So we should set the default location where the file will be saved.
  • This is related to #45

Hi! I'm 국현 from team COSMOS. We are currently developing a tool which would be named Circle-OpSelector. (here is our main issue)

I'm trying to develop a tool that can visualize the operation(the Circle-OpSelector), so I'm using Vue to create an browser based app. Here, I'm having a problem reading information of a Circle model.

Below is App.vue, created to check whether the model was read properly.

<template>
  <div>
    <input type="file" ref="files" @change="fileInputChange">
  </div>
</template>

<script>
/* eslint-disable */
import * as circleFlatbuffers from '../../flatbuffers/circle/flatbuffers.ts'

export default {
  name: 'App',
  methods: {
    async fileInputChange () {
      // file input (circle)
      const file = this.$refs.files.files[0]

      // change the input file to arrayBuffer
      const arrayBuffer = await file.arrayBuffer()

      // change the arrayBuffer to Uint8Array
      const bytes = new Uint8Array(arrayBuffer)

      // change the Uint8Array to flatbuffers
      const buf = new circleFlatbuffers.ByteBuffer(bytes);

      // Import the Model Class
      const Model = require('../../flatbuffers/circle/model').Model

      // Create a Model instance
      const model = Model.getRootAsModel(buf);

      // Check the operators of the model
      for(let i=0; i < model.operatorCodesLength(); i++) {
        console.log(`#${i} operator code;`, model.operatorCodes(i).builtinCode())
      }

      // Check the description of the model
      console.log('description;', model.description())

      // Check the buffers(?) of the model
      console.log('buffersLength;', model.buffersLength()) 
      for(let i=0; i < model.buffersLength(); i++) {
        const buffers = model.buffers(i)
        console.log('buffers; ', buffers.dataArray())  
      }
      
    },
  }
}
</script>

<style>
</style>

Here I want to access the nodes, but I'm not sure how to. I'm guessing that the buffers contain all information regarding each node, but I don't know how to understand it.
I found that in #66, your team succeeded in visualizing a model. Can you inform me of the way to read the node information of a model?

I appreciate your help in advance. 🙇

ps. The reason why I'm developing from scratch and not using the codes in Netron is because since we are developing a new operation(Circle-OpSelector), I wanted to make sure I'm aware of all the codes in the visualization app, so I know where to apply the operation code.

WHAT

Let's discuss and decide program versions that are related with our task.

WHY

Working on different version may make confusion.

ALT

Or is package.json file enough?

what
add .gitattributes file is for everyone who wants to contribute this project to have same git settings.

how
discuss which git setting is better for this project and make .gitattributes file
https://git-scm.com/book/ko/v2/Git%EB%A7%9E%EC%B6%A4-Git-Attributes

other
I notice this need of .gitattributes because of CRLF and LF.
Depends on which os users use, CRLF and LF cause changes but git couldn't catch that CRLF and LF are not meaningful change for human.
So in github, there are so many useless change are tracked. I want to prevent this situation and .gitattributes file can do what i want.
Before i actually make pr, i want to ask everyone this is useful or not.
do you think .gitattributes file is uesful or not?

There are lots of css warnings when we run

npm run lintcss

as format checker.

It would be better to (1) fix them, (2) mute them if not to fix.

What?

Let's show following profiling json file in vscode extension.

• sample2.profile.json.txt

Example Result

Candidate Features

• Register this feature at Command list
• Get JSON file path from Command Palette
• Show timeline (with scroll bar)
• Show Args data in JSON
• Show utilization ratio
• Zoom in / Zoom out
  • by button
  • by scroll
• Capture
• Darkmode / Lightmode
• (TBA if needed)

Draft

• #52
  • Because of react, whole structure should be refactored

/cc @Code1995 @yesfordev @parkjisu6239 @donggillee-dev @wnsdud4197

We would like to provide automatic completion function when creating cfg file to users who do not use GUI.
We think it's better to list essential and frequently used properties than to list all properties.

1. Is it correct that tools other than one-codegen only have input_path and output_path as required attributes and one-codegen only has backend as required attributes?
2. What are the properties that users often use for each tool?

I'll record some troubleshooting items as a beginner with VSCode extension development and relarted.

Let's add unit testing and enable it in CI

Let's collect relevant information here!

This objective is actually a bringup of our ONE VSCode extension as the skeleton.

(1) Just a VSCode extension can be prepared but we need some additional settings like

• nodejs version
• vscode version
• and other stuffs that are not familiar as of now

(2) And our special functionality for ONE.
As for beginning, we're target for just one object:

Read the one-build(onecc) cfg file and invoke the compiler tools.

As of first step, invoke onecc or one-build for model compilaiton.

With some conditions

• UI is not important; we can work on this for next item
• (more conditions)

There will be some asumeptions at first and we should describe them here;

• ONE command line tools should be installed at ...
• (more asumptions)

We need to sync with ONE repo circle_schema.fbs file within this project.
I don't think it is critical with versions changes

Background what this can be an issue

• circle_schema may have to follow new tflite format, as we need to upgrade to latest TF version
• new TF may drop new format tflite file which our tflite2circle may crash; I've seen this one with some models

I'm trying ONE-vscode on windows and linux by ssh.

I'm getting

Reading configuration...
one-import-tflite is True
Add Import: inception_v3.tflite
Add Quantize: inception_v3_tflite.circle
Add Codegen: NOT_DUMMY_BACKEND # internal issue
Done import configuration.
[1/25/2022, 9:57:17 PM] Running: ImportTF inception_v3.pb
[1/25/2022, 9:57:19 PM] Build Success.

But, one-codegen failed because the backend is not set.

onecc path:  /usr/bin/onecc
onecc real path:  /usr/share/one/bin/onecc
Found tool: one-codegen as /usr/share/one/bin/one-codegen
Run tool: one-codegen args ToolArgs(6) ['--backend', 'dummy', '--', '-o', 'inception_v3.bin', './inception_v3.opt.q8.circle'] cwd: /home/dragon/Works/ONE-vscode/res/samples/cfg
arg3: ToolArgs(6) ['--backend', 'dummy', '--', '-o', 'inception_v3.bin', './inception_v3.opt.q8.circle']
0: '--backend'
1: 'dummy'    # WHY `dummy`? it should be `NOT_DUMMY_BACKEND`
2: '--'
3: '-o'
4: 'inception_v3.bin'
5: './inception_v3.opt.q8.circle'
length: 6
__proto__: Array
child process exited with code 255

What did I miss? 😥

currently, i try to make webview vscode extension(#10) for making configuration file for ONE.
but i can't decide which location is better for created configuration file.
now, i think that user can choose location of configuration file is the best, but i think default setting is necessary.
so if you have idea, please share.

There are warnings for autogenerated files in src/Circlereader/circle-analysis/circle folder.
It would be better to disable for this folder.

Compile the corresponding circle_schema file.

1. Download the executable file appropriate for your OS from FlatBuffers release 2.0.0.
2. It can be compiled into various languages ​​as shown in the picture below.
   
3. Enter the following command:
   flatc --ts -o ./{path to save} ./schema.fbs
4. You can see the compiled result in the specified path.
5. Now we need to find a way to read the circle file with this compiled output.

/cc @yesfordev @parkjisu6239 @donggillee-dev @wnsdud4197

There is a discussion to extract the contents from the json file that is the backend output and visualize it.

1. Is it visualizing by extracting the contents of the json file by importing the json path from the .cfg file?
2. Is it possible to directly open the json file and extract the contents?

We need to discuss which direction to go in.

We need to enable CI server for code checks

• format checker
• tscc checker
• and others

Let's make our format checker better.

As of now, I've managed to let changes be in one purpose and in modules (sub folders in src folder).
This was to give a chance to authors to verify once more as it can be small and
make a better reviews for the reviewers. And this came from experience of ONE compiler frontend.

Some developers don't like this cause of maybe sending multiple PRs is waste of time and may others I don't know.
I think there are cons and pros about this.

I'd like to gather opinions and discuss about this and decide which way to go.
a) changes should be in 1 project folders and would be better in small amounts
b) multiple projects are OK but should be in one purpose
c) anything is OK
d) ...

This next task is to execute compiler commands in level of

• one-import-tf, one-import-tflite, one-import-onnx
• one-optimize
• one-quantize

What to do in this task is to define a Job and invoke command line tools through this Job.

• Job itself can be created in fixed hard-code.
• Implement with import-tf and optimize
• not all options need to be implemented

ONE developer supporting tools in VSCode

Let's make ONE developers convenient by introducing many kinds of ONE developer tools!

This issue is created for overall discussion of the tools. For example, "Which item can we think of?" or "Is the function is really meaningful for developers?". If some items are decided to be supported, they will be progressed as separate issue.

Candidate Features

Following candidates are

• not determined whether they are really possible or not
• not fixed whether they are really done like that

They are just candidates!

Funtional requirements

• Visualization for various file type which includes ONE development data
  • json : Compatible with chrome tracing
  • csv : Indicates not only table, but also other kinds
  • dot
  • ...
• Embedding or automatic-opening chrome tracing
• Showing origin information in circle file with backend output

NOTE Examples for each file format will be added soon.

Non-functional requirements

• When new type of file should be visualized, what we need to do is just adding visualization function for the new type of file.
• When visualization method is updated for some type, it should not affect the others. In other words, if visualization method for json is updated, then visualization method of csv, dot, etc should not be affected.
• Typing same path of the files should be minimized. For example, once the path for each files are saved in .cfg file, users do not need to enter the path everytime.

Example Result

This is really simple example for easy understanding of overall concept.

References

• Simple extension examples : https://github.com/microsoft/vscode-extension-samples
• Advanced visualization in vscode examples : https://github.com/hediet/vscode-debug-visualizer/tree/master/extension