diff --git a/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html b/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html index cb59745019..8276368795 100644 --- a/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html +++ b/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html @@ -219,8 +219,11 @@ this.$.chart.setSeriesMetadata(name, metadata); }, + /** + * Not yet implemented. + */ commitChanges() { - this.$.chart.commitChanges(); + // Temporarily rolled back due to PR curves breakage. }, redraw() { diff --git a/tensorboard/components/vz_line_chart2/line-chart.ts b/tensorboard/components/vz_line_chart2/line-chart.ts index 1a09b4ac8b..983113ef36 100644 --- a/tensorboard/components/vz_line_chart2/line-chart.ts +++ b/tensorboard/components/vz_line_chart2/line-chart.ts @@ -90,6 +90,7 @@ namespace vz_line_chart2 { private lastPointsDataset: Plottable.Dataset; private fillArea?: FillArea; private datasets: Plottable.Dataset[]; + private onDatasetChanged: (dataset: Plottable.Dataset) => void; private nanDataset: Plottable.Dataset; private smoothingWeight: number; private smoothingEnabled: boolean; @@ -138,6 +139,10 @@ namespace vz_line_chart2 { // varies based on whether smoothing is enabled. this.symbolFunction = symbolFunction; + // need to do a single bind, so we can deregister the callback from + // old Plottable.Datasets. (Deregistration is done by identity checks.) + this.onDatasetChanged = this._onDatasetChanged.bind(this); + this._defaultXRange = defaultXRange; this._defaultYRange = defaultYRange; this.tooltipColumns = tooltipColumns; @@ -317,6 +322,16 @@ namespace vz_line_chart2 { return new Plottable.Components.Group(groups); } + /** Updates the chart when a dataset changes. Called every time the data of + * a dataset changes to update the charts. + */ + private _onDatasetChanged(dataset: Plottable.Dataset) { + if (this.smoothingEnabled) { + this.resmoothDataset(dataset); + } + this.updateSpecialDatasets(); + } + public ignoreYOutliers(ignoreYOutliers: boolean) { if (ignoreYOutliers !== this._ignoreYOutliers) { this._ignoreYOutliers = ignoreYOutliers; @@ -818,53 +833,32 @@ namespace vz_line_chart2 { } /** - * Stages update of visible series on the chart. - * - * Please call `commitChanges` for the changes to be reflected on the chart - * after making all the changes. + * Update the selected series on the chart. */ public setVisibleSeries(names: string[]) { - this.disableChanges(); names = names.sort(); - names.reverse(); // draw first series on top this.seriesNames = names; - } - - private dirtyDatasets = new Set(); - - private disableChanges() { - if (!this.dirtyDatasets.size) { - // Prevent plots from reacting to the dataset changes. - this.linePlot.datasets([]); - if (this.smoothLinePlot) { - this.smoothLinePlot.datasets([]); - } - - if (this.marginAreaPlot) { - this.marginAreaPlot.datasets([]); - } - } - } - - public commitChanges() { - this.datasets = this.seriesNames.map((r) => this.getDataset(r)); - [...this.dirtyDatasets].forEach((d) => { - if (this.smoothingEnabled) { - this.resmoothDataset(this.getDataset(d)); - } - }); - this.updateSpecialDatasets(); + names.reverse(); // draw first series on top + this.datasets.forEach((d) => d.offUpdate(this.onDatasetChanged)); + this.datasets = names.map((r) => this.getDataset(r)); + this.datasets.forEach((d) => d.onUpdate(this.onDatasetChanged)); this.linePlot.datasets(this.datasets); + if (this.smoothingEnabled) { this.smoothLinePlot.datasets(this.datasets); } if (this.marginAreaPlot) { this.marginAreaPlot.datasets(this.datasets); } + this.updateSpecialDatasets(); + } - this.measureBBoxAndMaybeInvalidateLayoutInRaf(); - this.dirtyDatasets.clear(); + /** + * Not yet implemented. + */ + public commitChanges() { + // Temporarily rolled back due to PR curves breakage. } /** @@ -891,30 +885,21 @@ namespace vz_line_chart2 { } /** - * Stages a data change of a series on the chart. - * - * Please call `commitChanges` for the changes to be reflected on the chart - * after making all the changes. + * Sets the data of a series on the chart. */ public setSeriesData(name: string, data: vz_chart_helpers.ScalarDatum[]) { - this.disableChanges(); this.getDataset(name).data(data); - this.dirtyDatasets.add(name); + this.measureBBoxAndMaybeInvalidateLayoutInRaf(); } /** - * Sets a metadata change of a series on the chart. - * - * Please call `commitChanges` for the changes to be reflected on the chart - * after making all the changes. + * Sets the metadata of a series on the chart. */ public setSeriesMetadata(name: string, meta: any) { - this.disableChanges(); - this.getDataset(name).metadata({ - ...this.getDataset(name).metadata(), + const newMeta = Object.assign({}, this.getDataset(name).metadata(), { meta, }); - this.dirtyDatasets.add(name); + this.getDataset(name).metadata(newMeta); } public smoothingUpdate(weight: number) { diff --git a/tensorboard/components/vz_line_chart2/vz-line-chart2.ts b/tensorboard/components/vz_line_chart2/vz-line-chart2.ts index 7334e34651..862a082292 100644 --- a/tensorboard/components/vz_line_chart2/vz-line-chart2.ts +++ b/tensorboard/components/vz_line_chart2/vz-line-chart2.ts @@ -338,9 +338,11 @@ namespace vz_line_chart2 { } }, + /** + * Not yet implemented. + */ commitChanges() { - if (!this._chart) return; - this._chart.commitChanges(); + // Temporarily rolled back due to PR curves breakage. }, /** @@ -431,7 +433,6 @@ namespace vz_line_chart2 { this._chart.setSeriesMetadata(name, this._seriesMetadataCache[name]); }); this._chart.setVisibleSeries(this._visibleSeriesCache); - this._chart.commitChanges(); }, _smoothingChanged: function() { diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html index 5e08ddd6e5..d424c6a262 100644 --- a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html +++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html @@ -226,7 +226,6 @@ const name = this._getSeriesNameFromDatum(datum); scalarChart.setSeriesMetadata(name, datum); scalarChart.setSeriesData(name, formattedData); - scalarChart.commitChanges(); }; }, readOnly: true,