Memoizes the functions for getting header both runs and scalar data tables (tensorflow#6836)

## Motivation for features / changes
Using functions in Angular templates leads to unnecessary recomputation,
e.g. getHeaders() is called 60 times from data tables on init and add).
More seriously, they also interfere with other component usage like CDK
Overlay: namely, when an Overlay is set to appear next to a header, the
header element is destroyed and recreated (because of the function in
the template) before the Overlay can position itself, and ends up always
resetting its position to (0,0). Simply memoizing the function will
prevent the recomputation ([Angular
ref](https://angular.io/guide/change-detection-slow-computations#optimizing-slow-computations)).

Profiling the memoized change (using Chrome devtools profiler, which is
admittedly a bit inconsistent) seems to show a several 100ms improvement
in scripting performance.

## Technical description of changes
Replaces the `getHeaders` functions used in scalar/runs data tables with
a new memoized `extendHeaders(headers)` function.

No change in UI behavior.

## Screenshots of UI changes (or N/A)
N/A

Author: hoonji

tensorboard/webapp/metrics/views/card_renderer/BUILD

@@ -286,6 +286,7 @@ tf_ng_module(
         ":utils",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/runs:types",
+        "//tensorboard/webapp/util:memoize",
         "//tensorboard/webapp/widgets/card_fob:types",
         "//tensorboard/webapp/widgets/data_table",
         "//tensorboard/webapp/widgets/data_table:types",

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

@@ -30,7 +30,7 @@
   (loadAllColumns)="loadAllColumns.emit()"
 >
   <ng-container header>
-    <ng-container *ngFor="let header of getHeaders()">
+    <ng-container *ngFor="let header of extendHeaders(columnHeaders)">
       <tb-data-table-header-cell
         *ngIf="header.enabled && (header.type !== ColumnHeaderType.SMOOTHED || smoothingEnabled)"
         [header]="header"
@@ -42,7 +42,7 @@
   <ng-container content>
     <ng-container *ngFor="let dataRow of getTimeSelectionTableData()">
       <tb-data-table-content-row>
-        <ng-container *ngFor="let header of getHeaders()">
+        <ng-container *ngFor="let header of extendHeaders(columnHeaders)">
           <tb-data-table-content-cell
             *ngIf="header.enabled && (header.type !== ColumnHeaderType.SMOOTHED || smoothingEnabled)"
             [header]="header"

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

@@ -43,6 +43,7 @@ import {
   AddColumnEvent,
 } from '../../../widgets/data_table/types';
 import {isDatumVisible} from './utils';
+import {memoize} from '../../../util/memoize';
 
 @Component({
   selector: 'scalar-card-data-table',
@@ -74,15 +75,23 @@ export class ScalarCardDataTable {
 
   ColumnHeaderType = ColumnHeaderType;
 
-  getHeaders(): ColumnHeader[] {
-    return [
-      {
-        name: 'color',
-        displayName: '',
-        type: ColumnHeaderType.COLOR,
-        enabled: true,
-      },
-    ].concat(this.columnHeaders);
+  // Columns must be memoized to stop needless re-rendering of the content and headers in these
+  // columns. This has been known to cause problems with the controls in these columns,
+  // specifically the add button.
+  extendHeaders = memoize(this.internalExtendHeaders);
+
+  private internalExtendHeaders(headers: ColumnHeader[]) {
+    return ([] as Array<ColumnHeader>).concat(
+      [
+        {
+          name: 'color',
+          displayName: '',
+          type: ColumnHeaderType.COLOR,
+          enabled: true,
+        },
+      ],
+      headers
+    );
   }
 
   getMinPointInRange(

tensorboard/webapp/runs/views/runs_table/BUILD

@@ -110,6 +110,7 @@ tf_ng_module(
         "//tensorboard/webapp/types:ui",
         "//tensorboard/webapp/util:colors",
         "//tensorboard/webapp/util:matcher",
+        "//tensorboard/webapp/util:memoize",
         "//tensorboard/webapp/widgets/custom_modal",
         "//tensorboard/webapp/widgets/data_table",
         "//tensorboard/webapp/widgets/data_table:filter_dialog",

tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html

@@ -41,7 +41,7 @@
     (loadAllColumns)="loadAllColumns.emit()"
   >
     <ng-container header>
-      <ng-container *ngFor="let header of getHeaders()">
+      <ng-container *ngFor="let header of extendHeaders(headers)">
         <tb-data-table-header-cell
           [header]="header"
           [sortingInfo]="sortingInfo"
@@ -67,7 +67,7 @@
     <ng-container content>
       <ng-container *ngFor="let dataRow of data; trackBy: trackByRuns">
         <tb-data-table-content-row [attr.data-id]="dataRow.id">
-          <ng-container *ngFor="let header of getHeaders()">
+          <ng-container *ngFor="let header of extendHeaders(headers)">
             <tb-data-table-content-cell
               [header]="header"
               [datum]="dataRow[header.name]"

tensorboard/webapp/runs/views/runs_table/runs_data_table.ts

@@ -30,6 +30,7 @@ import {
   ReorderColumnEvent,
   AddColumnEvent,
 } from '../../../widgets/data_table/types';
+import {memoize} from '../../../util/memoize';
 @Component({
   selector: 'runs-data-table',
   templateUrl: 'runs_data_table.ng.html',
@@ -67,32 +68,30 @@ export class RunsDataTable {
   @Output() addFilter = new EventEmitter<FilterAddedEvent>();
   @Output() loadAllColumns = new EventEmitter<null>();
 
-  // These columns must be stored and reused to stop needless re-rendering of
-  // the content and headers in these columns. This has been known to cause
-  // problems with the controls in these columns, specifically the color picker.
-  beforeColumns = [
-    {
-      name: 'selected',
-      displayName: '',
-      type: ColumnHeaderType.CUSTOM,
-      enabled: true,
-    },
-  ];
+  // Columns must be memoized to stop needless re-rendering of the content and headers in these
+  // columns. This has been known to cause problems with the controls in these columns,
+  // specifically the add button.
+  extendHeaders = memoize(this.internalExtendHeaders);
 
-  afterColumns = [
-    {
-      name: 'color',
-      displayName: '',
-      type: ColumnHeaderType.COLOR,
-      enabled: true,
-    },
-  ];
-
-  getHeaders() {
+  private internalExtendHeaders(headers: ColumnHeader[]) {
     return ([] as Array<ColumnHeader>).concat(
-      this.beforeColumns,
-      this.headers,
-      this.afterColumns
+      [
+        {
+          name: 'selected',
+          displayName: '',
+          type: ColumnHeaderType.CUSTOM,
+          enabled: true,
+        },
+      ],
+      headers,
+      [
+        {
+          name: 'color',
+          displayName: '',
+          type: ColumnHeaderType.COLOR,
+          enabled: true,
+        },
+      ]
     );
   }
 

tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts

@@ -220,25 +220,25 @@ describe('runs_data_table', () => {
       });
     });
 
-    // If the call to getHeaders produces a new color header on each call, then
+    // If the call to extendHeaders produces a new color header on each call, then
     // the content gets re-rendered when the color picker opens. This causes the
     // color picker modal to close immediately. This test ensures that we keep
     // the same reference to the color header and continue to use that reference
     // instead of creating a new one on each call.
-    it('getHeaders does not produce new color header on each call', () => {
+    it('extendHeaders does not produce new color header on each call', () => {
       const fixture = createComponent({});
-
       const runsDataTable = fixture.debugElement.query(
         By.directive(RunsDataTable)
       );
+      const {headers} = runsDataTable.componentInstance;
 
       expect(
         runsDataTable.componentInstance
-          .getHeaders()
+          .extendHeaders(headers)
           .find((header: ColumnHeader) => header.name === 'color')
       ).toBe(
         runsDataTable.componentInstance
-          .getHeaders()
+          .extendHeaders(headers)
           .find((header: ColumnHeader) => header.name === 'color')
       );
     });