Skip to content

Commit 0ad047d

Browse files
authored
Merge pull request #138 from MetaCell/feature/136
Feature/136
2 parents c0146f1 + 5654680 commit 0ad047d

46 files changed

Lines changed: 1853 additions & 590 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

netpyne_ui/netpyne_geppetto.py

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -512,6 +512,8 @@ def deleteParam(self, model, label):
512512
return False
513513

514514
def validateFunction(self, functionString):
515+
if isinstance(functionString, (float, int)):
516+
return True
515517
return validateFunction(functionString, self.netParams.__dict__)
516518

517519
def exportHLS(self, args):

webapp/Main.js

Lines changed: 12 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,69 +5,36 @@ jQuery(function () {
55
require('geppetto-client-initialization');
66
const ReactDOM = require('react-dom');
77
const React = require('react');
8-
const getMuiTheme = require('@material-ui/core/styles/createMuiTheme').default;
98
const MuiThemeProvider = require('@material-ui/core/styles').MuiThemeProvider;
109
const NetPyNE = require('./components').NetPyNE;
1110

12-
13-
const Utils = require('./Utils').default;
14-
const Console = require('geppetto-client/js/components/interface/console/Console');
15-
const TabbedDrawer = require('geppetto-client/js/components/interface/drawer/TabbedDrawer');
16-
const PythonConsole = require('geppetto-client/js/components/interface/pythonConsole/PythonConsole');
17-
1811
const theme = require('./Theme').default
1912

2013
const Provider = require("react-redux").Provider;
2114
const configureStore = require('./redux/store').default;
2215

23-
const modelLoaded = require('./redux/actions/general').modelLoaded;
24-
2516
require('./css/netpyne.less');
2617
require('./css/material.less');
2718
require('./css/traceback.less');
19+
require('./css/flexlayout.less');
20+
require('./css/tree.less');
2821

2922
const store = configureStore();
3023

31-
function App (data = {}) {
32-
return (
33-
<div>
34-
<MuiThemeProvider theme={theme}>
35-
<Provider store={store}>
36-
<NetPyNE {...data}></NetPyNE>
37-
</Provider>
38-
</MuiThemeProvider>
24+
ReactDOM.render(
25+
<div>
26+
<MuiThemeProvider theme={theme}>
27+
<Provider store={store}>
28+
<NetPyNE ></NetPyNE>
29+
</Provider>
30+
</MuiThemeProvider>
3931

40-
<div id="footer">
41-
<div id="footerHeader">
42-
<TabbedDrawer anchor="appBar" labels={["Console", "Python"]} iconClass={["fa fa-terminal", "fa fa-flask"]} >
43-
<Console />
44-
<PythonConsole pythonNotebookPath={"notebooks/notebook.ipynb"} />
45-
</TabbedDrawer>
46-
</div>
47-
</div>
48-
</div>
49-
);
50-
}
51-
ReactDOM.render(<App />, document.querySelector('#mainContainer'));
32+
</div>,
33+
document.querySelector('#mainContainer')
34+
);
5235

5336
GEPPETTO.G.setIdleTimeOut(-1);
54-
GEPPETTO.G.debug(false); // Change this to true to see messages on the Geppetto console while loading
5537
GEPPETTO.Resources.COLORS.DEFAULT = "#6f54aa";
5638
GEPPETTO.trigger(GEPPETTO.Events.Show_spinner, "Initialising NetPyNE");
5739

58-
59-
GEPPETTO.on('jupyter_geppetto_extension_ready', data => {
60-
let project = { id: 1, name: 'Project', experiments: [{ "id": 1, "name": 'Experiment', "status": 'DESIGN' }] }
61-
GEPPETTO.Manager.loadProject(project, false);
62-
GEPPETTO.Manager.loadExperiment(1, [], []);
63-
Utils.execPythonMessage('from netpyne_ui.netpyne_geppetto import netpyne_geppetto');
64-
Utils.evalPythonMessage('netpyne_geppetto.getData',[]).then(response => {
65-
const data = Utils.convertToJSON(response);
66-
GEPPETTO.on(GEPPETTO.Events.Model_loaded, () => {
67-
store.dispatch(modelLoaded);
68-
});
69-
ReactDOM.render(<App data={data} />, document.querySelector('#mainContainer'), store.dispatch(modelLoaded));
70-
GEPPETTO.trigger("spinner:hide");
71-
})
72-
});
7340
});

webapp/Theme.js

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11

22
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
33
import purple from '@material-ui/core/colors/purple';
4-
import pink from '@material-ui/core/colors/pink';
4+
import orange from '@material-ui/core/colors/orange';
55

6-
// pink
7-
const secondaryColor = pink['A200']
8-
// purple
9-
const primaryColor = 'rgb(84, 58, 115)'
6+
// orange
7+
const primaryColor = '#f67700'
8+
const secondaryColor = '#f67700'
109

10+
const bgLight = '#616161';
11+
const bgRegular = '#424242';
12+
const bgDark = '#212121';
1113

