checkpoint

Author: rileyajones

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

@@ -112,6 +112,7 @@
     [tooltipTemplate]="tooltip"
     [useDarkMode]="useDarkMode"
     (onViewBoxOverridden)="isViewBoxOverridden = $event"
+    (onViewBoxChanged)="onLineChartZoom.emit($event)"
     [customVisTemplate]="lineChartCustomVis"
     [customChartOverlayTemplate]="lineChartCustomXAxisVis"
   ></line-chart>

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

@@ -37,6 +37,7 @@ import {
   relativeTimeFormatter,
   siNumberFormatter,
 } from '../../../widgets/line_chart_v2/lib/formatter';
+import {Extent} from '../../../widgets/line_chart_v2/lib/public_types';
 import {LineChartComponent} from '../../../widgets/line_chart_v2/line_chart_component';
 import {
   RendererType,
@@ -106,6 +107,8 @@ export class ScalarCardComponent<Downloader> {
   @Output() onStepSelectorToggled =
     new EventEmitter<TimeSelectionToggleAffordance>();
 
+  @Output() onLineChartZoom = new EventEmitter<Extent>();
+
   // Line chart may not exist when was never visible (*ngIf).
   @ViewChild(LineChartComponent)
   lineChart?: LineChartComponent;

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

@@ -23,7 +23,15 @@ import {
   Output,
 } from '@angular/core';
 import {Store} from '@ngrx/store';
-import {combineLatest, from, Observable, of, Subject} from 'rxjs';
+import {
+  combineLatest,
+  from,
+  Observable,
+  of,
+  Subject,
+  Subscriber,
+  zip,
+} from 'rxjs';
 import {
   combineLatestWith,
   debounceTime,
@@ -57,6 +65,7 @@ import {
   TimeSelectionWithAffordance,
 } from '../../../widgets/card_fob/card_fob_types';
 import {classicSmoothing} from '../../../widgets/line_chart_v2/data_transformer';
+import {Extent} from '../../../widgets/line_chart_v2/lib/public_types';
 import {ScaleType} from '../../../widgets/line_chart_v2/types';
 import {
   linkedTimeToggled,
@@ -153,6 +162,7 @@ function areSeriesEqual(
       (onTimeSelectionChanged)="onTimeSelectionChanged($event)"
       (onLinkedTimeToggled)="onLinkedTimeToggled($event)"
       (onStepSelectorToggled)="onStepSelectorToggled($event)"
+      (onLineChartZoom)="onLineChartZoom($event)"
     ></scalar-card-component>
   `,
   styles: [
@@ -191,6 +201,11 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
   minMaxSteps$?: Observable<MinMaxStep>;
   columnHeaders$?: Observable<ColumnHeaders[]>;
 
+  private lineChartZoomObservers: Subscriber<Extent>[] = [];
+  lineChartZoom$: Observable<Extent> = new Observable((observer) => {
+    this.lineChartZoomObservers.push(observer);
+  });
+
   onVisibilityChange({visible}: {visible: boolean}) {
     this.isVisible = visible;
   }
@@ -338,16 +353,18 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
       shareReplay(1)
     );
 
-    this.minMaxSteps$ = partitionedSeries$.pipe(
-      map((series) => {
-        let minStep = Infinity;
-        let maxStep = -Infinity;
-        for (const {points} of series) {
-          for (const point of points) {
-            minStep = minStep > point.x ? point.x : minStep;
-            maxStep = maxStep < point.x ? point.x : maxStep;
-          }
-        }
+    this.minMaxSteps$ = zip(partitionedSeries$, this.lineChartZoom$).pipe(
+      map(([series, lineChartViewBox]) => {
+        const minMax = lineChartViewBox.x;
+        const minInViewPort = Math.ceil(Math.min(...minMax));
+        const maxInViewPort = Math.floor(Math.max(...minMax));
+        const allPoints = series
+          .map(({points}) => points.map(({x}) => x))
+          .flat();
+        const min = Math.min(...allPoints);
+        const max = Math.max(...allPoints);
+        const minStep = Math.max(min, minInViewPort);
+        const maxStep = Math.min(max, maxInViewPort);
         return {minStep, maxStep};
       })
     );
@@ -608,4 +625,8 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
   onStepSelectorToggled(affordance: TimeSelectionToggleAffordance) {
     this.store.dispatch(stepSelectorToggled({affordance}));
   }
+
+  onLineChartZoom(extent: Extent) {
+    this.lineChartZoomObservers.forEach((observer) => observer.next(extent));
+  }
 }

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts

@@ -18,10 +18,12 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  EventEmitter,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
+  Output,
   SimpleChanges,
   TemplateRef,
   ViewChild,
@@ -137,6 +139,9 @@ export class LineChartComponent
   @Input()
   lineOnly?: boolean = false;
 
+  @Output()
+  viewBoxChanged = new EventEmitter<Extent>();
+
   private onViewBoxOverridden = new ReplaySubject<boolean>(1);
 
   /**
@@ -482,6 +487,7 @@ export class LineChartComponent
     this.isViewBoxChanged = true;
     this.viewBox = dataExtent;
     this.updateLineChart();
+    this.viewBoxChanged.emit(dataExtent);
   }
 
   viewBoxReset() {