Merge the BaseChart and LineChart classes into one, as the BaseChart is not

used for multiple charts anymore.
Change: 127135452

6 files changed, 83 insertions, 122 deletions

diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/reload-behavior.ts b/tensorflow/tensorboard/components/tf-dashboard-common/reload-behavior.ts
index 462a582e45..9a6719ae88 100644
--- a/tensorflow/tensorboard/components/tf-dashboard-common/reload-behavior.ts
+++ b/tensorflow/tensorboard/components/tf-dashboard-common/reload-behavior.ts
@@ -2,7 +2,7 @@ module TF.Dashboard {
   /**
    * ReloadBehavior: A simple behavior for dashboards where the
    * frontendReload() function should find every child element with a
-   * given tag name (e.g. "tf-chart" or "tf-image-loader")
+   * given tag name (e.g. "tf-line-chart" or "tf-image-loader")
    * and call a `reload` method on that child.
    * May later extend it so it has more sophisticated logic, e.g. reloading
    * only tags that are in view.
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
index bd5d061a47..63087c45e1 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
@@ -3,7 +3,7 @@
 <link rel="import" href="tf-x-type-selector.html">
 <link rel="import" href="../tf-color-scale/tf-color-scale.html">
 <link rel="import" href="../tf-categorizer/tf-categorizer.html">
-<link rel="import" href="tf-chart.html">
+<link rel="import" href="tf-line-chart.html">
 <link rel="import" href="../tf-collapsable-pane/tf-collapsable-pane.html">
 <link rel="import" href="../iron-collapse/iron-collapse.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
@@ -24,7 +24,7 @@ charts are larger.
 Organizationally, the #plumbing div contains components that have no concrete
 manifestation and just effect data bindings or data loading. The #sidebar contains
 shared controls like the tf-categorizer, tf-run-selector, and tf-x-type-selector.
-The #center div contains tf-charts embedded inside tf-collapsable-panes.
+The #center div contains tf-line-charts embedded inside tf-collapsable-panes.
 -->
 <dom-module id="tf-event-dashboard">
   <template>
@@ -76,7 +76,7 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
                 <div class="card">
                   <span class="card-title">[[tag]]</span>
                   <div class="card-content">
-                    <tf-chart
+                    <tf-line-chart
                       tag="[[tag]]"
                       data-provider="[[dataProvider]]"
                       id="chart"
@@ -85,7 +85,7 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
                       color-scale="[[colorScale]]"
                       on-keyup="toggleSelected"
                       tabindex="2"
-                    ></tf-chart>
+                    ></tf-line-chart>
                     <paper-icon-button
                       class="expand-button"
                       shift$="[[_showDownloadLinks]]"
@@ -120,7 +120,7 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
     Polymer({
       is: "tf-event-dashboard",
       behaviors: [
-        TF.Dashboard.ReloadBehavior("tf-chart"),
+        TF.Dashboard.ReloadBehavior("tf-line-chart"),
         TF.Backend.Behavior,
       ],
       properties: {
@@ -153,7 +153,7 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
       },
       observers: ['redraw(_showDownloadLinks)'],
       redraw: function(_showDownloadLinks) {
-        var els = this.getElementsByTagName("tf-chart");
+        var els = this.getElementsByTagName("tf-line-chart");
         for (var i=0; i<els.length; i++) {
           els[i].redraw();
         }
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-line-chart.html
index 49f9d89544..5a7cc31931 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-line-chart.html
@@ -3,7 +3,7 @@
 <link rel="import" href="../tf-imports/lodash.html">
 
 <!--
-tf-chart (TFChart) creates an element that draws a line chart for displaying event values.
+tf-line-chart (TFChart) creates an element that draws a line chart for displaying event values.
 It has the following settable properties:
   tag: (required, string) - the name of the tag to load for this chart
   selectedRuns: (required, string[]) - the runs the chart should display
@@ -17,7 +17,7 @@ It exposes the following methods:
 The data is expected to be an array of [wall_time, step, value] arrays.
 The wall_time is serialized as seconds since epoch.
 -->
-<dom-module id="tf-chart">
+<dom-module id="tf-line-chart">
   <template>
     <svg id="chartsvg"></svg>
     <div id="tooltip">
@@ -98,13 +98,12 @@ The wall_time is serialized as seconds since epoch.
     </style>
   </template>
   <script src="dragZoomInteraction.js"></script>
-  <script src="tf-chart.js"></script>
+  <script src="tf-line-chart.js"></script>
   <script src="tf-chart-helpers.js"></script>
   <script>
     Polymer({
-      is: "tf-chart",
+      is: "tf-line-chart",
       properties: {
-        type: String, // "scalar" or "compressedHistogram"
         _chart: Object,
         colorScale: Object,
         tag: String,
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts b/tensorflow/tensorboard/components/tf-event-dashboard/tf-line-chart.ts
index 91c2b7b23f..a0eb8b9aa7 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-line-chart.ts
@@ -15,25 +15,33 @@ limitations under the License.
 /* tslint:disable:no-namespace variable-name */
 
 module TF {
-  export class BaseChart {
-    protected dataFn: TF.ChartHelpers.DataFn;
-    protected tag: string;
+  export class LineChart {
+    private dataFn: TF.ChartHelpers.DataFn;
+    private tag: string;
     private run2datasets: {[run: string]: Plottable.Dataset};
-    protected runs: string[];
-
-    protected xAccessor: Plottable.Accessor<number | Date>;
-    protected xScale: Plottable.QuantitativeScale<number | Date>;
-    protected yScale: Plottable.QuantitativeScale<number>;
-    protected gridlines: Plottable.Components.Gridlines;
-    protected center: Plottable.Components.Group;
-    protected xAxis: Plottable.Axes.Numeric | Plottable.Axes.Time;
-    protected yAxis: Plottable.Axes.Numeric;
-    protected xLabel: Plottable.Components.AxisLabel;
-    protected yLabel: Plottable.Components.AxisLabel;
-    protected outer: Plottable.Components.Table;
-    protected colorScale: Plottable.Scales.Color;
-    protected tooltip: d3.Selection<any>;
-    protected dzl: Plottable.DragZoomLayer;
+    private runs: string[];
+
+    private xAccessor: Plottable.Accessor<number|Date>;
+    private xScale: Plottable.QuantitativeScale<number|Date>;
+    private yScale: Plottable.QuantitativeScale<number>;
+    private gridlines: Plottable.Components.Gridlines;
+    private center: Plottable.Components.Group;
+    private xAxis: Plottable.Axes.Numeric|Plottable.Axes.Time;
+    private yAxis: Plottable.Axes.Numeric;
+    private outer: Plottable.Components.Table;
+    private colorScale: Plottable.Scales.Color;
+    private tooltip: d3.Selection<any>;
+    private dzl: Plottable.DragZoomLayer;
+
+    private linePlot: Plottable.Plots.Line<number|Date>;
+    private scatterPlot: Plottable.Plots.Scatter<number|Date, Number>;
+    private nanDisplay: Plottable.Plots.Scatter<number|Date, Number>;
+    private yAccessor: Plottable.Accessor<number>;
+    private lastPointsDataset: Plottable.Dataset;
+    private datasets: Plottable.Dataset[];
+    private updateSpecialDatasets;
+    private nanDataset: Plottable.Dataset;
+
     constructor(
         tag: string, dataFn: TF.ChartHelpers.DataFn, xType: string,
         colorScale: Plottable.Scales.Color, tooltip: d3.Selection<any>) {
@@ -42,40 +50,18 @@ module TF {
       this.tag = tag;
       this.colorScale = colorScale;
       this.tooltip = tooltip;
+      this.datasets = [];
+      // lastPointDataset is a dataset that contains just the last point of
+      // every dataset we're currently drawing.
+      this.lastPointsDataset = new Plottable.Dataset();
+      this.nanDataset = new Plottable.Dataset();
+      // need to do a single bind, so we can deregister the callback from
+      // old Plottable.Datasets. (Deregistration is done by identity checks.)
+      this.updateSpecialDatasets = this._updateSpecialDatasets.bind(this);
+      this.buildChart(xType);
     }
 
-    /**
-     * Change the runs on the chart. The work of actually setting the dataset
-     * on the plot is deferred to the subclass because it is impl-specific.
-     * Changing runs automatically triggers a reload; this ensures that the
-     * newly selected run will have data, and that all the runs will be current
-     * (it would be weird if one run was ahead of the others, and the display
-     * depended on the order in which runs were added)
-     */
-    public changeRuns(runs: string[]) {
-      this.runs = runs;
-      this.reload();
-    }
-
-    /**
-     * Reload data for each run in view.
-     */
-    public reload() {
-      this.runs.forEach((run) => {
-        let dataset = this.getDataset(run);
-        this.dataFn(this.tag, run).then((x) => dataset.data(x));
-      });
-    }
-
-    protected getDataset(run: string) {
-      if (this.run2datasets[run] === undefined) {
-        this.run2datasets[run] =
-            new Plottable.Dataset([], {run: run, tag: this.tag});
-      }
-      return this.run2datasets[run];
-    }
-
-    protected buildChart(xType: string) {
+    private buildChart(xType: string) {
       if (this.outer) {
         this.outer.destroy();
       }
@@ -106,48 +92,7 @@ module TF {
                                                   ]);
     }
 
-    protected buildPlot(xAccessor, xScale, yScale): Plottable.Component {
-      throw new Error('Abstract method not implemented.');
-    }
-
-    public renderTo(target: d3.Selection<any>) {
-      this.outer.renderTo(target);
-    }
-
-    public redraw() {
-      this.outer.redraw();
-    }
-
-    protected destroy() {
-      this.outer.destroy();
-    }
-  }
-
-  export class LineChart extends BaseChart {
-    private linePlot: Plottable.Plots.Line<number|Date>;
-    private scatterPlot: Plottable.Plots.Scatter<number|Date, Number>;
-    private nanDisplay: Plottable.Plots.Scatter<number|Date, Number>;
-    private yAccessor: Plottable.Accessor<number>;
-    private lastPointsDataset: Plottable.Dataset;
-    private datasets: Plottable.Dataset[];
-    private updateSpecialDatasets;
-    private nanDataset: Plottable.Dataset;
-
-    constructor(
-        tag: string, dataFn: TF.ChartHelpers.DataFn, xType: string,
-        colorScale: Plottable.Scales.Color, tooltip: d3.Selection<any>) {
-      super(tag, dataFn, xType, colorScale, tooltip);
-      this.datasets = [];
-      // lastPointDataset is a dataset that contains just the last point of
-      // every dataset we're currently drawing.
-      this.lastPointsDataset = new Plottable.Dataset();
-      this.nanDataset = new Plottable.Dataset();
-      // need to do a single bind, so we can deregister the callback from
-      // old Plottable.Datasets. (Deregistration is done by identity checks.)
-      this.updateSpecialDatasets = this._updateSpecialDatasets.bind(this);
-      this.buildChart(xType);
-    }
-    protected buildPlot(xAccessor, xScale, yScale): Plottable.Component {
+    private buildPlot(xAccessor, xScale, yScale): Plottable.Component {
       this.yAccessor = (d: Backend.ScalarDatum) => d.scalar;
       let linePlot = new Plottable.Plots.Line<number|Date>();
       linePlot.x(xAccessor, xScale);
@@ -417,13 +362,44 @@ module TF {
       }
     }
 
+    private getDataset(run: string) {
+      if (this.run2datasets[run] === undefined) {
+        this.run2datasets[run] =
+            new Plottable.Dataset([], {run: run, tag: this.tag});
+      }
+      return this.run2datasets[run];
+    }
+
+    /**
+     * Change the runs on the chart.
+     * Changing runs automatically triggers a reload; this ensures that the
+     * newly selected run will have data, and that all the runs will be current
+     * (it would be weird if one run was ahead of the others, and the display
+     * depended on the order in which runs were added)
+     */
     public changeRuns(runs: string[]) {
-      super.changeRuns(runs);
+      this.runs = runs;
+      this.reload();
+
       runs.reverse();  // draw first run on top
       this.datasets.forEach((d) => d.offUpdate(this.updateSpecialDatasets));
       this.datasets = runs.map((r) => this.getDataset(r));
       this.datasets.forEach((d) => d.onUpdate(this.updateSpecialDatasets));
       this.linePlot.datasets(this.datasets);
     }
+
+    /**
+     * Reload data for each run in view.
+     */
+    public reload() {
+      this.runs.forEach((run) => {
+        let dataset = this.getDataset(run);
+        this.dataFn(this.tag, run).then((x) => dataset.data(x));
+      });
+    }
+
+    public renderTo(target: d3.Selection<any>) { this.outer.renderTo(target); }
+
+    public redraw() { this.outer.redraw(); }
   }
 }
diff --git a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
index 371ea80f80..6dab1bda03 100644
--- a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
@@ -24,7 +24,8 @@ charts are larger.
 Organizationally, the #plumbing div contains components that have no concrete
 manifestation and just effect data bindings or data loading. The #sidebar contains
 shared controls like the tf-categorizer, tf-run-selector, and tf-x-type-selector.
-The #center div contains tf-charts embedded inside tf-collapsable-panes.
+The #center div contains tf-obsolete-histogram-charts embedded inside
+tf-collapsable-panes.
 -->
 <dom-module id="tf-histogram-dashboard">
   <template>
@@ -108,7 +109,7 @@ The #center div contains tf-charts embedded inside tf-collapsable-panes.
     Polymer({
       is: "tf-histogram-dashboard",
       behaviors: [
-        TF.Dashboard.ReloadBehavior("tf-chart"),
+        TF.Dashboard.ReloadBehavior("tf-obsolete-histogram-chart"),
         TF.Backend.Behavior,
       ],
       properties: {
diff --git a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-obsolete-histogram-chart.html b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-obsolete-histogram-chart.html
index a60ad05771..3d6fab0599 100644
--- a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-obsolete-histogram-chart.html
+++ b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-obsolete-histogram-chart.html
@@ -2,21 +2,6 @@
 <link rel="import" href="../tf-imports/plottable.html">
 <link rel="import" href="../tf-imports/lodash.html">
 
-<!--
-tf-chart (TFChart) creates an element that draws a line chart for displaying event values.
-It has the following settable properties:
-  tag: (required, string) - the name of the tag to load for this chart
-  selectedRuns: (required, string[]) - the runs the chart should display
-  xType: (required, string) - the way to display x values - allows "step" or "wall_time"
-  dataCoordinator: (required, TF.DataCoordinator) - the data coordinator for talking to backend
-  colorScale: (required, Plottable.Scales.Color) - maps from runs to colors: (required, function) - allows the chart to modify tooltips
-
-It exposes the following methods:
-  redraw() - cause the chart to re-render (useful if e.g. container size changed)
-
-The data is expected to be an array of [wall_time, step, value] arrays.
-The wall_time is serialized as seconds since epoch.
--->
 <dom-module id="tf-obsolete-histogram-chart">
   <template>
     <svg id="chartsvg"></svg>