style: adjust layout for the experiment detail page

webui/react/src/pages/ExperimentDetails.module.scss

@@ -1,9 +1,5 @@
 .topRow {
-  display: flex;
-
-  section {
-    flex-grow: 1;
-  }
+  height: 40rem;
 }
 .error {
   margin: var(--theme-sizes-layout-medium) var(--theme-sizes-layout-large);

webui/react/src/pages/ExperimentDetails.tsx

@@ -1,13 +1,11 @@
-import { Alert, Button, Modal, Table, Tooltip } from 'antd';
+import { Alert, Button, Col, Modal, Row, Space, Table, Tooltip } from 'antd';
 import { ColumnType } from 'antd/lib/table';
-import ExperimentActions from 'components/ExperimentActions';
-import ExperimentChart from 'components/ExperimentChart';
-import ExperimentInfoBox from 'components/ExperimentInfoBox';
 import yaml from 'js-yaml';
 import React, { useCallback, useEffect, useState } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import { useParams } from 'react-router';
 
+import Badge, { BadgeType } from 'components/Badge';
 import CheckpointModal from 'components/CheckpointModal';
 import Icon from 'components/Icon';
 import { makeClickHandler } from 'components/Link';
@@ -223,9 +221,33 @@ const ExperimentDetailsComp: React.FC = () => {
         experiment={experiment}
         onClick={{ Fork: showForkModal }}
         onSettled={pollExperimentDetails} />}
-      subTitle={experiment?.config.description}
+      subTitle={<Space align="center" size="small">
+        {experiment?.config.description}
+        <Badge state={experiment.state} type={BadgeType.State} />
+      </Space>}
       title={`Experiment ${experimentId}`}>
-      <ExperimentInfoBox experiment={experiment} />
+      <Row className={css.topRow} gutter={[ 16, 16 ]}>
+        <Col lg={10} span={24} xl={8} xxl={6}>
+          <ExperimentInfoBox experiment={experiment} />
+        </Col>
+        <Col lg={14} span={24} xl={16} xxl={18}>
+          <ExperimentChart
+            startTime={experiment.startTime}
+            validationHistory={experiment.validationHistory}
+            validationMetric={experimentConfig?.searcher.metric} />
+        </Col>
+        <Col span={24}>
+          <Section title="Trials">
+            <Table
+              columns={columns}
+              dataSource={experiment?.trials}
+              loading={!experimentResponse.hasLoaded}
+              rowKey="id"
+              size="small"
+              onRow={handleTableRow} />
+          </Section>
+        </Col>
+      </Row>
       <Modal
         bodyStyle={{ padding: 0 }}
         className={css.forkModal}
@@ -248,19 +270,6 @@ const ExperimentDetailsComp: React.FC = () => {
           onChange={editorOnChange} />
         {forkError && <Alert className={css.error} message={forkError} type="error" />}
       </Modal>
-      <ExperimentChart
-        startTime={experiment.startTime}
-        validationHistory={experiment.validationHistory}
-        validationMetric={experimentConfig?.searcher.metric} />
-      <Section title="Trials">
-        <Table
-          columns={columns}
-          dataSource={experiment?.trials}
-          loading={!experimentResponse.hasLoaded}
-          rowKey="id"
-          size="small"
-          onRow={handleTableRow} />
-      </Section>
       {activeCheckpoint && <CheckpointModal
         checkpoint={activeCheckpoint}
         config={experiment.config}

webui/react/src/pages/ExperimentDetails/ExperimentActions.tsx

@@ -1,4 +1,4 @@
-import { Button, Popconfirm } from 'antd';
+import { Button, Popconfirm, Space } from 'antd';
 import React, { useCallback, useState } from 'react';
 
 import { ConditionalButton } from 'components/types';
@@ -8,8 +8,6 @@ import { ExperimentDetails, RunState, TBSourceType } from 'types';
 import { openCommand } from 'utils/routes';
 import { cancellableRunStates, killableRunStates, terminalRunStates } from 'utils/types';
 
-import css from './ExperimentActions.module.scss';
-
 export enum Action {
   Activate = 'Activate',
   Archive = 'Archive',
@@ -92,36 +90,42 @@ const ExperimentActions: React.FC<Props> = ({
   };
 
   const actionButtons: ConditionalButton<ExperimentDetails>[] = [
-    { button: <Button key="fork" type="primary" onClick={onClick[Action.Fork]}>Fork</Button> },
+    {
+      button: <Button key="activate" loading={buttonStates.Activate}
+        onClick={handleStateChange(RunState.Active)}>Activate</Button>,
+      showIf: (exp): boolean => exp.state === RunState.Paused,
+    },
+    {
+      button: <Button key="pause" loading={buttonStates.Pause}
+        onClick={handleStateChange(RunState.Paused)}>Pause</Button>,
+      showIf: (exp): boolean => exp.state === RunState.Active,
+    },
+    { button: <Button key="fork" onClick={onClick[Action.Fork]}>Fork</Button> },
     {
       button: <Button key="archive" loading={buttonStates.Archive}
-        type="primary" onClick={handleArchive(true)}>Archive</Button>,
+        onClick={handleArchive(true)}>Archive</Button>,
       showIf: (exp): boolean => terminalRunStates.has(exp.state) && !exp.archived,
     },
     {
       button: <Button key="unarchive" loading={buttonStates.Archive}
-        type="primary" onClick={handleArchive(false)}>Unarchive</Button>,
+        onClick={handleArchive(false)}>Unarchive</Button>,
       showIf: (exp): boolean => terminalRunStates.has(exp.state) && exp.archived,
     },
     {
-      button: <Button key="pause" loading={buttonStates.Pause}
-        type="primary" onClick={handleStateChange(RunState.Paused)}>Pause</Button>,
-      showIf: (exp): boolean => exp.state === RunState.Active,
-    },
-    {
-      button: <Button key="activate" loading={buttonStates.Activate}
-        type="primary" onClick={handleStateChange(RunState.Active)}>Activate</Button>,
-      showIf: (exp): boolean => exp.state === RunState.Paused,
+      button: <Button key="tensorboard"
+        loading={buttonStates.Tensorboard}
+        onClick={handleLaunchTensorboard}>Tensorboard</Button>,
+      showIf: (exp): boolean => !experimentWillNeverHaveData(exp),
     },
     {
       button: <Popconfirm
         cancelText="No"
         key="cancel"
         okText="Yes"
-        title="Are you sure you want to kill the experiment?"
+        title="Are you sure you want to cancel the experiment?"
         onConfirm={handleStateChange(RunState.StoppingCanceled)}
       >
-        <Button danger loading={buttonStates.Cancel} type="primary">Cancel</Button>
+        <Button danger loading={buttonStates.Cancel}>Cancel</Button>
       </Popconfirm>,
       showIf: (exp): boolean => cancellableRunStates.includes(exp.state),
     },
@@ -137,24 +141,16 @@ const ExperimentActions: React.FC<Props> = ({
       </Popconfirm>,
       showIf: (exp): boolean => killableRunStates.includes(exp.state),
     },
-    {
-      button: <Button key="tensorboard"
-        loading={buttonStates.Tensorboard}
-        type="primary"
-        onClick={handleLaunchTensorboard}>Tensorboard</Button>,
-      showIf: (exp): boolean => !experimentWillNeverHaveData(exp),
-    },
   ];
 
   return (
-    <ul className={css.base}>
+    <Space size="small">
       {actionButtons
         .filter(ab => !ab.showIf || ab.showIf(experiment as ExperimentDetails))
         .map(ab => ab.button)
       }
-    </ul>
+    </Space>
   );
-
 };
 
 export default ExperimentActions;

webui/react/src/pages/ExperimentDetails/ExperimentChart.module.scss

@@ -0,0 +1,6 @@
+.base {
+  border: solid var(--theme-sizes-border-width) var(--theme-colors-monochrome-12);
+  border-radius: var(--theme-sizes-border-radius);
+  height: 40rem;
+  padding: var(--theme-sizes-layout-big);
+}

webui/react/src/pages/ExperimentDetails/ExperimentChart.tsx

@@ -3,12 +3,13 @@ import { SelectValue } from 'antd/es/select';
 import Plotly, { PlotData, PlotlyHTMLElement, PlotRelayoutEvent } from 'plotly.js/lib/core';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import Section from 'components/Section';
+import SelectFilter from 'components/SelectFilter';
 import { ValidationHistory } from 'types';
 import { clone } from 'utils/data';
 import { capitalize, generateAlphaNumeric } from 'utils/string';
 
-import Section from './Section';
-import SelectFilter from './SelectFilter';
+import css from './ExperimentChart.module.scss';
 
 const { Option } = Select;
 
@@ -37,7 +38,7 @@ type PlotArguments = [
 ];
 
 const defaultLayout: Partial<Plotly.Layout> = {
-  height: 400,
+  height: 368,
   margin: { b: 50, l: 50, pad: 6, r: 10, t: 10 },
   xaxis: {
     hoverformat: '',
@@ -159,8 +160,10 @@ const ExperimentChart: React.FC<Props> = ({ validationMetric, ...props }: Props)
   );
 
   return (
-    <Section options={chartOptions} title={title}>
-      <div id={id} />
+    <Section maxHeight options={chartOptions} title={title}>
+      <div className={css.base}>
+        <div id={id} />
+      </div>
     </Section>
   );
 };

webui/react/src/pages/ExperimentDetails/ExperimentInfoBox.module.scss

@@ -1,14 +1,26 @@
 .base {
+  border: solid var(--theme-sizes-border-width) var(--theme-colors-monochrome-12);
+  border-radius: var(--theme-sizes-border-radius);
   color: var(--theme-colors-monochrome-9);
   font-size: var(--theme-sizes-layout-big);
-  margin-right: var(--theme-sizes-layout-medium);
+  height: 100%;
+  padding: var(--theme-sizes-layout-big);
 
-  table {
-    border-collapse: separate;
-    border-spacing: 1rem 1rem;
-  }
-  .label {
-    color: black;
-    font-weight: 700;
+  .info {
+    align-items: center;
+    display: flex;
+    padding: var(--theme-sizes-layout-medium) 0;
+
+    .label {
+      color: var(--theme-colors-monochrome-9);
+      flex-basis: 34%;
+      font-size: var(--theme-sizes-font-small);
+      max-width: 16rem;
+      padding-right: var(--theme-sizes-layout-medium);
+    }
+    .content {
+      color: var(--theme-colors-monochrome-6);
+      font-size: var(--theme-sizes-font-medium);
+    }
   }
 }