From defd7f5faa677664d9fe34806c8d5e55ea3ab4f9 Mon Sep 17 00:00:00 2001
From: Riley Jones <rileyjones@google.com>
Date: Fri, 10 Nov 2023 23:20:34 +0000
Subject: [PATCH 1/3] fix color picker regression

---
 .../webapp/runs/views/runs_table/runs_data_table.ng.html    | 2 +-
 tensorboard/webapp/runs/views/runs_table/runs_data_table.ts | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
index 4848283c26..9f7d0ee948 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
@@ -64,7 +64,7 @@
     ></ng-container>
 
     <ng-container content>
-      <ng-container *ngFor="let dataRow of data">
+      <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()">
             <tb-data-table-content-cell
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
index ae909e095b..470fbd57d4 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
@@ -127,4 +127,10 @@ export class RunsDataTable {
     const input = event.target! as HTMLInputElement;
     this.onRegexFilterChange.emit(input.value);
   }
+
+  trackByRuns(index: number, data: TableData) {
+    const dataWithoutColor = {...data};
+    delete dataWithoutColor.color;
+    return JSON.stringify(dataWithoutColor);
+  }
 }

From 42f42ea8c52c815b0f82ecdb573fe5a22d1d3f4a Mon Sep 17 00:00:00 2001
From: Riley Jones <rileyjones@google.com>
Date: Mon, 13 Nov 2023 19:07:49 +0000
Subject: [PATCH 2/3] add comment

---
 tensorboard/webapp/runs/views/runs_table/runs_data_table.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
index 470fbd57d4..6fb4c4ec79 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
@@ -128,6 +128,12 @@ export class RunsDataTable {
     this.onRegexFilterChange.emit(input.value);
   }
 
+  /**
+   * Using the `trackBy` directive allows you to control when an element contained
+   * by an `ngFor` is rerendered. In this case it is important that changes to
+   * the `color` attribute do NOT trigger rerenders because doing so will recreate
+   * and close the colorPicker.
+   */
   trackByRuns(index: number, data: TableData) {
     const dataWithoutColor = {...data};
     delete dataWithoutColor.color;

From 5b49963fa6a5fd8e22b87711356d19b900159f9b Mon Sep 17 00:00:00 2001
From: Riley Jones <rileyjones@google.com>
Date: Tue, 14 Nov 2023 00:57:20 +0000
Subject: [PATCH 3/3] add test for track by function

---
 .../views/runs_table/runs_data_table_test.ts    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
index 44038e377e..0de6406a5d 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
@@ -355,4 +355,21 @@ describe('runs_data_table', () => {
 
     expect(onRegexFilterChangeSpy).toHaveBeenCalledWith('myRegex');
   });
+
+  it('trackByRuns serializes data while ignoring color', () => {
+    const fixture = createComponent({});
+    const dataTable = fixture.debugElement.query(By.directive(RunsDataTable));
+    expect(
+      dataTable.componentInstance.trackByRuns(0, {
+        id: 'run1',
+        color: 'orange',
+        hparam1: 1.234,
+      })
+    ).toEqual(
+      JSON.stringify({
+        id: 'run1',
+        hparam1: 1.234,
+      })
+    );
+  });
 });