Improve the scalar chart user experience

Summary:
This fixes a number of issues with the scalar charts, some of which are
interdependent, and all of which are existing issues made more visible
by the presence of a search pane.

In particular:

 1. If a chart's `run` and `tag` properties are changed simultaneously,
    two updates will be triggered, and the first update will see the
    data in an inconsistent state (e.g., Tag B but still Run A). We fix
    the resulting issues by making observer updates asynchronous, so
    that they only actually take effect once all changes have flushed.
    (This fixes #169.)

 2. To reduce latency due to the above solution, we further debounce
    these update handlers.

 3. Because the handlers are asynchronous and debounced, we need to
    maintain stronger invariants on the caching keys. (In particular, if
    a chart changes from Tag A to Tag B and then to Tag C, we don't want
    the network requests for Tag B to fill the runs-loaded cache and
    then have Tag C forgo its fetches.)

 4. Furthermore, when the tag of a chart is changed, we display a
    loading indicator. This is to prevent problems in the scenario where
    many charts change from one tag to another: in this case, all the
    charts' titles will update immediately (they're just bound to text
    nodes in the DOM), but charts' data will take a while to update; the
    result is that there are many charts with titles that simply do not
    match their data, which is at best very confusing. The loading
    indicator makes it clear that the data is stale.

 5. When a chart's tag is changed, we now reset the domain of the chart
    once all the data has loaded. (This fixes #164.)

 6. Finally, we offer a button to manually reset the domain of the
    chart. (This is often useful when changing the set of selected
    runs: after adding a new run, you may need to expand the domain, but
    we don't do this automatically because you may often want to keep
    your old domain.)

Issues (1), (4), and (5) arise frequently when changing a search query,
as this causes many charts to change their tag and runs.

Issues (1), (2), and (4) apply to other dashboards as well, but have not
been fixed. (Issue (3) would apply to other dashboards that display one
visualization per tag instead of per run-tag combination, but there are
no such dashboards.)

Test Plan:
Cherry-pick #173 before proceeding. (Without a search feature, the
effects of this change are minimal---but I want to merge this change
before I merge the search feature!)

Launch TensorBoard with a few dozen scalar tags. Suppose without loss of
generality that the name of the fifth tag displayed in the search
results pane (on query `.*`) is `foo`. Set the search query to
`(?!foo)`; this should still match all tags. Now, add a caret at the
beginning to search for `^(?!foo)`. Charts past the fifth one should
reload. Check that the reloading behavior is pleasant.

Then, zoom into some charts, manipulating their windows. Click the
"reload" button, or wait 30 seconds, and ensure that the window is
preserved. Change the search query, though, and the windows should be
reset to show all the data.

wchargin-branch: improve-scalars-ux

Author: wchargin

tensorboard/plugins/scalar/tf_scalar_dashboard/BUILD

@@ -33,6 +33,7 @@ ts_web_library(
         "@org_polymer_paper_item",
         "@org_polymer_paper_menu",
         "@org_polymer_paper_slider",
+        "@org_polymer_paper_spinner",
         "@org_polymer_paper_styles",
     ],
 )

tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-chart.html

@@ -19,6 +19,7 @@
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../paper-item/paper-item.html">
 <link rel="import" href="../paper-menu/paper-menu.html">
+<link rel="import" href="../paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../tf-backend/tf-backend.html">
 <link rel="import" href="../tf-card-heading/tf-card-heading.html">
@@ -32,14 +33,22 @@
 <dom-module id="tf-scalar-chart">
   <template>
     <tf-card-heading title="[[tag]]"></tf-card-heading>
-    <vz-line-chart
-      x-type="[[xType]]"
-      color-scale="[[_runsColorScale]]"
-      smoothing-enabled="[[smoothingEnabled]]"
-      smoothing-weight="[[smoothingWeight]]"
-      tooltip-sorting-method="[[tooltipSortingMethod]]"
-      ignore-y-outliers="[[ignoreYOutliers]]"
-    ></vz-line-chart>
+    <div id="chart-and-spinner-container">
+      <vz-line-chart
+        x-type="[[xType]]"
+        color-scale="[[_runsColorScale]]"
+        smoothing-enabled="[[smoothingEnabled]]"
+        smoothing-weight="[[smoothingWeight]]"
+        tooltip-sorting-method="[[tooltipSortingMethod]]"
+        ignore-y-outliers="[[ignoreYOutliers]]"
+        style="[[_computeLineChartStyle(_loading)]]"
+      ></vz-line-chart>
+      <template is="dom-if" if="[[_loading]]">
+        <div id="loading-spinner-container">
+          <paper-spinner-lite active></paper-spinner-lite>
+        </div>
+      </template>
+    </div>
     <div style="display: flex; flex-direction: row;">
       <paper-icon-button
         selected$="[[_expanded]]"
@@ -52,6 +61,11 @@
         on-tap="_toggleLogScale"
         title="Toggle y-axis log scale"
       ></paper-icon-button>
+      <paper-icon-button
+        icon="settings-overscan"
+        on-tap="_resetDomain"
+        title="Fit domain to data"
+      ></paper-icon-button>
       <span style="flex-grow: 1"></span>
       <template is="dom-if" if="[[showDownloadLinks]]">
         <div class="download-links">
@@ -89,6 +103,23 @@
         height: 400px;
         width: 100%;
       }
+      #chart-and-spinner-container {
+        display: flex;
+        flex-grow: 1;
+        position: relative;
+      }
+      #loading-spinner-container {
+        align-items: center;
+        bottom: 0;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
       vz-line-chart {
         -webkit-user-select: none;
         -moz-user-select: none;
@@ -167,6 +198,16 @@
           value: () => ({scale: runsColorScale}),
         },
 
