update

package.json

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "dependencies": {
     "electron-log": "^4.3.1",
+    "electron-store": "^7.0.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

public/electron.js

@@ -57,6 +57,7 @@ const createWindow = () => {
     height: 600,
     minWidth: 900,
     minHeight: 600,
+    backgroundColor: '#0A826E',
   });
   // mainWindow.maximize();
   mainWindow.show();

python/libs/iEEG.py

@@ -7,7 +7,7 @@
 
 class Converter:
     # data: {
-    #  file_path: '', // whee file located.
+    #  file_path: '', // where file located.
     #  bids_directory: '', // where to output.
     #  read_only: true/false // read without write or write.
     def __init__(self, data):

src/App.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import {AppContext} from './context';
 import './css/App.css';
 
 // Socket.io
@@ -10,15 +11,85 @@ const options = {
 
 // Components
 import Welcome from './jsx/Welcome';
+import SplashScreen from './jsx/SplashScreen';
+import Converter from './jsx/Converter';
+import Menu from './jsx/elements/menu';
+// import {Authentication} from './jsx/elements/authentication';
 
 /**
  * App - the starting point.
  * @return {JSX.Element}
  */
 const App = () => {
+  const [appMode, setAppMode] = useState('SplashScreen');
+  const [activeMenuTab, setActiveMenuTab] = useState(0);
+
+  /**
+   * Similar to componentDidMount and componentDidUpdate.
+   */
+  useEffect(() => {
+    setTimeout(
+        () => {
+          setAppMode('Welcome');
+        }, 1500);
+  }, []);
+
   return (
     <Socket uri={uri} options={options}>
-      <Welcome/>
+      <AppContext.Provider value={{
+        setAppMode: (appMode) => {
+          setAppMode(appMode);
+        },
+      }}>
+        <>
+          <Menu visible={appMode !== 'SplashScreen'}
+            tabs={[
+              {
+                title: 'Getting started',
+                onClick: (e) => {
+                  e.preventDefault();
+                  setActiveMenuTab(0);
+                  setAppMode('Welcome');
+                },
+              },
+              {
+                title: 'Anonymize data',
+                onClick: (e) => {
+                  e.preventDefault();
+                  setActiveMenuTab(1);
+                  setAppMode('Converter');
+                },
+              },
+              {
+                title: 'iEEG Converter',
+                onClick: (e) => {
+                  e.preventDefault();
+                  setActiveMenuTab(2);
+                  setAppMode('Converter');
+                },
+              },
+              {
+                title: 'Validator',
+                onClick: (e) => {
+                  e.preventDefault();
+                  setActiveMenuTab(3);
+                  setAppMode('Converter');
+                },
+              },
+            ]}
+            activeTab={activeMenuTab}
+          />
+          <div className={appMode !== 'SplashScreen' ? 'hidden' : ''}>
+            <SplashScreen/>
+          </div>
+          <div className={appMode !== 'Welcome' ? 'hidden' : ''}>
+            <Welcome/>
+          </div>
+          <div className={appMode !== 'Converter' ? 'hidden' : ''}>
+            <Converter/>
+          </div>
+        </>
+      </AppContext.Provider>
     </Socket>
   );
 };

src/context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+/**
+ * AppContext used as global state and init in App.js.
+ */
+export const AppContext = React.createContext({});

src/css/App.css

@@ -0,0 +1,19 @@
+html {
+    height: 100%;
+    -webkit-app-region: drag;
+    color: rgb(255, 255, 255);
+    background-color: rgb(10, 130, 110);
+}
+
+body {
+    margin: 0;
+    -webkit-app-region: drag;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.hidden {
+    display: none;
+}

src/css/SplashScreen.css

@@ -0,0 +1,27 @@
+.loader {
+    border: 8px solid #ffffff;
+    border-top: 8px solid #073e34;
+    border-left: 8px solid #073e34;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+.centered {
+    top: 50%;
+    left: 50%;
+    position: fixed;
+    margin-top: -30px;
+    margin-left: -45px;
+}
+.loader-font {
+    top: 50%;
+    left: 50%;
+    color: #ffffff;
+    font-size: 24px;
+    position: fixed;
+    margin: -120px 0 0 -110px;
+    font-family: "Bangla MN", serif;
+}

src/jsx/Converter.js

@@ -0,0 +1,136 @@
+import React, {useContext, useState} from 'react';
+
+// Socket.io
+import {Event, SocketContext} from './socket.io';
+
+// Components
+import {DirectoryInput, FileInput, TextInput} from './elements/inputs';
+
+/**
+ * Converter - the iEEG to BIDS Converter component.
+ * @param {object} props
+ * @return {JSX.Element}
+ */
+const Converter = (props) => {
+  // React Context
+  const socketContext = useContext(SocketContext);
+
+  console.log('Converter rnedered');
+
+  // React State
+  const [edfFile, setEdfFile] = useState({});
+  const [bidsDirectory, setBidsDirectory] = useState(null);
+  const [siteID, setSiteID] = useState('');
+
+  const fireBidsConverter = () => {
+    socketContext.emit('ieeg_to_bids', {
+      file_path: edfFile.path,
+      bids_directory: bidsDirectory,
+      read_only: false,
+    });
+  };
+
+  const fireModifyBidsTsv = () => {
+    socketContext.emit('modify_bids_tsv', {
+      bids_directory: bidsDirectory,
+      site_id: siteID,
+    });
+  };
+
+  const onMessage = (message) => {
+    console.log(message);
+  };
+
+  const onUserInput = async (name, value) => {
+    if (name === 'edfFile') {
+      await setEdfFile(value);
+    } else if (name === 'bidsDirectory') {
+      await setBidsDirectory(value);
+    } else if (name === 'siteID') {
+      await setSiteID(value);
+    }
+  };
+
+  return (
+    <>
+      <div style={{
+        fontSize: '20px',
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        cursor: 'default',
+        padding: '20px',
+      }}>
+        iEEG to BIDS Converter
+      </div>
+      <div style={{backgroundColor: '#039b83'}}>
+        <div style={{
+          padding: '20px',
+        }}>
+          <FileInput id='edfFile'
+            name='edfFile'
+            accept='.edf'
+            label='1. The file.edf to convert: '
+            onUserInput={onUserInput}
+          />
+        </div>
+        <div style={{
+          padding: '20px',
+        }}>
+          <DirectoryInput id='bidsDirectory'
+            name='bidsDirectory'
+            value='Choose directory'
+            label='2. The BIDS output directory: '
+            onUserInput={onUserInput}
+          />
+          <a style={{fontSize: '14px', cursor: 'default'}}>
+            {bidsDirectory ?? 'No directory chosen'}
+          </a>
+        </div>
+        <div style={{
+          padding: '20px',
+        }}>
+          <b style={{cursor: 'default'}}>
+            3. Convert file.edf to BIDS format:
+          </b>
+          <button onClick={fireBidsConverter}>
+            Start Task
+          </button>
+        </div>
+      </div>
+      <div style={{marginTop: '20px',
+        fontSize: '20px',
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        cursor: 'default',
+      }}>
+        Finalize participants.tsv for LORIS
+      </div>
+      <div style={{marginTop: '20px',
+        backgroundColor: '#039b83',
+        padding: '20px',
+        cursor: 'default',
+      }}>
+        <TextInput id='siteID'
+          name='siteID'
+          label='4. The SiteID from LORIS: '
+          value={siteID}
+          onUserInput={onUserInput}
+        />
+      </div>
+      <div style={{
+        padding: '20px',
+        backgroundColor: '#039b83',
+      }}>
+        <b style={{cursor: 'default'}}>
+          5. Modify participants.tsv data:
+        </b>
+        <button onClick={fireModifyBidsTsv}>
+          Start Task
+        </button>
+      </div>
+      <Event event='response' handler={onMessage} />
+    </>
+  );
+};
+
+export default Converter;

src/jsx/SplashScreen.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../css/SplashScreen.css';
+
+/**
+ * Display the splash screen animation.
+ * @param {object} props
+ * @return {JSX.Element} - Loader React component
+ */
+const SplashScreen = (props) => {
+  return (
+    <>
+      <p className={'loader-font'}>
+        PyCat is loading ...
+      </p>
+      <div
+        className={'loader centered'}
+        style={{width: parseInt(props.size), height: parseInt(props.size)}}
+      />
+    </>
+  );
+};
+SplashScreen.propTypes = {
+  size: PropTypes.string,
+};
+SplashScreen.defaultProps = {
+  size: '60',
+};
+
+export default SplashScreen;