Enable WIT usage in JupyterLab/Cloud AI Platform notebooks (#2301)

Update WitWidget packaging/logic to enable it to work in JupyterLab notebooks, which handle extensions like WitWidget differently than standard Jupyter notebooks. This also enables use in Cloud AI Platform notebooks.

Author: jameswex

tensorboard/plugins/interactive_inference/README.md

@@ -312,7 +312,19 @@ containing:
 ```
 !pip install witwidget
 ```
-For TensorFlow GPU support, use the witwidget-gpu package instead of witwidget.
+For TensorFlow GPU support, use the `witwidget-gpu` package instead of `witwidget`.
 
 Then, use it as seen at the bottom of the
 [What_If_Tool_Notebook_Usage.ipynb notebook](https://colab.research.google.com/github/tensorflow/tensorboard/blob/master/tensorboard/plugins/interactive_inference/What_If_Tool_Notebook_Usage.ipynb).
+
+### How do I enable it for use in a JupyterLab or Cloud AI Platform notebook?
+Install and enable WIT for JupyterLab by running a cell containing:
+```
+!pip install witwidget
+!jupyter labextension install wit-widget
+!jupyter labextension install @jupyter-widgets/jupyterlab-manager
+```
+For TensorFlow GPU support, use the `witwidget-gpu` package instead of `witwidget`.
+Note that you may need to run `!sudo jupyter labextension ...` commands depending on your notebook setup.
+
+Use of WIT after installation is the same as with the other notebook installations.

tensorboard/plugins/interactive_inference/witwidget/notebook/jupyter/js/README.md

@@ -0,0 +1,5 @@
+# wit-widget: What-If Tool JupyterLab extension
+
+This npm package is for using the [What-If Tool](https://pair-code.github.io/what-if-tool/) as a JupyterLab extension.
+
+For more information, see the [What-If Tool documentation](https://github.com/tensorflow/tensorboard/blob/master/tensorboard/plugins/interactive_inference/README.md).

tensorboard/plugins/interactive_inference/witwidget/notebook/jupyter/js/lib/index.js

@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-window.__webpack_public_path__ =
+window.__nbextension_path__ =
   document.querySelector('body').getAttribute('data-base-url') +
   'nbextensions/wit-widget/';
 

tensorboard/plugins/interactive_inference/witwidget/notebook/jupyter/js/lib/wit.js

@@ -13,6 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
+var witHtmlLocation = require('file-loader!./wit_jupyter.html');
 var widgets = require('@jupyter-widgets/base');
 
 // What-If Tool View. Renders the tool and provides communication with the
@@ -40,9 +41,14 @@ var WITView = widgets.DOMWidgetView.extend({
     const height = parseInt(
       this.model.attributes.layout.attributes.height, 10) - 20;
     const iframe = document.createElement('iframe');
-    const templateLocation =
-      window.__webpack_public_path__ + 'wit_jupyter.html';
-    const src = `<link rel="import" href="${templateLocation}">
+
+    // Adjust WIT html location if running in a jupyter notebook
+    // and not in jupyterlab.
+    if (document.body.getAttribute('data-base-url') != null) {
+      witHtmlLocation = window.__nbextension_path__ + 'wit_jupyter.html';
+    }
+
+    const src = `<link rel="import" href="${witHtmlLocation}">
     <tf-interactive-inference-dashboard local id="wit"></tf-interactive-inference-dashboard>
     <script>
       const wit = document.getElementById('wit');

tensorboard/plugins/interactive_inference/witwidget/notebook/jupyter/js/package.json

@@ -2,12 +2,10 @@
   "name": "wit-widget",
   "description": "What-If Tool jupyter widget",
   "author": "Google LLC",
-  "main": "lib/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tensorflow/tensorboard.git"
-  },
-  "private": true,
+  "main": "dist/index.js",
+  "version": "1.1.0",
+  "license" : "Apache 2.0",
+  "homepage": "https://github.com/tensorflow/tensorboard/tree/master/tensorboard/plugins/interactive_inference",
   "keywords": [
     "jupyter",
     "widgets",
@@ -16,19 +14,21 @@
     "jupyterlab-extension"
   ],
   "files": [
-    "lib/**/*.js",
-    "dist/*.js"
+    "dist/*",
+    "lib/*"
   ],
   "scripts": {
     "build": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "webpack": "^3.5.5",
-    "rimraf": "^2.6.1"
+    "file-loader": "^3.0.1",
+    "rimraf": "^2.6.1",
+    "webpack": "^3.5.5"
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^1.0.0"
+    "@jupyter-widgets/base": "^1.0.0",
+    "@jupyter-widgets/jupyterlab-manager": "^0.38.1"
   },
   "jupyterlab": {
     "extension": "lib/labplugin"

tensorboard/plugins/interactive_inference/witwidget/notebook/jupyter/js/webpack.config.js

@@ -19,7 +19,8 @@ var version = require('./package.json').version;
 // Custom webpack rules are generally the same for all webpack bundles, hence
 // stored in a separate local variable.
 var rules = [
-    { test: /\.css$/, use: ['style-loader', 'css-loader']}
+    { test: /\.css$/, use: ['style-loader', 'css-loader']},
+    { test: /\.(html)$/, use: [{loader: 'file-loader', options: {}}]},
 ]
 
 

tensorboard/plugins/interactive_inference/witwidget/pip_package/RELEASE.md

@@ -1,7 +1,12 @@
-# To release a new version of witwidget on PyPI:
+# To release a new version of witwidget on PyPI and NPM:
 
-1. Update tensorboard/plugins/interactive_inference/witwidget/version.py (set release version, remove 'dev')
-2. `bazel run tensorboard/plugins/interactive_inference/witwidget/pip_package:build_pip_package`
-3. Upload the whl files created by the previous step to PyPI as per instructions
+1. Ensure updated version numbers have been merged to the master branch in
+tensorboard/plugins/interactive_inference/witwidget/version.py
+and tensorboard/plugins/interactive_inference/witwidget/notebook/jupyter/js/package.json
+2. Clone this repository and checkout the commit that set the new version numbers.
+3. `bazel run tensorboard/plugins/interactive_inference/witwidget/pip_package:build_pip_package`
+4. Upload the whl files created by the previous step to PyPI as per instructions
 at https://packaging.python.org/tutorials/packaging-projects/#uploading-the-distribution-archives.
-4. Commit the version.py change.
+5. Publish the new NPM package through running `npm publish` in the `js/` subdirectory of the package
+files generated during the build step.
+

tensorboard/plugins/interactive_inference/witwidget/pip_package/build_pip_package.sh

@@ -40,6 +40,7 @@ mkdir -p js
 pushd js
 
 cp -LR "$plugin_runfile_dir"/witwidget/notebook/jupyter/js/* .
+cp "$plugin_runfile_dir/tf_interactive_inference_dashboard/wit_jupyter.html" lib/
 
 # Install Node dependencies
 npm install