Add upload features functionality

Author: acrellin

cesium_app/app_server.py

@@ -15,6 +15,7 @@
     ProjectHandler,
     DatasetHandler,
     FeatureHandler,
+    PrecomputedFeaturesHandler,
     ModelHandler,
     PredictionHandler,
     FeatureListHandler,
@@ -58,6 +59,7 @@ def make_app(cfg, baselayer_handlers, baselayer_settings):
         (r'/dataset(/.*)?', DatasetHandler),
         (r'/features(/[0-9]+)?', FeatureHandler),
         (r'/features/([0-9]+)/(download)', FeatureHandler),
+        (r'/precomputed_features(/.*)?', PrecomputedFeaturesHandler),
         (r'/models(/[0-9]+)?', ModelHandler),
         (r'/models/([0-9]+)/(download)', ModelHandler),
         (r'/predictions(/[0-9]+)?', PredictionHandler),

cesium_app/handlers/__init__.py

@@ -10,3 +10,4 @@
 from .plot_features import PlotFeaturesHandler
 from .prediction import PredictionHandler, PredictRawDataHandler
 from .sklearn_models import SklearnModelsHandler
+from .feature import PrecomputedFeaturesHandler

cesium_app/handlers/feature.py

@@ -13,6 +13,7 @@
 from os.path import join as pjoin
 import uuid
 import datetime
+from io import StringIO
 import pandas as pd
 
 

static/js/actions.js

@@ -438,6 +438,55 @@ export function computeFeatures(form) {
 }
 
 
