Skip to content

Commit b843883

Browse files
acrellinacrellin
committed
WIP breaking commit - add DatasetForm, DatasetTable, DatasetsTab, DeleteDataset
1 parent fab7aad commit b843883

File tree

9 files changed

+229
-106
lines changed

9 files changed

+229
-106
lines changed

‎static/js/components/DatasetForm/index.jsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
5+
let DatasetForm = (props) => {
6+
const { fields: { datasetName, headerFile, tarFile },
7+
error, handleSubmit, submitting } = props;
8+
9+
const description = {
10+
fontStyle: 'italic',
11+
paddingBottom: '1em'
12+
};
13+
14+
return (
15+
<div>
16+
<Form onSubmit={handleSubmit} error={error}>
17+
<TextInput label="Dataset Name" {...datasetName} />
18+
<FileInput
19+
label="Header File"
20+
{...headerFile}
21+
data-tip
22+
data-for="headerfileTooltip"
23+
/>
24+
25+
<div style={description}>
26+
Format: comma-separated with columns "filename" (of a time series from the uploaded archive), "label" (class label or numerical value), and any metafeatures (numerical).
27+
</div>
28+
29+
<FileInput
30+
label="Data Tarball"
31+
{...tarFile}
32+
data-tip
33+
data-for="tarfileTooltip"
34+
/>
35+
<div style={description}>
36+
Format: zipfile or tarfile containing time series files, each of which is comma-separated with columns "time", "value", "error" (optional).
37+
</div>
38+
39+
<SubmitButton label="Upload Dataset" disabled={submitting} />
40+
</Form>
41+
42+
<CesiumTooltip
43+
id="headerfileTooltip"
44+
text={["filename,label", <br />, "ts1.dat,class_A", <br />, "..."]}
45+
/>
46+
<CesiumTooltip
47+
id="tarfileTooltip"
48+
text={[
49+
"Each file in tarball should be formatted as follows",
50+
<br />, "(column titles are optional)", <br />, <br />,
51+
"time,value,error", <br />,
52+
"125912.23,12.31604,0.279105", <br />,
53+
"..."]}
54+
/>
55+
56+
</div>
57+
);
58+
};
59+
DatasetForm.propTypes = {
60+
fields: PropTypes.object.isRequired,
61+
error: PropTypes.string,
62+
handleSubmit: PropTypes.func.isRequired,
63+
submitting: PropTypes.bool.isRequired
64+
};

‎static/js/components/DatasetTable/index.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
4+
import DatasetInfo from '../containers/DatasetInfo';
5+
import DeleteDataset from '../containers/DeleteDataset';
6+
7+
export let DatasetTable = props => (
8+
<table className="table">
9+
<thead>
10+
<tr>
11+
<th>Name</th><th>Uploaded</th><th>Actions</th>
12+
</tr>
13+
</thead>
14+
15+
{
16+
props.datasets.map((dataset, idx) => {
17+
const foldedContent = (
18+
<tr key={`dsinfo_${idx}`}>
19+
<td colSpan={6}>
20+
<DatasetInfo dataset={dataset} />
21+
</td>
22+
</tr>
23+
);
24+
25+
return (
26+
<FoldableRow key={`ds_${idx}`}>
27+
<tr key={dataset.id}>
28+
<td>{dataset.name}</td>
29+
<td>{reformatDatetime(dataset.created_at)}</td>
30+
<td><DeleteDataset ID={dataset.id} /></td>
31+
</tr>
32+
{foldedContent}
33+
</FoldableRow>
34+
);
35+
})
36+
}
37+
38+
</table>
39+
);
40+
DatasetTable.propTypes = {
41+
datasets: React.PropTypes.arrayOf(React.PropTypes.object)
42+
};
43+
44+
export default DatasetTable;

‎static/js/components/Datasets.jsx‎

Lines changed: 2 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { connect } from "react-redux";
33
import { reduxForm } from 'redux-form';
44

