Project "Jiffy Lube": TypeScript, Continuous Integration, React 16.13, etc.

app/components/AnalyzeComponent.tsx

@@ -9,8 +9,9 @@ import {
   Button,
   Checkbox,
   Sidebar,
+  DropdownProps,
 } from 'semantic-ui-react';
-import { isNil } from 'lodash';
+import { isNil, isArray, isString } from 'lodash';
 import Plot from 'react-plotly.js';
 import styles from './styles/common.css';
 import {
@@ -50,64 +51,48 @@ const ANALYZE_STEPS_BEHAVIOR = {
 
 interface Props {
   title: string;
-  type: EXPERIMENTS | null | undefined;
+  type: EXPERIMENTS;
   deviceType: DEVICES;
   isEEGEnabled: boolean;
-  kernel: Kernel | null | undefined;
+  kernel: Kernel;
   kernelStatus: KERNEL_STATUS;
-  mainChannel: any | null | undefined;
-  epochsInfo:
-    | Array<{
-        [key: string]: number | string;
-      }>
-    | null
-    | undefined;
-  channelInfo: Array<string> | null | undefined;
-  psdPlot:
-    | {
-        [key: string]: string;
-      }
-    | null
-    | undefined;
-  topoPlot:
-    | {
-        [key: string]: string;
-      }
-    | null
-    | undefined;
-  erpPlot:
-    | {
-        [key: string]: string;
-      }
-    | null
-    | undefined;
+  mainChannel: any;
+  epochsInfo: Array<{
+    [key: string]: number | string;
+  }>;
+
+  channelInfo: Array<string>;
+  psdPlot: {
+    [key: string]: string;
+  };
+
+  topoPlot: {
+    [key: string]: string;
+  };
+
+  erpPlot: {
+    [key: string]: string;
+  };
+
   JupyterActions: typeof JupyterActions;
 }
 
 interface State {
   activeStep: string;
   selectedChannel: string;
-  eegFilePaths: Array<
-    | {
-        key: string;
-        text: string;
-        value: { name: string; dir: string };
-      }
-    | null
-    | undefined
-  >;
-  behaviorFilePaths: Array<
-    | {
-        key: string;
-        text: string;
-        value: string;
-      }
-    | null
-    | undefined
-  >;
-  selectedFilePaths: Array<string | null | undefined>;
-  selectedBehaviorFilePaths: Array<string | null | undefined>;
-  selectedSubjects: Array<string | null | undefined>;
+  eegFilePaths: Array<{
+    key: string;
+    text: string;
+    value: { name: string; dir: string };
+  }>;
+  behaviorFilePaths: Array<{
+    key: string;
+    text: string;
+    value: string;
+  }>;
+  selectedFilePaths: Array<string>;
+  selectedBehaviorFilePaths: Array<string>;
+  selectedSubjects: Array<string>;
   selectedDependentVariable: string;
   removeOutliers: boolean;
   showDataPoints: boolean;
@@ -118,18 +103,15 @@ interface State {
   dataToPlot: number[];
   layout: Record<string, any>;
   helpMode: string;
-  dependentVariables: Array<
-    | {
-        key: string;
-        text: string;
-        value: string;
-      }
-    | null
-    | undefined
-  >;
+  dependentVariables: Array<{
+    key: string;
+    text: string;
+    value: string;
+  }>;
 }
 // TODO: Add a channel callback from reading epochs so this screen can be aware of which channels are
 // available in dataset
+// TODO: Refactor component to DRY up handler functions
 export default class Analyze extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -212,12 +194,14 @@ export default class Analyze extends Component<Props, State> {
     return subjects.reduce((acc, curr) => `${acc}-${curr}`);
   };
 
-  handleDatasetChange(event: Record<string, any>, data: Record<string, any>) {
-    this.setState({
-      selectedFilePaths: data.value,
-      selectedSubjects: getSubjectNamesFromFiles(data.value),
-    });
-    this.props.JupyterActions.LoadCleanedEpochs(data.value);
+  handleDatasetChange(event: Record<string, any>, data: DropdownProps) {
+    if (isStringArray(data.value)) {
+      this.setState({
+        selectedFilePaths: data.value,
+        selectedSubjects: getSubjectNamesFromFiles(data.value),
+      });
+      this.props.JupyterActions.LoadCleanedEpochs(data.value);
+    }
   }
 
   handleBehaviorDatasetChange(
@@ -279,13 +263,17 @@ export default class Analyze extends Component<Props, State> {
   }
 
   handleRemoveOutliers(event: Record<string, any>, data: Record<string, any>) {
-    const { dataToPlot, layout } = aggregateDataForPlot(
+    const aggregatedData = aggregateDataForPlot(
       readBehaviorData(this.state.selectedBehaviorFilePaths),
       this.state.selectedDependentVariable,
       !this.state.removeOutliers,
       this.state.showDataPoints,
       this.state.displayMode
     );
+    if (!aggregatedData) {
+      return;
+    }
+    const { dataToPlot, layout } = aggregatedData;
     this.setState({
       removeOutliers: !this.state.removeOutliers,
       dataToPlot,
@@ -295,13 +283,17 @@ export default class Analyze extends Component<Props, State> {
   }
 
   handleDataPoints(event: Record<string, any>, data: Record<string, any>) {
-    const { dataToPlot, layout } = aggregateDataForPlot(
+    const aggregatedData = aggregateDataForPlot(
       readBehaviorData(this.state.selectedBehaviorFilePaths),
       this.state.selectedDependentVariable,
       this.state.removeOutliers,
       !this.state.showDataPoints,
       this.state.displayMode
     );
+    if (!aggregatedData) {
+      return;
+    }
+    const { dataToPlot, layout } = aggregatedData;
     this.setState({
       showDataPoints: !this.state.showDataPoints,
       dataToPlot,
@@ -314,13 +306,17 @@ export default class Analyze extends Component<Props, State> {
       this.state.selectedBehaviorFilePaths &&
       this.state.selectedBehaviorFilePaths.length > 0
     ) {
-      const { dataToPlot, layout } = aggregateDataForPlot(
+      const aggregatedData = aggregateDataForPlot(
         readBehaviorData(this.state.selectedBehaviorFilePaths),
         this.state.selectedDependentVariable,
         this.state.removeOutliers,
         this.state.showDataPoints,
         displayMode
       );
+      if (!aggregatedData) {
+        return;
+      }
+      const { dataToPlot, layout } = aggregatedData;
       this.setState({
         dataToPlot,
         layout,
@@ -475,7 +471,9 @@ export default class Analyze extends Component<Props, State> {
                   selection
                   closeOnChange
                   value={this.state.selectedFilePaths}
-                  options={this.state.eegFilePaths}
+                  options={this.state.eegFilePaths.map(
+                    (eegFilePath) => eegFilePath.value
+                  )}
                   onChange={this.handleDatasetChange}
                 />
                 {this.renderEpochLabels()}
@@ -659,3 +657,7 @@ export default class Analyze extends Component<Props, State> {
     );
   }
 }
+
+function isStringArray(data: any): data is string[] {
+  return isArray(data.value) && data.value.every(isString);
+}

app/components/CleanComponent/index.tsx

@@ -248,7 +248,7 @@ export default class Clean extends Component<Props, State> {
                       <Button
                         primary
                         disabled={isNil(this.props.epochsInfo)}
-                        onClick={this.props.JupyterActions.CleanEpochs()}
+                        onClick={this.props.JupyterActions.CleanEpochs}
                       >
                         Clean Data
                       </Button>

app/components/CollectComponent/ConnectModal.tsx

@@ -10,15 +10,15 @@ import {
   SCREENS,
 } from '../../constants/constants';
 import styles from '../styles/collect.css';
-import { SignalQualityData, PipesEpoch } from '../../constants/interfaces';
+import { SignalQualityData } from '../../constants/interfaces';
 import { DeviceActions } from '../../actions';
 
 interface Props {
   history: History;
   open: boolean;
   onClose: () => void;
   connectedDevice: Record<string, any>;
-  signalQualityObservable?: Observable<PipesEpoch>;
+  signalQualityObservable?: Observable<SignalQualityData>;
   deviceType: DEVICES;
   deviceAvailability: DEVICE_AVAILABILITY;
   connectionStatus: CONNECTION_STATUS;
@@ -27,7 +27,7 @@ interface Props {
 }
 
 interface State {
-  selectedDevice: any | null | undefined;
+  selectedDevice: any;
   instructionProgress: INSTRUCTION_PROGRESS;
 }
 

app/components/CollectComponent/index.tsx

@@ -1,6 +1,7 @@
 import { Observable } from 'rxjs';
 import React, { Component } from 'react';
 import { isNil } from 'lodash';
+import { History } from 'history';
 import {
   EXPERIMENTS,
   DEVICES,
@@ -11,6 +12,7 @@ import {
   Trial,
   ExperimentParameters,
   SignalQualityData,
+  PipesEpoch,
 } from '../../constants/interfaces';
 import PreTestComponent from './PreTestComponent';
 import ConnectModal from './ConnectModal';

app/components/DesignComponent/CustomDesignComponent.tsx

@@ -9,7 +9,7 @@ import {
   Image,
   Table,
 } from 'semantic-ui-react';
-import { isNil } from 'lodash';
+import { isNil, isString } from 'lodash';
 import { History } from 'history';
 
 import styles from '../styles/common.css';
@@ -158,15 +158,18 @@ export default class CustomDesign extends Component<Props, State> {
                   label={FIELDS.QUESTION}
                   value={this.state.description.question}
                   placeholder="Explain your research question here."
-                  onChange={(event, data) =>
+                  onChange={(event, data) => {
+                    if (!isString(data.value)) {
+                      return;
+                    }
                     this.setState({
                       description: {
                         ...this.state.description,
                         question: data.value,
                       },
                       saved: false,
-                    })
-                  }
+                    });
+                  }}
                 />
               </Form>
             </Grid.Column>
@@ -185,15 +188,18 @@ export default class CustomDesign extends Component<Props, State> {
                   label={FIELDS.HYPOTHESIS}
                   value={this.state.description.hypothesis}
                   placeholder="Describe your hypothesis here."
-                  onChange={(event, data) =>
+                  onChange={(event, data) => {
+                    if (!isString(data.value)) {
+                      return;
+                    }
                     this.setState({
                       description: {
                         ...this.state.description,
                         hypothesis: data.value,
                       },
                       saved: false,
-                    })
-                  }
+                    });
+                  }}
                 />
               </Form>
             </Grid.Column>
@@ -212,15 +218,18 @@ export default class CustomDesign extends Component<Props, State> {
                   label={FIELDS.METHODS}
                   value={this.state.description.methods}
                   placeholder="Explain how you will design your experiment to answer the question here."
-                  onChange={(event, data) =>
+                  onChange={(event, data) => {
+                    if (!isString(data.value)) {
+                      return;
+                    }
                     this.setState({
                       description: {
                         ...this.state.description,
                         methods: data.value,
                       },
                       saved: false,
-                    })
-                  }
+                    });
+                  }}
                 />
               </Form>
             </Grid.Column>
@@ -581,12 +590,15 @@ export default class CustomDesign extends Component<Props, State> {
                     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) =>
+                    onChange={(event, data) => {
+                      if (!isString(data.value)) {
+                        return;
+                      }
                       this.setState({
                         params: { ...this.state.params, intro: data.value },
                         saved: false,
-                      })
-                    }
+                      });
+                    }}
                   />
                 </Form>
               </Segment>
@@ -608,12 +620,15 @@ export default class CustomDesign extends Component<Props, State> {
                     autoHeight
                     value={this.state.params.taskHelp}
                     placeholder="e.g., Press 1 for a face and 9 for a house"
-                    onChange={(event, data) =>
+                    onChange={(event, data) => {
+                      if (!isString(data.value)) {
+                        return;
+                      }
                       this.setState({
                         params: { ...this.state.params, taskHelp: data.value },
                         saved: false,
-                      })
-                    }
+                      });
+                    }}
                   />
                 </Form>
               </Segment>