Skip to content

Commit 3ac7a77

Browse files
aranegaaranega
committed
Merge branch 'feature/Netpyne-172' of github.com:MetaCell/NetPyNE-UI into feature/Netpyne-172
2 parents c575ccf + 13a98c1 commit 3ac7a77

2 files changed

Lines changed: 113 additions & 115 deletions

File tree

‎webapp/components/definition/populations/NetPyNEPopulation.js‎

Lines changed: 55 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import TextField from '@material-ui/core/TextField';
33
import { BottomNavigation, BottomNavigationAction, Grid, Switch, Typography } from '@material-ui/core';
44
import FontIcon from '@material-ui/core/Icon';
@@ -32,6 +32,11 @@ const styles = ({ spacing }) => ({
3232
} );
3333

3434
const { textColor, primaryColor, experimentLabelColor } = vars;
35+
const newPulseObject = {
36+
start: null,
37+
end: null,
38+
noise: null,
39+
};
3540

3641
class NetPyNEPopulation extends React.Component {
3742
constructor (props) {
@@ -42,6 +47,9 @@ class NetPyNEPopulation extends React.Component {
4247
sectionId: 'General',
4348
errorMessage: undefined,
4449
errorDetails: undefined,
50+
pulses: [{
51+
...newPulseObject,
52+
}],
4553
};
4654
}
4755

@@ -171,8 +179,16 @@ class NetPyNEPopulation extends React.Component {
171179
</MenuItem>
172180
));
173181
}
182+
addAnotherPulse = () => {
183+
this.setState((prevState) => ({
184+
...prevState, // Spread the current state to retain other properties
185+
pulses: [...prevState.pulses, { ...newPulseObject }], // Push the new object into the 'pulses' array
186+
}));
187+
};
188+
174189

