-580

app/components/AnalyzeComponent.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { 4 4 - Grid, 5 5 - Icon, 6 6 - Segment, 7 7 - Header, 8 8 - Dropdown, 9 9 - Divider, 10 10 - Button, 11 11 - Checkbox, 12 12 - Sidebar, 13 13 - } from 'semantic-ui-react'; 14 14 - import { isNil } from 'lodash'; 15 15 - import Plot from 'react-plotly.js'; 16 16 - import styles from './styles/common.css'; 17 17 - import { 18 18 - DEVICES, 19 19 - MUSE_CHANNELS, 20 20 - EMOTIV_CHANNELS, 21 21 - KERNEL_STATUS, 22 22 - EXPERIMENTS, 23 23 - } from '../constants/constants'; 24 24 - import { 25 25 - readWorkspaceCleanedEEGData, 26 26 - getSubjectNamesFromFiles, 27 27 - readWorkspaceBehaviorData, 28 28 - readBehaviorData, 29 29 - storeAggregatedBehaviorData, 30 30 - } from '../utils/filesystem/storage'; 31 31 - import { aggregateDataForPlot, aggregateBehaviorDataToSave } from '../utils/behavior/compute'; 32 32 - import SecondaryNavComponent from './SecondaryNavComponent'; 33 33 - import ClickableHeadDiagramSVG from './svgs/ClickableHeadDiagramSVG'; 34 34 - import JupyterPlotWidget from './JupyterPlotWidget'; 35 35 - import { HelpButton } from './CollectComponent/HelpSidebar'; 36 36 - 37 37 - const ANALYZE_STEPS = { 38 38 - OVERVIEW: 'OVERVIEW', 39 39 - ERP: 'ERP', 40 40 - BEHAVIOR: 'BEHAVIOR', 41 41 - }; 42 42 - 43 43 - const ANALYZE_STEPS_BEHAVIOR = { 44 44 - BEHAVIOR: 'BEHAVIOR', 45 45 - }; 46 46 - 47 47 - interface Props { 48 48 - title: string; 49 49 - type: ?EXPERIMENTS; 50 50 - deviceType: DEVICES; 51 51 - isEEGEnabled: boolean; 52 52 - kernel: ?Kernel; 53 53 - kernelStatus: KERNEL_STATUS; 54 54 - mainChannel: ?any; 55 55 - epochsInfo: ?Array<{ [string]: number | string }>; 56 56 - channelInfo: ?Array<string>; 57 57 - psdPlot: ?{ [string]: string }; 58 58 - topoPlot: ?{ [string]: string }; 59 59 - erpPlot: ?{ [string]: string }; 60 60 - jupyterActions: Object; 61 61 - } 62 62 - 63 63 - interface State { 64 64 - activeStep: string; 65 65 - selectedChannel: string; 66 66 - eegFilePaths: Array<?{ 67 67 - key: string, 68 68 - text: string, 69 69 - value: { name: string, dir: string }, 70 70 - }>; 71 71 - behaviorFilePaths: Array<?{ 72 72 - key: string, 73 73 - text: string, 74 74 - value: string, 75 75 - }>; 76 76 - selectedFilePaths: Array<?string>; 77 77 - selectedBehaviorFilePaths: Array<?string>; 78 78 - selectedSubjects: Array<?string>; 79 79 - selectedDependentVariable: string; 80 80 - removeOutliers: boolean; 81 81 - showDataPoints: boolean; 82 82 - isSidebarVisible: boolean; 83 83 - displayOutlierVisible: boolean; 84 84 - displayMode: string; 85 85 - helpMode: string; 86 86 - dependentVariables: Array<?{ 87 87 - key: string, 88 88 - text: string, 89 89 - value: string, 90 90 - }>; 91 91 - } 92 92 - // TODO: Add a channel callback from reading epochs so this screen can be aware of which channels are 93 93 - // available in dataset 94 94 - export default class Analyze extends Component<Props, State> { 95 95 - // props: Props; 96 96 - // state: State; 97 97 - // handleChannelSelect: (string) => void; 98 98 - // handleStepClick: (Object, Object) => void; 99 99 - // handleDatasetChange: (Object, Object) => void; 100 100 - // handleBehaviorDatasetChange: (Object, Object) => void; 101 101 - // handleDependentVariableChange: (Object, Object) => void; 102 102 - // handleRemoveOutliers: (Object, Object) => void; 103 103 - // handleDisplayModeChange: (string) => void; 104 104 - // handleDataPoints: (Object, Object) => void; 105 105 - // saveSelectedDatasets: () => void; 106 106 - // handleStepClick: (Object, Object) => void; 107 107 - // toggleDisplayInfoVisibility: () => void; 108 108 - 109 109 - constructor(props: Props) { 110 110 - super(props); 111 111 - this.state = { 112 112 - activeStep: 113 113 - this.props.isEEGEnabled === true ? ANALYZE_STEPS.OVERVIEW : ANALYZE_STEPS.BEHAVIOR, 114 114 - eegFilePaths: [{ key: '', text: '', value: '' }], 115 115 - behaviorFilePaths: [{ key: '', text: '', value: '' }], 116 116 - dependentVariables: [{ key: '', text: '', value: '' }], 117 117 - dataToPlot: [], 118 118 - layout: {}, 119 119 - selectedDependentVariable: '', 120 120 - removeOutliers: true, 121 121 - showDataPoints: false, 122 122 - isSidebarVisible: false, 123 123 - // displayOutlierVisible: false, 124 124 - displayMode: 'errorbars', 125 125 - helpMode: 'errorbars', 126 126 - selectedFilePaths: [], 127 127 - selectedBehaviorFilePaths: [], 128 128 - selectedSubjects: [], 129 129 - selectedChannel: props.deviceType === DEVICES.EMOTIV ? EMOTIV_CHANNELS[0] : MUSE_CHANNELS[0], 130 130 - }; 131 131 - this.handleChannelSelect = this.handleChannelSelect.bind(this); 132 132 - this.handleDatasetChange = this.handleDatasetChange.bind(this); 133 133 - this.handleBehaviorDatasetChange = this.handleBehaviorDatasetChange.bind(this); 134 134 - this.handleDependentVariableChange = this.handleDependentVariableChange.bind(this); 135 135 - this.handleRemoveOutliers = this.handleRemoveOutliers.bind(this); 136 136 - this.handleDisplayModeChange = this.handleDisplayModeChange.bind(this); 137 137 - this.handleDataPoints = this.handleDataPoints.bind(this); 138 138 - this.saveSelectedDatasets = this.saveSelectedDatasets.bind(this); 139 139 - this.handleStepClick = this.handleStepClick.bind(this); 140 140 - this.handleDropdownClick = this.handleDropdownClick.bind(this); 141 141 - this.toggleDisplayInfoVisibility = this.toggleDisplayInfoVisibility.bind(this); 142 142 - } 143 143 - 144 144 - async componentDidMount() { 145 145 - const workspaceCleanData = await readWorkspaceCleanedEEGData(this.props.title); 146 146 - if (this.props.kernelStatus === KERNEL_STATUS.OFFLINE) { 147 147 - this.props.jupyterActions.launchKernel(); 148 148 - } 149 149 - const behavioralData = await readWorkspaceBehaviorData(this.props.title); 150 150 - this.setState({ 151 151 - eegFilePaths: workspaceCleanData.map((filepath) => ({ 152 152 - key: filepath.name, 153 153 - text: filepath.name, 154 154 - value: filepath.path, 155 155 - })), 156 156 - behaviorFilePaths: behavioralData.map((filepath) => ({ 157 157 - key: filepath.name, 158 158 - text: filepath.name, 159 159 - value: filepath.path, 160 160 - })), 161 161 - dependentVariables: ['Response Time', 'Accuracy'].map((dv) => ({ 162 162 - key: dv, 163 163 - text: dv, 164 164 - value: dv, 165 165 - })), 166 166 - selectedDependentVariable: 'Response Time', 167 167 - }); 168 168 - } 169 169 - 170 170 - handleStepClick(step: string) { 171 171 - this.setState({ activeStep: step }); 172 172 - } 173 173 - 174 174 - handleDatasetChange(event: Object, data: Object) { 175 175 - this.setState({ 176 176 - selectedFilePaths: data.value, 177 177 - selectedSubjects: getSubjectNamesFromFiles(data.value), 178 178 - }); 179 179 - this.props.jupyterActions.loadCleanedEpochs(data.value); 180 180 - } 181 181 - 182 182 - handleBehaviorDatasetChange(event: Object, data: Object) { 183 183 - const { dataToPlot, layout } = aggregateDataForPlot( 184 184 - readBehaviorData(data.value), 185 185 - this.state.selectedDependentVariable, 186 186 - this.state.removeOutliers, 187 187 - this.state.showDataPoints, 188 188 - this.state.displayMode 189 189 - ); 190 190 - this.setState({ 191 191 - selectedBehaviorFilePaths: data.value, 192 192 - selectedSubjects: getSubjectNamesFromFiles(data.value), 193 193 - dataToPlot, 194 194 - layout, 195 195 - }); 196 196 - } 197 197 - 198 198 - async handleDropdownClick() { 199 199 - const behavioralData = await readWorkspaceBehaviorData(this.props.title); 200 200 - if (behavioralData.length != this.state.behaviorFilePaths.length) { 201 201 - this.setState({ 202 202 - behaviorFilePaths: behavioralData.map((filepath) => ({ 203 203 - key: filepath.name, 204 204 - text: filepath.name, 205 205 - value: filepath.path, 206 206 - })), 207 207 - }); 208 208 - } 209 209 - } 210 210 - 211 211 - handleDependentVariableChange(event: Object, data: Object) { 212 212 - const { dataToPlot, layout } = aggregateDataForPlot( 213 213 - readBehaviorData(this.state.selectedBehaviorFilePaths), 214 214 - data.value, 215 215 - this.state.removeOutliers, 216 216 - this.state.showDataPoints, 217 217 - this.state.displayMode 218 218 - ); 219 219 - this.setState({ 220 220 - selectedDependentVariable: data.value, 221 221 - dataToPlot, 222 222 - layout, 223 223 - }); 224 224 - } 225 225 - 226 226 - handleRemoveOutliers(event: Object, data: Object) { 227 227 - const { dataToPlot, layout } = aggregateDataForPlot( 228 228 - readBehaviorData(this.state.selectedBehaviorFilePaths), 229 229 - this.state.selectedDependentVariable, 230 230 - !this.state.removeOutliers, 231 231 - this.state.showDataPoints, 232 232 - this.state.displayMode 233 233 - ); 234 234 - this.setState({ 235 235 - removeOutliers: !this.state.removeOutliers, 236 236 - dataToPlot, 237 237 - layout, 238 238 - helpMode: 'outliers', 239 239 - }); 240 240 - } 241 241 - 242 242 - handleDataPoints(event: Object, data: Object) { 243 243 - const { dataToPlot, layout } = aggregateDataForPlot( 244 244 - readBehaviorData(this.state.selectedBehaviorFilePaths), 245 245 - this.state.selectedDependentVariable, 246 246 - this.state.removeOutliers, 247 247 - !this.state.showDataPoints, 248 248 - this.state.displayMode 249 249 - ); 250 250 - this.setState({ 251 251 - showDataPoints: !this.state.showDataPoints, 252 252 - dataToPlot, 253 253 - layout, 254 254 - }); 255 255 - } 256 256 - 257 257 - handleDisplayModeChange(displayMode) { 258 258 - if (this.state.selectedBehaviorFilePaths && this.state.selectedBehaviorFilePaths.length > 0) { 259 259 - const { dataToPlot, layout } = aggregateDataForPlot( 260 260 - readBehaviorData(this.state.selectedBehaviorFilePaths), 261 261 - this.state.selectedDependentVariable, 262 262 - this.state.removeOutliers, 263 263 - this.state.showDataPoints, 264 264 - displayMode 265 265 - ); 266 266 - this.setState({ 267 267 - dataToPlot, 268 268 - layout, 269 269 - displayMode, 270 270 - helpMode: displayMode, 271 271 - }); 272 272 - } 273 273 - } 274 274 - 275 275 - toggleDisplayInfoVisibility() { 276 276 - this.setState({ 277 277 - isSidebarVisible: !this.state.isSidebarVisible, 278 278 - }); 279 279 - } 280 280 - 281 281 - saveSelectedDatasets() { 282 282 - const data = readBehaviorData(this.state.selectedBehaviorFilePaths); 283 283 - const aggregatedData = aggregateBehaviorDataToSave(data, this.state.removeOutliers); 284 284 - storeAggregatedBehaviorData(aggregatedData, this.props.title); 285 285 - } 286 286 - 287 287 - handleChannelSelect(channelName: string) { 288 288 - this.setState({ selectedChannel: channelName }); 289 289 - this.props.jupyterActions.loadERP(channelName); 290 290 - } 291 291 - 292 292 - concatSubjectNames = (subjects: Array<?string>) => { 293 293 - if (subjects.length < 1) { 294 294 - return ''; 295 295 - } 296 296 - return subjects.reduce((acc, curr) => `${acc}-${curr}`); 297 297 - }; 298 298 - 299 299 - renderEpochLabels() { 300 300 - if (!isNil(this.props.epochsInfo) && this.state.selectedFilePaths.length >= 1) { 301 301 - const numberConditions = this.props.epochsInfo.filter( 302 302 - (infoObj) => infoObj.name !== 'Drop Percentage' && infoObj.name !== 'Total Epochs' 303 303 - ).length; 304 304 - let colors; 305 305 - if (numberConditions === 4) { 306 306 - colors = ['red', 'yellow', 'green', 'blue']; 307 307 - } else { 308 308 - colors = ['red', 'green', 'teal', 'orange']; 309 309 - } 310 310 - return ( 311 311 - <div> 312 312 - {this.props.epochsInfo 313 313 - .filter( 314 314 - (infoObj) => infoObj.name !== 'Drop Percentage' && infoObj.name !== 'Total Epochs' 315 315 - ) 316 316 - .map((infoObj, index) => ( 317 317 - <> 318 318 - <Header as='h4'>{infoObj.name}</Header> 319 319 - <Icon name='circle' color={colors[index]} /> 320 320 - {infoObj.value} 321 321 - </> 322 322 - ))} 323 323 - </div> 324 324 - ); 325 325 - } 326 326 - return <div />; 327 327 - } 328 328 - 329 329 - renderHelpContent() { 330 330 - switch (this.state.helpMode) { 331 331 - case 'datapoints': 332 332 - return this.renderHelp( 333 333 - 'Data Points', 334 334 - `In this graph, each dot refers to one data point, clustered by group (e.g., conditions). 335 335 - It’s the most “neutral” way of presenting the data, of course, but it may be difficult to see any patterns. 336 336 - Why is it always a good idea to look at all your datapoints before interpreting any trends in the data?` 337 337 - ); 338 338 - case 'errorbars': 339 339 - return this.renderHelp( 340 340 - 'Bar Graph', 341 341 - `Bar graphs are the most common way to summarize data. 342 342 - It allows you to compare mean values between groups of datapoints (e.g., conditions), 343 343 - and the error bars give some indication of the variance (here: the standard error of the mean). 344 344 - Importantly, this way of summarizing data assumes that the mean is in fact representative of the data. 345 345 - Many researchers have veered away from bar graphs because they can be deceptive, especially without error bars. 346 346 - Can you think of any such cases?` 347 347 - ); 348 348 - case 'whiskers': 349 349 - return this.renderHelp( 350 350 - 'Box Plot', 351 351 - `Box plots summarize the data in a more informative way: 352 352 - they actually tell you something about the distribution of datapoints within a group, 353 353 - by taking the median as its reference point instead of the mean 354 354 - (the median is the “middle” point in a dataset after sorting it from the lowest to the highest value). 355 355 - The boxes represent so-called “quartiles” which are cut off at the value right between the median and the smallest value or highest value in the dataset. 356 356 - The lines (“whiskers”) show how much variability there is in the data outside of those quartiles; 357 357 - any outliers are shown as individual points. Can you go through each plot and describe exactly what you see? 358 358 - When you toggle between this view and the bar graph view, do the data look very different?` 359 359 - ); 360 360 - case 'outliers': 361 361 - default: 362 362 - return this.renderHelp( 363 363 - 'Outliers', 364 364 - `A datapoint is tagged as an “outlier” if its value exceeds 2 standard deviations below or above the mean of all data in the group. 365 365 - If a datapoint is unusually high or low (it “deviates”) compared to the rest of the group, 366 366 - it is likely a special case that doesn’t tell us anything informative about the group as a whole. 367 367 - Removing such outliers can help unskew the data. What might outliers mean in your dataset? 368 368 - Can you think of any other cases where identifying outliers can be helpful?` 369 369 - ); 370 370 - } 371 371 - } 372 372 - 373 373 - renderHelp(header: string, content: string) { 374 374 - return ( 375 375 - <> 376 376 - <Segment basic className={styles.helpContent}> 377 377 - <Button 378 378 - circular 379 379 - size='large' 380 380 - floated='right' 381 381 - icon='x' 382 382 - className={styles.closeButton} 383 383 - onClick={this.toggleDisplayInfoVisibility} 384 384 - /> 385 385 - <Header className={styles.helpHeader} as='h1'> 386 386 - {header} 387 387 - </Header> 388 388 - {content} 389 389 - </Segment> 390 390 - </> 391 391 - ); 392 392 - } 393 393 - 394 394 - renderSectionContent() { 395 395 - switch (this.state.activeStep) { 396 396 - case ANALYZE_STEPS.OVERVIEW: 397 397 - default: 398 398 - return ( 399 399 - <> 400 400 - <Grid.Column width={4}> 401 401 - <Segment basic textAlign='left' className={styles.infoSegment}> 402 402 - <Header as='h1'>Overview</Header> 403 403 - <p> 404 404 - Load cleaned datasets from different subjects and view how the EEG differs between 405 405 - electrodes 406 406 - </p> 407 407 - <Header as='h4'>Select Clean Datasets</Header> 408 408 - <Dropdown 409 409 - fluid 410 410 - multiple 411 411 - selection 412 412 - closeOnChange 413 413 - value={this.state.selectedFilePaths} 414 414 - options={this.state.eegFilePaths} 415 415 - onChange={this.handleDatasetChange} 416 416 - /> 417 417 - {this.renderEpochLabels()} 418 418 - </Segment> 419 419 - </Grid.Column> 420 420 - <Grid.Column width={8}> 421 421 - <JupyterPlotWidget 422 422 - title={this.props.title} 423 423 - imageTitle={`${this.concatSubjectNames(this.state.selectedSubjects)}-Topoplot`} 424 424 - plotMIMEBundle={this.props.topoPlot} 425 425 - /> 426 426 - </Grid.Column> 427 427 - </> 428 428 - ); 429 429 - case ANALYZE_STEPS.ERP: 430 430 - return ( 431 431 - <> 432 432 - <Grid.Column width={4} className={styles.analyzeColumn}> 433 433 - <Segment basic textAlign='left' className={styles.infoSegment}> 434 434 - <Header as='h1'>ERP</Header> 435 435 - <p> 436 436 - The event-related potential represents EEG activity elicited by a particular 437 437 - sensory event 438 438 - </p> 439 439 - <ClickableHeadDiagramSVG 440 440 - channelinfo={this.props.channelInfo} 441 441 - onChannelClick={this.handleChannelSelect} 442 442 - /> 443 443 - <Divider hidden /> 444 444 - {this.renderEpochLabels()} 445 445 - </Segment> 446 446 - </Grid.Column> 447 447 - <Grid.Column width={8}> 448 448 - <JupyterPlotWidget 449 449 - title={this.props.title} 450 450 - imageTitle={`${this.concatSubjectNames(this.state.selectedSubjects)}-${ 451 451 - this.state.selectedChannel 452 452 - }-ERP`} 453 453 - plotMIMEBundle={this.props.erpPlot} 454 454 - /> 455 455 - </Grid.Column> 456 456 - </> 457 457 - ); 458 458 - case ANALYZE_STEPS.BEHAVIOR: 459 459 - return ( 460 460 - <> 461 461 - <Grid.Column width={4}> 462 462 - <Segment basic textAlign='left' className={styles.infoSegment}> 463 463 - <Header as='h1'>Overview</Header> 464 464 - <p>Load datasets from different subjects and view behavioral results</p> 465 465 - 466 466 - <div> 467 467 - <span className='ui header'>Datasets</span> 468 468 - <Button className='export' onClick={this.saveSelectedDatasets}> 469 469 - <Icon name='download' /> 470 470 - Export 471 471 - </Button> 472 472 - </div> 473 473 - <p /> 474 474 - 475 475 - <Dropdown 476 476 - fluid 477 477 - multiple 478 478 - selection 479 479 - search 480 480 - closeOnChange 481 481 - value={this.state.selectedBehaviorFilePaths} 482 482 - options={this.state.behaviorFilePaths} 483 483 - onChange={this.handleBehaviorDatasetChange} 484 484 - onClick={this.handleDropdownClick} 485 485 - /> 486 486 - <p /> 487 487 - <Divider hidden /> 488 488 - <span className='ui header'>Dependent Variable</span> 489 489 - <p /> 490 490 - <Dropdown 491 491 - fluid 492 492 - selection 493 493 - closeOnChange 494 494 - value={this.state.selectedDependentVariable} 495 495 - options={this.state.dependentVariables} 496 496 - onChange={this.handleDependentVariableChange} 497 497 - /> 498 498 - </Segment> 499 499 - </Grid.Column> 500 500 - <Grid.Column 501 501 - width={12} 502 502 - style={{ 503 503 - overflow: 'auto', 504 504 - maxHeight: 650, 505 505 - display: 'grid', 506 506 - justifyContent: 'center', 507 507 - }} 508 508 - > 509 509 - <Segment basic textAlign='left' className={styles.plotSegment}> 510 510 - <Plot data={this.state.dataToPlot} layout={this.state.layout} /> 511 511 - <p /> 512 512 - <Checkbox 513 513 - checked={this.state.removeOutliers} 514 514 - label='Remove Response Time Outliers' 515 515 - onChange={this.handleRemoveOutliers} 516 516 - /> 517 517 - 518 518 - <p /> 519 519 - <Button.Group> 520 520 - <Button 521 521 - className='tertiary' 522 522 - toggle 523 523 - active={this.state.displayMode === 'datapoints'} 524 524 - onClick={() => this.handleDisplayModeChange('datapoints')} 525 525 - > 526 526 - Data Points 527 527 - </Button> 528 528 - <Button 529 529 - className='tertiary' 530 530 - toggle 531 531 - active={this.state.displayMode === 'errorbars'} 532 532 - onClick={() => this.handleDisplayModeChange('errorbars')} 533 533 - > 534 534 - Bar Graph 535 535 - </Button> 536 536 - <Button 537 537 - className='tertiary' 538 538 - toggle 539 539 - active={this.state.displayMode === 'whiskers'} 540 540 - onClick={() => this.handleDisplayModeChange('whiskers')} 541 541 - > 542 542 - Box Plot 543 543 - </Button> 544 544 - </Button.Group> 545 545 - 546 546 - <HelpButton onClick={this.toggleDisplayInfoVisibility} /> 547 547 - 548 548 - <Sidebar 549 549 - width='wide' 550 550 - direction='right' 551 551 - as={Segment} 552 552 - visible={this.state.isSidebarVisible} 553 553 - > 554 554 - <Segment basic padded vertical className={styles.helpSidebar}> 555 555 - {this.renderHelpContent()} 556 556 - </Segment> 557 557 - </Sidebar> 558 558 - </Segment> 559 559 - </Grid.Column> 560 560 - </> 561 561 - ); 562 562 - } 563 563 - } 564 564 - 565 565 - render() { 566 566 - return ( 567 567 - <div className={styles.mainContainer}> 568 568 - <SecondaryNavComponent 569 569 - title='Analyze' 570 570 - steps={this.props.isEEGEnabled === true ? ANALYZE_STEPS : ANALYZE_STEPS_BEHAVIOR} 571 571 - activeStep={this.state.activeStep} 572 572 - onStepClick={this.handleStepClick} 573 573 - /> 574 574 - <Grid columns='equal' textAlign='center' verticalAlign='top' className={styles.contentGrid}> 575 575 - {this.renderSectionContent()} 576 576 - </Grid> 577 577 - </div> 578 578 - ); 579 579 - } 580 580 - }

+435

app/components/AnalyzeComponent.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Grid, Icon, Segment, Header, Dropdown, Divider, Button, Checkbox, Sidebar } from "semantic-ui-react"; 4 4 + import { isNil } from "lodash"; 5 5 + import Plot from "react-plotly.js"; 6 6 + import styles from "./styles/common.css"; 7 7 + import { DEVICES, MUSE_CHANNELS, EMOTIV_CHANNELS, KERNEL_STATUS, EXPERIMENTS } from "../constants/constants"; 8 8 + import { readWorkspaceCleanedEEGData, getSubjectNamesFromFiles, readWorkspaceBehaviorData, readBehaviorData, storeAggregatedBehaviorData } from "../utils/filesystem/storage"; 9 9 + import { aggregateDataForPlot, aggregateBehaviorDataToSave } from "../utils/behavior/compute"; 10 10 + import SecondaryNavComponent from "./SecondaryNavComponent"; 11 11 + import ClickableHeadDiagramSVG from "./svgs/ClickableHeadDiagramSVG"; 12 12 + import JupyterPlotWidget from "./JupyterPlotWidget"; 13 13 + import { HelpButton } from "./CollectComponent/HelpSidebar"; 14 14 + 15 15 + const ANALYZE_STEPS = { 16 16 + OVERVIEW: 'OVERVIEW', 17 17 + ERP: 'ERP', 18 18 + BEHAVIOR: 'BEHAVIOR' 19 19 + }; 20 20 + 21 21 + const ANALYZE_STEPS_BEHAVIOR = { 22 22 + BEHAVIOR: 'BEHAVIOR' 23 23 + }; 24 24 + 25 25 + interface Props { 26 26 + title: string; 27 27 + type: EXPERIMENTS | null | undefined; 28 28 + deviceType: DEVICES; 29 29 + isEEGEnabled: boolean; 30 30 + kernel: Kernel | null | undefined; 31 31 + kernelStatus: KERNEL_STATUS; 32 32 + mainChannel: any | null | undefined; 33 33 + epochsInfo: Array<{ 34 34 + [key: string]: number | string; 35 35 + }> | null | undefined; 36 36 + channelInfo: Array<string> | null | undefined; 37 37 + psdPlot: { 38 38 + [key: string]: string; 39 39 + } | null | undefined; 40 40 + topoPlot: { 41 41 + [key: string]: string; 42 42 + } | null | undefined; 43 43 + erpPlot: { 44 44 + [key: string]: string; 45 45 + } | null | undefined; 46 46 + jupyterActions: Object; 47 47 + } 48 48 + 49 49 + interface State { 50 50 + activeStep: string; 51 51 + selectedChannel: string; 52 52 + eegFilePaths: Array<{ 53 53 + key: string; 54 54 + text: string; 55 55 + value: {name: string;dir: string;}; 56 56 + } | null | undefined>; 57 57 + behaviorFilePaths: Array<{ 58 58 + key: string; 59 59 + text: string; 60 60 + value: string; 61 61 + } | null | undefined>; 62 62 + selectedFilePaths: Array<string | null | undefined>; 63 63 + selectedBehaviorFilePaths: Array<string | null | undefined>; 64 64 + selectedSubjects: Array<string | null | undefined>; 65 65 + selectedDependentVariable: string; 66 66 + removeOutliers: boolean; 67 67 + showDataPoints: boolean; 68 68 + isSidebarVisible: boolean; 69 69 + displayOutlierVisible: boolean; 70 70 + displayMode: string; 71 71 + helpMode: string; 72 72 + dependentVariables: Array<{ 73 73 + key: string; 74 74 + text: string; 75 75 + value: string; 76 76 + } | null | undefined>; 77 77 + } 78 78 + // TODO: Add a channel callback from reading epochs so this screen can be aware of which channels are 79 79 + // available in dataset 80 80 + export default class Analyze extends Component<Props, State> { 81 81 + // handleDependentVariableChange: (Object, Object) => void; 82 82 + 83 83 + // handleRemoveOutliers: (Object, Object) => void; 84 84 + // handleDisplayModeChange: (string) => void; 85 85 + // handleDataPoints: (Object, Object) => void; 86 86 + // saveSelectedDatasets: () => void; 87 87 + // handleStepClick: (Object, Object) => void; 88 88 + // toggleDisplayInfoVisibility: () => void; 89 89 + constructor(props: Props) { 90 90 + super(props); 91 91 + this.state = { 92 92 + activeStep: this.props.isEEGEnabled === true ? ANALYZE_STEPS.OVERVIEW : ANALYZE_STEPS.BEHAVIOR, 93 93 + eegFilePaths: [{ key: '', text: '', value: '' }], 94 94 + behaviorFilePaths: [{ key: '', text: '', value: '' }], 95 95 + dependentVariables: [{ key: '', text: '', value: '' }], 96 96 + dataToPlot: [], 97 97 + layout: {}, 98 98 + selectedDependentVariable: '', 99 99 + removeOutliers: true, 100 100 + showDataPoints: false, 101 101 + isSidebarVisible: false, 102 102 + // displayOutlierVisible: false, 103 103 + displayMode: 'errorbars', 104 104 + helpMode: 'errorbars', 105 105 + selectedFilePaths: [], 106 106 + selectedBehaviorFilePaths: [], 107 107 + selectedSubjects: [], 108 108 + selectedChannel: props.deviceType === DEVICES.EMOTIV ? EMOTIV_CHANNELS[0] : MUSE_CHANNELS[0] 109 109 + }; 110 110 + this.handleChannelSelect = this.handleChannelSelect.bind(this); 111 111 + this.handleDatasetChange = this.handleDatasetChange.bind(this); 112 112 + this.handleBehaviorDatasetChange = this.handleBehaviorDatasetChange.bind(this); 113 113 + this.handleDependentVariableChange = this.handleDependentVariableChange.bind(this); 114 114 + this.handleRemoveOutliers = this.handleRemoveOutliers.bind(this); 115 115 + this.handleDisplayModeChange = this.handleDisplayModeChange.bind(this); 116 116 + this.handleDataPoints = this.handleDataPoints.bind(this); 117 117 + this.saveSelectedDatasets = this.saveSelectedDatasets.bind(this); 118 118 + this.handleStepClick = this.handleStepClick.bind(this); 119 119 + this.handleDropdownClick = this.handleDropdownClick.bind(this); 120 120 + this.toggleDisplayInfoVisibility = this.toggleDisplayInfoVisibility.bind(this); 121 121 + } 122 122 + 123 123 + async componentDidMount() { 124 124 + const workspaceCleanData = await readWorkspaceCleanedEEGData(this.props.title); 125 125 + if (this.props.kernelStatus === KERNEL_STATUS.OFFLINE) { 126 126 + this.props.jupyterActions.launchKernel(); 127 127 + } 128 128 + const behavioralData = await readWorkspaceBehaviorData(this.props.title); 129 129 + this.setState({ 130 130 + eegFilePaths: workspaceCleanData.map(filepath => ({ 131 131 + key: filepath.name, 132 132 + text: filepath.name, 133 133 + value: filepath.path 134 134 + })), 135 135 + behaviorFilePaths: behavioralData.map(filepath => ({ 136 136 + key: filepath.name, 137 137 + text: filepath.name, 138 138 + value: filepath.path 139 139 + })), 140 140 + dependentVariables: ['Response Time', 'Accuracy'].map(dv => ({ 141 141 + key: dv, 142 142 + text: dv, 143 143 + value: dv 144 144 + })), 145 145 + selectedDependentVariable: 'Response Time' 146 146 + }); 147 147 + } 148 148 + 149 149 + handleStepClick(step: string) { 150 150 + this.setState({ activeStep: step }); 151 151 + } 152 152 + 153 153 + handleDatasetChange(event: Object, data: Object) { 154 154 + this.setState({ 155 155 + selectedFilePaths: data.value, 156 156 + selectedSubjects: getSubjectNamesFromFiles(data.value) 157 157 + }); 158 158 + this.props.jupyterActions.loadCleanedEpochs(data.value); 159 159 + } 160 160 + 161 161 + handleBehaviorDatasetChange(event: Object, data: Object) { 162 162 + const { 163 163 + dataToPlot, 164 164 + layout 165 165 + } = aggregateDataForPlot(readBehaviorData(data.value), this.state.selectedDependentVariable, this.state.removeOutliers, this.state.showDataPoints, this.state.displayMode); 166 166 + this.setState({ 167 167 + selectedBehaviorFilePaths: data.value, 168 168 + selectedSubjects: getSubjectNamesFromFiles(data.value), 169 169 + dataToPlot, 170 170 + layout 171 171 + }); 172 172 + } 173 173 + 174 174 + async handleDropdownClick() { 175 175 + const behavioralData = await readWorkspaceBehaviorData(this.props.title); 176 176 + if (behavioralData.length != this.state.behaviorFilePaths.length) { 177 177 + this.setState({ 178 178 + behaviorFilePaths: behavioralData.map(filepath => ({ 179 179 + key: filepath.name, 180 180 + text: filepath.name, 181 181 + value: filepath.path 182 182 + })) 183 183 + }); 184 184 + } 185 185 + } 186 186 + 187 187 + handleDependentVariableChange(event: Object, data: Object) { 188 188 + const { 189 189 + dataToPlot, 190 190 + layout 191 191 + } = aggregateDataForPlot(readBehaviorData(this.state.selectedBehaviorFilePaths), data.value, this.state.removeOutliers, this.state.showDataPoints, this.state.displayMode); 192 192 + this.setState({ 193 193 + selectedDependentVariable: data.value, 194 194 + dataToPlot, 195 195 + layout 196 196 + }); 197 197 + } 198 198 + 199 199 + handleRemoveOutliers(event: Object, data: Object) { 200 200 + const { 201 201 + dataToPlot, 202 202 + layout 203 203 + } = aggregateDataForPlot(readBehaviorData(this.state.selectedBehaviorFilePaths), this.state.selectedDependentVariable, !this.state.removeOutliers, this.state.showDataPoints, this.state.displayMode); 204 204 + this.setState({ 205 205 + removeOutliers: !this.state.removeOutliers, 206 206 + dataToPlot, 207 207 + layout, 208 208 + helpMode: 'outliers' 209 209 + }); 210 210 + } 211 211 + 212 212 + handleDataPoints(event: Object, data: Object) { 213 213 + const { 214 214 + dataToPlot, 215 215 + layout 216 216 + } = aggregateDataForPlot(readBehaviorData(this.state.selectedBehaviorFilePaths), this.state.selectedDependentVariable, this.state.removeOutliers, !this.state.showDataPoints, this.state.displayMode); 217 217 + this.setState({ 218 218 + showDataPoints: !this.state.showDataPoints, 219 219 + dataToPlot, 220 220 + layout 221 221 + }); 222 222 + } 223 223 + 224 224 + handleDisplayModeChange(displayMode) { 225 225 + if (this.state.selectedBehaviorFilePaths && this.state.selectedBehaviorFilePaths.length > 0) { 226 226 + const { 227 227 + dataToPlot, 228 228 + layout 229 229 + } = aggregateDataForPlot(readBehaviorData(this.state.selectedBehaviorFilePaths), this.state.selectedDependentVariable, this.state.removeOutliers, this.state.showDataPoints, displayMode); 230 230 + this.setState({ 231 231 + dataToPlot, 232 232 + layout, 233 233 + displayMode, 234 234 + helpMode: displayMode 235 235 + }); 236 236 + } 237 237 + } 238 238 + 239 239 + toggleDisplayInfoVisibility() { 240 240 + this.setState({ 241 241 + isSidebarVisible: !this.state.isSidebarVisible 242 242 + }); 243 243 + } 244 244 + 245 245 + saveSelectedDatasets() { 246 246 + const data = readBehaviorData(this.state.selectedBehaviorFilePaths); 247 247 + const aggregatedData = aggregateBehaviorDataToSave(data, this.state.removeOutliers); 248 248 + storeAggregatedBehaviorData(aggregatedData, this.props.title); 249 249 + } 250 250 + 251 251 + handleChannelSelect(channelName: string) { 252 252 + this.setState({ selectedChannel: channelName }); 253 253 + this.props.jupyterActions.loadERP(channelName); 254 254 + } 255 255 + 256 256 + concatSubjectNames = (subjects: Array<string | null | undefined>) => { 257 257 + if (subjects.length < 1) { 258 258 + return ''; 259 259 + } 260 260 + return subjects.reduce((acc, curr) => `${acc}-${curr}`); 261 261 + }; 262 262 + 263 263 + renderEpochLabels() { 264 264 + if (!isNil(this.props.epochsInfo) && this.state.selectedFilePaths.length >= 1) { 265 265 + const numberConditions = this.props.epochsInfo.filter(infoObj => infoObj.name !== 'Drop Percentage' && infoObj.name !== 'Total Epochs').length; 266 266 + let colors; 267 267 + if (numberConditions === 4) { 268 268 + colors = ['red', 'yellow', 'green', 'blue']; 269 269 + } else { 270 270 + colors = ['red', 'green', 'teal', 'orange']; 271 271 + } 272 272 + return <div> 273 273 + {this.props.epochsInfo.filter(infoObj => infoObj.name !== 'Drop Percentage' && infoObj.name !== 'Total Epochs').map((infoObj, index) => <> 274 274 + <Header as='h4'>{infoObj.name}</Header> 275 275 + <Icon name='circle' color={colors[index]} /> 276 276 + {infoObj.value} 277 277 + </>)} 278 278 + </div>; 279 279 + } 280 280 + return <div />; 281 281 + } 282 282 + 283 283 + renderHelpContent() { 284 284 + switch (this.state.helpMode) { 285 285 + case 'datapoints': 286 286 + return this.renderHelp('Data Points', `In this graph, each dot refers to one data point, clustered by group (e.g., conditions). 287 287 + It’s the most “neutral” way of presenting the data, of course, but it may be difficult to see any patterns. 288 288 + Why is it always a good idea to look at all your datapoints before interpreting any trends in the data?`); 289 289 + case 'errorbars': 290 290 + return this.renderHelp('Bar Graph', `Bar graphs are the most common way to summarize data. 291 291 + It allows you to compare mean values between groups of datapoints (e.g., conditions), 292 292 + and the error bars give some indication of the variance (here: the standard error of the mean). 293 293 + Importantly, this way of summarizing data assumes that the mean is in fact representative of the data. 294 294 + Many researchers have veered away from bar graphs because they can be deceptive, especially without error bars. 295 295 + Can you think of any such cases?`); 296 296 + case 'whiskers': 297 297 + return this.renderHelp('Box Plot', `Box plots summarize the data in a more informative way: 298 298 + they actually tell you something about the distribution of datapoints within a group, 299 299 + by taking the median as its reference point instead of the mean 300 300 + (the median is the “middle” point in a dataset after sorting it from the lowest to the highest value). 301 301 + The boxes represent so-called “quartiles” which are cut off at the value right between the median and the smallest value or highest value in the dataset. 302 302 + The lines (“whiskers”) show how much variability there is in the data outside of those quartiles; 303 303 + any outliers are shown as individual points. Can you go through each plot and describe exactly what you see? 304 304 + When you toggle between this view and the bar graph view, do the data look very different?`); 305 305 + case 'outliers':default: 306 306 + return this.renderHelp('Outliers', `A datapoint is tagged as an “outlier” if its value exceeds 2 standard deviations below or above the mean of all data in the group. 307 307 + If a datapoint is unusually high or low (it “deviates”) compared to the rest of the group, 308 308 + it is likely a special case that doesn’t tell us anything informative about the group as a whole. 309 309 + Removing such outliers can help unskew the data. What might outliers mean in your dataset? 310 310 + Can you think of any other cases where identifying outliers can be helpful?`); 311 311 + 312 312 + } 313 313 + } 314 314 + 315 315 + renderHelp(header: string, content: string) { 316 316 + return <> 317 317 + <Segment basic className={styles.helpContent}> 318 318 + <Button circular size='large' floated='right' icon='x' className={styles.closeButton} onClick={this.toggleDisplayInfoVisibility} /> 319 319 + <Header className={styles.helpHeader} as='h1'> 320 320 + {header} 321 321 + </Header> 322 322 + {content} 323 323 + </Segment> 324 324 + </>; 325 325 + } 326 326 + 327 327 + renderSectionContent() { 328 328 + switch (this.state.activeStep) { 329 329 + case ANALYZE_STEPS.OVERVIEW:default: 330 330 + return <> 331 331 + <Grid.Column width={4}> 332 332 + <Segment basic textAlign='left' className={styles.infoSegment}> 333 333 + <Header as='h1'>Overview</Header> 334 334 + <p> 335 335 + Load cleaned datasets from different subjects and view how the EEG differs between 336 336 + electrodes 337 337 + </p> 338 338 + <Header as='h4'>Select Clean Datasets</Header> 339 339 + <Dropdown fluid multiple selection closeOnChange value={this.state.selectedFilePaths} options={this.state.eegFilePaths} onChange={this.handleDatasetChange} /> 340 340 + {this.renderEpochLabels()} 341 341 + </Segment> 342 342 + </Grid.Column> 343 343 + <Grid.Column width={8}> 344 344 + <JupyterPlotWidget title={this.props.title} imageTitle={`${this.concatSubjectNames(this.state.selectedSubjects)}-Topoplot`} plotMIMEBundle={this.props.topoPlot} /> 345 345 + </Grid.Column> 346 346 + </>; 347 347 + case ANALYZE_STEPS.ERP: 348 348 + return <> 349 349 + <Grid.Column width={4} className={styles.analyzeColumn}> 350 350 + <Segment basic textAlign='left' className={styles.infoSegment}> 351 351 + <Header as='h1'>ERP</Header> 352 352 + <p> 353 353 + The event-related potential represents EEG activity elicited by a particular 354 354 + sensory event 355 355 + </p> 356 356 + <ClickableHeadDiagramSVG channelinfo={this.props.channelInfo} onChannelClick={this.handleChannelSelect} /> 357 357 + <Divider hidden /> 358 358 + {this.renderEpochLabels()} 359 359 + </Segment> 360 360 + </Grid.Column> 361 361 + <Grid.Column width={8}> 362 362 + <JupyterPlotWidget title={this.props.title} imageTitle={`${this.concatSubjectNames(this.state.selectedSubjects)}-${this.state.selectedChannel}-ERP`} plotMIMEBundle={this.props.erpPlot} /> 363 363 + </Grid.Column> 364 364 + </>; 365 365 + case ANALYZE_STEPS.BEHAVIOR: 366 366 + return <> 367 367 + <Grid.Column width={4}> 368 368 + <Segment basic textAlign='left' className={styles.infoSegment}> 369 369 + <Header as='h1'>Overview</Header> 370 370 + <p>Load datasets from different subjects and view behavioral results</p> 371 371 + 372 372 + <div> 373 373 + <span className='ui header'>Datasets</span> 374 374 + <Button className='export' onClick={this.saveSelectedDatasets}> 375 375 + <Icon name='download' /> 376 376 + Export 377 377 + </Button> 378 378 + </div> 379 379 + <p /> 380 380 + 381 381 + <Dropdown fluid multiple selection search closeOnChange value={this.state.selectedBehaviorFilePaths} options={this.state.behaviorFilePaths} onChange={this.handleBehaviorDatasetChange} onClick={this.handleDropdownClick} /> 382 382 + <p /> 383 383 + <Divider hidden /> 384 384 + <span className='ui header'>Dependent Variable</span> 385 385 + <p /> 386 386 + <Dropdown fluid selection closeOnChange value={this.state.selectedDependentVariable} options={this.state.dependentVariables} onChange={this.handleDependentVariableChange} /> 387 387 + </Segment> 388 388 + </Grid.Column> 389 389 + <Grid.Column width={12} style={{ 390 390 + overflow: 'auto', 391 391 + maxHeight: 650, 392 392 + display: 'grid', 393 393 + justifyContent: 'center' 394 394 + }}> 395 395 + <Segment basic textAlign='left' className={styles.plotSegment}> 396 396 + <Plot data={this.state.dataToPlot} layout={this.state.layout} /> 397 397 + <p /> 398 398 + <Checkbox checked={this.state.removeOutliers} label='Remove Response Time Outliers' onChange={this.handleRemoveOutliers} /> 399 399 + 400 400 + <p /> 401 401 + <Button.Group> 402 402 + <Button className='tertiary' toggle active={this.state.displayMode === 'datapoints'} onClick={() => this.handleDisplayModeChange('datapoints')}> 403 403 + Data Points 404 404 + </Button> 405 405 + <Button className='tertiary' toggle active={this.state.displayMode === 'errorbars'} onClick={() => this.handleDisplayModeChange('errorbars')}> 406 406 + Bar Graph 407 407 + </Button> 408 408 + <Button className='tertiary' toggle active={this.state.displayMode === 'whiskers'} onClick={() => this.handleDisplayModeChange('whiskers')}> 409 409 + Box Plot 410 410 + </Button> 411 411 + </Button.Group> 412 412 + 413 413 + <HelpButton onClick={this.toggleDisplayInfoVisibility} /> 414 414 + 415 415 + <Sidebar width='wide' direction='right' as={Segment} visible={this.state.isSidebarVisible}> 416 416 + <Segment basic padded vertical className={styles.helpSidebar}> 417 417 + {this.renderHelpContent()} 418 418 + </Segment> 419 419 + </Sidebar> 420 420 + </Segment> 421 421 + </Grid.Column> 422 422 + </>; 423 423 + 424 424 + } 425 425 + } 426 426 + 427 427 + render() { 428 428 + return <div className={styles.mainContainer}> 429 429 + <SecondaryNavComponent title='Analyze' steps={this.props.isEEGEnabled === true ? ANALYZE_STEPS : ANALYZE_STEPS_BEHAVIOR} activeStep={this.state.activeStep} onStepClick={this.handleStepClick} /> 430 430 + <Grid columns='equal' textAlign='center' verticalAlign='top' className={styles.contentGrid}> 431 431 + {this.renderSectionContent()} 432 432 + </Grid> 433 433 + </div>; 434 434 + } 435 435 + }

-173

app/components/CleanComponent/CleanSidebar.js

reviewed

··· 1 1 - import React, { Component } from 'react'; 2 2 - import { Segment, Header, Menu, Icon, Button, Grid } from 'semantic-ui-react'; 3 3 - import styles from '../styles/collect.css'; 4 4 - 5 5 - const HELP_STEP = { 6 6 - MENU: 0, 7 7 - SIGNAL_EXPLANATION: 1, 8 8 - SIGNAL_SALINE: 2, 9 9 - SIGNAL_CONTACT: 3, 10 10 - SIGNAL_MOVEMENT: 4, 11 11 - LEARN_BRAIN: 5, 12 12 - LEARN_BLINK: 6, 13 13 - LEARN_THOUGHTS: 7, 14 14 - LEARN_ALPHA: 8, 15 15 - }; 16 16 - 17 17 - interface Props { 18 18 - handleClose: () => void; 19 19 - } 20 20 - 21 21 - interface State { 22 22 - helpStep: HELP_STEP; 23 23 - } 24 24 - export default class CleanSidebar extends Component<Props, State> { 25 25 - props: Props; 26 26 - constructor(props) { 27 27 - super(props); 28 28 - this.state = { 29 29 - helpStep: HELP_STEP.MENU, 30 30 - }; 31 31 - this.handleStartLearn = this.handleStartLearn.bind(this); 32 32 - this.handleStartSignal = this.handleStartSignal.bind(this); 33 33 - this.handleNext = this.handleNext.bind(this); 34 34 - this.handleBack = this.handleBack.bind(this); 35 35 - } 36 36 - 37 37 - handleStartSignal() { 38 38 - this.setState({ helpStep: HELP_STEP.SIGNAL_EXPLANATION }); 39 39 - } 40 40 - 41 41 - handleStartLearn() { 42 42 - this.setState({ helpStep: HELP_STEP.LEARN_BRAIN }); 43 43 - } 44 44 - 45 45 - handleNext() { 46 46 - if ( 47 47 - this.state.helpStep === HELP_STEP.SIGNAL_MOVEMENT || 48 48 - this.state.helpStep === HELP_STEP.LEARN_ALPHA 49 49 - ) { 50 50 - this.setState({ helpStep: HELP_STEP.MENU }); 51 51 - } else { 52 52 - this.setState({ helpStep: this.state.helpStep + 1 }); 53 53 - } 54 54 - } 55 55 - 56 56 - handleBack() { 57 57 - this.setState({ helpStep: this.state.helpStep - 1 }); 58 58 - } 59 59 - 60 60 - renderMenu() { 61 61 - return ( 62 62 - <> 63 63 - <Menu secondary vertical fluid> 64 64 - <Header className={styles.helpHeader} as='h1'> 65 65 - What would you like to do? 66 66 - </Header> 67 67 - <Menu.Item onClick={this.handleStartSignal}> 68 68 - <Segment basic className={styles.helpMenuItem}> 69 69 - <Icon name='star outline' size='large' /> 70 70 - Improve the signal quality of your sensors 71 71 - </Segment> 72 72 - </Menu.Item> 73 73 - <Menu.Item onClick={this.handleStartLearn}> 74 74 - <Segment basic className={styles.helpMenuItem}> 75 75 - <Icon name='exclamation triangle' size='large' /> 76 76 - Learn about how the subjects movements create noise 77 77 - </Segment> 78 78 - </Menu.Item> 79 79 - </Menu> 80 80 - </> 81 81 - ); 82 82 - } 83 83 - 84 84 - renderHelp(header: string, content: string) { 85 85 - return ( 86 86 - <> 87 87 - <Segment basic className={styles.helpContent}> 88 88 - <Header className={styles.helpHeader} as='h1'> 89 89 - {header} 90 90 - </Header> 91 91 - {content} 92 92 - </Segment> 93 93 - <Grid columns='equal'> 94 94 - <Grid.Column> 95 95 - <Button fluid secondary onClick={this.handleBack}> 96 96 - Back 97 97 - </Button> 98 98 - </Grid.Column> 99 99 - <Grid.Column> 100 100 - <Button fluid primary onClick={this.handleNext}> 101 101 - Next 102 102 - </Button> 103 103 - </Grid.Column> 104 104 - </Grid> 105 105 - </> 106 106 - ); 107 107 - } 108 108 - 109 109 - renderHelpContent() { 110 110 - switch (this.state.helpStep) { 111 111 - case HELP_STEP.SIGNAL_EXPLANATION: 112 112 - return this.renderHelp( 113 113 - 'Improve the signal quality', 114 114 - 'In order to collect quality data, you want to make sure that all electrodes have a strong connection' 115 115 - ); 116 116 - case HELP_STEP.SIGNAL_SALINE: 117 117 - return this.renderHelp( 118 118 - 'Tip #1: Saturate the sensors in saline', 119 119 - 'Make sure the sensors are thoroughly soaked with saline solution. They should be wet to the touch' 120 120 - ); 121 121 - case HELP_STEP.SIGNAL_CONTACT: 122 122 - return this.renderHelp( 123 123 - 'Tip #2: Ensure the sensors are making firm contact', 124 124 - 'Re-seat the headset to make sure that all sensors contact the head with some tension. You may need to sweep hair out of the way to accomplish this' 125 125 - ); 126 126 - case HELP_STEP.SIGNAL_MOVEMENT: 127 127 - return this.renderHelp( 128 128 - 'Tip #3: Stay still', 129 129 - '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' 130 130 - ); 131 131 - case HELP_STEP.LEARN_BRAIN: 132 132 - return this.renderHelp( 133 133 - 'Your brain produces electricity', 134 134 - 'Using the device that you are wearing, we can detect the electrical activity of your brain.' 135 135 - ); 136 136 - case HELP_STEP.LEARN_BLINK: 137 137 - return this.renderHelp( 138 138 - 'Try blinking your eyes', 139 139 - 'Does the signal change? Eye movements create noise in the EEG signal' 140 140 - ); 141 141 - case HELP_STEP.LEARN_THOUGHTS: 142 142 - return this.renderHelp( 143 143 - 'Try thinking of a cat', 144 144 - "Does the signal change? Although EEG can measure overall brain activity, it's not capable of reading minds" 145 145 - ); 146 146 - case HELP_STEP.LEARN_ALPHA: 147 147 - return this.renderHelp( 148 148 - 'Try closing your eyes for 10 seconds', 149 149 - 'You may notice a change in your signal due to an increase in alpha waves' 150 150 - ); 151 151 - case HELP_STEP.MENU: 152 152 - default: 153 153 - return this.renderMenu(); 154 154 - } 155 155 - } 156 156 - 157 157 - render() { 158 158 - return ( 159 159 - <Segment basic padded vertical className={styles.helpSidebar}> 160 160 - <Button 161 161 - basic 162 162 - circular 163 163 - size='large' 164 164 - floated='right' 165 165 - icon='x' 166 166 - className={styles.closeButton} 167 167 - onClick={this.props.handleClose} 168 168 - /> 169 169 - {this.renderHelpContent()} 170 170 - </Segment> 171 171 - ); 172 172 - } 173 173 - }

+133

app/components/CleanComponent/CleanSidebar.tsx

reviewed

··· 1 1 + import React, { Component } from "react"; 2 2 + import { Segment, Header, Menu, Icon, Button, Grid } from "semantic-ui-react"; 3 3 + import styles from "../styles/collect.css"; 4 4 + 5 5 + const HELP_STEP = { 6 6 + MENU: 0, 7 7 + SIGNAL_EXPLANATION: 1, 8 8 + SIGNAL_SALINE: 2, 9 9 + SIGNAL_CONTACT: 3, 10 10 + SIGNAL_MOVEMENT: 4, 11 11 + LEARN_BRAIN: 5, 12 12 + LEARN_BLINK: 6, 13 13 + LEARN_THOUGHTS: 7, 14 14 + LEARN_ALPHA: 8 15 15 + }; 16 16 + 17 17 + interface Props { 18 18 + handleClose: () => void; 19 19 + } 20 20 + 21 21 + interface State { 22 22 + helpStep: HELP_STEP; 23 23 + } 24 24 + export default class CleanSidebar extends Component<Props, State> { 25 25 + 26 26 + props: Props; 27 27 + constructor(props) { 28 28 + super(props); 29 29 + this.state = { 30 30 + helpStep: HELP_STEP.MENU 31 31 + }; 32 32 + this.handleStartLearn = this.handleStartLearn.bind(this); 33 33 + this.handleStartSignal = this.handleStartSignal.bind(this); 34 34 + this.handleNext = this.handleNext.bind(this); 35 35 + this.handleBack = this.handleBack.bind(this); 36 36 + } 37 37 + 38 38 + handleStartSignal() { 39 39 + this.setState({ helpStep: HELP_STEP.SIGNAL_EXPLANATION }); 40 40 + } 41 41 + 42 42 + handleStartLearn() { 43 43 + this.setState({ helpStep: HELP_STEP.LEARN_BRAIN }); 44 44 + } 45 45 + 46 46 + handleNext() { 47 47 + if (this.state.helpStep === HELP_STEP.SIGNAL_MOVEMENT || this.state.helpStep === HELP_STEP.LEARN_ALPHA) { 48 48 + this.setState({ helpStep: HELP_STEP.MENU }); 49 49 + } else { 50 50 + this.setState({ helpStep: this.state.helpStep + 1 }); 51 51 + } 52 52 + } 53 53 + 54 54 + handleBack() { 55 55 + this.setState({ helpStep: this.state.helpStep - 1 }); 56 56 + } 57 57 + 58 58 + renderMenu() { 59 59 + return <> 60 60 + <Menu secondary vertical fluid> 61 61 + <Header className={styles.helpHeader} as='h1'> 62 62 + What would you like to do? 63 63 + </Header> 64 64 + <Menu.Item onClick={this.handleStartSignal}> 65 65 + <Segment basic className={styles.helpMenuItem}> 66 66 + <Icon name='star outline' size='large' /> 67 67 + Improve the signal quality of your sensors 68 68 + </Segment> 69 69 + </Menu.Item> 70 70 + <Menu.Item onClick={this.handleStartLearn}> 71 71 + <Segment basic className={styles.helpMenuItem}> 72 72 + <Icon name='exclamation triangle' size='large' /> 73 73 + Learn about how the subjects movements create noise 74 74 + </Segment> 75 75 + </Menu.Item> 76 76 + </Menu> 77 77 + </>; 78 78 + } 79 79 + 80 80 + renderHelp(header: string, content: string) { 81 81 + return <> 82 82 + <Segment basic className={styles.helpContent}> 83 83 + <Header className={styles.helpHeader} as='h1'> 84 84 + {header} 85 85 + </Header> 86 86 + {content} 87 87 + </Segment> 88 88 + <Grid columns='equal'> 89 89 + <Grid.Column> 90 90 + <Button fluid secondary onClick={this.handleBack}> 91 91 + Back 92 92 + </Button> 93 93 + </Grid.Column> 94 94 + <Grid.Column> 95 95 + <Button fluid primary onClick={this.handleNext}> 96 96 + Next 97 97 + </Button> 98 98 + </Grid.Column> 99 99 + </Grid> 100 100 + </>; 101 101 + } 102 102 + 103 103 + renderHelpContent() { 104 104 + switch (this.state.helpStep) { 105 105 + case HELP_STEP.SIGNAL_EXPLANATION: 106 106 + return this.renderHelp('Improve the signal quality', 'In order to collect quality data, you want to make sure that all electrodes have a strong connection'); 107 107 + case HELP_STEP.SIGNAL_SALINE: 108 108 + return this.renderHelp('Tip #1: Saturate the sensors in saline', 'Make sure the sensors are thoroughly soaked with saline solution. They should be wet to the touch'); 109 109 + case HELP_STEP.SIGNAL_CONTACT: 110 110 + return this.renderHelp('Tip #2: Ensure the sensors are making firm contact', 'Re-seat the headset to make sure that all sensors contact the head with some tension. You may need to sweep hair out of the way to accomplish this'); 111 111 + case HELP_STEP.SIGNAL_MOVEMENT: 112 112 + return this.renderHelp('Tip #3: Stay still', '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'); 113 113 + case HELP_STEP.LEARN_BRAIN: 114 114 + return this.renderHelp('Your brain produces electricity', 'Using the device that you are wearing, we can detect the electrical activity of your brain.'); 115 115 + case HELP_STEP.LEARN_BLINK: 116 116 + return this.renderHelp('Try blinking your eyes', 'Does the signal change? Eye movements create noise in the EEG signal'); 117 117 + case HELP_STEP.LEARN_THOUGHTS: 118 118 + return this.renderHelp('Try thinking of a cat', "Does the signal change? Although EEG can measure overall brain activity, it's not capable of reading minds"); 119 119 + case HELP_STEP.LEARN_ALPHA: 120 120 + return this.renderHelp('Try closing your eyes for 10 seconds', 'You may notice a change in your signal due to an increase in alpha waves'); 121 121 + case HELP_STEP.MENU:default: 122 122 + return this.renderMenu(); 123 123 + 124 124 + } 125 125 + } 126 126 + 127 127 + render() { 128 128 + return <Segment basic padded vertical className={styles.helpSidebar}> 129 129 + <Button basic circular size='large' floated='right' icon='x' className={styles.closeButton} onClick={this.props.handleClose} /> 130 130 + {this.renderHelpContent()} 131 131 + </Segment>; 132 132 + } 133 133 + }

-235

app/components/CleanComponent/index.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { 4 4 - Grid, 5 5 - Button, 6 6 - Icon, 7 7 - Segment, 8 8 - Header, 9 9 - Dropdown, 10 10 - Sidebar, 11 11 - SidebarPusher, 12 12 - Divider, 13 13 - } from 'semantic-ui-react'; 14 14 - import { Link } from 'react-router-dom'; 15 15 - import { isNil } from 'lodash'; 16 16 - import styles from './../styles/collect.css'; 17 17 - import { EXPERIMENTS, DEVICES, KERNEL_STATUS } from '../../constants/constants'; 18 18 - import { Kernel } from '../../constants/interfaces'; 19 19 - import { readWorkspaceRawEEGData } from '../../utils/filesystem/storage'; 20 20 - import CleanSidebar from './CleanSidebar'; 21 21 - import * as path from 'path'; 22 22 - 23 23 - interface Props { 24 24 - type: ?EXPERIMENTS; 25 25 - title: string; 26 26 - deviceType: DEVICES; 27 27 - mainChannel: ?any; 28 28 - kernel: ?Kernel; 29 29 - kernelStatus: KERNEL_STATUS; 30 30 - epochsInfo: ?Array<{ [string]: number | string }>; 31 31 - jupyterActions: Object; 32 32 - experimentActions: Object; 33 33 - subject: string; 34 34 - session: number; 35 35 - } 36 36 - 37 37 - interface State { 38 38 - subjects: Array<?string>; 39 39 - eegFilePaths: Array<?{ 40 40 - key: string, 41 41 - text: string, 42 42 - value: { name: string, dir: string }, 43 43 - }>; 44 44 - selectedSubject: string; 45 45 - selectedFilePaths: Array<?string>; 46 46 - } 47 47 - 48 48 - export default class Clean extends Component<Props, State> { 49 49 - props: Props; 50 50 - state: State; 51 51 - handleRecordingChange: (Object, Object) => void; 52 52 - handleLoadData: () => void; 53 53 - handleSubjectChange: (Object, Object) => void; 54 54 - icons: string[]; 55 55 - 56 56 - constructor(props: Props) { 57 57 - super(props); 58 58 - this.state = { 59 59 - subjects: [], 60 60 - eegFilePaths: [{ key: '', text: '', value: '' }], 61 61 - selectedFilePaths: [], 62 62 - selectedSubject: props.subject, 63 63 - }; 64 64 - this.handleRecordingChange = this.handleRecordingChange.bind(this); 65 65 - this.handleLoadData = this.handleLoadData.bind(this); 66 66 - this.handleSidebarToggle = this.handleSidebarToggle.bind(this); 67 67 - this.handleSubjectChange = this.handleSubjectChange.bind(this); 68 68 - this.icons = 69 69 - props.type === EXPERIMENTS.N170 70 70 - ? ['smile', 'home', 'x', 'book'] 71 71 - : ['star', 'star outline', 'x', 'book']; 72 72 - } 73 73 - 74 74 - async componentDidMount() { 75 75 - const workspaceRawData = await readWorkspaceRawEEGData(this.props.title); 76 76 - if (this.props.kernelStatus === KERNEL_STATUS.OFFLINE) { 77 77 - this.props.jupyterActions.launchKernel(); 78 78 - } 79 79 - this.setState({ 80 80 - subjects: workspaceRawData 81 81 - .map((filepath) => filepath.path.split(path.sep)[filepath.path.split(path.sep).length - 3]) 82 82 - .reduce((acc, curr) => { 83 83 - if (acc.find((subject) => subject.key === curr)) { 84 84 - return acc; 85 85 - } 86 86 - return acc.concat({ 87 87 - key: curr, 88 88 - text: curr, 89 89 - value: curr, 90 90 - }); 91 91 - }, []), 92 92 - eegFilePaths: workspaceRawData.map((filepath) => ({ 93 93 - key: filepath.name, 94 94 - text: filepath.name, 95 95 - value: filepath.path, 96 96 - })), 97 97 - }); 98 98 - } 99 99 - 100 100 - handleRecordingChange(event: Object, data: Object) { 101 101 - this.setState({ selectedFilePaths: data.value }); 102 102 - } 103 103 - 104 104 - handleSubjectChange(event: Object, data: Object) { 105 105 - this.setState({ selectedSubject: data.value, selectedFilePaths: [] }); 106 106 - } 107 107 - 108 108 - handleLoadData() { 109 109 - this.props.experimentActions.setSubject(this.state.selectedSubject); 110 110 - this.props.jupyterActions.loadEpochs(this.state.selectedFilePaths); 111 111 - } 112 112 - 113 113 - handleSidebarToggle() { 114 114 - this.setState({ isSidebarVisible: !this.state.isSidebarVisible }); 115 115 - } 116 116 - 117 117 - renderEpochLabels() { 118 118 - if (!isNil(this.props.epochsInfo) && this.state.selectedFilePaths.length >= 1) { 119 119 - return ( 120 120 - <Segment basic textAlign='left'> 121 121 - {this.props.epochsInfo.map((infoObj, index) => ( 122 122 - <Segment key={infoObj.name} basic> 123 123 - <Icon name={this.icons[index]} /> 124 124 - {infoObj.name} 125 125 - <p>{infoObj.value}</p> 126 126 - </Segment> 127 127 - ))} 128 128 - </Segment> 129 129 - ); 130 130 - } 131 131 - return <div />; 132 132 - } 133 133 - 134 134 - renderAnalyzeButton() { 135 135 - if ( 136 136 - !isNil(this.props.epochsInfo) && 137 137 - this.props.epochsInfo.find((infoObj) => infoObj.name === 'Drop Percentage').value >= 2 138 138 - ) { 139 139 - return ( 140 140 - <Link to='/analyze'> 141 141 - <Button primary>Analyze Dataset</Button> 142 142 - </Link> 143 143 - ); 144 144 - } 145 145 - } 146 146 - 147 147 - render() { 148 148 - return ( 149 149 - <Sidebar.Pushable basic as={Segment} className={styles.preTestPushable}> 150 150 - <Sidebar width='wide' direction='right' as={Segment} visible={this.state.isSidebarVisible}> 151 151 - <CleanSidebar handleClose={this.handleSidebarToggle} /> 152 152 - </Sidebar> 153 153 - <SidebarPusher> 154 154 - <Grid 155 155 - columns='equal' 156 156 - textAlign='center' 157 157 - verticalAlign='middle' 158 158 - className={styles.preTestContainer} 159 159 - > 160 160 - <Grid.Row columns='equal'> 161 161 - <Grid.Column> 162 162 - <Header as='h1' floated='left'> 163 163 - Clean 164 164 - </Header> 165 165 - </Grid.Column> 166 166 - </Grid.Row> 167 167 - <Grid.Row> 168 168 - <Grid.Column width={6}> 169 169 - <Segment basic textAlign='left' className={styles.infoSegment}> 170 170 - <Header as='h1'>Select & Clean</Header> 171 171 - <p> 172 172 - Ready to clean some data? Select a subject and one or more EEG recordings, then 173 173 - launch the editor 174 174 - </p> 175 175 - <Header as='h4'>Select Subject</Header> 176 176 - <Dropdown 177 177 - fluid 178 178 - selection 179 179 - closeOnChange 180 180 - value={this.state.selectedSubject} 181 181 - options={this.state.subjects} 182 182 - onChange={this.handleSubjectChange} 183 183 - /> 184 184 - <Header as='h4'>Select Recordings</Header> 185 185 - <Dropdown 186 186 - fluid 187 187 - multiple 188 188 - selection 189 189 - closeOnChange 190 190 - value={this.state.selectedFilePaths} 191 191 - options={this.state.eegFilePaths.filter( 192 192 - (filepath) => 193 193 - this.state.selectedSubject === 194 194 - filepath.value.split(path.sep)[filepath.value.split(path.sep).length - 3] 195 195 - )} 196 196 - onChange={this.handleRecordingChange} 197 197 - /> 198 198 - <Divider hidden section /> 199 199 - <Grid textAlign='center' columns='equal'> 200 200 - <Grid.Column> 201 201 - <Button 202 202 - secondary 203 203 - disabled={this.props.kernelStatus !== KERNEL_STATUS.IDLE} 204 204 - loading={ 205 205 - this.props.kernelStatus === KERNEL_STATUS.STARTING || 206 206 - this.props.kernelStatus === KERNEL_STATUS.BUSY 207 207 - } 208 208 - onClick={this.handleLoadData} 209 209 - > 210 210 - Load Dataset 211 211 - </Button> 212 212 - </Grid.Column> 213 213 - <Grid.Column> 214 214 - <Button 215 215 - primary 216 216 - disabled={isNil(this.props.epochsInfo)} 217 217 - onClick={this.props.jupyterActions.cleanEpochs} 218 218 - > 219 219 - Clean Data 220 220 - </Button> 221 221 - </Grid.Column> 222 222 - </Grid> 223 223 - </Segment> 224 224 - </Grid.Column> 225 225 - <Grid.Column width={4}> 226 226 - {this.renderEpochLabels()} 227 227 - {this.renderAnalyzeButton()} 228 228 - </Grid.Column> 229 229 - </Grid.Row> 230 230 - </Grid> 231 231 - </SidebarPusher> 232 232 - </Sidebar.Pushable> 233 233 - ); 234 234 - } 235 235 - }

+176

app/components/CleanComponent/index.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Grid, Button, Icon, Segment, Header, Dropdown, Sidebar, SidebarPusher, Divider } from "semantic-ui-react"; 4 4 + import { Link } from "react-router-dom"; 5 5 + import { isNil } from "lodash"; 6 6 + import styles from "./../styles/collect.css"; 7 7 + import { EXPERIMENTS, DEVICES, KERNEL_STATUS } from "../../constants/constants"; 8 8 + import { Kernel } from "../../constants/interfaces"; 9 9 + import { readWorkspaceRawEEGData } from "../../utils/filesystem/storage"; 10 10 + import CleanSidebar from "./CleanSidebar"; 11 11 + import * as path from "path"; 12 12 + 13 13 + interface Props { 14 14 + type: EXPERIMENTS | null | undefined; 15 15 + title: string; 16 16 + deviceType: DEVICES; 17 17 + mainChannel: any | null | undefined; 18 18 + kernel: Kernel | null | undefined; 19 19 + kernelStatus: KERNEL_STATUS; 20 20 + epochsInfo: Array<{ 21 21 + [key: string]: number | string; 22 22 + }> | null | undefined; 23 23 + jupyterActions: Object; 24 24 + experimentActions: Object; 25 25 + subject: string; 26 26 + session: number; 27 27 + } 28 28 + 29 29 + interface State { 30 30 + subjects: Array<string | null | undefined>; 31 31 + eegFilePaths: Array<{ 32 32 + key: string; 33 33 + text: string; 34 34 + value: {name: string;dir: string;}; 35 35 + } | null | undefined>; 36 36 + selectedSubject: string; 37 37 + selectedFilePaths: Array<string | null | undefined>; 38 38 + } 39 39 + 40 40 + export default class Clean extends Component<Props, State> { 41 41 + 42 42 + props: Props; 43 43 + state: State; 44 44 + handleRecordingChange: (arg0: Object, arg1: Object) => void; 45 45 + handleLoadData: () => void; 46 46 + handleSubjectChange: (arg0: Object, arg1: Object) => void; 47 47 + icons: string[]; 48 48 + 49 49 + constructor(props: Props) { 50 50 + super(props); 51 51 + this.state = { 52 52 + subjects: [], 53 53 + eegFilePaths: [{ key: '', text: '', value: '' }], 54 54 + selectedFilePaths: [], 55 55 + selectedSubject: props.subject 56 56 + }; 57 57 + this.handleRecordingChange = this.handleRecordingChange.bind(this); 58 58 + this.handleLoadData = this.handleLoadData.bind(this); 59 59 + this.handleSidebarToggle = this.handleSidebarToggle.bind(this); 60 60 + this.handleSubjectChange = this.handleSubjectChange.bind(this); 61 61 + this.icons = props.type === EXPERIMENTS.N170 ? ['smile', 'home', 'x', 'book'] : ['star', 'star outline', 'x', 'book']; 62 62 + } 63 63 + 64 64 + async componentDidMount() { 65 65 + const workspaceRawData = await readWorkspaceRawEEGData(this.props.title); 66 66 + if (this.props.kernelStatus === KERNEL_STATUS.OFFLINE) { 67 67 + this.props.jupyterActions.launchKernel(); 68 68 + } 69 69 + this.setState({ 70 70 + subjects: workspaceRawData.map(filepath => filepath.path.split(path.sep)[filepath.path.split(path.sep).length - 3]).reduce((acc, curr) => { 71 71 + if (acc.find(subject => subject.key === curr)) { 72 72 + return acc; 73 73 + } 74 74 + return acc.concat({ 75 75 + key: curr, 76 76 + text: curr, 77 77 + value: curr 78 78 + }); 79 79 + }, []), 80 80 + eegFilePaths: workspaceRawData.map(filepath => ({ 81 81 + key: filepath.name, 82 82 + text: filepath.name, 83 83 + value: filepath.path 84 84 + })) 85 85 + }); 86 86 + } 87 87 + 88 88 + handleRecordingChange(event: Object, data: Object) { 89 89 + this.setState({ selectedFilePaths: data.value }); 90 90 + } 91 91 + 92 92 + handleSubjectChange(event: Object, data: Object) { 93 93 + this.setState({ selectedSubject: data.value, selectedFilePaths: [] }); 94 94 + } 95 95 + 96 96 + handleLoadData() { 97 97 + this.props.experimentActions.setSubject(this.state.selectedSubject); 98 98 + this.props.jupyterActions.loadEpochs(this.state.selectedFilePaths); 99 99 + } 100 100 + 101 101 + handleSidebarToggle() { 102 102 + this.setState({ isSidebarVisible: !this.state.isSidebarVisible }); 103 103 + } 104 104 + 105 105 + renderEpochLabels() { 106 106 + if (!isNil(this.props.epochsInfo) && this.state.selectedFilePaths.length >= 1) { 107 107 + return <Segment basic textAlign='left'> 108 108 + {this.props.epochsInfo.map((infoObj, index) => <Segment key={infoObj.name} basic> 109 109 + <Icon name={this.icons[index]} /> 110 110 + {infoObj.name} 111 111 + <p>{infoObj.value}</p> 112 112 + </Segment>)} 113 113 + </Segment>; 114 114 + } 115 115 + return <div />; 116 116 + } 117 117 + 118 118 + renderAnalyzeButton() { 119 119 + if (!isNil(this.props.epochsInfo) && this.props.epochsInfo.find(infoObj => infoObj.name === 'Drop Percentage').value >= 2) { 120 120 + return <Link to='/analyze'> 121 121 + <Button primary>Analyze Dataset</Button> 122 122 + </Link>; 123 123 + } 124 124 + } 125 125 + 126 126 + render() { 127 127 + return <Sidebar.Pushable basic as={Segment} className={styles.preTestPushable}> 128 128 + <Sidebar width='wide' direction='right' as={Segment} visible={this.state.isSidebarVisible}> 129 129 + <CleanSidebar handleClose={this.handleSidebarToggle} /> 130 130 + </Sidebar> 131 131 + <SidebarPusher> 132 132 + <Grid columns='equal' textAlign='center' verticalAlign='middle' className={styles.preTestContainer}> 133 133 + <Grid.Row columns='equal'> 134 134 + <Grid.Column> 135 135 + <Header as='h1' floated='left'> 136 136 + Clean 137 137 + </Header> 138 138 + </Grid.Column> 139 139 + </Grid.Row> 140 140 + <Grid.Row> 141 141 + <Grid.Column width={6}> 142 142 + <Segment basic textAlign='left' className={styles.infoSegment}> 143 143 + <Header as='h1'>Select & Clean</Header> 144 144 + <p> 145 145 + Ready to clean some data? Select a subject and one or more EEG recordings, then 146 146 + launch the editor 147 147 + </p> 148 148 + <Header as='h4'>Select Subject</Header> 149 149 + <Dropdown fluid selection closeOnChange value={this.state.selectedSubject} options={this.state.subjects} onChange={this.handleSubjectChange} /> 150 150 + <Header as='h4'>Select Recordings</Header> 151 151 + <Dropdown fluid multiple selection closeOnChange value={this.state.selectedFilePaths} options={this.state.eegFilePaths.filter(filepath => this.state.selectedSubject === filepath.value.split(path.sep)[filepath.value.split(path.sep).length - 3])} onChange={this.handleRecordingChange} /> 152 152 + <Divider hidden section /> 153 153 + <Grid textAlign='center' columns='equal'> 154 154 + <Grid.Column> 155 155 + <Button secondary disabled={this.props.kernelStatus !== KERNEL_STATUS.IDLE} loading={this.props.kernelStatus === KERNEL_STATUS.STARTING || this.props.kernelStatus === KERNEL_STATUS.BUSY} onClick={this.handleLoadData}> 156 156 + Load Dataset 157 157 + </Button> 158 158 + </Grid.Column> 159 159 + <Grid.Column> 160 160 + <Button primary disabled={isNil(this.props.epochsInfo)} onClick={this.props.jupyterActions.cleanEpochs}> 161 161 + Clean Data 162 162 + </Button> 163 163 + </Grid.Column> 164 164 + </Grid> 165 165 + </Segment> 166 166 + </Grid.Column> 167 167 + <Grid.Column width={4}> 168 168 + {this.renderEpochLabels()} 169 169 + {this.renderAnalyzeButton()} 170 170 + </Grid.Column> 171 171 + </Grid.Row> 172 172 + </Grid> 173 173 + </SidebarPusher> 174 174 + </Sidebar.Pushable>; 175 175 + } 176 176 + }

+39 -117

app/components/CollectComponent/ConnectModal.js app/components/CollectComponent/ConnectModal.tsx

reviewed

··· 1 1 - import React, { Component } from 'react'; 2 2 - import { isNil, debounce } from 'lodash'; 3 3 - import { Modal, Button, Segment, List, Grid, Divider } from 'semantic-ui-react'; 4 4 - import { 5 5 - DEVICES, 6 6 - DEVICE_AVAILABILITY, 7 7 - CONNECTION_STATUS, 8 8 - SCREENS, 9 9 - } from '../../constants/constants'; 10 10 - import styles from '../styles/collect.css'; 1 1 + import React, { Component } from "react"; 2 2 + import { isNil, debounce } from "lodash"; 3 3 + import { Modal, Button, Segment, List, Grid, Divider } from "semantic-ui-react"; 4 4 + import { DEVICES, DEVICE_AVAILABILITY, CONNECTION_STATUS, SCREENS } from "../../constants/constants"; 5 5 + import styles from "../styles/collect.css"; 11 6 12 7 interface Props { 13 8 history: Object; 14 9 open: boolean; 15 10 onClose: () => void; 16 11 connectedDevice: Object; 17 17 - signalQualityObservable: ?any; 12 12 + signalQualityObservable: any | null | undefined; 18 13 deviceType: DEVICES; 19 14 deviceAvailability: DEVICE_AVAILABILITY; 20 15 connectionStatus: CONNECTION_STATUS; ··· 23 18 } 24 19 25 20 interface State { 26 26 - selectedDevice: ?any; 21 21 + selectedDevice: any | null | undefined; 27 22 instructionProgress: number; 28 23 } 29 24 30 25 const INSTRUCTION_PROGRESS = { 31 26 SEARCHING: 0, 32 27 TURN_ON: 1, 33 33 - COMPUTER_CONNECTABILITY: 2, 28 28 + COMPUTER_CONNECTABILITY: 2 34 29 }; 35 30 36 31 export default class ConnectModal extends Component<Props, State> { 37 37 - // handleConnect: () => void; 38 32 // handleSearch: () => void; 39 39 - // handleStartTutorial: () => void; 40 33 34 34 + // handleStartTutorial: () => void; 41 35 static getDeviceName(device: any) { 42 36 if (!isNil(device)) { 43 37 return isNil(device.name) ? device.id : device.name; ··· 49 43 super(props); 50 44 this.state = { 51 45 selectedDevice: null, 52 52 - instructionProgress: INSTRUCTION_PROGRESS.SEARCHING, 46 46 + instructionProgress: INSTRUCTION_PROGRESS.SEARCHING 53 47 }; 54 48 this.handleSearch = debounce(this.handleSearch.bind(this), 300, { 55 49 leading: true, 56 56 - trailing: false, 50 50 + trailing: false 57 51 }); 58 52 this.handleConnect = debounce(this.handleConnect.bind(this), 1000, { 59 53 leading: true, 60 60 - trailing: false, 54 54 + trailing: false 61 55 }); 62 56 this.handleinstructionProgress = this.handleinstructionProgress.bind(this); 63 57 } 64 58 65 59 componentWillUpdate(nextProps: Props) { 66 66 - if ( 67 67 - nextProps.deviceAvailability === DEVICE_AVAILABILITY.NONE && 68 68 - this.props.deviceAvailability === DEVICE_AVAILABILITY.SEARCHING 69 69 - ) { 60 60 + if (nextProps.deviceAvailability === DEVICE_AVAILABILITY.NONE && this.props.deviceAvailability === DEVICE_AVAILABILITY.SEARCHING) { 70 61 this.setState({ instructionProgress: 1 }); 71 62 } 72 72 - if ( 73 73 - nextProps.deviceAvailability === DEVICE_AVAILABILITY.AVAILABLE && 74 74 - this.props.deviceAvailability === DEVICE_AVAILABILITY.NONE 75 75 - ) { 63 63 + if (nextProps.deviceAvailability === DEVICE_AVAILABILITY.AVAILABLE && this.props.deviceAvailability === DEVICE_AVAILABILITY.NONE) { 76 64 this.setState({ instructionProgress: 0 }); 77 65 } 78 66 } ··· 93 81 } 94 82 95 83 renderAvailableDeviceList() { 96 96 - return ( 97 97 - <Segment basic> 84 84 + return <Segment basic> 98 85 <List divided relaxed inverted> 99 99 - {this.props.availableDevices.map((device) => ( 100 100 - <List.Item className={styles.deviceItem} key={device.id}> 101 101 - <List.Icon 102 102 - link 103 103 - name={ 104 104 - this.state.selectedDevice === device ? 'check circle outline' : 'circle outline' 105 105 - } 106 106 - size='large' 107 107 - verticalAlign='middle' 108 108 - onClick={() => this.setState({ selectedDevice: device })} 109 109 - /> 86 86 + {this.props.availableDevices.map(device => <List.Item className={styles.deviceItem} key={device.id}> 87 87 + <List.Icon link name={this.state.selectedDevice === device ? 'check circle outline' : 'circle outline'} size='large' verticalAlign='middle' onClick={() => this.setState({ selectedDevice: device })} /> 110 88 <List.Content> 111 89 <List.Header>{ConnectModal.getDeviceName(device)}</List.Header> 112 90 </List.Content> 113 113 - </List.Item> 114 114 - ))} 91 91 + </List.Item>)} 115 92 </List> 116 116 - </Segment> 117 117 - ); 93 93 + </Segment>; 118 94 } 119 95 120 96 renderContent() { 121 97 if (this.props.deviceAvailability === DEVICE_AVAILABILITY.SEARCHING) { 122 122 - return ( 123 123 - <> 98 98 + return <> 124 99 <Modal.Content className={styles.searchingText}> 125 100 Searching for available headset(s)... 126 101 </Modal.Content> 127 127 - </> 128 128 - ); 102 102 + </>; 129 103 } 130 104 if (this.props.connectionStatus === CONNECTION_STATUS.CONNECTING) { 131 131 - return ( 132 132 - <> 105 105 + return <> 133 106 <Modal.Content className={styles.searchingText}> 134 107 Connecting to {ConnectModal.getDeviceName(this.state.selectedDevice)} 135 108 ... 136 109 </Modal.Content> 137 137 - </> 138 138 - ); 110 110 + </>; 139 111 } 140 112 if (this.state.instructionProgress === INSTRUCTION_PROGRESS.TURN_ON) { 141 141 - return ( 142 142 - <> 113 113 + return <> 143 114 <Modal.Header className={styles.connectHeader}>Turn your headset on</Modal.Header> 144 115 <Modal.Content> 145 116 Make sure your headset is on and fully charged. ··· 150 121 <Modal.Content> 151 122 <Grid textAlign='center' columns='equal'> 152 123 <Grid.Column> 153 153 - {this.state.step !== 0 && ( 154 154 - <Button 155 155 - fluid 156 156 - className={styles.secondaryButton} 157 157 - onClick={() => this.handleinstructionProgress(0)} 158 158 - > 124 124 + {this.state.step !== 0 && <Button fluid className={styles.secondaryButton} onClick={() => this.handleinstructionProgress(0)}> 159 125 Back 160 160 - </Button> 161 161 - )} 126 126 + </Button>} 162 127 </Grid.Column> 163 128 <Grid.Column> 164 164 - <Button 165 165 - fluid 166 166 - className={styles.primaryButton} 167 167 - onClick={() => 168 168 - this.handleinstructionProgress(INSTRUCTION_PROGRESS.COMPUTER_CONNECTABILITY) 169 169 - } 170 170 - > 129 129 + <Button fluid className={styles.primaryButton} onClick={() => this.handleinstructionProgress(INSTRUCTION_PROGRESS.COMPUTER_CONNECTABILITY)}> 171 130 Next 172 131 </Button> 173 132 </Grid.Column> 174 133 </Grid> 175 134 </Modal.Content> 176 176 - </> 177 177 - ); 135 135 + </>; 178 136 } 179 137 if (this.state.instructionProgress === INSTRUCTION_PROGRESS.COMPUTER_CONNECTABILITY) { 180 180 - return ( 181 181 - <> 138 138 + return <> 182 139 <Modal.Header className={styles.connectHeader}>Insert the USB Receiver</Modal.Header> 183 140 <Modal.Content> 184 141 Insert the USB receiver into a USB port on your computer. Ensure that the LED on the ··· 188 145 <Modal.Content> 189 146 <Grid textAlign='center' columns='equal'> 190 147 <Grid.Column> 191 191 - <Button 192 192 - fluid 193 193 - className={styles.secondaryButton} 194 194 - onClick={() => this.handleinstructionProgress(INSTRUCTION_PROGRESS.TURN_ON)} 195 195 - > 148 148 + <Button fluid className={styles.secondaryButton} onClick={() => this.handleinstructionProgress(INSTRUCTION_PROGRESS.TURN_ON)}> 196 149 Back 197 150 </Button> 198 151 </Grid.Column> ··· 203 156 </Grid.Column> 204 157 </Grid> 205 158 </Modal.Content> 206 206 - </> 207 207 - ); 159 159 + </>; 208 160 } 209 161 if (this.props.deviceAvailability === DEVICE_AVAILABILITY.AVAILABLE) { 210 210 - return ( 211 211 - <> 162 162 + return <> 212 163 <Modal.Header className={styles.connectHeader}>Headset(s) found</Modal.Header> 213 164 <Modal.Content>Please select which headset you would like to connect.</Modal.Content> 214 165 <Modal.Content>{this.renderAvailableDeviceList()}</Modal.Content> ··· 216 167 <Modal.Content> 217 168 <Grid textAlign='center' columns='equal'> 218 169 <Grid.Column> 219 219 - <Button 220 220 - fluid 221 221 - className={styles.secondaryButton} 222 222 - onClick={() => this.handleinstructionProgress(1)} 223 223 - > 170 170 + <Button fluid className={styles.secondaryButton} onClick={() => this.handleinstructionProgress(1)}> 224 171 Back 225 172 </Button> 226 173 </Grid.Column> 227 174 <Grid.Column> 228 228 - <Button 229 229 - fluid 230 230 - className={styles.primaryButton} 231 231 - disabled={isNil(this.state.selectedDevice)} 232 232 - onClick={this.handleConnect} 233 233 - > 175 175 + <Button fluid className={styles.primaryButton} disabled={isNil(this.state.selectedDevice)} onClick={this.handleConnect}> 234 176 Connect 235 177 </Button> 236 178 </Grid.Column> ··· 241 183 Don&#39;t see your device? 242 184 </a> 243 185 </Modal.Content> 244 244 - </> 245 245 - ); 186 186 + </>; 246 187 } 247 188 } 248 189 249 190 render() { 250 250 - return ( 251 251 - <Modal 252 252 - basic 253 253 - centered 254 254 - closeOnDimmerClick 255 255 - closeOnDocumentClick 256 256 - open={this.props.open} 257 257 - onOpen={this.handleSearch} 258 258 - className={styles.connectModal} 259 259 - > 260 260 - <Button 261 261 - circular 262 262 - basic 263 263 - bordered='false' 264 264 - inverted 265 265 - size='large' 266 266 - icon='x' 267 267 - className={styles.modalCloseButton} 268 268 - onClick={this.props.onClose} 269 269 - /> 191 191 + return <Modal basic centered closeOnDimmerClick closeOnDocumentClick open={this.props.open} onOpen={this.handleSearch} className={styles.connectModal}> 192 192 + <Button circular basic bordered='false' inverted size='large' icon='x' className={styles.modalCloseButton} onClick={this.props.onClose} /> 270 193 {this.renderContent()} 271 271 - </Modal> 272 272 - ); 194 194 + </Modal>; 273 195 } 274 274 - } 196 196 + }

-185

app/components/CollectComponent/HelpSidebar.js

reviewed

··· 1 1 - /* eslint-disable react/no-multi-comp */ 2 2 - import React, { Component } from 'react'; 3 3 - import { Segment, Header, Menu, Icon, Button, Grid } from 'semantic-ui-react'; 4 4 - import styles from '../styles/common.css'; 5 5 - 6 6 - const HELP_STEP = { 7 7 - MENU: 0, 8 8 - SIGNAL_EXPLANATION: 1, 9 9 - SIGNAL_SALINE: 2, 10 10 - SIGNAL_CONTACT: 3, 11 11 - SIGNAL_MOVEMENT: 4, 12 12 - LEARN_BRAIN: 5, 13 13 - LEARN_BLINK: 6, 14 14 - LEARN_THOUGHTS: 7, 15 15 - LEARN_ALPHA: 8, 16 16 - }; 17 17 - 18 18 - interface Props { 19 19 - handleClose: () => void; 20 20 - } 21 21 - 22 22 - interface State { 23 23 - helpStep: HELP_STEP; 24 24 - } 25 25 - 26 26 - // TODO: Refactor this into a more reusable Sidebar component that can be used in Collect, Clean, and Analyze screen 27 27 - export class HelpSidebar extends Component<Props, State> { 28 28 - // props: Props; 29 29 - 30 30 - constructor(props) { 31 31 - super(props); 32 32 - this.state = { 33 33 - helpStep: HELP_STEP.MENU, 34 34 - }; 35 35 - this.handleStartLearn = this.handleStartLearn.bind(this); 36 36 - this.handleStartSignal = this.handleStartSignal.bind(this); 37 37 - this.handleNext = this.handleNext.bind(this); 38 38 - this.handleBack = this.handleBack.bind(this); 39 39 - } 40 40 - 41 41 - handleStartSignal() { 42 42 - this.setState({ helpStep: HELP_STEP.SIGNAL_EXPLANATION }); 43 43 - } 44 44 - 45 45 - handleStartLearn() { 46 46 - this.setState({ helpStep: HELP_STEP.LEARN_BRAIN }); 47 47 - } 48 48 - 49 49 - handleNext() { 50 50 - if ( 51 51 - this.state.helpStep === HELP_STEP.SIGNAL_MOVEMENT || 52 52 - this.state.helpStep === HELP_STEP.LEARN_ALPHA 53 53 - ) { 54 54 - this.setState({ helpStep: HELP_STEP.MENU }); 55 55 - } else { 56 56 - this.setState((prevState) => ({ ...prevState, helpStep: prevState.helpStep + 1 })); 57 57 - } 58 58 - } 59 59 - 60 60 - handleBack() { 61 61 - this.setState((prevState) => ({ ...prevState, helpStep: prevState.helpStep - 1 })); 62 62 - } 63 63 - 64 64 - renderMenu() { 65 65 - return ( 66 66 - <> 67 67 - <Menu secondary vertical fluid> 68 68 - <Header className={styles.helpHeader} as='h1'> 69 69 - What would you like to do? 70 70 - </Header> 71 71 - <Menu.Item onClick={this.handleStartSignal}> 72 72 - <Segment basic className={styles.helpMenuItem}> 73 73 - <Icon name='star outline' size='large' /> 74 74 - Improve the signal quality of your sensors 75 75 - </Segment> 76 76 - </Menu.Item> 77 77 - <Menu.Item onClick={this.handleStartLearn}> 78 78 - <Segment basic className={styles.helpMenuItem}> 79 79 - <Icon name='exclamation triangle' size='large' /> 80 80 - Learn about how the subjects movements create noise 81 81 - </Segment> 82 82 - </Menu.Item> 83 83 - </Menu> 84 84 - </> 85 85 - ); 86 86 - } 87 87 - 88 88 - renderHelp(header: string, content: string) { 89 89 - return ( 90 90 - <> 91 91 - <Segment basic className={styles.helpContent}> 92 92 - <Header className={styles.helpHeader} as='h1'> 93 93 - {header} 94 94 - </Header> 95 95 - {content} 96 96 - </Segment> 97 97 - <Grid columns='equal'> 98 98 - <Grid.Column> 99 99 - <Button fluid secondary onClick={this.handleBack}> 100 100 - Back 101 101 - </Button> 102 102 - </Grid.Column> 103 103 - <Grid.Column> 104 104 - <Button fluid primary onClick={this.handleNext}> 105 105 - Next 106 106 - </Button> 107 107 - </Grid.Column> 108 108 - </Grid> 109 109 - </> 110 110 - ); 111 111 - } 112 112 - 113 113 - renderHelpContent() { 114 114 - switch (this.state.helpStep) { 115 115 - case HELP_STEP.SIGNAL_EXPLANATION: 116 116 - return this.renderHelp( 117 117 - 'Improve the signal quality', 118 118 - 'In order to collect quality data, you want to make sure that all electrodes have a strong connection' 119 119 - ); 120 120 - case HELP_STEP.SIGNAL_SALINE: 121 121 - return this.renderHelp( 122 122 - 'Tip #1: Saturate the sensors in saline', 123 123 - 'Make sure the sensors are thoroughly soaked with saline solution. They should be wet to the touch' 124 124 - ); 125 125 - case HELP_STEP.SIGNAL_CONTACT: 126 126 - return this.renderHelp( 127 127 - 'Tip #2: Ensure the sensors are making firm contact', 128 128 - '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' 129 129 - ); 130 130 - case HELP_STEP.SIGNAL_MOVEMENT: 131 131 - return this.renderHelp( 132 132 - 'Tip #3: Stay still', 133 133 - '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' 134 134 - ); 135 135 - case HELP_STEP.LEARN_BRAIN: 136 136 - return this.renderHelp( 137 137 - 'Your brain produces electricity', 138 138 - 'Using the device that you are wearing, we can detect the electrical activity of your brain.' 139 139 - ); 140 140 - case HELP_STEP.LEARN_BLINK: 141 141 - return this.renderHelp( 142 142 - 'Try blinking your eyes', 143 143 - 'Does the signal change? Eye movements create noise in the EEG signal' 144 144 - ); 145 145 - case HELP_STEP.LEARN_THOUGHTS: 146 146 - return this.renderHelp( 147 147 - 'Try thinking of a cat', 148 148 - "Does the signal change? Although EEG can measure overall brain activity, it's not capable of reading minds" 149 149 - ); 150 150 - case HELP_STEP.LEARN_ALPHA: 151 151 - return this.renderHelp( 152 152 - 'Try closing your eyes for 10 seconds', 153 153 - 'You may notice a change in your signal due to an increase in alpha waves' 154 154 - ); 155 155 - case HELP_STEP.MENU: 156 156 - default: 157 157 - return this.renderMenu(); 158 158 - } 159 159 - } 160 160 - 161 161 - render() { 162 162 - return ( 163 163 - <Segment basic padded vertical className={styles.helpSidebar}> 164 164 - <Segment basic className={styles.closeButton}> 165 165 - <Button circular size='large' icon='x' onClick={this.props.handleClose} /> 166 166 - </Segment> 167 167 - {this.renderHelpContent()} 168 168 - </Segment> 169 169 - ); 170 170 - } 171 171 - } 172 172 - 173 173 - export class HelpButton extends Component<{ onClick: () => void }, {}> { 174 174 - render() { 175 175 - return ( 176 176 - <Button 177 177 - circular 178 178 - icon='question' 179 179 - className={styles.helpButton} 180 180 - floated='right' 181 181 - onClick={this.props.onClick} 182 182 - /> 183 183 - ); 184 184 - } 185 185 - }

+145

app/components/CollectComponent/HelpSidebar.tsx

reviewed

··· 1 1 + /* eslint-disable react/no-multi-comp */ 2 2 + import React, { Component } from "react"; 3 3 + import { Segment, Header, Menu, Icon, Button, Grid } from "semantic-ui-react"; 4 4 + import styles from "../styles/common.css"; 5 5 + 6 6 + const HELP_STEP = { 7 7 + MENU: 0, 8 8 + SIGNAL_EXPLANATION: 1, 9 9 + SIGNAL_SALINE: 2, 10 10 + SIGNAL_CONTACT: 3, 11 11 + SIGNAL_MOVEMENT: 4, 12 12 + LEARN_BRAIN: 5, 13 13 + LEARN_BLINK: 6, 14 14 + LEARN_THOUGHTS: 7, 15 15 + LEARN_ALPHA: 8 16 16 + }; 17 17 + 18 18 + interface Props { 19 19 + handleClose: () => void; 20 20 + } 21 21 + 22 22 + interface State { 23 23 + helpStep: HELP_STEP; 24 24 + } 25 25 + 26 26 + // TODO: Refactor this into a more reusable Sidebar component that can be used in Collect, Clean, and Analyze screen 27 27 + export class HelpSidebar extends Component<Props, State> { 28 28 + // props: Props; 29 29 + 30 30 + constructor(props) { 31 31 + super(props); 32 32 + this.state = { 33 33 + helpStep: HELP_STEP.MENU 34 34 + }; 35 35 + this.handleStartLearn = this.handleStartLearn.bind(this); 36 36 + this.handleStartSignal = this.handleStartSignal.bind(this); 37 37 + this.handleNext = this.handleNext.bind(this); 38 38 + this.handleBack = this.handleBack.bind(this); 39 39 + } 40 40 + 41 41 + handleStartSignal() { 42 42 + this.setState({ helpStep: HELP_STEP.SIGNAL_EXPLANATION }); 43 43 + } 44 44 + 45 45 + handleStartLearn() { 46 46 + this.setState({ helpStep: HELP_STEP.LEARN_BRAIN }); 47 47 + } 48 48 + 49 49 + handleNext() { 50 50 + if (this.state.helpStep === HELP_STEP.SIGNAL_MOVEMENT || this.state.helpStep === HELP_STEP.LEARN_ALPHA) { 51 51 + this.setState({ helpStep: HELP_STEP.MENU }); 52 52 + } else { 53 53 + this.setState(prevState => ({ ...prevState, helpStep: prevState.helpStep + 1 })); 54 54 + } 55 55 + } 56 56 + 57 57 + handleBack() { 58 58 + this.setState(prevState => ({ ...prevState, helpStep: prevState.helpStep - 1 })); 59 59 + } 60 60 + 61 61 + renderMenu() { 62 62 + return <> 63 63 + <Menu secondary vertical fluid> 64 64 + <Header className={styles.helpHeader} as='h1'> 65 65 + What would you like to do? 66 66 + </Header> 67 67 + <Menu.Item onClick={this.handleStartSignal}> 68 68 + <Segment basic className={styles.helpMenuItem}> 69 69 + <Icon name='star outline' size='large' /> 70 70 + Improve the signal quality of your sensors 71 71 + </Segment> 72 72 + </Menu.Item> 73 73 + <Menu.Item onClick={this.handleStartLearn}> 74 74 + <Segment basic className={styles.helpMenuItem}> 75 75 + <Icon name='exclamation triangle' size='large' /> 76 76 + Learn about how the subjects movements create noise 77 77 + </Segment> 78 78 + </Menu.Item> 79 79 + </Menu> 80 80 + </>; 81 81 + } 82 82 + 83 83 + renderHelp(header: string, content: string) { 84 84 + return <> 85 85 + <Segment basic className={styles.helpContent}> 86 86 + <Header className={styles.helpHeader} as='h1'> 87 87 + {header} 88 88 + </Header> 89 89 + {content} 90 90 + </Segment> 91 91 + <Grid columns='equal'> 92 92 + <Grid.Column> 93 93 + <Button fluid secondary onClick={this.handleBack}> 94 94 + Back 95 95 + </Button> 96 96 + </Grid.Column> 97 97 + <Grid.Column> 98 98 + <Button fluid primary onClick={this.handleNext}> 99 99 + Next 100 100 + </Button> 101 101 + </Grid.Column> 102 102 + </Grid> 103 103 + </>; 104 104 + } 105 105 + 106 106 + renderHelpContent() { 107 107 + switch (this.state.helpStep) { 108 108 + case HELP_STEP.SIGNAL_EXPLANATION: 109 109 + return this.renderHelp('Improve the signal quality', 'In order to collect quality data, you want to make sure that all electrodes have a strong connection'); 110 110 + case HELP_STEP.SIGNAL_SALINE: 111 111 + return this.renderHelp('Tip #1: Saturate the sensors in saline', 'Make sure the sensors are thoroughly soaked with saline solution. They should be wet to the touch'); 112 112 + case HELP_STEP.SIGNAL_CONTACT: 113 113 + return this.renderHelp('Tip #2: Ensure the sensors are making firm contact', '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'); 114 114 + case HELP_STEP.SIGNAL_MOVEMENT: 115 115 + return this.renderHelp('Tip #3: Stay still', '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'); 116 116 + case HELP_STEP.LEARN_BRAIN: 117 117 + return this.renderHelp('Your brain produces electricity', 'Using the device that you are wearing, we can detect the electrical activity of your brain.'); 118 118 + case HELP_STEP.LEARN_BLINK: 119 119 + return this.renderHelp('Try blinking your eyes', 'Does the signal change? Eye movements create noise in the EEG signal'); 120 120 + case HELP_STEP.LEARN_THOUGHTS: 121 121 + return this.renderHelp('Try thinking of a cat', "Does the signal change? Although EEG can measure overall brain activity, it's not capable of reading minds"); 122 122 + case HELP_STEP.LEARN_ALPHA: 123 123 + return this.renderHelp('Try closing your eyes for 10 seconds', 'You may notice a change in your signal due to an increase in alpha waves'); 124 124 + case HELP_STEP.MENU:default: 125 125 + return this.renderMenu(); 126 126 + 127 127 + } 128 128 + } 129 129 + 130 130 + render() { 131 131 + return <Segment basic padded vertical className={styles.helpSidebar}> 132 132 + <Segment basic className={styles.closeButton}> 133 133 + <Button circular size='large' icon='x' onClick={this.props.handleClose} /> 134 134 + </Segment> 135 135 + {this.renderHelpContent()} 136 136 + </Segment>; 137 137 + } 138 138 + } 139 139 + 140 140 + export class HelpButton extends Component<{onClick: () => void;}, {}> { 141 141 + 142 142 + render() { 143 143 + return <Button circular icon='question' className={styles.helpButton} floated='right' onClick={this.props.onClick} />; 144 144 + } 145 145 + }

-186

app/components/CollectComponent/PreTestComponent.js

reviewed

··· 1 1 - import React, { Component } from 'react'; 2 2 - import { Grid, Segment, Button, List, Header, Sidebar } from 'semantic-ui-react'; 3 3 - import Mousetrap from 'mousetrap'; 4 4 - import ViewerComponent from '../ViewerComponent'; 5 5 - import SignalQualityIndicatorComponent from '../SignalQualityIndicatorComponent'; 6 6 - import PreviewExperimentComponent from '../PreviewExperimentComponent'; 7 7 - import PreviewButton from '../PreviewButtonComponent'; 8 8 - import { HelpSidebar, HelpButton } from './HelpSidebar'; 9 9 - import styles from '../styles/collect.css'; 10 10 - import { PLOTTING_INTERVAL, CONNECTION_STATUS } from '../../constants/constants'; 11 11 - import { loadProtocol } from '../../utils/labjs/functions'; 12 12 - 13 13 - interface Props { 14 14 - experimentActions: Object; 15 15 - connectedDevice: Object; 16 16 - signalQualityObservable: ?any; 17 17 - deviceType: DEVICES; 18 18 - deviceAvailability: DEVICE_AVAILABILITY; 19 19 - connectionStatus: CONNECTION_STATUS; 20 20 - deviceActions: Object; 21 21 - experimentActions: Object; 22 22 - availableDevices: Array<any>; 23 23 - type: EXPERIMENTS; 24 24 - paradigm: EXPERIMENTS; 25 25 - isRunning: boolean; 26 26 - params: ExperimentParameters; 27 27 - mainTimeline: MainTimeline; 28 28 - trials: { [string]: Trial }; 29 29 - timelines: {}; 30 30 - subject: string; 31 31 - group: string; 32 32 - session: number; 33 33 - openRunComponent: () => void; 34 34 - } 35 35 - 36 36 - interface State { 37 37 - isPreviewing: boolean; 38 38 - isSidebarVisible: boolean; 39 39 - } 40 40 - 41 41 - export default class PreTestComponent extends Component<Props, State> { 42 42 - // props: Props; 43 43 - // state: State; 44 44 - // handlePreview: () => void; 45 45 - 46 46 - constructor(props: Props) { 47 47 - super(props); 48 48 - this.state = { 49 49 - isPreviewing: false, 50 50 - isSidebarVisible: true, 51 51 - }; 52 52 - this.handlePreview = this.handlePreview.bind(this); 53 53 - this.handleSidebarToggle = this.handleSidebarToggle.bind(this); 54 54 - this.endPreview = this.endPreview.bind(this); 55 55 - } 56 56 - 57 57 - componentDidMount() { 58 58 - Mousetrap.bind('esc', this.props.experimentActions.stop); 59 59 - } 60 60 - 61 61 - componentWillUnmount() { 62 62 - Mousetrap.unbind('esc'); 63 63 - } 64 64 - 65 65 - endPreview() { 66 66 - this.setState({ isPreviewing: false }); 67 67 - } 68 68 - 69 69 - handlePreview(e) { 70 70 - e.target.blur(); 71 71 - this.setState((prevState) => ({ 72 72 - ...prevState, 73 73 - isSidebarVisible: false, 74 74 - isPreviewing: !prevState.isPreviewing, 75 75 - })); 76 76 - } 77 77 - 78 78 - handleSidebarToggle() { 79 79 - this.setState((prevState) => ({ 80 80 - ...prevState, 81 81 - isSidebarVisible: !prevState.isSidebarVisible, 82 82 - })); 83 83 - } 84 84 - 85 85 - renderSignalQualityOrPreview() { 86 86 - if (this.state.isPreviewing) { 87 87 - return ( 88 88 - <PreviewExperimentComponent 89 89 - {...loadProtocol(this.props.paradigm)} 90 90 - isPreviewing={this.state.isPreviewing} 91 91 - onEnd={this.endPreview} 92 92 - type={this.props.type} 93 93 - paradigm={this.props.paradigm} 94 94 - previewParams={this.props.params} 95 95 - title={this.props.title} 96 96 - /> 97 97 - ); 98 98 - } 99 99 - return ( 100 100 - <Segment basic> 101 101 - <SignalQualityIndicatorComponent 102 102 - signalQualityObservable={this.props.signalQualityObservable} 103 103 - plottingInterval={PLOTTING_INTERVAL} 104 104 - /> 105 105 - <Segment basic> 106 106 - <List> 107 107 - <List.Item> 108 108 - <List.Icon name='circle' className={styles.greatSignal} /> 109 109 - <List.Content>Strong Signal</List.Content> 110 110 - </List.Item> 111 111 - <List.Item> 112 112 - <List.Icon name='circle' className={styles.okSignal} /> 113 113 - <List.Content>Mediocre signal</List.Content> 114 114 - </List.Item> 115 115 - <List.Item> 116 116 - <List.Icon name='circle' className={styles.badSignal} /> 117 117 - <List.Content>Weak Signal</List.Content> 118 118 - </List.Item> 119 119 - <List.Item> 120 120 - <List.Icon name='circle' className={styles.noSignal} /> 121 121 - <List.Content>No Signal</List.Content> 122 122 - </List.Item> 123 123 - </List> 124 124 - </Segment> 125 125 - </Segment> 126 126 - ); 127 127 - } 128 128 - 129 129 - renderHelpButton() { 130 130 - if (!this.state.isSidebarVisible) { 131 131 - return <HelpButton onClick={this.handleSidebarToggle} />; 132 132 - } 133 133 - } 134 134 - 135 135 - render() { 136 136 - return ( 137 137 - <Sidebar.Pushable as={Segment} className={styles.preTestPushable} basic> 138 138 - <Sidebar width='wide' direction='right' as={Segment} visible={this.state.isSidebarVisible}> 139 139 - <HelpSidebar handleClose={this.handleSidebarToggle} /> 140 140 - </Sidebar> 141 141 - <Sidebar.Pusher> 142 142 - <Grid 143 143 - className={styles.preTestContainer} 144 144 - columns='equal' 145 145 - textAlign='center' 146 146 - verticalAlign='middle' 147 147 - > 148 148 - <Grid.Row columns='equal'> 149 149 - <Grid.Column> 150 150 - <Header as='h1' floated='left'> 151 151 - Collect 152 152 - </Header> 153 153 - </Grid.Column> 154 154 - <Grid.Column floated='right'> 155 155 - <PreviewButton 156 156 - isPreviewing={this.state.isPreviewing} 157 157 - onClick={(e) => this.handlePreview(e)} 158 158 - /> 159 159 - <Button 160 160 - primary 161 161 - disabled={this.props.connectionStatus !== CONNECTION_STATUS.CONNECTED} 162 162 - onClick={this.props.openRunComponent} 163 163 - > 164 164 - Run & Record Experiment 165 165 - </Button> 166 166 - </Grid.Column> 167 167 - </Grid.Row> 168 168 - <Grid.Row> 169 169 - <Grid.Column width={8} className={styles.previewEEGWindow}> 170 170 - {this.renderSignalQualityOrPreview()} 171 171 - </Grid.Column> 172 172 - <Grid.Column width={8}> 173 173 - <ViewerComponent 174 174 - signalQualityObservable={this.props.signalQualityObservable} 175 175 - deviceType={this.props.deviceType} 176 176 - plottingInterval={PLOTTING_INTERVAL} 177 177 - /> 178 178 - {this.renderHelpButton()} 179 179 - </Grid.Column> 180 180 - </Grid.Row> 181 181 - </Grid> 182 182 - </Sidebar.Pusher> 183 183 - </Sidebar.Pushable> 184 184 - ); 185 185 - } 186 186 - }

+154

app/components/CollectComponent/PreTestComponent.tsx

reviewed

··· 1 1 + import React, { Component } from "react"; 2 2 + import { Grid, Segment, Button, List, Header, Sidebar } from "semantic-ui-react"; 3 3 + import Mousetrap from "mousetrap"; 4 4 + import ViewerComponent from "../ViewerComponent"; 5 5 + import SignalQualityIndicatorComponent from "../SignalQualityIndicatorComponent"; 6 6 + import PreviewExperimentComponent from "../PreviewExperimentComponent"; 7 7 + import PreviewButton from "../PreviewButtonComponent"; 8 8 + import { HelpSidebar, HelpButton } from "./HelpSidebar"; 9 9 + import styles from "../styles/collect.css"; 10 10 + import { PLOTTING_INTERVAL, CONNECTION_STATUS } from "../../constants/constants"; 11 11 + import { loadProtocol } from "../../utils/labjs/functions"; 12 12 + 13 13 + interface Props { 14 14 + experimentActions: Object; 15 15 + connectedDevice: Object; 16 16 + signalQualityObservable: any | null | undefined; 17 17 + deviceType: DEVICES; 18 18 + deviceAvailability: DEVICE_AVAILABILITY; 19 19 + connectionStatus: CONNECTION_STATUS; 20 20 + deviceActions: Object; 21 21 + experimentActions: Object; 22 22 + availableDevices: Array<any>; 23 23 + type: EXPERIMENTS; 24 24 + paradigm: EXPERIMENTS; 25 25 + isRunning: boolean; 26 26 + params: ExperimentParameters; 27 27 + mainTimeline: MainTimeline; 28 28 + trials: { 29 29 + [key: string]: Trial; 30 30 + }; 31 31 + timelines: {}; 32 32 + subject: string; 33 33 + group: string; 34 34 + session: number; 35 35 + openRunComponent: () => void; 36 36 + } 37 37 + 38 38 + interface State { 39 39 + isPreviewing: boolean; 40 40 + isSidebarVisible: boolean; 41 41 + } 42 42 + 43 43 + export default class PreTestComponent extends Component<Props, State> { 44 44 + // state: State; 45 45 + 46 46 + // handlePreview: () => void; 47 47 + constructor(props: Props) { 48 48 + super(props); 49 49 + this.state = { 50 50 + isPreviewing: false, 51 51 + isSidebarVisible: true 52 52 + }; 53 53 + this.handlePreview = this.handlePreview.bind(this); 54 54 + this.handleSidebarToggle = this.handleSidebarToggle.bind(this); 55 55 + this.endPreview = this.endPreview.bind(this); 56 56 + } 57 57 + 58 58 + componentDidMount() { 59 59 + Mousetrap.bind('esc', this.props.experimentActions.stop); 60 60 + } 61 61 + 62 62 + componentWillUnmount() { 63 63 + Mousetrap.unbind('esc'); 64 64 + } 65 65 + 66 66 + endPreview() { 67 67 + this.setState({ isPreviewing: false }); 68 68 + } 69 69 + 70 70 + handlePreview(e) { 71 71 + e.target.blur(); 72 72 + this.setState(prevState => ({ 73 73 + ...prevState, 74 74 + isSidebarVisible: false, 75 75 + isPreviewing: !prevState.isPreviewing 76 76 + })); 77 77 + } 78 78 + 79 79 + handleSidebarToggle() { 80 80 + this.setState(prevState => ({ 81 81 + ...prevState, 82 82 + isSidebarVisible: !prevState.isSidebarVisible 83 83 + })); 84 84 + } 85 85 + 86 86 + renderSignalQualityOrPreview() { 87 87 + if (this.state.isPreviewing) { 88 88 + return <PreviewExperimentComponent {...loadProtocol(this.props.paradigm)} isPreviewing={this.state.isPreviewing} onEnd={this.endPreview} type={this.props.type} paradigm={this.props.paradigm} previewParams={this.props.params} title={this.props.title} />; 89 89 + } 90 90 + return <Segment basic> 91 91 + <SignalQualityIndicatorComponent signalQualityObservable={this.props.signalQualityObservable} plottingInterval={PLOTTING_INTERVAL} /> 92 92 + <Segment basic> 93 93 + <List> 94 94 + <List.Item> 95 95 + <List.Icon name='circle' className={styles.greatSignal} /> 96 96 + <List.Content>Strong Signal</List.Content> 97 97 + </List.Item> 98 98 + <List.Item> 99 99 + <List.Icon name='circle' className={styles.okSignal} /> 100 100 + <List.Content>Mediocre signal</List.Content> 101 101 + </List.Item> 102 102 + <List.Item> 103 103 + <List.Icon name='circle' className={styles.badSignal} /> 104 104 + <List.Content>Weak Signal</List.Content> 105 105 + </List.Item> 106 106 + <List.Item> 107 107 + <List.Icon name='circle' className={styles.noSignal} /> 108 108 + <List.Content>No Signal</List.Content> 109 109 + </List.Item> 110 110 + </List> 111 111 + </Segment> 112 112 + </Segment>; 113 113 + } 114 114 + 115 115 + renderHelpButton() { 116 116 + if (!this.state.isSidebarVisible) { 117 117 + return <HelpButton onClick={this.handleSidebarToggle} />; 118 118 + } 119 119 + } 120 120 + 121 121 + render() { 122 122 + return <Sidebar.Pushable as={Segment} className={styles.preTestPushable} basic> 123 123 + <Sidebar width='wide' direction='right' as={Segment} visible={this.state.isSidebarVisible}> 124 124 + <HelpSidebar handleClose={this.handleSidebarToggle} /> 125 125 + </Sidebar> 126 126 + <Sidebar.Pusher> 127 127 + <Grid className={styles.preTestContainer} columns='equal' textAlign='center' verticalAlign='middle'> 128 128 + <Grid.Row columns='equal'> 129 129 + <Grid.Column> 130 130 + <Header as='h1' floated='left'> 131 131 + Collect 132 132 + </Header> 133 133 + </Grid.Column> 134 134 + <Grid.Column floated='right'> 135 135 + <PreviewButton isPreviewing={this.state.isPreviewing} onClick={e => this.handlePreview(e)} /> 136 136 + <Button primary disabled={this.props.connectionStatus !== CONNECTION_STATUS.CONNECTED} onClick={this.props.openRunComponent}> 137 137 + Run & Record Experiment 138 138 + </Button> 139 139 + </Grid.Column> 140 140 + </Grid.Row> 141 141 + <Grid.Row> 142 142 + <Grid.Column width={8} className={styles.previewEEGWindow}> 143 143 + {this.renderSignalQualityOrPreview()} 144 144 + </Grid.Column> 145 145 + <Grid.Column width={8}> 146 146 + <ViewerComponent signalQualityObservable={this.props.signalQualityObservable} deviceType={this.props.deviceType} plottingInterval={PLOTTING_INTERVAL} /> 147 147 + {this.renderHelpButton()} 148 148 + </Grid.Column> 149 149 + </Grid.Row> 150 150 + </Grid> 151 151 + </Sidebar.Pusher> 152 152 + </Sidebar.Pushable>; 153 153 + } 154 154 + }

-195

app/components/CollectComponent/RunComponent.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { Grid, Button, Segment, Header, Divider } from 'semantic-ui-react'; 4 4 - import { Link } from 'react-router-dom'; 5 5 - import styles from '../styles/common.css'; 6 6 - import InputCollect from '../InputCollect'; 7 7 - import { injectEmotivMarker } from '../../utils/eeg/emotiv'; 8 8 - import { injectMuseMarker } from '../../utils/eeg/muse'; 9 9 - import { EXPERIMENTS, DEVICES } from '../../constants/constants'; 10 10 - import { ExperimentWindow } from '../../utils/labjs'; 11 11 - import { checkFileExists, getImages } from '../../utils/filesystem/storage'; 12 12 - import { MainTimeline, Trial, ExperimentParameters } from '../../constants/interfaces'; 13 13 - 14 14 - import { remote } from 'electron'; 15 15 - 16 16 - const { dialog } = remote; 17 17 - 18 18 - interface Props { 19 19 - type: ?EXPERIMENTS; 20 20 - title: string; 21 21 - isRunning: boolean; 22 22 - params: ExperimentParameters; 23 23 - mainTimeline: MainTimeline; 24 24 - trials: { [string]: Trial }; 25 25 - timelines: {}; 26 26 - subject: string; 27 27 - group: string; 28 28 - session: number; 29 29 - deviceType: DEVICES; 30 30 - isEEGEnabled: boolean; 31 31 - experimentActions: Object; 32 32 - } 33 33 - 34 34 - interface State { 35 35 - isInputCollectOpen: boolean; 36 36 - } 37 37 - 38 38 - export default class Run extends Component<Props, State> { 39 39 - // props: Props; 40 40 - // state: State; 41 41 - // handleStartExperiment: () => void; 42 42 - // insertLabJsCallback: () => void; 43 43 - // handleCloseInputCollect: (string, string, number) => void; 44 44 - // handleClean: () => void; 45 45 - 46 46 - constructor(props: Props) { 47 47 - super(props); 48 48 - this.state = { 49 49 - isInputCollectOpen: props.subject.length === 0, 50 50 - }; 51 51 - this.handleStartExperiment = this.handleStartExperiment.bind(this); 52 52 - this.insertLabJsCallback = this.insertLabJsCallback.bind(this); 53 53 - this.handleCloseInputCollect = this.handleCloseInputCollect.bind(this); 54 54 - } 55 55 - 56 56 - componentDidMount() { 57 57 - if (this.props.mainTimeline.length <= 0) { 58 58 - this.props.experimentActions.loadDefaultTimeline(); 59 59 - } 60 60 - } 61 61 - 62 62 - handleStartExperiment() { 63 63 - const filename = `${this.props.subject}-${this.props.group}-${this.props.session}-behavior.csv`; 64 64 - const { subject, title } = this.props; 65 65 - const fileExists = checkFileExists(title, subject, filename); 66 66 - if (fileExists) { 67 67 - const options = { 68 68 - buttons: ['No', 'Yes'], 69 69 - message: 70 70 - 'You already have a file with the same name. If you continue the experiment, the current file will be deleted. Do you really want to overwrite the data?', 71 71 - }; 72 72 - const response = dialog.showMessageBox(options); 73 73 - if (response === 1) { 74 74 - this.props.experimentActions.start(); 75 75 - } 76 76 - } else { 77 77 - this.props.experimentActions.start(); 78 78 - } 79 79 - } 80 80 - 81 81 - handleCloseInputCollect(subject: string, group: string, session: number) { 82 82 - this.props.experimentActions.setSubject(subject); 83 83 - this.props.experimentActions.setGroup(group); 84 84 - // error here 85 85 - this.props.experimentActions.setSession(parseFloat(session)); 86 86 - this.setState({ isInputCollectOpen: false }); 87 87 - } 88 88 - 89 89 - insertLabJsCallback() { 90 90 - let injectionFunction = () => null; 91 91 - if (this.props.isEEGEnabled) { 92 92 - injectionFunction = this.props.deviceType === 'MUSE' ? injectMuseMarker : injectEmotivMarker; 93 93 - } 94 94 - return injectionFunction; 95 95 - } 96 96 - 97 97 - handleImages() { 98 98 - return getImages(this.props.params); 99 99 - } 100 100 - 101 101 - renderCleanButton() { 102 102 - if (this.props.session > 1 && this.props.isEEGEnabled) { 103 103 - return ( 104 104 - <Grid.Column> 105 105 - <Link to='/clean'> 106 106 - <Button fluid secondary> 107 107 - Clean Data 108 108 - </Button> 109 109 - </Link> 110 110 - </Grid.Column> 111 111 - ); 112 112 - } 113 113 - } 114 114 - 115 115 - renderExperiment() { 116 116 - if (!this.props.isRunning) { 117 117 - return ( 118 118 - <div className={styles.mainContainer}> 119 119 - <Segment basic textAlign='left' className={styles.descriptionContainer} vertical> 120 120 - <Header as='h1'>{this.props.title}</Header> 121 121 - <Button 122 122 - basic 123 123 - circular 124 124 - size='huge' 125 125 - icon='edit' 126 126 - className={styles.closeButton} 127 127 - onClick={() => this.setState({ isInputCollectOpen: true })} 128 128 - /> 129 129 - <Segment basic className={styles.infoSegment}> 130 130 - Subject ID: <b>{this.props.subject}</b> 131 131 - </Segment> 132 132 - 133 133 - <Segment basic className={styles.infoSegment}> 134 134 - Group Name: <b>{this.props.group}</b> 135 135 - </Segment> 136 136 - 137 137 - <Segment basic className={styles.infoSegment}> 138 138 - Session Number: <b>{this.props.session}</b> 139 139 - </Segment> 140 140 - 141 141 - <Divider hidden section /> 142 142 - <Grid textAlign='center' columns='equal'> 143 143 - <Grid.Column> 144 144 - <Button 145 145 - fluid 146 146 - primary 147 147 - onClick={this.handleStartExperiment} 148 148 - disabled={!this.props.subject} 149 149 - > 150 150 - Run Experiment 151 151 - </Button> 152 152 - </Grid.Column> 153 153 - </Grid> 154 154 - </Segment> 155 155 - </div> 156 156 - ); 157 157 - } 158 158 - return ( 159 159 - <div className={styles.experimentWindow}> 160 160 - <ExperimentWindow 161 161 - settings={{ 162 162 - title: this.props.title, 163 163 - script: this.props.paradigm, 164 164 - params: this.props.params, 165 165 - eventCallback: this.insertLabJsCallback(), 166 166 - on_finish: (csv) => { 167 167 - this.props.experimentActions.stop({ data: csv }); 168 168 - }, 169 169 - }} 170 170 - /> 171 171 - </div> 172 172 - ); 173 173 - } 174 174 - 175 175 - render() { 176 176 - return ( 177 177 - <div className={styles.mainContainer} data-tid='container'> 178 178 - <Grid columns={1} divided relaxed className={styles.experimentContainer}> 179 179 - <Grid.Row centered>{this.renderExperiment()}</Grid.Row> 180 180 - </Grid> 181 181 - <InputCollect 182 182 - open={this.state.isInputCollectOpen} 183 183 - onClose={this.handleCloseInputCollect} 184 184 - onExit={() => this.setState({ isInputCollectOpen: false })} 185 185 - header='Enter Data' 186 186 - data={{ 187 187 - subject: this.props.subject, 188 188 - group: this.props.group, 189 189 - session: this.props.session, 190 190 - }} 191 191 - /> 192 192 - </div> 193 193 - ); 194 194 - } 195 195 - }

+170

app/components/CollectComponent/RunComponent.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Grid, Button, Segment, Header, Divider } from "semantic-ui-react"; 4 4 + import { Link } from "react-router-dom"; 5 5 + import styles from "../styles/common.css"; 6 6 + import InputCollect from "../InputCollect"; 7 7 + import { injectEmotivMarker } from "../../utils/eeg/emotiv"; 8 8 + import { injectMuseMarker } from "../../utils/eeg/muse"; 9 9 + import { EXPERIMENTS, DEVICES } from "../../constants/constants"; 10 10 + import { ExperimentWindow } from "../../utils/labjs"; 11 11 + import { checkFileExists, getImages } from "../../utils/filesystem/storage"; 12 12 + import { MainTimeline, Trial, ExperimentParameters } from "../../constants/interfaces"; 13 13 + 14 14 + import { remote } from "electron"; 15 15 + 16 16 + const { 17 17 + dialog 18 18 + } = remote; 19 19 + 20 20 + interface Props { 21 21 + type: EXPERIMENTS | null | undefined; 22 22 + title: string; 23 23 + isRunning: boolean; 24 24 + params: ExperimentParameters; 25 25 + mainTimeline: MainTimeline; 26 26 + trials: { 27 27 + [key: string]: Trial; 28 28 + }; 29 29 + timelines: {}; 30 30 + subject: string; 31 31 + group: string; 32 32 + session: number; 33 33 + deviceType: DEVICES; 34 34 + isEEGEnabled: boolean; 35 35 + experimentActions: Object; 36 36 + } 37 37 + 38 38 + interface State { 39 39 + isInputCollectOpen: boolean; 40 40 + } 41 41 + 42 42 + export default class Run extends Component<Props, State> { 43 43 + 44 44 + // insertLabJsCallback: () => void; 45 45 + // handleCloseInputCollect: (string, string, number) => void; 46 46 + // handleClean: () => void; 47 47 + constructor(props: Props) { 48 48 + super(props); 49 49 + this.state = { 50 50 + isInputCollectOpen: props.subject.length === 0 51 51 + }; 52 52 + this.handleStartExperiment = this.handleStartExperiment.bind(this); 53 53 + this.insertLabJsCallback = this.insertLabJsCallback.bind(this); 54 54 + this.handleCloseInputCollect = this.handleCloseInputCollect.bind(this); 55 55 + } 56 56 + 57 57 + componentDidMount() { 58 58 + if (this.props.mainTimeline.length <= 0) { 59 59 + this.props.experimentActions.loadDefaultTimeline(); 60 60 + } 61 61 + } 62 62 + 63 63 + handleStartExperiment() { 64 64 + const filename = `${this.props.subject}-${this.props.group}-${this.props.session}-behavior.csv`; 65 65 + const { 66 66 + subject, 67 67 + title 68 68 + } = this.props; 69 69 + const fileExists = checkFileExists(title, subject, filename); 70 70 + if (fileExists) { 71 71 + const options = { 72 72 + buttons: ['No', 'Yes'], 73 73 + message: 'You already have a file with the same name. If you continue the experiment, the current file will be deleted. Do you really want to overwrite the data?' 74 74 + }; 75 75 + const response = dialog.showMessageBox(options); 76 76 + if (response === 1) { 77 77 + this.props.experimentActions.start(); 78 78 + } 79 79 + } else { 80 80 + this.props.experimentActions.start(); 81 81 + } 82 82 + } 83 83 + 84 84 + handleCloseInputCollect(subject: string, group: string, session: number) { 85 85 + this.props.experimentActions.setSubject(subject); 86 86 + this.props.experimentActions.setGroup(group); 87 87 + // error here 88 88 + this.props.experimentActions.setSession(parseFloat(session)); 89 89 + this.setState({ isInputCollectOpen: false }); 90 90 + } 91 91 + 92 92 + insertLabJsCallback() { 93 93 + let injectionFunction = () => null; 94 94 + if (this.props.isEEGEnabled) { 95 95 + injectionFunction = this.props.deviceType === 'MUSE' ? injectMuseMarker : injectEmotivMarker; 96 96 + } 97 97 + return injectionFunction; 98 98 + } 99 99 + 100 100 + handleImages() { 101 101 + return getImages(this.props.params); 102 102 + } 103 103 + 104 104 + renderCleanButton() { 105 105 + if (this.props.session > 1 && this.props.isEEGEnabled) { 106 106 + return <Grid.Column> 107 107 + <Link to='/clean'> 108 108 + <Button fluid secondary> 109 109 + Clean Data 110 110 + </Button> 111 111 + </Link> 112 112 + </Grid.Column>; 113 113 + } 114 114 + } 115 115 + 116 116 + renderExperiment() { 117 117 + if (!this.props.isRunning) { 118 118 + return <div className={styles.mainContainer}> 119 119 + <Segment basic textAlign='left' className={styles.descriptionContainer} vertical> 120 120 + <Header as='h1'>{this.props.title}</Header> 121 121 + <Button basic circular size='huge' icon='edit' className={styles.closeButton} onClick={() => this.setState({ isInputCollectOpen: true })} /> 122 122 + <Segment basic className={styles.infoSegment}> 123 123 + Subject ID: <b>{this.props.subject}</b> 124 124 + </Segment> 125 125 + 126 126 + <Segment basic className={styles.infoSegment}> 127 127 + Group Name: <b>{this.props.group}</b> 128 128 + </Segment> 129 129 + 130 130 + <Segment basic className={styles.infoSegment}> 131 131 + Session Number: <b>{this.props.session}</b> 132 132 + </Segment> 133 133 + 134 134 + <Divider hidden section /> 135 135 + <Grid textAlign='center' columns='equal'> 136 136 + <Grid.Column> 137 137 + <Button fluid primary onClick={this.handleStartExperiment} disabled={!this.props.subject}> 138 138 + Run Experiment 139 139 + </Button> 140 140 + </Grid.Column> 141 141 + </Grid> 142 142 + </Segment> 143 143 + </div>; 144 144 + } 145 145 + return <div className={styles.experimentWindow}> 146 146 + <ExperimentWindow settings={{ 147 147 + title: this.props.title, 148 148 + script: this.props.paradigm, 149 149 + params: this.props.params, 150 150 + eventCallback: this.insertLabJsCallback(), 151 151 + on_finish: csv => { 152 152 + this.props.experimentActions.stop({ data: csv }); 153 153 + } 154 154 + }} /> 155 155 + </div>; 156 156 + } 157 157 + 158 158 + render() { 159 159 + return <div className={styles.mainContainer} data-tid='container'> 160 160 + <Grid columns={1} divided relaxed className={styles.experimentContainer}> 161 161 + <Grid.Row centered>{this.renderExperiment()}</Grid.Row> 162 162 + </Grid> 163 163 + <InputCollect open={this.state.isInputCollectOpen} onClose={this.handleCloseInputCollect} onExit={() => this.setState({ isInputCollectOpen: false })} header='Enter Data' data={{ 164 164 + subject: this.props.subject, 165 165 + group: this.props.group, 166 166 + session: this.props.session 167 167 + }} /> 168 168 + </div>; 169 169 + } 170 170 + }

-140

app/components/CollectComponent/index.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { isNil } from 'lodash'; 4 4 - import { 5 5 - EXPERIMENTS, 6 6 - DEVICES, 7 7 - CONNECTION_STATUS, 8 8 - DEVICE_AVAILABILITY, 9 9 - } from '../../constants/constants'; 10 10 - import { MainTimeline, Trial, ExperimentParameters } from '../../constants/interfaces'; 11 11 - import PreTestComponent from './PreTestComponent'; 12 12 - import ConnectModal from './ConnectModal'; 13 13 - import RunComponent from './RunComponent'; 14 14 - 15 15 - interface Props { 16 16 - history: Object; 17 17 - experimentActions: Object; 18 18 - connectedDevice: Object; 19 19 - signalQualityObservable: ?any; 20 20 - deviceType: DEVICES; 21 21 - deviceAvailability: DEVICE_AVAILABILITY; 22 22 - connectionStatus: CONNECTION_STATUS; 23 23 - deviceActions: Object; 24 24 - availableDevices: Array<any>; 25 25 - type: ?EXPERIMENTS; 26 26 - isRunning: boolean; 27 27 - params: ?ExperimentParameters; 28 28 - mainTimeline: ?MainTimeline; 29 29 - trials: ?{ [string]: Trial }; 30 30 - timelines: ?{}; 31 31 - subject: string; 32 32 - group: string; 33 33 - session: number; 34 34 - isEEGEnabled: boolean; 35 35 - } 36 36 - 37 37 - interface State { 38 38 - isConnectModalOpen: boolean; 39 39 - isRunComponentOpen: boolean; 40 40 - } 41 41 - 42 42 - export default class Collect extends Component<Props, State> { 43 43 - // props: Props; 44 44 - // state: State; 45 45 - // handleStartConnect: () => void; 46 46 - // handleConnectModalClose: () => void; 47 47 - // handleRunComponentOpen: () => void; 48 48 - // handleRunComponentClose: () => void; 49 49 - 50 50 - constructor(props: Props) { 51 51 - super(props); 52 52 - this.state = { 53 53 - isConnectModalOpen: false, 54 54 - isRunComponentOpen: !props.isEEGEnabled, 55 55 - }; 56 56 - this.handleStartConnect = this.handleStartConnect.bind(this); 57 57 - this.handleConnectModalClose = this.handleConnectModalClose.bind(this); 58 58 - this.handleRunComponentOpen = this.handleRunComponentOpen.bind(this); 59 59 - this.handleRunComponentClose = this.handleRunComponentClose.bind(this); 60 60 - if (isNil(props.params)) { 61 61 - props.experimentActions.loadDefaultTimeline(); 62 62 - } 63 63 - } 64 64 - 65 65 - componentDidMount() { 66 66 - if (this.props.connectionStatus !== CONNECTION_STATUS.CONNECTED && this.props.isEEGEnabled) { 67 67 - this.handleStartConnect(); 68 68 - } 69 69 - } 70 70 - 71 71 - componentDidUpdate = (prevProps: Props, prevState: State) => { 72 72 - if ( 73 73 - this.props.connectionStatus === CONNECTION_STATUS.CONNECTED && 74 74 - prevState.isConnectModalOpen 75 75 - ) { 76 76 - this.setState({ isConnectModalOpen: false }); 77 77 - } 78 78 - }; 79 79 - 80 80 - handleStartConnect() { 81 81 - this.setState({ isConnectModalOpen: true }); 82 82 - this.props.deviceActions.setDeviceAvailability(DEVICE_AVAILABILITY.SEARCHING); 83 83 - } 84 84 - 85 85 - handleConnectModalClose() { 86 86 - this.setState({ isConnectModalOpen: false }); 87 87 - } 88 88 - 89 89 - handleRunComponentOpen() { 90 90 - this.setState({ isRunComponentOpen: true }); 91 91 - } 92 92 - 93 93 - handleRunComponentClose() { 94 94 - this.setState({ isRunComponentOpen: false }); 95 95 - } 96 96 - 97 97 - render() { 98 98 - if (this.state.isRunComponentOpen) { 99 99 - return <RunComponent {...this.props} closeRunComponent={this.handleRunComponentClose} />; 100 100 - } 101 101 - return ( 102 102 - <> 103 103 - <ConnectModal 104 104 - history={this.props.history} 105 105 - open={this.state.isConnectModalOpen} 106 106 - onClose={this.handleConnectModalClose} 107 107 - connectedDevice={this.props.connectedDevice} 108 108 - signalQualityObservable={this.props.signalQualityObservable} 109 109 - deviceType={this.props.deviceType} 110 110 - deviceAvailability={this.props.deviceAvailability} 111 111 - connectionStatus={this.props.connectionStatus} 112 112 - deviceActions={this.props.deviceActions} 113 113 - availableDevices={this.props.availableDevices} 114 114 - /> 115 115 - <PreTestComponent 116 116 - connectedDevice={this.props.connectedDevice} 117 117 - signalQualityObservable={this.props.signalQualityObservable} 118 118 - deviceType={this.props.deviceType} 119 119 - deviceAvailability={this.props.deviceAvailability} 120 120 - connectionStatus={this.props.connectionStatus} 121 121 - deviceActions={this.props.deviceActions} 122 122 - experimentActions={this.props.experimentActions} 123 123 - availableDevices={this.props.availableDevices} 124 124 - type={this.props.type} 125 125 - paradigm={this.props.paradigm} 126 126 - isRunning={this.props.isRunning} 127 127 - params={this.props.params} 128 128 - mainTimeline={this.props.mainTimeline} 129 129 - trials={this.props.trials} 130 130 - timelines={this.props.timelines} 131 131 - subject={this.props.subject} 132 132 - group={this.props.group} 133 133 - session={this.props.session} 134 134 - openRunComponent={this.handleRunComponentOpen} 135 135 - title={this.props.title} 136 136 - /> 137 137 - </> 138 138 - ); 139 139 - } 140 140 - }

+97

app/components/CollectComponent/index.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { isNil } from "lodash"; 4 4 + import { EXPERIMENTS, DEVICES, CONNECTION_STATUS, DEVICE_AVAILABILITY } from "../../constants/constants"; 5 5 + import { MainTimeline, Trial, ExperimentParameters } from "../../constants/interfaces"; 6 6 + import PreTestComponent from "./PreTestComponent"; 7 7 + import ConnectModal from "./ConnectModal"; 8 8 + import RunComponent from "./RunComponent"; 9 9 + 10 10 + interface Props { 11 11 + history: Object; 12 12 + experimentActions: Object; 13 13 + connectedDevice: Object; 14 14 + signalQualityObservable: any | null | undefined; 15 15 + deviceType: DEVICES; 16 16 + deviceAvailability: DEVICE_AVAILABILITY; 17 17 + connectionStatus: CONNECTION_STATUS; 18 18 + deviceActions: Object; 19 19 + availableDevices: Array<any>; 20 20 + type: EXPERIMENTS | null | undefined; 21 21 + isRunning: boolean; 22 22 + params: ExperimentParameters | null | undefined; 23 23 + mainTimeline: MainTimeline | null | undefined; 24 24 + trials: { 25 25 + [key: string]: Trial; 26 26 + } | null | undefined; 27 27 + timelines: {} | null | undefined; 28 28 + subject: string; 29 29 + group: string; 30 30 + session: number; 31 31 + isEEGEnabled: boolean; 32 32 + } 33 33 + 34 34 + interface State { 35 35 + isConnectModalOpen: boolean; 36 36 + isRunComponentOpen: boolean; 37 37 + } 38 38 + 39 39 + export default class Collect extends Component<Props, State> { 40 40 + 41 41 + // handleConnectModalClose: () => void; 42 42 + // handleRunComponentOpen: () => void; 43 43 + // handleRunComponentClose: () => void; 44 44 + constructor(props: Props) { 45 45 + super(props); 46 46 + this.state = { 47 47 + isConnectModalOpen: false, 48 48 + isRunComponentOpen: !props.isEEGEnabled 49 49 + }; 50 50 + this.handleStartConnect = this.handleStartConnect.bind(this); 51 51 + this.handleConnectModalClose = this.handleConnectModalClose.bind(this); 52 52 + this.handleRunComponentOpen = this.handleRunComponentOpen.bind(this); 53 53 + this.handleRunComponentClose = this.handleRunComponentClose.bind(this); 54 54 + if (isNil(props.params)) { 55 55 + props.experimentActions.loadDefaultTimeline(); 56 56 + } 57 57 + } 58 58 + 59 59 + componentDidMount() { 60 60 + if (this.props.connectionStatus !== CONNECTION_STATUS.CONNECTED && this.props.isEEGEnabled) { 61 61 + this.handleStartConnect(); 62 62 + } 63 63 + } 64 64 + 65 65 + componentDidUpdate = (prevProps: Props, prevState: State) => { 66 66 + if (this.props.connectionStatus === CONNECTION_STATUS.CONNECTED && prevState.isConnectModalOpen) { 67 67 + this.setState({ isConnectModalOpen: false }); 68 68 + } 69 69 + }; 70 70 + 71 71 + handleStartConnect() { 72 72 + this.setState({ isConnectModalOpen: true }); 73 73 + this.props.deviceActions.setDeviceAvailability(DEVICE_AVAILABILITY.SEARCHING); 74 74 + } 75 75 + 76 76 + handleConnectModalClose() { 77 77 + this.setState({ isConnectModalOpen: false }); 78 78 + } 79 79 + 80 80 + handleRunComponentOpen() { 81 81 + this.setState({ isRunComponentOpen: true }); 82 82 + } 83 83 + 84 84 + handleRunComponentClose() { 85 85 + this.setState({ isRunComponentOpen: false }); 86 86 + } 87 87 + 88 88 + render() { 89 89 + if (this.state.isRunComponentOpen) { 90 90 + return <RunComponent {...this.props} closeRunComponent={this.handleRunComponentClose} />; 91 91 + } 92 92 + return <> 93 93 + <ConnectModal history={this.props.history} open={this.state.isConnectModalOpen} onClose={this.handleConnectModalClose} connectedDevice={this.props.connectedDevice} signalQualityObservable={this.props.signalQualityObservable} deviceType={this.props.deviceType} deviceAvailability={this.props.deviceAvailability} connectionStatus={this.props.connectionStatus} deviceActions={this.props.deviceActions} availableDevices={this.props.availableDevices} /> 94 94 + <PreTestComponent connectedDevice={this.props.connectedDevice} signalQualityObservable={this.props.signalQualityObservable} deviceType={this.props.deviceType} deviceAvailability={this.props.deviceAvailability} connectionStatus={this.props.connectionStatus} deviceActions={this.props.deviceActions} experimentActions={this.props.experimentActions} availableDevices={this.props.availableDevices} type={this.props.type} paradigm={this.props.paradigm} isRunning={this.props.isRunning} params={this.props.params} mainTimeline={this.props.mainTimeline} trials={this.props.trials} timelines={this.props.timelines} subject={this.props.subject} group={this.props.group} session={this.props.session} openRunComponent={this.handleRunComponentOpen} title={this.props.title} /> 95 95 + </>; 96 96 + } 97 97 + }

-636

app/components/DesignComponent/CustomDesignComponent.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { Grid, Button, Segment, Header, Form, Checkbox, Image, Table } from 'semantic-ui-react'; 4 4 - import { isNil } from 'lodash'; 5 5 - import styles from '../styles/common.css'; 6 6 - import { EXPERIMENTS, SCREENS } from '../../constants/constants'; 7 7 - import { 8 8 - MainTimeline, 9 9 - Trial, 10 10 - ExperimentParameters, 11 11 - ExperimentDescription, 12 12 - } from '../../constants/interfaces'; 13 13 - import SecondaryNavComponent from '../SecondaryNavComponent'; 14 14 - import PreviewExperimentComponent from '../PreviewExperimentComponent'; 15 15 - import StimuliDesignColumn from './StimuliDesignColumn'; 16 16 - import ParamSlider from './ParamSlider'; 17 17 - import PreviewButton from '../PreviewButtonComponent'; 18 18 - import researchQuestionImage from '../../assets/common/ResearchQuestion2.png'; 19 19 - import methodsImage from '../../assets/common/Methods2.png'; 20 20 - import hypothesisImage from '../../assets/common/Hypothesis2.png'; 21 21 - import { loadProtocol } from '../../utils/labjs/functions'; 22 22 - import { readImages } from '../../utils/filesystem/storage'; 23 23 - import StimuliRow from './StimuliRow'; 24 24 - 25 25 - const CUSTOM_STEPS = { 26 26 - OVERVIEW: 'OVERVIEW', 27 27 - CONDITIONS: 'CONDITIONS', 28 28 - TRIALS: 'TRIALS', 29 29 - PARAMETERS: 'PARAMETERS', 30 30 - INSTRUCTIONS: 'INSTRUCTIONS', 31 31 - PREVIEW: 'PREVIEW', 32 32 - }; 33 33 - 34 34 - const FIELDS = { 35 35 - QUESTION: 'Research Question', 36 36 - HYPOTHESIS: 'Hypothesis', 37 37 - METHODS: 'Methods', 38 38 - INTRO: 'Experiment Instructions', 39 39 - HELP: 'Instructions for the task screen', 40 40 - }; 41 41 - 42 42 - interface Props { 43 43 - history: Object; 44 44 - type: ?EXPERIMENTS; 45 45 - title: string; 46 46 - params: ExperimentParameters; 47 47 - mainTimeline: MainTimeline; 48 48 - trials: { [string]: Trial }; 49 49 - timelines: {}; 50 50 - experimentActions: Object; 51 51 - isEEGEnabled: boolean; 52 52 - description: ExperimentDescription; 53 53 - } 54 54 - 55 55 - interface State { 56 56 - activeStep: string; 57 57 - isPreviewing: boolean; 58 58 - description: ExperimentDescription; 59 59 - params: ExperimentParameters; 60 60 - saved: boolean; 61 61 - } 62 62 - 63 63 - export default class CustomDesign extends Component<Props, State> { 64 64 - // props: Props; 65 65 - // state: State; 66 66 - // handleStepClick: (string) => void; 67 67 - // handleStartExperiment: (Object) => void; 68 68 - // handlePreview: () => void; 69 69 - // handleSaveParams: () => void; 70 70 - // handleProgressBar: (Object, Object) => void; 71 71 - 72 72 - constructor(props: Props) { 73 73 - super(props); 74 74 - this.state = { 75 75 - activeStep: CUSTOM_STEPS.OVERVIEW, 76 76 - isPreviewing: true, 77 77 - description: props.description, 78 78 - params: props.params, 79 79 - saved: false, 80 80 - }; 81 81 - this.handleStepClick = this.handleStepClick.bind(this); 82 82 - this.handleStartExperiment = this.handleStartExperiment.bind(this); 83 83 - this.handlePreview = this.handlePreview.bind(this); 84 84 - this.handleSaveParams = this.handleSaveParams.bind(this); 85 85 - this.handleProgressBar = this.handleProgressBar.bind(this); 86 86 - this.handleEEGEnabled = this.handleEEGEnabled.bind(this); 87 87 - if (isNil(props.params)) { 88 88 - props.experimentActions.loadDefaultTimeline(); 89 89 - } 90 90 - this.endPreview = this.endPreview.bind(this); 91 91 - } 92 92 - 93 93 - endPreview() { 94 94 - // this.setState({ isPreviewing: false }); 95 95 - } 96 96 - 97 97 - handleStepClick(step: string) { 98 98 - this.handleSaveParams(); 99 99 - this.setState({ activeStep: step }); 100 100 - } 101 101 - 102 102 - handleProgressBar(event: Object, data: Object) { 103 103 - this.setState({ 104 104 - params: { ...this.state.params, showProgessBar: data.checked }, 105 105 - }); 106 106 - } 107 107 - 108 108 - handleEEGEnabled(event: Object, data: Object) { 109 109 - this.props.experimentActions.setEEGEnabled(data.checked); 110 110 - } 111 111 - 112 112 - handleStartExperiment() { 113 113 - this.props.history.push(SCREENS.COLLECT.route); 114 114 - } 115 115 - 116 116 - handlePreview(e) { 117 117 - e.target.blur(); 118 118 - this.setState({ isPreviewing: !this.state.isPreviewing }); 119 119 - } 120 120 - 121 121 - handleSaveParams() { 122 122 - this.props.experimentActions.setParams(this.state.params); 123 123 - this.props.experimentActions.setDescription(this.state.description); 124 124 - this.props.experimentActions.saveWorkspace(); 125 125 - this.setState({ saved: true }); 126 126 - } 127 127 - 128 128 - renderSectionContent() { 129 129 - const stimi = [ 130 130 - { name: 'stimulus1', number: 1 }, 131 131 - { name: 'stimulus2', number: 2 }, 132 132 - { name: 'stimulus3', number: 3 }, 133 133 - { name: 'stimulus4', number: 4 }, 134 134 - ]; 135 135 - switch (this.state.activeStep) { 136 136 - case CUSTOM_STEPS.OVERVIEW: 137 137 - default: 138 138 - return ( 139 139 - <Grid stretched relaxed padded columns='equal' className={styles.contentGrid}> 140 140 - <Grid.Column stretched verticalAlign='middle'> 141 141 - <Image 142 142 - as={Segment} 143 143 - basic 144 144 - centered 145 145 - src={researchQuestionImage} 146 146 - className={styles.overviewImage} 147 147 - /> 148 148 - <Form> 149 149 - <Form.TextArea 150 150 - autoHeight 151 151 - style={{ minHeight: 100, maxHeight: 400 }} 152 152 - label={FIELDS.QUESTION} 153 153 - value={this.state.description.question} 154 154 - placeholder='Explain your research question here.' 155 155 - onChange={(event, data) => 156 156 - this.setState({ 157 157 - description: { 158 158 - ...this.state.description, 159 159 - question: data.value, 160 160 - }, 161 161 - saved: false, 162 162 - }) 163 163 - } 164 164 - /> 165 165 - </Form> 166 166 - </Grid.Column> 167 167 - <Grid.Column stretched verticalAlign='middle'> 168 168 - <Image 169 169 - as={Segment} 170 170 - basic 171 171 - centered 172 172 - src={hypothesisImage} 173 173 - className={styles.overviewImage} 174 174 - /> 175 175 - <Form> 176 176 - <Form.TextArea 177 177 - autoHeight 178 178 - style={{ minHeight: 100, maxHeight: 400 }} 179 179 - label={FIELDS.HYPOTHESIS} 180 180 - value={this.state.description.hypothesis} 181 181 - placeholder='Describe your hypothesis here.' 182 182 - onChange={(event, data) => 183 183 - this.setState({ 184 184 - description: { 185 185 - ...this.state.description, 186 186 - hypothesis: data.value, 187 187 - }, 188 188 - saved: false, 189 189 - }) 190 190 - } 191 191 - /> 192 192 - </Form> 193 193 - </Grid.Column> 194 194 - <Grid.Column verticalAlign='middle'> 195 195 - <Image 196 196 - as={Segment} 197 197 - basic 198 198 - centered 199 199 - src={methodsImage} 200 200 - className={styles.overviewImage} 201 201 - /> 202 202 - <Form> 203 203 - <Form.TextArea 204 204 - autoHeight 205 205 - style={{ minHeight: 100, maxHeight: 400 }} 206 206 - label={FIELDS.METHODS} 207 207 - value={this.state.description.methods} 208 208 - placeholder='Explain how you will design your experiment to answer the question here.' 209 209 - onChange={(event, data) => 210 210 - this.setState({ 211 211 - description: { 212 212 - ...this.state.description, 213 213 - methods: data.value, 214 214 - }, 215 215 - saved: false, 216 216 - }) 217 217 - } 218 218 - /> 219 219 - </Form> 220 220 - </Grid.Column> 221 221 - </Grid> 222 222 - ); 223 223 - 224 224 - case CUSTOM_STEPS.CONDITIONS: 225 225 - return ( 226 226 - <Grid> 227 227 - <Segment basic> 228 228 - <Header as='h1'>Conditions</Header> 229 229 - <p> 230 230 - Select the folder with images for each condition and choose the correct response. 231 231 - You can upload image files with the following extensions: ".png", ".jpg", ".jpeg". 232 232 - Make sure when you preview your experiment that the resolution is high enough. You 233 233 - can resize or compress your images in an image editing program or on one of the 234 234 - websites online. 235 235 - </p> 236 236 - </Segment> 237 237 - 238 238 - <Table basic='very'> 239 239 - <Table.Header> 240 240 - <Table.Row className={styles.conditionHeaderRow}> 241 241 - <Table.HeaderCell className={styles.conditionHeaderRowName}> 242 242 - Condition 243 243 - </Table.HeaderCell> 244 244 - <Table.HeaderCell>Default Key Response</Table.HeaderCell> 245 245 - <Table.HeaderCell>Condition Folder</Table.HeaderCell> 246 246 - </Table.Row> 247 247 - </Table.Header> 248 248 - 249 249 - <Table.Body className={styles.experimentTable}> 250 250 - {stimi.map(({ name, number }) => ( 251 251 - <StimuliDesignColumn 252 252 - key={number} 253 253 - num={number} 254 254 - {...this.state.params[name]} 255 255 - numberImages={ 256 256 - this.state.params.stimuli.filter((trial) => trial.type === number).length 257 257 - } 258 258 - onChange={async (key, data, changedName) => { 259 259 - await this.setState({ 260 260 - params: { 261 261 - ...this.state.params, 262 262 - [changedName]: { ...this.state.params[changedName], [key]: data }, 263 263 - }, 264 264 - }); 265 265 - let newStimuli = []; 266 266 - await stimi.map((stimul) => { 267 267 - let dirStimuli = []; 268 268 - const dir = this.state.params[stimul.name].dir; 269 269 - if (dir && typeof dir !== 'undefined' && dir !== '') { 270 270 - dirStimuli = readImages(dir).map((i) => ({ 271 271 - dir: dir, 272 272 - filename: i, 273 273 - name: i, 274 274 - condition: this.state.params[stimul.name].title, 275 275 - response: this.state.params[stimul.name].response, 276 276 - phase: 'main', 277 277 - type: stimul.number, 278 278 - })); 279 279 - } 280 280 - if (dirStimuli.length) dirStimuli[0].phase = 'practice'; 281 281 - newStimuli = newStimuli.concat(...dirStimuli); 282 282 - }); 283 283 - this.setState({ 284 284 - params: { 285 285 - ...this.state.params, 286 286 - stimuli: [...newStimuli], 287 287 - nbTrials: newStimuli.filter((t) => t.phase === 'main').length, 288 288 - nbPracticeTrials: newStimuli.filter((t) => t.phase === 'practice').length, 289 289 - }, 290 290 - saved: false, 291 291 - }); 292 292 - }} 293 293 - /> 294 294 - ))} 295 295 - </Table.Body> 296 296 - </Table> 297 297 - </Grid> 298 298 - ); 299 299 - 300 300 - case CUSTOM_STEPS.TRIALS: 301 301 - return ( 302 302 - <Grid> 303 303 - <div className={styles.trialsHeader}> 304 304 - <div> 305 305 - <Header as='h1'>Trials</Header> 306 306 - <p>Edit the correct key response and type of each trial.</p> 307 307 - </div> 308 308 - 309 309 - <div> 310 310 - <Form style={{ alignSelf: 'flex-end' }}> 311 311 - <Form.Group className={styles.trialsTopInfoBar}> 312 312 - <Form.Select 313 313 - fluid 314 314 - selection 315 315 - label='Order' 316 316 - value={this.state.params.randomize} 317 317 - onChange={(event, data) => 318 318 - this.setState({ 319 319 - params: { 320 320 - ...this.state.params, 321 321 - randomize: data.value, 322 322 - }, 323 323 - saved: false, 324 324 - }) 325 325 - } 326 326 - placeholder='Response' 327 327 - options={[ 328 328 - { key: 'random', text: 'Random', value: 'random' }, 329 329 - { key: 'sequential', text: 'Sequential', value: 'sequential' }, 330 330 - ]} 331 331 - /> 332 332 - <Form.Input 333 333 - label='Total experimental trials' 334 334 - type='number' 335 335 - fluid 336 336 - value={this.state.params.nbTrials} 337 337 - onChange={(event, data) => 338 338 - this.setState({ 339 339 - params: { 340 340 - ...this.state.params, 341 341 - nbTrials: parseInt(data.value), 342 342 - }, 343 343 - saved: false, 344 344 - }) 345 345 - } 346 346 - /> 347 347 - <Form.Input 348 348 - label='Total practice trials' 349 349 - type='number' 350 350 - fluid 351 351 - value={this.state.params.nbPracticeTrials} 352 352 - onChange={(event, data) => 353 353 - this.setState({ 354 354 - params: { 355 355 - ...this.state.params, 356 356 - nbPracticeTrials: parseInt(data.value), 357 357 - }, 358 358 - saved: false, 359 359 - }) 360 360 - } 361 361 - /> 362 362 - </Form.Group> 363 363 - </Form> 364 364 - </div> 365 365 - </div> 366 366 - 367 367 - <Table basic='very'> 368 368 - <Table.Header> 369 369 - <Table.Row className={styles.trialsHeaderRow}> 370 370 - <Table.HeaderCell className={styles.conditionHeaderRowName}> 371 371 - Name 372 372 - </Table.HeaderCell> 373 373 - <Table.HeaderCell>Condition</Table.HeaderCell> 374 374 - <Table.HeaderCell>Correct Key Response</Table.HeaderCell> 375 375 - <Table.HeaderCell>Trial Type</Table.HeaderCell> 376 376 - </Table.Row> 377 377 - </Table.Header> 378 378 - <Table.Body className={styles.trialsTable}> 379 379 - {this.state.params.stimuli && 380 380 - this.state.params.stimuli.map((e, num) => ( 381 381 - <StimuliRow 382 382 - key={num} 383 383 - num={num} 384 384 - conditions={[1, 2, 3, 4].map((n) => this.state.params[`stimulus${n}`].title)} 385 385 - {...e} 386 386 - onDelete={(num) => { 387 387 - const stimuli = this.state.params.stimuli; 388 388 - stimuli.splice(num, 1); 389 389 - const nbPracticeTrials = stimuli.filter((s) => s.phase === 'practice') 390 390 - .length; 391 391 - const nbTrials = stimuli.filter((s) => s.phase === 'main').length; 392 392 - this.setState({ 393 393 - params: { 394 394 - ...this.state.params, 395 395 - stimuli: [...stimuli], 396 396 - nbPracticeTrials, 397 397 - nbTrials, 398 398 - }, 399 399 - saved: false, 400 400 - }); 401 401 - }} 402 402 - onChange={(num, key, data) => { 403 403 - const stimuli = this.state.params.stimuli; 404 404 - stimuli[num][key] = data; 405 405 - let nbPracticeTrials = this.state.params.nbPracticeTrials; 406 406 - let nbTrials = this.state.params.nbTrials; 407 407 - if (key === 'phase') { 408 408 - nbPracticeTrials = stimuli.filter((s) => s.phase === 'practice').length; 409 409 - nbTrials = stimuli.filter((s) => s.phase === 'main').length; 410 410 - } 411 411 - this.setState({ 412 412 - params: { 413 413 - ...this.state.params, 414 414 - stimuli: [...stimuli], 415 415 - nbPracticeTrials, 416 416 - nbTrials, 417 417 - }, 418 418 - saved: false, 419 419 - }); 420 420 - }} 421 421 - /> 422 422 - ))} 423 423 - </Table.Body> 424 424 - </Table> 425 425 - </Grid> 426 426 - ); 427 427 - 428 428 - case CUSTOM_STEPS.PARAMETERS: 429 429 - return ( 430 430 - <Grid> 431 431 - <Grid.Column width={8} style={{ display: 'grid', alignContent: 'space-between' }}> 432 432 - <Segment basic> 433 433 - <Header as='h1'>Inter-trial interval</Header> 434 434 - <p> 435 435 - Select the inter-trial interval duration. This is the amount of time between 436 436 - trials measured from the end of one trial to the start of the next one. 437 437 - </p> 438 438 - </Segment> 439 439 - <Segment basic style={{ marginTop: '100px' }}> 440 440 - <ParamSlider 441 441 - label='ITI Duration (seconds)' 442 442 - value={this.state.params.iti} 443 443 - marks={{ 444 444 - 1: '0.25', 445 445 - 2: '0.5', 446 446 - 3: '0.75', 447 447 - 4: '1', 448 448 - 5: '1.25', 449 449 - 6: '1.5', 450 450 - 7: '1.75', 451 451 - 8: '2', 452 452 - }} 453 453 - ms_conversion='250' 454 454 - onChange={(value) => 455 455 - this.setState({ 456 456 - params: { ...this.state.params, iti: value }, 457 457 - saved: false, 458 458 - }) 459 459 - } 460 460 - /> 461 461 - </Segment> 462 462 - </Grid.Column> 463 463 - 464 464 - <Grid.Column width={8} style={{ display: 'grid', alignContent: 'space-between' }}> 465 465 - <Segment basic> 466 466 - <Header as='h1'>Image duration</Header> 467 467 - <p> 468 468 - Select the time of presentation or make it self-paced - present the image until 469 469 - participants respond. 470 470 - </p> 471 471 - </Segment> 472 472 - <Segment basic> 473 473 - <Checkbox 474 474 - defaultChecked={this.state.params.selfPaced} 475 475 - label='Self-paced data collection' 476 476 - onChange={(value) => 477 477 - this.setState({ 478 478 - params: { ...this.state.params, selfPaced: !this.state.params.selfPaced }, 479 479 - saved: false, 480 480 - }) 481 481 - } 482 482 - /> 483 483 - </Segment> 484 484 - 485 485 - {!this.state.params.selfPaced ? ( 486 486 - <Segment basic> 487 487 - <ParamSlider 488 488 - label='Presentation time (seconds)' 489 489 - value={this.state.params.presentationTime} 490 490 - marks={{ 491 491 - 1: '0.25', 492 492 - 2: '0.5', 493 493 - 3: '0.75', 494 494 - 4: '1', 495 495 - 5: '1.25', 496 496 - 6: '1.5', 497 497 - 7: '1.75', 498 498 - 8: '2', 499 499 - }} 500 500 - ms_conversion='250' 501 501 - onChange={(value) => 502 502 - this.setState({ 503 503 - params: { ...this.state.params, presentationTime: value }, 504 504 - saved: false, 505 505 - }) 506 506 - } 507 507 - /> 508 508 - </Segment> 509 509 - ) : ( 510 510 - <Segment basic style={{ marginBottom: '85px' }} /> 511 511 - )} 512 512 - </Grid.Column> 513 513 - </Grid> 514 514 - ); 515 515 - 516 516 - case CUSTOM_STEPS.INSTRUCTIONS: 517 517 - return ( 518 518 - <Grid stretched> 519 519 - <Grid.Column 520 520 - width={8} 521 521 - stretched 522 522 - style={{ display: 'grid', alignContent: 'space-between' }} 523 523 - > 524 524 - <Segment basic> 525 525 - <Header as='h1'>Experiment Instructions</Header> 526 526 - <p>Edit the instruction that will be displayed on the first screen.</p> 527 527 - <Form> 528 528 - <Form.TextArea 529 529 - autoHeight 530 530 - value={this.state.params.intro} 531 531 - placeholder="e.g., You will view a series of faces and houses. Press 1 when a face appears and 9 for a house. Press the the space bar on your keyboard to start doing the practice trials. If you want to skip the practice trials and go directly to the task, press the 'q' button on your keyboard." 532 532 - onChange={(event, data) => 533 533 - this.setState({ 534 534 - params: { ...this.state.params, intro: data.value }, 535 535 - saved: false, 536 536 - }) 537 537 - } 538 538 - /> 539 539 - </Form> 540 540 - </Segment> 541 541 - </Grid.Column> 542 542 - 543 543 - <Grid.Column 544 544 - width={8} 545 545 - stretched 546 546 - style={{ display: 'grid', alignContent: 'space-between' }} 547 547 - > 548 548 - <Segment basic> 549 549 - <Header as='h1'>Instructions for the task screen</Header> 550 550 - <p>Edit the instruction that will be displayed in the footer during the task.</p> 551 551 - <Form> 552 552 - <Form.TextArea 553 553 - autoHeight 554 554 - value={this.state.params.taskHelp} 555 555 - placeholder='e.g., Press 1 for a face and 9 for a house' 556 556 - onChange={(event, data) => 557 557 - this.setState({ 558 558 - params: { ...this.state.params, taskHelp: data.value }, 559 559 - saved: false, 560 560 - }) 561 561 - } 562 562 - /> 563 563 - </Form> 564 564 - </Segment> 565 565 - </Grid.Column> 566 566 - </Grid> 567 567 - ); 568 568 - 569 569 - case CUSTOM_STEPS.PREVIEW: 570 570 - return ( 571 571 - <Grid relaxed padded className={styles.contentGrid}> 572 572 - <Grid.Column 573 573 - stretched 574 574 - width={14} 575 575 - textAlign='right' 576 576 - verticalAlign='middle' 577 577 - className={styles.previewWindow} 578 578 - > 579 579 - <PreviewExperimentComponent 580 580 - {...loadProtocol(this.props.paradigm)} 581 581 - isPreviewing={this.state.isPreviewing} 582 582 - onEnd={this.endPreview} 583 583 - type={this.props.type} 584 584 - paradigm={this.props.paradigm} 585 585 - previewParams={this.props.params} 586 586 - title={this.props.title} 587 587 - /> 588 588 - </Grid.Column> 589 589 - 590 590 - <Grid.Column width={2} verticalAlign='top'> 591 591 - <Segment basic> 592 592 - <PreviewButton 593 593 - isPreviewing={this.state.isPreviewing} 594 594 - onClick={(e) => this.handlePreview(e)} 595 595 - /> 596 596 - </Segment> 597 597 - </Grid.Column> 598 598 - </Grid> 599 599 - ); 600 600 - } 601 601 - } 602 602 - 603 603 - render() { 604 604 - return ( 605 605 - <div className={styles.mainContainer}> 606 606 - <SecondaryNavComponent 607 607 - title='Experiment Design' 608 608 - steps={CUSTOM_STEPS} 609 609 - activeStep={this.state.activeStep} 610 610 - onStepClick={this.handleStepClick} 611 611 - enableEEGToggle={ 612 612 - <Checkbox 613 613 - toggle 614 614 - defaultChecked={this.props.isEEGEnabled} 615 615 - onChange={(event, data) => this.handleEEGEnabled(event, data)} 616 616 - className={styles.EEGToggle} 617 617 - /> 618 618 - } 619 619 - saveButton={ 620 620 - <Button 621 621 - compact 622 622 - size='small' 623 623 - secondary 624 624 - onClick={() => { 625 625 - this.handleSaveParams(); 626 626 - }} 627 627 - > 628 628 - {this.state.saved ? 'Save' : 'Save'} 629 629 - </Button> 630 630 - } 631 631 - /> 632 632 - {this.renderSectionContent()} 633 633 - </div> 634 634 - ); 635 635 - } 636 636 - }

+432

app/components/DesignComponent/CustomDesignComponent.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Grid, Button, Segment, Header, Form, Checkbox, Image, Table } from "semantic-ui-react"; 4 4 + import { isNil } from "lodash"; 5 5 + import styles from "../styles/common.css"; 6 6 + import { EXPERIMENTS, SCREENS } from "../../constants/constants"; 7 7 + import { MainTimeline, Trial, ExperimentParameters, ExperimentDescription } from "../../constants/interfaces"; 8 8 + import SecondaryNavComponent from "../SecondaryNavComponent"; 9 9 + import PreviewExperimentComponent from "../PreviewExperimentComponent"; 10 10 + import StimuliDesignColumn from "./StimuliDesignColumn"; 11 11 + import ParamSlider from "./ParamSlider"; 12 12 + import PreviewButton from "../PreviewButtonComponent"; 13 13 + import researchQuestionImage from "../../assets/common/ResearchQuestion2.png"; 14 14 + import methodsImage from "../../assets/common/Methods2.png"; 15 15 + import hypothesisImage from "../../assets/common/Hypothesis2.png"; 16 16 + import { loadProtocol } from "../../utils/labjs/functions"; 17 17 + import { readImages } from "../../utils/filesystem/storage"; 18 18 + import StimuliRow from "./StimuliRow"; 19 19 + 20 20 + const CUSTOM_STEPS = { 21 21 + OVERVIEW: 'OVERVIEW', 22 22 + CONDITIONS: 'CONDITIONS', 23 23 + TRIALS: 'TRIALS', 24 24 + PARAMETERS: 'PARAMETERS', 25 25 + INSTRUCTIONS: 'INSTRUCTIONS', 26 26 + PREVIEW: 'PREVIEW' 27 27 + }; 28 28 + 29 29 + const FIELDS = { 30 30 + QUESTION: 'Research Question', 31 31 + HYPOTHESIS: 'Hypothesis', 32 32 + METHODS: 'Methods', 33 33 + INTRO: 'Experiment Instructions', 34 34 + HELP: 'Instructions for the task screen' 35 35 + }; 36 36 + 37 37 + interface Props { 38 38 + history: Object; 39 39 + type: EXPERIMENTS | null | undefined; 40 40 + title: string; 41 41 + params: ExperimentParameters; 42 42 + mainTimeline: MainTimeline; 43 43 + trials: { 44 44 + [key: string]: Trial; 45 45 + }; 46 46 + timelines: {}; 47 47 + experimentActions: Object; 48 48 + isEEGEnabled: boolean; 49 49 + description: ExperimentDescription; 50 50 + } 51 51 + 52 52 + interface State { 53 53 + activeStep: string; 54 54 + isPreviewing: boolean; 55 55 + description: ExperimentDescription; 56 56 + params: ExperimentParameters; 57 57 + saved: boolean; 58 58 + } 59 59 + 60 60 + export default class CustomDesign extends Component<Props, State> { 61 61 + // handleStartExperiment: (Object) => void; 62 62 + 63 63 + // handlePreview: () => void; 64 64 + // handleSaveParams: () => void; 65 65 + // handleProgressBar: (Object, Object) => void; 66 66 + constructor(props: Props) { 67 67 + super(props); 68 68 + this.state = { 69 69 + activeStep: CUSTOM_STEPS.OVERVIEW, 70 70 + isPreviewing: true, 71 71 + description: props.description, 72 72 + params: props.params, 73 73 + saved: false 74 74 + }; 75 75 + this.handleStepClick = this.handleStepClick.bind(this); 76 76 + this.handleStartExperiment = this.handleStartExperiment.bind(this); 77 77 + this.handlePreview = this.handlePreview.bind(this); 78 78 + this.handleSaveParams = this.handleSaveParams.bind(this); 79 79 + this.handleProgressBar = this.handleProgressBar.bind(this); 80 80 + this.handleEEGEnabled = this.handleEEGEnabled.bind(this); 81 81 + if (isNil(props.params)) { 82 82 + props.experimentActions.loadDefaultTimeline(); 83 83 + } 84 84 + this.endPreview = this.endPreview.bind(this); 85 85 + } 86 86 + 87 87 + endPreview() {// this.setState({ isPreviewing: false }); 88 88 + } 89 89 + 90 90 + handleStepClick(step: string) { 91 91 + this.handleSaveParams(); 92 92 + this.setState({ activeStep: step }); 93 93 + } 94 94 + 95 95 + handleProgressBar(event: Object, data: Object) { 96 96 + this.setState({ 97 97 + params: { ...this.state.params, showProgessBar: data.checked } 98 98 + }); 99 99 + } 100 100 + 101 101 + handleEEGEnabled(event: Object, data: Object) { 102 102 + this.props.experimentActions.setEEGEnabled(data.checked); 103 103 + } 104 104 + 105 105 + handleStartExperiment() { 106 106 + this.props.history.push(SCREENS.COLLECT.route); 107 107 + } 108 108 + 109 109 + handlePreview(e) { 110 110 + e.target.blur(); 111 111 + this.setState({ isPreviewing: !this.state.isPreviewing }); 112 112 + } 113 113 + 114 114 + handleSaveParams() { 115 115 + this.props.experimentActions.setParams(this.state.params); 116 116 + this.props.experimentActions.setDescription(this.state.description); 117 117 + this.props.experimentActions.saveWorkspace(); 118 118 + this.setState({ saved: true }); 119 119 + } 120 120 + 121 121 + renderSectionContent() { 122 122 + const stimi = [{ name: 'stimulus1', number: 1 }, { name: 'stimulus2', number: 2 }, { name: 'stimulus3', number: 3 }, { name: 'stimulus4', number: 4 }]; 123 123 + switch (this.state.activeStep) { 124 124 + case CUSTOM_STEPS.OVERVIEW:default: 125 125 + return <Grid stretched relaxed padded columns='equal' className={styles.contentGrid}> 126 126 + <Grid.Column stretched verticalAlign='middle'> 127 127 + <Image as={Segment} basic centered src={researchQuestionImage} className={styles.overviewImage} /> 128 128 + <Form> 129 129 + <Form.TextArea autoHeight style={{ minHeight: 100, maxHeight: 400 }} label={FIELDS.QUESTION} value={this.state.description.question} placeholder='Explain your research question here.' onChange={(event, data) => this.setState({ 130 130 + description: { 131 131 + ...this.state.description, 132 132 + question: data.value 133 133 + }, 134 134 + saved: false 135 135 + })} /> 136 136 + </Form> 137 137 + </Grid.Column> 138 138 + <Grid.Column stretched verticalAlign='middle'> 139 139 + <Image as={Segment} basic centered src={hypothesisImage} className={styles.overviewImage} /> 140 140 + <Form> 141 141 + <Form.TextArea autoHeight style={{ minHeight: 100, maxHeight: 400 }} label={FIELDS.HYPOTHESIS} value={this.state.description.hypothesis} placeholder='Describe your hypothesis here.' onChange={(event, data) => this.setState({ 142 142 + description: { 143 143 + ...this.state.description, 144 144 + hypothesis: data.value 145 145 + }, 146 146 + saved: false 147 147 + })} /> 148 148 + </Form> 149 149 + </Grid.Column> 150 150 + <Grid.Column verticalAlign='middle'> 151 151 + <Image as={Segment} basic centered src={methodsImage} className={styles.overviewImage} /> 152 152 + <Form> 153 153 + <Form.TextArea autoHeight style={{ minHeight: 100, maxHeight: 400 }} label={FIELDS.METHODS} value={this.state.description.methods} placeholder='Explain how you will design your experiment to answer the question here.' onChange={(event, data) => this.setState({ 154 154 + description: { 155 155 + ...this.state.description, 156 156 + methods: data.value 157 157 + }, 158 158 + saved: false 159 159 + })} /> 160 160 + </Form> 161 161 + </Grid.Column> 162 162 + </Grid>; 163 163 + 164 164 + case CUSTOM_STEPS.CONDITIONS: 165 165 + return <Grid> 166 166 + <Segment basic> 167 167 + <Header as='h1'>Conditions</Header> 168 168 + <p> 169 169 + Select the folder with images for each condition and choose the correct response. 170 170 + You can upload image files with the following extensions: ".png", ".jpg", ".jpeg". 171 171 + Make sure when you preview your experiment that the resolution is high enough. You 172 172 + can resize or compress your images in an image editing program or on one of the 173 173 + websites online. 174 174 + </p> 175 175 + </Segment> 176 176 + 177 177 + <Table basic='very'> 178 178 + <Table.Header> 179 179 + <Table.Row className={styles.conditionHeaderRow}> 180 180 + <Table.HeaderCell className={styles.conditionHeaderRowName}> 181 181 + Condition 182 182 + </Table.HeaderCell> 183 183 + <Table.HeaderCell>Default Key Response</Table.HeaderCell> 184 184 + <Table.HeaderCell>Condition Folder</Table.HeaderCell> 185 185 + </Table.Row> 186 186 + </Table.Header> 187 187 + 188 188 + <Table.Body className={styles.experimentTable}> 189 189 + {stimi.map(({ 190 190 + name, 191 191 + number 192 192 + }) => <StimuliDesignColumn key={number} num={number} {...this.state.params[name]} numberImages={this.state.params.stimuli.filter(trial => trial.type === number).length} onChange={async (key, data, changedName) => { 193 193 + await this.setState({ 194 194 + params: { 195 195 + ...this.state.params, 196 196 + [changedName]: { ...this.state.params[changedName], [key]: data } 197 197 + } 198 198 + }); 199 199 + let newStimuli = []; 200 200 + await stimi.map(stimul => { 201 201 + let dirStimuli = []; 202 202 + const dir = this.state.params[stimul.name].dir; 203 203 + if (dir && typeof dir !== 'undefined' && dir !== '') { 204 204 + dirStimuli = readImages(dir).map(i => ({ 205 205 + dir: dir, 206 206 + filename: i, 207 207 + name: i, 208 208 + condition: this.state.params[stimul.name].title, 209 209 + response: this.state.params[stimul.name].response, 210 210 + phase: 'main', 211 211 + type: stimul.number 212 212 + })); 213 213 + } 214 214 + if (dirStimuli.length) dirStimuli[0].phase = 'practice'; 215 215 + newStimuli = newStimuli.concat(...dirStimuli); 216 216 + }); 217 217 + this.setState({ 218 218 + params: { 219 219 + ...this.state.params, 220 220 + stimuli: [...newStimuli], 221 221 + nbTrials: newStimuli.filter(t => t.phase === 'main').length, 222 222 + nbPracticeTrials: newStimuli.filter(t => t.phase === 'practice').length 223 223 + }, 224 224 + saved: false 225 225 + }); 226 226 + }} />)} 227 227 + </Table.Body> 228 228 + </Table> 229 229 + </Grid>; 230 230 + 231 231 + case CUSTOM_STEPS.TRIALS: 232 232 + return <Grid> 233 233 + <div className={styles.trialsHeader}> 234 234 + <div> 235 235 + <Header as='h1'>Trials</Header> 236 236 + <p>Edit the correct key response and type of each trial.</p> 237 237 + </div> 238 238 + 239 239 + <div> 240 240 + <Form style={{ alignSelf: 'flex-end' }}> 241 241 + <Form.Group className={styles.trialsTopInfoBar}> 242 242 + <Form.Select fluid selection label='Order' value={this.state.params.randomize} onChange={(event, data) => this.setState({ 243 243 + params: { 244 244 + ...this.state.params, 245 245 + randomize: data.value 246 246 + }, 247 247 + saved: false 248 248 + })} placeholder='Response' options={[{ key: 'random', text: 'Random', value: 'random' }, { key: 'sequential', text: 'Sequential', value: 'sequential' }]} /> 249 249 + <Form.Input label='Total experimental trials' type='number' fluid value={this.state.params.nbTrials} onChange={(event, data) => this.setState({ 250 250 + params: { 251 251 + ...this.state.params, 252 252 + nbTrials: parseInt(data.value) 253 253 + }, 254 254 + saved: false 255 255 + })} /> 256 256 + <Form.Input label='Total practice trials' type='number' fluid value={this.state.params.nbPracticeTrials} onChange={(event, data) => this.setState({ 257 257 + params: { 258 258 + ...this.state.params, 259 259 + nbPracticeTrials: parseInt(data.value) 260 260 + }, 261 261 + saved: false 262 262 + })} /> 263 263 + </Form.Group> 264 264 + </Form> 265 265 + </div> 266 266 + </div> 267 267 + 268 268 + <Table basic='very'> 269 269 + <Table.Header> 270 270 + <Table.Row className={styles.trialsHeaderRow}> 271 271 + <Table.HeaderCell className={styles.conditionHeaderRowName}> 272 272 + Name 273 273 + </Table.HeaderCell> 274 274 + <Table.HeaderCell>Condition</Table.HeaderCell> 275 275 + <Table.HeaderCell>Correct Key Response</Table.HeaderCell> 276 276 + <Table.HeaderCell>Trial Type</Table.HeaderCell> 277 277 + </Table.Row> 278 278 + </Table.Header> 279 279 + <Table.Body className={styles.trialsTable}> 280 280 + {this.state.params.stimuli && this.state.params.stimuli.map((e, num) => <StimuliRow key={num} num={num} conditions={[1, 2, 3, 4].map(n => this.state.params[`stimulus${n}`].title)} {...e} onDelete={num => { 281 281 + const stimuli = this.state.params.stimuli; 282 282 + stimuli.splice(num, 1); 283 283 + const nbPracticeTrials = stimuli.filter(s => s.phase === 'practice').length; 284 284 + const nbTrials = stimuli.filter(s => s.phase === 'main').length; 285 285 + this.setState({ 286 286 + params: { 287 287 + ...this.state.params, 288 288 + stimuli: [...stimuli], 289 289 + nbPracticeTrials, 290 290 + nbTrials 291 291 + }, 292 292 + saved: false 293 293 + }); 294 294 + }} onChange={(num, key, data) => { 295 295 + const stimuli = this.state.params.stimuli; 296 296 + stimuli[num][key] = data; 297 297 + let nbPracticeTrials = this.state.params.nbPracticeTrials; 298 298 + let nbTrials = this.state.params.nbTrials; 299 299 + if (key === 'phase') { 300 300 + nbPracticeTrials = stimuli.filter(s => s.phase === 'practice').length; 301 301 + nbTrials = stimuli.filter(s => s.phase === 'main').length; 302 302 + } 303 303 + this.setState({ 304 304 + params: { 305 305 + ...this.state.params, 306 306 + stimuli: [...stimuli], 307 307 + nbPracticeTrials, 308 308 + nbTrials 309 309 + }, 310 310 + saved: false 311 311 + }); 312 312 + }} />)} 313 313 + </Table.Body> 314 314 + </Table> 315 315 + </Grid>; 316 316 + 317 317 + case CUSTOM_STEPS.PARAMETERS: 318 318 + return <Grid> 319 319 + <Grid.Column width={8} style={{ display: 'grid', alignContent: 'space-between' }}> 320 320 + <Segment basic> 321 321 + <Header as='h1'>Inter-trial interval</Header> 322 322 + <p> 323 323 + Select the inter-trial interval duration. This is the amount of time between 324 324 + trials measured from the end of one trial to the start of the next one. 325 325 + </p> 326 326 + </Segment> 327 327 + <Segment basic style={{ marginTop: '100px' }}> 328 328 + <ParamSlider label='ITI Duration (seconds)' value={this.state.params.iti} marks={{ 329 329 + 1: '0.25', 330 330 + 2: '0.5', 331 331 + 3: '0.75', 332 332 + 4: '1', 333 333 + 5: '1.25', 334 334 + 6: '1.5', 335 335 + 7: '1.75', 336 336 + 8: '2' 337 337 + }} ms_conversion='250' onChange={value => this.setState({ 338 338 + params: { ...this.state.params, iti: value }, 339 339 + saved: false 340 340 + })} /> 341 341 + </Segment> 342 342 + </Grid.Column> 343 343 + 344 344 + <Grid.Column width={8} style={{ display: 'grid', alignContent: 'space-between' }}> 345 345 + <Segment basic> 346 346 + <Header as='h1'>Image duration</Header> 347 347 + <p> 348 348 + Select the time of presentation or make it self-paced - present the image until 349 349 + participants respond. 350 350 + </p> 351 351 + </Segment> 352 352 + <Segment basic> 353 353 + <Checkbox defaultChecked={this.state.params.selfPaced} label='Self-paced data collection' onChange={value => this.setState({ 354 354 + params: { ...this.state.params, selfPaced: !this.state.params.selfPaced }, 355 355 + saved: false 356 356 + })} /> 357 357 + </Segment> 358 358 + 359 359 + {!this.state.params.selfPaced ? <Segment basic> 360 360 + <ParamSlider label='Presentation time (seconds)' value={this.state.params.presentationTime} marks={{ 361 361 + 1: '0.25', 362 362 + 2: '0.5', 363 363 + 3: '0.75', 364 364 + 4: '1', 365 365 + 5: '1.25', 366 366 + 6: '1.5', 367 367 + 7: '1.75', 368 368 + 8: '2' 369 369 + }} ms_conversion='250' onChange={value => this.setState({ 370 370 + params: { ...this.state.params, presentationTime: value }, 371 371 + saved: false 372 372 + })} /> 373 373 + </Segment> : <Segment basic style={{ marginBottom: '85px' }} />} 374 374 + </Grid.Column> 375 375 + </Grid>; 376 376 + 377 377 + case CUSTOM_STEPS.INSTRUCTIONS: 378 378 + return <Grid stretched> 379 379 + <Grid.Column width={8} stretched style={{ display: 'grid', alignContent: 'space-between' }}> 380 380 + <Segment basic> 381 381 + <Header as='h1'>Experiment Instructions</Header> 382 382 + <p>Edit the instruction that will be displayed on the first screen.</p> 383 383 + <Form> 384 384 + <Form.TextArea autoHeight value={this.state.params.intro} placeholder="e.g., You will view a series of faces and houses. Press 1 when a face appears and 9 for a house. Press the the space bar on your keyboard to start doing the practice trials. If you want to skip the practice trials and go directly to the task, press the 'q' button on your keyboard." onChange={(event, data) => this.setState({ 385 385 + params: { ...this.state.params, intro: data.value }, 386 386 + saved: false 387 387 + })} /> 388 388 + </Form> 389 389 + </Segment> 390 390 + </Grid.Column> 391 391 + 392 392 + <Grid.Column width={8} stretched style={{ display: 'grid', alignContent: 'space-between' }}> 393 393 + <Segment basic> 394 394 + <Header as='h1'>Instructions for the task screen</Header> 395 395 + <p>Edit the instruction that will be displayed in the footer during the task.</p> 396 396 + <Form> 397 397 + <Form.TextArea autoHeight value={this.state.params.taskHelp} placeholder='e.g., Press 1 for a face and 9 for a house' onChange={(event, data) => this.setState({ 398 398 + params: { ...this.state.params, taskHelp: data.value }, 399 399 + saved: false 400 400 + })} /> 401 401 + </Form> 402 402 + </Segment> 403 403 + </Grid.Column> 404 404 + </Grid>; 405 405 + 406 406 + case CUSTOM_STEPS.PREVIEW: 407 407 + return <Grid relaxed padded className={styles.contentGrid}> 408 408 + <Grid.Column stretched width={14} textAlign='right' verticalAlign='middle' className={styles.previewWindow}> 409 409 + <PreviewExperimentComponent {...loadProtocol(this.props.paradigm)} isPreviewing={this.state.isPreviewing} onEnd={this.endPreview} type={this.props.type} paradigm={this.props.paradigm} previewParams={this.props.params} title={this.props.title} /> 410 410 + </Grid.Column> 411 411 + 412 412 + <Grid.Column width={2} verticalAlign='top'> 413 413 + <Segment basic> 414 414 + <PreviewButton isPreviewing={this.state.isPreviewing} onClick={e => this.handlePreview(e)} /> 415 415 + </Segment> 416 416 + </Grid.Column> 417 417 + </Grid>; 418 418 + 419 419 + } 420 420 + } 421 421 + 422 422 + render() { 423 423 + return <div className={styles.mainContainer}> 424 424 + <SecondaryNavComponent title='Experiment Design' steps={CUSTOM_STEPS} activeStep={this.state.activeStep} onStepClick={this.handleStepClick} enableEEGToggle={<Checkbox toggle defaultChecked={this.props.isEEGEnabled} onChange={(event, data) => this.handleEEGEnabled(event, data)} className={styles.EEGToggle} />} saveButton={<Button compact size='small' secondary onClick={() => { 425 425 + this.handleSaveParams(); 426 426 + }}> 427 427 + {this.state.saved ? 'Save' : 'Save'} 428 428 + </Button>} /> 429 429 + {this.renderSectionContent()} 430 430 + </div>; 431 431 + } 432 432 + }

-36

app/components/DesignComponent/ParamSlider.js

reviewed

··· 1 1 - import { Segment } from 'semantic-ui-react'; 2 2 - import React, { PureComponent } from 'react'; 3 3 - import Slider from 'rc-slider'; 4 4 - import styles from '../styles/common.css'; 5 5 - 6 6 - interface Props { 7 7 - value: number; 8 8 - label: string; 9 9 - onChange: (number) => void; 10 10 - } 11 11 - 12 12 - export default class ParamSlider extends PureComponent<Props> { 13 13 - render() { 14 14 - const { marks, ms_conversion } = this.props; 15 15 - return ( 16 16 - <div> 17 17 - <p className={styles.label}>{this.props.label}</p> 18 18 - <Segment basic> 19 19 - {this.props.label !== 'Practice trials' || Object.keys(marks).length > 1 ? ( 20 20 - <Slider 21 21 - dots 22 22 - marks={this.props.marks} 23 23 - min={Math.min(...Object.keys(marks))} 24 24 - max={Math.max(...Object.keys(marks))} 25 25 - value={this.props.value / parseInt(ms_conversion, 10)} 26 26 - onChange={(value) => this.props.onChange(value * parseInt(ms_conversion, 10))} 27 27 - defaultValue={1} 28 28 - /> 29 29 - ) : ( 30 30 - <div>You have not chosen any practice trials.</div> 31 31 - )} 32 32 - </Segment> 33 33 - </div> 34 34 - ); 35 35 - } 36 36 - }

+26

app/components/DesignComponent/ParamSlider.tsx

reviewed

··· 1 1 + import { Segment } from "semantic-ui-react"; 2 2 + import React, { PureComponent } from "react"; 3 3 + import Slider from "rc-slider"; 4 4 + import styles from "../styles/common.css"; 5 5 + 6 6 + interface Props { 7 7 + value: number; 8 8 + label: string; 9 9 + onChange: (arg0: number) => void; 10 10 + } 11 11 + 12 12 + export default class ParamSlider extends PureComponent<Props> { 13 13 + 14 14 + render() { 15 15 + const { 16 16 + marks, 17 17 + ms_conversion 18 18 + } = this.props; 19 19 + return <div> 20 20 + <p className={styles.label}>{this.props.label}</p> 21 21 + <Segment basic> 22 22 + {this.props.label !== 'Practice trials' || Object.keys(marks).length > 1 ? <Slider dots marks={this.props.marks} min={Math.min(...Object.keys(marks))} max={Math.max(...Object.keys(marks))} value={this.props.value / parseInt(ms_conversion, 10)} onChange={value => this.props.onChange(value * parseInt(ms_conversion, 10))} defaultValue={1} /> : <div>You have not chosen any practice trials.</div>} 23 23 + </Segment> 24 24 + </div>; 25 25 + } 26 26 + }

-122

app/components/DesignComponent/StimuliDesignColumn.js

reviewed

··· 1 1 - /* Breaking this component on its own is done mainly to increase performance. Text input is slow otherwise */ 2 2 - 3 3 - import React, { Component } from 'react'; 4 4 - import { Form, Button, Table, Icon } from 'semantic-ui-react'; 5 5 - import { toast } from 'react-toastify'; 6 6 - import { readImages } from '../../utils/filesystem/storage'; 7 7 - import { loadFromSystemDialog } from '../../utils/filesystem/select'; 8 8 - import { FILE_TYPES } from '../../constants/constants'; 9 9 - import * as path from 'path'; 10 10 - import styles from '../styles/common.css'; 11 11 - 12 12 - interface Props { 13 13 - num: number; 14 14 - title: string; 15 15 - response: string; 16 16 - dir: string; 17 17 - onChange: (string, string) => void; 18 18 - } 19 19 - 20 20 - const RESPONSE_OPTIONS = new Array(10).fill(0).map((_, i) => ({ 21 21 - key: i.toString(), 22 22 - text: i.toString(), 23 23 - value: i.toString(), 24 24 - })); 25 25 - 26 26 - export default class StimuliDesignColumn extends Component<Props> { 27 27 - constructor(props: Props) { 28 28 - super(props); 29 29 - this.handleSelectFolder = this.handleSelectFolder.bind(this); 30 30 - this.handleRemoveFolder = this.handleRemoveFolder.bind(this); 31 31 - this.state = { 32 32 - numberImages: undefined, 33 33 - }; 34 34 - } 35 35 - 36 36 - shouldComponentUpdate(nextProps) { 37 37 - if ( 38 38 - nextProps.title !== this.props.title || 39 39 - nextProps.response !== this.props.response || 40 40 - nextProps.dir !== this.props.dir 41 41 - ) { 42 42 - return true; 43 43 - } 44 44 - return false; 45 45 - } 46 46 - 47 47 - async handleSelectFolder() { 48 48 - const dir = await loadFromSystemDialog(FILE_TYPES.STIMULUS_DIR); 49 49 - if (dir) { 50 50 - const images = readImages(dir); 51 51 - if (images.length < 1) { 52 52 - toast.error('No images in folder!'); 53 53 - } 54 54 - this.setState({ 55 55 - numberImages: images.length, 56 56 - }); 57 57 - this.props.onChange('dir', dir, `stimulus${this.props.num}`); 58 58 - } 59 59 - } 60 60 - 61 61 - handleRemoveFolder() { 62 62 - this.setState({ 63 63 - numberImages: 0, 64 64 - }); 65 65 - this.props.onChange('dir', '', `stimulus${this.props.num}`); 66 66 - } 67 67 - 68 68 - render() { 69 69 - return ( 70 70 - <Table.Row className={styles.conditionRow}> 71 71 - <Table.Cell className={styles.conditionsNameRow}> 72 72 - {this.props.num} 73 73 - <Form> 74 74 - <Form.Input 75 75 - value={this.props.title} 76 76 - onChange={(event, data) => 77 77 - this.props.onChange('title', data.value, `stimulus${this.props.num}`) 78 78 - } 79 79 - placeholder='Enter condition name' 80 80 - /> 81 81 - </Form> 82 82 - </Table.Cell> 83 83 - 84 84 - <Table.Cell className={styles.experimentRowName}> 85 85 - <Form.Select 86 86 - fluid 87 87 - selection 88 88 - value={this.props.response} 89 89 - onChange={(event, data) => 90 90 - this.props.onChange('response', data.value, `stimulus${this.props.num}`) 91 91 - } 92 92 - placeholder='Select' 93 93 - options={RESPONSE_OPTIONS} 94 94 - /> 95 95 - </Table.Cell> 96 96 - 97 97 - <Table.Cell className={styles.experimentRowName}> 98 98 - {this.props.dir ? ( 99 99 - <div className={styles.selectedFolderContainer}> 100 100 - <div> 101 101 - Folder{' '} 102 102 - {this.props.dir && 103 103 - this.props.dir 104 104 - .split(path.sep) 105 105 - .slice(-1) 106 106 - .join(' / ')} 107 107 - </div> 108 108 - <div>( {this.state.numberImages || this.props.numberImages} images ) </div> 109 109 - <div> 110 110 - <Icon name='delete' onClick={this.handleRemoveFolder} /> 111 111 - </div> 112 112 - </div> 113 113 - ) : ( 114 114 - <Button secondary onClick={this.handleSelectFolder}> 115 115 - Select folder 116 116 - </Button> 117 117 - )} 118 118 - </Table.Cell> 119 119 - </Table.Row> 120 120 - ); 121 121 - } 122 122 - }

+94

app/components/DesignComponent/StimuliDesignColumn.tsx

reviewed

··· 1 1 + /* Breaking this component on its own is done mainly to increase performance. Text input is slow otherwise */ 2 2 + 3 3 + import React, { Component } from "react"; 4 4 + import { Form, Button, Table, Icon } from "semantic-ui-react"; 5 5 + import { toast } from "react-toastify"; 6 6 + import { readImages } from "../../utils/filesystem/storage"; 7 7 + import { loadFromSystemDialog } from "../../utils/filesystem/select"; 8 8 + import { FILE_TYPES } from "../../constants/constants"; 9 9 + import * as path from "path"; 10 10 + import styles from "../styles/common.css"; 11 11 + 12 12 + interface Props { 13 13 + num: number; 14 14 + title: string; 15 15 + response: string; 16 16 + dir: string; 17 17 + onChange: (arg0: string, arg1: string) => void; 18 18 + } 19 19 + 20 20 + const RESPONSE_OPTIONS = new Array(10).fill(0).map((_, i) => ({ 21 21 + key: i.toString(), 22 22 + text: i.toString(), 23 23 + value: i.toString() 24 24 + })); 25 25 + 26 26 + export default class StimuliDesignColumn extends Component<Props> { 27 27 + 28 28 + constructor(props: Props) { 29 29 + super(props); 30 30 + this.handleSelectFolder = this.handleSelectFolder.bind(this); 31 31 + this.handleRemoveFolder = this.handleRemoveFolder.bind(this); 32 32 + this.state = { 33 33 + numberImages: undefined 34 34 + }; 35 35 + } 36 36 + 37 37 + shouldComponentUpdate(nextProps) { 38 38 + if (nextProps.title !== this.props.title || nextProps.response !== this.props.response || nextProps.dir !== this.props.dir) { 39 39 + return true; 40 40 + } 41 41 + return false; 42 42 + } 43 43 + 44 44 + async handleSelectFolder() { 45 45 + const dir = await loadFromSystemDialog(FILE_TYPES.STIMULUS_DIR); 46 46 + if (dir) { 47 47 + const images = readImages(dir); 48 48 + if (images.length < 1) { 49 49 + toast.error('No images in folder!'); 50 50 + } 51 51 + this.setState({ 52 52 + numberImages: images.length 53 53 + }); 54 54 + this.props.onChange('dir', dir, `stimulus${this.props.num}`); 55 55 + } 56 56 + } 57 57 + 58 58 + handleRemoveFolder() { 59 59 + this.setState({ 60 60 + numberImages: 0 61 61 + }); 62 62 + this.props.onChange('dir', '', `stimulus${this.props.num}`); 63 63 + } 64 64 + 65 65 + render() { 66 66 + return <Table.Row className={styles.conditionRow}> 67 67 + <Table.Cell className={styles.conditionsNameRow}> 68 68 + {this.props.num} 69 69 + <Form> 70 70 + <Form.Input value={this.props.title} onChange={(event, data) => this.props.onChange('title', data.value, `stimulus${this.props.num}`)} placeholder='Enter condition name' /> 71 71 + </Form> 72 72 + </Table.Cell> 73 73 + 74 74 + <Table.Cell className={styles.experimentRowName}> 75 75 + <Form.Select fluid selection value={this.props.response} onChange={(event, data) => this.props.onChange('response', data.value, `stimulus${this.props.num}`)} placeholder='Select' options={RESPONSE_OPTIONS} /> 76 76 + </Table.Cell> 77 77 + 78 78 + <Table.Cell className={styles.experimentRowName}> 79 79 + {this.props.dir ? <div className={styles.selectedFolderContainer}> 80 80 + <div> 81 81 + Folder{' '} 82 82 + {this.props.dir && this.props.dir.split(path.sep).slice(-1).join(' / ')} 83 83 + </div> 84 84 + <div>( {this.state.numberImages || this.props.numberImages} images ) </div> 85 85 + <div> 86 86 + <Icon name='delete' onClick={this.handleRemoveFolder} /> 87 87 + </div> 88 88 + </div> : <Button secondary onClick={this.handleSelectFolder}> 89 89 + Select folder 90 90 + </Button>} 91 91 + </Table.Cell> 92 92 + </Table.Row>; 93 93 + } 94 94 + }

+15 -31

app/components/DesignComponent/StimuliRow.js app/components/DesignComponent/StimuliRow.tsx

reviewed

··· 1 1 /* Breaking this component on its own is done mainly to increase performance. Text input is slow otherwise */ 2 2 3 3 - import React, { Component } from 'react'; 4 4 - import { Segment, Form, Button, Table, Dropdown } from 'semantic-ui-react'; 5 5 - import styles from '../styles/common.css'; 3 3 + import React, { Component } from "react"; 4 4 + import { Segment, Form, Button, Table, Dropdown } from "semantic-ui-react"; 5 5 + import styles from "../styles/common.css"; 6 6 7 7 interface Props { 8 8 num: number; 9 9 response: string; 10 10 dir: string; 11 11 condition: string; 12 12 - onChange: (string, string) => void; 12 12 + onChange: (arg0: string, arg1: string) => void; 13 13 } 14 14 15 15 const RESPONSE_OPTIONS = new Array(10).fill(0).map((_, i) => ({ 16 16 key: i.toString(), 17 17 text: i.toString(), 18 18 - value: i.toString(), 18 18 + value: i.toString() 19 19 })); 20 20 21 21 export default class StimuliRow extends Component<Props> { 22 22 + 22 23 render() { 23 23 - return ( 24 24 - <Table.Row className={styles.trialsRow}> 24 24 + return <Table.Row className={styles.trialsRow}> 25 25 <Table.Cell className={styles.conditionsNameRow}> 26 26 <div style={{ alignSelf: 'center' }}>{this.props.num + 1}.</div> 27 27 <div>{this.props.name}</div> ··· 32 32 </Table.Cell> 33 33 34 34 <Table.Cell className={styles.experimentRowName}> 35 35 - <Form.Select 36 36 - fluid 37 37 - selection 38 38 - value={this.props.response} 39 39 - onChange={(event, data) => this.props.onChange(this.props.num, 'response', data.value)} 40 40 - placeholder='Response' 41 41 - options={RESPONSE_OPTIONS} 42 42 - /> 35 35 + <Form.Select fluid selection value={this.props.response} onChange={(event, data) => this.props.onChange(this.props.num, 'response', data.value)} placeholder='Response' options={RESPONSE_OPTIONS} /> 43 36 </Table.Cell> 44 37 45 38 <Table.Cell className={styles.trialsTrialTypeRow}> 46 39 <Segment basic className={styles.trialsTrialTypeSegment}> 47 47 - <div 48 48 - className={styles.trialsTrialTypeRowSelector} 49 49 - style={{ backgroundColor: this.props.phase === 'main' ? '#1AC4EF' : '#EB1B66' }} 50 50 - > 40 40 + <div className={styles.trialsTrialTypeRowSelector} style={{ backgroundColor: this.props.phase === 'main' ? '#1AC4EF' : '#EB1B66' }}> 51 41 {this.props.phase === 'main' ? 'Experimental' : 'Practice'} 52 42 </div> 53 43 <Dropdown fluid style={{ display: 'grid', color: '#C4C4C4', justifyContent: 'end' }}> ··· 55 45 <Dropdown.Item onClick={() => this.props.onChange(this.props.num, 'phase', 'main')}> 56 46 <div>Experimental</div> 57 47 </Dropdown.Item> 58 58 - <Dropdown.Item 59 59 - onClick={() => this.props.onChange(this.props.num, 'phase', 'practice')} 60 60 - > 48 48 + <Dropdown.Item onClick={() => this.props.onChange(this.props.num, 'phase', 'practice')}> 61 49 <div>Practice</div> 62 50 </Dropdown.Item> 63 51 </Dropdown.Menu> 64 52 </Dropdown> 65 53 </Segment> 66 54 67 67 - <Button 68 68 - secondary 69 69 - onClick={() => { 70 70 - this.props.onDelete(this.props.num); 71 71 - }} 72 72 - > 55 55 + <Button secondary onClick={() => { 56 56 + this.props.onDelete(this.props.num); 57 57 + }}> 73 58 Delete 74 59 </Button> 75 60 </Table.Cell> 76 76 - </Table.Row> 77 77 - ); 61 61 + </Table.Row>; 78 62 } 79 63 } 80 64 ··· 90 74 // options={[{key: 'main', text: 'Experimental', value: 'main'}, 91 75 // {key: 'practice', text: 'Practice', value: 'practice'}]} 92 76 // className={styles.trialsTrialTypeRowSelector} 93 93 - // /> 77 77 + // />

-390

app/components/DesignComponent/index.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { Grid, Button, Segment, Header, Image, Checkbox } from 'semantic-ui-react'; 4 4 - import { isNil } from 'lodash'; 5 5 - import styles from '../styles/common.css'; 6 6 - import { EXPERIMENTS, SCREENS } from '../../constants/constants'; 7 7 - import { readWorkspaces } from '../../utils/filesystem/storage'; 8 8 - import { 9 9 - MainTimeline, 10 10 - Trial, 11 11 - ExperimentParameters, 12 12 - ExperimentDescription, 13 13 - } from '../../constants/interfaces'; 14 14 - import SecondaryNavComponent from '../SecondaryNavComponent'; 15 15 - import PreviewExperimentComponent from '../PreviewExperimentComponent'; 16 16 - import CustomDesign from './CustomDesignComponent'; 17 17 - import PreviewButton from '../PreviewButtonComponent'; 18 18 - 19 19 - import facesHousesOverview from '../../assets/common/FacesHouses.png'; 20 20 - import stroopOverview from '../../assets/common/Stroop.png'; 21 21 - import multitaskingOverview from '../../assets/common/Multitasking.png'; 22 22 - import searchOverview from '../../assets/common/VisualSearch.png'; 23 23 - import customOverview from '../../assets/common/Custom.png'; 24 24 - 25 25 - // conditions images 26 26 - import multiConditionShape from '../../assets/multi/multiConditionShape.png'; 27 27 - import multiConditionDots from '../../assets/multi/multiConditionDots.png'; 28 28 - import conditionFace from '../../assets/face_house/faces/Face1.jpg'; 29 29 - import conditionHouse from '../../assets/face_house/houses/House1.jpg'; 30 30 - import conditionOrangeT from '../../assets/search/conditionOrangeT.png'; 31 31 - import conditionNoOrangeT from '../../assets/search/conditionNoOrangeT.png'; 32 32 - import conditionCongruent from '../../assets/stroop/match_g.png'; 33 33 - import conditionIncongruent from '../../assets/stroop/mismatch6_r.png'; 34 34 - 35 35 - import { loadProtocol } from '../../utils/labjs/functions'; 36 36 - import { toast } from 'react-toastify'; 37 37 - import InputModal from '../InputModal'; 38 38 - 39 39 - import { shell } from 'electron'; 40 40 - 41 41 - const DESIGN_STEPS = { 42 42 - OVERVIEW: 'OVERVIEW', 43 43 - BACKGROUND: 'BACKGROUND', 44 44 - PROTOCOL: 'PROTOCOL', 45 45 - PREVIEW: 'PREVIEW', 46 46 - }; 47 47 - 48 48 - interface Props { 49 49 - history: Object; 50 50 - type: EXPERIMENTS; 51 51 - paradigm: EXPERIMENTS; 52 52 - title: string; 53 53 - params: ExperimentParameters; 54 54 - mainTimeline: MainTimeline; 55 55 - trials: { [string]: Trial }; 56 56 - timelines: {}; 57 57 - experimentActions: Object; 58 58 - description: ExperimentDescription; 59 59 - isEEGEnabled: boolean; 60 60 - } 61 61 - 62 62 - interface State { 63 63 - activeStep: string; 64 64 - isPreviewing: boolean; 65 65 - isNewExperimentModalOpen: boolean; 66 66 - recentWorkspaces: Array<string>; 67 67 - } 68 68 - 69 69 - export default class Design extends Component<Props, State> { 70 70 - // props: Props; 71 71 - // state: State; 72 72 - // handleStepClick: (Object, Object) => void; 73 73 - // handleStartExperiment: (Object) => void; 74 74 - // handleCustomizeExperiment: (Object) => void; 75 75 - // handlePreview: (Object) => void; 76 76 - // handleLoadCustomExperiment: (string) => void; 77 77 - 78 78 - constructor(props: Props) { 79 79 - super(props); 80 80 - this.state = { 81 81 - activeStep: DESIGN_STEPS.OVERVIEW, 82 82 - isPreviewing: false, 83 83 - isNewExperimentModalOpen: false, 84 84 - recentWorkspaces: [], 85 85 - }; 86 86 - this.handleStepClick = this.handleStepClick.bind(this); 87 87 - this.handleStartExperiment = this.handleStartExperiment.bind(this); 88 88 - this.handleCustomizeExperiment = this.handleCustomizeExperiment.bind(this); 89 89 - this.handleLoadCustomExperiment = this.handleLoadCustomExperiment.bind(this); 90 90 - this.handlePreview = this.handlePreview.bind(this); 91 91 - this.endPreview = this.endPreview.bind(this); 92 92 - this.handleEEGEnabled = this.handleEEGEnabled.bind(this); 93 93 - if (isNil(props.params)) { 94 94 - props.experimentActions.loadDefaultTimeline(); 95 95 - } 96 96 - } 97 97 - 98 98 - componentDidMount() { 99 99 - this.setState({ recentWorkspaces: readWorkspaces() }); 100 100 - } 101 101 - 102 102 - handleStepClick(step: string) { 103 103 - this.setState({ activeStep: step }); 104 104 - } 105 105 - 106 106 - handleStartExperiment() { 107 107 - this.props.history.push(SCREENS.COLLECT.route); 108 108 - } 109 109 - 110 110 - handleCustomizeExperiment() { 111 111 - this.setState({ 112 112 - isNewExperimentModalOpen: true, 113 113 - }); 114 114 - } 115 115 - 116 116 - handleLoadCustomExperiment(title: string) { 117 117 - this.setState({ isNewExperimentModalOpen: false }); 118 118 - // Don't create new workspace if it already exists or title is too short 119 119 - if (this.state.recentWorkspaces.includes(title)) { 120 120 - toast.error(`Experiment already exists`); 121 121 - return; 122 122 - } 123 123 - if (title.length <= 3) { 124 124 - toast.error(`Experiment name is too short`); 125 125 - return; 126 126 - } 127 127 - this.props.experimentActions.createNewWorkspace({ 128 128 - title, 129 129 - type: EXPERIMENTS.CUSTOM, 130 130 - paradigm: 'Custom', 131 131 - // paradigm: this.props.paradigm 132 132 - }); 133 133 - this.props.experimentActions.saveWorkspace(); 134 134 - } 135 135 - 136 136 - handlePreview(e) { 137 137 - e.target.blur(); 138 138 - this.setState({ isPreviewing: !this.state.isPreviewing }); 139 139 - } 140 140 - 141 141 - endPreview() { 142 142 - this.setState({ isPreviewing: false }); 143 143 - } 144 144 - 145 145 - handleEEGEnabled(event: Object, data: Object) { 146 146 - this.props.experimentActions.setEEGEnabled(data.checked); 147 147 - this.props.experimentActions.saveWorkspace(); 148 148 - } 149 149 - 150 150 - renderConditionIcon(type) { 151 151 - switch (type) { 152 152 - case 'conditionCongruent': 153 153 - return conditionCongruent; 154 154 - break; 155 155 - case 'conditionIncongruent': 156 156 - return conditionIncongruent; 157 157 - break; 158 158 - case 'conditionOrangeT': 159 159 - return conditionOrangeT; 160 160 - break; 161 161 - case 'conditionNoOrangeT': 162 162 - return conditionNoOrangeT; 163 163 - break; 164 164 - case 'conditionFace': 165 165 - return conditionFace; 166 166 - break; 167 167 - case 'conditionHouse': 168 168 - return conditionHouse; 169 169 - break; 170 170 - case 'multiConditionShape': 171 171 - return multiConditionShape; 172 172 - break; 173 173 - case 'multiConditionDots': 174 174 - default: 175 175 - return multiConditionDots; 176 176 - break; 177 177 - } 178 178 - } 179 179 - 180 180 - renderOverviewIcon(type) { 181 181 - switch (type) { 182 182 - case EXPERIMENTS.N170: 183 183 - return facesHousesOverview; 184 184 - break; 185 185 - 186 186 - case EXPERIMENTS.STROOP: 187 187 - return stroopOverview; 188 188 - break; 189 189 - 190 190 - case EXPERIMENTS.MULTI: 191 191 - return multitaskingOverview; 192 192 - break; 193 193 - 194 194 - case EXPERIMENTS.SEARCH: 195 195 - return searchOverview; 196 196 - break; 197 197 - 198 198 - case EXPERIMENTS.CUSTOM: 199 199 - default: 200 200 - return customOverview; 201 201 - break; 202 202 - } 203 203 - } 204 204 - 205 205 - renderSectionContent() { 206 206 - switch (this.state.activeStep) { 207 207 - case DESIGN_STEPS.OVERVIEW: 208 208 - default: 209 209 - return ( 210 210 - <Grid 211 211 - stretched 212 212 - relaxed 213 213 - padded 214 214 - className={styles.contentGrid} 215 215 - style={{ alignItems: 'center' }} 216 216 - > 217 217 - <Grid.Row stretched> 218 218 - <Grid.Column stretched width={5}> 219 219 - <Segment basic> 220 220 - <Image src={this.renderOverviewIcon(this.props.type)} /> 221 221 - </Segment> 222 222 - </Grid.Column> 223 223 - 224 224 - <Grid.Column stretched width={11}> 225 225 - <Segment basic> 226 226 - <Header as='h1'>{this.props.overview_title}</Header> 227 227 - <p>{this.props.overview}</p> 228 228 - </Segment> 229 229 - </Grid.Column> 230 230 - </Grid.Row> 231 231 - </Grid> 232 232 - ); 233 233 - 234 234 - case DESIGN_STEPS.BACKGROUND: 235 235 - return ( 236 236 - <Grid relaxed padded className={styles.contentGrid} style={{ alignItems: 'center' }}> 237 237 - <Grid.Row> 238 238 - <Grid.Column stretched width={4}> 239 239 - <Segment basic> 240 240 - <Image src={this.renderOverviewIcon(this.props.type)} /> 241 241 - </Segment> 242 242 - </Grid.Column> 243 243 - 244 244 - <Grid.Column stretched width={5}> 245 245 - <Segment basic> 246 246 - <p>{this.props.background_first_column}</p> 247 247 - <p style={{ fontWeight: 'bold' }}> 248 248 - {this.props.background_first_column_question} 249 249 - </p> 250 250 - </Segment> 251 251 - </Grid.Column> 252 252 - 253 253 - <Grid.Column stretched width={5}> 254 254 - <Segment basic> 255 255 - <p>{this.props.background_second_column}</p> 256 256 - <p style={{ fontWeight: 'bold' }}> 257 257 - {this.props.background_second_column_question} 258 258 - </p> 259 259 - </Segment> 260 260 - </Grid.Column> 261 261 - 262 262 - <Grid.Column width={2}> 263 263 - <Segment basic> 264 264 - <div className={styles.externalLinks}> 265 265 - {this.props.background_links.map((link) => ( 266 266 - <Button 267 267 - key={link.address} 268 268 - secondary 269 269 - onClick={() => { 270 270 - shell.openExternal(link.address); 271 271 - }} 272 272 - > 273 273 - {link.name} 274 274 - </Button> 275 275 - ))} 276 276 - </div> 277 277 - </Segment> 278 278 - </Grid.Column> 279 279 - </Grid.Row> 280 280 - </Grid> 281 281 - ); 282 282 - 283 283 - case DESIGN_STEPS.PROTOCOL: 284 284 - return ( 285 285 - <Grid relaxed padded className={styles.contentGrid} style={{ alignItems: 'center' }}> 286 286 - <Grid.Row stretched> 287 287 - <Grid.Column stretched width={7} textAlign='left'> 288 288 - <Segment basic> 289 289 - <Header as='h2'>{this.props.protocol_title}</Header> 290 290 - <p>{this.props.protocol}</p> 291 291 - </Segment> 292 292 - </Grid.Column> 293 293 - 294 294 - <Grid.Column width={9}> 295 295 - <Grid> 296 296 - <Grid.Row> 297 297 - <Grid.Column width={5}> 298 298 - <Image 299 299 - src={this.renderConditionIcon(this.props.protocol_condition_first_img)} 300 300 - /> 301 301 - </Grid.Column> 302 302 - <Grid.Column width={10}> 303 303 - <Segment basic> 304 304 - <Header as='h3'>{this.props.protocol_condition_first_title}</Header> 305 305 - <p>{this.props.protocol_condition_first}</p> 306 306 - </Segment> 307 307 - </Grid.Column> 308 308 - </Grid.Row> 309 309 - 310 310 - <Grid.Row> 311 311 - <Grid.Column width={5}> 312 312 - <Image 313 313 - src={this.renderConditionIcon(this.props.protocol_condition_second_img)} 314 314 - /> 315 315 - </Grid.Column> 316 316 - <Grid.Column width={10}> 317 317 - <Segment basic> 318 318 - <Header as='h3'>{this.props.protocol_condition_second_title}</Header> 319 319 - <p>{this.props.protocol_condition_second}</p> 320 320 - </Segment> 321 321 - </Grid.Column> 322 322 - </Grid.Row> 323 323 - </Grid> 324 324 - </Grid.Column> 325 325 - </Grid.Row> 326 326 - </Grid> 327 327 - ); 328 328 - 329 329 - case DESIGN_STEPS.PREVIEW: 330 330 - return ( 331 331 - <Grid relaxed padded className={styles.contentGrid}> 332 332 - <Grid.Column 333 333 - stretched 334 334 - width={12} 335 335 - textAlign='right' 336 336 - verticalAlign='middle' 337 337 - className={styles.previewWindow} 338 338 - > 339 339 - <PreviewExperimentComponent 340 340 - {...loadProtocol(this.props.paradigm)} 341 341 - isPreviewing={this.state.isPreviewing} 342 342 - onEnd={this.endPreview} 343 343 - type={this.props.type} 344 344 - paradigm={this.props.paradigm} 345 345 - /> 346 346 - </Grid.Column> 347 347 - <Grid.Column width={4} verticalAlign='middle'> 348 348 - <PreviewButton 349 349 - isPreviewing={this.state.isPreviewing} 350 350 - onClick={(e) => this.handlePreview(e)} 351 351 - /> 352 352 - </Grid.Column> 353 353 - </Grid> 354 354 - ); 355 355 - } 356 356 - } 357 357 - 358 358 - render() { 359 359 - if (this.props.type === EXPERIMENTS.CUSTOM) { 360 360 - return <CustomDesign {...this.props} />; 361 361 - } 362 362 - return ( 363 363 - <div className={styles.mainContainer}> 364 364 - <SecondaryNavComponent 365 365 - title='Experiment Design' 366 366 - steps={DESIGN_STEPS} 367 367 - activeStep={this.state.activeStep} 368 368 - onStepClick={this.handleStepClick} 369 369 - onEditClick={this.handleCustomizeExperiment} 370 370 - enableEEGToggle={ 371 371 - <Checkbox 372 372 - toggle 373 373 - defaultChecked={this.props.isEEGEnabled} 374 374 - onChange={(event, data) => this.handleEEGEnabled(event, data)} 375 375 - className={styles.EEGToggle} 376 376 - /> 377 377 - } 378 378 - canEditExperiment={this.props.paradigm === 'Faces and Houses'} 379 379 - /> 380 380 - {this.renderSectionContent()} 381 381 - <InputModal 382 382 - open={this.state.isNewExperimentModalOpen} 383 383 - onClose={this.handleLoadCustomExperiment} 384 384 - onExit={() => this.setState({ isNewExperimentModalOpen: false })} 385 385 - header='Enter a title for this experiment' 386 386 - /> 387 387 - </div> 388 388 - ); 389 389 - } 390 390 - }

+323

app/components/DesignComponent/index.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Grid, Button, Segment, Header, Image, Checkbox } from "semantic-ui-react"; 4 4 + import { isNil } from "lodash"; 5 5 + import styles from "../styles/common.css"; 6 6 + import { EXPERIMENTS, SCREENS } from "../../constants/constants"; 7 7 + import { readWorkspaces } from "../../utils/filesystem/storage"; 8 8 + import { MainTimeline, Trial, ExperimentParameters, ExperimentDescription } from "../../constants/interfaces"; 9 9 + import SecondaryNavComponent from "../SecondaryNavComponent"; 10 10 + import PreviewExperimentComponent from "../PreviewExperimentComponent"; 11 11 + import CustomDesign from "./CustomDesignComponent"; 12 12 + import PreviewButton from "../PreviewButtonComponent"; 13 13 + 14 14 + import facesHousesOverview from "../../assets/common/FacesHouses.png"; 15 15 + import stroopOverview from "../../assets/common/Stroop.png"; 16 16 + import multitaskingOverview from "../../assets/common/Multitasking.png"; 17 17 + import searchOverview from "../../assets/common/VisualSearch.png"; 18 18 + import customOverview from "../../assets/common/Custom.png"; 19 19 + 20 20 + // conditions images 21 21 + import multiConditionShape from "../../assets/multi/multiConditionShape.png"; 22 22 + import multiConditionDots from "../../assets/multi/multiConditionDots.png"; 23 23 + import conditionFace from "../../assets/face_house/faces/Face1.jpg"; 24 24 + import conditionHouse from "../../assets/face_house/houses/House1.jpg"; 25 25 + import conditionOrangeT from "../../assets/search/conditionOrangeT.png"; 26 26 + import conditionNoOrangeT from "../../assets/search/conditionNoOrangeT.png"; 27 27 + import conditionCongruent from "../../assets/stroop/match_g.png"; 28 28 + import conditionIncongruent from "../../assets/stroop/mismatch6_r.png"; 29 29 + 30 30 + import { loadProtocol } from "../../utils/labjs/functions"; 31 31 + import { toast } from "react-toastify"; 32 32 + import InputModal from "../InputModal"; 33 33 + 34 34 + import { shell } from "electron"; 35 35 + 36 36 + const DESIGN_STEPS = { 37 37 + OVERVIEW: 'OVERVIEW', 38 38 + BACKGROUND: 'BACKGROUND', 39 39 + PROTOCOL: 'PROTOCOL', 40 40 + PREVIEW: 'PREVIEW' 41 41 + }; 42 42 + 43 43 + interface Props { 44 44 + history: Object; 45 45 + type: EXPERIMENTS; 46 46 + paradigm: EXPERIMENTS; 47 47 + title: string; 48 48 + params: ExperimentParameters; 49 49 + mainTimeline: MainTimeline; 50 50 + trials: { 51 51 + [key: string]: Trial; 52 52 + }; 53 53 + timelines: {}; 54 54 + experimentActions: Object; 55 55 + description: ExperimentDescription; 56 56 + isEEGEnabled: boolean; 57 57 + } 58 58 + 59 59 + interface State { 60 60 + activeStep: string; 61 61 + isPreviewing: boolean; 62 62 + isNewExperimentModalOpen: boolean; 63 63 + recentWorkspaces: Array<string>; 64 64 + } 65 65 + 66 66 + export default class Design extends Component<Props, State> { 67 67 + // handleStartExperiment: (Object) => void; 68 68 + 69 69 + // handleCustomizeExperiment: (Object) => void; 70 70 + // handlePreview: (Object) => void; 71 71 + // handleLoadCustomExperiment: (string) => void; 72 72 + constructor(props: Props) { 73 73 + super(props); 74 74 + this.state = { 75 75 + activeStep: DESIGN_STEPS.OVERVIEW, 76 76 + isPreviewing: false, 77 77 + isNewExperimentModalOpen: false, 78 78 + recentWorkspaces: [] 79 79 + }; 80 80 + this.handleStepClick = this.handleStepClick.bind(this); 81 81 + this.handleStartExperiment = this.handleStartExperiment.bind(this); 82 82 + this.handleCustomizeExperiment = this.handleCustomizeExperiment.bind(this); 83 83 + this.handleLoadCustomExperiment = this.handleLoadCustomExperiment.bind(this); 84 84 + this.handlePreview = this.handlePreview.bind(this); 85 85 + this.endPreview = this.endPreview.bind(this); 86 86 + this.handleEEGEnabled = this.handleEEGEnabled.bind(this); 87 87 + if (isNil(props.params)) { 88 88 + props.experimentActions.loadDefaultTimeline(); 89 89 + } 90 90 + } 91 91 + 92 92 + componentDidMount() { 93 93 + this.setState({ recentWorkspaces: readWorkspaces() }); 94 94 + } 95 95 + 96 96 + handleStepClick(step: string) { 97 97 + this.setState({ activeStep: step }); 98 98 + } 99 99 + 100 100 + handleStartExperiment() { 101 101 + this.props.history.push(SCREENS.COLLECT.route); 102 102 + } 103 103 + 104 104 + handleCustomizeExperiment() { 105 105 + this.setState({ 106 106 + isNewExperimentModalOpen: true 107 107 + }); 108 108 + } 109 109 + 110 110 + handleLoadCustomExperiment(title: string) { 111 111 + this.setState({ isNewExperimentModalOpen: false }); 112 112 + // Don't create new workspace if it already exists or title is too short 113 113 + if (this.state.recentWorkspaces.includes(title)) { 114 114 + toast.error(`Experiment already exists`); 115 115 + return; 116 116 + } 117 117 + if (title.length <= 3) { 118 118 + toast.error(`Experiment name is too short`); 119 119 + return; 120 120 + } 121 121 + this.props.experimentActions.createNewWorkspace({ 122 122 + title, 123 123 + type: EXPERIMENTS.CUSTOM, 124 124 + paradigm: 'Custom' 125 125 + // paradigm: this.props.paradigm 126 126 + }); 127 127 + this.props.experimentActions.saveWorkspace(); 128 128 + } 129 129 + 130 130 + handlePreview(e) { 131 131 + e.target.blur(); 132 132 + this.setState({ isPreviewing: !this.state.isPreviewing }); 133 133 + } 134 134 + 135 135 + endPreview() { 136 136 + this.setState({ isPreviewing: false }); 137 137 + } 138 138 + 139 139 + handleEEGEnabled(event: Object, data: Object) { 140 140 + this.props.experimentActions.setEEGEnabled(data.checked); 141 141 + this.props.experimentActions.saveWorkspace(); 142 142 + } 143 143 + 144 144 + renderConditionIcon(type) { 145 145 + switch (type) { 146 146 + case 'conditionCongruent': 147 147 + return conditionCongruent; 148 148 + break; 149 149 + case 'conditionIncongruent': 150 150 + return conditionIncongruent; 151 151 + break; 152 152 + case 'conditionOrangeT': 153 153 + return conditionOrangeT; 154 154 + break; 155 155 + case 'conditionNoOrangeT': 156 156 + return conditionNoOrangeT; 157 157 + break; 158 158 + case 'conditionFace': 159 159 + return conditionFace; 160 160 + break; 161 161 + case 'conditionHouse': 162 162 + return conditionHouse; 163 163 + break; 164 164 + case 'multiConditionShape': 165 165 + return multiConditionShape; 166 166 + break; 167 167 + case 'multiConditionDots':default: 168 168 + return multiConditionDots; 169 169 + break; 170 170 + 171 171 + } 172 172 + } 173 173 + 174 174 + renderOverviewIcon(type) { 175 175 + switch (type) { 176 176 + case EXPERIMENTS.N170: 177 177 + return facesHousesOverview; 178 178 + break; 179 179 + 180 180 + case EXPERIMENTS.STROOP: 181 181 + return stroopOverview; 182 182 + break; 183 183 + 184 184 + case EXPERIMENTS.MULTI: 185 185 + return multitaskingOverview; 186 186 + break; 187 187 + 188 188 + case EXPERIMENTS.SEARCH: 189 189 + return searchOverview; 190 190 + break; 191 191 + 192 192 + case EXPERIMENTS.CUSTOM:default: 193 193 + return customOverview; 194 194 + break; 195 195 + 196 196 + } 197 197 + } 198 198 + 199 199 + renderSectionContent() { 200 200 + switch (this.state.activeStep) { 201 201 + case DESIGN_STEPS.OVERVIEW:default: 202 202 + return <Grid stretched relaxed padded className={styles.contentGrid} style={{ alignItems: 'center' }}> 203 203 + <Grid.Row stretched> 204 204 + <Grid.Column stretched width={5}> 205 205 + <Segment basic> 206 206 + <Image src={this.renderOverviewIcon(this.props.type)} /> 207 207 + </Segment> 208 208 + </Grid.Column> 209 209 + 210 210 + <Grid.Column stretched width={11}> 211 211 + <Segment basic> 212 212 + <Header as='h1'>{this.props.overview_title}</Header> 213 213 + <p>{this.props.overview}</p> 214 214 + </Segment> 215 215 + </Grid.Column> 216 216 + </Grid.Row> 217 217 + </Grid>; 218 218 + 219 219 + case DESIGN_STEPS.BACKGROUND: 220 220 + return <Grid relaxed padded className={styles.contentGrid} style={{ alignItems: 'center' }}> 221 221 + <Grid.Row> 222 222 + <Grid.Column stretched width={4}> 223 223 + <Segment basic> 224 224 + <Image src={this.renderOverviewIcon(this.props.type)} /> 225 225 + </Segment> 226 226 + </Grid.Column> 227 227 + 228 228 + <Grid.Column stretched width={5}> 229 229 + <Segment basic> 230 230 + <p>{this.props.background_first_column}</p> 231 231 + <p style={{ fontWeight: 'bold' }}> 232 232 + {this.props.background_first_column_question} 233 233 + </p> 234 234 + </Segment> 235 235 + </Grid.Column> 236 236 + 237 237 + <Grid.Column stretched width={5}> 238 238 + <Segment basic> 239 239 + <p>{this.props.background_second_column}</p> 240 240 + <p style={{ fontWeight: 'bold' }}> 241 241 + {this.props.background_second_column_question} 242 242 + </p> 243 243 + </Segment> 244 244 + </Grid.Column> 245 245 + 246 246 + <Grid.Column width={2}> 247 247 + <Segment basic> 248 248 + <div className={styles.externalLinks}> 249 249 + {this.props.background_links.map(link => <Button key={link.address} secondary onClick={() => { 250 250 + shell.openExternal(link.address); 251 251 + }}> 252 252 + {link.name} 253 253 + </Button>)} 254 254 + </div> 255 255 + </Segment> 256 256 + </Grid.Column> 257 257 + </Grid.Row> 258 258 + </Grid>; 259 259 + 260 260 + case DESIGN_STEPS.PROTOCOL: 261 261 + return <Grid relaxed padded className={styles.contentGrid} style={{ alignItems: 'center' }}> 262 262 + <Grid.Row stretched> 263 263 + <Grid.Column stretched width={7} textAlign='left'> 264 264 + <Segment basic> 265 265 + <Header as='h2'>{this.props.protocol_title}</Header> 266 266 + <p>{this.props.protocol}</p> 267 267 + </Segment> 268 268 + </Grid.Column> 269 269 + 270 270 + <Grid.Column width={9}> 271 271 + <Grid> 272 272 + <Grid.Row> 273 273 + <Grid.Column width={5}> 274 274 + <Image src={this.renderConditionIcon(this.props.protocol_condition_first_img)} /> 275 275 + </Grid.Column> 276 276 + <Grid.Column width={10}> 277 277 + <Segment basic> 278 278 + <Header as='h3'>{this.props.protocol_condition_first_title}</Header> 279 279 + <p>{this.props.protocol_condition_first}</p> 280 280 + </Segment> 281 281 + </Grid.Column> 282 282 + </Grid.Row> 283 283 + 284 284 + <Grid.Row> 285 285 + <Grid.Column width={5}> 286 286 + <Image src={this.renderConditionIcon(this.props.protocol_condition_second_img)} /> 287 287 + </Grid.Column> 288 288 + <Grid.Column width={10}> 289 289 + <Segment basic> 290 290 + <Header as='h3'>{this.props.protocol_condition_second_title}</Header> 291 291 + <p>{this.props.protocol_condition_second}</p> 292 292 + </Segment> 293 293 + </Grid.Column> 294 294 + </Grid.Row> 295 295 + </Grid> 296 296 + </Grid.Column> 297 297 + </Grid.Row> 298 298 + </Grid>; 299 299 + 300 300 + case DESIGN_STEPS.PREVIEW: 301 301 + return <Grid relaxed padded className={styles.contentGrid}> 302 302 + <Grid.Column stretched width={12} textAlign='right' verticalAlign='middle' className={styles.previewWindow}> 303 303 + <PreviewExperimentComponent {...loadProtocol(this.props.paradigm)} isPreviewing={this.state.isPreviewing} onEnd={this.endPreview} type={this.props.type} paradigm={this.props.paradigm} /> 304 304 + </Grid.Column> 305 305 + <Grid.Column width={4} verticalAlign='middle'> 306 306 + <PreviewButton isPreviewing={this.state.isPreviewing} onClick={e => this.handlePreview(e)} /> 307 307 + </Grid.Column> 308 308 + </Grid>; 309 309 + 310 310 + } 311 311 + } 312 312 + 313 313 + render() { 314 314 + if (this.props.type === EXPERIMENTS.CUSTOM) { 315 315 + return <CustomDesign {...this.props} />; 316 316 + } 317 317 + return <div className={styles.mainContainer}> 318 318 + <SecondaryNavComponent title='Experiment Design' steps={DESIGN_STEPS} activeStep={this.state.activeStep} onStepClick={this.handleStepClick} onEditClick={this.handleCustomizeExperiment} enableEEGToggle={<Checkbox toggle defaultChecked={this.props.isEEGEnabled} onChange={(event, data) => this.handleEEGEnabled(event, data)} className={styles.EEGToggle} />} canEditExperiment={this.props.paradigm === 'Faces and Houses'} /> 319 319 + {this.renderSectionContent()} 320 320 + <InputModal open={this.state.isNewExperimentModalOpen} onClose={this.handleLoadCustomExperiment} onExit={() => this.setState({ isNewExperimentModalOpen: false })} header='Enter a title for this experiment' /> 321 321 + </div>; 322 322 + } 323 323 + }

-133

app/components/EEGExplorationComponent.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { Grid, Button, Header, Segment, Image, Divider } from 'semantic-ui-react'; 4 4 - import { PLOTTING_INTERVAL, CONNECTION_STATUS, DEVICE_AVAILABILITY } from '../constants/constants'; 5 5 - import eegImage from '../assets/common/EEG.png'; 6 6 - import SignalQualityIndicatorComponent from './SignalQualityIndicatorComponent'; 7 7 - import ViewerComponent from './ViewerComponent'; 8 8 - import ConnectModal from './CollectComponent/ConnectModal'; 9 9 - import styles from './styles/common.css'; 10 10 - 11 11 - interface Props { 12 12 - history: Object; 13 13 - connectedDevice: Object; 14 14 - signalQualityObservable: ?any; 15 15 - deviceType: DEVICES; 16 16 - deviceAvailability: DEVICE_AVAILABILITY; 17 17 - connectionStatus: CONNECTION_STATUS; 18 18 - deviceActions: Object; 19 19 - availableDevices: Array<any>; 20 20 - } 21 21 - 22 22 - interface State { 23 23 - isConnectModalOpen: boolean; 24 24 - } 25 25 - 26 26 - export default class Home extends Component<Props, State> { 27 27 - // props: Props; 28 28 - // state: State; 29 29 - // handleConnectModalClose: () => void; 30 30 - // handleStartConnect: () => void; 31 31 - 32 32 - constructor(props: Props) { 33 33 - super(props); 34 34 - this.state = { 35 35 - isConnectModalOpen: false, 36 36 - }; 37 37 - this.handleConnectModalClose = this.handleConnectModalClose.bind(this); 38 38 - this.handleStartConnect = this.handleStartConnect.bind(this); 39 39 - this.handleStopConnect = this.handleStopConnect.bind(this); 40 40 - } 41 41 - 42 42 - componentDidUpdate = (prevProps: Props, prevState: State) => { 43 43 - if ( 44 44 - this.props.connectionStatus === CONNECTION_STATUS.CONNECTED && 45 45 - prevState.isConnectModalOpen 46 46 - ) { 47 47 - this.setState({ isConnectModalOpen: false }); 48 48 - } 49 49 - }; 50 50 - 51 51 - handleStartConnect() { 52 52 - this.setState({ isConnectModalOpen: true }); 53 53 - this.props.deviceActions.setDeviceAvailability(DEVICE_AVAILABILITY.SEARCHING); 54 54 - } 55 55 - 56 56 - handleStopConnect() { 57 57 - this.props.deviceActions.disconnectFromDevice(this.props.connectedDevice); 58 58 - this.setState({ isConnectModalOpen: false }); 59 59 - this.props.deviceActions.setDeviceAvailability(DEVICE_AVAILABILITY.NONE); 60 60 - } 61 61 - 62 62 - handleConnectModalClose() { 63 63 - this.setState({ isConnectModalOpen: false }); 64 64 - } 65 65 - 66 66 - render() { 67 67 - return ( 68 68 - <Grid 69 69 - stretched 70 70 - relaxed 71 71 - padded 72 72 - className={styles.contentGrid} 73 73 - style={{ alignItems: 'center' }} 74 74 - > 75 75 - {this.props.connectionStatus === CONNECTION_STATUS.CONNECTED && ( 76 76 - <Grid.Row> 77 77 - <Grid.Column stretched width={6}> 78 78 - <SignalQualityIndicatorComponent 79 79 - signalQualityObservable={this.props.signalQualityObservable} 80 80 - plottingInterval={PLOTTING_INTERVAL} 81 81 - /> 82 82 - </Grid.Column> 83 83 - <Grid.Column stretched width={10}> 84 84 - <div className={styles.disconnectButtonContainer}> 85 85 - <Button secondary onClick={this.handleStopConnect}> 86 86 - Disconnect EEG Device 87 87 - </Button> 88 88 - </div> 89 89 - <ViewerComponent 90 90 - signalQualityObservable={this.props.signalQualityObservable} 91 91 - deviceType={this.props.deviceType} 92 92 - plottingInterval={PLOTTING_INTERVAL} 93 93 - /> 94 94 - </Grid.Column> 95 95 - </Grid.Row> 96 96 - )} 97 97 - {this.props.connectionStatus !== CONNECTION_STATUS.CONNECTED && ( 98 98 - <Grid.Row stretched> 99 99 - <Grid.Column stretched width={5}> 100 100 - <Segment basic> 101 101 - <Image src={eegImage} /> 102 102 - </Segment> 103 103 - </Grid.Column> 104 104 - 105 105 - <Grid.Column stretched width={11}> 106 106 - <Segment basic> 107 107 - <Header as='h1'>Explore Raw EEG</Header> 108 108 - <Divider /> 109 109 - <p>Connect directly to an EEG device and view raw streaming data</p> 110 110 - <Button primary onClick={this.handleStartConnect}> 111 111 - Connect 112 112 - </Button> 113 113 - </Segment> 114 114 - </Grid.Column> 115 115 - <ConnectModal 116 116 - history={this.props.history} 117 117 - open={this.state.isConnectModalOpen} 118 118 - onClose={this.handleConnectModalClose} 119 119 - connectedDevice={this.props.connectedDevice} 120 120 - signalQualityObservable={this.props.signalQualityObservable} 121 121 - deviceType={this.props.deviceType} 122 122 - deviceAvailability={this.props.deviceAvailability} 123 123 - connectionStatus={this.props.connectionStatus} 124 124 - deviceActions={this.props.deviceActions} 125 125 - availableDevices={this.props.availableDevices} 126 126 - style={{ marginTop: '100px' }} 127 127 - /> 128 128 - </Grid.Row> 129 129 - )} 130 130 - </Grid> 131 131 - ); 132 132 - } 133 133 - }

+97

app/components/EEGExplorationComponent.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Grid, Button, Header, Segment, Image, Divider } from "semantic-ui-react"; 4 4 + import { PLOTTING_INTERVAL, CONNECTION_STATUS, DEVICE_AVAILABILITY } from "../constants/constants"; 5 5 + import eegImage from "../assets/common/EEG.png"; 6 6 + import SignalQualityIndicatorComponent from "./SignalQualityIndicatorComponent"; 7 7 + import ViewerComponent from "./ViewerComponent"; 8 8 + import ConnectModal from "./CollectComponent/ConnectModal"; 9 9 + import styles from "./styles/common.css"; 10 10 + 11 11 + interface Props { 12 12 + history: Object; 13 13 + connectedDevice: Object; 14 14 + signalQualityObservable: any | null | undefined; 15 15 + deviceType: DEVICES; 16 16 + deviceAvailability: DEVICE_AVAILABILITY; 17 17 + connectionStatus: CONNECTION_STATUS; 18 18 + deviceActions: Object; 19 19 + availableDevices: Array<any>; 20 20 + } 21 21 + 22 22 + interface State { 23 23 + isConnectModalOpen: boolean; 24 24 + } 25 25 + 26 26 + export default class Home extends Component<Props, State> { 27 27 + 28 28 + // handleConnectModalClose: () => void; 29 29 + // handleStartConnect: () => void; 30 30 + constructor(props: Props) { 31 31 + super(props); 32 32 + this.state = { 33 33 + isConnectModalOpen: false 34 34 + }; 35 35 + this.handleConnectModalClose = this.handleConnectModalClose.bind(this); 36 36 + this.handleStartConnect = this.handleStartConnect.bind(this); 37 37 + this.handleStopConnect = this.handleStopConnect.bind(this); 38 38 + } 39 39 + 40 40 + componentDidUpdate = (prevProps: Props, prevState: State) => { 41 41 + if (this.props.connectionStatus === CONNECTION_STATUS.CONNECTED && prevState.isConnectModalOpen) { 42 42 + this.setState({ isConnectModalOpen: false }); 43 43 + } 44 44 + }; 45 45 + 46 46 + handleStartConnect() { 47 47 + this.setState({ isConnectModalOpen: true }); 48 48 + this.props.deviceActions.setDeviceAvailability(DEVICE_AVAILABILITY.SEARCHING); 49 49 + } 50 50 + 51 51 + handleStopConnect() { 52 52 + this.props.deviceActions.disconnectFromDevice(this.props.connectedDevice); 53 53 + this.setState({ isConnectModalOpen: false }); 54 54 + this.props.deviceActions.setDeviceAvailability(DEVICE_AVAILABILITY.NONE); 55 55 + } 56 56 + 57 57 + handleConnectModalClose() { 58 58 + this.setState({ isConnectModalOpen: false }); 59 59 + } 60 60 + 61 61 + render() { 62 62 + return <Grid stretched relaxed padded className={styles.contentGrid} style={{ alignItems: 'center' }}> 63 63 + {this.props.connectionStatus === CONNECTION_STATUS.CONNECTED && <Grid.Row> 64 64 + <Grid.Column stretched width={6}> 65 65 + <SignalQualityIndicatorComponent signalQualityObservable={this.props.signalQualityObservable} plottingInterval={PLOTTING_INTERVAL} /> 66 66 + </Grid.Column> 67 67 + <Grid.Column stretched width={10}> 68 68 + <div className={styles.disconnectButtonContainer}> 69 69 + <Button secondary onClick={this.handleStopConnect}> 70 70 + Disconnect EEG Device 71 71 + </Button> 72 72 + </div> 73 73 + <ViewerComponent signalQualityObservable={this.props.signalQualityObservable} deviceType={this.props.deviceType} plottingInterval={PLOTTING_INTERVAL} /> 74 74 + </Grid.Column> 75 75 + </Grid.Row>} 76 76 + {this.props.connectionStatus !== CONNECTION_STATUS.CONNECTED && <Grid.Row stretched> 77 77 + <Grid.Column stretched width={5}> 78 78 + <Segment basic> 79 79 + <Image src={eegImage} /> 80 80 + </Segment> 81 81 + </Grid.Column> 82 82 + 83 83 + <Grid.Column stretched width={11}> 84 84 + <Segment basic> 85 85 + <Header as='h1'>Explore Raw EEG</Header> 86 86 + <Divider /> 87 87 + <p>Connect directly to an EEG device and view raw streaming data</p> 88 88 + <Button primary onClick={this.handleStartConnect}> 89 89 + Connect 90 90 + </Button> 91 91 + </Segment> 92 92 + </Grid.Column> 93 93 + <ConnectModal history={this.props.history} open={this.state.isConnectModalOpen} onClose={this.handleConnectModalClose} connectedDevice={this.props.connectedDevice} signalQualityObservable={this.props.signalQualityObservable} deviceType={this.props.deviceType} deviceAvailability={this.props.deviceAvailability} connectionStatus={this.props.connectionStatus} deviceActions={this.props.deviceActions} availableDevices={this.props.availableDevices} style={{ marginTop: '100px' }} /> 94 94 + </Grid.Row>} 95 95 + </Grid>; 96 96 + } 97 97 + }

-141

app/components/HomeComponent/OverviewComponent.js

reviewed

··· 1 1 - import React, { Component } from 'react'; 2 2 - import { Grid, Header, Button, Segment } from 'semantic-ui-react'; 3 3 - import { isNil } from 'lodash'; 4 4 - import styles from '../styles/common.css'; 5 5 - import { EXPERIMENTS } from '../../constants/constants'; 6 6 - import SecondaryNavComponent from '../SecondaryNavComponent'; 7 7 - import PreviewExperimentComponent from '../PreviewExperimentComponent'; 8 8 - import PreviewButton from '../PreviewButtonComponent'; 9 9 - import { loadProtocol } from '../../utils/labjs/functions'; 10 10 - 11 11 - const OVERVIEW_STEPS = { 12 12 - OVERVIEW: 'OVERVIEW', 13 13 - BACKGROUND: 'BACKGROUND', 14 14 - PROTOCOL: 'PROTOCOL', 15 15 - }; 16 16 - 17 17 - interface Props { 18 18 - type: EXPERIMENTS; 19 19 - onStartExperiment: (EXPERIMENTS) => void; 20 20 - onCloseOverview: () => void; 21 21 - } 22 22 - 23 23 - interface State { 24 24 - activeStep: OVERVIEW_STEPS; 25 25 - isPreviewing: boolean; 26 26 - } 27 27 - 28 28 - export default class OverviewComponent extends Component<Props, State> { 29 29 - constructor(props) { 30 30 - super(props); 31 31 - this.state = { 32 32 - activeStep: OVERVIEW_STEPS.OVERVIEW, 33 33 - isPreviewing: false, 34 34 - }; 35 35 - this.handleStepClick = this.handleStepClick.bind(this); 36 36 - this.handlePreview = this.handlePreview.bind(this); 37 37 - this.endPreview = this.endPreview.bind(this); 38 38 - } 39 39 - 40 40 - handleStepClick(step: string) { 41 41 - this.setState({ activeStep: step }); 42 42 - } 43 43 - 44 44 - handlePreview(e) { 45 45 - e.target.blur(); 46 46 - this.setState((prevState) => ({ ...prevState, isPreviewing: !prevState.isPreviewing })); 47 47 - } 48 48 - 49 49 - endPreview() { 50 50 - this.setState({ isPreviewing: false }); 51 51 - } 52 52 - 53 53 - renderSectionContent() { 54 54 - switch (this.state.activeStep) { 55 55 - case OVERVIEW_STEPS.PROTOCOL: 56 56 - return ( 57 57 - <Grid relaxed padded className={styles.contentGrid}> 58 58 - <Grid.Column 59 59 - stretched 60 60 - width={12} 61 61 - textAlign='right' 62 62 - verticalAlign='middle' 63 63 - className={styles.previewWindow} 64 64 - > 65 65 - <PreviewExperimentComponent 66 66 - {...loadProtocol(this.props.paradigm)} 67 67 - isPreviewing={this.state.isPreviewing} 68 68 - onEnd={this.endPreview} 69 69 - type={this.props.type} 70 70 - paradigm={this.props.paradigm} 71 71 - /> 72 72 - </Grid.Column> 73 73 - <Grid.Column stretched width={4} verticalAlign='middle'> 74 74 - <Segment as='p' basic> 75 75 - {this.props.protocol} 76 76 - </Segment> 77 77 - <PreviewButton 78 78 - isPreviewing={this.state.isPreviewing} 79 79 - onClick={(e) => this.handlePreview(e)} 80 80 - /> 81 81 - </Grid.Column> 82 82 - </Grid> 83 83 - ); 84 84 - case OVERVIEW_STEPS.BACKGROUND: 85 85 - return ( 86 86 - <Grid stretched relaxed padded className={styles.contentGrid}> 87 87 - <Grid.Column stretched width={6} textAlign='right' verticalAlign='middle'> 88 88 - <Header as='h1'>{this.props.background_title}</Header> 89 89 - </Grid.Column> 90 90 - <Grid.Column stretched width={6} verticalAlign='middle'> 91 91 - <Segment as='p' basic> 92 92 - {this.props.background} 93 93 - </Segment> 94 94 - </Grid.Column> 95 95 - </Grid> 96 96 - ); 97 97 - case OVERVIEW_STEPS.OVERVIEW: 98 98 - default: 99 99 - return ( 100 100 - <Grid stretched relaxed padded className={styles.contentGrid}> 101 101 - <Grid.Column stretched width={6} textAlign='right' verticalAlign='middle'> 102 102 - <Header as='h1'>{this.props.type}</Header> 103 103 - </Grid.Column> 104 104 - <Grid.Column stretched width={6} verticalAlign='middle'> 105 105 - <Segment as='p' basic> 106 106 - {this.props.overview} 107 107 - </Segment> 108 108 - </Grid.Column> 109 109 - </Grid> 110 110 - ); 111 111 - } 112 112 - } 113 113 - 114 114 - render() { 115 115 - return ( 116 116 - <> 117 117 - <Button 118 118 - basic 119 119 - circular 120 120 - size='huge' 121 121 - floated='right' 122 122 - icon='x' 123 123 - className={styles.closeButton} 124 124 - onClick={this.props.onCloseOverview} 125 125 - /> 126 126 - <SecondaryNavComponent 127 127 - title={this.props.type} 128 128 - steps={OVERVIEW_STEPS} 129 129 - activeStep={this.state.activeStep} 130 130 - onStepClick={this.handleStepClick} 131 131 - button={ 132 132 - <Button primary onClick={() => this.props.onStartExperiment(this.props.type)}> 133 133 - Start Experiment 134 134 - </Button> 135 135 - } 136 136 - /> 137 137 - <div className={styles.homeContentContainer}>{this.renderSectionContent()}</div> 138 138 - </> 139 139 - ); 140 140 - } 141 141 - }

+103

app/components/HomeComponent/OverviewComponent.tsx

reviewed

··· 1 1 + import React, { Component } from "react"; 2 2 + import { Grid, Header, Button, Segment } from "semantic-ui-react"; 3 3 + import { isNil } from "lodash"; 4 4 + import styles from "../styles/common.css"; 5 5 + import { EXPERIMENTS } from "../../constants/constants"; 6 6 + import SecondaryNavComponent from "../SecondaryNavComponent"; 7 7 + import PreviewExperimentComponent from "../PreviewExperimentComponent"; 8 8 + import PreviewButton from "../PreviewButtonComponent"; 9 9 + import { loadProtocol } from "../../utils/labjs/functions"; 10 10 + 11 11 + const OVERVIEW_STEPS = { 12 12 + OVERVIEW: 'OVERVIEW', 13 13 + BACKGROUND: 'BACKGROUND', 14 14 + PROTOCOL: 'PROTOCOL' 15 15 + }; 16 16 + 17 17 + interface Props { 18 18 + type: EXPERIMENTS; 19 19 + onStartExperiment: (arg0: EXPERIMENTS) => void; 20 20 + onCloseOverview: () => void; 21 21 + } 22 22 + 23 23 + interface State { 24 24 + activeStep: OVERVIEW_STEPS; 25 25 + isPreviewing: boolean; 26 26 + } 27 27 + 28 28 + export default class OverviewComponent extends Component<Props, State> { 29 29 + 30 30 + constructor(props) { 31 31 + super(props); 32 32 + this.state = { 33 33 + activeStep: OVERVIEW_STEPS.OVERVIEW, 34 34 + isPreviewing: false 35 35 + }; 36 36 + this.handleStepClick = this.handleStepClick.bind(this); 37 37 + this.handlePreview = this.handlePreview.bind(this); 38 38 + this.endPreview = this.endPreview.bind(this); 39 39 + } 40 40 + 41 41 + handleStepClick(step: string) { 42 42 + this.setState({ activeStep: step }); 43 43 + } 44 44 + 45 45 + handlePreview(e) { 46 46 + e.target.blur(); 47 47 + this.setState(prevState => ({ ...prevState, isPreviewing: !prevState.isPreviewing })); 48 48 + } 49 49 + 50 50 + endPreview() { 51 51 + this.setState({ isPreviewing: false }); 52 52 + } 53 53 + 54 54 + renderSectionContent() { 55 55 + switch (this.state.activeStep) { 56 56 + case OVERVIEW_STEPS.PROTOCOL: 57 57 + return <Grid relaxed padded className={styles.contentGrid}> 58 58 + <Grid.Column stretched width={12} textAlign='right' verticalAlign='middle' className={styles.previewWindow}> 59 59 + <PreviewExperimentComponent {...loadProtocol(this.props.paradigm)} isPreviewing={this.state.isPreviewing} onEnd={this.endPreview} type={this.props.type} paradigm={this.props.paradigm} /> 60 60 + </Grid.Column> 61 61 + <Grid.Column stretched width={4} verticalAlign='middle'> 62 62 + <Segment as='p' basic> 63 63 + {this.props.protocol} 64 64 + </Segment> 65 65 + <PreviewButton isPreviewing={this.state.isPreviewing} onClick={e => this.handlePreview(e)} /> 66 66 + </Grid.Column> 67 67 + </Grid>; 68 68 + case OVERVIEW_STEPS.BACKGROUND: 69 69 + return <Grid stretched relaxed padded className={styles.contentGrid}> 70 70 + <Grid.Column stretched width={6} textAlign='right' verticalAlign='middle'> 71 71 + <Header as='h1'>{this.props.background_title}</Header> 72 72 + </Grid.Column> 73 73 + <Grid.Column stretched width={6} verticalAlign='middle'> 74 74 + <Segment as='p' basic> 75 75 + {this.props.background} 76 76 + </Segment> 77 77 + </Grid.Column> 78 78 + </Grid>; 79 79 + case OVERVIEW_STEPS.OVERVIEW:default: 80 80 + return <Grid stretched relaxed padded className={styles.contentGrid}> 81 81 + <Grid.Column stretched width={6} textAlign='right' verticalAlign='middle'> 82 82 + <Header as='h1'>{this.props.type}</Header> 83 83 + </Grid.Column> 84 84 + <Grid.Column stretched width={6} verticalAlign='middle'> 85 85 + <Segment as='p' basic> 86 86 + {this.props.overview} 87 87 + </Segment> 88 88 + </Grid.Column> 89 89 + </Grid>; 90 90 + 91 91 + } 92 92 + } 93 93 + 94 94 + render() { 95 95 + return <> 96 96 + <Button basic circular size='huge' floated='right' icon='x' className={styles.closeButton} onClick={this.props.onCloseOverview} /> 97 97 + <SecondaryNavComponent title={this.props.type} steps={OVERVIEW_STEPS} activeStep={this.state.activeStep} onStepClick={this.handleStepClick} button={<Button primary onClick={() => this.props.onStartExperiment(this.props.type)}> 98 98 + Start Experiment 99 99 + </Button>} /> 100 100 + <div className={styles.homeContentContainer}>{this.renderSectionContent()}</div> 101 101 + </>; 102 102 + } 103 103 + }

+70 -145

app/components/HomeComponent/index.js app/components/HomeComponent/index.tsx

reviewed

··· 1 1 - import React, { Component } from 'react'; 2 2 - import { isNil } from 'lodash'; 3 3 - import { Grid, Button, Header, Segment, Image, Table } from 'semantic-ui-react'; 4 4 - import { toast } from 'react-toastify'; 5 5 - import * as moment from 'moment'; 1 1 + import React, { Component } from "react"; 2 2 + import { isNil } from "lodash"; 3 3 + import { Grid, Button, Header, Segment, Image, Table } from "semantic-ui-react"; 4 4 + import { toast } from "react-toastify"; 5 5 + import * as moment from "moment"; 6 6 7 7 - import styles from '../styles/common.css'; 8 8 - import { 9 9 - EXPERIMENTS, 10 10 - SCREENS, 11 11 - KERNEL_STATUS, 12 12 - CONNECTION_STATUS, 13 13 - DEVICE_AVAILABILITY, 14 14 - } from '../../constants/constants'; 15 15 - import faceHouseIcon from '../../assets/common/FacesHouses.png'; 16 16 - import stroopIcon from '../../assets/common/Stroop.png'; 17 17 - import multitaskingIcon from '../../assets/common/Multitasking.png'; 18 18 - import searchIcon from '../../assets/common/VisualSearch.png'; 19 19 - import customIcon from '../../assets/common/Custom.png'; 20 20 - import appLogo from '../../assets/common/app_logo.png'; 21 21 - import divingMan from '../../assets/common/divingMan.svg'; 22 22 - import { 23 23 - readWorkspaces, 24 24 - readAndParseState, 25 25 - openWorkspaceDir, 26 26 - deleteWorkspaceDir, 27 27 - } from '../../utils/filesystem/storage'; 7 7 + import styles from "../styles/common.css"; 8 8 + import { EXPERIMENTS, SCREENS, KERNEL_STATUS, CONNECTION_STATUS, DEVICE_AVAILABILITY } from "../../constants/constants"; 9 9 + import faceHouseIcon from "../../assets/common/FacesHouses.png"; 10 10 + import stroopIcon from "../../assets/common/Stroop.png"; 11 11 + import multitaskingIcon from "../../assets/common/Multitasking.png"; 12 12 + import searchIcon from "../../assets/common/VisualSearch.png"; 13 13 + import customIcon from "../../assets/common/Custom.png"; 14 14 + import appLogo from "../../assets/common/app_logo.png"; 15 15 + import divingMan from "../../assets/common/divingMan.svg"; 16 16 + import { readWorkspaces, readAndParseState, openWorkspaceDir, deleteWorkspaceDir } from "../../utils/filesystem/storage"; 28 17 29 29 - import InputModal from '../InputModal'; 30 30 - import SecondaryNavComponent from '../SecondaryNavComponent'; 31 31 - import OverviewComponent from './OverviewComponent'; 32 32 - import { loadProtocol } from '../../utils/labjs/functions'; 33 33 - import EEGExplorationComponent from '../EEGExplorationComponent'; 18 18 + import InputModal from "../InputModal"; 19 19 + import SecondaryNavComponent from "../SecondaryNavComponent"; 20 20 + import OverviewComponent from "./OverviewComponent"; 21 21 + import { loadProtocol } from "../../utils/labjs/functions"; 22 22 + import EEGExplorationComponent from "../EEGExplorationComponent"; 34 23 35 35 - import { remote } from 'electron'; 24 24 + import { remote } from "electron"; 36 25 37 37 - const { dialog } = remote; 26 26 + const { 27 27 + dialog 28 28 + } = remote; 38 29 39 30 const HOME_STEPS = { 40 31 // TODO: maybe change the recent and new labels, but not necessary right now 41 32 RECENT: 'MY EXPERIMENTS', 42 33 NEW: 'EXPERIMENT BANK', 43 43 - EXPLORE: 'EXPLORE EEG DATA', 34 34 + EXPLORE: 'EXPLORE EEG DATA' 44 35 }; 45 36 46 37 interface Props { ··· 48 39 history: Object; 49 40 jupyterActions: Object; 50 41 connectedDevice: Object; 51 51 - signalQualityObservable: ?any; 42 42 + signalQualityObservable: any | null | undefined; 52 43 deviceType: DEVICES; 53 44 deviceAvailability: DEVICE_AVAILABILITY; 54 45 connectionStatus: CONNECTION_STATUS; ··· 66 57 } 67 58 68 59 export default class Home extends Component<Props, State> { 69 69 - // props: Props; 70 70 - // state: State; 71 71 - // handleNewExperiment: (EXPERIMENTS) => void; 72 72 - // handleStepClick: (string) => void; 60 60 + 73 61 // handleLoadCustomExperiment: (string) => void; 74 62 // handleOpenOverview: (EXPERIMENTS) => void; 75 63 // handleCloseOverview: () => void; 76 64 // handleDeleteWorkspace: (string) => void; 77 77 - 78 65 constructor(props: Props) { 79 66 super(props); 80 67 this.state = { ··· 82 69 recentWorkspaces: [], 83 70 isNewExperimentModalOpen: false, 84 71 isOverviewComponentOpen: false, 85 85 - overviewExperimentType: EXPERIMENTS.NONE, 72 72 + overviewExperimentType: EXPERIMENTS.NONE 86 73 }; 87 74 this.handleStepClick = this.handleStepClick.bind(this); 88 75 this.handleNewExperiment = this.handleNewExperiment.bind(this); ··· 103 90 handleNewExperiment(experimentType: EXPERIMENTS) { 104 91 if (experimentType === EXPERIMENTS.CUSTOM) { 105 92 this.setState({ 106 106 - isNewExperimentModalOpen: true, 93 93 + isNewExperimentModalOpen: true 107 94 }); 108 95 // If pre-designed experiment, load existing workspace 109 96 } else if (this.state.recentWorkspaces.includes(experimentType)) { ··· 113 100 this.props.experimentActions.createNewWorkspace({ 114 101 title: experimentType, 115 102 type: experimentType, 116 116 - paradigm: experimentType, 103 103 + paradigm: experimentType 117 104 }); 118 105 this.props.history.push(SCREENS.DESIGN.route); 119 106 } ··· 133 120 this.props.experimentActions.createNewWorkspace({ 134 121 title, 135 122 type: EXPERIMENTS.CUSTOM, 136 136 - paradigm: EXPERIMENTS.CUSTOM, 123 123 + paradigm: EXPERIMENTS.CUSTOM 137 124 }); 138 125 this.props.history.push(SCREENS.DESIGN.route); 139 126 } ··· 149 136 handleOpenOverview(type: EXPERIMENTS) { 150 137 this.setState({ 151 138 overviewExperimentType: type, 152 152 - isOverviewComponentOpen: true, 139 139 + isOverviewComponentOpen: true 153 140 }); 154 141 } 155 142 156 143 handleCloseOverview() { 157 144 this.setState({ 158 158 - isOverviewComponentOpen: false, 145 145 + isOverviewComponentOpen: false 159 146 }); 160 147 } 161 148 162 149 handleDeleteWorkspace(dir) { 163 150 const options = { 164 151 buttons: ['No', 'Yes'], 165 165 - message: 'Do you really want to delete the experiment?', 152 152 + message: 'Do you really want to delete the experiment?' 166 153 }; 167 154 const response = dialog.showMessageBox(options); 168 155 if (response === 1) { ··· 175 162 renderSectionContent() { 176 163 switch (this.state.activeStep) { 177 164 case HOME_STEPS.RECENT: 178 178 - return ( 179 179 - <Grid stackable padded columns='equal' className={styles.myExperimentsPage}> 180 180 - {this.state.recentWorkspaces.length > 0 ? ( 181 181 - <Table basic='very'> 165 165 + return <Grid stackable padded columns='equal' className={styles.myExperimentsPage}> 166 166 + {this.state.recentWorkspaces.length > 0 ? <Table basic='very'> 182 167 <Table.Header> 183 168 <Table.Row className={styles.experimentHeaderRow}> 184 169 <Table.HeaderCell className={styles.experimentHeaderName}> ··· 191 176 </Table.Row> 192 177 </Table.Header> 193 178 <Table.Body className={styles.experimentTable}> 194 194 - {this.state.recentWorkspaces 195 195 - .sort((a, b) => { 196 196 - const aTime = readAndParseState(a).params.dateModified || 0; 197 197 - const bTime = readAndParseState(b).params.dateModified || 0; 198 198 - return bTime - aTime; 199 199 - }) 200 200 - .map((dir) => { 201 201 - const { 202 202 - params: { dateModified }, 203 203 - } = readAndParseState(dir); 204 204 - return ( 205 205 - <Table.Row key={dir} className={styles.experimentRow}> 179 179 + {this.state.recentWorkspaces.sort((a, b) => { 180 180 + const aTime = readAndParseState(a).params.dateModified || 0; 181 181 + const bTime = readAndParseState(b).params.dateModified || 0; 182 182 + return bTime - aTime; 183 183 + }).map(dir => { 184 184 + const { 185 185 + params: { 186 186 + dateModified 187 187 + } 188 188 + } = readAndParseState(dir); 189 189 + return <Table.Row key={dir} className={styles.experimentRow}> 206 190 <Table.Cell className={styles.experimentRowName}>{dir}</Table.Cell> 207 191 <Table.Cell className={styles.experimentRowName}> 208 192 {dateModified && moment.default(dateModified).fromNow()} ··· 218 202 Open Experiment 219 203 </Button> 220 204 </Table.Cell> 221 221 - </Table.Row> 222 222 - ); 223 223 - })} 205 205 + </Table.Row>; 206 206 + })} 224 207 </Table.Body> 225 225 - </Table> 226 226 - ) : ( 227 227 - <Grid.Column textAlign='center'> 208 208 + </Table> : <Grid.Column textAlign='center'> 228 209 <Image src={divingMan} centered className={styles.noExperimentsImage} /> 229 210 <Header className={styles.noExperimentsTitle}> 230 211 You don&apos;t have any experiments yet ··· 235 216 <Button primary onClick={() => this.handleStepClick('EXPERIMENT BANK')}> 236 217 View Experiments 237 218 </Button> 238 238 - </Grid.Column> 239 239 - )} 240 240 - </Grid> 241 241 - ); 242 242 - case HOME_STEPS.NEW: 243 243 - default: 244 244 - return ( 245 245 - <Grid columns='two' relaxed padded> 219 219 + </Grid.Column>} 220 220 + </Grid>; 221 221 + case HOME_STEPS.NEW:default: 222 222 + return <Grid columns='two' relaxed padded> 246 223 <Grid.Row> 247 224 <Grid.Column> 248 225 <Segment> 249 249 - <Grid 250 250 - columns='two' 251 251 - className={styles.experimentCard} 252 252 - onClick={() => this.handleNewExperiment(EXPERIMENTS.N170)} 253 253 - > 226 226 + <Grid columns='two' className={styles.experimentCard} onClick={() => this.handleNewExperiment(EXPERIMENTS.N170)}> 254 227 <Grid.Row> 255 228 <Grid.Column width={4} className={styles.experimentCardImage}> 256 229 <Image src={faceHouseIcon} /> ··· 273 246 274 247 <Grid.Column> 275 248 <Segment> 276 276 - <Grid 277 277 - columns='two' 278 278 - className={styles.experimentCard} 279 279 - onClick={() => this.handleNewExperiment(EXPERIMENTS.STROOP)} 280 280 - > 249 249 + <Grid columns='two' className={styles.experimentCard} onClick={() => this.handleNewExperiment(EXPERIMENTS.STROOP)}> 281 250 <Grid.Row> 282 251 <Grid.Column width={4} className={styles.experimentCardImage}> 283 252 <Image src={stroopIcon} /> ··· 302 271 <Grid.Row> 303 272 <Grid.Column> 304 273 <Segment> 305 305 - <Grid 306 306 - columns='two' 307 307 - className={styles.experimentCard} 308 308 - onClick={() => this.handleNewExperiment(EXPERIMENTS.MULTI)} 309 309 - > 274 274 + <Grid columns='two' className={styles.experimentCard} onClick={() => this.handleNewExperiment(EXPERIMENTS.MULTI)}> 310 275 <Grid.Row> 311 276 <Grid.Column width={4} className={styles.experimentCardImage}> 312 277 <Image src={multitaskingIcon} /> ··· 329 294 330 295 <Grid.Column> 331 296 <Segment> 332 332 - <Grid 333 333 - columns='two' 334 334 - className={styles.experimentCard} 335 335 - onClick={() => this.handleNewExperiment(EXPERIMENTS.SEARCH)} 336 336 - > 297 297 + <Grid columns='two' className={styles.experimentCard} onClick={() => this.handleNewExperiment(EXPERIMENTS.SEARCH)}> 337 298 <Grid.Row> 338 299 <Grid.Column width={4} className={styles.experimentCardImage}> 339 300 <Image src={searchIcon} /> ··· 355 316 <Grid.Row> 356 317 <Grid.Column> 357 318 <Segment> 358 358 - <Grid 359 359 - columns='two' 360 360 - className={styles.experimentCard} 361 361 - onClick={() => this.handleNewExperiment(EXPERIMENTS.CUSTOM)} 362 362 - > 319 319 + <Grid columns='two' className={styles.experimentCard} onClick={() => this.handleNewExperiment(EXPERIMENTS.CUSTOM)}> 363 320 <Grid.Row> 364 321 <Grid.Column width={4} className={styles.experimentCardImage}> 365 322 <Image src={customIcon} /> ··· 379 336 380 337 <Grid.Column /> 381 338 </Grid.Row> 382 382 - </Grid> 383 383 - ); 339 339 + </Grid>; 384 340 case HOME_STEPS.EXPLORE: 385 385 - return ( 386 386 - <EEGExplorationComponent 387 387 - history={this.props.history} 388 388 - connectedDevice={this.props.connectedDevice} 389 389 - signalQualityObservable={this.props.signalQualityObservable} 390 390 - deviceType={this.props.deviceType} 391 391 - deviceAvailability={this.props.deviceAvailability} 392 392 - connectionStatus={this.props.connectionStatus} 393 393 - availableDevices={this.props.availableDevices} 394 394 - deviceActions={this.props.deviceActions} 395 395 - /> 396 396 - ); 341 341 + return <EEGExplorationComponent history={this.props.history} connectedDevice={this.props.connectedDevice} signalQualityObservable={this.props.signalQualityObservable} deviceType={this.props.deviceType} deviceAvailability={this.props.deviceAvailability} connectionStatus={this.props.connectionStatus} availableDevices={this.props.availableDevices} deviceActions={this.props.deviceActions} />; 342 342 + 397 343 } 398 344 } 399 345 400 346 renderOverviewOrHome() { 401 347 if (this.state.isOverviewComponentOpen) { 402 402 - return ( 403 403 - <OverviewComponent 404 404 - {...loadProtocol(this.state.overviewExperimentType)} 405 405 - type={this.state.overviewExperimentType} 406 406 - onStartExperiment={this.handleNewExperiment} 407 407 - onCloseOverview={this.handleCloseOverview} 408 408 - /> 409 409 - ); 348 348 + return <OverviewComponent {...loadProtocol(this.state.overviewExperimentType)} type={this.state.overviewExperimentType} onStartExperiment={this.handleNewExperiment} onCloseOverview={this.handleCloseOverview} />; 410 349 } 411 411 - return ( 412 412 - <> 413 413 - <SecondaryNavComponent 414 414 - title={<Image src={appLogo} />} 415 415 - steps={HOME_STEPS} 416 416 - activeStep={this.state.activeStep} 417 417 - onStepClick={this.handleStepClick} 418 418 - /> 350 350 + return <> 351 351 + <SecondaryNavComponent title={<Image src={appLogo} />} steps={HOME_STEPS} activeStep={this.state.activeStep} onStepClick={this.handleStepClick} /> 419 352 <div className={styles.homeContentContainer}>{this.renderSectionContent()}</div> 420 420 - </> 421 421 - ); 353 353 + </>; 422 354 } 423 355 424 356 render() { 425 425 - return ( 426 426 - <div className={styles.mainContainer} data-tid='container'> 357 357 + return <div className={styles.mainContainer} data-tid='container'> 427 358 {this.renderOverviewOrHome()} 428 428 - <InputModal 429 429 - open={this.state.isNewExperimentModalOpen} 430 430 - onClose={this.handleLoadCustomExperiment} 431 431 - onExit={() => this.setState({ isNewExperimentModalOpen: false })} 432 432 - header='Enter a title for this experiment' 433 433 - /> 434 434 - </div> 435 435 - ); 359 359 + <InputModal open={this.state.isNewExperimentModalOpen} onClose={this.handleLoadCustomExperiment} onExit={() => this.setState({ isNewExperimentModalOpen: false })} header='Enter a title for this experiment' /> 360 360 + </div>; 436 361 } 437 437 - } 362 362 + }

-132

app/components/InputCollect.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { Input, Modal, Button } from 'semantic-ui-react'; 4 4 - import { debounce } from 'lodash'; 5 5 - import styles from './styles/common.css'; 6 6 - 7 7 - interface Props { 8 8 - open: boolean; 9 9 - onClose: (string) => void; 10 10 - onExit: (string) => void; 11 11 - header: string; 12 12 - } 13 13 - 14 14 - interface State { 15 15 - subject: string; 16 16 - group: string; 17 17 - session: number; 18 18 - isError: boolean; 19 19 - isSubjectError: boolean; 20 20 - isSessionError: boolean; 21 21 - } 22 22 - 23 23 - export default class InputCollect extends Component<Props, State> { 24 24 - // props: Props; 25 25 - // state: State; 26 26 - // handleTextEntry: (Object, Object, string) => void; 27 27 - // handleClose: () => void; 28 28 - // handleExit: () => void; 29 29 - // handleEnterSubmit: (Object) => void; 30 30 - 31 31 - constructor(props: Props) { 32 32 - super(props); 33 33 - this.state = { 34 34 - subject: this.props.data && this.props.data.subject, 35 35 - group: this.props.data && this.props.data.group, 36 36 - session: this.props.data && this.props.data.session, 37 37 - isError: false, 38 38 - isSubjectError: false, 39 39 - isSessionError: false, 40 40 - }; 41 41 - this.handleTextEntry = this.handleTextEntry.bind(this); 42 42 - this.handleClose = this.handleClose.bind(this); 43 43 - this.handleEnterSubmit = this.handleEnterSubmit.bind(this); 44 44 - this.handleExit = this.handleExit.bind(this); 45 45 - } 46 46 - 47 47 - sanitizeTextInput(text: string) { 48 48 - return text.replace(/[|&;$%@"<>()+,./]/g, ''); 49 49 - } 50 50 - 51 51 - handleTextEntry(event, data, field) { 52 52 - const val = field === 'session' ? parseInt(data.value) : data.value; 53 53 - this.setState({ [field]: val }); 54 54 - } 55 55 - 56 56 - handleClose() { 57 57 - if (this.state.subject.length >= 1 && this.state.session) { 58 58 - this.props.onClose( 59 59 - this.sanitizeTextInput(this.state.subject), 60 60 - this.sanitizeTextInput(this.state.group), 61 61 - this.state.session 62 62 - ); 63 63 - } else { 64 64 - if(this.state.subject.length < 1) { 65 65 - this.setState({ isSubjectError: true }); 66 66 - } 67 67 - if(!this.state.session) { 68 68 - this.setState({ isSessionError: true }); 69 69 - } 70 70 - } 71 71 - } 72 72 - 73 73 - handleExit() { 74 74 - this.props.onExit(); 75 75 - } 76 76 - 77 77 - handleEnterSubmit(event: Object) { 78 78 - if (event.key === 'Enter') { 79 79 - this.handleClose(); 80 80 - } 81 81 - } 82 82 - 83 83 - render() { 84 84 - return ( 85 85 - <Modal 86 86 - dimmer='inverted' 87 87 - centered 88 88 - className={styles.inputModal} 89 89 - open={this.props.open} 90 90 - onClose={this.handleExit} 91 91 - > 92 92 - <Modal.Content> 93 93 - Enter Subject ID 94 94 - <Input 95 95 - focus 96 96 - fluid 97 97 - error={this.state.isSubjectError} 98 98 - onChange={(object, data) => this.handleTextEntry(object, data, 'subject')} 99 99 - onKeyDown={this.handleEnterSubmit} 100 100 - value={this.state.subject} 101 101 - autoFocus 102 102 - /> 103 103 - </Modal.Content> 104 104 - <Modal.Content> 105 105 - Enter group name (optional) 106 106 - <Input 107 107 - focus 108 108 - fluid 109 109 - onChange={(object, data) => this.handleTextEntry(object, data, 'group')} 110 110 - onKeyDown={this.handleEnterSubmit} 111 111 - value={this.state.group} 112 112 - /> 113 113 - </Modal.Content> 114 114 - <Modal.Content> 115 115 - Enter session number 116 116 - <Input 117 117 - focus 118 118 - fluid 119 119 - error={this.state.isSessionError} 120 120 - onChange={(object, data) => this.handleTextEntry(object, data, 'session')} 121 121 - onKeyDown={this.handleEnterSubmit} 122 122 - value={this.state.session} 123 123 - type="number" 124 124 - /> 125 125 - </Modal.Content> 126 126 - <Modal.Actions> 127 127 - <Button color='blue' content='OK' onClick={this.handleClose} /> 128 128 - </Modal.Actions> 129 129 - </Modal> 130 130 - ); 131 131 - } 132 132 - }

+95

app/components/InputCollect.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Input, Modal, Button } from "semantic-ui-react"; 4 4 + import { debounce } from "lodash"; 5 5 + import styles from "./styles/common.css"; 6 6 + 7 7 + interface Props { 8 8 + open: boolean; 9 9 + onClose: (arg0: string) => void; 10 10 + onExit: (arg0: string) => void; 11 11 + header: string; 12 12 + } 13 13 + 14 14 + interface State { 15 15 + subject: string; 16 16 + group: string; 17 17 + session: number; 18 18 + isError: boolean; 19 19 + isSubjectError: boolean; 20 20 + isSessionError: boolean; 21 21 + } 22 22 + 23 23 + export default class InputCollect extends Component<Props, State> { 24 24 + 25 25 + // handleClose: () => void; 26 26 + // handleExit: () => void; 27 27 + // handleEnterSubmit: (Object) => void; 28 28 + constructor(props: Props) { 29 29 + super(props); 30 30 + this.state = { 31 31 + subject: this.props.data && this.props.data.subject, 32 32 + group: this.props.data && this.props.data.group, 33 33 + session: this.props.data && this.props.data.session, 34 34 + isError: false, 35 35 + isSubjectError: false, 36 36 + isSessionError: false 37 37 + }; 38 38 + this.handleTextEntry = this.handleTextEntry.bind(this); 39 39 + this.handleClose = this.handleClose.bind(this); 40 40 + this.handleEnterSubmit = this.handleEnterSubmit.bind(this); 41 41 + this.handleExit = this.handleExit.bind(this); 42 42 + } 43 43 + 44 44 + sanitizeTextInput(text: string) { 45 45 + return text.replace(/[|&;$%@"<>()+,./]/g, ''); 46 46 + } 47 47 + 48 48 + handleTextEntry(event, data, field) { 49 49 + const val = field === 'session' ? parseInt(data.value) : data.value; 50 50 + this.setState({ [field]: val }); 51 51 + } 52 52 + 53 53 + handleClose() { 54 54 + if (this.state.subject.length >= 1 && this.state.session) { 55 55 + this.props.onClose(this.sanitizeTextInput(this.state.subject), this.sanitizeTextInput(this.state.group), this.state.session); 56 56 + } else { 57 57 + if (this.state.subject.length < 1) { 58 58 + this.setState({ isSubjectError: true }); 59 59 + } 60 60 + if (!this.state.session) { 61 61 + this.setState({ isSessionError: true }); 62 62 + } 63 63 + } 64 64 + } 65 65 + 66 66 + handleExit() { 67 67 + this.props.onExit(); 68 68 + } 69 69 + 70 70 + handleEnterSubmit(event: Object) { 71 71 + if (event.key === 'Enter') { 72 72 + this.handleClose(); 73 73 + } 74 74 + } 75 75 + 76 76 + render() { 77 77 + return <Modal dimmer='inverted' centered className={styles.inputModal} open={this.props.open} onClose={this.handleExit}> 78 78 + <Modal.Content> 79 79 + Enter Subject ID 80 80 + <Input focus fluid error={this.state.isSubjectError} onChange={(object, data) => this.handleTextEntry(object, data, 'subject')} onKeyDown={this.handleEnterSubmit} value={this.state.subject} autoFocus /> 81 81 + </Modal.Content> 82 82 + <Modal.Content> 83 83 + Enter group name (optional) 84 84 + <Input focus fluid onChange={(object, data) => this.handleTextEntry(object, data, 'group')} onKeyDown={this.handleEnterSubmit} value={this.state.group} /> 85 85 + </Modal.Content> 86 86 + <Modal.Content> 87 87 + Enter session number 88 88 + <Input focus fluid error={this.state.isSessionError} onChange={(object, data) => this.handleTextEntry(object, data, 'session')} onKeyDown={this.handleEnterSubmit} value={this.state.session} type="number" /> 89 89 + </Modal.Content> 90 90 + <Modal.Actions> 91 91 + <Button color='blue' content='OK' onClick={this.handleClose} /> 92 92 + </Modal.Actions> 93 93 + </Modal>; 94 94 + } 95 95 + }

+13 -31

app/components/InputModal.js app/components/InputModal.tsx

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { Input, Modal, Button } from 'semantic-ui-react'; 4 4 - import { debounce } from 'lodash'; 5 5 - import styles from './styles/common.css'; 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Input, Modal, Button } from "semantic-ui-react"; 4 4 + import { debounce } from "lodash"; 5 5 + import styles from "./styles/common.css"; 6 6 7 7 interface Props { 8 8 open: boolean; 9 9 - onClose: (string) => void; 10 10 - onExit: (string) => void; 9 9 + onClose: (arg0: string) => void; 10 10 + onExit: (arg0: string) => void; 11 11 header: string; 12 12 } 13 13 ··· 17 17 } 18 18 19 19 export default class InputModal extends Component<Props, State> { 20 20 - // props: Props; 21 21 - // state: State; 22 22 - // handleTextEntry: (Object, Object) => void; 20 20 + 23 21 // handleClose: () => void; 24 22 // handleExit: () => void; 25 23 // handleEnterSubmit: (Object) => void; 26 26 - 27 24 constructor(props: Props) { 28 25 super(props); 29 26 this.state = { 30 27 enteredText: '', 31 31 - isError: false, 28 28 + isError: false 32 29 }; 33 30 this.handleTextEntry = debounce(this.handleTextEntry, 100).bind(this); 34 31 this.handleClose = this.handleClose.bind(this); ··· 62 59 } 63 60 64 61 render() { 65 65 - return ( 66 66 - <Modal 67 67 - dimmer='inverted' 68 68 - centered 69 69 - className={styles.inputModal} 70 70 - open={this.props.open} 71 71 - onClose={this.handleExit} 72 72 - > 62 62 + return <Modal dimmer='inverted' centered className={styles.inputModal} open={this.props.open} onClose={this.handleExit}> 73 63 <Modal.Content>{this.props.header}</Modal.Content> 74 64 <Modal.Content> 75 75 - <Input 76 76 - focus 77 77 - fluid 78 78 - error={this.state.isError} 79 79 - onChange={this.handleTextEntry} 80 80 - onKeyDown={this.handleEnterSubmit} 81 81 - autoFocus 82 82 - /> 65 65 + <Input focus fluid error={this.state.isError} onChange={this.handleTextEntry} onKeyDown={this.handleEnterSubmit} autoFocus /> 83 66 </Modal.Content> 84 67 <Modal.Actions> 85 68 <Button color='blue' content='OK' onClick={this.handleClose} /> 86 69 </Modal.Actions> 87 87 - </Modal> 88 88 - ); 70 70 + </Modal>; 89 71 } 90 90 - } 72 72 + }

+20 -23

app/components/JupyterPlotWidget.js app/components/JupyterPlotWidget.tsx

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { Segment, Button } from 'semantic-ui-react'; 4 4 - import { richestMimetype, standardDisplayOrder, standardTransforms } from '@nteract/transforms'; 5 5 - import { isNil } from 'lodash'; 6 6 - import { storeJupyterImage } from '../utils/filesystem/storage'; 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Segment, Button } from "semantic-ui-react"; 4 4 + import { richestMimetype, standardDisplayOrder, standardTransforms } from "@nteract/transforms"; 5 5 + import { isNil } from "lodash"; 6 6 + import { storeJupyterImage } from "../utils/filesystem/storage"; 7 7 8 8 interface Props { 9 9 title: string; 10 10 imageTitle: string; 11 11 - plotMIMEBundle: ?{ [string]: string }; 11 11 + plotMIMEBundle: { 12 12 + [key: string]: string; 13 13 + } | null | undefined; 12 14 } 13 15 14 16 interface State { ··· 17 19 } 18 20 19 21 export default class JupyterPlotWidget extends Component<Props, State> { 20 20 - // props: Props; 22 22 + 21 23 // state: State; 22 24 constructor(props: Props) { 23 25 super(props); 24 26 this.state = { 25 27 rawData: '', 26 26 - mimeType: '', 28 28 + mimeType: '' 27 29 }; 28 30 this.handleSave = this.handleSave.bind(this); 29 31 } 30 32 31 33 componentDidUpdate(prevProps: Props) { 32 32 - if ( 33 33 - this.props.plotMIMEBundle !== prevProps.plotMIMEBundle && 34 34 - !isNil(this.props.plotMIMEBundle) 35 35 - ) { 36 36 - const bundle: { [string]: string } = this.props.plotMIMEBundle; 34 34 + if (this.props.plotMIMEBundle !== prevProps.plotMIMEBundle && !isNil(this.props.plotMIMEBundle)) { 35 35 + const bundle: { 36 36 + [key: string]: string; 37 37 + } = this.props.plotMIMEBundle; 37 38 const mimeType = richestMimetype(bundle, standardDisplayOrder, standardTransforms); 38 39 if (mimeType) { 39 40 this.setState({ rawData: bundle[mimeType], mimeType }); ··· 55 56 56 57 renderSaveButton() { 57 58 if (this.state.rawData) { 58 58 - return ( 59 59 - <Button primary size='tiny' onClick={this.handleSave}> 59 59 + return <Button primary size='tiny' onClick={this.handleSave}> 60 60 Save Image 61 61 - </Button> 62 62 - ); 61 61 + </Button>; 63 62 } 64 63 } 65 64 66 65 render() { 67 67 - return ( 68 68 - <Segment basic> 66 66 + return <Segment basic> 69 67 {this.renderResults()} 70 68 {this.renderSaveButton()} 71 71 - </Segment> 72 72 - ); 69 69 + </Segment>; 73 70 } 74 74 - } 71 71 + }

-24

app/components/PreviewButtonComponent.js

reviewed

··· 1 1 - import React, { PureComponent } from 'react'; 2 2 - import { Button } from 'semantic-ui-react'; 3 3 - 4 4 - interface Props { 5 5 - isPreviewing: boolean; 6 6 - onClick: () => void; 7 7 - } 8 8 - 9 9 - export default class PreviewButton extends PureComponent<Props> { 10 10 - render() { 11 11 - if (!this.props.isPreviewing) { 12 12 - return ( 13 13 - <Button secondary onClick={this.props.onClick}> 14 14 - Preview Experiment 15 15 - </Button> 16 16 - ); 17 17 - } 18 18 - return ( 19 19 - <Button negative onClick={this.props.onClick}> 20 20 - Stop Preview 21 21 - </Button> 22 22 - ); 23 23 - } 24 24 - }

+21

app/components/PreviewButtonComponent.tsx

reviewed

··· 1 1 + import React, { PureComponent } from "react"; 2 2 + import { Button } from "semantic-ui-react"; 3 3 + 4 4 + interface Props { 5 5 + isPreviewing: boolean; 6 6 + onClick: () => void; 7 7 + } 8 8 + 9 9 + export default class PreviewButton extends PureComponent<Props> { 10 10 + 11 11 + render() { 12 12 + if (!this.props.isPreviewing) { 13 13 + return <Button secondary onClick={this.props.onClick}> 14 14 + Preview Experiment 15 15 + </Button>; 16 16 + } 17 17 + return <Button negative onClick={this.props.onClick}> 18 18 + Stop Preview 19 19 + </Button>; 20 20 + } 21 21 + }

-57

app/components/PreviewExperimentComponent.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { Segment } from 'semantic-ui-react'; 4 4 - import { ExperimentWindow } from '../utils/labjs'; 5 5 - import styles from './styles/collect.css'; 6 6 - 7 7 - import { getImages } from '../utils/filesystem/storage'; 8 8 - import { MainTimeline, Trial, ExperimentParameters } from '../constants/interfaces'; 9 9 - 10 10 - interface Props { 11 11 - params: ExperimentParameters; 12 12 - isPreviewing: boolean; 13 13 - mainTimeline: MainTimeline; 14 14 - trials: { [string]: Trial }; 15 15 - timelines: {}; 16 16 - } 17 17 - 18 18 - export default class PreviewExperimentComponent extends Component<Props> { 19 19 - // props: Props; 20 20 - 21 21 - constructor(props: Props) { 22 22 - super(props); 23 23 - } 24 24 - 25 25 - handleImages() { 26 26 - return getImages(this.props.params); 27 27 - } 28 28 - 29 29 - insertPreviewLabJsCallback(e) { 30 30 - console.log('EEG marker', e); 31 31 - } 32 32 - 33 33 - render() { 34 34 - if (!this.props.isPreviewing) { 35 35 - return ( 36 36 - <div className={styles.previewPlaceholder}> 37 37 - <Segment basic> The experiment will be shown in the window </Segment> 38 38 - </div> 39 39 - ) 40 40 - } 41 41 - return ( 42 42 - <div className={styles.previewExpComponent}> 43 43 - <ExperimentWindow 44 44 - settings={{ 45 45 - title: this.props.title, 46 46 - script: this.props.paradigm, 47 47 - params: this.props.previewParams || this.props.params, 48 48 - eventCallback: this.insertPreviewLabJsCallback, 49 49 - on_finish: (csv) => { 50 50 - this.props.onEnd(); 51 51 - }, 52 52 - }} 53 53 - /> 54 54 - </div> 55 55 - ); 56 56 - } 57 57 - }

+53

app/components/PreviewExperimentComponent.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Segment } from "semantic-ui-react"; 4 4 + import { ExperimentWindow } from "../utils/labjs"; 5 5 + import styles from "./styles/collect.css"; 6 6 + 7 7 + import { getImages } from "../utils/filesystem/storage"; 8 8 + import { MainTimeline, Trial, ExperimentParameters } from "../constants/interfaces"; 9 9 + 10 10 + interface Props { 11 11 + params: ExperimentParameters; 12 12 + isPreviewing: boolean; 13 13 + mainTimeline: MainTimeline; 14 14 + trials: { 15 15 + [key: string]: Trial; 16 16 + }; 17 17 + timelines: {}; 18 18 + } 19 19 + 20 20 + export default class PreviewExperimentComponent extends Component<Props> { 21 21 + // props: Props; 22 22 + 23 23 + constructor(props: Props) { 24 24 + super(props); 25 25 + } 26 26 + 27 27 + handleImages() { 28 28 + return getImages(this.props.params); 29 29 + } 30 30 + 31 31 + insertPreviewLabJsCallback(e) { 32 32 + console.log('EEG marker', e); 33 33 + } 34 34 + 35 35 + render() { 36 36 + if (!this.props.isPreviewing) { 37 37 + return <div className={styles.previewPlaceholder}> 38 38 + <Segment basic> The experiment will be shown in the window </Segment> 39 39 + </div>; 40 40 + } 41 41 + return <div className={styles.previewExpComponent}> 42 42 + <ExperimentWindow settings={{ 43 43 + title: this.props.title, 44 44 + script: this.props.paradigm, 45 45 + params: this.props.previewParams || this.props.params, 46 46 + eventCallback: this.insertPreviewLabJsCallback, 47 47 + on_finish: csv => { 48 48 + this.props.onEnd(); 49 49 + } 50 50 + }} /> 51 51 + </div>; 52 52 + } 53 53 + }

-27

app/components/SecondaryNavComponent/SecondaryNavSegment.js

reviewed

··· 1 1 - import React, { Component } from 'react'; 2 2 - import { Grid } from 'semantic-ui-react'; 3 3 - import styles from '../styles/secondarynav.css'; 4 4 - 5 5 - interface Props { 6 6 - title: string; 7 7 - style: string; 8 8 - onClick: () => void; 9 9 - } 10 10 - 11 11 - export default class SecondaryNavSegment extends Component<Props> { 12 12 - // props: Props; 13 13 - 14 14 - render() { 15 15 - return ( 16 16 - <Grid.Column 17 17 - as='a' 18 18 - onClick={this.props.onClick} 19 19 - textAlign='center' 20 20 - verticalAlign='bottom' 21 21 - className={[this.props.style, styles.secondaryNavSegment].join(' ')} 22 22 - > 23 23 - {this.props.title} 24 24 - </Grid.Column> 25 25 - ); 26 26 - } 27 27 - }

+19

app/components/SecondaryNavComponent/SecondaryNavSegment.tsx

reviewed

··· 1 1 + import React, { Component } from "react"; 2 2 + import { Grid } from "semantic-ui-react"; 3 3 + import styles from "../styles/secondarynav.css"; 4 4 + 5 5 + interface Props { 6 6 + title: string; 7 7 + style: string; 8 8 + onClick: () => void; 9 9 + } 10 10 + 11 11 + export default class SecondaryNavSegment extends Component<Props> { 12 12 + // props: Props; 13 13 + 14 14 + render() { 15 15 + return <Grid.Column as='a' onClick={this.props.onClick} textAlign='center' verticalAlign='bottom' className={[this.props.style, styles.secondaryNavSegment].join(' ')}> 16 16 + {this.props.title} 17 17 + </Grid.Column>; 18 18 + } 19 19 + }

-82

app/components/SecondaryNavComponent/index.js

reviewed

··· 1 1 - import React, { Component } from 'react'; 2 2 - import { Grid, Header, Dropdown } from 'semantic-ui-react'; 3 3 - import styles from '../styles/secondarynav.css'; 4 4 - import SecondaryNavSegment from './SecondaryNavSegment'; 5 5 - import { NavLink } from 'react-router-dom'; 6 6 - import { SCREENS } from '../../constants/constants'; 7 7 - 8 8 - interface Props { 9 9 - title: string | React.ReactNode; 10 10 - steps: { [string]: string }; 11 11 - activeStep: string; 12 12 - onStepClick: (string) => void; 13 13 - button?: React.ReactNode; 14 14 - } 15 15 - 16 16 - export default class SecondaryNavComponent extends Component<Props> { 17 17 - shouldComponentUpdate(nextProps) { 18 18 - return nextProps.activeStep !== this.props.activeStep; 19 19 - } 20 20 - 21 21 - renderTitle() { 22 22 - if (typeof this.props.title === 'string') { 23 23 - return <Header className={styles.secondaryNavContainerExpName}>{this.props.title}</Header>; 24 24 - } 25 25 - return this.props.title; 26 26 - } 27 27 - 28 28 - renderSteps() { 29 29 - return ( 30 30 - <> 31 31 - {Object.values(this.props.steps).map((stepTitle) => ( 32 32 - <SecondaryNavSegment 33 33 - key={stepTitle} 34 34 - title={stepTitle} 35 35 - style={ 36 36 - this.props.activeStep === stepTitle 37 37 - ? styles.activeSecondaryNavSegment 38 38 - : styles.inactiveSecondaryNavSegment 39 39 - } 40 40 - onClick={() => this.props.onStepClick(stepTitle)} 41 41 - /> 42 42 - ))} 43 43 - </> 44 44 - ); 45 45 - } 46 46 - 47 47 - render() { 48 48 - return ( 49 49 - <Grid verticalAlign='middle' className={styles.secondaryNavContainer}> 50 50 - <Grid.Column width={3} verticalAlign='bottom'> 51 51 - {this.renderTitle()} 52 52 - </Grid.Column> 53 53 - 54 54 - {this.renderSteps()} 55 55 - 56 56 - {this.props.enableEEGToggle && ( 57 57 - <Grid.Column width={2} floated='right'> 58 58 - <div className={styles.settingsButtons}> 59 59 - <Dropdown icon='setting' direction='left' fluid className={styles.dropdownSettings}> 60 60 - <Dropdown.Menu className={styles.dropdownMenu}> 61 61 - <Dropdown.Item 62 62 - className={styles.dropdownItem} 63 63 - onClick={(e) => e.stopPropagation()} 64 64 - > 65 65 - <div>Enable EEG</div> 66 66 - {this.props.enableEEGToggle} 67 67 - </Dropdown.Item> 68 68 - <Dropdown.Item> 69 69 - <NavLink to={SCREENS.HOME.route}> 70 70 - <p>Exit Experiment</p> 71 71 - </NavLink> 72 72 - </Dropdown.Item> 73 73 - </Dropdown.Menu> 74 74 - </Dropdown> 75 75 - {this.props.saveButton} 76 76 - </div> 77 77 - </Grid.Column> 78 78 - )} 79 79 - </Grid> 80 80 - ); 81 81 - } 82 82 - }

+65

app/components/SecondaryNavComponent/index.tsx

reviewed

··· 1 1 + import React, { Component } from "react"; 2 2 + import { Grid, Header, Dropdown } from "semantic-ui-react"; 3 3 + import styles from "../styles/secondarynav.css"; 4 4 + import SecondaryNavSegment from "./SecondaryNavSegment"; 5 5 + import { NavLink } from "react-router-dom"; 6 6 + import { SCREENS } from "../../constants/constants"; 7 7 + 8 8 + interface Props { 9 9 + title: string | React.ReactNode; 10 10 + steps: { 11 11 + [key: string]: string; 12 12 + }; 13 13 + activeStep: string; 14 14 + onStepClick: (arg0: string) => void; 15 15 + button?: React.ReactNode; 16 16 + } 17 17 + 18 18 + export default class SecondaryNavComponent extends Component<Props> { 19 19 + 20 20 + shouldComponentUpdate(nextProps) { 21 21 + return nextProps.activeStep !== this.props.activeStep; 22 22 + } 23 23 + 24 24 + renderTitle() { 25 25 + if (typeof this.props.title === 'string') { 26 26 + return <Header className={styles.secondaryNavContainerExpName}>{this.props.title}</Header>; 27 27 + } 28 28 + return this.props.title; 29 29 + } 30 30 + 31 31 + renderSteps() { 32 32 + return <> 33 33 + {Object.values(this.props.steps).map(stepTitle => <SecondaryNavSegment key={stepTitle} title={stepTitle} style={this.props.activeStep === stepTitle ? styles.activeSecondaryNavSegment : styles.inactiveSecondaryNavSegment} onClick={() => this.props.onStepClick(stepTitle)} />)} 34 34 + </>; 35 35 + } 36 36 + 37 37 + render() { 38 38 + return <Grid verticalAlign='middle' className={styles.secondaryNavContainer}> 39 39 + <Grid.Column width={3} verticalAlign='bottom'> 40 40 + {this.renderTitle()} 41 41 + </Grid.Column> 42 42 + 43 43 + {this.renderSteps()} 44 44 + 45 45 + {this.props.enableEEGToggle && <Grid.Column width={2} floated='right'> 46 46 + <div className={styles.settingsButtons}> 47 47 + <Dropdown icon='setting' direction='left' fluid className={styles.dropdownSettings}> 48 48 + <Dropdown.Menu className={styles.dropdownMenu}> 49 49 + <Dropdown.Item className={styles.dropdownItem} onClick={e => e.stopPropagation()}> 50 50 + <div>Enable EEG</div> 51 51 + {this.props.enableEEGToggle} 52 52 + </Dropdown.Item> 53 53 + <Dropdown.Item> 54 54 + <NavLink to={SCREENS.HOME.route}> 55 55 + <p>Exit Experiment</p> 56 56 + </NavLink> 57 57 + </Dropdown.Item> 58 58 + </Dropdown.Menu> 59 59 + </Dropdown> 60 60 + {this.props.saveButton} 61 61 + </div> 62 62 + </Grid.Column>} 63 63 + </Grid>; 64 64 + } 65 65 + }

-70

app/components/SignalQualityIndicatorComponent.js

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { isNil } from 'lodash'; 4 4 - import { Segment } from 'semantic-ui-react'; 5 5 - import * as d3 from 'd3'; 6 6 - import { Observable } from 'rxjs'; 7 7 - import SignalQualityIndicatorSVG from './svgs/SignalQualityIndicatorSVG'; 8 8 - 9 9 - interface Props { 10 10 - signalQualityObservable: ?Observable; 11 11 - plottingInterval: ?number; 12 12 - } 13 13 - 14 14 - class SignalQualityIndicatorComponent extends Component<Props> { 15 15 - // signalQualitySubscription: Subscription; 16 16 - 17 17 - constructor(props: Props) { 18 18 - super(props); 19 19 - this.signalQualitySubscription = null; 20 20 - } 21 21 - 22 22 - componentDidMount() { 23 23 - if (!isNil(this.props.signalQualityObservable)) { 24 24 - this.subscribeToObservable(this.props.signalQualityObservable); 25 25 - } 26 26 - } 27 27 - 28 28 - componentDidUpdate(prevProps: Props) { 29 29 - if (this.props.signalQualityObservable !== prevProps.signalQualityObservable) { 30 30 - this.subscribeToObservable(this.props.signalQualityObservable); 31 31 - } 32 32 - } 33 33 - 34 34 - componentWillUnmount() { 35 35 - if (!isNil(this.signalQualitySubscription)) { 36 36 - this.signalQualitySubscription.unsubscribe(); 37 37 - } 38 38 - } 39 39 - 40 40 - subscribeToObservable(observable: any) { 41 41 - if (!isNil(this.signalQualitySubscription)) { 42 42 - this.signalQualitySubscription.unsubscribe(); 43 43 - } 44 44 - 45 45 - this.signalQualitySubscription = observable.subscribe( 46 46 - (epoch) => { 47 47 - Object.keys(epoch.signalQuality).forEach((key) => { 48 48 - d3.select(`#${key}`) 49 49 - .attr('visibility', 'show') 50 50 - .attr('stroke', '#000') 51 51 - .transition() 52 52 - .duration(this.props.plottingInterval) 53 53 - .ease(d3.easeLinear) 54 54 - .attr('fill', epoch.signalQuality[key]); 55 55 - }); 56 56 - }, 57 57 - (error) => new Error(`Error in signalQualitySubscription ${error}`) 58 58 - ); 59 59 - } 60 60 - 61 61 - render() { 62 62 - return ( 63 63 - <Segment basic size='massive'> 64 64 - <SignalQualityIndicatorSVG /> 65 65 - </Segment> 66 66 - ); 67 67 - } 68 68 - } 69 69 - 70 70 - export default SignalQualityIndicatorComponent;

+59

app/components/SignalQualityIndicatorComponent.tsx

reviewed

··· 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { isNil } from "lodash"; 4 4 + import { Segment } from "semantic-ui-react"; 5 5 + import * as d3 from "d3"; 6 6 + import { Observable } from "rxjs"; 7 7 + import SignalQualityIndicatorSVG from "./svgs/SignalQualityIndicatorSVG"; 8 8 + 9 9 + interface Props { 10 10 + signalQualityObservable: Observable | null | undefined; 11 11 + plottingInterval: number | null | undefined; 12 12 + } 13 13 + 14 14 + class SignalQualityIndicatorComponent extends Component<Props> { 15 15 + // signalQualitySubscription: Subscription; 16 16 + 17 17 + constructor(props: Props) { 18 18 + super(props); 19 19 + this.signalQualitySubscription = null; 20 20 + } 21 21 + 22 22 + componentDidMount() { 23 23 + if (!isNil(this.props.signalQualityObservable)) { 24 24 + this.subscribeToObservable(this.props.signalQualityObservable); 25 25 + } 26 26 + } 27 27 + 28 28 + componentDidUpdate(prevProps: Props) { 29 29 + if (this.props.signalQualityObservable !== prevProps.signalQualityObservable) { 30 30 + this.subscribeToObservable(this.props.signalQualityObservable); 31 31 + } 32 32 + } 33 33 + 34 34 + componentWillUnmount() { 35 35 + if (!isNil(this.signalQualitySubscription)) { 36 36 + this.signalQualitySubscription.unsubscribe(); 37 37 + } 38 38 + } 39 39 + 40 40 + subscribeToObservable(observable: any) { 41 41 + if (!isNil(this.signalQualitySubscription)) { 42 42 + this.signalQualitySubscription.unsubscribe(); 43 43 + } 44 44 + 45 45 + this.signalQualitySubscription = observable.subscribe(epoch => { 46 46 + Object.keys(epoch.signalQuality).forEach(key => { 47 47 + d3.select(`#${key}`).attr('visibility', 'show').attr('stroke', '#000').transition().duration(this.props.plottingInterval).ease(d3.easeLinear).attr('fill', epoch.signalQuality[key]); 48 48 + }); 49 49 + }, error => new Error(`Error in signalQualitySubscription ${error}`)); 50 50 + } 51 51 + 52 52 + render() { 53 53 + return <Segment basic size='massive'> 54 54 + <SignalQualityIndicatorSVG /> 55 55 + </Segment>; 56 56 + } 57 57 + } 58 58 + 59 59 + export default SignalQualityIndicatorComponent;

-24

app/components/TopNavComponent/PrimaryNavSegment.js

reviewed

··· 1 1 - import React, { Component } from 'react'; 2 2 - import { Grid } from 'semantic-ui-react'; 3 3 - import { NavLink } from 'react-router-dom'; 4 4 - import styles from '../styles/topnavbar.css'; 5 5 - 6 6 - interface Props { 7 7 - style: string; 8 8 - route: string; 9 9 - title: string; 10 10 - order: number; 11 11 - } 12 12 - 13 13 - export default class PrimaryNavSegment extends Component<Props> { 14 14 - render() { 15 15 - return ( 16 16 - <Grid.Column width={2} className={[this.props.style, styles.navColumn].join(' ')}> 17 17 - <NavLink to={this.props.route}> 18 18 - <div className={styles.numberBubble}>{this.props.order}</div> 19 19 - {this.props.title} 20 20 - </NavLink> 21 21 - </Grid.Column> 22 22 - ); 23 23 - } 24 24 - }

+23

app/components/TopNavComponent/PrimaryNavSegment.tsx

reviewed

··· 1 1 + import React, { Component } from "react"; 2 2 + import { Grid } from "semantic-ui-react"; 3 3 + import { NavLink } from "react-router-dom"; 4 4 + import styles from "../styles/topnavbar.css"; 5 5 + 6 6 + interface Props { 7 7 + style: string; 8 8 + route: string; 9 9 + title: string; 10 10 + order: number; 11 11 + } 12 12 + 13 13 + export default class PrimaryNavSegment extends Component<Props> { 14 14 + 15 15 + render() { 16 16 + return <Grid.Column width={2} className={[this.props.style, styles.navColumn].join(' ')}> 17 17 + <NavLink to={this.props.route}> 18 18 + <div className={styles.numberBubble}>{this.props.order}</div> 19 19 + {this.props.title} 20 20 + </NavLink> 21 21 + </Grid.Column>; 22 22 + } 23 23 + }

-117

app/components/TopNavComponent/index.js

reviewed

··· 1 1 - import React, { Component } from 'react'; 2 2 - import { Grid, Button, Segment, Image, Dropdown } from 'semantic-ui-react'; 3 3 - import { NavLink } from 'react-router-dom'; 4 4 - import { EXPERIMENTS, SCREENS } from '../../constants/constants'; 5 5 - import styles from '../styles/topnavbar.css'; 6 6 - import PrimaryNavSegment from './PrimaryNavSegment'; 7 7 - import { readAndParseState, readWorkspaces } from '../../utils/filesystem/storage'; 8 8 - import BrainwavesIcon from '../../assets/common/Brainwaves_Icon_big.png'; 9 9 - import { isNil } from 'lodash'; 10 10 - 11 11 - interface Props { 12 12 - title: ?string; 13 13 - location: { pathname: string, search: string, hash: string }; 14 14 - isRunning: boolean; 15 15 - experimentActions: Object; 16 16 - type: EXPERIMENTS; 17 17 - } 18 18 - 19 19 - interface State { 20 20 - recentWorkspaces: Array<string>; 21 21 - } 22 22 - 23 23 - export default class TopNavComponent extends Component<Props, State> { 24 24 - // props: Props; 25 25 - 26 26 - state = { 27 27 - recentWorkspaces: [], 28 28 - }; 29 29 - 30 30 - getStyleForScreen(navSegmentScreen: SCREENS) { 31 31 - if (navSegmentScreen.route === this.props.location.pathname) { 32 32 - return styles.activeNavColumn; 33 33 - } 34 34 - 35 35 - const routeOrder = Object.values(SCREENS).find( 36 36 - (screen) => screen.route === navSegmentScreen.route 37 37 - ).order; 38 38 - const currentOrder = Object.values(SCREENS).find( 39 39 - (screen) => screen.route === this.props.location.pathname 40 40 - ).order; 41 41 - if (currentOrder > routeOrder) { 42 42 - return styles.visitedNavColumn; 43 43 - } 44 44 - return styles.initialNavColumn; 45 45 - } 46 46 - 47 47 - handleLoadRecentWorkspace(dir: string) { 48 48 - const recentWorkspaceState = readAndParseState(dir); 49 49 - if (!isNil(recentWorkspaceState)) { 50 50 - this.props.experimentActions.setState(recentWorkspaceState); 51 51 - } 52 52 - } 53 53 - 54 54 - updateWorkspaces = () => { 55 55 - this.setState({ recentWorkspaces: readWorkspaces() }); 56 56 - }; 57 57 - 58 58 - render() { 59 59 - if ( 60 60 - this.props.location.pathname === SCREENS.HOME.route || 61 61 - this.props.location.pathname === SCREENS.BANK.route || 62 62 - this.props.location.pathname === '/' || 63 63 - this.props.isRunning 64 64 - ) { 65 65 - return null; 66 66 - } 67 67 - return ( 68 68 - <Grid className={styles.navContainer} verticalAlign='middle'> 69 69 - <Grid.Column className={styles.experimentTitleGridColumn}> 70 70 - <Segment basic className={styles.homeButton}> 71 71 - <NavLink to={SCREENS.HOME.route}> 72 72 - <Image centered className={styles.exitWorkspaceBtn} src={BrainwavesIcon} /> 73 73 - Home 74 74 - </NavLink> 75 75 - </Segment> 76 76 - </Grid.Column> 77 77 - 78 78 - <Grid.Column width={3} className={styles.experimentTitleGridColumn}> 79 79 - <Segment basic> 80 80 - <Dropdown 81 81 - text={this.props.title ? this.props.title : 'Untitled'} 82 82 - direction='right' 83 83 - onClick={() => { 84 84 - this.updateWorkspaces(); 85 85 - }} 86 86 - > 87 87 - <Dropdown.Menu> 88 88 - {this.state.recentWorkspaces.map((workspace) => ( 89 89 - <Dropdown.Item 90 90 - key={workspace} 91 91 - onClick={() => this.handleLoadRecentWorkspace(workspace)} 92 92 - > 93 93 - <p>{workspace}</p> 94 94 - </Dropdown.Item> 95 95 - ))} 96 96 - </Dropdown.Menu> 97 97 - </Dropdown> 98 98 - </Segment> 99 99 - </Grid.Column> 100 100 - 101 101 - <PrimaryNavSegment {...SCREENS.DESIGN} style={this.getStyleForScreen(SCREENS.DESIGN)} /> 102 102 - <PrimaryNavSegment {...SCREENS.COLLECT} style={this.getStyleForScreen(SCREENS.COLLECT)} /> 103 103 - {this.props.isEEGEnabled ? ( 104 104 - <PrimaryNavSegment {...SCREENS.CLEAN} style={this.getStyleForScreen(SCREENS.CLEAN)} /> 105 105 - ) : null} 106 106 - {this.props.isEEGEnabled ? ( 107 107 - <PrimaryNavSegment {...SCREENS.ANALYZE} style={this.getStyleForScreen(SCREENS.ANALYZE)} /> 108 108 - ) : ( 109 109 - <PrimaryNavSegment 110 110 - {...SCREENS.ANALYZEBEHAVIOR} 111 111 - style={this.getStyleForScreen(SCREENS.ANALYZE)} 112 112 - /> 113 113 - )} 114 114 - </Grid> 115 115 - ); 116 116 - } 117 117 - }

+88

app/components/TopNavComponent/index.tsx

reviewed

··· 1 1 + import React, { Component } from "react"; 2 2 + import { Grid, Button, Segment, Image, Dropdown } from "semantic-ui-react"; 3 3 + import { NavLink } from "react-router-dom"; 4 4 + import { EXPERIMENTS, SCREENS } from "../../constants/constants"; 5 5 + import styles from "../styles/topnavbar.css"; 6 6 + import PrimaryNavSegment from "./PrimaryNavSegment"; 7 7 + import { readAndParseState, readWorkspaces } from "../../utils/filesystem/storage"; 8 8 + import BrainwavesIcon from "../../assets/common/Brainwaves_Icon_big.png"; 9 9 + import { isNil } from "lodash"; 10 10 + 11 11 + interface Props { 12 12 + title: string | null | undefined; 13 13 + location: {pathname: string;search: string;hash: string;}; 14 14 + isRunning: boolean; 15 15 + experimentActions: Object; 16 16 + type: EXPERIMENTS; 17 17 + } 18 18 + 19 19 + interface State { 20 20 + recentWorkspaces: Array<string>; 21 21 + } 22 22 + 23 23 + export default class TopNavComponent extends Component<Props, State> { 24 24 + // props: Props; 25 25 + 26 26 + state = { 27 27 + recentWorkspaces: [] 28 28 + }; 29 29 + 30 30 + getStyleForScreen(navSegmentScreen: SCREENS) { 31 31 + if (navSegmentScreen.route === this.props.location.pathname) { 32 32 + return styles.activeNavColumn; 33 33 + } 34 34 + 35 35 + const routeOrder = Object.values(SCREENS).find(screen => screen.route === navSegmentScreen.route).order; 36 36 + const currentOrder = Object.values(SCREENS).find(screen => screen.route === this.props.location.pathname).order; 37 37 + if (currentOrder > routeOrder) { 38 38 + return styles.visitedNavColumn; 39 39 + } 40 40 + return styles.initialNavColumn; 41 41 + } 42 42 + 43 43 + handleLoadRecentWorkspace(dir: string) { 44 44 + const recentWorkspaceState = readAndParseState(dir); 45 45 + if (!isNil(recentWorkspaceState)) { 46 46 + this.props.experimentActions.setState(recentWorkspaceState); 47 47 + } 48 48 + } 49 49 + 50 50 + updateWorkspaces = () => { 51 51 + this.setState({ recentWorkspaces: readWorkspaces() }); 52 52 + }; 53 53 + 54 54 + render() { 55 55 + if (this.props.location.pathname === SCREENS.HOME.route || this.props.location.pathname === SCREENS.BANK.route || this.props.location.pathname === '/' || this.props.isRunning) { 56 56 + return null; 57 57 + } 58 58 + return <Grid className={styles.navContainer} verticalAlign='middle'> 59 59 + <Grid.Column className={styles.experimentTitleGridColumn}> 60 60 + <Segment basic className={styles.homeButton}> 61 61 + <NavLink to={SCREENS.HOME.route}> 62 62 + <Image centered className={styles.exitWorkspaceBtn} src={BrainwavesIcon} /> 63 63 + Home 64 64 + </NavLink> 65 65 + </Segment> 66 66 + </Grid.Column> 67 67 + 68 68 + <Grid.Column width={3} className={styles.experimentTitleGridColumn}> 69 69 + <Segment basic> 70 70 + <Dropdown text={this.props.title ? this.props.title : 'Untitled'} direction='right' onClick={() => { 71 71 + this.updateWorkspaces(); 72 72 + }}> 73 73 + <Dropdown.Menu> 74 74 + {this.state.recentWorkspaces.map(workspace => <Dropdown.Item key={workspace} onClick={() => this.handleLoadRecentWorkspace(workspace)}> 75 75 + <p>{workspace}</p> 76 76 + </Dropdown.Item>)} 77 77 + </Dropdown.Menu> 78 78 + </Dropdown> 79 79 + </Segment> 80 80 + </Grid.Column> 81 81 + 82 82 + <PrimaryNavSegment {...SCREENS.DESIGN} style={this.getStyleForScreen(SCREENS.DESIGN)} /> 83 83 + <PrimaryNavSegment {...SCREENS.COLLECT} style={this.getStyleForScreen(SCREENS.COLLECT)} /> 84 84 + {this.props.isEEGEnabled ? <PrimaryNavSegment {...SCREENS.CLEAN} style={this.getStyleForScreen(SCREENS.CLEAN)} /> : null} 85 85 + {this.props.isEEGEnabled ? <PrimaryNavSegment {...SCREENS.ANALYZE} style={this.getStyleForScreen(SCREENS.ANALYZE)} /> : <PrimaryNavSegment {...SCREENS.ANALYZEBEHAVIOR} style={this.getStyleForScreen(SCREENS.ANALYZE)} />} 86 86 + </Grid>; 87 87 + } 88 88 + }

+15 -28

app/components/ViewerComponent.js app/components/ViewerComponent.tsx

reviewed

··· 1 1 - // @flow 2 2 - import React, { Component } from 'react'; 3 3 - import { Subscription, Observable } from 'rxjs'; 4 4 - import { isNil } from 'lodash'; 5 5 - import { MUSE_CHANNELS, EMOTIV_CHANNELS, DEVICES, VIEWER_DEFAULTS } from '../constants/constants'; 1 1 + 2 2 + import React, { Component } from "react"; 3 3 + import { Subscription, Observable } from "rxjs"; 4 4 + import { isNil } from "lodash"; 5 5 + import { MUSE_CHANNELS, EMOTIV_CHANNELS, DEVICES, VIEWER_DEFAULTS } from "../constants/constants"; 6 6 7 7 const Mousetrap = require('mousetrap'); 8 8 9 9 interface Props { 10 10 - signalQualityObservable: ?Observable; 10 10 + signalQualityObservable: Observable | null | undefined; 11 11 deviceType: DEVICES; 12 12 plottingInterval: number; 13 13 } ··· 19 19 } 20 20 21 21 class ViewerComponent extends Component<Props, State> { 22 22 - // props: Props; 23 23 - // state: State; 22 22 + 24 23 // graphView: ?HTMLElement; 25 24 // signalQualitySubscription: Subscription; 26 26 - 27 25 constructor(props: Props) { 28 26 super(props); 29 27 this.state = { 30 28 ...VIEWER_DEFAULTS, 31 31 - channels: props.deviceType === DEVICES.EMOTIV ? EMOTIV_CHANNELS : MUSE_CHANNELS, 29 29 + channels: props.deviceType === DEVICES.EMOTIV ? EMOTIV_CHANNELS : MUSE_CHANNELS 32 30 }; 33 31 this.graphView = null; 34 32 this.signalQualitySubscription = null; ··· 41 39 plottingInterval: this.props.plottingInterval, 42 40 channels: this.state.channels, 43 41 domain: this.state.domain, 44 44 - channelColours: this.state.channels.map(() => '#66B0A9'), 42 42 + channelColours: this.state.channels.map(() => '#66B0A9') 45 43 }); 46 44 this.setKeyListeners(); 47 45 if (!isNil(this.props.signalQualityObservable)) { ··· 56 54 } 57 55 if (this.props.deviceType !== prevProps.deviceType) { 58 56 this.setState({ 59 59 - channels: this.props.deviceType === DEVICES.MUSE ? MUSE_CHANNELS : EMOTIV_CHANNELS, 57 57 + channels: this.props.deviceType === DEVICES.MUSE ? MUSE_CHANNELS : EMOTIV_CHANNELS 60 58 }); 61 59 } 62 60 if (this.state.channels !== prevState.channels) { ··· 90 88 if (!isNil(this.signalQualitySubscription)) { 91 89 this.signalQualitySubscription.unsubscribe(); 92 90 } 93 93 - this.signalQualitySubscription = observable.subscribe( 94 94 - (chunk) => { 95 95 - this.graphView.send('newData', chunk); 96 96 - }, 97 97 - (error) => new Error(`Error in epochSubscription ${error}`) 98 98 - ); 91 91 + this.signalQualitySubscription = observable.subscribe(chunk => { 92 92 + this.graphView.send('newData', chunk); 93 93 + }, error => new Error(`Error in epochSubscription ${error}`)); 99 94 } 100 95 101 96 render() { 102 102 - return ( 103 103 - <webview 104 104 - id='eegView' 105 105 - src={`file://${__dirname}/viewer.html`} 106 106 - autosize='true' 107 107 - nodeintegration='true' 108 108 - plugins='true' 109 109 - /> 110 110 - ); 97 97 + return <webview id='eegView' src={`file://${__dirname}/viewer.html`} autosize='true' nodeintegration='true' plugins='true' />; 111 98 } 112 99 } 113 100 114 114 - export default ViewerComponent; 101 101 + export default ViewerComponent;

-248

app/components/d3Classes/EEGViewer.js

reviewed

··· 1 1 - /* eslint prefer-template: 0 */ 2 2 - const d3 = require('d3'); 3 3 - const throttle = require('lodash/throttle'); 4 4 - const simplify = require('simplify-js'); 5 5 - 6 6 - class EEGViewer { 7 7 - constructor(svg, parameters) { 8 8 - this.channels = parameters.channels; 9 9 - this.plottingInterval = parameters.plottingInterval; // NOTE: Plotting interval in Ms 10 10 - this.domain = parameters.domain + this.plottingInterval; 11 11 - this.channelColours = parameters.channelColours; 12 12 - this.downsampling = 2; 13 13 - this.lineWidth = 1.75; 14 14 - this.zoom = 1; 15 15 - this.zoomScalar = 1.5; 16 16 - this.canvas = d3.select(svg); 17 17 - this.margin = { top: 20, right: 10, bottom: 0, left: 20 }; 18 18 - this.channelMaxs = new Array(this.channels.length).fill(100); 19 19 - this.channelMins = new Array(this.channels.length).fill(-100); 20 20 - this.lastTimestamp = new Date().getTime(); 21 21 - this.firstTimestamp = this.lastTimestamp - this.domain; 22 22 - 23 23 - this.resetData(); 24 24 - this.init(); 25 25 - const resize = this.resize.bind(this); 26 26 - d3.select(window).on('resize.updatesvg', throttle(resize, 200)); 27 27 - } 28 28 - 29 29 - updateData(epoch) { 30 30 - const { 31 31 - info: { samplingRate, startTime }, 32 32 - } = epoch; 33 33 - this.lastTimestamp = startTime + epoch.data[0].length / (samplingRate / 1000); 34 34 - this.firstTimestamp = this.lastTimestamp - this.domain; 35 35 - for (let i = 0; i < this.channels.length; i++) { 36 36 - this.data[i] = this.data[i] 37 37 - .concat( 38 38 - simplify( 39 39 - epoch.data[i].map((dataPoint, index) => ({ 40 40 - x: startTime + index / (samplingRate / 1000), 41 41 - y: dataPoint, 42 42 - })), 43 43 - this.downsampling 44 44 - ) 45 45 - ) 46 46 - .filter((sample) => sample.x >= this.firstTimestamp); 47 47 - } 48 48 - 49 49 - this.channelColours = this.channels.map((channelName) => epoch.signalQuality[channelName]); 50 50 - this.redraw(); 51 51 - } 52 52 - 53 53 - updateChannels(channels) { 54 54 - this.channels = channels; 55 55 - this.resetData(); 56 56 - this.init(); 57 57 - } 58 58 - 59 59 - updateDomain(domain) { 60 60 - this.domain = domain; 61 61 - this.resetData(); 62 62 - this.init(); 63 63 - } 64 64 - 65 65 - zoomIn() { 66 66 - this.zoom /= this.zoomScalar; 67 67 - this.redraw(); 68 68 - } 69 69 - 70 70 - zoomOut() { 71 71 - this.zoom *= this.zoomScalar; 72 72 - this.redraw(); 73 73 - } 74 74 - 75 75 - autoScale() { 76 76 - this.channelMaxs = this.data.map((channelData) => 77 77 - EEGViewer.findExtreme(channelData, (a, b) => a > b) 78 78 - ); 79 79 - this.channelMins = this.data.map((channelData) => 80 80 - EEGViewer.findExtreme(channelData, (a, b) => a < b) 81 81 - ); 82 82 - this.zoom = 1; 83 83 - this.redraw(); 84 84 - } 85 85 - 86 86 - resetData() { 87 87 - this.data = new Array(this.channels.length).fill([{ x: this.lastTimestamp, y: 0 }]); 88 88 - this.channelMaxs = new Array(this.channels.length).fill(100); 89 89 - this.channelMins = new Array(this.channels.length).fill(-100); 90 90 - } 91 91 - 92 92 - init() { 93 93 - try { 94 94 - d3.selectAll('svg > *').remove(); 95 95 - this.width = 96 96 - parseInt(d3.select('#graph').style('width'), 10) - (this.margin.left + this.margin.right); 97 97 - this.height = 98 98 - parseInt(d3.select('#graph').style('height'), 10) - (this.margin.top + this.margin.bottom); 99 99 - this.graph = this.canvas 100 100 - .attr('width', this.width) 101 101 - .attr('height', this.height) 102 102 - .append('g') 103 103 - .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')'); 104 104 - this.addScales(); 105 105 - this.addAxes(); 106 106 - this.addLines(); 107 107 - } catch (e) { 108 108 - console.error(e); 109 109 - } 110 110 - } 111 111 - 112 112 - addScales() { 113 113 - this.xScale = d3 114 114 - .scaleTime() 115 115 - .domain([this.lastTimestamp, this.firstTimestamp + this.plottingInterval]) 116 116 - .range([this.width, 0]); 117 117 - 118 118 - this.yScaleLines = d3.scaleLinear(); 119 119 - 120 120 - this.yScaleLabels = d3 121 121 - .scaleLinear() 122 122 - .domain([this.channels.length - 1, 0]) 123 123 - .range([ 124 124 - (this.channels.length - 1) * (this.height / this.channels.length) + 125 125 - this.height / this.channels.length / 2, 126 126 - this.height / this.channels.length / 2, 127 127 - ]); 128 128 - } 129 129 - 130 130 - addAxes() { 131 131 - this.yAxis = d3 132 132 - .axisLeft() 133 133 - .scale(this.yScaleLabels) 134 134 - .tickSize(2) 135 135 - .tickFormat((d, i) => this.channels[i].replace(/\s/g, '')) 136 136 - .tickValues(d3.range(this.channels.length)); 137 137 - 138 138 - this.axisY = this.graph 139 139 - .append('g') 140 140 - .attr('class', 'axis') 141 141 - .call(this.yAxis); 142 142 - } 143 143 - 144 144 - addLines() { 145 145 - this.graph.selectAll('.legend').remove(); 146 146 - this.graph.select('#lines').remove(); 147 147 - this.graph.selectAll('#clip').remove(); 148 148 - this.paths = []; 149 149 - this.graph 150 150 - .append('clipPath') 151 151 - .attr('id', 'clip') 152 152 - .append('rect') 153 153 - .attr('height', this.height + this.height / this.channels.length) 154 154 - .attr('width', this.width) 155 155 - .attr('transform', 'translate(0,' + -this.height / this.channels.length + ')'); 156 156 - this.lines = this.graph 157 157 - .append('g') 158 158 - .attr('id', 'lines') 159 159 - .attr('clip-path', 'url(#clip)'); 160 160 - this.line = d3 161 161 - .line() 162 162 - .x((d) => this.xScale(d.x)) 163 163 - .y((d) => this.yScaleLines(d.y)) 164 164 - .curve(d3.curveLinear) 165 165 - .defined((d) => d.y); 166 166 - 167 167 - for (let i = 0; i < this.channels.length; i++) { 168 168 - const channelData = this.data[i]; 169 169 - 170 170 - this.yScaleLines 171 171 - .domain([this.channelMins[i] / this.zoom, this.channelMaxs[i] / this.zoom]) 172 172 - .range(EEGViewer.getLineRange(i, this.channels.length, this.height)); 173 173 - 174 174 - this.paths[i] = this.lines 175 175 - .append('path') 176 176 - .data([channelData]) 177 177 - .attr('class', 'line') 178 178 - .attr('id', 'line' + i + 1) 179 179 - .attr('d', this.line) 180 180 - .attr('stroke', this.channelColours[i]) 181 181 - .attr('stroke-width', this.lineWidth); 182 182 - } 183 183 - } 184 184 - 185 185 - redraw() { 186 186 - if (this.paths != null) { 187 187 - for (let i = 0; i < this.channels.length; i++) { 188 188 - const channelData = this.data[i]; 189 189 - this.yScaleLines 190 190 - .domain([this.channelMins[i] / this.zoom, this.channelMaxs[i] / this.zoom]) 191 191 - .range(EEGViewer.getLineRange(i, this.channels.length, this.height)); 192 192 - 193 193 - this.paths[i] 194 194 - .interrupt() 195 195 - .transition() 196 196 - .duration(this.plottingInterval) 197 197 - .ease(d3.easeLinear) 198 198 - .attr( 199 199 - 'transform', 200 200 - 'translate(' + 201 201 - -(this.xScale(channelData[channelData.length - 1].x) - this.width) + 202 202 - ', 0)' 203 203 - ) 204 204 - .attr('stroke', this.channelColours[i]); 205 205 - 206 206 - this.paths[i] 207 207 - .data([channelData]) 208 208 - .attr('d', this.line) 209 209 - .attr('transform', 'translate(0,0)'); 210 210 - } 211 211 - 212 212 - this.xScale 213 213 - .domain([this.lastTimestamp, this.firstTimestamp + this.plottingInterval]) 214 214 - .range([this.width, 0]); 215 215 - } 216 216 - } 217 217 - 218 218 - resize() { 219 219 - if (this.paths != null) { 220 220 - this.width = 221 221 - parseInt(d3.select('#graph').style('width'), 10) - (this.margin.left + this.margin.right); 222 222 - this.height = 223 223 - parseInt(d3.select('#graph').style('height'), 10) - (this.margin.top + this.margin.bottom); 224 224 - this.lines.attr('height', this.height).attr('width', this.width); 225 225 - this.xScale.range([this.width, 0]); 226 226 - this.yScaleLines.range([this.height, 0]); 227 227 - this.yScaleLabels.range([ 228 228 - (this.channels.length - 1) * (this.height / this.channels.length) + 229 229 - this.height / this.channels.length / 2, 230 230 - this.height / this.channels.length / 2, 231 231 - ]); 232 232 - this.axisY.call(this.yAxis); 233 233 - this.addLines(); 234 234 - } 235 235 - } 236 236 - 237 237 - static findExtreme(data, comparison) { 238 238 - return data 239 239 - .slice(data.slice(data.length / 2)) 240 240 - .reduce((acc, curr) => (comparison(curr.y, acc) ? curr.y : acc), data[0].y); 241 241 - } 242 242 - 243 243 - static getLineRange(index, nbChannels, height) { 244 244 - return [(index + 1) * (height / nbChannels), index * (height / nbChannels)]; 245 245 - } 246 246 - } 247 247 - 248 248 - module.exports = EEGViewer;

+168

app/components/d3Classes/EEGViewer.ts

reviewed

··· 1 1 + /* eslint prefer-template: 0 */ 2 2 + const d3 = require('d3'); 3 3 + const throttle = require('lodash/throttle'); 4 4 + const simplify = require('simplify-js'); 5 5 + 6 6 + class EEGViewer { 7 7 + 8 8 + constructor(svg, parameters) { 9 9 + this.channels = parameters.channels; 10 10 + this.plottingInterval = parameters.plottingInterval; // NOTE: Plotting interval in Ms 11 11 + this.domain = parameters.domain + this.plottingInterval; 12 12 + this.channelColours = parameters.channelColours; 13 13 + this.downsampling = 2; 14 14 + this.lineWidth = 1.75; 15 15 + this.zoom = 1; 16 16 + this.zoomScalar = 1.5; 17 17 + this.canvas = d3.select(svg); 18 18 + this.margin = { top: 20, right: 10, bottom: 0, left: 20 }; 19 19 + this.channelMaxs = new Array(this.channels.length).fill(100); 20 20 + this.channelMins = new Array(this.channels.length).fill(-100); 21 21 + this.lastTimestamp = new Date().getTime(); 22 22 + this.firstTimestamp = this.lastTimestamp - this.domain; 23 23 + 24 24 + this.resetData(); 25 25 + this.init(); 26 26 + const resize = this.resize.bind(this); 27 27 + d3.select(window).on('resize.updatesvg', throttle(resize, 200)); 28 28 + } 29 29 + 30 30 + updateData(epoch) { 31 31 + const { 32 32 + info: { 33 33 + samplingRate, 34 34 + startTime 35 35 + } 36 36 + } = epoch; 37 37 + this.lastTimestamp = startTime + epoch.data[0].length / (samplingRate / 1000); 38 38 + this.firstTimestamp = this.lastTimestamp - this.domain; 39 39 + for (let i = 0; i < this.channels.length; i++) { 40 40 + this.data[i] = this.data[i].concat(simplify(epoch.data[i].map((dataPoint, index) => ({ 41 41 + x: startTime + index / (samplingRate / 1000), 42 42 + y: dataPoint 43 43 + })), this.downsampling)).filter(sample => sample.x >= this.firstTimestamp); 44 44 + } 45 45 + 46 46 + this.channelColours = this.channels.map(channelName => epoch.signalQuality[channelName]); 47 47 + this.redraw(); 48 48 + } 49 49 + 50 50 + updateChannels(channels) { 51 51 + this.channels = channels; 52 52 + this.resetData(); 53 53 + this.init(); 54 54 + } 55 55 + 56 56 + updateDomain(domain) { 57 57 + this.domain = domain; 58 58 + this.resetData(); 59 59 + this.init(); 60 60 + } 61 61 + 62 62 + zoomIn() { 63 63 + this.zoom /= this.zoomScalar; 64 64 + this.redraw(); 65 65 + } 66 66 + 67 67 + zoomOut() { 68 68 + this.zoom *= this.zoomScalar; 69 69 + this.redraw(); 70 70 + } 71 71 + 72 72 + autoScale() { 73 73 + this.channelMaxs = this.data.map(channelData => EEGViewer.findExtreme(channelData, (a, b) => a > b)); 74 74 + this.channelMins = this.data.map(channelData => EEGViewer.findExtreme(channelData, (a, b) => a < b)); 75 75 + this.zoom = 1; 76 76 + this.redraw(); 77 77 + } 78 78 + 79 79 + resetData() { 80 80 + this.data = new Array(this.channels.length).fill([{ x: this.lastTimestamp, y: 0 }]); 81 81 + this.channelMaxs = new Array(this.channels.length).fill(100); 82 82 + this.channelMins = new Array(this.channels.length).fill(-100); 83 83 + } 84 84 + 85 85 + init() { 86 86 + try { 87 87 + d3.selectAll('svg > *').remove(); 88 88 + this.width = parseInt(d3.select('#graph').style('width'), 10) - (this.margin.left + this.margin.right); 89 89 + this.height = parseInt(d3.select('#graph').style('height'), 10) - (this.margin.top + this.margin.bottom); 90 90 + this.graph = this.canvas.attr('width', this.width).attr('height', this.height).append('g').attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')'); 91 91 + this.addScales(); 92 92 + this.addAxes(); 93 93 + this.addLines(); 94 94 + } catch (e) { 95 95 + console.error(e); 96 96 + } 97 97 + } 98 98 + 99 99 + addScales() { 100 100 + this.xScale = d3.scaleTime().domain([this.lastTimestamp, this.firstTimestamp + this.plottingInterval]).range([this.width, 0]); 101 101 + 102 102 + this.yScaleLines = d3.scaleLinear(); 103 103 + 104 104 + this.yScaleLabels = d3.scaleLinear().domain([this.channels.length - 1, 0]).range([(this.channels.length - 1) * (this.height / this.channels.length) + this.height / this.channels.length / 2, this.height / this.channels.length / 2]); 105 105 + } 106 106 + 107 107 + addAxes() { 108 108 + this.yAxis = d3.axisLeft().scale(this.yScaleLabels).tickSize(2).tickFormat((d, i) => this.channels[i].replace(/\s/g, '')).tickValues(d3.range(this.channels.length)); 109 109 + 110 110 + this.axisY = this.graph.append('g').attr('class', 'axis').call(this.yAxis); 111 111 + } 112 112 + 113 113 + addLines() { 114 114 + this.graph.selectAll('.legend').remove(); 115 115 + this.graph.select('#lines').remove(); 116 116 + this.graph.selectAll('#clip').remove(); 117 117 + this.paths = []; 118 118 + this.graph.append('clipPath').attr('id', 'clip').append('rect').attr('height', this.height + this.height / this.channels.length).attr('width', this.width).attr('transform', 'translate(0,' + -this.height / this.channels.length + ')'); 119 119 + this.lines = this.graph.append('g').attr('id', 'lines').attr('clip-path', 'url(#clip)'); 120 120 + this.line = d3.line().x(d => this.xScale(d.x)).y(d => this.yScaleLines(d.y)).curve(d3.curveLinear).defined(d => d.y); 121 121 + 122 122 + for (let i = 0; i < this.channels.length; i++) { 123 123 + const channelData = this.data[i]; 124 124 + 125 125 + this.yScaleLines.domain([this.channelMins[i] / this.zoom, this.channelMaxs[i] / this.zoom]).range(EEGViewer.getLineRange(i, this.channels.length, this.height)); 126 126 + 127 127 + this.paths[i] = this.lines.append('path').data([channelData]).attr('class', 'line').attr('id', 'line' + i + 1).attr('d', this.line).attr('stroke', this.channelColours[i]).attr('stroke-width', this.lineWidth); 128 128 + } 129 129 + } 130 130 + 131 131 + redraw() { 132 132 + if (this.paths != null) { 133 133 + for (let i = 0; i < this.channels.length; i++) { 134 134 + const channelData = this.data[i]; 135 135 + this.yScaleLines.domain([this.channelMins[i] / this.zoom, this.channelMaxs[i] / this.zoom]).range(EEGViewer.getLineRange(i, this.channels.length, this.height)); 136 136 + 137 137 + this.paths[i].interrupt().transition().duration(this.plottingInterval).ease(d3.easeLinear).attr('transform', 'translate(' + -(this.xScale(channelData[channelData.length - 1].x) - this.width) + ', 0)').attr('stroke', this.channelColours[i]); 138 138 + 139 139 + this.paths[i].data([channelData]).attr('d', this.line).attr('transform', 'translate(0,0)'); 140 140 + } 141 141 + 142 142 + this.xScale.domain([this.lastTimestamp, this.firstTimestamp + this.plottingInterval]).range([this.width, 0]); 143 143 + } 144 144 + } 145 145 + 146 146 + resize() { 147 147 + if (this.paths != null) { 148 148 + this.width = parseInt(d3.select('#graph').style('width'), 10) - (this.margin.left + this.margin.right); 149 149 + this.height = parseInt(d3.select('#graph').style('height'), 10) - (this.margin.top + this.margin.bottom); 150 150 + this.lines.attr('height', this.height).attr('width', this.width); 151 151 + this.xScale.range([this.width, 0]); 152 152 + this.yScaleLines.range([this.height, 0]); 153 153 + this.yScaleLabels.range([(this.channels.length - 1) * (this.height / this.channels.length) + this.height / this.channels.length / 2, this.height / this.channels.length / 2]); 154 154 + this.axisY.call(this.yAxis); 155 155 + this.addLines(); 156 156 + } 157 157 + } 158 158 + 159 159 + static findExtreme(data, comparison) { 160 160 + return data.slice(data.slice(data.length / 2)).reduce((acc, curr) => comparison(curr.y, acc) ? curr.y : acc, data[0].y); 161 161 + } 162 162 + 163 163 + static getLineRange(index, nbChannels, height) { 164 164 + return [(index + 1) * (height / nbChannels), index * (height / nbChannels)]; 165 165 + } 166 166 + } 167 167 + 168 168 + module.exports = EEGViewer;

-421

app/components/svgs/ClickableHeadDiagramSVG.js

reviewed

··· 1 1 - import React from 'react'; 2 2 - 3 3 - interface Props { 4 4 - channelinfo: Array<string>; 5 5 - onChannelClick: (string) => void; 6 6 - } 7 7 - 8 8 - const SvgComponent = (props: Props) => ( 9 9 - <svg 10 10 - id='SignalQualityIndicator' 11 11 - data-name='SignalQualityIndicator' 12 12 - style={{ minHeight: 250, minWidth: 250 }} 13 13 - viewBox='0 0 674.44 610.29' 14 14 - {...props} 15 15 - > 16 16 - <title>Signal Quality Indicator</title> 17 17 - <g id='Head_Plot' data-name='Head Plot'> 18 18 - <circle 19 19 - cx={336.54} 20 20 - cy={334.96} 21 21 - r={212.53} 22 22 - fillOpacity='0.0' 23 23 - stroke='#000' 24 24 - strokeLinecap='round' 25 25 - strokeMiterlimit={10} 26 26 - strokeWidth={2} 27 27 - strokeDasharray='16.064828872680664,22.089139938354492' 28 28 - /> 29 29 - <path 30 30 - stroke='#000' 31 31 - strokeLinecap='round' 32 32 - strokeMiterlimit={10} 33 33 - strokeWidth={2} 34 34 - d='M68.73 334h8' 35 35 - /> 36 36 - <path 37 37 - stroke='#000' 38 38 - strokeLinecap='round' 39 39 - strokeMiterlimit={10} 40 40 - strokeWidth={2} 41 41 - strokeDasharray='16.026018142700195,22.035776138305664' 42 42 - d='M98.76 334h483.79' 43 43 - /> 44 44 - <path 45 45 - stroke='#000' 46 46 - strokeLinecap='round' 47 47 - strokeMiterlimit={10} 48 48 - strokeWidth={2} 49 49 - d='M593.57 334h8M335.68 600.42v-8' 50 50 - /> 51 51 - <path 52 52 - fillOpacity='0.0' 53 53 - stroke='#000' 54 54 - strokeLinecap='round' 55 55 - strokeMiterlimit={10} 56 56 - strokeWidth={2} 57 57 - strokeDasharray='16.026018142700195,22.035776138305664' 58 58 - d='M335.68 570.39V86.6' 59 59 - /> 60 60 - <path 61 61 - fillOpacity='0.0' 62 62 - stroke='#000' 63 63 - strokeLinecap='round' 64 64 - strokeMiterlimit={10} 65 65 - strokeWidth={2} 66 66 - d='M335.68 75.58v-8' 67 67 - /> 68 68 - <path 69 69 - d='M282.85 72.63s24.95-42.38 51.95-42.38 51.95 42.38 51.95 42.38' 70 70 - fillOpacity='0.0' 71 71 - stroke='#000' 72 72 - strokeMiterlimit={10} 73 73 - strokeWidth={2} 74 74 - /> 75 75 - <circle 76 76 - cx={335.15} 77 77 - cy={334} 78 78 - r={266.42} 79 79 - fillOpacity='0.0' 80 80 - stroke='#000' 81 81 - strokeMiterlimit={10} 82 82 - strokeWidth={2} 83 83 - /> 84 84 - <path 85 85 - d='M73.11 288.57s-30 1.44-30 42.92S72.1 373 72.1 373M598 288.57s30 1.44 30 42.92S599 373 599 373' 86 86 - fillOpacity='0.0' 87 87 - stroke='#000' 88 88 - strokeMiterlimit={10} 89 89 - strokeWidth={2} 90 90 - /> 91 91 - </g> 92 92 - <g 93 93 - className='channelCircle' 94 94 - id='T7' 95 95 - visibility={props.channelinfo.includes('T7') ? 'show' : 'hidden'} 96 96 - onClick={() => props.onChannelClick('T7')} 97 97 - > 98 98 - <circle cx={124.37} cy={333.72} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 99 99 - <text 100 100 - transform='translate(111.44 341.22)' 101 101 - fontSize={22} 102 102 - fontFamily='Lato-Bold,Lato' 103 103 - fontWeight={700} 104 104 - fill='#000' 105 105 - > 106 106 - T7 107 107 - </text> 108 108 - </g> 109 109 - <g 110 110 - className='channelCircle' 111 111 - id='FC5' 112 112 - onClick={() => props.onChannelClick('FC5')} 113 113 - visibility={props.channelinfo.includes('FC5') ? 'show' : 'hidden'} 114 114 - > 115 115 - <circle cx={178.58} cy={259.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 116 116 - <text 117 117 - transform='translate(158.65 266.78)' 118 118 - fontSize={22} 119 119 - fontFamily='Lato-Bold,Lato' 120 120 - fontWeight={700} 121 121 - fill='#000' 122 122 - > 123 123 - FC5 124 124 - </text> 125 125 - </g> 126 126 - <g 127 127 - className='channelCircle' 128 128 - id='FC6' 129 129 - onClick={() => props.onChannelClick('FC6')} 130 130 - visibility={props.channelinfo.includes('FC6') ? 'show' : 'hidden'} 131 131 - > 132 132 - <circle cx={495.58} cy={259.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 133 133 - <text 134 134 - transform='translate(475.65 266.78)' 135 135 - fontSize={22} 136 136 - fontFamily='Lato-Bold,Lato' 137 137 - fontWeight={700} 138 138 - fill='#000' 139 139 - > 140 140 - FC6 141 141 - </text> 142 142 - </g> 143 143 - <g 144 144 - className='channelCircle' 145 145 - id='F3' 146 146 - onClick={() => props.onChannelClick('F3')} 147 147 - visibility={props.channelinfo.includes('F3') ? 'show' : 'hidden'} 148 148 - > 149 149 - <circle cx={240.35} cy={241.01} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 150 150 - <text 151 151 - transform='translate(227.8 248.5)' 152 152 - fontSize={22} 153 153 - fontFamily='Lato-Bold,Lato' 154 154 - fontWeight={700} 155 155 - fill='#000' 156 156 - > 157 157 - F3 158 158 - </text> 159 159 - </g> 160 160 - <g 161 161 - className='channelCircle' 162 162 - id='F4' 163 163 - onClick={() => props.onChannelClick('F4')} 164 164 - visibility={props.channelinfo.includes('F4') ? 'show' : 'hidden'} 165 165 - > 166 166 - <circle cx={434.23} cy={241.01} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 167 167 - <text 168 168 - transform='translate(421.68 248.5)' 169 169 - fontSize={22} 170 170 - fontFamily='Lato-Bold,Lato' 171 171 - fontWeight={700} 172 172 - fill='#000' 173 173 - > 174 174 - F4 175 175 - </text> 176 176 - </g> 177 177 - <g 178 178 - className='channelCircle' 179 179 - id='AF3' 180 180 - onClick={() => props.onChannelClick('AF3')} 181 181 - visibility={props.channelinfo.includes('AF3') ? 'show' : 'hidden'} 182 182 - > 183 183 - <circle cx={269.35} cy={185.69} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 184 184 - <text 185 185 - transform='translate(248.99 193.18)' 186 186 - fontSize={22} 187 187 - fontFamily='Lato-Bold,Lato' 188 188 - fontWeight={700} 189 189 - fill='#000' 190 190 - > 191 191 - AF3 192 192 - </text> 193 193 - </g> 194 194 - <g 195 195 - className='channelCircle' 196 196 - id='AF4' 197 197 - onClick={() => props.onChannelClick('AF4')} 198 198 - visibility={props.channelinfo.includes('AF4') ? 'show' : 'hidden'} 199 199 - > 200 200 - <circle cx={406.36} cy={185.69} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 201 201 - <text 202 202 - transform='translate(385.99 193.18)' 203 203 - fontSize={22} 204 204 - fontFamily='Lato-Bold,Lato' 205 205 - fontWeight={700} 206 206 - fill='#000' 207 207 - > 208 208 - AF4 209 209 - </text> 210 210 - </g> 211 211 - <g 212 212 - className='channelCircle' 213 213 - id='M1' 214 214 - onClick={() => props.onChannelClick('M1')} 215 215 - visibility={props.channelinfo.includes('M1') ? 'show' : 'hidden'} 216 216 - > 217 217 - <circle cx={78.53} cy={401.34} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 218 218 - <text 219 219 - transform='translate(61.92 408.83)' 220 220 - fontSize={22} 221 221 - fontFamily='Lato-Bold,Lato' 222 222 - fontWeight={700} 223 223 - fill='#000' 224 224 - > 225 225 - M1 226 226 - </text> 227 227 - </g> 228 228 - <g 229 229 - className='channelCircle' 230 230 - id='P7' 231 231 - onClick={() => props.onChannelClick('P7')} 232 232 - visibility={props.channelinfo.includes('P7') ? 'show' : 'hidden'} 233 233 - > 234 234 - <circle cx={178.58} cy={475.91} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 235 235 - <text 236 236 - transform='translate(165.33 483.4)' 237 237 - fontSize={22} 238 238 - fontFamily='Lato-Bold,Lato' 239 239 - fontWeight={700} 240 240 - fill='#000' 241 241 - > 242 242 - P7 243 243 - </text> 244 244 - </g> 245 245 - <g 246 246 - className='channelCircle' 247 247 - id='O1' 248 248 - onClick={() => props.onChannelClick('O1')} 249 249 - visibility={props.channelinfo.includes('O1') ? 'show' : 'hidden'} 250 250 - > 251 251 - <circle cx={255.35} cy={531.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 252 252 - <text 253 253 - transform='translate(240.18 538.79)' 254 254 - fontSize={22} 255 255 - fontFamily='Lato-Bold,Lato' 256 256 - fontWeight={700} 257 257 - fill='#000' 258 258 - > 259 259 - O1 260 260 - </text> 261 261 - </g> 262 262 - <g 263 263 - className='channelCircle' 264 264 - id='O2' 265 265 - onClick={() => props.onChannelClick('O2')} 266 266 - visibility={props.channelinfo.includes('O2') ? 'show' : 'hidden'} 267 267 - > 268 268 - <circle cx={420.11} cy={531.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 269 269 - <text 270 270 - transform='translate(404.94 538.79)' 271 271 - fontSize={22} 272 272 - fontFamily='Lato-Bold,Lato' 273 273 - fontWeight={700} 274 274 - fill='#000' 275 275 - > 276 276 - O2 277 277 - </text> 278 278 - </g> 279 279 - <g 280 280 - className='channelCircle' 281 281 - id='P8' 282 282 - onClick={() => props.onChannelClick('P8')} 283 283 - visibility={props.channelinfo.includes('P8') ? 'show' : 'hidden'} 284 284 - > 285 285 - <circle cx={494.77} cy={475.91} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 286 286 - <text 287 287 - transform='translate(481.51 483.4)' 288 288 - fontSize={22} 289 289 - fontFamily='Lato-Bold,Lato' 290 290 - fontWeight={700} 291 291 - fill='#000' 292 292 - > 293 293 - P8 294 294 - </text> 295 295 - </g> 296 296 - <g 297 297 - className='channelCircle' 298 298 - id='T8' 299 299 - onClick={() => props.onChannelClick('T8')} 300 300 - visibility={props.channelinfo.includes('T8') ? 'show' : 'hidden'} 301 301 - > 302 302 - <circle cx={548.92} cy={333.72} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 303 303 - <text 304 304 - transform='translate(535.99 341.22)' 305 305 - fontSize={22} 306 306 - fontFamily='Lato-Bold,Lato' 307 307 - fontWeight={700} 308 308 - fill='#000' 309 309 - > 310 310 - T8 311 311 - </text> 312 312 - </g> 313 313 - <g 314 314 - className='channelCircle' 315 315 - id='M2' 316 316 - onClick={() => props.onChannelClick('M2')} 317 317 - visibility={props.channelinfo.includes('M2') ? 'show' : 'hidden'} 318 318 - > 319 319 - <circle cx={592.53} cy={400.89} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 320 320 - <text 321 321 - transform='translate(575.92 408.38)' 322 322 - fontSize={22} 323 323 - fontFamily='Lato-Bold,Lato' 324 324 - fontWeight={700} 325 325 - fill='#000' 326 326 - > 327 327 - M2 328 328 - </text> 329 329 - </g> 330 330 - <g 331 331 - className='channelCircle' 332 332 - id='TP10' 333 333 - onClick={() => props.onChannelClick('TP10')} 334 334 - visibility={props.channelinfo.includes('TP10') ? 'show' : 'hidden'} 335 335 - > 336 336 - <circle cx={571.87} cy={455.81} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 337 337 - <text 338 338 - transform='translate(550.45 463.3)' 339 339 - fontSize={18} 340 340 - fontFamily='Lato-Bold,Lato' 341 341 - fontWeight={700} 342 342 - fill='#000' 343 343 - > 344 344 - TP10 345 345 - </text> 346 346 - </g> 347 347 - <g 348 348 - className='channelCircle' 349 349 - id='Fpz' 350 350 - onClick={() => props.onChannelClick('Fpz')} 351 351 - visibility={props.channelinfo.includes('Fpz') ? 'show' : 'hidden'} 352 352 - > 353 353 - <circle cx={335.79} cy={121.75} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 354 354 - <text 355 355 - transform='translate(318.56 129.24)' 356 356 - fontSize={22} 357 357 - fontFamily='Lato-Bold,Lato' 358 358 - fontWeight={700} 359 359 - fill='#000' 360 360 - > 361 361 - <tspan letterSpacing='-.03em'>F</tspan> 362 362 - <tspan x={11.69} y={0}> 363 363 - pz 364 364 - </tspan> 365 365 - </text> 366 366 - </g> 367 367 - <g 368 368 - className='channelCircle' 369 369 - id='TP9' 370 370 - onClick={() => props.onChannelClick('TP9')} 371 371 - visibility={props.channelinfo.includes('TP9') ? 'show' : 'hidden'} 372 372 - > 373 373 - <circle cx={98.87} cy={455.81} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 374 374 - <text 375 375 - transform='translate(79.07 463.3)' 376 376 - fontSize={22} 377 377 - fontFamily='Lato-Bold,Lato' 378 378 - fontWeight={700} 379 379 - fill='#000' 380 380 - > 381 381 - TP9 382 382 - </text> 383 383 - </g> 384 384 - <g 385 385 - className='channelCircle' 386 386 - id='AF7' 387 387 - onClick={() => props.onChannelClick('AF7')} 388 388 - visibility={props.channelinfo.includes('AF7') ? 'show' : 'hidden'} 389 389 - > 390 390 - <circle cx={208.33} cy={166.08} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 391 391 - <text 392 392 - transform='translate(187.97 173.57)' 393 393 - fontSize={22} 394 394 - fontFamily='Lato-Bold,Lato' 395 395 - fontWeight={700} 396 396 - fill='#000' 397 397 - > 398 398 - AF7 399 399 - </text> 400 400 - </g> 401 401 - <g 402 402 - className='channelCircle' 403 403 - id='AF8' 404 404 - onClick={() => props.onChannelClick('AF8')} 405 405 - visibility={props.channelinfo.includes('AF8') ? 'show' : 'hidden'} 406 406 - > 407 407 - <circle cx={467.66} cy={166.08} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 408 408 - <text 409 409 - transform='translate(447.3 173.57)' 410 410 - fontSize={22} 411 411 - fontFamily='Lato-Bold,Lato' 412 412 - fontWeight={700} 413 413 - fill='#000' 414 414 - > 415 415 - AF8 416 416 - </text> 417 417 - </g> 418 418 - </svg> 419 419 - ); 420 420 - 421 421 - export default SvgComponent;

+140

app/components/svgs/ClickableHeadDiagramSVG.tsx

reviewed

··· 1 1 + import React from "react"; 2 2 + 3 3 + interface Props { 4 4 + channelinfo: Array<string>; 5 5 + onChannelClick: (arg0: string) => void; 6 6 + } 7 7 + 8 8 + const SvgComponent = (props: Props) => <svg id='SignalQualityIndicator' data-name='SignalQualityIndicator' style={{ minHeight: 250, minWidth: 250 }} viewBox='0 0 674.44 610.29' {...props}> 9 9 + <title>Signal Quality Indicator</title> 10 10 + <g id='Head_Plot' data-name='Head Plot'> 11 11 + <circle cx={336.54} cy={334.96} r={212.53} fillOpacity='0.0' stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} strokeDasharray='16.064828872680664,22.089139938354492' /> 12 12 + <path stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} d='M68.73 334h8' /> 13 13 + <path stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} strokeDasharray='16.026018142700195,22.035776138305664' d='M98.76 334h483.79' /> 14 14 + <path stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} d='M593.57 334h8M335.68 600.42v-8' /> 15 15 + <path fillOpacity='0.0' stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} strokeDasharray='16.026018142700195,22.035776138305664' d='M335.68 570.39V86.6' /> 16 16 + <path fillOpacity='0.0' stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} d='M335.68 75.58v-8' /> 17 17 + <path d='M282.85 72.63s24.95-42.38 51.95-42.38 51.95 42.38 51.95 42.38' fillOpacity='0.0' stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 18 18 + <circle cx={335.15} cy={334} r={266.42} fillOpacity='0.0' stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 19 19 + <path d='M73.11 288.57s-30 1.44-30 42.92S72.1 373 72.1 373M598 288.57s30 1.44 30 42.92S599 373 599 373' fillOpacity='0.0' stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 20 20 + </g> 21 21 + <g className='channelCircle' id='T7' visibility={props.channelinfo.includes('T7') ? 'show' : 'hidden'} onClick={() => props.onChannelClick('T7')}> 22 22 + <circle cx={124.37} cy={333.72} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 23 23 + <text transform='translate(111.44 341.22)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 24 24 + T7 25 25 + </text> 26 26 + </g> 27 27 + <g className='channelCircle' id='FC5' onClick={() => props.onChannelClick('FC5')} visibility={props.channelinfo.includes('FC5') ? 'show' : 'hidden'}> 28 28 + <circle cx={178.58} cy={259.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 29 29 + <text transform='translate(158.65 266.78)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 30 30 + FC5 31 31 + </text> 32 32 + </g> 33 33 + <g className='channelCircle' id='FC6' onClick={() => props.onChannelClick('FC6')} visibility={props.channelinfo.includes('FC6') ? 'show' : 'hidden'}> 34 34 + <circle cx={495.58} cy={259.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 35 35 + <text transform='translate(475.65 266.78)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 36 36 + FC6 37 37 + </text> 38 38 + </g> 39 39 + <g className='channelCircle' id='F3' onClick={() => props.onChannelClick('F3')} visibility={props.channelinfo.includes('F3') ? 'show' : 'hidden'}> 40 40 + <circle cx={240.35} cy={241.01} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 41 41 + <text transform='translate(227.8 248.5)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 42 42 + F3 43 43 + </text> 44 44 + </g> 45 45 + <g className='channelCircle' id='F4' onClick={() => props.onChannelClick('F4')} visibility={props.channelinfo.includes('F4') ? 'show' : 'hidden'}> 46 46 + <circle cx={434.23} cy={241.01} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 47 47 + <text transform='translate(421.68 248.5)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 48 48 + F4 49 49 + </text> 50 50 + </g> 51 51 + <g className='channelCircle' id='AF3' onClick={() => props.onChannelClick('AF3')} visibility={props.channelinfo.includes('AF3') ? 'show' : 'hidden'}> 52 52 + <circle cx={269.35} cy={185.69} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 53 53 + <text transform='translate(248.99 193.18)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 54 54 + AF3 55 55 + </text> 56 56 + </g> 57 57 + <g className='channelCircle' id='AF4' onClick={() => props.onChannelClick('AF4')} visibility={props.channelinfo.includes('AF4') ? 'show' : 'hidden'}> 58 58 + <circle cx={406.36} cy={185.69} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 59 59 + <text transform='translate(385.99 193.18)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 60 60 + AF4 61 61 + </text> 62 62 + </g> 63 63 + <g className='channelCircle' id='M1' onClick={() => props.onChannelClick('M1')} visibility={props.channelinfo.includes('M1') ? 'show' : 'hidden'}> 64 64 + <circle cx={78.53} cy={401.34} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 65 65 + <text transform='translate(61.92 408.83)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 66 66 + M1 67 67 + </text> 68 68 + </g> 69 69 + <g className='channelCircle' id='P7' onClick={() => props.onChannelClick('P7')} visibility={props.channelinfo.includes('P7') ? 'show' : 'hidden'}> 70 70 + <circle cx={178.58} cy={475.91} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 71 71 + <text transform='translate(165.33 483.4)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 72 72 + P7 73 73 + </text> 74 74 + </g> 75 75 + <g className='channelCircle' id='O1' onClick={() => props.onChannelClick('O1')} visibility={props.channelinfo.includes('O1') ? 'show' : 'hidden'}> 76 76 + <circle cx={255.35} cy={531.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 77 77 + <text transform='translate(240.18 538.79)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 78 78 + O1 79 79 + </text> 80 80 + </g> 81 81 + <g className='channelCircle' id='O2' onClick={() => props.onChannelClick('O2')} visibility={props.channelinfo.includes('O2') ? 'show' : 'hidden'}> 82 82 + <circle cx={420.11} cy={531.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 83 83 + <text transform='translate(404.94 538.79)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 84 84 + O2 85 85 + </text> 86 86 + </g> 87 87 + <g className='channelCircle' id='P8' onClick={() => props.onChannelClick('P8')} visibility={props.channelinfo.includes('P8') ? 'show' : 'hidden'}> 88 88 + <circle cx={494.77} cy={475.91} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 89 89 + <text transform='translate(481.51 483.4)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 90 90 + P8 91 91 + </text> 92 92 + </g> 93 93 + <g className='channelCircle' id='T8' onClick={() => props.onChannelClick('T8')} visibility={props.channelinfo.includes('T8') ? 'show' : 'hidden'}> 94 94 + <circle cx={548.92} cy={333.72} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 95 95 + <text transform='translate(535.99 341.22)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 96 96 + T8 97 97 + </text> 98 98 + </g> 99 99 + <g className='channelCircle' id='M2' onClick={() => props.onChannelClick('M2')} visibility={props.channelinfo.includes('M2') ? 'show' : 'hidden'}> 100 100 + <circle cx={592.53} cy={400.89} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 101 101 + <text transform='translate(575.92 408.38)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 102 102 + M2 103 103 + </text> 104 104 + </g> 105 105 + <g className='channelCircle' id='TP10' onClick={() => props.onChannelClick('TP10')} visibility={props.channelinfo.includes('TP10') ? 'show' : 'hidden'}> 106 106 + <circle cx={571.87} cy={455.81} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 107 107 + <text transform='translate(550.45 463.3)' fontSize={18} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 108 108 + TP10 109 109 + </text> 110 110 + </g> 111 111 + <g className='channelCircle' id='Fpz' onClick={() => props.onChannelClick('Fpz')} visibility={props.channelinfo.includes('Fpz') ? 'show' : 'hidden'}> 112 112 + <circle cx={335.79} cy={121.75} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 113 113 + <text transform='translate(318.56 129.24)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 114 114 + <tspan letterSpacing='-.03em'>F</tspan> 115 115 + <tspan x={11.69} y={0}> 116 116 + pz 117 117 + </tspan> 118 118 + </text> 119 119 + </g> 120 120 + <g className='channelCircle' id='TP9' onClick={() => props.onChannelClick('TP9')} visibility={props.channelinfo.includes('TP9') ? 'show' : 'hidden'}> 121 121 + <circle cx={98.87} cy={455.81} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 122 122 + <text transform='translate(79.07 463.3)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 123 123 + TP9 124 124 + </text> 125 125 + </g> 126 126 + <g className='channelCircle' id='AF7' onClick={() => props.onChannelClick('AF7')} visibility={props.channelinfo.includes('AF7') ? 'show' : 'hidden'}> 127 127 + <circle cx={208.33} cy={166.08} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 128 128 + <text transform='translate(187.97 173.57)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 129 129 + AF7 130 130 + </text> 131 131 + </g> 132 132 + <g className='channelCircle' id='AF8' onClick={() => props.onChannelClick('AF8')} visibility={props.channelinfo.includes('AF8') ? 'show' : 'hidden'}> 133 133 + <circle cx={467.66} cy={166.08} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 134 134 + <text transform='translate(447.3 173.57)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 135 135 + AF8 136 136 + </text> 137 137 + </g> 138 138 + </svg>; 139 139 + 140 140 + export default SvgComponent;

-321

app/components/svgs/SignalQualityIndicatorSVG.js

reviewed

··· 1 1 - import React from 'react'; 2 2 - 3 3 - const SvgComponent = (props) => ( 4 4 - <svg 5 5 - id='SignalQualityIndicator' 6 6 - data-name='SignalQualityIndicator' 7 7 - style={{ minHeight: 250, minWidth: 250 }} 8 8 - viewBox='0 0 674.44 610.29' 9 9 - {...props} 10 10 - > 11 11 - <title>Signal Quality Indicator</title> 12 12 - <g id='Head_Plot' data-name='Head Plot'> 13 13 - <circle 14 14 - cx={336.54} 15 15 - cy={334.96} 16 16 - r={212.53} 17 17 - fillOpacity='0.0' 18 18 - stroke='#000' 19 19 - strokeLinecap='round' 20 20 - strokeMiterlimit={10} 21 21 - strokeWidth={2} 22 22 - strokeDasharray='16.064828872680664,22.089139938354492' 23 23 - /> 24 24 - <path 25 25 - stroke='#000' 26 26 - strokeLinecap='round' 27 27 - strokeMiterlimit={10} 28 28 - strokeWidth={2} 29 29 - d='M68.73 334h8' 30 30 - /> 31 31 - <path 32 32 - stroke='#000' 33 33 - strokeLinecap='round' 34 34 - strokeMiterlimit={10} 35 35 - strokeWidth={2} 36 36 - strokeDasharray='16.026018142700195,22.035776138305664' 37 37 - d='M98.76 334h483.79' 38 38 - /> 39 39 - <path 40 40 - stroke='#000' 41 41 - strokeLinecap='round' 42 42 - strokeMiterlimit={10} 43 43 - strokeWidth={2} 44 44 - d='M593.57 334h8M335.68 600.42v-8' 45 45 - /> 46 46 - <path 47 47 - fillOpacity='0.0' 48 48 - stroke='#000' 49 49 - strokeLinecap='round' 50 50 - strokeMiterlimit={10} 51 51 - strokeWidth={2} 52 52 - strokeDasharray='16.026018142700195,22.035776138305664' 53 53 - d='M335.68 570.39V86.6' 54 54 - /> 55 55 - <path 56 56 - fillOpacity='0.0' 57 57 - stroke='#000' 58 58 - strokeLinecap='round' 59 59 - strokeMiterlimit={10} 60 60 - strokeWidth={2} 61 61 - d='M335.68 75.58v-8' 62 62 - /> 63 63 - <path 64 64 - d='M282.85 72.63s24.95-42.38 51.95-42.38 51.95 42.38 51.95 42.38' 65 65 - fillOpacity='0.0' 66 66 - stroke='#000' 67 67 - strokeMiterlimit={10} 68 68 - strokeWidth={2} 69 69 - /> 70 70 - <circle 71 71 - cx={335.15} 72 72 - cy={334} 73 73 - r={266.42} 74 74 - fillOpacity='0.0' 75 75 - stroke='#000' 76 76 - strokeMiterlimit={10} 77 77 - strokeWidth={2} 78 78 - /> 79 79 - <path 80 80 - d='M73.11 288.57s-30 1.44-30 42.92S72.1 373 72.1 373M598 288.57s30 1.44 30 42.92S599 373 599 373' 81 81 - fillOpacity='0.0' 82 82 - stroke='#000' 83 83 - strokeMiterlimit={10} 84 84 - strokeWidth={2} 85 85 - /> 86 86 - </g> 87 87 - <g id='T7' visibility='hidden'> 88 88 - <circle cx={124.37} cy={333.72} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 89 89 - <text 90 90 - transform='translate(111.44 341.22)' 91 91 - fontSize={22} 92 92 - fontFamily='Lato-Bold,Lato' 93 93 - fontWeight={700} 94 94 - fill='#000' 95 95 - > 96 96 - T7 97 97 - </text> 98 98 - </g> 99 99 - <g id='FC5' visibility='hidden'> 100 100 - <circle cx={178.58} cy={259.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 101 101 - <text 102 102 - transform='translate(158.65 266.78)' 103 103 - fontSize={22} 104 104 - fontFamily='Lato-Bold,Lato' 105 105 - fontWeight={700} 106 106 - fill='#000' 107 107 - > 108 108 - FC5 109 109 - </text> 110 110 - </g> 111 111 - <g id='FC6' visibility='hidden'> 112 112 - <circle cx={495.58} cy={259.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 113 113 - <text 114 114 - transform='translate(475.65 266.78)' 115 115 - fontSize={22} 116 116 - fontFamily='Lato-Bold,Lato' 117 117 - fontWeight={700} 118 118 - fill='#000' 119 119 - > 120 120 - FC6 121 121 - </text> 122 122 - </g> 123 123 - <g id='F3' visibility='hidden'> 124 124 - <circle cx={240.35} cy={241.01} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 125 125 - <text 126 126 - transform='translate(227.8 248.5)' 127 127 - fontSize={22} 128 128 - fontFamily='Lato-Bold,Lato' 129 129 - fontWeight={700} 130 130 - fill='#000' 131 131 - > 132 132 - F3 133 133 - </text> 134 134 - </g> 135 135 - <g id='F4' visibility='hidden'> 136 136 - <circle cx={434.23} cy={241.01} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 137 137 - <text 138 138 - transform='translate(421.68 248.5)' 139 139 - fontSize={22} 140 140 - fontFamily='Lato-Bold,Lato' 141 141 - fontWeight={700} 142 142 - fill='#000' 143 143 - > 144 144 - F4 145 145 - </text> 146 146 - </g> 147 147 - <g id='AF3' visibility='hidden'> 148 148 - <circle cx={269.35} cy={185.69} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 149 149 - <text 150 150 - transform='translate(248.99 193.18)' 151 151 - fontSize={22} 152 152 - fontFamily='Lato-Bold,Lato' 153 153 - fontWeight={700} 154 154 - fill='#000' 155 155 - > 156 156 - AF3 157 157 - </text> 158 158 - </g> 159 159 - <g id='AF4' visibility='hidden'> 160 160 - <circle cx={406.36} cy={185.69} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 161 161 - <text 162 162 - transform='translate(385.99 193.18)' 163 163 - fontSize={22} 164 164 - fontFamily='Lato-Bold,Lato' 165 165 - fontWeight={700} 166 166 - fill='#000' 167 167 - > 168 168 - AF4 169 169 - </text> 170 170 - </g> 171 171 - <g id='M1' visibility='hidden'> 172 172 - <circle cx={78.53} cy={401.34} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 173 173 - <text 174 174 - transform='translate(61.92 408.83)' 175 175 - fontSize={22} 176 176 - fontFamily='Lato-Bold,Lato' 177 177 - fontWeight={700} 178 178 - fill='#000' 179 179 - > 180 180 - M1 181 181 - </text> 182 182 - </g> 183 183 - <g id='P7' visibility='hidden'> 184 184 - <circle cx={178.58} cy={475.91} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 185 185 - <text 186 186 - transform='translate(165.33 483.4)' 187 187 - fontSize={22} 188 188 - fontFamily='Lato-Bold,Lato' 189 189 - fontWeight={700} 190 190 - fill='#000' 191 191 - > 192 192 - P7 193 193 - </text> 194 194 - </g> 195 195 - <g id='O1' visibility='hidden'> 196 196 - <circle cx={255.35} cy={531.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 197 197 - <text 198 198 - transform='translate(240.18 538.79)' 199 199 - fontSize={22} 200 200 - fontFamily='Lato-Bold,Lato' 201 201 - fontWeight={700} 202 202 - fill='#000' 203 203 - > 204 204 - O1 205 205 - </text> 206 206 - </g> 207 207 - <g id='O2' visibility='hidden'> 208 208 - <circle cx={420.11} cy={531.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 209 209 - <text 210 210 - transform='translate(404.94 538.79)' 211 211 - fontSize={22} 212 212 - fontFamily='Lato-Bold,Lato' 213 213 - fontWeight={700} 214 214 - fill='#000' 215 215 - > 216 216 - O2 217 217 - </text> 218 218 - </g> 219 219 - <g id='P8' visibility='hidden'> 220 220 - <circle cx={494.77} cy={475.91} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 221 221 - <text 222 222 - transform='translate(481.51 483.4)' 223 223 - fontSize={22} 224 224 - fontFamily='Lato-Bold,Lato' 225 225 - fontWeight={700} 226 226 - fill='#000' 227 227 - > 228 228 - P8 229 229 - </text> 230 230 - </g> 231 231 - <g id='T8' visibility='hidden'> 232 232 - <circle cx={548.92} cy={333.72} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 233 233 - <text 234 234 - transform='translate(535.99 341.22)' 235 235 - fontSize={22} 236 236 - fontFamily='Lato-Bold,Lato' 237 237 - fontWeight={700} 238 238 - fill='#000' 239 239 - > 240 240 - T8 241 241 - </text> 242 242 - </g> 243 243 - <g id='M2' visibility='hidden'> 244 244 - <circle cx={592.53} cy={400.89} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 245 245 - <text 246 246 - transform='translate(575.92 408.38)' 247 247 - fontSize={22} 248 248 - fontFamily='Lato-Bold,Lato' 249 249 - fontWeight={700} 250 250 - fill='#000' 251 251 - > 252 252 - M2 253 253 - </text> 254 254 - </g> 255 255 - <g id='TP10' visibility='hidden'> 256 256 - <circle cx={571.87} cy={455.81} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 257 257 - <text 258 258 - transform='translate(550.45 463.3)' 259 259 - fontSize={18} 260 260 - fontFamily='Lato-Bold,Lato' 261 261 - fontWeight={700} 262 262 - fill='#000' 263 263 - > 264 264 - TP10 265 265 - </text> 266 266 - </g> 267 267 - <g id='Fpz' visibility='hidden'> 268 268 - <circle cx={335.79} cy={121.75} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 269 269 - <text 270 270 - transform='translate(318.56 129.24)' 271 271 - fontSize={22} 272 272 - fontFamily='Lato-Bold,Lato' 273 273 - fontWeight={700} 274 274 - fill='#000' 275 275 - > 276 276 - <tspan letterSpacing='-.03em'>F</tspan> 277 277 - <tspan x={11.69} y={0}> 278 278 - pz 279 279 - </tspan> 280 280 - </text> 281 281 - </g> 282 282 - <g id='TP9' visibility='hidden'> 283 283 - <circle cx={98.87} cy={455.81} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 284 284 - <text 285 285 - transform='translate(79.07 463.3)' 286 286 - fontSize={22} 287 287 - fontFamily='Lato-Bold,Lato' 288 288 - fontWeight={700} 289 289 - fill='#000' 290 290 - > 291 291 - TP9 292 292 - </text> 293 293 - </g> 294 294 - <g id='AF7' visibility='hidden'> 295 295 - <circle cx={208.33} cy={166.08} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 296 296 - <text 297 297 - transform='translate(187.97 173.57)' 298 298 - fontSize={22} 299 299 - fontFamily='Lato-Bold,Lato' 300 300 - fontWeight={700} 301 301 - fill='#000' 302 302 - > 303 303 - AF7 304 304 - </text> 305 305 - </g> 306 306 - <g id='AF8' visibility='hidden'> 307 307 - <circle cx={467.66} cy={166.08} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 308 308 - <text 309 309 - transform='translate(447.3 173.57)' 310 310 - fontSize={22} 311 311 - fontFamily='Lato-Bold,Lato' 312 312 - fontWeight={700} 313 313 - fill='#000' 314 314 - > 315 315 - AF8 316 316 - </text> 317 317 - </g> 318 318 - </svg> 319 319 - ); 320 320 - 321 321 - export default SvgComponent;

+135

app/components/svgs/SignalQualityIndicatorSVG.tsx

reviewed

··· 1 1 + import React from "react"; 2 2 + 3 3 + const SvgComponent = props => <svg id='SignalQualityIndicator' data-name='SignalQualityIndicator' style={{ minHeight: 250, minWidth: 250 }} viewBox='0 0 674.44 610.29' {...props}> 4 4 + <title>Signal Quality Indicator</title> 5 5 + <g id='Head_Plot' data-name='Head Plot'> 6 6 + <circle cx={336.54} cy={334.96} r={212.53} fillOpacity='0.0' stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} strokeDasharray='16.064828872680664,22.089139938354492' /> 7 7 + <path stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} d='M68.73 334h8' /> 8 8 + <path stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} strokeDasharray='16.026018142700195,22.035776138305664' d='M98.76 334h483.79' /> 9 9 + <path stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} d='M593.57 334h8M335.68 600.42v-8' /> 10 10 + <path fillOpacity='0.0' stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} strokeDasharray='16.026018142700195,22.035776138305664' d='M335.68 570.39V86.6' /> 11 11 + <path fillOpacity='0.0' stroke='#000' strokeLinecap='round' strokeMiterlimit={10} strokeWidth={2} d='M335.68 75.58v-8' /> 12 12 + <path d='M282.85 72.63s24.95-42.38 51.95-42.38 51.95 42.38 51.95 42.38' fillOpacity='0.0' stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 13 13 + <circle cx={335.15} cy={334} r={266.42} fillOpacity='0.0' stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 14 14 + <path d='M73.11 288.57s-30 1.44-30 42.92S72.1 373 72.1 373M598 288.57s30 1.44 30 42.92S599 373 599 373' fillOpacity='0.0' stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 15 15 + </g> 16 16 + <g id='T7' visibility='hidden'> 17 17 + <circle cx={124.37} cy={333.72} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 18 18 + <text transform='translate(111.44 341.22)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 19 19 + T7 20 20 + </text> 21 21 + </g> 22 22 + <g id='FC5' visibility='hidden'> 23 23 + <circle cx={178.58} cy={259.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 24 24 + <text transform='translate(158.65 266.78)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 25 25 + FC5 26 26 + </text> 27 27 + </g> 28 28 + <g id='FC6' visibility='hidden'> 29 29 + <circle cx={495.58} cy={259.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 30 30 + <text transform='translate(475.65 266.78)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 31 31 + FC6 32 32 + </text> 33 33 + </g> 34 34 + <g id='F3' visibility='hidden'> 35 35 + <circle cx={240.35} cy={241.01} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 36 36 + <text transform='translate(227.8 248.5)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 37 37 + F3 38 38 + </text> 39 39 + </g> 40 40 + <g id='F4' visibility='hidden'> 41 41 + <circle cx={434.23} cy={241.01} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 42 42 + <text transform='translate(421.68 248.5)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 43 43 + F4 44 44 + </text> 45 45 + </g> 46 46 + <g id='AF3' visibility='hidden'> 47 47 + <circle cx={269.35} cy={185.69} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 48 48 + <text transform='translate(248.99 193.18)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 49 49 + AF3 50 50 + </text> 51 51 + </g> 52 52 + <g id='AF4' visibility='hidden'> 53 53 + <circle cx={406.36} cy={185.69} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 54 54 + <text transform='translate(385.99 193.18)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 55 55 + AF4 56 56 + </text> 57 57 + </g> 58 58 + <g id='M1' visibility='hidden'> 59 59 + <circle cx={78.53} cy={401.34} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 60 60 + <text transform='translate(61.92 408.83)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 61 61 + M1 62 62 + </text> 63 63 + </g> 64 64 + <g id='P7' visibility='hidden'> 65 65 + <circle cx={178.58} cy={475.91} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 66 66 + <text transform='translate(165.33 483.4)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 67 67 + P7 68 68 + </text> 69 69 + </g> 70 70 + <g id='O1' visibility='hidden'> 71 71 + <circle cx={255.35} cy={531.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 72 72 + <text transform='translate(240.18 538.79)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 73 73 + O1 74 74 + </text> 75 75 + </g> 76 76 + <g id='O2' visibility='hidden'> 77 77 + <circle cx={420.11} cy={531.29} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 78 78 + <text transform='translate(404.94 538.79)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 79 79 + O2 80 80 + </text> 81 81 + </g> 82 82 + <g id='P8' visibility='hidden'> 83 83 + <circle cx={494.77} cy={475.91} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 84 84 + <text transform='translate(481.51 483.4)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 85 85 + P8 86 86 + </text> 87 87 + </g> 88 88 + <g id='T8' visibility='hidden'> 89 89 + <circle cx={548.92} cy={333.72} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 90 90 + <text transform='translate(535.99 341.22)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 91 91 + T8 92 92 + </text> 93 93 + </g> 94 94 + <g id='M2' visibility='hidden'> 95 95 + <circle cx={592.53} cy={400.89} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 96 96 + <text transform='translate(575.92 408.38)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 97 97 + M2 98 98 + </text> 99 99 + </g> 100 100 + <g id='TP10' visibility='hidden'> 101 101 + <circle cx={571.87} cy={455.81} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 102 102 + <text transform='translate(550.45 463.3)' fontSize={18} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 103 103 + TP10 104 104 + </text> 105 105 + </g> 106 106 + <g id='Fpz' visibility='hidden'> 107 107 + <circle cx={335.79} cy={121.75} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 108 108 + <text transform='translate(318.56 129.24)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 109 109 + <tspan letterSpacing='-.03em'>F</tspan> 110 110 + <tspan x={11.69} y={0}> 111 111 + pz 112 112 + </tspan> 113 113 + </text> 114 114 + </g> 115 115 + <g id='TP9' visibility='hidden'> 116 116 + <circle cx={98.87} cy={455.81} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 117 117 + <text transform='translate(79.07 463.3)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 118 118 + TP9 119 119 + </text> 120 120 + </g> 121 121 + <g id='AF7' visibility='hidden'> 122 122 + <circle cx={208.33} cy={166.08} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 123 123 + <text transform='translate(187.97 173.57)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 124 124 + AF7 125 125 + </text> 126 126 + </g> 127 127 + <g id='AF8' visibility='hidden'> 128 128 + <circle cx={467.66} cy={166.08} r={30} stroke='#000' strokeMiterlimit={10} strokeWidth={2} /> 129 129 + <text transform='translate(447.3 173.57)' fontSize={22} fontFamily='Lato-Bold,Lato' fontWeight={700} fill='#000'> 130 130 + AF8 131 131 + </text> 132 132 + </g> 133 133 + </svg>; 134 134 + 135 135 + export default SvgComponent;