[wip] Move to Pyodide

.gitignore

@@ -49,3 +49,5 @@ npm-debug.log.*
 *.sass.d.ts
 *.scss.d.ts
 keys.js
+
+app/utils/pyodide/src

app/actions/index.tsx

@@ -1,3 +1,3 @@
 export * from './experimentActions';
-export * from './jupyterActions';
+export * from './pyodideActions';
 export * from './deviceActions';

app/actions/pyodideActions.ts

@@ -0,0 +1,36 @@
+import { createAction } from '@reduxjs/toolkit';
+import { ActionType } from 'typesafe-actions';
+import { PYODIDE_VARIABLE_NAMES } from '../constants/constants';
+
+// -------------------------------------------------------------------------
+// Actions
+
+export const PyodideActions = {
+  Launch: createAction('LAUNCH'),
+  SetPyodideWorker: createAction<Worker, 'SET_PYODIDE_WORKER'>(
+    'SET_PYODIDE_WORKER'
+  ),
+  LoadEpochs: createAction<string[], 'LOAD_EPOCHS'>('LOAD_EPOCHS'),
+  LoadCleanedEpochs: createAction<string[], 'LOAD_CLEANED_EPOCHS'>(
+    'LOAD_CLEANED_EPOCHS'
+  ),
+  LoadPSD: createAction('LOAD_PSD'),
+  LoadERP: createAction<string, 'LOAD_ERP'>('LOAD_ERP'),
+  LoadTopo: createAction('LOAD_TOPO'),
+  CleanEpochs: createAction('CLEAN_EPOCHS'),
+  GetEpochsInfo: createAction<PYODIDE_VARIABLE_NAMES, 'GET_EPOCHS_INFO'>(
+    'GET_EPOCHS_INFO'
+  ),
+  GetChannelInfo: createAction('GET_CHANNEL_INFO'),
+  SetEpochInfo: createAction<any, 'SET_EPOCH_INFO'>('SET_EPOCH_INFO'),
+  SetChannelInfo: createAction<any, 'SET_CHANNEL_INFO'>('SET_CHANNEL_INFO'),
+  SetPSDPlot: createAction<any, 'SET_PSD_PLOT'>('SET_PSD_PLOT'),
+  SetTopoPlot: createAction<any, 'SET_TOPO_PLOT'>('SET_TOPO_PLOT'),
+  SetERPPlot: createAction<any, 'SET_ERP_PLOT'>('SET_ERP_PLOT'),
+  ReceiveMessage: createAction<any, 'RECEIVE_MESSAGE'>('RECEIVE_MESSAGE'),
+  ReceiveError: createAction<any, 'RECEIVE_ERROR'>('RECEIVE_ERROR'),
+} as const;
+
+export type PyodideActionType = ActionType<
+  typeof PyodideActions[keyof typeof PyodideActions]
+>;

app/components/AnalyzeComponent.tsx

