Display tensorflow vis panel only when used

Author: DonJayamanne

package.json

@@ -184,7 +184,8 @@
                 {
                     "name": "Tensorflow Visualization",
                     "id": "tfjs-vis",
-                    "type": "webview"
+                    "type": "webview",
+                    "when": "node_notebook.tfjs-vis.used && !config.node_notebook.disableTensorflowVis"
                 }
             ]
         },
@@ -232,6 +233,12 @@
                     "description": "Register ts-node that allows importing TypeScript modules without the user having to transpile TypeScript into JavaScript.",
                     "scope": "machine"
                 },
+                "node_notebook.disableTensorflowVis": {
+                    "type": "boolean",
+                    "default": false,
+                    "description": "Disables the Tensorflow Visualization panel (even if @tensorflow/tfjs-vis is used the panel will not be displayed.",
+                    "scope": "machine"
+                },
                 "node_notebook.disablePseudoTerminal": {
                     "type": "boolean",
                     "default": false,

src/client/index.ts

@@ -10,17 +10,13 @@ import { renderHeatmap, renderLayer, valuesDistribution } from './common';
 console.log('Inside VIS');
 const api = acquireVsCodeApi();
 window.addEventListener('message', (e) => onMessage(e.data));
-api.postMessage({ type: 'loaded', data: 'Hi' });
-api.postMessage({ type: 'initialized' });
+api.postMessage({ type: 'loaded' });
 
 function onMessage(data?: { _type?: 'helloWorld' } | TensorFlowVis | any) {
     if (!data || !data.type) {
         return;
     }
     switch (data.type) {
-        case 'helloWorld':
-            api.postMessage({ type: 'helloBack', data: 'Something' });
-            break;
         case 'tensorFlowVis': {
             handleTensorFlowMessage(data);
         }

src/extension/content/provider.ts

@@ -163,7 +163,5 @@ function outputToStorageFormat(output: NotebookCellOutput): CellOutput {
 }
 function storageFormatToOutput(output: CellOutput): NotebookCellOutput {
     const items = output.items.map(storageFormatToOutputItem);
-    return {
-        items
-    };
+    return new NotebookCellOutput(items);
 }

src/extension/tfjsvis/index.ts

@@ -3,21 +3,30 @@ import { TensorFlowVis } from '../server/types';
 import { registerDisposable } from '../utils';
 
 const viewType = 'tfjs-vis';
+function shouldShowPanel(request: TensorFlowVis['request']) {
+    switch (request) {
+        case 'registerfitcallback':
+        case 'fitcallback':
+            return false;
+        default:
+            return true;
+    }
+}
 export class TensorflowVisClient implements WebviewViewProvider {
     private static view?: WebviewView;
     private static cachedMessages: TensorFlowVis[] = [];
+    private static viewVisibilitySet?: boolean;
 
     constructor(private readonly extensionUri: Uri) {}
     public static sendMessage(message: TensorFlowVis) {
         TensorflowVisClient.sendMessageInternal(message);
     }
     private static async sendMessageInternal(message: TensorFlowVis) {
-        if (!TensorflowVisClient.view && message.request === 'show') {
-            await commands.executeCommand(`${viewType}.focus`);
-        } else if (!TensorflowVisClient.view && message.type === 'tensorFlowVis') {
+        if (!TensorflowVisClient.view && shouldShowPanel(message.request)) {
+            void commands.executeCommand('setContext', 'node_notebook.tfjs-vis.used', true);
             await commands.executeCommand(`${viewType}.focus`);
         }
-        if (message.request == 'show' && TensorflowVisClient.view) {
+        if (shouldShowPanel(message.request) && TensorflowVisClient.view) {
             if (!TensorflowVisClient.view.visible) {
                 TensorflowVisClient.view.show(true);
             }
@@ -27,15 +36,15 @@ export class TensorflowVisClient implements WebviewViewProvider {
         TensorflowVisClient.sendMessages();
     }
     private static sendMessages() {
-        if (!TensorflowVisClient.view) {
+        if (!TensorflowVisClient.view || !TensorflowVisClient.viewVisibilitySet) {
             return;
         }
         while (TensorflowVisClient.cachedMessages.length) {
             const message = TensorflowVisClient.cachedMessages.shift();
             if (!message) {
                 continue;
             }
-            if (message.request == 'show') {
+            if (shouldShowPanel(message.request)) {
                 if (!TensorflowVisClient.view.visible) {
                     TensorflowVisClient.view.show(true);
                 }
@@ -66,17 +75,10 @@ export class TensorflowVisClient implements WebviewViewProvider {
 
         webviewView.webview.onDidReceiveMessage((data) => {
             switch (data.type) {
-                case 'helloBack': {
-                    window.showInformationMessage(data.data);
-                    break;
-                }
-                case 'initialized': {
-                    window.showInformationMessage(data.data);
+                case 'loaded': {
+                    TensorflowVisClient.viewVisibilitySet = true;
                     TensorflowVisClient.sendMessages();
-                    break;
-                }
-                case 'clicked': {
-                    window.showInformationMessage(data.data);
+
                     break;
                 }
                 case 'tensorFlowVis': {