@@ -4,6 +4,7 @@ import { withStyles, Typography } from '@material-ui/core';
44import Grid from '@material-ui/core/Grid' ;
55import MenuItem from '@material-ui/core/MenuItem' ;
66import TextField from '@material-ui/core/TextField' ;
7+ import InputLabel from '@material-ui/core/InputLabel' ;
78import InputAdornment from '@material-ui/core/InputAdornment' ;
89import Collapse from '@material-ui/core/Collapse' ;
910import Help from 'components/Help'
@@ -16,7 +17,9 @@ class TemplateRegistration extends Component {
1617
1718 render ( ) {
1819 const { classes, configuration, onChange } = this . props
19-
20+ const functional_resolution = configuration . getIn ( [ "functional" , "template_registration" , "functional_resolution" ] )
21+ const derivative_resolution = configuration . getIn ( [ "functional" , "template_registration" , "derivative_resolution" ] )
22+
2023 return (
2124 < Grid container >
2225 < Grid item sm = { 12 } >
@@ -83,15 +86,69 @@ class TemplateRegistration extends Component {
8386 Note that selecting a 1 mm or 2 mm resolution might substantially increase your RAM needs- these resolutions should be selected with caution. For most cases, 3 mm or 4 mm resolutions are suggested.` }
8487 fullWidth
8588 >
86- < TextField label = "Functional Resolution"
87- fullWidth margin = "normal" variant = "outlined"
88- name = "functional.template_registration.functional_resolution"
89- value = { configuration . getIn ( [ "functional" , "template_registration" , "functional_resolution" ] ) }
90- onChange = { onChange }
91- InputProps = { {
92- endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
93- } }
94- />
89+ < InputLabel > Functional Resolution</ InputLabel >
90+ {
91+
92+ functional_resolution . size ?
93+
94+ < Grid container >
95+ < Grid item xs = { 4 } >
96+ < TextField
97+ name = "functional.template_registration.functional_resolution.0"
98+ value = { functional_resolution . get ( 0 ) }
99+ onChange = { onChange }
100+ fullWidth margin = "normal" variant = "outlined"
101+ InputProps = { {
102+ endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
103+ } }
104+ />
105+ </ Grid >
106+ < Grid item xs = { 4 } >
107+ < TextField
108+ name = "functional.template_registration.functional_resolution.1"
109+ value = { functional_resolution . get ( 1 ) }
110+ onChange = { onChange }
111+ fullWidth margin = "normal" variant = "outlined"
112+ InputProps = { {
113+ endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
114+ } }
115+ />
116+ </ Grid >
117+ < Grid item xs = { 4 } >
118+ < TextField
119+ name = "functional.template_registration.functional_resolution.2"
120+ value = { functional_resolution . get ( 2 ) }
121+ onChange = { onChange }
122+ fullWidth margin = "normal" variant = "outlined"
123+ InputProps = { {
124+ endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
125+ } }
126+ />
127+ </ Grid >
128+ </ Grid >
129+
130+ :
131+
132+ < TextField label = "Resolution"
133+ name = "functional.template_registration.functional_resolution"
134+ value = { functional_resolution }
135+ onChange = { function ( event ) {
136+ if ( event . target . value . includes ( "x" ) ) {
137+ let values = event . target . value . replace ( / [ ^ 0 - 9 \. x ] / , '' ) . split ( "x" ) . filter ( Boolean ) . map ( parseFloat )
138+ values = [ ...values , ...values , ...values ] . slice ( 0 , 3 )
139+ onChange (
140+ [ [ [ 'functional' , 'template_registration' , 'functional_resolution' ] , values ] ]
141+ )
142+ } else {
143+ onChange ( event )
144+ }
145+ } }
146+ fullWidth margin = "normal" variant = "outlined"
147+ InputProps = { {
148+ endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
149+ } }
150+ />
151+ }
95152 </ Help >
96153
97154 < Help
@@ -100,15 +157,69 @@ class TemplateRegistration extends Component {
100157 help = { `The resolution (in mm) to which the registered derivative outputs are written into.` }
101158 fullWidth
102159 >
103- < TextField label = "Derivative Resolution"
104- fullWidth margin = "normal" variant = "outlined"
105- name = "functional.template_registration.derivative_resolution"
106- value = { configuration . getIn ( [ "functional" , "template_registration" , "derivative_resolution" ] ) }
107- onChange = { onChange }
108- InputProps = { {
109- endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
110- } }
111- />
160+ < InputLabel > Derivative Resolution</ InputLabel >
161+ {
162+
163+ derivative_resolution . size ?
164+
165+ < Grid container >
166+ < Grid item xs = { 4 } >
167+ < TextField
168+ name = "functional.template_registration.derivative_resolution.0"
169+ value = { derivative_resolution . get ( 0 ) }
170+ onChange = { onChange }
171+ fullWidth margin = "normal" variant = "outlined"
172+ InputProps = { {
173+ endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
174+ } }
175+ />
176+ </ Grid >
177+ < Grid item xs = { 4 } >
178+ < TextField
179+ name = "functional.template_registration.derivative_resolution.1"
180+ value = { derivative_resolution . get ( 1 ) }
181+ onChange = { onChange }
182+ fullWidth margin = "normal" variant = "outlined"
183+ InputProps = { {
184+ endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
185+ } }
186+ />
187+ </ Grid >
188+ < Grid item xs = { 4 } >
189+ < TextField
190+ name = "functional.template_registration.derivative_resolution.2"
191+ value = { derivative_resolution . get ( 2 ) }
192+ onChange = { onChange }
193+ fullWidth margin = "normal" variant = "outlined"
194+ InputProps = { {
195+ endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
196+ } }
197+ />
198+ </ Grid >
199+ </ Grid >
200+
201+ :
202+
203+ < TextField label = "Resolution"
204+ name = "functional.template_registration.derivative_resolution"
205+ value = { derivative_resolution }
206+ onChange = { function ( event ) {
207+ if ( event . target . value . includes ( "x" ) ) {
208+ let values = event . target . value . replace ( / [ ^ 0 - 9 \. x ] / , '' ) . split ( "x" ) . filter ( Boolean ) . map ( parseFloat )
209+ values = [ ...values , ...values , ...values ] . slice ( 0 , 3 )
210+ onChange (
211+ [ [ [ 'functional' , 'template_registration' , 'derivative_resolution' ] , values ] ]
212+ )
213+ } else {
214+ onChange ( event )
215+ }
216+ } }
217+ fullWidth margin = "normal" variant = "outlined"
218+ InputProps = { {
219+ endAdornment : < InputAdornment position = "end" > mm</ InputAdornment > ,
220+ } }
221+ />
222+ }
112223 </ Help >
113224
114225 < Help
0 commit comments