Fixed supporting running TFMA UI outside of notebooks by loading vulcanized_tfma.js from the Webpack public path when defined.

PiperOrigin-RevId: 369895211

Author: tf-model-analysis-team

RELEASE.md

@@ -54,6 +54,7 @@
     *   metrics_plots_and_validations_writer was failing while writing cross
         slice comparison results to metrics file.
     *   Fairness widget view was not compatible with cross slicing key type.
+*   Fix support for exporting the UI from a notebook to a standalone HTML page.
 *   Depends on `absl-py>=0.9,<0.13`.
 *   Depends on `tensorflow-metadata>=0.29.0,<0.30.0`.
 *   Depends on `tfx-bsl>=0.29.0,<0.30.0`.

tensorflow_model_analysis/notebook/jupyter/js/lib/labplugin.js

@@ -20,6 +20,8 @@ module.exports = {
   id: 'tensorflow_model_analysis',
   requires: [base.IJupyterWidgetRegistry],
   activate: function(app, widgets) {
+    // Set a global variable to mark plugin as being run within Jupyter Lab.
+    window['isJupyterLab'] = true;
     widgets.registerWidget({
       name: 'tensorflow_model_analysis',
       version: plugin.version,

tensorflow_model_analysis/notebook/jupyter/js/lib/widget.js

@@ -21,9 +21,23 @@ const version = require('../package.json').version;
  * Helper method to load the vulcanized templates.
  */
 function loadVulcanizedTemplate() {
-  const templateLocation =
-      (document.querySelector('body').getAttribute('data-base-url') || '/') +
-      'nbextensions/tensorflow_model_analysis/vulcanized_tfma.js';
+  let templatePath;
+  const dataBaseUrl =
+      document.querySelector('body').getAttribute('data-base-url');
+  // Jupyter Classic
+  if (dataBaseUrl) {
+    templatePath = dataBaseUrl + 'nbextensions/tensorflow_model_analysis/';
+  }
+  // Jupyter Lab
+  else if (window['isJupyterLab']) {
+    templatePath = '/nbextensions/tensorflow_model_analysis/';
+  }
+  // Kubeflow
+  else {
+    templatePath = __webpack_public_path__;
+  }
+  // templatePath ends with a slash.
+  const templateLocation = `${templatePath}vulcanized_tfma.js`;
 
   // If the vulcanizes tempalets are not loaded yet, load it now.
   if (!document.querySelector('script[src="' + templateLocation + '"]')) {

tensorflow_model_analysis/static/extension.js

@@ -1,18 +1,3 @@
-/**
- * Copyright 2018 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 define(function() { return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -105,7 +90,8 @@ if (window.require) {
   window.require.config({
     map: {
       '*': {
-        'tensorflow_model_analysis': 'nbextensions/tensorflow_model_analysis/index',
+        'tensorflow_model_analysis':
+            'nbextensions/tensorflow_model_analysis/index',
       }
     }
   });
@@ -118,4 +104,4 @@ module.exports = {
 
 
 /***/ })
-/******/ ])});;
+/******/ ])});;