55
import { FormComponent, Form, TextInput, FileInput, SubmitButton } from './Form/index';
6+
import DatasetForm from '../containers/DatasetForm';
7+
import DatasetsTab from './DatasetsTab';
68
import * as Validate from '../validate';
79
import Expand from './Expand';
810
import Delete from './Delete';
@@ -12,111 +14,6 @@ import CesiumTooltip from './Tooltip';
1214
import FoldableRow from './FoldableRow';
1315

1416

15-
const DatasetsTab = props => (
16-
<div className="datasetsTab">
17-
18-
<Expand label="Upload new dataset" id="newDatasetExpander">
19-
<DatasetForm selectedProject={props.selectedProject} />
20-
</Expand>
21-
22-
<DatasetTable selectedProject={props.selectedProject} />
23-
24-
</div>
25-
);
26-
DatasetsTab.propTypes = {
27-
selectedProject: React.PropTypes.object
28-
};
29-
30-
let DatasetForm = (props) => {
31-
const { fields: { datasetName, headerFile, tarFile },
32-
error, handleSubmit, submitting } = props;
33-
34-
const description = {
35-
fontStyle: 'italic',
36-
paddingBottom: '1em'
37-
};
38-
39-
return (
40-
<div>
41-
<Form onSubmit={handleSubmit} error={error}>
42-
<TextInput label="Dataset Name" {...datasetName} />
43-
<FileInput
44-
label="Header File"
45-
{...headerFile}
46-
data-tip
47-
data-for="headerfileTooltip"
48-
/>
49-
50-
<div style={description}>
51-
Format: comma-separated with columns "filename" (of a time series from the uploaded archive), "label" (class label or numerical value), and any metafeatures (numerical).
52-
</div>
53-
54-
<FileInput
55-
label="Data Tarball"
56-
{...tarFile}
57-
data-tip
58-
data-for="tarfileTooltip"
59-
/>
60-
<div style={description}>
61-
Format: zipfile or tarfile containing time series files, each of which is comma-separated with columns "time", "value", "error" (optional).
62-
</div>
63-
64-
<SubmitButton label="Upload Dataset" disabled={submitting} />
65-
</Form>
66-
67-
<CesiumTooltip
68-
id="headerfileTooltip"
69-
text={["filename,label", <br />, "ts1.dat,class_A", <br />, "..."]}
70-
/>
71-
<CesiumTooltip
72-
id="tarfileTooltip"
73-
text={[
74-
"Each file in tarball should be formatted as follows",
75-
<br />, "(column titles are optional)", <br />, <br />,
76-
"time,value,error", <br />,
77-
"125912.23,12.31604,0.279105", <br />,
78-
"..."]}
79-
/>
80-
81-
</div>
82-
);
83-
};
84-
DatasetForm.propTypes = {
85-
fields: React.PropTypes.object.isRequired,
86-
error: React.PropTypes.string,
87-
handleSubmit: React.PropTypes.func.isRequired,
88-
submitting: React.PropTypes.bool.isRequired
89-
};
90-
91-
const dsMapStateToProps = (state, ownProps) => (
92-
{
93-
initialValues: {
94-
...(ownProps.initialValues),
95-
projectID: ownProps.selectedProject.id
96-
}
97-
}
98-
);
99-
100-
const dsMapDispatchToProps = (dispatch, ownProps) => (
101-
{
102-
onSubmit: form => (
103-
dispatch(Action.uploadDataset(form))
104-
)
105-
}
106-
);
107-
108-
const validate = Validate.createValidator({
109-
datasetName: [Validate.required],
110-
tarFile: [Validate.oneFile],
111-
});
112-
113-
DatasetForm = reduxForm({
114-
form: 'newDataset',
115-
fields: ['datasetName', 'headerFile', 'tarFile', 'projectID'],
116-
validate
117-
}, dsMapStateToProps, dsMapDispatchToProps)(DatasetForm);
118-
119-
12017
let DatasetInfo = props => (
12118
<table className="table">
12219
<thead>

‎static/js/components/DatasetsTab/index.jsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { connect } from "react-redux";
3+
import { reduxForm } from 'redux-form';
4+
5+
import { FormComponent, Form, TextInput, FileInput, SubmitButton } from '../Form/index';
6+
import DatasetForm from '../../containers/DatasetForm';
7+
import DatasetTable from '../../containers/DatasetTable';
8+
import Expand from '../Expand';
9+
10+
11+
const DatasetsTab = props => (
12+
<div className="datasetsTab">
13+
14+
<Expand label="Upload new dataset" id="newDatasetExpander">
15+
<DatasetForm selectedProject={props.selectedProject} />
16+
</Expand>
17+
18+
<DatasetTable selectedProject={props.selectedProject} />
19+
20+
</div>
21+
);
22+
DatasetsTab.propTypes = {
23+
selectedProject: React.PropTypes.object
24+
};
25+
26+
export default DatasetsTab;

‎static/js/components/Main.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import CesiumMessageHandler from '../CesiumMessageHandler';
1414
import AddProject from '../containers/AddProject';
1515
import ProjectSelector from '../containers/ProjectSelector';
1616
import ProjectTab from '../containers/ProjectTab';
17-
import DatasetsTab from './Datasets';
17+
import DatasetsTab from './DatasetsTab';
1818
import FeaturesTab from './Features';
1919
import ModelsTab from './Models';
2020
import PredictTab from './Predictions';

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import reduxForm from 'redux-form';
2+
3+
import * as Validate from '../../validate';
4+
import * as Action from '../../actions';
5+
import DatasetForm from '../../containers/DatasetForm';
6+
7+
8+
const mapStateToProps = (state, ownProps) => (
9+
{
10+
initialValues: {
11+
...(ownProps.initialValues),
12+
projectID: ownProps.selectedProject.id
13+
}
14+
}
15+
);
16+
17+
const mapDispatchToProps = (dispatch, ownProps) => (
18+
{
19+
onSubmit: form => (
20+
dispatch(Action.uploadDataset(form))
21+
)
22+
}
23+
);
24+
25+
const validate = Validate.createValidator({
26+
datasetName: [Validate.required],
27+
tarFile: [Validate.oneFile],
28+
});
29+
30+
export default reduxForm({
31+
form: 'newDataset',
32+
fields: ['datasetName', 'headerFile', 'tarFile', 'projectID'],
33+
validate
34+
}, dsMapStateToProps, dsMapDispatchToProps)(DatasetForm);

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { reduxForm } from 'redux-form';
2+
3+
import * as Validate from '../../validate';
4+
import * as Action from '../../actions';
5+
import DatasetForm from '../../components/DatasetForm';
6+
7+
8+
const mapStateToProps = (state, ownProps) => (
9+
{
10+
initialValues: {
11+
...(ownProps.initialValues),
12+
projectID: ownProps.selectedProject.id
13+
}
14+
}
15+
);
16+
17+
const mapDispatchToProps = (dispatch, ownProps) => (
18+
{
19+
onSubmit: form => (
20+
dispatch(Action.uploadDataset(form))
21+
)
22+
}
23+
);
24+
25+
const validate = Validate.createValidator({
26+
datasetName: [Validate.required],
27+
tarFile: [Validate.oneFile],
28+
});
29+
30+
export default reduxForm({
31+
form: 'newDataset',
32+
fields: ['datasetName', 'headerFile', 'tarFile', 'projectID'],
33+
validate
34+
}, mapStateToProps, mapDispatchToProps)(DatasetForm);

‎static/js/containers/DatasetTable/index.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { connect } from 'react-redux';
2+
3+
import DatasetTable from '../../components/DatasetTable';
4+
5+
6+
const mapStateToProps = (state, ownProps) => (
7+
{
8+
datasets: state.datasets.filter(dataset => (
9+
dataset.project_id === ownProps.selectedProject.id
10+
))
11+
}
12+
);
13+
14+
export default connect(mapStateToProps)(DatasetTable);

‎static/js/containers/DeleteDataset/index.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { connect } from "react-redux";
2+
3+
import * as Action from '../actions';
4+
5+
6+
const mapDispatchToProps = dispatch => (
7+
{ delete: id => dispatch(Action.deleteDataset(id)) }
8+
);
9+
10+
export default connect(null, mapDispatchToProps)(Delete);

0 commit comments

Comments
 (0)