Perf: optimized tooltip redraw

tensorboard/components/tf_line_chart_data_loader/BUILD

@@ -17,7 +17,7 @@ tf_web_library(
         "//tensorboard/components/tf_color_scale",
         "//tensorboard/components/tf_imports:lodash",
         "//tensorboard/components/tf_imports:polymer",
-        "//tensorboard/components/vz_line_chart",
+        "//tensorboard/components/vz_line_chart2",
         "@org_polymer_paper_spinner",
     ],
 )

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

@@ -140,7 +140,7 @@ export const DataLoaderBehavior = {
 
       return Promise.all(promises).then(this._canceller.cancellable(result => {
         this.dataLoading = false;
-        if (result.cancelled) return;
+        if (result.cancelled || !promises.length) return;
         this.onLoadFinish();
       }));
     });

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

@@ -19,7 +19,7 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../tf-backend/tf-backend.html">
 <link rel="import" href="../tf-color-scale/tf-color-scale.html">
-<link rel="import" href="../vz-line-chart/vz-line-chart.html">
+<link rel="import" href="../vz-line-chart2/vz-line-chart2.html">
 <script src="data-loader-behavior.js"></script>
 
 <!--
@@ -29,7 +29,7 @@
 <dom-module id="tf-line-chart-data-loader">
   <template>
     <div id="chart-and-spinner-container">
-      <vz-line-chart
+      <vz-line-chart2
         id="chart"
         x-components-creation-method="[[xComponentsCreationMethod]]"
         x-type="[[xType]]"
@@ -45,7 +45,7 @@
         default-y-range="[[defaultYRange]]"
         fill-area="[[fillArea]]"
         symbol-function="[[symbolFunction]]"
-      ></vz-line-chart>
+      ></vz-line-chart2>
       <template is="dom-if" if="[[dataLoading]]">
         <div id="loading-spinner-container">
           <paper-spinner-lite active></paper-spinner-lite>
@@ -219,8 +219,8 @@
       },
 
       _dataSeriesChanged(_) {
+        // Setting visible series redraws the chart.
         this.$.chart.setVisibleSeries(this.dataSeries);
-        this.redraw();
       },
 
       _logScaleChanged(logScaleActive) {
@@ -245,6 +245,7 @@
       },
 
     });
+
     })();
   </script>
 </dom-module>

tensorboard/components/vz_chart_helpers/vz-chart-helpers.ts

@@ -100,6 +100,7 @@ export interface TooltipColumnState {
 
 export interface TooltipColumn {
   title: string;
+  static: boolean;
   evaluate: ((p: Point, status?: TooltipColumnState) => string);
 }
 

tensorboard/components/vz_line_chart/BUILD

@@ -8,13 +8,13 @@ licenses(["notice"])  # Apache 2.0
 tf_web_library(
     name = "vz_line_chart",
     srcs = [
-        "dragZoomInteraction.ts",
         "vz-line-chart.html",
         "vz-line-chart.ts",
     ],
     path = "/vz-line-chart",
     visibility = ["//visibility:public"],
     deps = [
+        ":dragZoomInteraction",
         "//tensorboard/components/tf_imports:d3",
         "//tensorboard/components/tf_imports:lodash",
         "//tensorboard/components/tf_imports:plottable",
@@ -23,6 +23,20 @@ tf_web_library(
     ],
 )
 
+tf_web_library(
+    name = "dragZoomInteraction",
+    srcs = [
+        "dragZoomInteraction.html",
+        "dragZoomInteraction.ts",
+    ],
+    path = "/vz-line-chart",
+    visibility = ["//visibility:public"],
+    deps = [
+        "//tensorboard/components/tf_imports:d3",
+        "//tensorboard/components/tf_imports:plottable",
+    ],
+)
+
 tf_web_library(
     name = "demo",
     srcs = ["index.html"],
@@ -45,4 +59,3 @@ tensorboard_webcomponent_library(
         "//third_party/javascript/polymer/v1/polymer:lib",
     ],
 )
-

tensorboard/components/vz_line_chart/dragZoomInteraction.html

@@ -0,0 +1,4 @@
+<link rel="import" href="../tf-imports/d3.html">
+<link rel="import" href="../tf-imports/plottable.html">
+
+<script src="dragZoomInteraction.js"></script>

tensorboard/components/vz_line_chart/vz-line-chart.html

@@ -20,6 +20,7 @@
 <link rel="import" href="../tf-imports/lodash.html">
 <link rel="import" href="../tf-imports/plottable.html">
 <link rel="import" href="../vz-chart-helpers/vz-chart-helpers.html">
+<link rel="import" href="dragZoomInteraction.html">
 
 <!--
 vz-line-chart creates an element that draws a line chart for
@@ -119,6 +120,5 @@
 
     </style>
   </template>
-  <script src="dragZoomInteraction.js"></script>
   <script src="vz-line-chart.js"></script>
 </dom-module>

tensorboard/components/vz_line_chart2/BUILD

@@ -0,0 +1,25 @@
+package(default_visibility = ["//tensorboard:internal"])
+
+load("//tensorboard/defs:defs.bzl", "tensorboard_webcomponent_library")
+load("//tensorboard/defs:web.bzl", "tf_web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+tf_web_library(
+    name = "vz_line_chart2",
+    srcs = [
+        "line-chart.ts",
+        "vz-line-chart2.html",
+        "vz-line-chart2.ts",
+    ],
+    path = "/vz-line-chart2",
+    visibility = ["//visibility:public"],
+    deps = [
+        "//tensorboard/components/tf_imports:d3",
+        "//tensorboard/components/tf_imports:lodash",
+        "//tensorboard/components/tf_imports:plottable",
+        "//tensorboard/components/tf_imports:polymer",
+        "//tensorboard/components/vz_chart_helpers",
+        "//tensorboard/components/vz_line_chart:dragZoomInteraction",
+    ],
+)