175190
render () {
191+
176192
const { classes } = this.props;
177193

178194
const dialogPop = this.state.errorMessage != undefined ? (
@@ -337,87 +353,48 @@ class NetPyNEPopulation extends React.Component {
337353
label="Seed"
338354
/>
339355

340-
<Box display='flex' alignItems='center' style={{gap: '1rem'}}>
341-
<Typography style={ {
342-
color: experimentLabelColor, paddingLeft: '0.625rem', fontSize: '0.875rem', lineHeight: '130%', fontWeight: 400
343-
} }
344-
>
345-
Spiking Pulse / Rate
346-
</Typography>
347-
<Grid container alignItems='center' spacing={1}>
348-
<Grid item xs={4}>
349-
<TextField
350-
variant="filled"
351-
fullWidth
352-
onChange={this.handleRenameChange}
353-
value={this.state.currentName}
354-
disabled={this.renaming}
355-
label="Start"
356-
/>
357-
</Grid>
358-
<Grid item xs={4}>
359-
<TextField
360-
variant="filled"
361-
fullWidth
362-
onChange={this.handleRenameChange}
363-
value={this.state.currentName}
364-
disabled={this.renaming}
365-
label="End"
366-
/>
367-
</Grid>
368-
<Grid item xs={4}>
369-
<TextField
370-
variant="filled"
371-
fullWidth
372-
onChange={this.handleRenameChange}
373-
value={this.state.currentName}
374-
disabled={this.renaming}
375-
label="Noise"
376-
/>
377-
</Grid>
378-
</Grid>
379-
</Box>
380-
381-
382-
<Box display='flex' alignItems='center' style={{gap: '1rem'}}>
356+
<Box display='flex' alignItems='flex-start' style={{gap: '1rem'}}>
383357
<Typography style={ {
384-
color: experimentLabelColor, paddingLeft: '0.625rem', fontSize: '0.875rem', lineHeight: '130%', fontWeight: 400, visibility: 'hidden'
358+
color: experimentLabelColor, flexShrink: 0, padding: '18.5px 0 18.5px 10px', fontSize: '0.875rem', lineHeight: '130%', fontWeight: 400
385359
} }
386360
>
387361
Spiking Pulse / Rate
388362
</Typography>
389-
<Grid container alignItems='center' spacing={1}>
390-
<Grid item xs={4}>
391-
<TextField
392-
variant="filled"
393-
fullWidth
394-
onChange={this.handleRenameChange}
395-
value={this.state.currentName}
396-
disabled={this.renaming}
397-
label="Start"
398-
/>
399-
</Grid>
400-
<Grid item xs={4}>
401-
<TextField
402-
variant="filled"
403-
fullWidth
404-
onChange={this.handleRenameChange}
405-
value={this.state.currentName}
406-
disabled={this.renaming}
407-
label="End"
408-
/>
409-
</Grid>
410-
<Grid item xs={4}>
411-
<TextField
412-
variant="filled"
413-
fullWidth
414-
onChange={this.handleRenameChange}
415-
value={this.state.currentName}
416-
disabled={this.renaming}
417-
label="Noise"
418-
/>
419-
</Grid>
420-
</Grid>
363+
<Box display='flex' flexDirection='column' style={{gap: '0.5rem'}}>
364+
{ this.state.pulses.map((pulse, index) => (<Grid container alignItems='center' spacing={1} key={`pulse_${index}`}>
365+
<Grid item xs={4}>
366+
<TextField
367+
variant="filled"
368+
fullWidth
369+
onChange={this.handleRenameChange}
370+
value={pulse.start}
371+
disabled={this.renaming}
372+
label="Start"
373+
/>
374+
</Grid>
375+
<Grid item xs={4}>
376+
<TextField
377+
variant="filled"
378+
fullWidth
379+
onChange={this.handleRenameChange}
380+
value={pulse.end}
381+
disabled={this.renaming}
382+
label="End"
383+
/>
384+
</Grid>
385+
<Grid item xs={4}>
386+
<TextField
387+
variant="filled"
388+
fullWidth
389+
onChange={this.handleRenameChange}
390+
value={pulse.noise}
391+
disabled={this.renaming}
392+
label="Noise"
393+
/>
394+
</Grid>
395+
</Grid>)) }
396+
397+
</Box>
421398
</Box>
422399

423400
<Box pl={1.25}>
@@ -426,6 +403,7 @@ class NetPyNEPopulation extends React.Component {
426403
disableRipple
427404
style={ { color: primaryColor, padding: 0, textTransform: 'uppercase', fontSize: '0.75rem', letterSpacing: '0.01rem', lineHeight: '200%' } }
428405
variant='text'
406+
onClick={() => this.addAnotherPulse()}
429407
>+ add another pulse</Button>
430408
</Box>
431409

‎webapp/components/definition/stimulationSources/NetPyNEStimulationSource.js‎

Lines changed: 58 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,11 @@ const styles = ({ spacing }) => ({
3232
width: '100%',
3333
},
3434
});
35-
35+
const newPulseObject = {
36+
start: null,
37+
end: null,
38+
noise: null,
39+
};
3640
class NetPyNEStimulationSource extends React.Component {
3741
constructor (props) {
3842
super(props);
@@ -41,6 +45,9 @@ class NetPyNEStimulationSource extends React.Component {
4145
sourceType: 'NetStim',
4246
errorMessage: undefined,
4347
errorDetails: undefined,
48+
pulses: [{
49+
...newPulseObject,
50+
}],
4451
};
4552
this.stimSourceTypeOptions = [
4653
{ type: 'NetStim' },
@@ -150,6 +157,13 @@ class NetPyNEStimulationSource extends React.Component {
150157
this.props.updateCards();
151158
}
152159

160+
addAnotherPulse = () => {
161+
this.setState((prevState) => ({
162+
...prevState, // Spread the current state to retain other properties
163+
pulses: [...prevState.pulses, { ...newPulseObject }], // Push the new object into the 'pulses' array
164+
}));
165+
};
166+
153167
render () {
154168
const { classes } = this.props;
155169
const dialogPop = this.state.errorMessage != undefined ? (
@@ -452,51 +466,57 @@ class NetPyNEStimulationSource extends React.Component {
452466
label="Seed"
453467
/>
454468
455-
<Grid container alignItems='center' spacing={1}>
456-
<Grid item xs={3}>
457-
<Typography style={ {
458-
color: experimentLabelColor, paddingLeft: '0.625rem', fontSize: '0.875rem', lineHeight: '130%', fontWeight: 400
469+
<Box display='flex' alignItems='flex-start' style={{gap: '1rem'}}>
470+
<Typography style={ {
471+
color: experimentLabelColor, flexShrink: 0, padding: '18.5px 0 18.5px 10px', fontSize: '0.875rem', lineHeight: '130%', fontWeight: 400
459472
} }
460-
>Spiking Pulse / Rate</Typography>
461-
</Grid>
462-
<Grid item xs={3}>
463-
<TextField
464-
variant="filled"
465-
fullWidth
466-
onChange={this.handleRenameChange}
467-
value={this.state.currentName}
468-
disabled={this.renaming}
469-
label="Start"
470-
/>
471-
</Grid>
472-
<Grid item xs={3}>
473-
<TextField
474-
variant="filled"
475-
fullWidth
476-
onChange={this.handleRenameChange}
477-
value={this.state.currentName}
478-
disabled={this.renaming}
479-
label="End"
480-
/>
481-
</Grid>
482-
<Grid item xs={3}>
483-
<TextField
484-
variant="filled"
485-
fullWidth
486-
onChange={this.handleRenameChange}
487-
value={this.state.currentName}
488-
disabled={this.renaming}
489-
label="Noise"
490-
/>
491-
</Grid>
492-
</Grid>
473+
>
474+
Spiking Pulse / Rate
475+
</Typography>
476+
<Box display='flex' flexDirection='column' style={{gap: '0.5rem'}}>
477+
{ this.state.pulses.map((pulse, index) => ( <Grid container alignItems='center' spacing={1} key={`stimpulse_${index}`}>
478+
<Grid item xs={4}>
479+
<TextField
480+
variant="filled"
481+
fullWidth
482+
onChange={this.handleRenameChange}
483+
value={this.state.currentName}
484+
disabled={this.renaming}
485+
label="Start"
486+
/>
487+
</Grid>
488+
<Grid item xs={4}>
489+
<TextField
490+
variant="filled"
491+
fullWidth
492+
onChange={this.handleRenameChange}
493+
value={this.state.currentName}
494+
disabled={this.renaming}
495+
label="End"
496+
/>
497+
</Grid>
498+
<Grid item xs={4}>
499+
<TextField
500+
variant="filled"
501+
fullWidth
502+
onChange={this.handleRenameChange}
503+
value={this.state.currentName}
504+
disabled={this.renaming}
505+
label="Noise"
506+
/>
507+
</Grid>
508+
</Grid> )
509+
)}
510+
</Box>
511+
</Box>
493512
494513
<Box pl={1.25}>
495514
<Button
496515
className='noHover'
497516
disableRipple
498517
style={ { color: primaryColor, padding: 0, textTransform: 'uppercase', fontSize: '0.75rem', letterSpacing: '0.01rem', lineHeight: '200%', fontWeight: 700 } }
499518
variant='text'
519+
onClick={() => this.addAnotherPulse()}
500520
>+ add another pulse</Button>
501521
</Box>
502522

0 commit comments

Comments
 (0)