[Debugger Plugin]: Add spinners for the debugger page (#792)

The spinners are activated during rendering of the node list and the
graph, as well as the TF runtime execution time following the
stepping/continuing actions.

Author: caisq

tensorboard/plugins/debugger/tf_debugger_dashboard/BUILD

@@ -45,6 +45,7 @@ ts_web_library(
         "@org_polymer_paper_input",
         "@org_polymer_paper_item",
         "@org_polymer_paper_menu",
+        "@org_polymer_paper_progress",
         "@org_polymer_paper_slider",
         "@org_polymer_paper_spinner",
         "@org_polymer_paper_styles",

tensorboard/plugins/debugger/tf_debugger_dashboard/tf-debugger-dashboard.html

@@ -22,6 +22,8 @@
 <link rel="import" href="../paper-input/paper-textarea.html">
 <link rel="import" href="../paper-item/paper-item.html">
 <link rel="import" href="../paper-menu/paper-menu.html">
+<link rel="import" href="../paper-progress/paper-progress.html">
+<link rel="import" href="../paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="../paper-toast/paper-toast.html">
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../tf-backend/tf-backend.html">
@@ -99,7 +101,7 @@ <h2>Continue...</h2>
               out-graph-hierarchy="{{graphHierarchy}}"
               out-graph="{{graph}}"
               out-stats="{{stats}}"
-              progress="{{_progress}}"
+              progress="{{_graphProgress}}"
           ></tf-graph-loader>
         </div>
       </div>
@@ -124,18 +126,15 @@ <h2>Continue...</h2>
               </template>
             </paper-menu>
           </paper-dropdown-menu>
+          <paper-spinner-lite class="spinner" id="top-right-spinner"></paper-spinner-lite>
+          <paper-progress id="top-right-progress-bar" value="0"></paper-progress>
           <template is="dom-if" if="[[_isTopRightRuntimeGraphsActive]]">
-            <div id="graph-header">
-              <span id="runtime-graph-label">
-                Runtime Graphs
-              </span>
-            </div>
             <div id="graph-container">
               <tf-graph id="graph"
                   graph-hierarchy="[[graphHierarchy]]"
                   basic-graph="[[graph]]"
                   stats="[[stats]]"
-                  progress="[[_progress]]"
+                  progress="{{_graphProgress}}"
                   color-by="structure"
                   color-by-params="{{colorByParams}}"
                   render-hierarchy="{{_renderHierarchy}}"
@@ -209,6 +208,11 @@ <h2>Continue...</h2>
         width: 350px;
         display: inline-block;
       }
+      #top-right-progress-bar {
+        width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+      }
       .line-item {
         display: block;
         padding-top: 5px;
@@ -230,6 +234,11 @@ <h2>Continue...</h2>
         min-width: 150px;
         border: 1px solid #d4d4d4;
       }
+      .spinner {
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
+      }
       .node-entries {
         height: 66%;
         overflow: auto;
@@ -390,6 +399,10 @@ <h2>Continue...</h2>
           value: -1,
         },
 
+        _graphProgress: {
+          type: Object,
+        },
+
         _requestManager: {
            type: Object,
            value: () => new tf_backend.RequestManager(50),
@@ -398,6 +411,7 @@ <h2>Continue...</h2>
 
       observers: [
         "_onActiveRuntimeGraphDeviceNameChange(_activeRuntimeGraphDeviceName)",
+        "_graphProgressUpdated(_graphProgress)",
       ],
 
       ready() {
@@ -484,6 +498,7 @@ <h2>Continue...</h2>
 
             this._maybeUpdateTensorValueViews(
                 tensorName, responseData['debug_op']);
+            this._setTopRightSpinnerState(false);
           } else {
             console.error(
                 'Invalid long-polling response type: ', responseType);
@@ -733,6 +748,7 @@ <h2>Continue...</h2>
         if (this._activeSessionRunKey == null) {
           return;
         }
+        this._setTopRightSpinnerState(true);
 
         // First, check to see if any new device GraphDef(s) have arrived and if
         // so, retrieve them.
@@ -787,6 +803,7 @@ <h2>Continue...</h2>
         this._continueToType = '';
         this._continueToTarget = '';
         this._continueToCounterTarget = -1;
+        this._setTopRightSpinnerState(false);
       },
 
       _topRightSelectedChanged(topRightSelected) {
@@ -835,6 +852,28 @@ <h2>Continue...</h2>
           console.log('Breakpoint set_state response: ', response);
         });
       },
