profile: disable dashboard inside Colab

tensorboard/plugins/profile/tf_profile_dashboard/tf-profile-dashboard.html

@@ -43,13 +43,23 @@
 
 <dom-module id="tf-profile-dashboard">
 <template>
-<template is="dom-if" if="[[_isNotComplete(progress)]]">
+<template is="dom-if" if="[[_isState(_topLevelState, 'IN_COLAB')]]">
+  <div style="max-width: 540px; margin: 80px auto 0 auto;">
+    <h3>Profiling isn’t supported in Colab yet.</h3>
+    <p>
+      Please see
+      <a href="https://github.com/tensorflow/tensorboard/issues/1913">GitHub issue #1913</a>
+      for more information.
+    </p>
+  </div>
+</template>
+<template is="dom-if" if="[[_isState(_topLevelState, 'LOADING')]]">
   <div id="progress-bar">
     <div id="progress-msg">[[progress.msg]]</div>
     <paper-progress value="[[progress.value]]"></paper-progress>
   </div>
 </template>
-<template is="dom-if" if="[[_dataNotFound]]">
+<template is="dom-if" if="[[_isState(_topLevelState, 'DATA_NOT_FOUND')]]">
   <div style="max-width: 540px; margin: 80px auto 0 auto;">
     <h3>No profile data was found.</h3>
     <p>To collect a profile, you need to run your model on Google Cloud TPUs and
@@ -73,7 +83,7 @@ <h3>No profile data was found.</h3>
     and consider filing an issue on GitHub.</p>
   </div>
 </template>
-<template is="dom-if" if="[[!_dataNotFound]]">
+<template is="dom-if" if="[[_isState(_topLevelState, 'ACTIVE')]]">
   <tf-dashboard-layout>
   <div class="sidebar">
     <div class="allcontrols">
@@ -209,6 +219,35 @@ <h3>No profile data was found.</h3>
 <script>
   "use strict";
 
+  /**
+   * The main state of the profile dashboard (as distinct from any
+   * subtool states).
+   *
+   * @enum {string}
+   */
+  const TopLevelState = {
+    /**
+     * Indicates that we are in a Colab notebook environment. The
+     * profile dashboard does not work well in Colab; the trace viewer
+     * does not work at all. If in Colab, we'll show only an explanatory
+     * message.
+     */
+    "IN_COLAB": "IN_COLAB",
+    /**
+     * Indicates that there are no runs with profile data.
+     */
+    "DATA_NOT_FOUND": "DATA_NOT_FOUND",
+    /**
+     * Indicates that we're loading data. This may be the case on the
+     * initial load or when the user switches tools.
+     */
+    "LOADING": "LOADING",
+    /**
+     * Indicates that a tool is active (data has finished loading).
+     */
+    "ACTIVE": "ACTIVE",
+  };
+
   Polymer({
     is: "tf-profile-dashboard",
     properties: {
@@ -235,6 +274,17 @@ <h3>No profile data was found.</h3>
         type: Array,
         observer: '_activeHostsChanged'
       },
+      _inColab: {
+        type: Boolean,
+        value: () => !!(window.TENSORBOARD_ENV || {}).IN_COLAB,
+        readOnly: true,
+      },
+      /** @type {TopLevelState} */
+      _topLevelState: {
+        type: String,
+        computed: '_computeTopLevelState(_inColab, _dataNotFound, progress)',
+        readOnly: true,
+      },
       /**
        * @type {{value: number, msg: string}}
        *
@@ -327,10 +377,6 @@ <h3>No profile data was found.</h3>
     detached: function() {
       this.set('_isAttached', false);
     },
-    /** True if the progress is not complete yet (< 100 %). */
-    _isNotComplete: function(progress) {
-      return !this._dataNotFound && progress.value < 100;
-    },
     _maybeInitializeDashboard: function(isAttached) {
       if (this._initialized || !isAttached) {
         // Either this dashboard is already initialized ... or we are not yet
@@ -534,6 +580,24 @@ <h3>No profile data was found.</h3>
       // Otherwise, remove the seperator, e.g. "host1_" => "host1".
       return host.slice(0, -1);
     },
+    _computeTopLevelState: function(inColab, dataNotFound, progress) {
+      if (inColab)
+        return "IN_COLAB";
+      if (dataNotFound)
+        return "DATA_NOT_FOUND";
+      if (!progress || progress.value < 100)
+        return "LOADING";
+      return "ACTIVE";
+    },
+    /**
+     * Check whether the two given states are equal.
+     *
+     * @param {TopLevelState} topLevelState
+     * @param {TopLevelState} candidateState
+     */
+    _isState: function(actualState, candidateState) {
+      return actualState === candidateState;
+    },
   });
 
   tf_tensorboard.registerDashboard({