PlotterEditor.jsx 4.99 KB
Newer Older
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// @flow
import * as React from 'react';
import {
	Row,
	Col,
	Button,
	Form, FormGroup,
	Label, Input,
	Card, CardHeader, CardBody,
	TabContent, TabPane, Nav, NavItem, NavLink,
	Alert,
	UncontrolledDropdown, DropdownToggle, DropdownMenu,
	InputGroup, InputGroupAddon,
} from 'reactstrap';

import { connect } from 'react-redux';

import cn from 'classnames';

import { changeObjFieldName, generateNewKey, jsonClone } from '@helpers';
import { BUILTIN_TYPES, ANALYZER_RESULT_TYPES, getValidPlotterObj as getValidObj } from '@helpers/beat';
import type { BeatObject } from '@helpers/beat';

import * as Selectors from '@store/selectors.js';

26
import * as Actions from '@store/actions.js';
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
27
28
29
30
31
32
import CacheInput from '../CacheInput.jsx';
import ValidSchemaBadge from '../ValidSchemaBadge.jsx';
import DeleteInputBtn from '../DeleteInputBtn.jsx';
import TypedField from '../TypedField.jsx';
import TemplateButton from '../EntityTemplateGenerationButton.jsx';
import InfoTooltip from '../InfoTooltip.jsx';
33
import ParameterCreate from '../ParameterCreate.jsx';
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
34
35
36
37
38
39

type Props = {
	data: BeatObject,
	libraries: BeatObject[],
	plotDfNames: string[],
	saveFunc: (BeatObject) => any,
40
	updateFunc: (BeatObject) => any,
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
};

type State = {
	choiceCache: string,
};

export class PlotterEditor extends React.Component<Props, State> {
	constructor(props: Props) {
		//console.log(`Creating AlgDetail`);
		super(props);
	}

	state = {
		choiceCache: '',
	}

	setContents = (newContents: any) => {
58
59
60
61
62
		this.props.updateFunc({
			...this.props.data,
			contents: {
				...this.props.data.contents,
				...newContents,
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
			}
		});
	}

	updateDescription = (desc: string) => {
		this.setContents({ description: desc });
	}

	updateDataformat = (df: string) => {
		this.setContents({ dataformat: df });
	}

	// 4 different functions:
	// creates a parameter (provide name & value)
	// updates a parameter (provide name & value)
	// renames a parameter (provide name & value & the old name)
	// deletes a parameter (provide null as name, value is optional, the name)
	updateParameter = (name: null | string, value: any, oldName: ?string) => {
81
		const params = jsonClone(this.props.data.contents.parameters);
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
		if(oldName)
			delete params[oldName];
		if(name !== null)
			params[name] = value;
		this.setContents({ parameters: params });
	}

	render = () => {
		return (
			<div>
				<div className='d-flex'>
					<Button
						className='mx-auto'
						outline
						color='secondary'
97
						onClick={() => this.props.saveFunc(this.props.data)}
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
98
					>
99
						Save Changes (Changes are <ValidSchemaBadge entity='plotter' obj={this.props.data} />)
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
100
101
102
					</Button>
					{/*
					<TemplateButton
103
						data={this.props.data}
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
104
105
106
107
108
109
110
111
112
113
114
115
						entity={'plotter'}
					/>
					*/}
				</div>
				<Form>
					<FormGroup tag='fieldset'>
						<FormGroup>
							<Label>Short Description</Label>
							<Input
								type='text'
								id='plDesc'
								placeholder='Plotter description...'
116
								value={this.props.data.contents.description}
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
117
118
119
120
121
122
123
124
125
								onChange={(e) => this.updateDescription(e.target.value)}
							/>
						</FormGroup>
						<FormGroup>
							<Label>Input Dataformat</Label>
							<Input
								id='plDf'
								type='select'
								className='custom-select'
126
								value={this.props.data.contents.dataformat}
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
127
128
129
130
131
132
133
134
135
136
137
138
								onChange={e => this.updateDataformat(e.target.value)}
							>
								{
									this.props.plotDfNames.map((df, i) =>
										<option key={i} value={df}>{ df }</option>
									)
								}
							</Input>
						</FormGroup>
						<FormGroup>
							<h5>Parameters</h5>
							{
139
								(Object.entries(this.props.data.contents.parameters): [string, any][]).map(([name, param], i, params) => (
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
140
141
									<Row key={i} className='mb-2'>
										<Col sm='12'>
142
											<ParameterCreate
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
143
												name={name}
144
145
146
147
												param={param}
												params={params}
												updateParameter={this.updateParameter}
											/>
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
148
149
150
151
152
153
154
										</Col>
									</Row>
								))
							}
							<Button outline block
								id='newParameterBtn'
								onClick={() => {
155
									const newKey = generateNewKey('parameter', Object.keys(this.props.data.contents.parameters || {}));
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
									this.updateParameter(
										newKey,
										{
											type: '',
											default: '',
											description: '',
										}
									);
								}}
							>
								New Parameter
							</Button>
						</FormGroup>
					</FormGroup>
				</Form>
			</div>
		);
	}
}

const mapStateToProps = (state, ownProps) => {
177
	const plotters = Selectors.plotterGet(state);
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
178
179
180
	const obj = {
		libraries: Selectors.libraryGet(state),
		plotDfNames: Selectors.dataformatGet(state).map(df => df.name).filter(df => df.startsWith('plot/')),
181
		data: plotters[ownProps.index] || getValidObj(),
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
182
183
184
185
	};
	return obj;
};

186
187
188
189
190
191
192
193
194
const mapDispatchToProps = (dispatch, ownProps) => ({
	// replace the obj in the Redux store with the new object
	updateFunc: (obj) => {
		console.log(`dispatching for ${ obj.name }`);
		dispatch(Actions[`plotterUpdate`](obj.name, obj));
	},
});

export default connect(mapStateToProps, mapDispatchToProps)(PlotterEditor);