+
+      _graphProgressUpdated(progress) {
+        const topRightProgressBar = this.$$('#top-right-progress-bar');
+        if (this._latestSessionRun == null) {
+          // No Session.run() has connected yet. Do not show the spinner(s) or
+          // the progress bar(s).
+          topRightProgressBar.setAttribute('value', 0);
+          this._setTopRightSpinnerState(false);
+        } else {
+          topRightProgressBar.setAttribute('value', progress.value);
+          this._setTopRightSpinnerState(progress.value < 100);
+        }
+      },
+
+      _setTopRightSpinnerState(isActive) {
+        const topRightSpinner = this.$$('#top-right-spinner');
+        if (isActive) {
+          topRightSpinner.setAttribute('active', true);
+        } else {
+          topRightSpinner.removeAttribute('active');
+        }
+      }
     });
 
     tf_tensorboard.registerDashboard({

tensorboard/plugins/debugger/tf_debugger_dashboard/tf-op-selector.html

@@ -20,6 +20,7 @@
 <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../paper-input/paper-input.html">
+<link rel="import" href="../paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../tf-imports/lodash.html">
 
@@ -47,6 +48,12 @@
         value="{{_filterInput}}"
       ></paper-input>
     </div>
+    <paper-spinner-lite
+      active
+      class="spinner"
+      id="loading-spinner"
+      hidden="[[!_isLoading]]">
+    </paper-spinner-lite>
     <div id="selector-hierarchy">
     </div>
     <style>
@@ -95,6 +102,12 @@
         padding: 10px 0;
       }
 
+      :host .spinner {
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
+      }
+
       :host #filter-mode {
         width: 100px;
         display: inline-block;
@@ -167,9 +180,14 @@
         value: '',
         notify: true,
       },
+
+      _isLoading: {
+        type: Boolean,
+        value: false,
+      },
     },
     observers: [
-      "_renderHierarchy(_watchHierarchy, debugWatchChange)",
+      "_renderHierarchyWithTimeout(_watchHierarchy, debugWatchChange)",
       "_handleForceNodeExpansion(forceExpansionNodeName)",
     ],
     _computeWatchHierarchy(debugWatches, debugWatchChange, filterMode, filterInput) {
@@ -218,10 +236,17 @@
       }
     },
 
+    _renderHierarchyWithTimeout(watchHierarchy, debugWatchChange, filterMode, filterInput) {
+      this._clearSelectorHierarchy();
+      this.set('_isLoading', true);
+      setTimeout(() => {
+        this._renderHierarchy(watchHierarchy, debugWatchChange, filterMode, filterInput);
+      }, 10);
+    },
+
     _renderHierarchy(watchHierarchy, debugWatchChange, filterMode, filterInput) {
       this.set('_levelName2Container', {});
       this.set('_levelName2Node', {});
-      this._clearSelectorHierarchy();
 
       const dom = this._renderLevel(null, null, watchHierarchy, debugWatchChange);
 
@@ -255,6 +280,7 @@
 
       // Append the hierarchy to the DOM.
       Polymer.dom(this.$$('#selector-hierarchy')).appendChild(dom);
+      this.set('_isLoading', false);
     },
 
     _renderLevel(levelName, parentLevelName, levelObject, debugWatchChange) {