Skip to content

Commit 31f278e

Browse files
author
rodriguez-facundo
committed
#147 More styling
1 parent 652ff27 commit 31f278e

10 files changed

Lines changed: 107 additions & 102 deletions

File tree

‎webapp/components/definition/cellRules/NetPyNECellRule.js‎

Lines changed: 76 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@ import DialogTitle from '@material-ui/core/DialogTitle';
1313

1414
import { NetPyNESelectField, NetPyNEField, NetPyNECoordsRange } from 'netpyne/components';
1515
import Utils from '../../../Utils';
16+
import ExpansionPanel from '../../general/ExpansionPanel'
17+
import { withStyles } from "@material-ui/core/styles"
1618

17-
export default class NetPyNECellRule extends React.Component {
19+
class NetPyNECellRule extends React.Component {
1820

1921
constructor (props) {
2022
super(props);
@@ -68,7 +70,7 @@ export default class NetPyNECellRule extends React.Component {
6870
}
6971

7072
render () {
71-
73+
const { classes } = this.props
7274
var dialogPop = (this.state.errorMessage != undefined ? (
7375
<Dialog
7476
open={true}
@@ -92,85 +94,95 @@ export default class NetPyNECellRule extends React.Component {
9294
)
9395
return (
9496
<div>
95-
<div>
97+
<div className={classes.root}>
9698

9799
<TextField
98100
onChange={this.handleRenameChange}
99101
value={this.state.currentName}
100102
disabled={this.renaming}
101-
label="The name of the cell rule"
103+
label="The name of the cell type"
102104
className={"netpyneField"}
103105
id={"cellRuleName"}
104106
style={{ marginTop: 8 }}
105107
/>
106108

107-
<div style={{ float: 'left', marginTop: '20px' }}>
108-
<b>Conditions:</b>
109-
</div>
110-
111-
<NetPyNEField id={"netParams.cellParams.conds.cellType"} >
112-
<NetPyNESelectField
113-
model={"netParams.cellParams['" + this.state.currentName + "']['conds']['cellType']"}
114-
method={"netpyne_geppetto.getAvailableCellTypes"}
115-
postProcessItems={this.postProcessMenuItems}
116-
multiple={true}
117-
/>
118-
</NetPyNEField>
119109

120-
<NetPyNEField id={"netParams.cellParams.conds.cellModel"} >
121-
<NetPyNESelectField
122-
model={"netParams.cellParams['" + this.state.currentName + "']['conds']['cellModel']"}
123-
method={"netpyne_geppetto.getAvailableCellModels"}
124-
postProcessItems={this.postProcessMenuItems}
125-
multiple={true}
110+
<ExpansionPanel className={classes.expandable} elevation={0}>
111+
<div>
112+
<b>Conditions (optional):</b>
113+
</div>
114+
115+
<NetPyNEField id={"netParams.cellParams.conds.cellModel"} >
116+
<NetPyNESelectField
117+
model={"netParams.cellParams['" + this.state.currentName + "']['conds']['cellModel']"}
118+
method={"netpyne_geppetto.getAvailableCellModels"}
119+
postProcessItems={this.postProcessMenuItems}
120+
multiple={true}
121+
/>
122+
</NetPyNEField>
123+
124+
<NetPyNEField id={"netParams.cellParams.conds.pop"} >
125+
<NetPyNESelectField
126+
model={"netParams.cellParams['" + this.state.currentName + "']['conds']['pop']"}
127+
method={"netpyne_geppetto.getAvailablePops"}
128+
postProcessItems={this.postProcessMenuItems}
129+
multiple={true}
130+
/>
131+
</NetPyNEField>
132+
133+
<NetPyNECoordsRange
134+
id="xRangeCellParams"
135+
name={this.state.currentName}
136+
model={'netParams.cellParams'}
137+
conds={'conds'}
138+
items={[
139+
{ value: 'x', label: 'Absolute' },
140+
{ value: 'xnorm', label: 'Normalized' }
141+
]}
126142
/>
127-
</NetPyNEField>
128-
129-
<NetPyNEField id={"netParams.cellParams.conds.pop"} >
130-
<NetPyNESelectField
131-
model={"netParams.cellParams['" + this.state.currentName + "']['conds']['pop']"}
132-
method={"netpyne_geppetto.getAvailablePops"}
133-
postProcessItems={this.postProcessMenuItems}
134-
multiple={true}
135-
/>
136-
</NetPyNEField>
137-
138-
<NetPyNECoordsRange
139-
id="xRangeCellParams"
140-
name={this.state.currentName}
141-
model={'netParams.cellParams'}
142-
conds={'conds'}
143-
items={[
144-
{ value: 'x', label: 'Absolute' },
145-
{ value: 'xnorm', label: 'Normalized' }
146-
]}
147-
/>
148143

149-
<NetPyNECoordsRange
150-
id="yRangeCellParams"
151-
name={this.state.currentName}
152-
model={'netParams.cellParams'}
153-
conds={'conds'}
154-
items={[
155-
{ value: 'y', label: 'Absolute' },
156-
{ value: 'ynorm', label: 'Normalized' }
157-
]}
158-
/>
159-
160-
<NetPyNECoordsRange
161-
id="zRangeCellParams"
162-
name={this.state.currentName}
163-
model={'netParams.cellParams'}
164-
conds={'conds'}
165-
items={[
166-
{ value: 'z', label: 'Absolute' },
167-
{ value: 'znorm', label: 'Normalized' }
168-
]}
169-
/>
144+
<NetPyNECoordsRange
145+
id="yRangeCellParams"
146+
name={this.state.currentName}
147+
model={'netParams.cellParams'}
148+
conds={'conds'}
149+
items={[
150+
{ value: 'y', label: 'Absolute' },
151+
{ value: 'ynorm', label: 'Normalized' }
152+
]}
153+
/>
170154

155+
<NetPyNECoordsRange
156+
id="zRangeCellParams"
157+
name={this.state.currentName}
158+
model={'netParams.cellParams'}
159+
conds={'conds'}
160+
items={[
161+
{ value: 'z', label: 'Absolute' },
162+
{ value: 'znorm', label: 'Normalized' }
163+
]}
164+
/>
165+
166+
</ExpansionPanel>
171167
</div>
172168
{dialogPop}
173169
</div>
174170
);
175171
}
176172
}
173+
174+
175+
const styles = ({ shape, spacing }) => ({
176+
expandable: {
177+
borderRadius: shape.borderRadius,
178+
backgroundColor: 'inherit',
179+
paddingTop: spacing(2),
180+
"&::before": { content: 'unset' }
181+
},
182+
root: {
183+
display: 'flex',
184+
flexDirection: 'column'
185+
}
186+
})
187+
188+
export default withStyles(styles)(NetPyNECellRule)

‎webapp/components/definition/cellRules/NetPyNECellRules.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -154,10 +154,10 @@ export default class NetPyNECellRules extends React.Component {
154154
model[selectedCellRule].secs[selectedSection]['mechs'] = {};
155155
Utils.execPythonMessage('netpyne_geppetto.netParams.cellParams["' + selectedCellRule + '"]["secs"]["' + selectedSection + '"]["mechs"] = {}');
156156
}
157-
var params = {};
158157
Utils
159158
.evalPythonMessage("netpyne_geppetto.getMechParams", [mechanism])
160159
.then(response => {
160+
const params = {};
161161
response.forEach(param => params[param] = 0);
162162
Utils.execPythonMessage('netpyne_geppetto.netParams.cellParams["' + selectedCellRule + '"]["secs"]["' + selectedSection + '"]["mechs"]["' + mechanism + '"] = ' + JSON.stringify(params));
163163
})
@@ -343,7 +343,7 @@ export default class NetPyNECellRules extends React.Component {
343343
*/
344344
if (nextPage === page) {
345345
if (page === "main") {
346-
this.handleNewCellRule({ 'CellRule': { 'conds':{}, 'secs':{} } });
346+
this.handleNewCellRule({ 'CellType': { 'conds':{}, 'secs':{} } });
347347
} else if (page === "sections") {
348348
this.handleNewSection({ 'Section': { 'geom': {}, 'topol': {}, 'mechs': {} } });
349349
}
@@ -672,7 +672,7 @@ export default class NetPyNECellRules extends React.Component {
672672
</div>
673673
<Icon
674674
color="disabled"
675-
className="fa fa-angle-right"
675+
className="fa fa-angle-right breadcrumb-spacer"
676676
/>
677677
<div className='ml-2'>
678678
<Tooltip title={this.createTooltip('section')} placement="top">
@@ -695,7 +695,7 @@ export default class NetPyNECellRules extends React.Component {
695695

696696
<Icon
697697
color="disabled"
698-
className="fa fa-angle-right"
698+
className="fa fa-angle-right breadcrumb-spacer"
699699
/>
700700
<NetPyNENewMechanism
701701
className="ml-2"

‎webapp/components/definition/configuration/NetPyNESimConfig.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ class NetPyNESimConfig extends React.Component {
295295
<BottomNavigationAction id={"configSaveConfiguration"} key={'SaveConfiguration'} label={'Save Configuration'} icon={<FontIcon className={"fa fa-floppy-o"} />} onClick={() => this.select(2, 'SaveConfiguration')} />
296296
<BottomNavigationAction id={"confignetParams"} key={'netParams'} label={'Network Attributes'} icon={<FontIcon className={"fa fa-cog"} />} onClick={() => this.select(3, 'netParams')} />
297297
</BottomNavigation>
298-
<GridLayout>
298+
<GridLayout className={classes.layout}>
299299
<div/>
300300
{contentLeft}
301301
{contentRight}
@@ -307,12 +307,14 @@ class NetPyNESimConfig extends React.Component {
307307
}
308308

309309
const styles = ({ shape, spacing }) => ({
310-
root: { height: `calc(100% - 56px - ${spacing(1)}px)` },
310+
root: { height: `calc(100% - 56px - ${spacing(1)}px)`, flexDirection: 'column' },
311311
bottomNav: {
312312
borderRadius: shape.borderRadius,
313313
backgroundColor: bgDark,
314-
marginBottom: spacing(1)
314+
marginBottom: spacing(1),
315+
overflow: 'hidden'
315316
},
317+
layout: { height: "100%", display: 'flex' }
316318

317319
})
318320

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -164,16 +164,6 @@ class NetPyNEPopulation extends React.Component {
164164
model={"netParams.popParams['" + this.props.name + "']['cellType']"}
165165
/>
166166
</NetPyNEField>
167-
168-
<NetPyNEField id="netParams.popParams.cellModel" >
169-
<NetPyNETextField
170-
callback={(newValue, oldValue) => {
171-
Utils.evalPythonMessage("netpyne_geppetto.propagate_field_rename", ['cellModel', newValue, oldValue])
172-
this.props.updateCards()
173-
}}
174-
model={"netParams.popParams['" + this.props.name + "']['cellModel']"}
175-
/>
176-
</NetPyNEField>
177167

178168
<Dimensions modelName={this.props.name} />
179169
{dialogPop}

‎webapp/components/general/ExpansionPanel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ class NetPyNEExpansionPanel extends Component {
1414
state = { expanded: false }
1515
render () {
1616

17-
const { children, classes } = this.props
17+
const { children, classes, ...others } = this.props
1818
const [summary, ...details] = children
1919

2020
return (
21-
<ExpansionPanel expanded={this.state.expanded}>
21+
<ExpansionPanel expanded={this.state.expanded} {...others}>
2222
<ExpansionPanelSummary
2323
IconButtonProps={{
2424
onClick: () => this.setState({ expanded: !this.state.expanded }),

‎webapp/components/general/GridLayout.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React from 'react'
22
import Grid from '@material-ui/core/Grid'
3-
import { makeStyles } from '@material-ui/core/styles'
43
import Card from '@material-ui/core/Card';
54
import CardContent from '@material-ui/core/CardContent';
65

7-
const useStyles = makeStyles(({ spacing, palette }) => ({}))
8-
9-
export default function GridLayout ({ children }) {
10-
const classes = useStyles()
6+
export default function GridLayout ({ children, className = '' }) {
117
// left-hand-side-top - left-hand-side-bottom - right-hand-side - others
128
const [lhst, lhsb, rhs, ...others] = children
139
return (
14-
<div className={classes.root}>
10+
<div className={className}>
1511
<Grid container elevation={0} spacing={1} alignItems="stretch">
1612

1713
<Grid item>

‎webapp/components/general/NetPyNEHome.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
88
display: 'flex',
99
alignItems: 'center'
1010
},
11-
icon: { fontSize: 40, fontWeight: 'bold' }
11+
icon: { fontSize: 40, fontWeight: 'bold', textAlign: 'center' }
1212
}))
1313

1414

@@ -33,7 +33,7 @@ export default ({ handleClick, selection }) => {
3333
</Tooltip>
3434
<Icon
3535
color="disabled"
36-
className="fa fa-angle-right"
36+
className="fa fa-angle-right breadcrumb-spacer"
3737
/>
3838

3939
</div>

‎webapp/constants.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -325,21 +325,21 @@ export const DEFAULT_NETWORK_WIDGETS = {
325325

326326
export const EDIT_WIDGETS = {
327327
[PYTHON_CONSOLE_WIDGET.id]: PYTHON_CONSOLE_WIDGET,
328-
'popParams': {
329-
id: 'popParams',
330-
name: 'Populations',
328+
'cellParams': {
329+
id: 'cellParams',
330+
name: 'Cell types',
331331
status: WidgetStatus.ACTIVE,
332-
component: 'popParams',
332+
component: 'cellParams',
333333
panelName: TOP_PANEL,
334334
enableRename: false,
335335
hideOnClose: true,
336336
pos: 0
337337
},
338-
'cellParams': {
339-
id: 'cellParams',
340-
name: 'Cell rules',
338+
'popParams': {
339+
id: 'popParams',
340+
name: 'Populations',
341341
status: WidgetStatus.HIDDEN,
342-
component: 'cellParams',
342+
component: 'popParams',
343343
panelName: TOP_PANEL,
344344
enableRename: false,
345345
hideOnClose: true,

‎webapp/css/netpyne.less‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,14 +152,18 @@ button.actionButton {
152152
background: transparent;
153153
justify-content: flex-start;
154154
margin: 0px;
155+
padding: @gutter/2;
155156
border-radius: @radius;
156-
margin: @gutter / 2;
157157
flex-wrap: wrap;
158158
.MuiIcon-colorDisabled {
159159
color: black
160160
}
161161
}
162-
162+
.breadcrumb-spacer {
163+
margin-left: var(--m2);
164+
width: 40px;
165+
text-align: center;
166+
}
163167

164168
.hiddenModal {
165169
position: absolute !important;

‎webapp/theme.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,8 @@ const rawTheme = {
8989
},
9090
MuiExpansionPanelDetails: { root: { padding: 0, margin: 0, minHeight: 'unset!important', flexDirection: 'column' } },
9191
MuiExpansionPanel: { root: { padding: 0, margin: '0px!important', minHeight: 'unset' } },
92-
MuiAutocomplete: { popupIndicator: { marginRight: 0 } }
92+
MuiAutocomplete: { popupIndicator: { marginRight: 0 } },
93+
MuiCardContent: { root: { padding: 8 } }
9394
}
9495
}
9596

0 commit comments

Comments
 (0)