Initial commit

2019-06-20 11:41:10 +02:00
commit 07132b759a
29 changed files with 17302 additions and 0 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1,3 @@
+# Set default behavior to automatically normalize line endings.
+* text=auto
+
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,4 @@
+out
+node_modules
+.vscode-test/
+*.vsix
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"eg2.tslint"
+	]
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,36 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "runtimeExecutable": "${execPath}",
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/out/**/*.js"
+            ],
+            "preLaunchTask": "npm: watch"
+        },
+        {
+            "name": "Extension Tests",
+            "type": "extensionHost",
+            "request": "launch",
+            "runtimeExecutable": "${execPath}",
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}",
+                "--extensionTestsPath=${workspaceFolder}/out/test"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/out/test/**/*.js"
+            ],
+            "preLaunchTask": "npm: watch"
+        }
+    ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "watch",
+            "problemMatcher": "$tsc-watch",
+            "isBackground": true,
+            "presentation": {
+                "reveal": "never"
+            },
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        }
+    ]
+}
--- a/.vscodeignore
+++ b/.vscodeignore
@@ -0,0 +1,9 @@
+.vscode/**
+.vscode-test/**
+out/test/**
+out/**/*.map
+src/**
+.gitignore
+tsconfig.json
+vsc-extension-quickstart.md
+tslint.json
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,7 @@
+# Change Log
+All notable changes to the "debug-visualizer" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+- Initial release
--- a/README.md
+++ b/README.md
@@ -0,0 +1,65 @@
+# debug-visualizer README
+
+This is the README for your extension "debug-visualizer". After writing up a brief description, we recommend including the following sections.
+
+## Features
+
+Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
+
+For example if there is an image subfolder under your extension project workspace:
+
+\!\[feature X\]\(images/feature-x.png\)
+
+> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
+
+## 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.
+
+-----------------------------------------------------------------------------------------------------------
+
+## Working with Markdown
+
+**Note:** You can author your README using Visual Studio Code.  Here are some useful editor keyboard shortcuts:
+
+* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux)
+* Toggle preview (`Shift+CMD+V` on macOS or `Shift+Ctrl+V` on Windows and Linux)
+* Press `Ctrl+Space` (Windows, Linux) or `Cmd+Space` (macOS) to see a list of Markdown snippets
+
+### For more information
+
+* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
+* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
+
+**Enjoy!**
--- a/example/index.js
+++ b/example/index.js
@@ -0,0 +1,30 @@
+
+const matrix = [
+    [1, 2, 3],
+    [4, 5, 6],
+    [7, 8, 9],
+];
+
+let str = "test1";
+for (let i = 0; i < 100000; i++) {
+    str += i;
+}
+
+function randInt(max) {
+    return Math.floor(Math.random() * max);
+}
+
+const nodes = [];
+for (let i = 0; i < 10; i++) {
+    nodes.push(i);
+}
+
+const edges = [];
+for (let j = 0; j < 15; j++) {
+    edges.push([ randInt(nodes.length - 1), randInt(nodes.length - 1) ]);
+}
+
+console.log(matrix, str);
+
+
+
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "debug-visualizer",
+    "displayName": "debug-visualizer",
+    "description": "",
+    "version": "0.0.1",
+    "publisher": "hediet",
+    "engines": {
+        "vscode": "^1.30.0"
+    },
+    "categories": [
+        "Other"
+    ],
+    "activationEvents": [
+        "onCommand:extension.sayHello",
+        "onWebviewPanel:debugVisualizer"
+    ],
+    "main": "./out/extension",
+    "contributes": {
+        "commands": [
+            {
+                "command": "extension.sayHello",
+                "title": "Hello World"
+            }
+        ]
+    },
+    "scripts": {
+        "vscode:prepublish": "npm run compile",
+        "compile": "tsc -p ./",
+        "watch": "tsc -watch -p ./",
+        "postinstall": "node ./node_modules/vscode/bin/install",
+        "test": "npm run compile && node ./node_modules/vscode/bin/test"
+    },
+    "devDependencies": {
+        "typescript": "^2.6.1",
+        "vscode": "^1.1.6",
+        "tslint": "^5.8.0",
+        "@types/node": "^7.0.43",
+        "@types/mocha": "^2.2.42"
+    }
+}
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -0,0 +1,158 @@
+import * as vscode from 'vscode';
+
+const debugVisualizer = "debugVisualizer";
+
+function getHtml() {
+    return `
+        <html>
+            <head>
+            <style>
+                html { height: 100%; width: 100%; padding: 0; margin: 0; }
+                body { height: 100%; width: 100%; padding: 0; margin: 0; }
+                iframe { height: 100%; width: 100%; padding: 0; margin: 0; border: 0; display: block; }
+            </style>
+            </head>
+            <body>
+                <iframe src="http://localhost:8080/"></iframe>
+                <script>
+                const api = acquireVsCodeApi();
+                window.addEventListener('message', event => {
+                    if (event.source === window.frames[0]) {
+                        if (event.data.command === "setExpression") {
+                            api.setState({ expression: event.data.expression });
+                        }
+
+                        if (event.data.command === "initialized") {
+                            console.log("initialized, sent ", api.getState());
+                            window.frames[0].postMessage({ command: "setExpression", expression: api.getState().expression }, "*");
+                            
+                        } else {
+                            console.log("iframe -> vscode", event.data);
+                            api.postMessage(event.data);
+                        }
+                    } else {
+                        console.log("vscode -> iframe", event.data);
+                        window.frames[0].postMessage(event.data, "*");
+                    }
+                });
+                </script>
+            </body>
+        </html>
+    `;
+}
+
+class DebugVisualizerViewSerializer implements vscode.WebviewPanelSerializer {
+    constructor(private readonly views: WebViews) {}
+
+	async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
+	    this.views.restore(webviewPanel);
+	}
+}
+
+class WebView {
+    private expression: string|null = null;
+    private lastFrameId: number|null = null;
+
+    constructor(private readonly webviewPanel: vscode.WebviewPanel) {
+        webviewPanel.webview.onDidReceiveMessage(e => {
+            if (e.command === "setExpression") {
+                this.expression = e.expression;
+                if (this.lastFrameId) {
+                    this.reevaluateExpression(this.lastFrameId);
+                }
+            }
+        });
+    }
+
+    public getExpression(): string|null {
+        return this.expression;
+    }
+
+    public async reevaluateExpression(frameId: number) {
+        this.lastFrameId = frameId;
+        if (!this.expression) { return; }
+
+        const session = vscode.debug.activeDebugSession;
+        if (session) {
+            try {
+                const reply = await session.customRequest("evaluate", { "expression": this.expression, frameId, context: "watch" });
+                this.webviewPanel.webview.postMessage({
+                    command: "setValue",
+                    value: { data: reply.result }
+                });
+            }
+            catch (error) {
+                vscode.window.showInformationMessage(`error: ${error.message}`);
+            }
+        }
+    }
+}
+
+class WebViews {
+    private readonly debugVisualizations = new Map<vscode.WebviewPanel, WebView>();
+
+    public createNew() {
+        const panel = vscode.window.createWebviewPanel(
+            debugVisualizer,
+            'Debug Visualizer',
+            vscode.ViewColumn.Two,
+            { enableScripts: true }
+        );
+
+        this.setupView(panel);
+    }
+
+    public restore(webviewPanel: vscode.WebviewPanel) {
+        this.setupView(webviewPanel);
+    }
+
+    private setupView(webviewPanel: vscode.WebviewPanel) {
+        webviewPanel.webview.html = getHtml();
+        const view = new WebView(webviewPanel);
+        this.debugVisualizations.set(webviewPanel, view);
+        webviewPanel.onDidDispose(() => {
+            this.debugVisualizations.delete(webviewPanel);
+        });
+    }
+
+    public reevaluateExpressions(frameId: number) {
+        for (const vis of this.debugVisualizations.values()) {
+            vis.reevaluateExpression(frameId);
+        }
+    }
+}
+
+
+export function activate(context: vscode.ExtensionContext) {
+    const views = new WebViews();
+
+    vscode.debug.onDidReceiveDebugSessionCustomEvent(e => {
+        if (e.event === "paused") {
+            const frameId = e.body.currentFrameId;
+            views.reevaluateExpressions(frameId);
+        }
+    })
+
+    vscode.window.registerWebviewPanelSerializer(debugVisualizer,
+        new DebugVisualizerViewSerializer(views));
+
+    let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
+        views.createNew();
+        //const session = vscode.debug.activeDebugSession;
+
+        /*
+        if (session) {
+            session.customRequest("evaluate", { "expression": "Math.sqrt(10)" }).then(reply => {
+                vscode.window.showInformationMessage(`result: ${reply.result}`);
+            }, error => {
+                vscode.window.showInformationMessage(`error: ${error.message}`);
+            });
+        }*/
+    });
+
+    context.subscriptions.push(disposable);
+}
+
+// this method is called when your extension is deactivated
+export function deactivate() {
+}
--- a/src/test/extension.test.ts
+++ b/src/test/extension.test.ts
@@ -0,0 +1,22 @@
+//
+// Note: This example test is leveraging the Mocha test framework.
+// Please refer to their documentation on https://mochajs.org/ for help.
+//
+
+// The module 'assert' provides assertion methods from node
+import * as assert from 'assert';
+
+// You can import and use all API from the 'vscode' module
+// as well as import your extension to test it
+// import * as vscode from 'vscode';
+// import * as myExtension from '../extension';
+
+// Defines a Mocha test suite to group tests of similar kind together
+suite("Extension Tests", function () {
+
+    // Defines a Mocha unit test
+    test("Something 1", function() {
+        assert.equal(-1, [1, 2, 3].indexOf(5));
+        assert.equal(-1, [1, 2, 3].indexOf(0));
+    });
+});
--- a/src/test/index.ts
+++ b/src/test/index.ts
@@ -0,0 +1,22 @@
+//
+// PLEASE DO NOT MODIFY / DELETE UNLESS YOU KNOW WHAT YOU ARE DOING
+//
+// This file is providing the test runner to use when running extension tests.
+// By default the test runner in use is Mocha based.
+//
+// You can provide your own test runner if you want to override it by exporting
+// a function run(testRoot: string, clb: (error:Error) => void) that the extension
+// host can call to run the tests. The test runner is expected to use console.log
+// to report the results back to the caller. When the tests are finished, return
+// a possible error to the callback or null if none.
+
+import * as testRunner from 'vscode/lib/testrunner';
+
+// You can directly control Mocha options by uncommenting the following lines
+// See https://github.com/mochajs/mocha/wiki/Using-mocha-programmatically#set-options for more info
+testRunner.configure({
+    ui: 'tdd', 		// the TDD UI is being used in extension.test.ts (suite, test, etc.)
+    useColors: true // colored output from test results
+});
+
+module.exports = testRunner;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es6",
+        "outDir": "out",
+        "lib": [
+            "es6"
+        ],
+        "sourceMap": true,
+        "rootDir": "src",
+        /* Strict Type-Checking Option */
+        "strict": true,   /* enable all strict type-checking options */
+        /* Additional Checks */
+        "noUnusedLocals": true /* Report errors on unused locals. */
+        // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+        // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+        // "noUnusedParameters": true,  /* Report errors on unused parameters. */
+    },
+    "include": [
+        "./src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        ".vscode-test"
+    ]
+}
--- a/tslint.json
+++ b/tslint.json
@@ -0,0 +1,15 @@
+{
+	"rules": {
+		"no-string-throw": true,
+		"no-unused-expression": true,
+		"no-duplicate-variable": true,
+		"curly": true,
+		"class-name": true,
+		"semicolon": [
+			true,
+			"always"
+		],
+		"triple-equals": true
+	},
+	"defaultSeverity": "warning"
+}
--- a/vsc-extension-quickstart.md
+++ b/vsc-extension-quickstart.md
@@ -0,0 +1,33 @@
+# Welcome to your VS Code Extension
+
+## What's in the folder
+* This folder contains all of the files necessary for your extension.
+* `package.json` - this is the manifest file in which you declare your extension and command.
+The sample plugin registers a command and defines its title and command name. With this information
+VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
+* `src/extension.ts` - this is the main file where you will provide the implementation of your command.
+The file exports one function, `activate`, which is called the very first time your extension is
+activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
+We pass the function containing the implementation of the command as the second parameter to
+`registerCommand`.
+
+## Get up and running straight away
+* Press `F5` to open a new window with your extension loaded.
+* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
+* Set breakpoints in your code inside `src/extension.ts` to debug your extension.
+* Find output from your extension in the debug console.
+
+## Make changes
+* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
+* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
+
+## Explore the API
+* You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`.
+
+## Run tests
+* Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Launch Tests`.
+* Press `F5` to run the tests in a new window with your extension loaded.
+* See the output of the test result in the debug console.
+* Make changes to `test/extension.test.ts` or create new test files inside the `test` folder.
+    * By convention, the test runner will only consider files matching the name pattern `**.test.ts`.
+    * You can create folders inside the `test` folder to structure your tests any way you want.
--- a/webview/package-lock.json
+++ b/webview/package-lock.json
--- a/webview/package.json
+++ b/webview/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "template",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "webpack-dev-server -d --hot --inline",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "@hediet/typed-json-rpc": "^0.1.0",
+    "@hediet/typed-json-rpc-websocket": "^0.1.0",
+    "classnames": "^2.2.6",
+    "mobx": "^5.7.0",
+    "mobx-react": "^5.4.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-measure": "2.1.3",
+    "react-svg-pan-zoom": "^2.18.0",
+    "svg-inline-react": "^3.1.0",
+    "viz.js": "^2.1.2"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.6",
+    "@types/react": "^16.7.13",
+    "@types/react-dom": "^16.0.11",
+    "@types/react-measure": "^2.0.4",
+    "@types/react-svg-pan-zoom": "^2.5.6",
+    "clean-webpack-plugin": "^1.0.0",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^2.0.0",
+    "file-loader": "^2.0.0",
+    "git-revision-webpack-plugin": "^3.0.3",
+    "html-webpack-plugin": "^3.2.0",
+    "json-loader": "^0.5.7",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.11.0",
+    "raw-loader": "^1.0.0",
+    "sass-loader": "^7.1.0",
+    "source-map-loader": "^0.2.4",
+    "style-loader": "^0.23.1",
+    "ts-loader": "^5.3.1",
+    "typescript": "^3.2.2",
+    "webpack": "^4.27.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10",
+    "webpack-split-by-path": "^2.0.0"
+  }
+}
--- a/webview/src/App.tsx
+++ b/webview/src/App.tsx
@@ -0,0 +1,257 @@
+import { observer } from "mobx-react";
+import * as classNames from "classnames";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ReactSVGPanZoom, Tool } from "react-svg-pan-zoom";
+import { computed, observable, runInAction, action } from "mobx";
+import Measure from "react-measure";
+import { Model, ExpressionInputModel } from "./Model";
+import { GraphData, DotGraphViewer, DotViewer } from "./DotGraphViewer";
+
+const ENTER_KEYCODE = 13;
+const ESCAPE = 27;
+
+@observer
+class ExpressionInput extends React.Component<{
+    rootModel: Model;
+    model: ExpressionInputModel;
+}> {
+    private ref: HTMLInputElement | null;
+    private readonly inputTextChanged = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        this.props.model.setEditedExpression(event.target.value);
+    };
+
+    private readonly setRef = (ref: HTMLInputElement | null) => {
+        if (ref) {
+            ref.select();
+        }
+    };
+
+    private readonly onInputKeyDown = (e: React.KeyboardEvent) => {
+        if (e.keyCode === ENTER_KEYCODE) {
+            e.preventDefault();
+            this.props.model.finishEditing();
+        } else if (e.keyCode === ESCAPE) {
+            e.preventDefault();
+            this.props.model.abortEditing();
+        }
+    };
+
+    render() {
+        const model = this.props.model;
+        if (model.editedExpression !== null) {
+            return (
+                <input
+                    ref={this.setRef}
+                    className="expression-input"
+                    value={model.editedExpression}
+                    onChange={this.inputTextChanged}
+                    onBlur={model.finishEditing}
+                    onKeyDown={this.onInputKeyDown}
+                />
+            );
+        } else {
+            return (
+                <div
+                    className="expression"
+                    onDoubleClick={model.activateEditing}
+                >
+                    {this.props.rootModel.actualExpression}
+                </div>
+            );
+        }
+    }
+}
+
+import {
+    contract,
+    types as t,
+    requestContract,
+    notificationContract,
+    ConsoleRpcLogger
+} from "@hediet/typed-json-rpc";
+import { TypedWebSocketClientChannel } from "@hediet/typed-json-rpc-websocket";
+
+const editorContract = contract({
+    server: {
+        highlightLine: requestContract({ params: { line: t.Integer } }),
+        highlight: requestContract({
+            params: {
+                startLine: t.Integer,
+                startCol: t.Integer,
+                endLine: t.Integer,
+                endCol: t.Integer
+            }
+        }),
+        decorate: requestContract({
+            params: {
+                decos: t.array(t.type({ line: t.Integer, text: t.string }))
+            }
+        })
+    },
+    client: {}
+});
+
+@observer
+export class HighlightLine extends React.Component<{ content: string }> {
+    @observable localContent: string;
+
+    constructor(props: HighlightLine["props"]) {
+        super(props);
+        this.localContent = props.content;
+    }
+    /*
+    componentDidUpdate(props: this["props"]) {
+        this.localContent = this.props.content;
+    }*/
+
+    async send() {
+        const content = this.localContent.substr("highlight-line:".length);
+        const lines = content.split("\n");
+
+        const parts = lines[0].split(",");
+        const startLine = parseInt(parts[0]) - 1;
+        const startCol = parseInt(parts[1]) - 1;
+        const endLine = parseInt(parts[2]) - 1;
+        const endCol = parseInt(parts[3]);
+
+        let decos = lines.splice(1).map(l => {
+            const p = l.split(":");
+            return {
+                line: parseInt(p[0]) - 1,
+                text: " " + p.splice(1).join(":")
+            };
+        });
+        decos = decos.filter(d => !d.text.startsWith(" @"));
+
+        console.log("send", startLine, decos);
+
+        try {
+            let channel = await TypedWebSocketClientChannel.connectTo(
+                { address: "ws://localhost:56024" },
+                new ConsoleRpcLogger()
+            );
+            const server = editorContract.getServerInterface(channel, {});
+            channel.startListen();
+
+            await server.highlight({ startLine, startCol, endLine, endCol });
+            await server.decorate({ decos });
+        } catch (exception) {
+            console.log("could not contact vscode: ", exception);
+        }
+    }
+    render() {
+        this.send();
+        return (
+            <textarea
+                value={this.localContent}
+                onChange={e => (this.localContent = "" + e.target.value)}
+            />
+        );
+    }
+}
+
+@observer
+export class GUI extends React.Component<{ model: Model }, {}> {
+    render() {
+        const m = this.props.model;
+        return (
+            <div
+                style={{
+                    paddingTop: "0.5em",
+                    display: "flex",
+                    flexDirection: "column",
+                    height: "100%",
+                    boxSizing: "border-box"
+                }}
+                tabIndex={0}
+                onKeyDown={e => {
+                    if (e.keyCode === 39) {
+                        m.historyIndex++;
+                    } else if ((e.keyCode = 37)) {
+                        m.historyIndex--;
+                    }
+                }}
+            >
+                <div style={{}}>
+                    <ExpressionInput
+                        rootModel={this.props.model}
+                        model={this.props.model.expressionInput}
+                    />
+                </div>
+                <hr style={{ width: "100%" }} />
+                <div style={{ flex: "1", minHeight: "0px" }}>
+                    {/* <input type="checkbox" onChange={e => this.props.model.expressionInput.isEditing = !!e.target.checked} /> */}
+                    {m.value ? (
+                        this.renderValue(m.value.data)
+                    ) : (
+                        <div>No Data</div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    private cachedValue: string;
+    private cachedParts: string[];
+
+    renderValue(value: string) {
+        try {
+            if (value.match(/"(.*)"/)) {
+                value = value.substr(1, value.length - 2);
+            }
+            const data = JSON.parse(value);
+
+            //console.log(value, (data as any).kind);
+            if ((data as any).kind === "GraphData") {
+                const value2 = data as GraphData;
+                return <DotGraphViewer data={value2} />;
+            }
+        } catch (e) {
+            console.error(value, e);
+        }
+        return value;
+
+        try {
+            let parsed = JSON.parse(`${value}`);
+
+            if (parsed === "None") {
+                return <textarea>None</textarea>;
+            }
+
+            if (parsed.startsWith("highlight-line:")) {
+                return <HighlightLine content={parsed} />;
+            }
+        } catch (e) {
+            console.error(e);
+        }
+
+        try {
+            return <DotViewer dotCode={JSON.parse(`${value}`)} />;
+        } catch (e) {
+            console.error(value, e);
+        }
+
+        /*return <DotViewer dotCode={JSON.parse(`${value}`)} />;*/
+        if (value !== this.cachedValue) {
+            this.cachedParts = value
+                .split("---------------------------")
+                .filter(e => !!e);
+            this.cachedValue = value;
+            console.log(`updated ${this.cachedParts.length} parts`);
+        }
+        //console.log(value.substr(0, 10000));
+        //console.log(`${this.cachedParts[0]}`);
+        //console.log(`"${this.cachedParts[0]}"`);
+        const idx = Math.max(
+            1,
+            Math.min(this.cachedParts.length - 2, this.props.model.historyIndex)
+        );
+        console.log(idx);
+        return <DotViewer dotCode={JSON.parse(`"${this.cachedParts[idx]}"`)} />;
+
+        return <div>{`${value.length}`}</div>;
+    }
+}
--- a/webview/src/DotGraphViewer.tsx
+++ b/webview/src/DotGraphViewer.tsx
@@ -0,0 +1,113 @@
+import { observer } from "mobx-react";
+import * as classNames from "classnames";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ReactSVGPanZoom, Tool } from 'react-svg-pan-zoom';
+import { computed, observable, autorun, runInAction } from "mobx";
+import Measure, { ContentRect } from 'react-measure';
+import Viz from 'viz.js';
+import { Module, render } from 'viz.js/full.render.js';
+
+export interface GraphData {
+    kind: "GraphData";
+    nodes: { id: string; label: string; }[];
+    edges: { from: string; to: string; label: string; }[];
+}
+
+let viz: any = new Viz({Module: () => Module({TOTAL_MEMORY: 1<<30}), render});
+
+@observer
+export class DotGraphViewer extends React.Component<{ data: GraphData }> {
+    render() {
+        const { nodes, edges } = this.props.data;
+        const dotContent = `
+            digraph MyGraph {
+                ${nodes.map(n => `${n.id} [ label = ${JSON.stringify(n.label)} ];`).join("\n ")}
+                ${edges.map(e => `${e.from} -> ${e.to} [ label = ${JSON.stringify(e.label)} ];`).join("\n")}
+            }
+        `;
+        return (
+            <DotViewer dotCode={dotContent} />
+        );
+    }
+}
+
+@observer
+export class DotViewer extends React.Component<{ dotCode: string }> {
+    @observable private svg: string|null = null;
+
+    constructor(props) {
+        super(props);
+        autorun(async () => {
+            const svg = await viz.renderString(this.props.dotCode);
+            runInAction("Update svg", () => this.svg = svg);
+        });
+    }
+
+    render() {
+        if (!this.svg) {
+            return (<div>Loading...</div>);
+        }
+        return (
+            <SvgViewer svgContent={this.svg} />
+        );
+    }
+}
+
+function widthOrDefault(r: ContentRect): number {
+    if (r.bounds && r.bounds.width) {
+        return r.bounds.width;
+    }
+    return 1;
+}
+
+function heightOrDefault(r: ContentRect): number {
+    if (r.bounds && r.bounds.height) {
+        return r.bounds.height;
+    }
+    return 1;
+}
+
+export class SvgViewer extends React.Component<{ svgContent: string }, { tool: Tool }> {
+    constructor(props) {
+        super(props);
+        this.state = { tool: "pan" };
+    }
+
+    private readonly setTool = (tool: Tool) => {
+        this.setState({ tool });
+    };
+
+    render() {
+        let { svgContent } = this.props;
+        let width: number = 0;
+        let height: number = 0;
+        svgContent = svgContent.replace(/viewBox="[0-9\.]+ [0-9\.]+ ([0-9\.]+) ([0-9\.]+)"/, (r, w, h) => {
+            width = parseFloat(w);
+            height = parseFloat(h);
+            return "";
+        });
+        //console.log(svgContent);
+        return (
+            <Measure bounds>
+                {
+                    ({ measureRef, contentRect }) => 
+                    (
+                        <div ref={measureRef} className="svgViewer">
+                            <ReactSVGPanZoom
+                                width={widthOrDefault(contentRect)}
+                                height={heightOrDefault(contentRect)}
+                                tool={this.state.tool}
+                                onChangeTool={this.setTool}
+                            >
+                                <svg width={width} height={height}>
+                                    <g dangerouslySetInnerHTML={{ __html: svgContent }} />
+                                </svg>
+                            </ReactSVGPanZoom>
+                        </div>
+                    )
+                }
+            </Measure>
+        );
+    }
+}
--- a/webview/src/Model.tsx
+++ b/webview/src/Model.tsx
@@ -0,0 +1,89 @@
+import { observable, computed, action, autorun, intercept, runInAction, values } from "mobx";
+import Viz from 'viz.js';
+import { Module, render } from 'viz.js/full.render.js';
+
+let viz: any = new Viz({ Module, render });
+
+export class ExpressionInputModel {
+    @observable public editedExpression: string|null = "";
+    @observable public expression: string = "";
+
+    @action
+    public readonly activateEditing = () => {
+        this.editedExpression = this.expression;
+    }
+
+    @action
+    public readonly setEditedExpression = (text: string) => {
+        this.editedExpression = text;
+
+    }
+
+    @action
+    public readonly finishEditing = () => {
+        if (this.editedExpression) {
+            this.expression = this.editedExpression;
+            this.editedExpression = null;
+        }
+    }
+
+    @action
+    public readonly abortEditing = () => {
+        this.editedExpression = null;
+    }
+}
+
+interface Value {
+    data: string;
+}
+
+type Data = SetValueCommand | SetExpressionCommand | { command: undefined; };
+
+interface SetValueCommand {
+    command: "setValue";
+    value: Value;
+}
+
+interface SetExpressionCommand {
+    command: "setExpression";
+    expression: string;
+}
+
+export class Model {
+    public readonly expressionInput = new ExpressionInputModel();
+    @observable public value: Value | undefined = undefined;
+
+    @observable public historyIndex: number = 0;
+    @computed public get actualExpression(): string {
+        return this.expressionInput.expression;
+        //return this.expressionInput.expression.replace(/\$i/g, `${this.historyIndex}`);
+    }
+
+    constructor() {
+        window.addEventListener("message", event => {
+            const data = event.data as Data;
+            if (data.command === "setValue") {
+                runInAction("setValue", () => {
+                    this.value = data.value;
+                });
+            }
+            if (data.command === "setExpression") {
+                runInAction("setExpression", () => {
+                    this.expressionInput.editedExpression = data.expression ? null : "";
+                    this.expressionInput.expression = data.expression;
+                });
+            }
+        });
+
+        window.parent.postMessage({ command: "initialized" }, "*");
+
+        autorun(() => {
+            setExpression(this.actualExpression);
+        });
+    }
+}
+
+function setExpression(expression: string) {
+    window.parent.postMessage({ command: "setExpression", expression }, "*");
+}
+
--- a/webview/src/index.tsx
+++ b/webview/src/index.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import "./style.scss";
+import App = require("./App");
+import { Model } from "./Model";
+
+const model = new Model();
+
+function render(target: HTMLDivElement, app: typeof App) {
+    ReactDOM.render(<app.GUI model={model} />, target);
+}
+
+const target = document.createElement("div");
+target.className = "root";
+render(target, App);
+document.body.appendChild(target);
+
+declare var module: { hot?: { accept: (componentName: string, callback: () => void) => void } };
+declare var require: (name: string) => any;
+
+if (module.hot) {
+    module.hot.accept("./App", () => {
+        console.log("render");
+        render(target, require("./App"));
+    });
+}
--- a/webview/src/style.scss
+++ b/webview/src/style.scss
@@ -0,0 +1,105 @@
+@import './vscode-defaults.scss';
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  height: 100vh;
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+  
+  background-color: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+  font-family: var(--vscode-editor-font-family);
+  font-weight: var(--vscode-editor-font-weight);
+  font-size: var(--vscode-editor-font-size);
+  margin: 0;
+  padding: 0 20px;
+}
+
+html, .root, .gui {
+  height: 100vh;
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+}
+
+.gui {
+  display: flex;
+  flex-direction: column;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+a {
+  color: var(--vscode-textLink-foreground);
+}
+
+a:hover {
+  color: var(--vscode-textLink-activeForeground);
+}
+
+a:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 1px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
+}
+
+code {
+  color: var(--vscode-textPreformat-foreground);
+}
+
+blockquote {
+  background: var(--vscode-textBlockQuote-background);
+  border-color: var(--vscode-textBlockQuote-border);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--vscode-scrollbarSlider-background);
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--vscode-scrollbarSlider-hoverBackground);
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: var(--vscode-scrollbarSlider-activeBackground);
+}
+
+.svgViewer {
+  height: 100%;
+}
+
+.expression {
+  color: #c586c0;
+  white-space: pre;
+  font-size: 13px;
+  font-family: Monaco,Menlo,Consolas,Droid Sans Mono,Inconsolata,Courier New,monospace,Droid Sans Fallback;
+  margin-top: 3px;
+  margin-bottom: 6px;
+}
+
+.expression-input {
+  width: 100%;
+  box-sizing : border-box;
+  margin-top: 1px;
+  margin-bottom: 0px;
+  font-size: 13px;
+  font-family: Monaco,Menlo,Consolas,Droid Sans Mono,Inconsolata,Courier New,monospace,Droid Sans Fallback;
+  background-color: rgb(48, 60, 65);
+  color: rgb(238, 255, 255);
+  border: 1px black;
+}
+
+hr {
+  border: 0.5px solid white;
+}
--- a/webview/src/vscode-defaults.scss
+++ b/webview/src/vscode-defaults.scss
@@ -0,0 +1,288 @@
+:root {
+    --background-color: #263238;
+    --color: #eeffff;
+    --font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", HelveticaNeue-Light, Ubuntu, "Droid Sans", sans-serif;
+    --font-size: 13px;
+    --font-weight: normal;
+    --link-active-color: #eeffff;
+    --link-color: #80cbc4;
+    --vscode-activityBar-background: #192227;
+    --vscode-activityBar-border: rgba(0, 0, 0, 0.38);
+    --vscode-activityBar-dropBackground: rgba(255, 255, 255, 0.12);
+    --vscode-activityBar-foreground: #eeffff;
+    --vscode-activityBar-inactiveForeground: rgba(238, 255, 255, 0.6);
+    --vscode-activityBarBadge-background: #80cbc4;
+    --vscode-activityBarBadge-foreground: #000000;
+    --vscode-badge-background: rgba(0, 0, 0, 0.19);
+    --vscode-badge-foreground: #546e7a;
+    --vscode-breadcrumb-activeSelectionForeground: #80cbc4;
+    --vscode-breadcrumb-background: #263238;
+    --vscode-breadcrumb-focusForeground: #eeffff;
+    --vscode-breadcrumb-foreground: #5f7a87;
+    --vscode-breadcrumbPicker-background: #192227;
+    --vscode-button-background: rgba(128, 203, 196, 0.13);
+    --vscode-button-foreground: #ffffff;
+    --vscode-button-hoverBackground: rgba(175, 222, 218, 0.13);
+    --vscode-debugExceptionWidget-background: #420b0d;
+    --vscode-debugExceptionWidget-border: #a31515;
+    --vscode-debugToolBar-background: #263238;
+    --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
+    --vscode-diffEditor-insertedTextBackground: rgba(195, 232, 141, 0.08);
+    --vscode-diffEditor-removedTextBackground: rgba(255, 83, 112, 0.13);
+    --vscode-dropdown-background: #263238;
+    --vscode-dropdown-border: rgba(255, 255, 255, 0.06);
+    --vscode-dropdown-foreground: #f0f0f0;
+    --vscode-editor-background: #263238;
+    --vscode-editor-findMatchBackground: #515c6a;
+    --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+    --vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
+    --vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);
+    --vscode-editor-font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", HelveticaNeue-Light, Ubuntu, "Droid Sans", sans-serif;
+    --vscode-editor-font-size: 13px;
+    --vscode-editor-font-weight: normal;
+    --vscode-editor-foreground: #eeffff;
+    --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+    --vscode-editor-inactiveSelectionBackground: rgba(128, 203, 196, 0.06);
+    --vscode-editor-lineHighlightBackground: rgba(0, 0, 0, 0.31);
+    --vscode-editor-lineHighlightBorder: #282828;
+    --vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
+    --vscode-editor-selectionBackground: rgba(128, 203, 196, 0.13);
+    --vscode-editor-selectionHighlightBackground: rgba(255, 204, 0, 0.13);
+    --vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
+    --vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
+    --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
+    --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);
+    --vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);
+    --vscode-editorActiveLineNumber-foreground: #c6c6c6;
+    --vscode-editorBracketMatch-background: #263238;
+    --vscode-editorBracketMatch-border: rgba(255, 204, 0, 0.31);
+    --vscode-editorCodeLens-foreground: #999999;
+    --vscode-editorCursor-foreground: #ffcc00;
+    --vscode-editorError-foreground: rgba(255, 83, 112, 0.44);
+    --vscode-editorGroup-border: rgba(0, 0, 0, 0.19);
+    --vscode-editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
+    --vscode-editorGroupHeader-noTabsBackground: #263238;
+    --vscode-editorGroupHeader-tabsBackground: #263238;
+    --vscode-editorGutter-addedBackground: rgba(195, 232, 141, 0.38);
+    --vscode-editorGutter-background: #263238;
+    --vscode-editorGutter-commentRangeForeground: #c5c5c5;
+    --vscode-editorGutter-deletedBackground: rgba(255, 83, 112, 0.38);
+    --vscode-editorGutter-modifiedBackground: rgba(130, 170, 255, 0.38);
+    --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
+    --vscode-editorHoverWidget-background: #263238;
+    --vscode-editorHoverWidget-border: rgba(255, 255, 255, 0.06);
+    --vscode-editorIndentGuide-activeBackground: #37474f;
+    --vscode-editorIndentGuide-background: rgba(55, 71, 79, 0.44);
+    --vscode-editorInfo-foreground: #008000;
+    --vscode-editorLineNumber-activeForeground: #5f7a87;
+    --vscode-editorLineNumber-foreground: #37474f;
+    --vscode-editorLink-activeForeground: #eeffff;
+    --vscode-editorMarkerNavigation-background: rgba(238, 255, 255, 0.02);
+    --vscode-editorMarkerNavigationError-background: rgba(255, 83, 112, 0.44);
+    --vscode-editorMarkerNavigationInfo-background: #008000;
+    --vscode-editorMarkerNavigationWarning-background: rgba(195, 232, 141, 0.44);
+    --vscode-editorOverviewRuler-addedForeground: rgba(0, 122, 204, 0.6);
+    --vscode-editorOverviewRuler-border: #263238;
+    --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+    --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+    --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+    --vscode-editorOverviewRuler-deletedForeground: rgba(0, 122, 204, 0.6);
+    --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+    --vscode-editorOverviewRuler-findMatchForeground: rgba(246, 185, 77, 0.7);
+    --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+    --vscode-editorOverviewRuler-infoForeground: rgba(18, 18, 136, 0.7);
+    --vscode-editorOverviewRuler-modifiedForeground: rgba(0, 122, 204, 0.6);
+    --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+    --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+    --vscode-editorOverviewRuler-warningForeground: rgba(18, 136, 18, 0.7);
+    --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+    --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+    --vscode-editorPane-background: #263238;
+    --vscode-editorRuler-foreground: #37474f;
+    --vscode-editorSuggestWidget-background: #263238;
+    --vscode-editorSuggestWidget-border: rgba(255, 255, 255, 0.06);
+    --vscode-editorSuggestWidget-foreground: #eeffff;
+    --vscode-editorSuggestWidget-highlightForeground: #80cbc4;
+    --vscode-editorSuggestWidget-selectedBackground: rgba(0, 0, 0, 0.31);
+    --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+    --vscode-editorWarning-foreground: rgba(195, 232, 141, 0.44);
+    --vscode-editorWhitespace-foreground: rgba(238, 255, 255, 0.25);
+    --vscode-editorWidget-background: #192227;
+    --vscode-editorWidget-border: #ff0000;
+    --vscode-editorWidget-resizeBorder: #80cbc4;
+    --vscode-errorForeground: #f48771;
+    --vscode-extensionButton-prominentBackground: rgba(195, 232, 141, 0.56);
+    --vscode-extensionButton-prominentForeground: #ffffff;
+    --vscode-extensionButton-prominentHoverBackground: #c3e88d;
+    --vscode-focusBorder: rgba(255, 255, 255, 0);
+    --vscode-foreground: #cccccc;
+    --vscode-gitDecoration-addedResourceForeground: #81b88b;
+    --vscode-gitDecoration-conflictingResourceForeground: rgba(255, 203, 107, 0.56);
+    --vscode-gitDecoration-deletedResourceForeground: rgba(255, 83, 112, 0.56);
+    --vscode-gitDecoration-ignoredResourceForeground: rgba(95, 122, 135, 0.56);
+    --vscode-gitDecoration-modifiedResourceForeground: rgba(130, 170, 255, 0.56);
+    --vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
+    --vscode-gitDecoration-untrackedResourceForeground: rgba(195, 232, 141, 0.56);
+    --vscode-gitlens-gutterBackgroundColor: rgba(255, 255, 255, 0.07);
+    --vscode-gitlens-gutterForegroundColor: #bebebe;
+    --vscode-gitlens-gutterUncommittedForegroundColor: rgba(0, 188, 242, 0.6);
+    --vscode-gitlens-lineHighlightBackgroundColor: rgba(0, 188, 242, 0.2);
+    --vscode-gitlens-lineHighlightOverviewRulerColor: rgba(0, 188, 242, 0.6);
+    --vscode-gitlens-trailingLineBackgroundColor: rgba(0, 0, 0, 0);
+    --vscode-gitlens-trailingLineForegroundColor: rgba(153, 153, 153, 0.35);
+    --vscode-input-background: #303c41;
+    --vscode-input-border: rgba(255, 255, 255, 0.06);
+    --vscode-input-foreground: #eeffff;
+    --vscode-input-placeholderForeground: rgba(238, 255, 255, 0.38);
+    --vscode-inputOption-activeBorder: #007acc;
+    --vscode-inputValidation-errorBackground: #5a1d1d;
+    --vscode-inputValidation-errorBorder: rgba(255, 83, 112, 0.31);
+    --vscode-inputValidation-infoBackground: #063b49;
+    --vscode-inputValidation-infoBorder: rgba(130, 170, 255, 0.31);
+    --vscode-inputValidation-warningBackground: #352a05;
+    --vscode-inputValidation-warningBorder: rgba(255, 203, 107, 0.31);
+    --vscode-list-activeSelectionBackground: #192227;
+    --vscode-list-activeSelectionForeground: #80cbc4;
+    --vscode-list-dropBackground: rgba(238, 255, 255, 0.13);
+    --vscode-list-errorForeground: #f88070;
+    --vscode-list-focusBackground: rgba(238, 255, 255, 0.13);
+    --vscode-list-focusForeground: #eeffff;
+    --vscode-list-highlightForeground: #80cbc4;
+    --vscode-list-hoverBackground: #192227;
+    --vscode-list-hoverForeground: #ffffff;
+    --vscode-list-inactiveFocusBackground: #313135;
+    --vscode-list-inactiveSelectionBackground: rgba(0, 0, 0, 0.19);
+    --vscode-list-inactiveSelectionForeground: #80cbc4;
+    --vscode-list-invalidItemForeground: #b89500;
+    --vscode-list-warningForeground: #4d9e4d;
+    --vscode-menu-background: #263238;
+    --vscode-menu-foreground: #eeffff;
+    --vscode-menu-selectionBackground: rgba(0, 0, 0, 0.31);
+    --vscode-menu-selectionBorder: rgba(0, 0, 0, 0.19);
+    --vscode-menu-selectionForeground: #80cbc4;
+    --vscode-menu-separatorBackground: #eeffff;
+    --vscode-menubar-selectionBackground: rgba(0, 0, 0, 0.19);
+    --vscode-menubar-selectionBorder: rgba(0, 0, 0, 0.19);
+    --vscode-menubar-selectionForeground: #80cbc4;
+    --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+    --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+    --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+    --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+    --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+    --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+    --vscode-notificationCenterHeader-background: #314149;
+    --vscode-notificationLink-foreground: #80cbc4;
+    --vscode-notifications-background: #263238;
+    --vscode-notifications-border: #314149;
+    --vscode-notifications-foreground: #eeffff;
+    --vscode-panel-background: #192227;
+    --vscode-panel-border: rgba(0, 0, 0, 0.38);
+    --vscode-panel-dropBackground: #eeffff;
+    --vscode-panelTitle-activeBorder: #80cbc4;
+    --vscode-panelTitle-activeForeground: #ffffff;
+    --vscode-panelTitle-inactiveForeground: #eeffff;
+    --vscode-peekView-border: rgba(0, 0, 0, 0.19);
+    --vscode-peekViewEditor-background: rgba(238, 255, 255, 0.02);
+    --vscode-peekViewEditor-matchHighlightBackground: rgba(128, 203, 196, 0.13);
+    --vscode-peekViewEditorGutter-background: rgba(238, 255, 255, 0.02);
+    --vscode-peekViewResult-background: rgba(238, 255, 255, 0.02);
+    --vscode-peekViewResult-fileForeground: #ffffff;
+    --vscode-peekViewResult-lineForeground: #bbbbbb;
+    --vscode-peekViewResult-matchHighlightBackground: rgba(128, 203, 196, 0.13);
+    --vscode-peekViewResult-selectionBackground: rgba(95, 122, 135, 0.44);
+    --vscode-peekViewResult-selectionForeground: #ffffff;
+    --vscode-peekViewTitle-background: rgba(238, 255, 255, 0.02);
+    --vscode-peekViewTitleDescription-foreground: rgba(238, 255, 255, 0.38);
+    --vscode-peekViewTitleLabel-foreground: #ffffff;
+    --vscode-pickerGroup-border: #3f3f46;
+    --vscode-pickerGroup-foreground: #80cbc4;
+    --vscode-progressBar-background: #80cbc4;
+    --vscode-scrollbar-shadow: rgba(38, 50, 56, 0);
+    --vscode-scrollbarSlider-activeBackground: #80cbc4;
+    --vscode-scrollbarSlider-background: rgba(238, 255, 255, 0.13);
+    --vscode-scrollbarSlider-hoverBackground: rgba(238, 255, 255, 0.06);
+    --vscode-selection-background: #eeffff;
+    --vscode-settings-checkboxBackground: #192227;
+    --vscode-settings-checkboxBorder: rgba(255, 255, 255, 0.06);
+    --vscode-settings-checkboxForeground: #eeffff;
+    --vscode-settings-dropdownBackground: #192227;
+    --vscode-settings-dropdownBorder: rgba(255, 255, 255, 0.06);
+    --vscode-settings-dropdownForeground: #eeffff;
+    --vscode-settings-dropdownListBorder: #ff0000;
+    --vscode-settings-headerForeground: #80cbc4;
+    --vscode-settings-modifiedItemIndicator: #80cbc4;
+    --vscode-settings-numberInputBackground: #192227;
+    --vscode-settings-numberInputBorder: rgba(255, 255, 255, 0.06);
+    --vscode-settings-numberInputForeground: #eeffff;
+    --vscode-settings-textInputBackground: #192227;
+    --vscode-settings-textInputBorder: rgba(255, 255, 255, 0.06);
+    --vscode-settings-textInputForeground: #eeffff;
+    --vscode-sideBar-background: #192227;
+    --vscode-sideBar-border: rgba(0, 0, 0, 0.38);
+    --vscode-sideBar-dropBackground: rgba(255, 255, 255, 0.12);
+    --vscode-sideBar-foreground: #5f7a87;
+    --vscode-sideBarSectionHeader-background: #192227;
+    --vscode-sideBarSectionHeader-border: rgba(0, 0, 0, 0.38);
+    --vscode-sideBarSectionHeader-foreground: #5f7a87;
+    --vscode-sideBarTitle-foreground: #eeffff;
+    --vscode-statusBar-background: #192227;
+    --vscode-statusBar-border: rgba(0, 0, 0, 0.38);
+    --vscode-statusBar-debuggingBackground: #c792ea;
+    --vscode-statusBar-debuggingBorder: rgba(0, 0, 0, 0.38);
+    --vscode-statusBar-debuggingForeground: #ffffff;
+    --vscode-statusBar-foreground: #546e7a;
+    --vscode-statusBar-noFolderBackground: #263238;
+    --vscode-statusBar-noFolderBorder: rgba(0, 0, 0, 0.38);
+    --vscode-statusBar-noFolderForeground: #546e7a;
+    --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+    --vscode-statusBarItem-hoverBackground: rgba(84, 110, 122, 0.13);
+    --vscode-statusBarItem-prominentBackground: #388a34;
+    --vscode-statusBarItem-prominentHoverBackground: #369432;
+    --vscode-tab-activeBackground: #263238;
+    --vscode-tab-activeBorder: #80cbc4;
+    --vscode-tab-activeForeground: #ffffff;
+    --vscode-tab-activeModifiedBorder: #5f7a87;
+    --vscode-tab-border: #263238;
+    --vscode-tab-inactiveBackground: #263238;
+    --vscode-tab-inactiveForeground: #5f7a87;
+    --vscode-tab-inactiveModifiedBorder: rgba(95, 122, 135, 0.5);
+    --vscode-tab-unfocusedActiveBorder: #546e7a;
+    --vscode-tab-unfocusedActiveForeground: #eeffff;
+    --vscode-tab-unfocusedActiveModifiedBorder: rgba(95, 122, 135, 0.5);
+    --vscode-tab-unfocusedInactiveForeground: rgba(95, 122, 135, 0.5);
+    --vscode-tab-unfocusedInactiveModifiedBorder: rgba(95, 122, 135, 0.25);
+    --vscode-terminal-ansiBlack: #000000;
+    --vscode-terminal-ansiBlue: #82aaff;
+    --vscode-terminal-ansiBrightBlack: #546e7a;
+    --vscode-terminal-ansiBrightBlue: #82aaff;
+    --vscode-terminal-ansiBrightCyan: #89ddff;
+    --vscode-terminal-ansiBrightGreen: #c3e88d;
+    --vscode-terminal-ansiBrightMagenta: #c792ea;
+    --vscode-terminal-ansiBrightRed: #ff5370;
+    --vscode-terminal-ansiBrightWhite: #ffffff;
+    --vscode-terminal-ansiBrightYellow: #ffcb6b;
+    --vscode-terminal-ansiCyan: #89ddff;
+    --vscode-terminal-ansiGreen: #c3e88d;
+    --vscode-terminal-ansiMagenta: #c792ea;
+    --vscode-terminal-ansiRed: #ff5370;
+    --vscode-terminal-ansiWhite: #ffffff;
+    --vscode-terminal-ansiYellow: #ffcb6b;
+    --vscode-terminal-background: #192227;
+    --vscode-terminal-border: rgba(0, 0, 0, 0.38);
+    --vscode-terminal-foreground: #cccccc;
+    --vscode-terminal-selectionBackground: rgba(255, 255, 255, 0.25);
+    --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+    --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+    --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
+    --vscode-textLink-activeForeground: #eeffff;
+    --vscode-textLink-foreground: #80cbc4;
+    --vscode-textPreformat-foreground: #d7ba7d;
+    --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
+    --vscode-titleBar-activeBackground: #192227;
+    --vscode-titleBar-activeForeground: #eeffff;
+    --vscode-titleBar-border: rgba(0, 0, 0, 0.38);
+    --vscode-titleBar-inactiveBackground: #192227;
+    --vscode-titleBar-inactiveForeground: #5f7a87;
+    --vscode-widget-shadow: rgba(0, 0, 0, 0.19);
+  }
+    
--- a/webview/tsconfig.json
+++ b/webview/tsconfig.json
@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+        "outDir": "./dist/development",
+        "lib": ["es6", "dom"],
+        "module": "commonjs",
+        "target": "es5",
+        "jsx": "react",
+        "allowJs": true,
+		"strictNullChecks": true,
+		"sourceMap": true,
+		"experimentalDecorators": true
+	},
+	"include": [
+		"src/**/*"
+	],
+	"exclude": [
+       "dist",
+       "node_modules"
+    ]
+}
--- a/webview/webpack.config.js
+++ b/webview/webpack.config.js
@@ -0,0 +1,33 @@
+var webpack = require('webpack');
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+var r = file => path.resolve(__dirname, file[0]);
+
+module.exports = {
+	entry: [ r`src/index.tsx` ],
+	output: {
+		path: r`dist`,
+		filename: "[name]-[hash].js",
+		chunkFilename: "[name]-[hash].js"
+	},
+	resolve: {
+		extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
+	},
+	devtool: 'source-map',
+	module: {
+		rules: [
+			{ test: /\.css$/, loader: "style-loader!css-loader" },
+			{ test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" },
+			{ test: /\.(jpe?g|png|gif)$/i, loader: "file-loader" },
+			{ 
+				test: /\.tsx?$/, loader: 'ts-loader',
+				options: { transpileOnly: true }
+			}
+		]
+	},
+	plugins: [
+		// generates an index.html
+		new HtmlWebpackPlugin()
+	]
+};
--- a/webview/yarn.lock
+++ b/webview/yarn.lock