microsoft · DaveVoyles · Aug 19, 2019 · Aug 22, 2019 · Aug 23, 2019 · Aug 23, 2019
diff --git a/extensions/.editorconfig b/extensions/.editorconfig
@@ -1,5 +1,5 @@
 # Default 
-[{.,common,tasks}/**.{ts,json}]
+[{.,common,tasks,tabs}/**.{ts,json,html,css}]
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
@@ -8,7 +8,7 @@ indent_style = space
 indent_size = 4
 
 # package.json typically uses 2 space indents
-[{.,common,tasks}/**/package.json]
+[{.,common,tasks,tabs}/**/package.json]
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
@@ -17,7 +17,7 @@ indent_style = space
 indent_size = 2
 
 # Ignore pattern
-[{.,common,tasks}/**/{node_modules/**,package-lock.json,yarn-lock.json}]
+[{.,common,tasks,tabs}/**/{node_modules/**,package-lock.json,yarn-lock.json}]
 end_of_line = none
 charset = utf-8
 trim_trailing_whitespace = none

diff --git a/extensions/.gitignore b/extensions/.gitignore
@@ -2,6 +2,9 @@
 *.js
 node_modules
 
+#include these script until TypeScript conversion
+!/tabs/scripts/*.js
+
 # Yarn / NPM
 yarn.lock
 package-lock.json

diff --git a/extensions/package.json b/extensions/package.json
@@ -11,7 +11,8 @@
         "lintFix": "npm run lintCommon -- --fix && npm run lintTasks -- --fix && npm run eclintFix",
         "buildCommon": "npm-recursive-install --rootDir=common && tsc -p common && npm pack common/nlu-devops-common/",
         "buildTasks": "npm-recursive-install --rootDir=tasks && tsc -p tasks",
-        "build": "npm run buildCommon && npm run buildTasks",
+        "buildTabs": "npm-recursive-install --rootDir=tabs",
+        "build": "npm run buildCommon && npm run buildTasks && npm run buildTabs",
         "postbuild": "npm run package",
         "package": "tfx extension create --rev-version --manifest-globs",
         "clean": "rimraf ./*.vsix && rimraf ./*.tgz",

diff --git a/extensions/tabs/NLUResults.html b/extensions/tabs/NLUResults.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the MIT License.
+-->
+<html>
+
+<head>
+    <title>Confusion Matrix</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.2.0/json2html.min.js"></script>
+    <script src="../dist/graph.js"></script>
+    <script src="../dist/matrix.js"></script>
+    <script src="../dist/confusion.js"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="matrix.css">
+    <script src="../lib/VSS.SDK.min.js"></script>
+    <script src="../dist/init.js"></script>
+</head>
+
+<body style="overflow: auto">
+    <div class="task-contribution">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-lg-8" id="confusionMatrix">
+                </div>
+                <div class="col-4">
+                    <div id="facets">
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div id="testData" class="col-12">
+                </div>
+            </div>
+            </br>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/extensions/tabs/README.md b/extensions/tabs/README.md
@@ -0,0 +1,50 @@
+### Instructions
+
+1. In a console, run the command: `tsc -w`
+
+    This will run the TypeScript compiler and have it constantly monitor for any changes to the *.tsc* files.
+
+    Any changes made to those will automatically be propogated to the */dist* folder where the `.tsx` files are converted to `.js` and referenced by the `NLUResults.html`.
+
+2. In a console, run the command: `live-server .`
+
+    This will run a dev server from the current location, open a new tab in your browser, and allow you to browse the pages
+
+3. Navigate to `nluresults.html` to view the charts
+
+
+### How to debug in Chrome, real-time
+
+1. Follow the instructions above
+
+2. Create a `launch.json` file, per the instructions in the documentation.
+
+Mine looks like this:
+
+```json 
+{
+    // 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": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080/",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
+
+```
+
+3. Read the **Attach** section of the [Code Debugger for Chrome docs](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) and attach the debugger to Chrome.
+
+3. Press *Debug* or **F5** to begin debugging. A new Chrome window will open. 
+
+4. Set a breakpoint on any of the `.ts` files you are working on
+----------------
+
+**Written by:** Dave Voyles, Sept-12-2019
diff --git a/extensions/tabs/dist/confusion.js.map b/extensions/tabs/dist/confusion.js.map
diff --git a/extensions/tabs/dist/graph.js.map b/extensions/tabs/dist/graph.js.map
diff --git a/extensions/tabs/dist/init.js.map b/extensions/tabs/dist/init.js.map