Merge pull request #316 from makky3939/feature/layout_result_type_sel…

…ector Tweaked the layout of result type selector
chainer · Aug 5, 2019 · 8968f2f · 8968f2f
2 parents efbbe11 + b3bd984
commit 8968f2f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/frontend/src/components/ResultTypeSelector.jsx b/frontend/src/components/ResultTypeSelector.jsx
@@ -1,26 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from './FormControl/Select';
+import { Button, ButtonGroup } from 'reactstrap';
 
 import * as uiPropTypes from '../store/uiPropTypes';
 import { fetchResultTypes } from '../constants/index';
 
 const ResultTypeSelector = (props) => {
   const { value, onChange } = props;
 
-  const handleChangeFetchResultType = (e) => {
+  const handleChangeFetchResultType = (typeId) => {
     const { projectId } = props;
-    onChange(projectId, e.target.value);
+    onChange(projectId, typeId);
   };
 
   return (
-    <div className="mb-3">
-      <Select
-        id="result-type"
-        options={fetchResultTypes}
-        onChange={handleChangeFetchResultType}
-        value={value}
-      />
+    <div className="mt-1 mb-2">
+      <ButtonGroup>
+        <Button
+          onClick={() => handleChangeFetchResultType(fetchResultTypes[0].id)}
+          active={value === fetchResultTypes[0].id}
+        >
+          {fetchResultTypes[0].name}
+        </Button>
+        <Button
+          onClick={() => handleChangeFetchResultType(fetchResultTypes[1].id)}
+          active={value === fetchResultTypes[1].id}
+        >
+          {fetchResultTypes[1].name}
+        </Button>
+      </ButtonGroup>
     </div>
   );
 };

diff --git a/frontend/src/containers/PlotContainer.jsx b/frontend/src/containers/PlotContainer.jsx
@@ -99,11 +99,6 @@ class PlotContainer extends React.Component {
                 globalConfig={globalConfig}
                 project={project}
               />
-              <ResultTypeSelector
-                projectId={projectId}
-                value={projectConfig.resultType}
-                onChange={this.props.updateTargetResultType}
-              />
               <SideBar
                 project={project}
                 results={results}
@@ -131,6 +126,11 @@ class PlotContainer extends React.Component {
                 onResultSelect={this.props.updateResultSelect}
                 onAxisConfigLineUpdate={this.props.updateLineInAxis}
               />
+              <ResultTypeSelector
+                projectId={projectId}
+                value={projectConfig.resultType}
+                onChange={this.props.updateTargetResultType}
+              />
               <ExperimentsTable
                 project={project}
                 results={results}