+        _loading: {
+          type: Boolean,
+          value: false,
+        },
+
+        _resetDomainOnNextLoad: {
+          type: Boolean,
+          value: true,
+        },
+
         _canceller: {
           type: Object,
           value: () => new Canceller(),
@@ -199,9 +240,13 @@
         },
       },
       observers: [
-        'reload(tag)',
-        '_changeSeries(runs.*)'
+        '_tagChanged(_attached, tag)',
+        '_runsChanged(_attached, runs.*)'
       ],
+      created() {
+        this._loadData = _.debounce(
+          this._loadData, 100, {leading: true, trailing: true});
+      },
       attached() {
         this._attached = true;
         this._changeSeries();
@@ -210,33 +255,72 @@
         this._loadedRuns = {};
         this._loadData();
       },
-      _loadData() {
-        if (!this._attached) {
+      _tagChanged(attached, tagUpdateRecord) {
+        this._loadedRuns = {};
+        this._resetDomainOnNextLoad = true;
+        this._loadData();
+      },
+      _runsChanged(attached, runsUpdateRecord) {
+        if (!attached) {
           return;
         }
-        //
-        // Before updating, cancel any network-pending updates, to
-        // prevent race conditions where older data stomps newer data.
-        this._canceller.cancelAll();
-        this.runs.forEach(run => {
-          if (this._loadedRuns[run]) {
+        this.$$('vz-line-chart').setVisibleSeries(this.runs);
+        this._loadData();
+      },
+      _loadData() {
+        this.async(() => {
+          if (!this._attached) {
             return;
           }
-          this._loadedRuns[run] = true;
-          const url = this._scalarUrl(this.tag, run);
-          const updateSeries = this._canceller.cancellable(result => {
-            if (result.cancelled) {
-              return;
+          this._loading = true;
+          //
+          // Before updating, cancel any network-pending updates, to
+          // prevent race conditions where older data stomps newer data.
+          this._canceller.cancelAll();
+          const tag = this.tag;
+          const runPromises = this.runs.map(run => {
+            if (this._loadedRuns[run]) {
+              return Promise.resolve();
+            }
+            const url = this._scalarUrl(tag, run);
+            const updateSeries = this._canceller.cancellable(result => {
+              if (result.cancelled) {
+                return;
+              }
+              const data = result.value;
+              const formattedData = data.map(datum => ({
+                wall_time: new Date(datum[0] * 1000),
+                step: datum[1],
+                scalar: datum[2],
+              }));
+              if (tag === this.tag) {
+                // Only update the runs cache for the current tag. If we
+                // load data for Tag A, then the tag changes to Tag B
+                // while requests are still in flight, these requests
+                // should not poison the cache.
+                this._loadedRuns[run] = true;
+              }
+              this.$$('vz-line-chart').setSeriesData(run, formattedData);
+            });
+            return this.requestManager.request(url).then(updateSeries);
+          });
+          const finish = this._canceller.cancellable(result => {
+            if (!result.cancelled) {
+              this._loading = false;
+              const chart = this.$$('vz-line-chart');
+              if (runPromises.length > 0 && this._resetDomainOnNextLoad) {
+                // (Don't unset _resetDomainOnNextLoad when we didn't
+                // load any runs: this has the effect that if all our
+                // runs are deselected, then we toggle them all on, we
+                // properly size the domain once all the data is loaded
+                // instead of just when we're first rendered.)
+                this._resetDomainOnNextLoad = false;
+                chart.resetDomain();
+              }
+              chart.redraw();
             }
-            const data = result.value;
-            const formattedData = data.map(datum => ({
-              wall_time: new Date(datum[0] * 1000),
-              step: datum[1],
-              scalar: datum[2],
-            }));
-            this.$$('vz-line-chart').setSeriesData(run, formattedData);
           });
-          this.requestManager.request(url).then(updateSeries);
+          return Promise.all(runPromises).then(finish);
         });
       },
       _changeSeries() {
@@ -261,6 +345,17 @@
         this.redraw();
       },
 
+      _computeLineChartStyle(loading) {
+        return loading ? 'opacity: 0.3;' : '';
+      },
+
+      _resetDomain() {
+        const chart = this.$$('vz-line-chart');
+        if (chart) {
+          chart.resetDomain();
+        }
+      },
+
       _csvUrl(run) {
         return this._scalarUrl(this.tag, run) + '&format=csv';
       },

tensorboard/plugins/scalar/vz_line_chart/vz-line-chart.ts

@@ -167,11 +167,22 @@ Polymer({
     }
   },
 
+  /**
+   * Reset the chart domain to fit its data.
+   */
+  resetDomain: function() {
+    if (this._chart) {
+      this._chart.resetDomain();
+    }
+  },
+
   /**
    * Re-renders the chart. Useful if e.g. the container size changed.
    */
   redraw: function() {
-    this._chart.redraw();
+    if (this._chart) {
+      this._chart.redraw();
+    }
   },
   attached: function() {
     this._attached = true;
@@ -449,6 +460,20 @@ class LineChart {
     this.nanDataset.data(nanData);
   }
 
+  public resetDomain() {
+    this.resetXDomain();
+    this.resetYDomain();
+  }
+
+  private resetXDomain() {
+    // (Copied from DragZoomLayer.unzoom.)
+    const xScale = this.xScale as any;
+    xScale._domainMin = null;
+    xScale._domainMax = null;
+    const xDomain = xScale._getExtent();
+    this.xScale.domain(xDomain);
+  }
+
   private resetYDomain() {
     const accessor = this.getAccessor();
     let datasetToValues: (d: Plottable.Dataset) => number[] = (d) => {