Separating presentational and container components

requirements.txt

@@ -1,4 +1,4 @@
-cesium>=0.9.5
+cesium>=0.9.6
 joblib>=0.11
 bokeh==0.12.5
 pytest-randomly

static/js/components/AddProject/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Expand from '../Expand';
+import NewProjectForm from '../../containers/NewProjectForm';
+
+
+const AddProject = ({ id, label, addProject, style }) => {
+  const expandBoxStyle = {
+    zIndex: 1000,
+    position: 'relative',
+    width: 500,
+    WebkitBoxShadow: '0 0 5px black',
+    MozBoxShadow: '0 0 5px black',
+    boxShadow: '0 0 5px black',
+    color: 'black'
+  };
+  return (
+    <Expand
+      id={id}
+      label={label || "Add Project"}
+      expandBoxStyle={expandBoxStyle}
+      style={style}
+    >
+      <NewProjectForm label="Create Project" onSubmit={addProject} />
+    </Expand>
+  );
+};
+
+AddProject.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  addProject: PropTypes.func.isRequired,
+  style: PropTypes.object
+};
+AddProject.defaultProps = {
+  style: {}
+};
+
+
+export default AddProject;

static/js/components/DatasetForm/index.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Form, TextInput, FileInput, SubmitButton } from '../Form';
+import CesiumTooltip from '../Tooltip';
+
+
+const DatasetForm = (props) => {
+  const { fields: { datasetName, headerFile, tarFile },
+          error, handleSubmit, submitting } = props;
+
+  const description = {
+    fontStyle: 'italic',
+    paddingBottom: '1em'
+  };
+
+  return (
+    <div>
+      <Form onSubmit={handleSubmit} error={error}>
+        <TextInput label="Dataset Name" {...datasetName} />
+        <FileInput
+          label="Header File"
+          {...headerFile}
+          data-tip
+          data-for="headerfileTooltip"
+        />
+
+        <div style={description}>
+          {'Format: comma-separated with columns "filename" (of a time series from the uploaded archive), "label" (class label or numerical value), and any metafeatures (numerical).'}
+        </div>
+
+        <FileInput
+          label="Data Tarball"
+          {...tarFile}
+          data-tip
+          data-for="tarfileTooltip"
+        />
+        <div style={description}>
+          {'Format: zipfile or tarfile containing time series files, each of which is comma-separated with columns "time", "value", "error" (optional).'}
+        </div>
+
+        <SubmitButton label="Upload Dataset" disabled={submitting} />
+      </Form>
+
+      <CesiumTooltip
+        id="headerfileTooltip"
+        text={["filename,label", <br />, "ts1.dat,class_A", <br />, "..."]}
+      />
+      <CesiumTooltip
+        id="tarfileTooltip"
+        text={[
+          "Each file in tarball should be formatted as follows",
+          <br />, "(column titles are optional)", <br />, <br />,
+          "time,value,error", <br />,
+          "125912.23,12.31604,0.279105", <br />,
+          "..."]}
+      />
+
+    </div>
+  );
+};
+DatasetForm.propTypes = {
+  fields: PropTypes.object.isRequired,
+  error: PropTypes.string,
+  handleSubmit: PropTypes.func.isRequired,
+  submitting: PropTypes.bool.isRequired
+};
+DatasetForm.defaultProps = {
+  error: ""
+};
+
+export default DatasetForm;

static/js/components/DatasetInfo/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const DatasetInfo = props => (
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Time Series File Names</th>
+        <th>Meta Features</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          {props.dataset.files.join(', ')}
+        </td>
+        <td>
+          {props.dataset.meta_features.join(', ')}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+);
+DatasetInfo.propTypes = {
+  dataset: PropTypes.object.isRequired
+};
+
+export default DatasetInfo;

static/js/components/DatasetTable/index.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import DatasetInfo from '../../components/DatasetInfo';
+import DeleteDataset from '../../containers/DeleteDataset';
+import FoldableRow from '../FoldableRow';
+import { reformatDatetime } from '../../utils';
+
+
+const DatasetTable = props => (
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Name</th><th>Uploaded</th><th>Actions</th>
+      </tr>
+    </thead>
+
+    {
+      props.datasets.map((dataset, idx) => {
+        const foldedContent = (
+          <tr key={`dsinfo_${idx}`}>
+            <td colSpan={6}>
+              <DatasetInfo dataset={dataset} />
+            </td>
+          </tr>
+        );
+
+        return (
+          <FoldableRow key={`ds_${idx}`}>
+            <tr key={dataset.id}>
+              <td>{dataset.name}</td>
+              <td>{reformatDatetime(dataset.created_at)}</td>
+              <td><DeleteDataset ID={dataset.id} /></td>
+            </tr>
+            {foldedContent}
+          </FoldableRow>
+        );
+      })
+    }
+
+  </table>
+);
+DatasetTable.propTypes = {
+  datasets: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default DatasetTable;