An easy-to-use platform for EEG experimentation in the classroom
prettier formatting
+50
-74
+20
-20
app/components/CollectComponent/HelpSidebar.js
+20
-20
app/components/CollectComponent/HelpSidebar.js
···
1
1
/* eslint-disable react/no-multi-comp */
2
-
import React, { Component } from "react";
3
-
import { Segment, Header, Menu, Icon, Button, Grid } from "semantic-ui-react";
4
-
import styles from "../styles/common.css";
2
+
import React, { Component } from 'react';
3
+
import { Segment, Header, Menu, Icon, Button, Grid } from 'semantic-ui-react';
4
+
import styles from '../styles/common.css';
5
5
6
6
const HELP_STEP = {
7
7
MENU: 0,
···
113
113
switch (this.state.helpStep) {
114
114
case HELP_STEP.SIGNAL_EXPLANATION:
115
115
return this.renderHelp(
116
-
"Improve the signal quality",
117
-
"In order to collect quality data, you want to make sure that all electrodes have a strong connection"
116
+
'Improve the signal quality',
117
+
'In order to collect quality data, you want to make sure that all electrodes have a strong connection'
118
118
);
119
119
case HELP_STEP.SIGNAL_SALINE:
120
120
return this.renderHelp(
121
-
"Tip #1: Saturate the sensors in saline",
122
-
"Make sure the sensors are thoroughly soaked with saline solution. They should be wet to the touch"
121
+
'Tip #1: Saturate the sensors in saline',
122
+
'Make sure the sensors are thoroughly soaked with saline solution. They should be wet to the touch'
123
123
);
124
124
case HELP_STEP.SIGNAL_CONTACT:
125
125
return this.renderHelp(
126
-
"Tip #2: Ensure the sensors are making firm contact",
127
-
"Re-seat the headset to make sure that all sensors contact the head with some tension. Take extra care to make sure the reference electrodes (the ones right behind the ears) make proper contact. You may need to sweep hair out of the way to accomplish this"
126
+
'Tip #2: Ensure the sensors are making firm contact',
127
+
'Re-seat the headset to make sure that all sensors contact the head with some tension. Take extra care to make sure the reference electrodes (the ones right behind the ears) make proper contact. You may need to sweep hair out of the way to accomplish this'
128
128
);
129
129
case HELP_STEP.SIGNAL_MOVEMENT:
130
130
return this.renderHelp(
131
-
"Tip #3: Stay still",
132
-
"To reduce noise during your experiment, ensure your subject is relaxed and has both feet on the floor. Sometimes, focusing on relaxing the jaw and the tongue can improve the EEG signal"
131
+
'Tip #3: Stay still',
132
+
'To reduce noise during your experiment, ensure your subject is relaxed and has both feet on the floor. Sometimes, focusing on relaxing the jaw and the tongue can improve the EEG signal'
133
133
);
134
134
case HELP_STEP.LEARN_BRAIN:
135
135
return this.renderHelp(
136
-
"Your brain produces electricity",
137
-
"Using the device that you are wearing, we can detect the electrical activity of your brain."
136
+
'Your brain produces electricity',
137
+
'Using the device that you are wearing, we can detect the electrical activity of your brain.'
138
138
);
139
139
case HELP_STEP.LEARN_BLINK:
140
140
return this.renderHelp(
141
-
"Try blinking your eyes",
142
-
"Does the signal change? Eye movements create noise in the EEG signal"
141
+
'Try blinking your eyes',
142
+
'Does the signal change? Eye movements create noise in the EEG signal'
143
143
);
144
144
case HELP_STEP.LEARN_THOUGHTS:
145
145
return this.renderHelp(
146
-
"Try thinking of a cat",
146
+
'Try thinking of a cat',
147
147
"Does the signal change? Although EEG can measure overall brain activity, it's not capable of reading minds"
148
148
);
149
149
case HELP_STEP.LEARN_ALPHA:
150
150
return this.renderHelp(
151
-
"Try closing your eyes for 10 seconds",
152
-
"You may notice a change in your signal due to an increase in alpha waves"
151
+
'Try closing your eyes for 10 seconds',
152
+
'You may notice a change in your signal due to an increase in alpha waves'
153
153
);
154
154
case HELP_STEP.MENU:
155
155
default:
···
179
179
return (
180
180
<Button
181
181
circular
182
-
icon="question"
182
+
icon='question'
183
183
className={styles.helpButton}
184
-
floated="right"
184
+
floated='right'
185
185
onClick={this.props.onClick}
186
186
/>
187
187
);
+16
-25
app/components/DesignComponent/StimuliRow.js
+16
-25
app/components/DesignComponent/StimuliRow.js
···
1
1
/* Breaking this component on its own is done mainly to increase performance. Text input is slow otherwise */
2
2
3
-
import React, { Component } from "react";
3
+
import React, { Component } from 'react';
4
4
import {
5
5
Grid,
6
6
Segment,
···
10
10
Icon,
11
11
Button,
12
12
Table,
13
-
Dropdown
14
-
} from "semantic-ui-react";
15
-
import { toast } from "react-toastify";
16
-
import styles from "../styles/common.css";
13
+
Dropdown,
14
+
} from 'semantic-ui-react';
15
+
import { toast } from 'react-toastify';
16
+
import styles from '../styles/common.css';
17
17
18
18
interface Props {
19
19
num: number;
···
26
26
const RESPONSE_OPTIONS = new Array(10).fill(0).map((_, i) => ({
27
27
key: i.toString(),
28
28
text: i.toString(),
29
-
value: i.toString()
29
+
value: i.toString(),
30
30
}));
31
31
32
32
export default class StimuliRow extends Component<Props> {
···
38
38
return (
39
39
<Table.Row className={styles.trialsRow}>
40
40
<Table.Cell className={styles.conditionsNameRow}>
41
-
<div style={{ alignSelf: "center" }}>{this.props.num + 1}.</div>
41
+
<div style={{ alignSelf: 'center' }}>{this.props.num + 1}.</div>
42
42
<div>{this.props.name}</div>
43
43
</Table.Cell>
44
44
···
51
51
fluid
52
52
selection
53
53
value={this.props.response}
54
-
onChange={(event, data) =>
55
-
this.props.onChange(this.props.num, "response", data.value)
56
-
}
57
-
placeholder="Response"
54
+
onChange={(event, data) => this.props.onChange(this.props.num, 'response', data.value)}
55
+
placeholder='Response'
58
56
options={RESPONSE_OPTIONS}
59
57
/>
60
58
</Table.Cell>
···
64
62
<div
65
63
className={styles.trialsTrialTypeRowSelector}
66
64
style={{
67
-
backgroundColor:
68
-
this.props.phase === "main" ? "#1AC4EF" : "#EB1B66"
65
+
backgroundColor: this.props.phase === 'main' ? '#1AC4EF' : '#EB1B66',
69
66
}}
70
67
>
71
-
{this.props.phase === "main" ? "Experimental" : "Practice"}
68
+
{this.props.phase === 'main' ? 'Experimental' : 'Practice'}
72
69
</div>
73
70
<Dropdown
74
71
fluid
75
72
style={{
76
-
display: "grid",
77
-
color: "#C4C4C4",
78
-
justifyContent: "end"
73
+
display: 'grid',
74
+
color: '#C4C4C4',
75
+
justifyContent: 'end',
79
76
}}
80
77
>
81
78
<Dropdown.Menu>
82
-
<Dropdown.Item
83
-
onClick={() =>
84
-
this.props.onChange(this.props.num, "phase", "main")
85
-
}
86
-
>
79
+
<Dropdown.Item onClick={() => this.props.onChange(this.props.num, 'phase', 'main')}>
87
80
<div>Experimental</div>
88
81
</Dropdown.Item>
89
82
<Dropdown.Item
90
-
onClick={() =>
91
-
this.props.onChange(this.props.num, "phase", "practice")
92
-
}
83
+
onClick={() => this.props.onChange(this.props.num, 'phase', 'practice')}
93
84
>
94
85
<div>Practice</div>
95
86
</Dropdown.Item>
+14
-29
app/components/EEGExplorationComponent.js
+14
-29
app/components/EEGExplorationComponent.js
···
1
1
// @flow
2
-
import React, { Component } from "react";
3
-
import {
4
-
Grid,
5
-
Button,
6
-
Header,
7
-
Segment,
8
-
Image,
9
-
Divider
10
-
} from "semantic-ui-react";
11
-
import {
12
-
PLOTTING_INTERVAL,
13
-
CONNECTION_STATUS,
14
-
DEVICE_AVAILABILITY
15
-
} from "../constants/constants";
16
-
import eegImage from "../assets/common/EEG.png";
17
-
import SignalQualityIndicatorComponent from "./SignalQualityIndicatorComponent";
18
-
import ViewerComponent from "./ViewerComponent";
19
-
import ConnectModal from "./CollectComponent/ConnectModal";
20
-
import styles from "./styles/common.css";
2
+
import React, { Component } from 'react';
3
+
import { Grid, Button, Header, Segment, Image, Divider } from 'semantic-ui-react';
4
+
import { PLOTTING_INTERVAL, CONNECTION_STATUS, DEVICE_AVAILABILITY } from '../constants/constants';
5
+
import eegImage from '../assets/common/EEG.png';
6
+
import SignalQualityIndicatorComponent from './SignalQualityIndicatorComponent';
7
+
import ViewerComponent from './ViewerComponent';
8
+
import ConnectModal from './CollectComponent/ConnectModal';
9
+
import styles from './styles/common.css';
21
10
22
11
interface Props {
23
12
history: Object;
···
43
32
constructor(props: Props) {
44
33
super(props);
45
34
this.state = {
46
-
isConnectModalOpen: false
35
+
isConnectModalOpen: false,
47
36
};
48
37
this.handleConnectModalClose = this.handleConnectModalClose.bind(this);
49
38
this.handleStartConnect = this.handleStartConnect.bind(this);
···
61
50
62
51
handleStartConnect() {
63
52
this.setState({ isConnectModalOpen: true });
64
-
this.props.deviceActions.setDeviceAvailability(
65
-
DEVICE_AVAILABILITY.SEARCHING
66
-
);
53
+
this.props.deviceActions.setDeviceAvailability(DEVICE_AVAILABILITY.SEARCHING);
67
54
}
68
55
69
56
handleStopConnect() {
···
83
70
relaxed
84
71
padded
85
72
className={styles.contentGrid}
86
-
style={{ alignItems: "center" }}
73
+
style={{ alignItems: 'center' }}
87
74
>
88
75
{this.props.connectionStatus === CONNECTION_STATUS.CONNECTED && (
89
76
<Grid.Row>
···
117
104
118
105
<Grid.Column stretched width={11}>
119
106
<Segment basic>
120
-
<Header as="h1">Explore Raw EEG</Header>
107
+
<Header as='h1'>Explore Raw EEG</Header>
121
108
<Divider />
122
-
<p>
123
-
Connect directly to an EEG device and view raw streaming data
124
-
</p>
109
+
<p>Connect directly to an EEG device and view raw streaming data</p>
125
110
<Button primary onClick={this.handleStartConnect}>
126
111
Connect
127
112
</Button>
···
138
123
connectionStatus={this.props.connectionStatus}
139
124
deviceActions={this.props.deviceActions}
140
125
availableDevices={this.props.availableDevices}
141
-
style={{ marginTop: "100px" }}
126
+
style={{ marginTop: '100px' }}
142
127
/>
143
128
</Grid.Row>
144
129
)}