1214
export default createMuiTheme({
1315
typography: {
@@ -21,25 +23,45 @@ export default createMuiTheme({
2123
}
2224
},
2325
palette: {
26+
type: 'dark',
2427
primary: { main: primaryColor, },
25-
secondary: { main: secondaryColor, }
28+
secondary: { main: bgLight, },
2629
},
2730
overrides: {
2831
MuiInputLabel: { formControl: { top: '-6px' } },
2932
MuiInput: {
3033
input: {
3134
outline: 'none !important',
3235
border: 'none !important',
33-
boxShadow: 'none !important'
36+
boxShadow: 'none !important',
3437
},
38+
root:{ color: 'white' }
39+
3540
},
3641
MuiSelect: {
3742
root: {
3843
outline: 'none !important',
3944
border: 'none !important',
4045
boxShadow: 'none !important'
4146
},
42-
select: { "&:focus" :{ background: "none" } },
43-
}
47+
select: { "&:focus" :{ background: "none" }, paddingLeft: '4px' },
48+
},
49+
MuiCard: { root: { height: '100%', backgroundColor: bgRegular, overflowY: 'auto' } },
50+
MuiBottomNavigation: { root: { backgroundColor: bgRegular } },
51+
MuiPaper: { root: { color: 'inherit' } },
52+
MuiBottomNavigationAction: { root: { color: 'white' } },
53+
MuiFab:{
54+
secondary: { color: 'white' },
55+
primary: { color: 'white' }
56+
},
57+
MuiButton: {
58+
containedSecondary: { color: 'white' },
59+
containedPrimary: { color: 'white' },
60+
},
61+
MuiMenuItem: { root: { color: 'white' } },
62+
63+
MuiListItemText: { root: { color: 'white' } },
64+
MuiDialogTitle: { root: { color: 'white' } }
65+
4466
}
4567
});

webapp/components/NetPyNE.js

Lines changed: 51 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,44 @@
11
import React from "react";
22
import Toolbar from "@material-ui/core/Toolbar";
3-
import Transition from "./transition/Transition";
3+
44
import {
5-
NetPyNESynapses,
6-
NetPyNEConnectivityRules,
7-
NetPyNECellRules,
8-
NetPyNEStimulationSources,
9-
NetPyNEStimulationTargets,
10-
NetPyNESimConfig,
115
NetPyNEToolBar,
126
NetPyNETabs,
13-
NetPyNEPopulations,
147
LayoutManager,
15-
NetPyNEPlots
8+
Drawer
169
} from "netpyne/components";
1710

