large overhaul to the design, style for better ux

Co-Authored-By: Yury-Shevchenko <[email protected]>

this adds an option to enable/disable eeg, adds tiles for the four main experiment types

Author: teonbrooks

app/actions/experimentActions.js

@@ -5,7 +5,9 @@ export const START = 'START';
 export const PAUSE = 'PAUSE';
 export const STOP = 'STOP';
 export const SET_TYPE = 'SET_TYPE';
+export const SET_PARADIGM = 'SET_PARADIGM';
 export const SET_SUBJECT = 'SET_SUBJECT';
+export const SET_GROUP = 'SET_GROUP';
 export const CREATE_NEW_WORKSPACE = 'CREATE_NEW_WORKSPACE';
 export const SET_SESSION = 'SET_SESSION';
 export const SET_PARAMS = 'SET_PARAMS';
@@ -24,7 +26,9 @@ export const pause = () => ({ type: PAUSE });
 // export const stop = () => ({ type: STOP });
 export const stop = payload => ({ payload, type: STOP });
 export const setType = payload => ({ payload, type: SET_TYPE });
+export const setParadigm = payload => ({ payload, type: SET_PARADIGM });
 export const setSubject = payload => ({ payload, type: SET_SUBJECT });
+export const setGroup = payload => ({ payload, type: SET_GROUP });
 export const setSession = payload => ({ payload, type: SET_SESSION });
 export const setParams = payload => ({ payload, type: SET_PARAMS });
 export const setDescription = payload => ({ payload, type: SET_DESCRIPTION });

app/components/CollectComponent/PreTestComponent.js

@@ -36,6 +36,7 @@ interface Props {
   trials: { [string]: Trial };
   timelines: {};
   subject: string;
+  group: string;
   session: number;
   openRunComponent: () => void;
 }

app/components/CollectComponent/RunComponent.js

@@ -34,6 +34,7 @@ interface Props {
   trials: { [string]: Trial };
   timelines: {};
   subject: string;
+  group: string;
   session: number;
   deviceType: DEVICES;
   isEEGEnabled: boolean;
@@ -42,6 +43,7 @@ interface Props {
 
 interface State {
   isInputModalOpen: boolean;
+  isGroupInputModalOpen: boolean;
 }
 
 export default class Run extends Component<Props, State> {
@@ -52,18 +54,21 @@ export default class Run extends Component<Props, State> {
   handleStartExperiment: () => void;
   handleTimeline: () => void;
   handleCloseInputModal: () => void;
+  handleCloseGroupInputModal: () => void;
   handleClean: () => void;
 
   constructor(props: Props) {
     super(props);
     this.state = {
-      isInputModalOpen: props.subject.length === 0
+      isInputModalOpen: props.subject.length === 0,
+      isGroupInputModalOpen: false
     };
     this.handleSubjectEntry = debounce(this.handleSubjectEntry, 500).bind(this);
     this.handleSessionEntry = debounce(this.handleSessionEntry, 500).bind(this);
     this.handleStartExperiment = this.handleStartExperiment.bind(this);
     this.handleTimeline = this.handleTimeline.bind(this);
     this.handleCloseInputModal = this.handleCloseInputModal.bind(this);
+    this.handleCloseGroupInputModal = this.handleCloseGroupInputModal.bind(this);
   }
 
   componentDidMount() {
@@ -94,6 +99,11 @@ export default class Run extends Component<Props, State> {
     this.setState({ isInputModalOpen: false });
   }
 
+  handleCloseGroupInputModal(name: string) {
+    this.props.experimentActions.setGroup(name);
+    this.setState({ isGroupInputModalOpen: false });
+  }
+
   handleTimeline() {
     let injectionFunction = () => null;
     if (this.props.isEEGEnabled) {
@@ -144,6 +154,7 @@ export default class Run extends Component<Props, State> {
             basic
             textAlign="left"
             className={styles.descriptionContainer}
+            vertical
           >
             <Header as="h1">{this.props.type}</Header>
             <Segment basic className={styles.infoSegment}>
@@ -157,6 +168,19 @@ export default class Run extends Component<Props, State> {
                 onClick={() => this.setState({ isInputModalOpen: true })}
               />
             </Segment>
+
+            <Segment basic className={styles.infoSegment}>
+              Group Name: <b>{this.props.group}</b>
+              <Button
+                basic
+                circular
+                size="huge"
+                icon="edit"
+                className={styles.closeButton}
+                onClick={() => this.setState({ isGroupInputModalOpen: true })}
+              />
+            </Segment>
+
             <Segment basic className={styles.infoSegment}>
               Session Number: <b>{this.props.session}</b>
             </Segment>
@@ -175,7 +199,7 @@ export default class Run extends Component<Props, State> {
     }
     return (
       <ExperimentWindow settings={{
-          script: this.props.type,
+          script: this.props.paradigm,
           on_finish: (csv) => {
             this.props.experimentActions.stop({data: csv});
           }
@@ -201,6 +225,12 @@ export default class Run extends Component<Props, State> {
           onExit={() => this.setState({ isInputModalOpen: false })}
           header="Enter Subject Name"
         />
+        <InputModal
+          open={this.state.isGroupInputModalOpen}
+          onClose={this.handleCloseGroupInputModal}
+          onExit={() => this.setState({ isGroupInputModalOpen: false })}
+          header="Enter Group Name"
+        />
       </div>
     );
   }

app/components/CollectComponent/index.js

@@ -33,6 +33,7 @@ interface Props {
   trials: ?{ [string]: Trial };
   timelines: ?{};
   subject: string;
+  group: string;
   session: number;
   isEEGEnabled: boolean;
 }
@@ -141,6 +142,7 @@ export default class Collect extends Component<Props, State> {
           trials={this.props.trials}
           timelines={this.props.timelines}
           subject={this.props.subject}
+          group={this.props.group}
           session={this.props.session}
           openRunComponent={this.handleRunComponentOpen}
         />