PlotterParameterEditor.jsx 4.86 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// @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';

20
import { changeObjFieldName, generateNewKey, copyObj } from '@helpers';
21
import { BUILTIN_TYPES, ANALYZER_RESULT_TYPES, getValidPlotterparameterObj as getValidObj, expGetDefaultParameterValue as getDefaultParameterValue } from '@helpers/beat';
22
import type { BeatObject } from '@helpers/beat';
23
24
25

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

26
import * as Actions from '@store/actions.js';
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 ParameterConsume from '../ParameterConsume.jsx';
34
35
36
37
38

type Props = {
	plotters: BeatObject[],
	data: BeatObject,
	saveFunc: (BeatObject) => any,
39
	updateFunc: (BeatObject) => any,
40
41
};

42
export class PlotterParameterEditor extends React.Component<Props> {
43
44
45
46
47
48
	constructor(props: Props) {
		//console.log(`Creating AlgDetail`);
		super(props);
	}

	setContents = (newContents: any) => {
49
50
51
52
53
		this.props.updateFunc({
			...this.props.data,
			contents: {
				...this.props.data.contents,
				...newContents,
54
55
56
57
58
			}
		});
	}

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

62
	getPlotterName = (): string => {
63
		return this.props.data.contents.plotter;
64
65
66
67
68
69
	}

	getPlotter = (name: ?string) => {
		const n = name || this.getPlotterName();
		const pl = this.props.plotters.find(pl => pl.name === n);
		return pl || {};
70
71
72
	}

	updatePlotter = (plName: string) => {
73
74
		const pl = this.getPlotter(plName);
		const oldPlotter = this.getPlotterName();
75
76
		if(oldPlotter === pl.name)
			return;
77
78
79
80
81
82
83

		this.setContents({
			plotter: pl.name,
			data: Object.entries(pl.contents.parameters)
			.map(([p, info]) => ({ [p]: getDefaultParameterValue(info) }))
			.reduce((o, p) => ({ ...o, ...p }), {})
		});
84
85
	}

86
87
	updateParameter = (pName: string, v: number | string | boolean) => {
		this.setContents({
88
			data: {
89
				...this.props.data.contents.data,
90
91
92
93
94
				[pName]: v
			}
		});
	}

95
	render = () => {
96
97
98
		const pn = this.getPlotterName();
		const pl = this.getPlotter(pn);

99
100
101
102
103
104
105
		return (
			<div>
				<div className='d-flex'>
					<Button
						className='mx-auto'
						outline
						color='secondary'
106
						onClick={() => this.props.saveFunc(this.props.data)}
107
					>
108
						Save Changes (Changes are <ValidSchemaBadge entity='plotterparameter' obj={this.props.data} />)
109
110
111
					</Button>
					{/*
					<TemplateButton
112
						data={this.props.data}
113
114
115
116
117
118
119
120
121
122
123
124
						entity={'plotter'}
					/>
					*/}
				</div>
				<Form>
					<FormGroup tag='fieldset'>
						<FormGroup>
							<Label>Short Description</Label>
							<Input
								type='text'
								id='ppDesc'
								placeholder='Parameter description...'
125
								value={this.props.data.contents.description}
126
127
128
129
130
131
132
133
134
135
								onChange={(e) => this.updateDescription(e.target.value)}
							/>
						</FormGroup>
						<FormGroup>
							<Label>Plotter</Label>
							<Input
								type='select'
								className='custom-select'
								id='ppPl'
								placeholder='Plotter...'
136
								value={pn}
137
138
139
140
141
142
143
144
145
								onChange={e => this.updatePlotter(e.target.value)}
							>
								{
									this.props.plotters.map((pl, i) =>
										<option key={i} value={pl.name}>{ pl.name }</option>
									)
								}
							</Input>
						</FormGroup>
146
147
148
149
150
151
152
						<h5>Parameters</h5>
						{
							pl.contents &&
								Object.entries(pl.contents.parameters).map(([pName, o], i) =>
									<FormGroup row key={i}>
										<Label sm={4}>{ pName }</Label>
										<Col>
153
											<ParameterConsume
154
155
												parameter={o}
												updateFunc={(v: any) => this.updateParameter(pName, v)}
156
												currVal={this.props.data.contents.data[pName]}
157
158
159
160
161
											/>
										</Col>
									</FormGroup>
								)
						}
162
163
164
165
166
167
168
169
					</FormGroup>
				</Form>
			</div>
		);
	}
}

const mapStateToProps = (state, ownProps) => {
170
	const params = Selectors.plotterparameterGet(state);
171
172
	const obj = {
		plotters: Selectors.plotterGet(state),
173
		data: params[ownProps.index] || getValidObj(),
174
	};
175
176
177
178
179
180
181

	if(!obj.data.contents.hasOwnProperty('plotter') ||
		obj.data.contents.plotters === "")
	{
		obj.plotters.unshift({name: "-- select an option --"})
	};

182
183
184
	return obj;
};

185
186
187
188
189
190
191
192
193
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[`plotterparameterUpdate`](obj.name, obj));
	},
});

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