BUG: Fixed chart rendering issues

tensorboard/components/tf_line_chart_data_loader/data-loader-behavior.ts

@@ -117,8 +117,9 @@ export const DataLoaderBehavior = {
 
   _loadDataImpl() {
     this.cancelAsync(this._loadDataAsync);
+
+    if (!this.isAttached) return;
     this._loadDataAsync = this.async(() => {
-      if (!this.isAttached) return;
       this.dataLoading = true;
 
       // Before updating, cancel any network-pending updates, to
@@ -140,7 +141,7 @@ export const DataLoaderBehavior = {
 
       return Promise.all(promises).then(this._canceller.cancellable(result => {
         this.dataLoading = false;
-        if (result.cancelled || !promises.length) return;
+        if (result.cancelled) return;
         this.onLoadFinish();
       }));
     });

tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html

@@ -204,6 +204,7 @@
       },
 
       setSeriesData(name, data) {
+        this._resetDomainOnNextLoad = true;
         this.$.chart.setSeriesData(name, data);
       },
 

tensorboard/components/tf_tensorboard/tf-tensorboard.html

@@ -387,6 +387,8 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
       throw new Error('HTML import plugin dashboards *before* tf-tensorboard');
     }
 
+    const DATA_SELECTION_CHANGE_DEBOUNCE_MS = 200;
+
     Polymer({
       is: "tf-tensorboard",
       behaviors: [tf_tensorboard.AutoReloadBehavior],
@@ -728,6 +730,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
           const component = document.createElement(dashboard.elementName);
           component.id = 'dashboard';  // used in `_selectedDashboardComponent`
           if (dashboard.useDataSelector) {
+            this.cancelDebouncer('updateDataSelection');
             component.dataSelection = this._dataSelection;
           }
           container.appendChild(component);
@@ -760,10 +763,20 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
       _updateDataSelection() {
         // The dashboard is not ready yet until it stamped the containers.
         if (!this._dashboardContainersStamped) return;
+
+        this.cancelDebouncer('updateDataSelection');
+
         const component = this._selectedDashboardComponent();
         // The dashboard may not exist.
         if (!component) return;
-        component.dataSelection = this._dataSelection;
+
+        const selectedDashboard = this._selectedDashboard;
+        const dashboard = tf_tensorboard.dashboardRegistry[selectedDashboard];
+        if (dashboard.useDataSelector) {
+          this.debounce('updateDataSelection', () => {
+            component.dataSelection = this._dataSelection;
+          }, DATA_SELECTION_CHANGE_DEBOUNCE_MS);
+        }
       },
 
       ready() {

tensorboard/components/vz_line_chart2/vz-line-chart2.ts

@@ -259,7 +259,7 @@ Polymer({
   },
 
   observers: [
-    '_makeChart(xComponentsCreationMethod, xType, yValueAccessor, yScaleType, tooltipColumns, colorScale)',
+    '_makeChart(xComponentsCreationMethod, xType, yValueAccessor, yScaleType, tooltipColumns, colorScale, isAttached)',
     '_reloadFromCache(_chart)',
     '_smoothingChanged(smoothingEnabled, smoothingWeight, _chart)',
     '_tooltipSortingMethodChanged(tooltipSortingMethod, _chart)',

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

@@ -224,7 +224,7 @@
         _getDataLoadName: {
           type: Function,
           value: function() {
-            return this._getSeriesNameFromDatum;
+            return (datum) => this._getSeriesNameFromDatum(datum);
           },
         },