Superimposed plots interaction

tensorbored/webapp/metrics/views/card_renderer/BUILD

@@ -430,6 +430,8 @@ tf_ng_module(
         "superimposed_card_component.ng.html",
     ],
     deps = [
+        ":scalar_card_data_table",
+        ":scalar_card_line_chart",
         ":scalar_card_types",
         ":utils",
         "//tensorbored/webapp:app_state",
@@ -446,8 +448,11 @@ tf_ng_module(
         "//tensorbored/webapp/metrics/data_source",
         "//tensorbored/webapp/metrics/store",
         "//tensorbored/webapp/metrics/views/main_view:common_selectors",
+        "//tensorbored/webapp/runs:types",
         "//tensorbored/webapp/types",
         "//tensorbored/webapp/types:ui",
+        "//tensorbored/webapp/widgets/card_fob:types",
+        "//tensorbored/webapp/widgets/data_table:types",
         "//tensorbored/webapp/widgets/experiment_alias",
         "//tensorbored/webapp/widgets/intersection_observer",
         "//tensorbored/webapp/widgets/line_chart_v2",

tensorbored/webapp/metrics/views/card_renderer/superimposed_card_component.ng.html

@@ -110,6 +110,7 @@
       [userViewBox]="userViewBox"
       (onViewBoxOverridden)="isViewBoxOverridden = $event"
       (viewBoxChanged)="onViewBoxChanged($event)"
+      [customChartOverlayTemplate]="lineChartCustomXAxisVis"
     ></line-chart>
     <ng-template
       #tooltip
@@ -173,3 +174,64 @@
     </ng-template>
   </div>
 </div>
+<ng-container *ngIf="showDataTable()">
+  <div
+    #dataTableContainer
+    [ngClass]="{
+      'data-table-container': true,
+      'expanded': tableExpanded
+    }"
+  >
+    <scalar-card-data-table
+      [chartMetadataMap]="chartMetadataMap"
+      [dataSeries]="dataSeries"
+      [stepOrLinkedTimeSelection]="stepOrLinkedTimeSelection"
+      [columnHeaders]="columnHeaders"
+      [sortingInfo]="sortingInfo"
+      [columnCustomizationEnabled]="false"
+      [columnContextMenusEnabled]="false"
+      [smoothingEnabled]="smoothingEnabled"
+      [columnFilters]="emptyColumnFilters"
+      [runToHparamMap]="emptyRunToHparamMap"
+      [selectableColumns]="emptySelectableColumns"
+      [numColumnsLoaded]="0"
+      [numColumnsToLoad]="0"
+      (sortDataBy)="sortDataBy($event)"
+    >
+    </scalar-card-data-table>
+  </div>
+  <div class="bottom-area">
+    <button
+      *ngIf="canExpandTable()"
+      mat-icon-button
+      class="expand-button"
+      aria-label="Expand Table"
+      [title]="shouldExpandTable() ? 'Expand Table' : 'Collapse Table'"
+      (click)="toggleTableExpanded()"
+    >
+      <mat-icon
+        [svgIcon]="shouldExpandTable() ? 'expand_more_24px' : 'expand_less_24px'"
+      ></mat-icon>
+    </button>
+  </div>
+</ng-container>
+<ng-template
+  #lineChartCustomXAxisVis
+  let-viewExtent="viewExtent"
+  let-domDim="domDimension"
+  let-xScale="xScale"
+  let-interactionState="interactionState"
+>
+  <ng-container *ngIf="showFobController()">
+    <scalar-card-fob-controller
+      [disableInteraction]="interactionState !== 'NONE'"
+      [timeSelection]="stepOrLinkedTimeSelection"
+      [scale]="xScale"
+      [minMaxHorizontalViewExtend]="viewExtent.x"
+      [minMaxStep]="minMaxStep"
+      [axisSize]="domDim.width"
+      (onTimeSelectionChanged)="onTimeSelectionChanged.emit($event)"
+      (onTimeSelectionToggled)="onFobRemoved()"
+    ></scalar-card-fob-controller>
+  </ng-container>
+</ng-template>

tensorbored/webapp/metrics/views/card_renderer/superimposed_card_component.scss

@@ -22,7 +22,8 @@ limitations under the License.
 .superimposed-card {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex-grow: 1;
+  min-height: 0;
   border: 2px solid #673ab7;
   border-radius: 4px;
   background: var(--tb-card-background, #fff);
@@ -122,6 +123,7 @@ limitations under the License.
   overflow: hidden;
   position: relative;
   padding: 8px;
+  resize: vertical;
 
   mat-spinner {
     position: absolute;
@@ -136,6 +138,30 @@ limitations under the License.
   }
 }
 
+$_data_table_initial_height: 100px;
+
+.data-table-container {
+  height: $_data_table_initial_height;
+  min-height: $_data_table_initial_height;
+  max-height: 50em;
+  overflow: auto;
+  resize: vertical;
+
+  &.expanded {
+    height: auto;
+  }
+}
+
+.bottom-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .expand-button {
+    color: var(--tb-secondary-text, #666);
+  }
+}
+
 .tooltip {
   background: rgba(0, 0, 0, 0.8);
   border-radius: 4px;

tensorbored/webapp/metrics/views/card_renderer/superimposed_card_component.ts

@@ -22,6 +22,11 @@ import {
   ViewChild,
 } from '@angular/core';
 import {DataLoadState} from '../../../types/data';
+import {
+  TimeSelection,
+  TimeSelectionAffordance,
+  TimeSelectionToggleAffordance,
+} from '../../../widgets/card_fob/card_fob_types';
 import {
   Formatter,
   intlNumberFormatter,
@@ -38,10 +43,20 @@ import {
 } from '../../../widgets/line_chart_v2/types';
 import {TooltipSort, XAxisType, SuperimposedCardId} from '../../types';
 import {
+  ColumnHeader,
+  SortingInfo,
+  SortingOrder,
+  DiscreteFilter,
+  IntervalFilter,
+} from '../../../widgets/data_table/types';
+import {
+  MinMaxStep,
   ScalarCardDataSeries,
   ScalarCardSeriesMetadata,
   ScalarCardSeriesMetadataMap,
 } from './scalar_card_types';
+import {isDatumVisible} from './utils';
+import {RunToHparamMap} from '../../../runs/types';
 
 type ScalarTooltipDatum = TooltipDatum<
   ScalarCardSeriesMetadata & {
@@ -80,6 +95,9 @@ export class SuperimposedCardComponent {
   @Input() useDarkMode!: boolean;
   @Input() forceSvg!: boolean;
   @Input() userViewBox: Extent | null = null;
+  @Input() stepOrLinkedTimeSelection: TimeSelection | undefined;
+  @Input() minMaxStep: MinMaxStep | undefined;
+  @Input() columnHeaders: ColumnHeader[] = [];
 
   @Output() onDeleteCard = new EventEmitter<void>();
   @Output() onRemoveTag = new EventEmitter<string>();
@@ -88,6 +106,12 @@ export class SuperimposedCardComponent {
   @Output() onFullHeightChanged = new EventEmitter<boolean>();
   @Output() onYAxisScaleChanged = new EventEmitter<ScaleType>();
   @Output() onXAxisScaleChanged = new EventEmitter<ScaleType>();
+  @Output() onTimeSelectionChanged = new EventEmitter<{
+    timeSelection: TimeSelection;
+    affordance?: TimeSelectionAffordance;
+  }>();
+  @Output() onStepSelectorToggled =
+    new EventEmitter<TimeSelectionToggleAffordance>();
 
   showFullWidth = false;
   showFullHeight = false;
@@ -105,10 +129,25 @@ export class SuperimposedCardComponent {
   @ViewChild(LineChartComponent)
   lineChart?: LineChartComponent;
 
+  @ViewChild('dataTableContainer')
+  dataTableContainer?: ElementRef;
+
   constructor(private readonly ref: ElementRef) {}
 
   isViewBoxOverridden = false;
   additionalItemsCount = 0;
+  tableExpanded = false;
+  sortingInfo: SortingInfo = {
+    name: 'run',
+    order: SortingOrder.ASCENDING,
+  };
+
+  readonly emptyColumnFilters = new Map<
+    string,
+    DiscreteFilter | IntervalFilter
+  >();
+  readonly emptyRunToHparamMap: RunToHparamMap = {};
+  readonly emptySelectableColumns: ColumnHeader[] = [];
 
   private static nextScale(current: ScaleType): ScaleType {
     switch (current) {
@@ -269,6 +308,44 @@ export class SuperimposedCardComponent {
     return scalarTooltipData.slice(0, MAX_TOOLTIP_ITEMS);
   }
 
+  showFobController(): boolean {
+    return this.xAxisType === XAxisType.STEP && !!this.minMaxStep;
+  }
+
+  showDataTable(): boolean {
+    return (
+      this.xAxisType === XAxisType.STEP && !!this.stepOrLinkedTimeSelection
+    );
+  }
+
+  onFobRemoved() {
+    this.onStepSelectorToggled.emit(TimeSelectionToggleAffordance.FOB_DESELECT);
+  }
+
+  sortDataBy(sortingInfo: SortingInfo) {
+    this.sortingInfo = sortingInfo;
+  }
+
+  canExpandTable(): boolean {
+    const visibleRuns = this.dataSeries.filter((datum) => {
+      return isDatumVisible(datum, this.chartMetadataMap);
+    });
+    return visibleRuns.length > 3;
+  }
+
+  shouldExpandTable(): boolean {
+    return Boolean(
+      this.dataTableContainer?.nativeElement.style.height || !this.tableExpanded
+    );
+  }
+
+  toggleTableExpanded() {
+    this.tableExpanded = this.shouldExpandTable();
+    if (this.dataTableContainer) {
+      this.dataTableContainer.nativeElement.style.height = '';
+    }
+  }
+
   onRemoveTagClick(tag: string, event: Event) {
     event.stopPropagation();
     this.onRemoveTag.emit(tag);