Skip to content

Commit afaa3a8

Browse files
laemtllaemtl
committed
[EEG Browser] Visualization
1 parent 6d9ba07 commit afaa3a8

Some content is hidden

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

48 files changed

+4524
-497
lines changed

‎.babelrc‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
node_modules/*
22
vendor/*
3+
babel.config.js
34

45
# compiled js ignored since it is run on the jsx directory
56
modules/*/js/*
67
modules/*/js/*/*
8+
modules/electrophysiology_browser/jsx/react-series-data-viewer/src/protocol-buffers/chunk_pb.js
79
htdocs/js/components/*
810

911
# Ignore external libs

‎.flowconfig‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
[ignore]
2+
<PROJECT_ROOT>/node_modules/npm/test/fixtures/config/package.json
3+
<PROJECT_ROOT>/node_modules/npm/node_modules/config-chain/test/broken.json
4+
5+
[include]
6+
<PROJECT_ROOT>/modules/electrophysiology_browser/jsx/react-series-data-viewer/src
7+
8+
[libs]
9+
10+
[lints]
11+
12+
[options]
13+
react.runtime=automatic
14+
15+
[strict]

‎babel.config.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = function(api) {
2+
api.cache(true);
3+
const presets = [
4+
"@babel/preset-flow",
5+
"@babel/preset-react",
6+
"@babel/preset-env"
7+
];
8+
const plugins = [
9+
"@babel/plugin-proposal-object-rest-spread",
10+
["@babel/plugin-transform-runtime",
11+
{
12+
"regenerator": true
13+
}
14+
]
15+
];
16+
return {
17+
presets,
18+
plugins
19+
};
20+
}

‎modules/electrophysiology_browser/css/electrophysiology_browser.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.react-series-data-viewer-scoped .dropdown-menu {
2+
width: calc(100% - 5px);
3+
}
4+
5+
.react-series-data-viewer-scoped .dropdown-menu li {
6+
margin-top: 0;
7+
padding: 0 10px;
8+
}
9+
10+
.react-series-data-viewer-scoped .dropdown-menu li:hover {
11+
background: #eee;
12+
cursor: pointer;
13+
margin-top: 0;
14+
width: 100%;
15+
}
16+
17+
.btn.btn-xs {
18+
font-size: 12px;
19+
}
20+
21+
.btn-group .btn {
22+
margin: 0;
23+
}
24+
25+
.btn-group {
26+
margin-right: 10px;
27+
}
28+
29+
.btn-primary:focus:not(.active),
30+
.btn-primary:active:not(.active) {
31+
color: #246EB6;
32+
background-color: white;
33+
border-color: #246EB6;
34+
outline: 0;
35+
}
36+
37+
.no-gutters > div {
38+
padding:0;
39+
}
40+
41+
svg {
42+
user-select: none;
43+
}
44+
45+
.annotation.list-group-item {
46+
background: #fffae6;
47+
border-left: 5px solid #ff6600;
48+
}
49+
50+
.event-list .btn.btn-primary {
51+
color: #555;
52+
border: 1px solid #555;
53+
}
54+
55+
.event-list .btn.btn-primary.active {
56+
color: #000;
57+
background-color: #ddd;
58+
border: 1px solid #000;
59+
}
60+
61+
.event-list .btn.btn-primary:hover {
62+
color: #333;
63+
background-color: #eee;
64+
border: 1px solid #333;
65+
}
66+
67+
#electrode-montage .list-group {
68+
border: 1px solid #ddd;
69+
}
70+
71+
#electrode-montage .list-group-item:first-child {
72+
border-top: none;
73+
}
74+
75+
#electrode-montage .list-group-item {
76+
margin-bottom: 0;
77+
border-left: none;
78+
border-right: none;
79+
border-bottom: none;
80+
}

‎modules/electrophysiology_browser/jsx/components/DownloadPanel.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/**
2+
* This file contains React component for Electrophysiology module.
3+
*/
4+
import React, {Component} from 'react';
5+
import Panel from 'Panel';
6+
7+
/**
8+
* EEG Download Panel
9+
*
10+
* Display EEG files fto download
11+
*/
12+
class DownloadPanel extends Component {
13+
/**
14+
* @constructor
15+
* @param {object} props - React Component properties
16+
*/
17+
constructor(props) {
18+
super(props);
19+
this.state = {
20+
data: this.props.data,
21+
labels: {
22+
physiological_file: 'EEG File',
23+
physiological_electrode_file: 'Electrode Info',
24+
physiological_channel_file: 'Channels Info',
25+
physiological_task_event_file: 'Events',
26+
all_files: 'All Files',
27+
physiological_fdt_file: '',
28+
},
29+
};
30+
}
31+
32+
/**
33+
* Renders the React component.
34+
*
35+
* @return {JSX} - React markup for the component
36+
*/
37+
render() {
38+
return (
39+
<Panel
40+
id='file-download'
41+
title={'File Download'}
42+
>
43+
<div style={{
44+
minHeight: '330px',
45+
display: 'flex',
46+
flexDirection: 'column',
47+
justifyContent: 'center',
48+
}}>
49+
{this.state.data.downloads
50+
.filter((download) =>
51+
download.type != 'physiological_fdt_file'
52+
)
53+
.map((download, i) => {
54+
const disabled = (download.file === '') ? true : false;
55+
return (
56+
<div
57+
key={i}
58+
className={'form-group row'}
59+
>
60+
<div
61+
className={'col-xs-offset-3 col-xs-4'}
62+
style={{
63+
color: '#074785',
64+
fontWeight: 'bold',
65+
lineHeight: '30px',
66+
verticalAlign: 'middle',
67+
}}
68+
>{this.state.labels[download.type]}</div>
69+
{disabled
70+
? <a
71+
className='btn disabled'
72+
style={{
73+
width: '120px',
74+
color: '#b3b3b3',
75+
cursor: 'not-allowed',
76+
borderRadius: '10px',
77+
border: '1px solid #b3b3b3',
78+
}}
79+
>Not Available</a>
80+
: <a
81+
className='btn'
82+
href={'/mri/jiv/get_file.php?file=' + download.file}
83+
target='_blank'
84+
download={this.state.data.downloads[0].file}
85+
style={{
86+
width: '120px',
87+
outline: 'none',
88+
color: '#1c4781',
89+
borderRadius: '10px',
90+
textDecoration: 'none',
91+
border: '1px solid #1c4781',
92+
}}
93+
>Download</a>
94+
}
95+
</div>
96+
);
97+
})
98+
}
99+
</div>
100+
</Panel>
101+
);
102+
}
103+
}
104+
105+
export {DownloadPanel};

