HParams: Implement selection checkbox double click (#6481)

## Motivation for features / changes
We will soon be replacing the RunsTableComponent with the RunsDataTable.
In an effort to reach feature parity with the current runs table this PR
implements the dblClick functionality of the selected check boxes. When
the checkboxes are double clicked it has the effect of selecting this
and only this run.

## Technical description of changes
I implemented the dblclick logic differently than the
RunsTableComponent. I utilized the MouseEvent details property to decide
if a click was a click or a dblclick. This stops the click from firing
both the onSelectionToggle and the onSelectionDblClick events for a
single click.

## Screenshots of UI changes (or N/A)
![2023-07-05_16-57-38
(3)](https://github.com/tensorflow/tensorboard/assets/8672809/ea29d54e-5bb4-437d-9cf5-a09142f691fe)

Author: JamesHollyer

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

@@ -83,7 +83,7 @@
               <div *ngSwitchCase="'selected'">
                 <mat-checkbox
                   [checked]="dataRow['selected']"
-                  (change)="onSelectionToggle.emit(dataRow.id)"
+                  (click)="selectionClick($event, dataRow['id'])"
                 ></mat-checkbox>
               </div>
             </ng-container>

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

@@ -58,6 +58,7 @@ export class RunsDataTable {
     index?: number | undefined;
   }>();
   @Output() removeColumn = new EventEmitter<ColumnHeader>();
+  @Output() onSelectionDblClick = new EventEmitter<string>();
 
   // 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
@@ -88,6 +89,22 @@ export class RunsDataTable {
     );
   }
 
+  selectionClick(event: MouseEvent, runId: string) {
+    // Prevent checkbox from switching checked state on its own.
+    event.preventDefault();
+
+    // event.details on mouse click events gives the number of clicks in quick
+    // succession. This logic is used to differentiate between single and double
+    // clicks.
+    // Note: This means any successive click after the second are noops.
+    if (event.detail === 1) {
+      this.onSelectionToggle.emit(runId);
+    }
+    if (event.detail === 2) {
+      this.onSelectionDblClick.emit(runId);
+    }
+  }
+
   allRowsSelected() {
     return this.data.every((row) => row['selected']);
   }

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

@@ -45,6 +45,7 @@ import {sendKeys} from '../../../testing/dom';
       (onSelectionToggle)="onSelectionToggle($event)"
       (onAllSelectionToggle)="onAllSelectionToggle($event)"
       (onRegexFilterChange)="onRegexFilterChange($event)"
+      (onSelectionDblClick)="onSelectionDblClick($event)"
     ></runs-data-table>
   `,
 })
@@ -59,11 +60,13 @@ class TestableComponent {
   @Input() onSelectionToggle!: (runId: string) => void;
   @Input() onAllSelectionToggle!: (runIds: string[]) => void;
   @Input() onRegexFilterChange!: (regex: string) => void;
+  @Input() onSelectionDblClick!: (runId: string) => void;
 }
 
 describe('runs_data_table', () => {
   let onSelectionToggleSpy: jasmine.Spy;
   let onAllSelectionToggleSpy: jasmine.Spy;
+  let onSelectionDblClickSpy: jasmine.Spy;
   let onRegexFilterChangeSpy: jasmine.Spy;
   function createComponent(input: {
     data?: TableData[];
@@ -107,6 +110,9 @@ describe('runs_data_table', () => {
     onAllSelectionToggleSpy = jasmine.createSpy();
     fixture.componentInstance.onAllSelectionToggle = onAllSelectionToggleSpy;
 
+    onSelectionDblClickSpy = jasmine.createSpy();
+    fixture.componentInstance.onSelectionDblClick = onSelectionDblClickSpy;
+
     onRegexFilterChangeSpy = jasmine.createSpy();
     fixture.componentInstance.onRegexFilterChange = onRegexFilterChangeSpy;
 
@@ -284,11 +290,33 @@ describe('runs_data_table', () => {
 
     const firstCheckbox = selectedContentCells[0].query(By.css('mat-checkbox'));
 
-    firstCheckbox.nativeElement.dispatchEvent(new Event('change'));
+    firstCheckbox.nativeElement.dispatchEvent(
+      new MouseEvent('click', {detail: 1})
+    );
 
     expect(onSelectionToggleSpy).toHaveBeenCalledWith('runid');
   });
 
+  it('emits onSelectionDblClick event when selected header checkbox is double clicked', () => {
+    const fixture = createComponent({});
+
+    const dataTable = fixture.debugElement.query(
+      By.directive(DataTableComponent)
+    );
+    const cells = dataTable.queryAll(By.directive(ContentCellComponent));
+
+    const selectedContentCells = cells.filter((cell) => {
+      return cell.componentInstance.header.name === 'selected';
+    });
+
+    const firstCheckbox = selectedContentCells[0].query(By.css('mat-checkbox'));
+    firstCheckbox.nativeElement.dispatchEvent(
+      new MouseEvent('click', {detail: 2})
+    );
+
+    expect(onSelectionDblClickSpy).toHaveBeenCalledWith('runid');
+  });
+
   it('fire onRegexFilterChange when input is entered into the tb-filter-input', () => {
     const fixture = createComponent({});
     const filterInput = fixture.debugElement.query(By.css('tb-filter-input'));

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

@@ -237,7 +237,7 @@
           <mat-checkbox
             [checked]="item.selected"
             (change)="onSelectionToggle.emit(item)"
-            (dblclick)="onSelectionDblClick.emit(item)"
+            (dblclick)="onSelectionDblClick.emit(item.run.id)"
             title="Click to toggle run selection or double click to select only this run."
           ></mat-checkbox>
         </span>

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

@@ -104,7 +104,7 @@ export class RunsTableComponent implements OnChanges {
 
   @Output() onRegexFilterChange = new EventEmitter<string>();
   @Output() onSelectionToggle = new EventEmitter<RunTableItem>();
-  @Output() onSelectionDblClick = new EventEmitter<RunTableItem>();
+  @Output() onSelectionDblClick = new EventEmitter<string>();
   @Output() onPageSelectionToggle = new EventEmitter<{items: RunTableItem[]}>();
   @Output()
   onPaginationChange = new EventEmitter<{

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

@@ -281,6 +281,7 @@ function matchFilter(
       (onAllSelectionToggle)="onAllSelectionToggle($event)"
       (onRunColorChange)="onRunColorChange($event)"
       (onRegexFilterChange)="onRegexFilterChange($event)"
+      (onSelectionDblClick)="onRunSelectionDblClick($event)"
       (toggleFullScreen)="toggleFullScreen()"
       (addColumn)="addColumn($event)"
       (removeColumn)="removeColumn($event)"
@@ -694,11 +695,12 @@ export class RunsTableContainer implements OnInit, OnDestroy {
     );
   }
 
-  onRunSelectionDblClick(item: RunTableItem) {
-    // Note that a user's double click will trigger both 'change' and 'dblclick'
-    // events so onRunSelectionToggle() will also be called and we will fire
-    // two somewhat conflicting actions: runSelectionToggled and
-    // singleRunSelected. This is ok as long as singleRunSelected is fired last.
+  onRunSelectionDblClick(runId: string) {
+    // Note that a user's double click in the Legacy RunsTableComponent will
+    // trigger both 'change' and 'dblclick' events so onRunSelectionToggle()
+    // will also be called and we will fire two somewhat conflicting actions:
+    // runSelectionToggled and singleRunSelected. This is ok as long as
+    // singleRunSelected is fired last.
     //
     // We are therefore relying on the mat-checkbox 'change' event consistently
     // being fired before the 'dblclick' event. Although we don't have any
@@ -709,7 +711,7 @@ export class RunsTableContainer implements OnInit, OnDestroy {
     // event.
     this.store.dispatch(
       singleRunSelected({
-        runId: item.run.id,
+        runId,
       })
     );
   }