Make selected trials consistent across auto-refresh in detail table (#3597)

Co-authored-by: Lijiao <Lijiaoa@outlook.com>

ts/webui/src/components/modals/Compare.tsx

@@ -51,6 +51,7 @@ interface CompareProps {
     title: string;
     showDetails: boolean;
     onHideDialog: () => void;
+    changeSelectTrialIds?: () => void;
 }
 
 class Compare extends React.Component<CompareProps, {}> {
@@ -196,8 +197,17 @@ class Compare extends React.Component<CompareProps, {}> {
         );
     }
 
+    private closeCompareModal = (): void => {
+        const { showDetails, changeSelectTrialIds, onHideDialog } = this.props;
+        if (showDetails === true) {
+            // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+            changeSelectTrialIds!();
+        }
+        onHideDialog();
+    };
+
     render(): React.ReactNode {
-        const { onHideDialog, trials, title, showDetails } = this.props;
+        const { trials, title, showDetails } = this.props;
         const flatten = (m: Map<SingleAxis, any>): Map<string, any> => {
             return new Map(Array.from(m).map(([key, value]) => [key.baseName, value]));
         };
@@ -218,7 +228,7 @@ class Compare extends React.Component<CompareProps, {}> {
                 className='compare-modal'
                 allowTouchBodyScroll={true}
                 dragOptions={dragOptions}
-                onDismiss={onHideDialog}
+                onDismiss={this.closeCompareModal}
             >
                 <div>
                     <div className={contentStyles.header}>
@@ -227,7 +237,7 @@ class Compare extends React.Component<CompareProps, {}> {
                             styles={iconButtonStyles}
                             iconProps={{ iconName: 'Cancel' }}
                             ariaLabel='Close popup modal'
-                            onClick={onHideDialog}
+                            onClick={this.closeCompareModal}
                         />
                     </div>
                     <Stack className='compare-modal-intermediate'>

ts/webui/src/components/modals/tensorboard/TensorboardUI.tsx

@@ -9,7 +9,7 @@ import TensorboardDialog from './TensorboardDialog';
 
 function TensorboardUI(props): any {
     let refreshTensorboard = 0;
-    const { selectedRowIds } = props;
+    const { selectedRowIds, changeSelectTrialIds } = props;
     const [queryTensorboardList, setQueryTensorboardList] = useState([]);
     const [isReaptedStartTensorboard, setReaptedTensorboard] = useState(false);
     const [tensorboardPanelVisible, setTensorboardPanelVisible] = useState(false);
@@ -130,6 +130,7 @@ function TensorboardUI(props): any {
                     item={selectedTensorboard}
                     onHideDialog={(): void => {
                         setTensorboardPanelVisible(false);
+                        changeSelectTrialIds();
                     }}
                 />
             )}
@@ -138,7 +139,8 @@ function TensorboardUI(props): any {
 }
 
 TensorboardUI.propTypes = {
-    selectedRowIds: PropTypes.array
+    selectedRowIds: PropTypes.array,
+    changeSelectTrialIds: PropTypes.func
 };
 
 export default TensorboardUI;

ts/webui/src/components/trial-detail/TableList.tsx

@@ -6,12 +6,11 @@ import {
     Icon,
     IDropdownOption,
     PrimaryButton,
-    Selection,
-    SelectionMode,
     Stack,
     StackItem,
     TooltipHost,
-    DirectionalHint
+    DirectionalHint,
+    Checkbox
 } from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { TOOLTIP_BACKGROUND_COLOR } from '../../static/const';
@@ -95,7 +94,6 @@ interface TableListState {
 }
 
 class TableList extends React.Component<TableListProps, TableListState> {
-    private _selection: Selection;
     private _expandedTrialIds: Set<string>;
 
     constructor(props: TableListProps) {
@@ -119,14 +117,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
             sortInfo: { field: '', isDescend: true }
         };
 
-        this._selection = new Selection({
-            onSelectionChanged: (): void => {
-                this.setState({
-                    selectedRowIds: this._selection.getSelection().map(s => (s as any).id)
-                });
-            }
-        });
-
         this._expandedTrialIds = new Set<string>();
     }
 
@@ -185,10 +175,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
         // TODO: use search space and metrics space from TRIALS will cause update issues.
         const searchSpace = TRIALS.inferredSearchSpace(EXPERIMENT.searchSpaceNew);
         const metricSpace = TRIALS.inferredMetricSpace();
+        const { selectedRowIds } = this.state;
         const items = trials.map(trial => {
             const ret = {
                 sequenceId: trial.sequenceId,
                 id: trial.id,
+                checked: selectedRowIds.includes(trial.id) ? true : false,
                 startTime: (trial as Trial).info.startTime, // FIXME: why do we need info here?
                 endTime: (trial as Trial).info.endTime,
                 duration: trial.duration,
@@ -216,9 +208,58 @@ class TableList extends React.Component<TableListProps, TableListState> {
         }
     }
 
+    private selectedTrialOnChangeEvent = (
+        id: string,
+        _ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+        checked?: boolean
+    ): void => {
+        const { displayedItems, selectedRowIds } = this.state;
+        const items = JSON.parse(JSON.stringify(displayedItems));
+        const temp = selectedRowIds;
+        if (checked === true) {
+            temp.push(id);
+        }
+        items.forEach(item => {
+            if (item.id === id) {
+                item.checked = !!checked;
+            }
+        });
+        this.setState(() => ({ displayedItems: items, selectedRowIds: temp }));
+    };
+
+    private changeSelectTrialIds = (): void => {
+        const { displayedItems } = this.state;
+        const newDisplayedItems = displayedItems;
+        newDisplayedItems.forEach(item => {
+            item.checked = false;
+        });
+        this.setState(() => ({
+            selectedRowIds: [],
+            displayedItems: newDisplayedItems
+        }));
+    };
+
     private _buildColumnsFromTableItems(tableItems: any[]): IColumn[] {
-        // extra column, for a icon to expand the trial details panel
         const columns: IColumn[] = [
+            // select trial function
+            {
+                name: '',
+                key: '_selected',
+                fieldName: 'selected',
+                minWidth: 20,
+                maxWidth: 20,
+                isResizable: true,
+                className: 'detail-table',
+                onRender: (record): React.ReactNode => (
+                    <Checkbox
+                        label={undefined}
+                        checked={record.checked}
+                        className='detail-check'
+                        onChange={this.selectedTrialOnChangeEvent.bind(this, record.id)}
+                    />
+                )
+            },
+            // extra column, for a icon to expand the trial details panel
             {
                 key: '_expand',
                 name: '',
@@ -265,6 +306,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 maxWidth: 20
             }
         ];
+
         // looking at the first row only for now
         for (const k of Object.keys(tableItems[0])) {
             if (k === 'metric/default') {
@@ -493,7 +535,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
                             }}
                             disabled={selectedRowIds.length === 0}
                         />
-                        <TensorboardUI selectedRowIds={selectedRowIds} />
+                        <TensorboardUI
+                            selectedRowIds={selectedRowIds}
+                            changeSelectTrialIds={this.changeSelectTrialIds}
+                        />
                     </StackItem>
                     <StackItem grow={50}>
                         <Stack horizontal horizontalAlign='end' className='allList'>
@@ -531,12 +576,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     <PaginationTable
                         columns={columns.filter(
                             column =>
-                                displayedColumns.includes(column.key) || ['_expand', '_operation'].includes(column.key)
+                                displayedColumns.includes(column.key) ||
+                                ['_expand', '_operation', '_selected'].includes(column.key)
                         )}
                         items={displayedItems}
                         compact={true}
-                        selection={this._selection}
-                        selectionMode={SelectionMode.multiple}
+                        selectionMode={0}
                         selectionPreservedOnEmptyClick={true}
                         onRenderRow={(props): any => {
                             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -552,6 +597,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         onHideDialog={(): void => {
                             this.setState({ compareDialogVisible: false });
                         }}
+                        changeSelectTrialIds={this.changeSelectTrialIds}
                     />
                 )}
                 {intermediateDialogTrial !== undefined && (

ts/webui/src/static/style/table.scss

@@ -59,3 +59,22 @@
     max-height: 335px;
     overflow-y: auto;
 }
+
+$checkboxwidth: 17px;
+
+.detail-check {
+    .ms-Checkbox-checkbox {
+        width: $checkboxwidth;
+        height: $checkboxwidth;
+        border-radius: 50%;
+        border: none;
+
+        &:hover {
+            border: 1px solid grey;
+        }
+
+        i {
+            width: 12px;
+        }
+    }
+}