‎modules/electrophysiology_browser/jsx/components/SidebarContent.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ const styles = {
88
sidebar: {
99
width: 150,
1010
height: 'calc(100vh)',
11-
backgroundColor: '#1a487e',
11+
background: '#E4EBF2',
12+
border: '1px solid #C3D5DB',
1213
fontWeight: 200,
1314
fontFamily: 'Helvetica, Arial, sans-serif',
1415
},
1516
sidebarLink: {
16-
color: '#fff',
17+
color: '#064785',
1718
fontSize: '16px',
1819
display: 'none',
1920
padding: '10px 0 0 30px',
@@ -36,19 +37,18 @@ const SidebarContent = (props) => {
3637
<div style={styles.sidebar}>
3738
<div style={
3839
{
39-
color: '#fff',
40+
color: '#064785',
4041
fontSize: '24px',
4142
fontWeight: 'bold',
4243
padding: '80px 0 0 10px',
43-
backgroundColor: '#1a487e',
4444
}
4545
}>
4646
Navigation
4747
</div>
4848
<div style={styles.content}>
4949
<a id={'nav_previous'} href={props.previous} target={'_self'} style={
5050
{
51-
color: '#fff',
51+
color: '#064785',
5252
fontSize: '16px',
5353
display: 'none',
5454
padding: '0 0 0 10px',

0 commit comments

Comments
 (0)