+export function uploadFeatureset(form, currentProject) {
+
+  function fileReaderPromise(form, fileName, binary = false){
+    return new Promise(resolve => {
+      var filereader = new FileReader();
+      if (binary) {
+        filereader.readAsDataURL(form[fileName][0]);
+      } else {
+        filereader.readAsText(form[fileName][0]);
+      }
+      filereader.onloadend = () => resolve({ body: filereader.result,
+                                             name: form[fileName][0].name });
+    });
+  }
+
+  form['projectID'] = currentProject.id;
+
+  return dispatch =>
+    promiseAction(
+      dispatch,
+      UPLOAD_DATASET,
+
+      fileReaderPromise(form, 'dataFile')
+        .then(data => {
+          form['dataFile'] = data;
+          return fetch('/precomputed_features', {
+            credentials: 'same-origin',
+            method: 'POST',
+            body: JSON.stringify(form),
+            headers: new Headers({
+              'Content-Type': 'application/json'
+            })
+          })
+        })
+        .then(response => response.json())
+        .then((json) => {
+          if (json.status == 'success') {
+            dispatch(showNotification('Successfully uploaded new feature set'));
+            dispatch(hideExpander('uploadFeatsFormExpander'));
+            dispatch(resetForm('uploadFeatures'));
+          } else {
+            return Promise.reject({ _error: json.message });
+          }
+          return json;
+        })
+    );
+}
+
+
 export function deleteDataset(id) {
   return dispatch =>
     promiseAction(

static/js/components/Features.jsx

@@ -56,9 +56,11 @@ FeaturesTab.defaultProps = {
   selectedProject: {}
 };
 
-const ftMapDispatchToProps = dispatch => (
+const ftMapDispatchToProps = (dispatch, ownProps) => (
   {
-    computeFeatures: form => dispatch(Action.computeFeatures(form))
+    computeFeatures: form => dispatch(Action.computeFeatures(form)),
+    uploadFeatures: form => dispatch(
+      Action.uploadFeatureset(form, ownProps.selectedProject))
   }
 );
 

static/js/components/FeaturesetsTable.jsx

@@ -2,6 +2,10 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import { reformatDatetime } from '../utils';
+import Plot from './Plot';
+import FoldableRow from './FoldableRow';
+import Delete from './Delete';
+import * as Action from '../actions';
 
 
 const FeaturesetsTable = props => (
@@ -60,4 +64,10 @@ const ftMapStateToProps = (state, ownProps) => (
   }
 );
 
+const deleteMapDispatchToProps = dispatch => (
+  { delete: id => dispatch(Action.deleteFeatureset(id)) }
+);
+
+const DeleteFeatureset = connect(null, deleteMapDispatchToProps)(Delete);
+
 export default connect(ftMapStateToProps)(FeaturesetsTable);

static/js/components/FeaturizeForm.jsx

@@ -7,6 +7,7 @@ import { FormComponent, Form, TextInput, TextareaInput, SubmitButton,
          CheckBoxInput, SelectInput } from './Form';
 import Expand from './Expand';
 import { contains } from '../utils';
+import * as Action from '../actions';
 
 
 const Tab = ReactTabs.Tab;
@@ -29,7 +30,7 @@ const FeaturizeForm = (props) => {
       <Form onSubmit={handleSubmit} error={error}>
         <SubmitButton
           label="Compute Selected Features"
-          submiting={submitting}
+          disabled={submitting}
           resetForm={resetForm}
         />
         <TextInput label="Feature Set Name" {...featuresetName} />

static/js/components/UploadFeaturesForm.jsx

@@ -1,13 +1,85 @@
 import React from 'react';
+import { reduxForm } from 'redux-form';
+
+import { FormComponent, Form, TextInput, TextareaInput, SubmitButton,
+         CheckBoxInput, SelectInput, FileInput } from './Form';
+import * as Validate from '../validate';
+import CesiumTooltip from './Tooltip';
 
 
 const UploadFeaturesForm = props => {
+  const { fields, fields: { datasetID, featuresetName, dataFile },
+          handleSubmit, submitting, resetForm, error, featuresList,
+          featureDescriptions } = props;
+  const datasets = props.datasets.map(ds => (
+    { id: ds.id,
+      label: ds.name }
+  ));
+
   return (
     <div>
-      Upload Features Form content
+      <Form onSubmit={handleSubmit} error={error}>
+        <TextInput label="Feature Set Name" {...featuresetName} />
+        <SelectInput
+          label="Select Associated Featureset"
+          key={props.selectedProject.id}
+          options={[{ label: 'No associated dataset', id: 'None' }, ...datasets]}
+          {...datasetID}
+        />
+        <FileInput
+          label="Data File"
+          {...dataFile}
+          data-tip
+          data-for="dataFileTooltip"
+        />
+        <SubmitButton
+          label="Upload Features"
+          disabled={submitting}
+          resetForm={resetForm}
+        />
+      </Form>
+      <CesiumTooltip
+        id="dataFileTooltip"
+        text="File format must match that of downloaded feature set"
+      />
     </div>
   );
 };
 
+UploadFeaturesForm.propTypes = {
+  fields: React.PropTypes.object.isRequired,
+  datasets: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+  error: React.PropTypes.string,
+  handleSubmit: React.PropTypes.func.isRequired,
+  submitting: React.PropTypes.bool.isRequired,
+  resetForm: React.PropTypes.func.isRequired,
+  selectedProject: React.PropTypes.object
+};
+
+
+const mapStateToProps = (state, ownProps) => {
+
+  const initialValues = { };
+
+  const filteredDatasets = state.datasets.filter(dataset =>
+    (dataset.project_id === ownProps.selectedProject.id));
+
+  return {
+    datasets: filteredDatasets,
+    fields: ['datasetID', 'featuresetName', 'dataFile'],
+    initialValues: { ...initialValues,
+                     datasetID: "No associated dataset" }
+  };
+};
+
+const validate = Validate.createValidator({
+  featuresetName: [Validate.required],
+  dataFile: [Validate.oneFile]
+});
 
-export default UploadFeaturesForm;
+export default reduxForm(
+  {
+    form: 'uploadFeatures',
+    fields: [''],
+    validate
+  }, mapStateToProps)(UploadFeaturesForm);