Refactor Models tab components into presentational and container components

Author: acrellin

static/js/components/Main.jsx

@@ -17,7 +17,7 @@ import ProjectSelector from '../containers/ProjectSelector';
 import ProjectTab from '../containers/ProjectTab';
 import DatasetsTab from './DatasetsTab';
 import FeaturesTab from '../containers/FeaturesTab';
-import ModelsTab from './Models';
+import ModelsTab from './ModelsTab';
 import PredictTab from './Predictions';
 import colorScheme from './colorscheme';
 import Progress from './Progress';

static/js/components/ModelInfo/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ModelInfo = props => (
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Model Type</th>
+        <th>Hyperparameters</th>
+        <th>Training Data Score</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          {props.model.type}
+        </td>
+        <td>
+          <table>
+            <tbody>
+              {
+                Object.keys(props.model.params).map((param, idx) => (
+                  <tr key={idx}>
+                    <td>{param}</td>
+                    <td style={{ paddingLeft: "5px" }}>{JSON.stringify(props.model.params[param])}</td>
+                  </tr>
+                ))
+              }
+            </tbody>
+          </table>
+        </td>
+        <td>
+          {props.model.train_score}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+);
+ModelInfo.propTypes = {
+  model: PropTypes.object.isRequired
+};
+
+export default ModelInfo;

static/js/components/ModelParamsForm/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { TextInput, CheckBoxInput } from '../Form';
+
+
+const ModelParamsForm = (props) => {
+  const style = {
+  };
+
+  const { model } = { ...props };
+
+  return (
+    <div style={style}>
+      <h3>{model.name}</h3>
+      {model.params.map((param, idx) => {
+         const pProps = props[param.name];
+         if (param.type === 'bool') {
+           return <CheckBoxInput key={idx} label={param.name} {...(pProps)} />;
+         } else {
+           return <TextInput key={idx} label={param.name} {...(pProps)} />;
+         }
+      })}
+    </div>
+  );
+};
+
+export default ModelParamsForm;

static/js/components/Models.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Expand from '../Expand';
+import ModelsTable from '../../containers/ModelsTable';
+import NewModelForm from '../../containers/NewModelForm';
+
+
+const ModelsTab = props => (
+  <div>
+    <Expand label="Create New Model" id="newModelExpander">
+      <NewModelForm selectedProject={props.selectedProject} />
+    </Expand>
+
+    <ModelsTable selectedProject={props.selectedProject} />
+  </div>
+);
+ModelsTab.propTypes = {
+  selectedProject: PropTypes.object
+};
+ModelsTab.defaultProps = {
+  selectedProject: null
+};
+
+export default ModelsTab;