chore: TrialsComparisonModal style fixes [WEB-1919] [WEB-1909] (#8674)

* z-index in header * hide column unselect if not in use; useMemo on right pane * stop playwright at v1.40
determined-ai · Jan 17, 2024 · 2e60167 · 2e60167
1 parent e8d6448
commit 2e60167
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 26 deletions.
diff --git a/webui/react/src/pages/ExperimentDetails/TrialsComparisonModal.module.scss b/webui/react/src/pages/ExperimentDetails/TrialsComparisonModal.module.scss
@@ -36,7 +36,7 @@
       background-color: var(--theme-background);
       position: sticky;
       top: 0;
-      z-index: 10;
+      z-index: 15;
     }
     th:first-of-type {
       background-clip: padding-box;
@@ -45,16 +45,10 @@
       position: sticky;
       text-align: left;
       width: 200px;
+      z-index: 10;
     }
   }
   .trialTag {
     font-size: 14px;
-
-    & * {
-      margin: 0;
-    }
-    :hover {
-      color: var(--theme-status-active);
-    }
   }
 }
diff --git a/webui/react/src/pages/ExperimentDetails/TrialsComparisonModal.tsx b/webui/react/src/pages/ExperimentDetails/TrialsComparisonModal.tsx
@@ -1,6 +1,8 @@
-import { Tag } from 'antd';
+import Button from 'hew/Button';
+import Icon from 'hew/Icon';
 import Message from 'hew/Message';
 import { Modal } from 'hew/Modal';
+import Row from 'hew/Row';
 import Select, { Option, SelectValue } from 'hew/Select';
 import Spinner from 'hew/Spinner';
 import { Label } from 'hew/Typography';
@@ -79,7 +81,7 @@ export const TrialsComparisonTable: React.FC<TableProps> = ({
   const [trialsDetails, setTrialsDetails] = useState(trials ?? []);
   const [selectedHyperparameters, setSelectedHyperparameters] = useState<string[]>([]);
   const [selectedMetrics, setSelectedMetrics] = useState<Metric[]>([]);
-  const colSpan = Array.isArray(experiment) ? experiment.length + 1 : 1;
+  const colSpan = (Array.isArray(experiment) ? experiment.length : trialIds?.length ?? 0) + 1;
 
   useEffect(() => {
     if (trialIds === undefined) return;
@@ -231,22 +233,23 @@ export const TrialsComparisonTable: React.FC<TableProps> = ({
               <tr>
                 <th />
                 {trialsDetails.map((trial) => (
-                  <th key={trial.id}>
-                    <Tag
-                      className={css.trialTag}
-                      closable={!!onUnselect}
-                      style={{ width: '100%' }}
-                      onClose={() => handleTrialUnselect(trial.id)}>
-                      <Link path={paths.trialDetails(trial.id, trial.experimentId)}>
-                        {Array.isArray(experiment) ? (
-                          <Label truncate={{ tooltip: true }}>
-                            {experimentMap[trial.experimentId]?.name}
-                          </Label>
-                        ) : (
-                          `Trial ${trial.id}`
-                        )}
-                      </Link>
-                    </Tag>
+                  <th className={css.trialTag} key={trial.id}>
+                    <Row justifyContent="space-between" width="fill">
+                      <Label truncate={{ tooltip: true }}>
+                        <Link path={paths.trialDetails(trial.id, trial.experimentId)}>
+                          {Array.isArray(experiment)
+                            ? experimentMap[trial.experimentId]?.name
+                            : `Trial ${trial.id}`}
+                        </Link>
+                      </Label>
+                      {onUnselect ? (
+                        <Button
+                          icon={<Icon name="close" size="tiny" title="close" />}
+                          size="small"
+                          onClick={() => handleTrialUnselect(trial.id)}
+                        />
+                      ) : null}
+                    </Row>
                   </th>
                 ))}
               </tr>