@@ -18,7 +18,6 @@ import {
   DEVICES,
   MUSE_CHANNELS,
   EMOTIV_CHANNELS,
-  KERNEL_STATUS,
   EXPERIMENTS,
 } from '../constants/constants';
 import {
@@ -34,10 +33,9 @@ import {
 } from '../utils/behavior/compute';
 import SecondaryNavComponent from './SecondaryNavComponent';
 import ClickableHeadDiagramSVG from './svgs/ClickableHeadDiagramSVG';
-import JupyterPlotWidget from './JupyterPlotWidget';
+import PyodidePlotWidget from './PyodidePlotWidget';
 import { HelpButton } from './CollectComponent/HelpSidebar';
-import { Kernel } from '../constants/interfaces';
-import { JupyterActions } from '../actions/jupyterActions';
+import { PyodideActions } from '../actions/pyodideActions';
 
 const ANALYZE_STEPS = {
   OVERVIEW: 'OVERVIEW',
@@ -54,9 +52,6 @@ interface Props {
   type: EXPERIMENTS;
   deviceType: DEVICES;
   isEEGEnabled: boolean;
-  kernel: Kernel;
-  kernelStatus: KERNEL_STATUS;
-  mainChannel: any;
   epochsInfo: Array<{
     [key: string]: number | string;
   }>;
@@ -74,7 +69,7 @@ interface Props {
     [key: string]: string;
   };
 
-  JupyterActions: typeof JupyterActions;
+  PyodideActions: typeof PyodideActions;
 }
 
 interface State {
@@ -163,9 +158,6 @@ export default class Analyze extends Component<Props, State> {
     const workspaceCleanData = await readWorkspaceCleanedEEGData(
       this.props.title
     );
-    if (this.props.kernelStatus === KERNEL_STATUS.OFFLINE) {
-      this.props.JupyterActions.LaunchKernel();
-    }
     const behavioralData = await readWorkspaceBehaviorData(this.props.title);
     this.setState({
       eegFilePaths: workspaceCleanData.map((filepath) => ({
@@ -200,7 +192,7 @@ export default class Analyze extends Component<Props, State> {
         selectedFilePaths: data.value,
         selectedSubjects: getSubjectNamesFromFiles(data.value),
       });
-      this.props.JupyterActions.LoadCleanedEpochs(data.value);
+      this.props.PyodideActions.LoadCleanedEpochs(data.value);
     }
   }
 
@@ -343,7 +335,7 @@ export default class Analyze extends Component<Props, State> {
 
   handleChannelSelect(channelName: string) {
     this.setState({ selectedChannel: channelName });
-    this.props.JupyterActions.LoadERP(channelName);
+    this.props.PyodideActions.LoadERP(channelName);
   }
 
   handleStepClick(step: string) {
@@ -480,7 +472,7 @@ export default class Analyze extends Component<Props, State> {
               </Segment>
             </Grid.Column>
             <Grid.Column width={8}>
-              <JupyterPlotWidget
+              <PyodidePlotWidget
                 title={this.props.title}
                 imageTitle={`${this.concatSubjectNames(
                   this.state.selectedSubjects
@@ -509,7 +501,7 @@ export default class Analyze extends Component<Props, State> {
               </Segment>
             </Grid.Column>
             <Grid.Column width={8}>
-              <JupyterPlotWidget
+              <PyodidePlotWidget
                 title={this.props.title}
                 imageTitle={`${this.concatSubjectNames(
                   this.state.selectedSubjects

app/components/CleanComponent/index.tsx

@@ -18,23 +18,19 @@ import { Link } from 'react-router-dom';
 import { isNil, isArray, isString } from 'lodash';
 import styles from '../styles/collect.css';
 import commonStyles from '../styles/common.css';
-import { EXPERIMENTS, DEVICES, KERNEL_STATUS } from '../../constants/constants';
-import { Kernel } from '../../constants/interfaces';
+import { EXPERIMENTS, DEVICES } from '../../constants/constants';
 import { readWorkspaceRawEEGData } from '../../utils/filesystem/storage';
 import CleanSidebar from './CleanSidebar';
-import { JupyterActions, ExperimentActions } from '../../actions';
+import { PyodideActions, ExperimentActions } from '../../actions';
 
 export interface Props {
   type?: EXPERIMENTS;
   title: string;
   deviceType: DEVICES;
-  mainChannel?: any;
-  kernel?: Kernel;
-  kernelStatus: KERNEL_STATUS;
   epochsInfo: Array<{
     [key: string]: number | string;
   }>;
-  JupyterActions: typeof JupyterActions;
+  PyodideActions: typeof PyodideActions;
   ExperimentActions: typeof ExperimentActions;
   subject: string;
   session: number;
@@ -72,9 +68,6 @@ export default class Clean extends Component<Props, State> {
 
   async componentDidMount() {
     const workspaceRawData = await readWorkspaceRawEEGData(this.props.title);
-    if (this.props.kernelStatus === KERNEL_STATUS.OFFLINE) {
-      this.props.JupyterActions.LaunchKernel();
-    }
     this.setState({
       subjects: workspaceRawData
         .map(
@@ -116,7 +109,7 @@ export default class Clean extends Component<Props, State> {
 
   handleLoadData() {
     this.props.ExperimentActions.SetSubject(this.state.selectedSubject);
-    this.props.JupyterActions.LoadEpochs(this.state.selectedFilePaths);
+    this.props.PyodideActions.LoadEpochs(this.state.selectedFilePaths);
   }
 
   handleSidebarToggle() {
@@ -230,25 +223,15 @@ export default class Clean extends Component<Props, State> {
                   <Divider hidden section />
                   <Grid textAlign="center" columns="equal">
                     <Grid.Column>
-                      <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}
-                      >
+                      <Button secondary onClick={this.handleLoadData}>
                         Load Dataset
                       </Button>
                     </Grid.Column>
                     <Grid.Column>
                       <Button
                         primary
                         disabled={isNil(this.props.epochsInfo)}
-                        onClick={this.props.JupyterActions.CleanEpochs}
+                        onClick={this.props.PyodideActions.CleanEpochs}
                       >
                         Clean Data
                       </Button>

app/components/HomeComponent/index.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { isNil } from 'lodash';
-import { Grid, Button, Header, Segment, Image, Table } from 'semantic-ui-react';
+import { Grid, Button, Header, Image, Table } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 import * as moment from 'moment';
 import { History } from 'history';
@@ -10,7 +10,6 @@ import styles from '../styles/common.css';
 import {
   EXPERIMENTS,
   SCREENS,
-  KERNEL_STATUS,
   CONNECTION_STATUS,
   DEVICE_AVAILABILITY,
   DEVICES,
@@ -19,7 +18,7 @@ import faceHouseIcon from '../../experiments/faces_houses/icon.png';
 import stroopIcon from '../../experiments/stroop/icon.png';
 import multitaskingIcon from '../../experiments/multitasking/icon.png';
 import searchIcon from '../../experiments/search/icon.png';
-import customIcon from '../../experiments/custom/icon.png';
+// import customIcon from '../../experiments/custom/icon.png';
 import appLogo from '../../assets/common/app_logo.png';
 import divingMan from '../../assets/common/divingMan.svg';
 import {
@@ -29,7 +28,7 @@ import {
   deleteWorkspaceDir,
 } from '../../utils/filesystem/storage';
 import {
-  JupyterActions,
+  PyodideActions,
   DeviceActions,
   ExperimentActions,
 } from '../../actions';
@@ -40,6 +39,7 @@ import OverviewComponent from './OverviewComponent';
 import EEGExplorationComponent from '../EEGExplorationComponent';
 import { SignalQualityData } from '../../constants/interfaces';
 import { getExperimentFromType } from '../../utils/labjs/functions';
+import PyodidePlotWidget from '../PyodidePlotWidget';
 
 const { dialog } = remote;
 
@@ -48,6 +48,7 @@ const HOME_STEPS = {
   RECENT: 'MY EXPERIMENTS',
   NEW: 'EXPERIMENT BANK',
   EXPLORE: 'EXPLORE EEG DATA',
+  PYODIDE_TEST: 'PYODIDE_TEST',
 };
 
 export interface Props {
@@ -60,9 +61,11 @@ export interface Props {
   deviceType: DEVICES;
   ExperimentActions: typeof ExperimentActions;
   history: History;
-  JupyterActions: typeof JupyterActions;
-  kernelStatus: KERNEL_STATUS;
+  PyodideActions: typeof PyodideActions;
   signalQualityObservable?: Observable<SignalQualityData>;
+  topoPlot: {
+    [key: string]: string;
+  };
 }
 
 interface State {
@@ -94,6 +97,7 @@ export default class Home extends Component<Props, State> {
   }
 
   componentDidMount() {
+    this.props.PyodideActions.Launch();
     this.setState({ recentWorkspaces: readWorkspaces() });
   }
 
@@ -226,7 +230,7 @@ export default class Home extends Component<Props, State> {
                       if (!workspaceState) {
                         return undefined;
                       }
-                      const dateModified = workspaceState.dateModified;
+                      const { dateModified } = workspaceState;
                       return (
                         <Table.Row key={dir} className={styles.experimentRow}>
                           <Table.Cell className={styles.experimentRowName}>
@@ -361,6 +365,25 @@ export default class Home extends Component<Props, State> {
             DeviceActions={this.props.DeviceActions}
           />
         );
+      case HOME_STEPS.PYODIDE_TEST:
+        return (
+          <Grid columns="two" relaxed padded>
+            <Grid.Row>
+              <Grid.Column>
+                <Button onClick={this.props.PyodideActions.LoadTopo}>
+                  Generate Plot
+                </Button>
+              </Grid.Column>
+              <Grid.Column>
+                <PyodidePlotWidget
+                  title={"Test Plot"}
+                  imageTitle={`Test-Topoplot`}
+                  plotMIMEBundle={this.props.topoPlot}
+                />
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        );
     }
   }
 

app/components/JupyterPlotWidget.tsx → app/components/PyodidePlotWidget.tsx

@@ -6,7 +6,7 @@ import {
   standardTransforms,
 } from '@nteract/transforms';
 import { isNil } from 'lodash';
-import { storeJupyterImage } from '../utils/filesystem/storage';
+import { storePyodideImage } from '../utils/filesystem/storage';
 
 interface Props {
   title: string;
@@ -24,7 +24,7 @@ interface State {
   mimeType: string;
 }
 
-export default class JupyterPlotWidget extends Component<Props, State> {
+export default class PyodidePlotWidget extends Component<Props, State> {
   // state: State;
   constructor(props: Props) {
     super(props);
@@ -56,7 +56,7 @@ export default class JupyterPlotWidget extends Component<Props, State> {
 
   handleSave() {
     const buf = Buffer.from(this.state.rawData, 'base64');
-    storeJupyterImage(this.props.title, this.props.imageTitle, buf);
+    storePyodideImage(this.props.title, this.props.imageTitle, buf);
   }
 
   renderResults() {