WIP breaking commit - add DatasetForm, DatasetTable, DatasetsTab, DeleteDataset

Author: acrellin

static/js/components/DatasetForm/index.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+let 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
+};

static/js/components/DatasetTable/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import DatasetInfo from '../containers/DatasetInfo';
+import DeleteDataset from '../containers/DeleteDataset';
+
+export let 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: React.PropTypes.arrayOf(React.PropTypes.object)
+};
+
+export default DatasetTable;

static/js/components/DatasetsTab/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { connect } from "react-redux";
+import { reduxForm } from 'redux-form';
+
+import { FormComponent, Form, TextInput, FileInput, SubmitButton } from '../Form/index';
+import DatasetForm from '../../containers/DatasetForm';
+import DatasetTable from '../../containers/DatasetTable';
+import Expand from '../Expand';
+
+
+const DatasetsTab = props => (
+  <div className="datasetsTab">
+
+    <Expand label="Upload new dataset" id="newDatasetExpander">
+      <DatasetForm selectedProject={props.selectedProject} />
+    </Expand>
+
+    <DatasetTable selectedProject={props.selectedProject} />
+
+  </div>
+);
+DatasetsTab.propTypes = {
+  selectedProject: React.PropTypes.object
+};
+
+export default DatasetsTab;

static/js/components/Main.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect, Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
 import ReactTabs from 'react-tabs';
+import PropTypes from 'prop-types';
 
 import 'bootstrap-css';
 import 'bootstrap';
@@ -11,12 +12,16 @@ import { Notifications } from 'baselayer/components/Notifications';
 import WebSocket from 'baselayer/components/WebSocket';
 import configureStore from '../configureStore';
 import * as Action from '../actions';
+import WebSocket from 'baselayer/components/WebSocket';
 import CesiumMessageHandler from '../CesiumMessageHandler';
-import { ProjectSelector, AddProject, ProjectTab } from './Projects';
+import AddProject from '../containers/AddProject';
+import ProjectSelector from '../containers/ProjectSelector';
+import ProjectTab from '../containers/ProjectTab';
 import DatasetsTab from './Datasets';
 import FeaturesTab from './Features';
 import ModelsTab from './Models';
 import PredictTab from './Predictions';
+import { Notifications } from 'baselayer/components/Notifications';
 import colorScheme from './colorscheme';
 import Progress from './Progress';
 import CesiumTooltip from './Tooltip';

static/js/containers/DatasetForm/DatasetForm.jsx/index.jsx

@@ -0,0 +1,34 @@
+import reduxForm from 'redux-form';
+
+import * as Validate from '../../validate';
+import * as Action from '../../actions';
+import DatasetForm from '../../containers/DatasetForm';
+
+
+const mapStateToProps = (state, ownProps) => (
+  {
+    initialValues: {
+      ...(ownProps.initialValues),
+      projectID: ownProps.selectedProject.id
+    }
+  }
+);
+
+const mapDispatchToProps = (dispatch, ownProps) => (
+  {
+    onSubmit: form => (
+      dispatch(Action.uploadDataset(form))
+    )
+  }
+);
+
+const validate = Validate.createValidator({
+  datasetName: [Validate.required],
+  tarFile: [Validate.oneFile],
+});
+
+export default reduxForm({
+  form: 'newDataset',
+  fields: ['datasetName', 'headerFile', 'tarFile', 'projectID'],
+  validate
+}, dsMapStateToProps, dsMapDispatchToProps)(DatasetForm);

static/js/containers/DatasetForm/index.jsx

@@ -0,0 +1,34 @@
+import { reduxForm } from 'redux-form';
+
+import * as Validate from '../../validate';
+import * as Action from '../../actions';
+import DatasetForm from '../../components/DatasetForm';
+
+
+const mapStateToProps = (state, ownProps) => (
+  {
+    initialValues: {
+      ...(ownProps.initialValues),
+      projectID: ownProps.selectedProject.id
+    }
+  }
+);
+
+const mapDispatchToProps = (dispatch, ownProps) => (
+  {
+    onSubmit: form => (
+      dispatch(Action.uploadDataset(form))
+    )
+  }
+);
+
+const validate = Validate.createValidator({
+  datasetName: [Validate.required],
+  tarFile: [Validate.oneFile],
+});
+
+export default reduxForm({
+  form: 'newDataset',
+  fields: ['datasetName', 'headerFile', 'tarFile', 'projectID'],
+  validate
+}, mapStateToProps, mapDispatchToProps)(DatasetForm);

static/js/containers/DatasetTable/index.jsx

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+
+import DatasetTable from '../../components/DatasetTable';
+
+
+const mapStateToProps = (state, ownProps) => (
+  {
+    datasets: state.datasets.filter(dataset => (
+      dataset.project_id === ownProps.selectedProject.id
+    ))
+  }
+);
+
+export default connect(mapStateToProps)(DatasetTable);

static/js/containers/DeleteDataset/index.jsx

@@ -0,0 +1,10 @@
+import { connect } from "react-redux";
+
+import * as Action from '../actions';
+
+
+const mapDispatchToProps = dispatch => (
+  { delete: id => dispatch(Action.deleteDataset(id)) }
+);
+
+export default connect(null, mapDispatchToProps)(Delete);