Skip to content

Commit 811719b

Browse files
appukuttan-shaileshappukuttan-shailesh
committed
fix multicompare, change navbar (combine results, figures into validation), other fixes
1 parent 8562f35 commit 811719b

10 files changed

Lines changed: 490 additions & 212 deletions

File tree

‎apps/validation_framework_v2/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
-->
3535
<title>EBRAINS Model Catalog</title>
3636
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@700" rel="stylesheet">
37-
37+
3838
</head>
3939
<body>
4040
<noscript>You need to enable JavaScript to run this app.</noscript>

‎apps/validation_framework_v2/public/manifest.json‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,5 @@
11
{
2-
"short_name": "HBP Validation Framework",
3-
"name": "Human Brain Project Validation Framework app",
4-
"icons": [
5-
{
6-
"src": "favicon.ico",
7-
"sizes": "64x64 32x32 24x24 16x16",
8-
"type": "image/x-icon"
9-
},
10-
{
11-
"src": "logo192.png",
12-
"type": "image/png",
13-
"sizes": "192x192"
14-
},
15-
{
16-
"src": "logo512.png",
17-
"type": "image/png",
18-
"sizes": "512x512"
19-
}
20-
],
21-
"start_url": ".",
22-
"display": "standalone",
23-
"theme_color": "#000000",
24-
"background_color": "#ffffff"
25-
}
2+
"short_name": "EBRAINS Model Catalog",
3+
"name": "EBRAINS Model Catalog",
4+
"icons": []
5+
}

‎apps/validation_framework_v2/src/CompareMultiResults.js‎

Lines changed: 152 additions & 135 deletions
Large diffs are not rendered by default.

‎apps/validation_framework_v2/src/ConfigForm.js‎

Lines changed: 72 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import DialogContent from "@material-ui/core/DialogContent";
66
import DialogActions from "@material-ui/core/DialogActions";
77
import Button from "@material-ui/core/Button";
88
import MultipleSelect from "./MultipleSelect";
9+
import SwitchMultiWay from "./SwitchMultiWay";
910
import Box from "@material-ui/core/Box";
1011
import Theme from "./theme";
1112

