profile: disable dashboard inside Colab (tensorflow#1914)

Summary:
The profile dashboard now shows a “disabled” message on the frontend
when we detect that we’re running in a Colab notebook. See tensorflow#1913.

This commit does _not_ cause the profile dashboard to be marked inactive
by the main TensorBoard UI. We might want to do that, but it’s less
straightforward: currently, the backend is responsible for telling the
frontend which plugins are active, and the backend can’t know whether
we’re running in Colab. As a quick hack, we could add special-case logic
in `tf-tensorboard.html` to check for the profile plugin specifically.
As a longer-term solution, we could let the `tf_tensorboard.Dashboard`
interface specify an `isActive` callback, defaulting to `() => true`.

![Screenshot of the “Profiling isn’t yet supported in Colab” message][s]

[s]: https://user-images.githubusercontent.com/4317806/53541886-b83b1880-3ad0-11e9-9501-299f5e671d7a.png

The implementation includes a small refactor to the profile dashboard to
make it easier to introduce a new state.

Test Plan:
Evaluate `!!(window.TENSORBOARD_ENV || {}).IN_COLAB` in both standalone
TensorBoard and Colab `%tensorboard`, and note that each evaluates to
the appropriate boolean.

Run TensorBoard locally with the profile plugin’s demo data, and note
that its behavior is unchanged. To trigger the loading state, it
suffices to load the dashboard, then throttle your network to “Slow 3G”,
then change the selected tool. To trigger the “no data” state, relaunch
TensorBoard pointing at a different log directory.

Then, test the Colab behavior by either pointing TensorBoard at a log
directory that does not contain profile data, then executing

```js
window.TENSORBOARD_ENV = window.TENSORBOARD_ENV || {};
window.TENSORBOARD_ENV["IN_COLAB"] = true;
```

in the main TensorBoard pane before switching to the inactive profile
dashboard. Note that this is the same setup JavaScript as is injected
into the Colab output frame by `notebook.py`.

wchargin-branch: profile-disable-colab

Author: wchargin

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({