Skip to content

Commit aa1ceea

Browse files
author
Lucas Rebscher
committed
Merge branch 'development' into feature/batch_support
2 parents 299a913 + 87149de commit aa1ceea

5 files changed

Lines changed: 170 additions & 89 deletions

File tree

‎webapp/components/general/Dialog.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,15 @@ const AboutContent = withStyles(styles)(({ classes }) => (
2525
<Paper className={classes.paper}>
2626
<img width="250" src={logoNetpyne} />
2727
<Box m={1}>
28-
<Typography variant="h5" style={{ color: secondaryColor }}>
28+
<Link variant="h5" style={{ display: 'block' }} href="https://github.com/MetaCell/NetPyNE-UI" target="_blank">
2929
NetPyNE-UI v0.7.0
30-
</Typography>
30+
</Link>
31+
<Link variant="h5" style={{ display: 'block' }} href="https://github.com/Neurosim-lab/netpyne" target="_blank">
32+
NetPyNE v01.0.0.2
33+
</Link>
34+
<Link variant="h5" style={{ display: 'block' }} href="https://www.neuron.yale.edu/neuron/" target="_blank">
35+
NEURON v8.0.0
36+
</Link>
3137
</Box>
3238

3339
<Box m={1}>
@@ -58,7 +64,10 @@ const AboutContent = withStyles(styles)(({ classes }) => (
5864

5965
<Box m={1}>
6066
<Typography variant="body2" color={secondaryColor}>
61-
NetPyNE-UI is being developed in collaboration with:
67+
NetPyNE-UI is being developed by the State University of New York Downstate (
68+
<Link href="http://dura-bernal.org/" target="_blank">Dura-Bernal Lab</Link>
69+
)
70+
in collaboration with:
6271
</Typography>
6372
<Link href="http://www.metacell.us" target="_blank">
6473
<img

‎webapp/components/general/SplitButton.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React from 'react';
2+
import Grid from '@material-ui/core/Grid';
3+
import Button from '@material-ui/core/Button';
4+
import ButtonGroup from '@material-ui/core/ButtonGroup';
5+
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
6+
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
7+
import Grow from '@material-ui/core/Grow';
8+
import Paper from '@material-ui/core/Paper';
9+
import Popper from '@material-ui/core/Popper';
10+
import MenuItem from '@material-ui/core/MenuItem';
11+
import MenuList from '@material-ui/core/MenuList';
12+
13+
export default function SplitButton (props) {
14+
const {
15+
options, handleClick, icon, skipIconFor,
16+
} = props;
17+
const [open, setOpen] = React.useState(false);
18+
const anchorRef = React.useRef(null);
19+
const [selectedIndex, setSelectedIndex] = React.useState(0);
20+
21+
const handleItemClick = () => {
22+
handleClick(options[selectedIndex]);
23+
};
24+
25+
const handleMenuItemClick = (index) => {
26+
setSelectedIndex(index);
27+
setOpen(false);
28+
};
29+
30+
const handleToggle = () => {
31+
setOpen((prevOpen) => !prevOpen);
32+
};
33+
34+
const handleClose = (event) => {
35+
if (anchorRef.current && anchorRef.current.contains(event.target)) {
36+
return;
37+
}
38+
setOpen(false);
39+
};
40+
41+
return (
42+
<Grid container direction="column" alignItems="center">
43+
<Grid item xs={12}>
44+
<ButtonGroup
45+
variant="contained"
46+
color="primary"
47+
ref={anchorRef}
48+
aria-label="split button"
49+
>
50+
<Button onClick={handleItemClick}>
51+
{typeof skipIconFor === 'undefined' || skipIconFor !== options[selectedIndex] ? icon : null}
52+
{options[selectedIndex]}
53+
</Button>
54+
<Button
55+
color="primary"
56+
aria-controls={open ? 'split-button-menu' : undefined}
57+
aria-expanded={open ? 'true' : undefined}
58+
aria-label="select merge strategy"
59+
aria-haspopup="menu"
60+
onClick={handleToggle}
61+
>
62+
<ArrowDropDownIcon />
63+
</Button>
64+
</ButtonGroup>
65+
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
66+
{({ TransitionProps, placement }) => (
67+
<Grow {...TransitionProps} style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}>
68+
<Paper>
69+
<ClickAwayListener onClickAway={handleClose}>
70+
<MenuList id="split-button-menu">
71+
{options.map((option, index) => (
72+
<MenuItem
73+
key={option}
74+
selected={index === selectedIndex}
75+
onClick={() => {
76+
handleMenuItemClick(index);
77+
}}
78+
>
79+
{option}
80+
</MenuItem>
81+
))}
82+
</MenuList>
83+
</ClickAwayListener>
84+
</Paper>
85+
</Grow>
86+
)}
87+
</Popper>
88+
</Grid>
89+
</Grid>
90+
);
91+
}

‎webapp/components/topbar/SwitchPageButton.js‎

Lines changed: 61 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,22 @@ import React, { Component } from 'react';
22

33
import { withStyles } from '@material-ui/core/styles';
44
import Button from '@material-ui/core/Button';
5-
import IconButton from '@material-ui/core/IconButton';
6-
import { Tooltip } from 'netpyne/components';
75
import Icon from '../general/NetPyNEIcons';
86
import { TOPBAR_CONSTANTS, MODEL_STATE } from '../../constants';
7+
import SplitButton from '../general/SplitButton';
98

109
const styles = ({
1110
palette,
12-
shape,
1311
spacing,
14-
typography,
1512
}) => ({
16-
container: {},
13+
container: {
14+
display: 'flex',
15+
height: '100%',
16+
'& .MuiButton-root': {
17+
borderRadius: 0,
18+
marginBottom: 0,
19+
},
20+
},
1721
button: {
1822
textTransform: 'uppercase',
1923
letterSpacing: 2,
@@ -24,20 +28,34 @@ const styles = ({
2428
icon: { color: palette.common.white },
2529
});
2630

31+
const CREATE_NETWORK = 'CREATE NETWORK';
32+
const CREATE_AND_SIMULATE = 'CREATE AND SIMULATE';
33+
const SIMULATE = 'SIMULATE';
34+
const BACK_TO_EDIT = 'BACK TO EDIT';
35+
36+
const editOptions = [CREATE_NETWORK, CREATE_AND_SIMULATE, SIMULATE];
37+
const exploreOptions = [SIMULATE, CREATE_AND_SIMULATE];
38+
2739
class SwitchPageButton extends Component {
2840
constructor (props) {
2941
super(props);
3042
this.handleClick = this.handleClick.bind(this);
3143
}
3244

33-
handleClick = (event) => {
34-
const instantiate = this.props.automaticInstantiation || this.props.modelState === MODEL_STATE.NOT_INSTANTIATED;
35-
if (!this.props.editModelPage) {
36-
this.props.switchToEditModelPage();
37-
} else if (instantiate && this.props.automaticSimulation) {
45+
handleClick = (selectedOption) => {
46+
const instantiate = this.props.modelState === MODEL_STATE.NOT_INSTANTIATED;
47+
if (selectedOption === CREATE_NETWORK) {
48+
if (instantiate) {
49+
this.props.createNetwork();
50+
} else {
51+
this.props.showNetwork();
52+
}
53+
} else if (selectedOption === SIMULATE) {
54+
this.props.simulateNetwork();
55+
} else if (selectedOption === CREATE_AND_SIMULATE) {
3856
this.props.createAndSimulateNetwork();
39-
} else if (instantiate) {
40-
this.props.createNetwork();
57+
} else if (selectedOption === BACK_TO_EDIT) {
58+
this.props.switchToEditModelPage();
4159
} else {
4260
this.props.showNetwork();
4361
}
@@ -64,48 +82,43 @@ class SwitchPageButton extends Component {
6482
render () {
6583
const {
6684
classes,
67-
modelState,
6885
editModelPage,
69-
simulateNetwork,
7086
} = this.props;
71-
const disableSimulate = modelState === MODEL_STATE.SIMULATED;
7287
return (
7388
<div className={classes.container}>
74-
{
75-
editModelPage ? null
76-
77-
: (
78-
<Tooltip
79-
title={disableSimulate ? 'You have already simulated the network' : 'Simulate the network'}
80-
placement="left"
89+
{editModelPage
90+
? (
91+
<SplitButton
92+
options={editOptions}
93+
handleClick={(selectedOption) => this.handleClick(selectedOption)}
94+
icon={(
95+
<span style={{ marginRight: '5px' }}>
96+
<Icon name="rocket" />
97+
</span>
98+
)}
99+
skipIconFor={CREATE_NETWORK}
100+
/>
101+
)
102+
: (
103+
<>
104+
<Button
105+
variant="contained"
106+
onClick={() => this.handleClick(BACK_TO_EDIT)}
107+
startIcon={<Icon name="pencil" selected={false} />}
81108
>
82-
<span>
83-
<IconButton
84-
color="default"
85-
id="launchSimulationButton"
86-
className={classes.rocket}
87-
size="small"
88-
onClick={() => simulateNetwork()}
89-
disabled={disableSimulate}
90-
style={{ opacity: disableSimulate ? 0.5 : 1 }}
91-
>
109+
{TOPBAR_CONSTANTS.BACK_TO_EDITION}
110+
</Button>
111+
<SplitButton
112+
options={exploreOptions}
113+
handleClick={(selectedOption) => this.handleClick(selectedOption)}
114+
icon={(
115+
<span style={{ marginRight: '5px' }}>
92116
<Icon name="rocket" />
93-
94-
</IconButton>
95-
</span>
96-
</Tooltip>
97-
)
98-
}
99-
<Button
100-
variant="contained"
101-
size="small"
102-
className={classes.button}
103-
onClick={this.handleClick}
104-
endIcon={<Icon name={editModelPage ? 'rocket' : 'pencil'} selected={false} />}
105-
>
106-
{editModelPage ? this.getExploreLabel() : TOPBAR_CONSTANTS.BACK_TO_EDITION}
107-
</Button>
108-
117+
</span>
118+
)}
119+
/>
120+
</>
121+
)}
109122
</div>
110123
);
111124
}

‎webapp/components/topbar/menuConfiguration.js‎

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -335,44 +335,12 @@ export const getModelMenu = (props) => (
335335
},
336336
},
337337
{
338-
label: 'Explore view options',
339-
list: [
340-
{
341-
label: 'Automatic creation',
342-
icon: props.automaticInstantiation ? checkedIcon : 'fa',
343-
action: {
344-
handlerAction: 'redux',
345-
parameters: [changeAutomaticInstantiation, true],
346-
},
347-
},
348-
{
349-
label: 'Manual creation',
350-
icon: !props.automaticInstantiation ? checkedIcon : 'fa',
351-
action: {
352-
handlerAction: 'redux',
353-
parameters: [changeAutomaticInstantiation, false],
354-
},
355-
},
356-
<Divider />,
357-
{
358-
label: 'Automatic simulation',
359-
icon: props.automaticSimulation ? checkedIcon : 'fa',
360-
action: {
361-
handlerAction: 'redux',
362-
parameters: [changeAutomaticSimulation, true],
363-
},
364-
},
365-
{
366-
label: 'Manual simulation',
367-
icon: !props.automaticSimulation ? checkedIcon : 'fa',
368-
action: {
369-
handlerAction: 'redux',
370-
parameters: [changeAutomaticSimulation, false],
371-
},
372-
},
373-
],
338+
label: TOPBAR_CONSTANTS.CREATE_AND_SIMULATE_NETWORK,
339+
action: {
340+
handlerAction: 'redux',
341+
parameters: [createAndSimulateNetwork],
342+
},
374343
},
375-
376344
]
377345
);
378346

‎webapp/constants.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const TOPBAR_CONSTANTS = {
7373
CREATE_AND_SIMULATE_NETWORK: 'Create and simulate network',
7474
SIMULATE: 'Simulate network',
7575
EXPLORE_EXISTING_NETWORK: 'Explore model',
76-
BACK_TO_EDITION: 'Back to edit',
76+
BACK_TO_EDITION: 'BACK TO EDIT',
7777
NEW_PAGE: 'NEW_PAGE',
7878
NETWORK_MODEL: 'NETWORK_MODEL',
7979
};

0 commit comments

Comments
 (0)