[dashboard/experiments/navbar] Remove (x) icon on experiment menu and rely on highlight only

dashboard/src/src/__tests__/VisualizationsPage.test.js

@@ -91,10 +91,10 @@ test('Test if we can select and unselect experiments', async () => {
   ).toBeInTheDocument();
 
   // Unselect experiment
-  const span = screen.queryByTitle(/unselect experiment '2-dim-shape-exp'/);
-  expect(span).toBeInTheDocument();
-  expect(span.tagName.toLowerCase()).toBe('span');
-  fireEvent.click(span);
+  const row = screen.queryByTitle(/unselect experiment '2-dim-shape-exp'/);
+  expect(row).toBeInTheDocument();
+  expect(row.tagName.toLowerCase()).toBe('label');
+  fireEvent.click(row);
   expect((await screen.findAllByText(/Nothing to display/)).length).toBe(3);
   expect(
     screen.queryByText(/Regret for experiment '2-dim-shape-exp'/)

dashboard/src/src/__tests__/experiments.databasePage.test.js

@@ -53,14 +53,14 @@ test('Test if experiment trials are loaded', async () => {
     )
   ).toBeInTheDocument();
   expect(
-    screen.queryByText(/0915da146c84975df9bdf4c3ee9376dc/)
+    screen.queryByTitle(/0f886905874af10a6db412885341ae0b/)
   ).toBeInTheDocument();
 
   // Unselect experiment
-  const span = screen.queryByTitle(/unselect experiment '2-dim-shape-exp'/);
-  expect(span).toBeInTheDocument();
-  expect(span.tagName.toLowerCase()).toBe('span');
-  fireEvent.click(span);
+  const row = screen.queryByTitle(/unselect experiment '2-dim-shape-exp'/);
+  expect(row).toBeInTheDocument();
+  expect(row.tagName.toLowerCase()).toBe('label');
+  fireEvent.click(row);
   expect(
     await screen.findByText(
       /No trials to display, please select an experiment\./
@@ -73,7 +73,7 @@ test('Test if experiment trials are loaded', async () => {
       { interval: 1000, timeout: 120000 }
     )
   ).toBeNull();
-  expect(screen.queryByText(/0915da146c84975df9bdf4c3ee9376dc/)).toBeNull();
+  expect(screen.queryByTitle(/0f886905874af10a6db412885341ae0b/)).toBeNull();
 
   // re-select experiment and check if trials are loaded
   fireEvent.click(experiment);
@@ -85,7 +85,7 @@ test('Test if experiment trials are loaded', async () => {
     )
   ).toBeInTheDocument();
   expect(
-    screen.queryByText(/0915da146c84975df9bdf4c3ee9376dc/)
+    screen.queryByTitle(/0f886905874af10a6db412885341ae0b/)
   ).toBeInTheDocument();
 
   // Select another experiment and check if trials are loaded
@@ -103,6 +103,6 @@ test('Test if experiment trials are loaded', async () => {
     screen.queryByText(/20 trial\(s\) for experiment "tpe-rosenbrock"/)
   ).toBeInTheDocument();
   expect(
-    screen.queryByText(/081134e84076d4c4aba210e88d0dce81/)
+    screen.queryByTitle(/15f4ed436861d25de9be04db9837a70c/)
   ).toBeInTheDocument();
 });

dashboard/src/src/experiments/components/ExperimentNavBar/ExperimentNavBar.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ProgressBar from 'react-bootstrap/ProgressBar';
-import { CloseFilled16 } from '@carbon/icons-react';
 import { Backend } from '../../../utils/queryServer';
 import { BackendContext } from '../../BackendContext';
 
@@ -15,10 +14,6 @@ import {
   Search,
 } from 'carbon-components-react';
 
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
-
 export class ExperimentNavBar extends React.Component {
   _isMounted = false;
   static contextType = BackendContext;
@@ -30,7 +25,7 @@ export class ExperimentNavBar extends React.Component {
       search: '',
     };
     this.onSearch = this.onSearch.bind(this);
-    this.onUnselect = this.onUnselect.bind(this);
+    this.onSwitchSelect = this.onSwitchSelect.bind(this);
   }
   render() {
     return (
@@ -82,7 +77,22 @@ export class ExperimentNavBar extends React.Component {
       experiments = this.state.experiments;
     }
     return experiments.map(experiment => (
-      <StructuredListRow label key={`row-${experiment}`}>
+      <StructuredListRow
+        label
+        key={`row-${experiment}`}
+        onClick={event =>
+          this.onSwitchSelect(
+            event,
+            experiment,
+            `select-experiment-${experiment}`
+          )
+        }
+        {...(this.context.experiment === experiment
+          ? {
+              className: 'selected-experiment-row',
+              title: `unselect experiment '${experiment}'`,
+            }
+          : {})}>
         <StructuredListInput
           id={`select-experiment-${experiment}`}
           value={`row-${experiment}`}
@@ -91,25 +101,6 @@ export class ExperimentNavBar extends React.Component {
           onChange={() => this.props.onSelectExperiment(experiment)}
         />
         <StructuredListCell className="experiment-cell">
-          <span
-            title={`unselect experiment '${experiment}'`}
-            style={{
-              visibility:
-                this.context.experiment === experiment ? 'visible' : 'hidden',
-            }}
-            onClick={event =>
-              this.onUnselect(
-                event,
-                experiment,
-                `select-experiment-${experiment}`
-              )
-            }>
-            <CloseFilled16
-              className={`${prefix}--structured-list-svg`}
-              aria-label="unselect experiment">
-              <title>unselect experiment</title>
-            </CloseFilled16>
-          </span>{' '}
           <span title={experiment}>{experiment}</span>
         </StructuredListCell>
         <StructuredListCell>
@@ -156,27 +147,12 @@ export class ExperimentNavBar extends React.Component {
   onSearch(event) {
     this.setState({ search: (event.target.value || '').toLowerCase() });
   }
-  onUnselect(event, experiment, inputID) {
-    /*
-     * By default, a click anywhere in experiment line (including on cross icon)
-     * will select the experiment.
-     * Here, we want to click on cross icon to deselect experiment.
-     * So, we must prevent click on cross icon to act like click on experiment
-     * line.
-     * To do that, we call event's preventDefault() method to cancel default
-     * behavior.
-     * */
+  onSwitchSelect(event, experiment, inputID) {
+    // Prevent default behavior, as we entirely handle click here.
     event.preventDefault();
-    /*
-     * Uncheck hidden radiobutton input associated to selected experiment.
-     * This is necessary to allow to immediately click again to experiment
-     * line to re-select experiment.
-     * */
-    document.getElementById(inputID).checked = false;
-    /*
-     * Tell global interface to unselect experiment
-     * */
-    this.props.onSelectExperiment(null);
+    const toBeSelected = this.context.experiment !== experiment;
+    document.getElementById(inputID).checked = toBeSelected;
+    this.props.onSelectExperiment(toBeSelected ? experiment : null);
   }
 }
 

dashboard/src/src/style.css

@@ -29,3 +29,10 @@ a.bx--header__menu-item.bx--header__menu-title[aria-label='benchmarks (selected)
 .bx--grid.object-to-grid .bx--col.object-to-grid-key {
   padding-right: 0.5rem;
 }
+
+.bx--structured-list-row.selected-experiment-row {
+  background-color: lightgray;
+}
+.bx--structured-list-row.selected-experiment-row .bx--structured-list-td {
+  font-weight: bold;
+}