line chart: implement ignoreOutlier (#4405)

This change back ports some logic from vz-chart-helpers to ignore y
dimension outliers when computing the default viewBox.

Author: stephanwlee

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -89,6 +89,7 @@
     [seriesData]="dataSeries"
     [seriesMetadataMap]="chartMetadataMap"
     [yScaleType]="newYAxisType"
+    [ignoreYOutliers]="ignoreOutliers"
   ></line-chart>
 
   <ng-template #legacyChart>

tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts

@@ -88,6 +88,7 @@ class TestableGpuLineChart {
   @Input() seriesData!: DataSeries[];
   @Input() seriesMetadataMap!: DataSeriesMetadataMap;
   @Input() yScaleType!: ScaleType;
+  @Input() ignoreYOutliers: boolean = false;
 }
 
 describe('scalar card', () => {

tensorboard/webapp/widgets/line_chart_v2/BUILD

@@ -43,6 +43,7 @@ tf_ts_library(
     ],
     visibility = ["//visibility:private"],
     deps = [
+        "//tensorboard/webapp/third_party:d3",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:public_types",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:utils",
     ],

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts

@@ -100,6 +100,14 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input()
   tooltipTemplate?: TooltipTemplate;
 
+  /**
+   * Whether to ignore outlier when computing default viewBox from the dataSeries.
+   *
+   * Do note that we only take values in between approxmiately 5th to 95th percentiles.
+   */
+  @Input()
+  ignoreYOutliers: boolean = false;
+
   readonly Y_GRID_COUNT = 6;
   readonly X_GRID_COUNT = 10;
 
@@ -174,13 +182,15 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
    * Returns true when default view box changes (e.g., due to more data coming in
    * or more series becoming visible).
    *
-   * Calculating the dataExtent and updating the viewBox accordingly can be expensive as
-   * (1) we have to iterate over ~1M data points and (2) supporting `ignoreOutlier` will
-   * make us remember 5th and 95th percentile presumably using min and max heaps
-   * (increased memory usage).
+   * Calculating the dataExtent and updating the viewBox accordingly can be an expensive
+   * operation.
    */
   private shouldUpdateDefaultViewBox(changes: SimpleChanges): boolean {
-    if (changes['xScaleType'] || changes['yScaleType']) {
+    if (
+      changes['xScaleType'] ||
+      changes['yScaleType'] ||
+      changes['ignoreYOutliers']
+    ) {
       return true;
     }
 
@@ -313,7 +323,8 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
     } else if (!this.isViewBoxOverriden && this.isViewBoxChanged) {
       const dataExtent = computeDataSeriesExtent(
         this.seriesData,
-        this.seriesMetadataMap
+        this.seriesMetadataMap,
+        this.ignoreYOutliers
       );
       this.viewBox = {
         x: this.xScale.niceDomain(dataExtent.x ?? DEFAULT_EXTENT.x),

tensorboard/webapp/widgets/line_chart_v2/line_chart_internal_utils.ts

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+import * as d3 from '../../third_party/d3';
 import {
   DataSeries,
   DataSeriesMetadataMap,
@@ -22,44 +23,50 @@ import {isWebGl2Supported} from './lib/utils';
 /**
  * Returns extent, min and max values of each dimensions, of all data series points.
  *
- * Note that it excludes auxillary data points and invisible data series.
+ * When ignoreYOutliers is true, it will calculate extent using values within 5th and 95th
+ * quantiles.
  *
- * TODO(stephanwlee): add support for ignoreOutlier.
+ * Note that it excludes auxillary data points and invisible data series.
  */
 export function computeDataSeriesExtent(
   data: DataSeries[],
-  metadataMap: DataSeriesMetadataMap
+  metadataMap: DataSeriesMetadataMap,
+  ignoreYOutliers: boolean
 ): {x: [number, number] | undefined; y: [number, number] | undefined} {
-  let xMin = Infinity;
-  let xMax = -Infinity;
-  let yMin = Infinity;
-  let yMax = -Infinity;
-
-  let xExtentChanged = false;
-  let yExtentChanged = false;
+  let xMin: number | null = null;
+  let xMax: number | null = null;
+  let yPoints: number[] = [];
 
+  let pointIndex = 0;
   for (const {id, points} of data) {
     const meta = metadataMap[id];
     if (!meta || meta.aux || !meta.visible) continue;
 
     for (let index = 0; index < points.length; index++) {
       const {x, y} = points[index];
-      if (!Number.isNaN(x)) {
-        xMin = Math.min(xMin, x);
-        xMax = Math.max(xMax, x);
-        xExtentChanged = true;
+      if (Number.isFinite(x)) {
+        xMin = xMin === null || x < xMin ? x : xMin;
+        xMax = xMax === null || x > xMax ? x : xMax;
       }
-      if (!Number.isNaN(y)) {
-        yMin = Math.min(yMin, y);
-        yMax = Math.max(yMax, y);
-        yExtentChanged = true;
+      if (Number.isFinite(y)) {
+        yPoints.push(y);
       }
+      pointIndex++;
     }
   }
 
+  yPoints.sort(d3.ascending);
+  let yMin = yPoints[0];
+  let yMax = yPoints[yPoints.length - 1];
+
+  if (ignoreYOutliers && yPoints.length > 2) {
+    yMin = yPoints[Math.ceil((yPoints.length - 1) * 0.05)];
+    yMax = yPoints[Math.floor((yPoints.length - 1) * 0.95)];
+  }
+
   return {
-    x: xExtentChanged ? [xMin, xMax] : undefined,
-    y: yExtentChanged ? [yMin, yMax] : undefined,
+    x: xMin !== null && xMax !== null ? [xMin, xMax] : undefined,
+    y: yMin !== undefined && yMax !== undefined ? [yMin, yMax] : undefined,
   };
 }