12-
import ThreeWaySwitch from "./ThreeWaySwitch";
1313
import {
1414
displayValid,
1515
filterKeys,
@@ -27,12 +27,15 @@ export default class ConfigForm extends React.Component {
2727
this.state = {
2828
config: props.config,
2929
display: props.display,
30+
onlyCuratedModels: false,
31+
onlyWithResults: false,
3032
error: null,
3133
};
3234

3335
this.handleClose = this.handleClose.bind(this);
3436
this.handleCancel = this.handleCancel.bind(this);
3537
this.handleDisplayChange = this.handleDisplayChange.bind(this);
38+
this.handleCuratedChange = this.handleCuratedChange.bind(this);
3639
this.handleFieldChange = this.handleFieldChange.bind(this);
3740
}
3841

@@ -48,6 +51,14 @@ export default class ConfigForm extends React.Component {
4851
this.setState({ display: display });
4952
}
5053

54+
handleCuratedChange(flag) {
55+
this.setState({ onlyCuratedModels: flag });
56+
}
57+
58+
handleWithResultsChange(flag) {
59+
this.setState({ onlyWithResults: flag });
60+
}
61+
5162
handleFieldChange(event) {
5263
const newConfig = { ...this.state.config };
5364
newConfig[event.target.name] = event.target.value;
@@ -75,7 +86,7 @@ export default class ConfigForm extends React.Component {
7586
if (this.state.error) {
7687
return this.renderError();
7788
} else {
78-
let showFilters = {};
89+
let showFilters = [];
7990
if (this.state.display === "Only Models") {
8091
showFilters = filterModelKeys;
8192
} else if (this.state.display === "Only Tests") {
@@ -98,13 +109,12 @@ export default class ConfigForm extends React.Component {
98109
Configure App
99110
</DialogTitle>
100111
<DialogContent>
101-
<Box my={2}>
112+
<Box style={{ paddingTop: "16px", paddingBottom: "8px" }}>
102113
<form>
103-
<ThreeWaySwitch
114+
<SwitchMultiWay
104115
values={displayValid}
105116
selected={this.state.display}
106-
onChange={this.handleDisplayChange}
107-
/>
117+
onChange={this.handleDisplayChange} />
108118
{showFilters.map((filter) => (
109119
<MultipleSelect
110120
itemNames={
@@ -118,8 +128,63 @@ export default class ConfigForm extends React.Component {
118128
key={filter}
119129
/>
120130
))}
131+
121132
</form>
122133
</Box>
134+
{/* <table style={{
135+
borderCollapse: "separate",
136+
borderSpacing: "0 1em",
137+
paddingLeft: "8px",
138+
}}>
139+
<tbody>
140+
{
141+
this.state.display !== "Only Tests"
142+
&&
143+
<tr>
144+
<td>
145+
<span style={{
146+
fontSize: "1.0rem",
147+
lineHeight: 1.43,
148+
color: "rgb(118, 118, 118)",
149+
paddingRight: "16px",
150+
}}>
151+
Only Curated Models
152+
</span>
153+
</td>
154+
<td>
155+
<form>
156+
<SwitchMultiWay values={["Yes", "No"]}
157+
selected={this.state.onlyCuratedModels ? "Yes" : "No"}
158+
onChange={this.handleCuratedChange}
159+
compact={true}
160+
/>
161+
</form>
162+
</td>
163+
</tr>
164+
}
165+
<tr>
166+
<td>
167+
<span style={{
168+
fontSize: "1.0rem",
169+
lineHeight: 1.43,
170+
color: "rgb(118, 118, 118)",
171+
paddingRight: "16px",
172+
}}>
173+
Only With Validation Results
174+
</span>
175+
</td>
176+
<td>
177+
<form>
178+
<SwitchMultiWay values={["Yes", "No"]}
179+
selected={this.state.onlyWithResults ? "Yes" : "No"}
180+
onChange={this.handleWithResultsChange}
181+
compact={true}
182+
/>
183+
</form>
184+
</td>
185+
</tr>
186+
</tbody>
187+
</table> */}
123188
</DialogContent>
124189
<DialogActions>
125190
<Button onClick={this.handleCancel} color="default">
@@ -129,7 +194,7 @@ export default class ConfigForm extends React.Component {
129194
Ok
130195
</Button>
131196
</DialogActions>
132-
</Dialog>
197+
</Dialog >
133198
);
134199
}
135200
}

‎apps/validation_framework_v2/src/Introduction.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import { makeStyles } from "@material-ui/core/styles";
33
import { withStyles } from "@material-ui/core/styles";
4-
import Paper from "@material-ui/core/Paper";
54
import Grid from "@material-ui/core/Grid";
65
import Typography from "@material-ui/core/Typography";
76
import SettingsIcon from "@material-ui/icons/Settings";

‎apps/validation_framework_v2/src/ModelDetail.js‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Grid from "@material-ui/core/Grid";
88
import Typography from "@material-ui/core/Typography";
99
import IconButton from "@material-ui/core/IconButton";
1010
import CloseIcon from "@material-ui/icons/Close";
11+
import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
1112
import AppBar from "@material-ui/core/AppBar";
1213
import Tabs from "@material-ui/core/Tabs";
1314
import Tab from "@material-ui/core/Tab";
@@ -47,6 +48,17 @@ const styles = (theme) => ({
4748
top: theme.spacing(1),
4849
color: theme.palette.grey[500],
4950
},
51+
default_tabStyle: {
52+
backgroundColor: Theme.tableHeader,
53+
},
54+
active_tabStyle: {
55+
backgroundColor: Theme.activeTabColor,
56+
},
57+
default_subTabStyle: {
58+
backgroundColor: Theme.subTabColor,
59+
fontStyle: "italic",
60+
opacity: 1.0
61+
}
5062
});
5163

5264
function TabPanel(props) {
@@ -243,7 +255,7 @@ class ModelDetail extends React.Component {
243255
};
244256
}
245257
// check if all model instances are now in compare
246-
this.setState({ compareFlag: this.checkCompareStatus() });
258+
this.setState({ compareFlag: this.checkCompareStatus(model) });
247259

248260
setCompareModels(compareModels);
249261
showNotification(
@@ -289,6 +301,13 @@ class ModelDetail extends React.Component {
289301
}
290302

291303
handleTabChange(event, newValue) {
304+
// 0 : Model Info
305+
// 1 : Validations
306+
// 2 : Validations -> Results
307+
// 3 : Validations -> Figures
308+
if (newValue === 1) {
309+
newValue = 2
310+
}
292311
this.setState({ tabValue: newValue });
293312
}
294313

@@ -365,6 +384,7 @@ class ModelDetail extends React.Component {
365384
}
366385

367386
render() {
387+
const { classes } = this.props;
368388
return (
369389
<Dialog
370390
fullScreen
@@ -409,11 +429,28 @@ class ModelDetail extends React.Component {
409429
color: Theme.textPrimary,
410430
}}
411431
>
412-
<Tab label="Info" />
413-
<Tab label="Results" />
414-
<Tab label="Figures" />
432+
<Tab label="Info" className={this.state.tabValue === 0 ? classes.active_tabStyle : classes.default_tabStyle}
433+
style={{ opacity: 1 }} />
434+
435+
<Tab label={this.state.tabValue >= 1
436+
? <div>Validations<DoubleArrowIcon style={{ verticalAlign: 'bottom', opacity: 1 }} /></div>
437+
: "Validations"}
438+
className={this.state.tabValue >= 1 ? classes.active_tabStyle : classes.default_tabStyle} />
439+
440+
{this.state.tabValue >= 1 && <Tab label="Results" className={classes.default_subTabStyle}
441+
style={{
442+
borderTop: "medium solid", borderTopColor: Theme.activeTabColor,
443+
borderBottom: "medium solid", borderBottomColor: Theme.activeTabColor
444+
}} />}
445+
446+
{this.state.tabValue >= 1 && <Tab label="Figures" className={classes.default_subTabStyle}
447+
style={{
448+
borderTop: "medium solid", borderTopColor: Theme.activeTabColor,
449+
borderBottom: "medium solid", borderBottomColor: Theme.activeTabColor
450+
}} />}
415451
</Tabs>
416452
</AppBar>
453+
417454
<TabPanel value={this.state.tabValue} index={0}>
418455
<Grid container spacing={3}>
419456
<Grid item xs={9}>
@@ -470,14 +507,16 @@ class ModelDetail extends React.Component {
470507
</Grid>
471508
</TabPanel>
472509
<TabPanel value={this.state.tabValue} index={1}>
510+
</TabPanel>
511+
<TabPanel value={this.state.tabValue} index={2}>
473512
<ModelResultOverview
474513
id={this.props.modelData.id}
475514
modelJSON={this.props.modelData}
476515
results={this.state.results}
477516
loadingResult={this.state.loadingResult}
478517
/>
479518
</TabPanel>
480-
<TabPanel value={this.state.tabValue} index={2}>
519+
<TabPanel value={this.state.tabValue} index={3}>
481520
<ResultGraphs
482521
id={this.props.modelData.id}
483522
results={this.state.results}
@@ -497,4 +536,4 @@ ModelDetail.propTypes = {
497536
open: PropTypes.bool.isRequired,
498537
};
499538

500-
export default withSnackbar(ModelDetail);
539+
export default withSnackbar(withStyles(styles)(ModelDetail));

0 commit comments

Comments
 (0)