18-
export default class NetPyNE extends React.Component {
19-
constructor (props) {
20-
super(props);
21-
this.widgets = {};
22-
23-
}
11+
import { withStyles } from '@material-ui/core/styles'
12+
13+
const styles = ({ zIndex, palette, spacing }) => ({
14+
container: {
15+
height: "100%",
16+
width: "100%",
17+
display: "flex",
18+
flexDirection: "column"
19+
},
20+
toolbar: {
21+
backgroundColor: palette.primary.main,
22+
width: "100%",
23+
boxShadow: "0 0px 4px 0 rgba(0, 0, 0, 0.2), 0 0px 8px 0 rgba(0, 0, 0, 0.19)",
24+
position: "relative",
25+
top: 0,
26+
left: 0,
27+
zIndex: zIndex.appBar
28+
},
29+
views: {
30+
display: "flex",
31+
flexFlow: "rows",
32+
width: "100%",
33+
marginRight: spacing(-1)
34+
},
35+
drawer: { marginLeft: spacing(-1) },
36+
content: { position: "relative", zIndex: zIndex.drawer + 1 }
37+
})
2438

39+
40+
class NetPyNE extends React.Component {
41+
2542
openPythonCallDialog (event) {
2643
const payload = { errorMessage: event['evalue'], errorDetails: event['traceback'].join('\n') }
2744
this.props.pythonCallErrorDialogBox(payload)
@@ -35,94 +52,27 @@ export default class NetPyNE extends React.Component {
3552
GEPPETTO.off(GEPPETTO.Events.Error_while_exec_python_command, this.openPythonCallDialog, this)
3653
}
3754

38-
UNSAFE_componentWillReceiveProps (nextProps) {
39-
if (this.props.data != nextProps.data) {
40-
console.log("Initialising NetPyNE Tabs");
41-
42-
window.metadata = nextProps.data.metadata;
43-
window.currentFolder = nextProps.data.currentFolder;
44-
window.isDocker = nextProps.data.isDocker;
45-
}
46-
}
47-
48-
4955
render () {
50-
if (!this.props.data) {
51-
return <div></div>;
52-
} else {
53-
if (this.props.editMode) {
54-
var content = (
55-
<div style={{ marginBottom: "50px" }}>
56-
<NetPyNEPopulations model={"netParams.popParams"} />
57-
<NetPyNECellRules model={"netParams.cellParams"} />
58-
<NetPyNESynapses model={"netParams.synMechParams"} />
59-
<NetPyNEConnectivityRules model={"netParams.connParams"} />
60-
<NetPyNEStimulationSources model={"netParams.stimSourceParams"} />
61-
<NetPyNEStimulationTargets model={"netParams.stimTargetParams"} />
62-
<NetPyNESimConfig model={this.props.data.simConfig} />
63-
<NetPyNEPlots model={"simConfig.analysis"} />
64-
</div>
65-
);
66-
} else {
67-
var content = <LayoutManager />;
68-
}
56+
const { classes } = this.props
6957

70-
return (
71-
<div
72-
style={{
73-
height: "100%",
74-
width: "100%",
75-
display: "flex",
76-
flexDirection: "column"
77-
}}
78-
>
79-
<div style={{ position: "relative", zIndex: "100" }}>
80-
<Toolbar
81-
id="appBar"
82-
style={{
83-
backgroundColor: "#543a73",
84-
width: "100%",
85-
boxShadow:
86-
"0 0px 4px 0 rgba(0, 0, 0, 0.2), 0 0px 8px 0 rgba(0, 0, 0, 0.19)",
87-
position: "relative",
88-
top: "0px",
89-
left: "0px",
90-
zIndex: 100
91-
}}
92-
>
93-
<div style={{ marginLeft: -12 }}>
94-
<NetPyNEToolBar />
95-
</div>
96-
<div
97-
style={{
98-
display: "flex",
99-
flexFlow: "rows",
100-
width: "100%",
101-
marginRight: -10
102-
}}
103-
>
104-
<NetPyNETabs />
105-
</div>
106-
</Toolbar>
107-
</div>
108-
109-
{/** TODO Reengineer Transition using the middleware to handle simulation and instantiation. The transition should only show content related to what actually we want to do
110-
<Transition
111-
tab={this.state.value}
112-
clickOnTab={this.state.tabClicked}
113-
handleDeactivateInstanceUpdate={this.handleDeactivateInstanceUpdate}
114-
handleDeactivateSimulationUpdate={
115-
this.handleDeactivateSimulationUpdate
116-
}
117-
freezeInstance={this.state.freezeInstance}
118-
freezeSimulation={this.state.freezeSimulation}
119-
fastForwardInstantiation={this.state.fastForwardInstantiation}
120-
fastForwardSimulation={this.state.fastForwardSimulation}
121-
/> */}
122-
123-
{content}
58+
return (
59+
<div className={classes.container}>
60+
<div className={classes.content}>
61+
<Toolbar id="appBar" className={classes.toolbar}>
62+
<div className={classes.drawer}>
63+
<NetPyNEToolBar />
64+
</div>
65+
<div className={classes.views}>
66+
<NetPyNETabs />
67+
</div>
68+
</Toolbar>
69+
</div>
70+
<div style={{ flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }}>
71+
<Drawer/>
72+
<LayoutManager/>
12473
</div>
125-
);
126-
}
74+
</div>
75+
);
12776
}
12877
}
78+
export default withStyles(styles)(NetPyNE)

webapp/components/definition/cellRules/NetPyNECellRules.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ export default class NetPyNECellRules extends React.Component {
308308
this.setState({ selectedMechanism: newMechanismName });
309309
}
310310

311-
if (Object.keys(this.state.value).length === 0) {
311+
if (this.state.value && Object.keys(this.state.value).length === 0) {
312312
this.setState({
313313
selectedCellRule: undefined,
314314
selectedSection: undefined,
@@ -463,7 +463,7 @@ export default class NetPyNECellRules extends React.Component {
463463
return selectedCellRule
464464
}
465465
} else {
466-
return <ContentAdd/>
466+
return <ContentAdd style={{ color: 'white' }}/>
467467
}
468468

469469
case 'sections':
@@ -479,7 +479,7 @@ export default class NetPyNECellRules extends React.Component {
479479
}
480480
} else {
481481
if (page == "sections" ) {
482-
return <ContentAdd style={{ height: '100%' }}/>
482+
return <ContentAdd style={{ height: '100%', color: 'white' }}/>
483483
} else {
484484
if (selectedCellRule) {
485485
if (!!model && !!model[selectedCellRule] && Object.keys(model[selectedCellRule]['secs']).length > 0){
@@ -659,11 +659,6 @@ export default class NetPyNECellRules extends React.Component {
659659

660660
return (
661661
<Card style={{ clear: 'both' }}>
662-
<CardHeader
663-
id="CellRules"
664-
title="Cell rules"
665-
subheader="Define here the rules to set the biophysics and morphology of the cells in your network"
666-
/>
667662
{content}
668663
{dialogPop}
669664
</Card>

webapp/components/definition/cellRules/sections/NetPyNESectionThumbnail.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default class NetPyNESectionThumbnail extends React.Component {
4646
<Button
4747
variant="contained"
4848
id={name}
49-
color={selected ? 'secondary' : 'primary'}
49+
color={selected ? 'primary' : 'secondary'}
5050
style={ styles.btn }
5151
onMouseEnter={ () => this.setState({ isHovered: true }) }
5252
onMouseLeave={ () => this.setState({ isHovered: false }) }

0 commit comments

Comments
 (0)