Fix data table styling and fob dismiss button

- Move data table and expand button inside .superimposed-card div so
  they inherit the card's background color, border, and padding
- Wire up onStepSelectorToggled in the container to clear the local
  time selection, so the (x) button on the fob actually dismisses it
  and hides the data table

Co-authored-by: Samuel <samuel@knutsen.co>

Author: cursoragent

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

@@ -194,48 +194,48 @@
       </table>
     </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()"
+  <ng-container *ngIf="showDataTable()">
+    <div
+      #dataTableContainer
+      [ngClass]="{
+        'data-table-container': true,
+        'expanded': tableExpanded
+      }"
     >
-      <mat-icon
-        [svgIcon]="shouldExpandTable() ? 'expand_more_24px' : 'expand_less_24px'"
-      ></mat-icon>
-    </button>
-  </div>
-</ng-container>
+      <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>
+</div>
 <ng-template
   #lineChartCustomXAxisVis
   let-viewExtent="viewExtent"

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

@@ -129,6 +129,7 @@ import {getFilteredRenderableRunsIds} from '../main_view/common_selectors';
       (onYAxisScaleChanged)="onYAxisScaleChanged($event)"
       (onXAxisScaleChanged)="onXAxisScaleChanged($event)"
       (onTimeSelectionChanged)="onTimeSelectionChanged($event)"
+      (onStepSelectorToggled)="onStepSelectorToggled()"
       (onFullWidthChanged)="fullWidthChanged.emit($event)"
       (onFullHeightChanged)="fullHeightChanged.emit($event)"
       observeIntersection
@@ -636,6 +637,10 @@ export class SuperimposedCardContainer implements OnInit, OnDestroy {
     this.localTimeSelectionSubject.next(event.timeSelection);
   }
 
+  onStepSelectorToggled() {
+    this.localTimeSelectionSubject.next(undefined);
+  }
+
   onViewBoxChange(viewBox: Extent | null) {
     this.userViewBoxSubject.next(viewBox);
   }