Merge pull request aces#13 from maltheism/main_new_task

update

README.md

@@ -15,7 +15,7 @@ pyCat is a GUI interface for iEEG to BIDS format and used with LORIS (Longitudin
 
  * Node.js >= 15.9.0
  * NPM >= 7.5.3
- * Python == 3.8.x
+ * Python == 3.8.5
 
 #### Development Build guides
 

package.json

@@ -1,9 +1,9 @@
 {
   "name": "pycat",
-  "description": "pycat is a desktop interface for conversion to BIDS",
+  "description": "pycat - iEEG to BIDS format Wizard",
   "version": "1.0.0",
   "dependencies": {
-    "electron-log": "^4.3.1",
+    "electron-log": "^4.3.2",
     "electron-store": "^7.0.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
@@ -14,10 +14,10 @@
   "devDependencies": {
     "@babel/core": "^7.12.17",
     "@babel/eslint-parser": "^7.12.17",
-    "concurrently": "^5.3.0",
+    "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
     "electron": "^11.2.3",
-    "electron-builder": "^22.9.1",
+    "electron-builder": "^22.9.0",
     "electron-devtools-installer": "^3.1.1",
     "electron-rebuild": "^2.3.5",
     "eslint": "^7.20.0",

public/electron.js

@@ -6,7 +6,7 @@ const {app} = electron;
 const {BrowserWindow} = electron;
 const nativeImage = electron.nativeImage;
 
-const PycatService = require('./pycat-service');
+const PycatService = require('../public/pycatService');
 
 // Launch python service.
 const pycatService = new PycatService('production'); // production or development
@@ -50,6 +50,7 @@ const createWindow = () => {
     webPreferences: {
       webSecurity: true,
       nodeIntegration: true,
+      contextIsolation: false,
       enableRemoteModule: true,
       nativeWindowOpen: true,
     },

public/pycat-service.js → public/pycatService.js

@@ -1,12 +1,13 @@
-const {fork} = require('child_process');
+const {spawn} = require('child_process'); // {fork}
+
 
 /**
  * PycatService
  */
 module.exports = class PycatService {
   /**
    * constructor
-   * @param {string} mode
+   * @param {string} mode - production or development.
    */
   constructor(mode) {
     const os = require('os');
@@ -26,14 +27,31 @@ module.exports = class PycatService {
           'dist/pycat-service-windows.exe' :
           'dist/pycat-service'
     );
-    this.process = fork(pathToService, {silent: true});
+    console.log(pathToService);
+    this.process = spawn(pathToService, [], {
+      // stdio: ['pipe', 'pipe', 'pipe'],
+      silent: true,
+      // encoding: 'utf8',
+    });
+    this.process.stdout.on('data', (data) => {
+      console.log('stdout data:');
+      console.log(`stdout: ${data}`);
+    });
+    this.process.stderr.on('data', (data) => {
+      console.log('stderr data:');
+    });
+    this.process.on('close', (code) => {
+      console.log('close:');
+      console.log(`child process exited with code ${code}`);
+    });
   }
   /**
    * shutdown the service process
    */
   shutdown() {
     if (this.mode === 'development') return;
     if (this.process) {
+      console.log('SHUTDOWN of pycatService');
       this.process.kill();
       this.process = null;
     }

python/pycat.py

@@ -33,4 +33,8 @@ def disconnect(sid):
 
 
 if __name__ == '__main__':
-    eventlet.wsgi.server(eventlet.listen(('', 5000)), app)
+    eventlet.wsgi.server(
+        eventlet.listen(('', 5000)),
+        app,
+        log_output=False
+    )

src/App.js

@@ -38,6 +38,10 @@ const App = () => {
         }, 1500);
   }, []);
 
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return (
     <Socket uri={uri} options={options}>
       <AppContext.Provider value={{

src/jsx/Configuration.js

@@ -2,9 +2,6 @@ import React, {useState, useContext} from 'react';
 import {AppContext} from '../context';
 import PropTypes from 'prop-types';
 
-// Socket.io
-// import {Event, SocketContext} from './socket.io';
-
 // Components
 import {
   DirectoryInput,
@@ -21,38 +18,40 @@ import {
 const Configuration = (props) => {
   // React Context
   const appContext = useContext(AppContext);
-  // const socketContext = useContext(SocketContext);
 
   // React State
-  const [edfFile, setEdfFile] = useState('');
+  const [edfFile, setEdfFile] = useState({});
   const [eventsTSV, setEventsTSV] = useState({});
   const [bidsDirectory, setBidsDirectory] = useState(null);
-  const [lineFreq, setLineFreq] = useState(''); // line_freq
+  const [lineFreq, setLineFreq] = useState('');
   const [siteID, setSiteID] = useState('');
 
+  /**
+   * onUserInput - input change by user.
+   * @param {string} name - element name
+   * @param {object|string} value - element value
+   */
   const onUserInput = async (name, value) => {
+    // Update the state of Configurations.
     if (name === 'edfFile') {
       await setEdfFile(value);
-      await appContext.setTask(name, value);
     } else if (name === 'eventsTSV') {
       await setEventsTSV(value);
-      await appContext.setTask(name, value);
     } else if (name === 'bidsDirectory') {
       await setBidsDirectory(value);
-      await appContext.setTask(name, value);
     } else if (name === 'lineFreq') {
       await setLineFreq(value);
-      await appContext.setTask(name, value);
     } else if (name === 'siteID') {
       await setSiteID(value);
-      await appContext.setTask(name, value);
     }
+    // Update the app context for task.
+    await appContext.setTask(name, value);
   };
 
-  // const onMessage = (message) => {
-  //   console.log(message);
-  // };
-
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return props.visible ? (
     <>
       <div className={'header'}>
@@ -108,7 +107,6 @@ const Configuration = (props) => {
           />
         </div>
       </div>
-      {/*<Event event='response' handler={onMessage} />*/}
     </>
   ) : null;
 };

src/jsx/Converter.js

@@ -16,6 +16,9 @@ const Converter = (props) => {
   const appContext = useContext(AppContext);
   const socketContext = useContext(SocketContext);
 
+  /**
+   * beginBidsCreation - create BIDS format.
+   */
   const beginBidsCreation = () => {
     socketContext.emit('ieeg_to_bids', {
       file_path: appContext.getFromTask('edfFile').path,
@@ -27,10 +30,18 @@ const Converter = (props) => {
     });
   };
 
+  /**
+   * onMessage - received message from python.
+   * @param {object} message - response
+   */
   const onMessage = (message) => {
     console.log(message);
   };
 
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return props.visible ? (
     <>
       <div className={'header'}>

src/jsx/SplashScreen.js

@@ -8,6 +8,10 @@ import '../css/SplashScreen.css';
  * @return {JSX.Element} - Loader React component
  */
 const SplashScreen = (props) => {
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return props.visible ? (
     <>
       <p className={'loader-font'}>

src/jsx/Validator.js

@@ -7,6 +7,10 @@ import PropTypes from 'prop-types';
  * @return {JSX.Element}
  */
 const Validator = (props) => {
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return props.visible ? (
     <>
       <div style={{

src/jsx/Welcome.js

@@ -8,6 +8,10 @@ import '../css/Welcome.css';
  * @return {JSX.Element}
  */
 const Welcome = (props) => {
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return props.visible ? (
     <>
       <div className={'title'}>

src/jsx/elements/inputs.js

@@ -4,12 +4,25 @@ import PropTypes from 'prop-types';
 // Electron imports
 const electron = window.require('electron');
 
+/**
+ * FileInput - the input type='file' component.
+ * @param {object} props
+ * @return {JSX.Element}
+ */
 export const FileInput = (props) => {
+  /**
+   * handleChange - input change by user.
+   * @param {object} event - input event
+   */
   const handleChange = (event) => {
     // Send current file to parent component
     const file = event.target.files[0] ? event.target.files[0] : '';
     props.onUserInput(props.id, file);
   };
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return (
     <>
       <label><b>{props.label}</b></label>
@@ -39,15 +52,27 @@ FileInput.propTypes = {
   placeholder: PropTypes.string,
 };
 
+/**
+ * DirectoryInput - the directory select component.
+ * @param {object} props
+ * @return {JSX.Element}
+ */
 export const DirectoryInput = (props) => {
   const {dialog} = electron.remote;
+  /**
+   * handleClick - button by user.
+   */
   const handleClick = async () => {
     // Send directory to parent component
     const path = await dialog.showOpenDialog({
       properties: ['openDirectory'],
     });
     props.onUserInput(props.id, path.filePaths[0]);
   };
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return (
     <>
       <label htmlFor={props.id}><b>{props.label}</b></label>
@@ -72,11 +97,24 @@ DirectoryInput.propTypes = {
   placeholder: PropTypes.string,
 };
 
+/**
+ * TextInput - the input type='text' component.
+ * @param {object} props
+ * @return {JSX.Element}
+ */
 export const TextInput = (props) => {
+  /**
+   * handleChange - input change by user.
+   * @param {object} event - input event
+   */
   const handleChange = (event) => {
     const value = event.target.value;
     props.onUserInput(props.id, value);
   };
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return (
     <>
       <label htmlFor={props.id}><b>{props.label}</b></label>
@@ -100,11 +138,24 @@ TextInput.propTypes = {
   placeholder: PropTypes.string,
 };
 
+/**
+ * NumberInput - the input type='number' component.
+ * @param {object} props
+ * @return {JSX.Element}
+ */
 export const NumberInput = (props) => {
+  /**
+   * handleChange - input change by user.
+   * @param {object} event - input event
+   */
   const handleChange = (event) => {
     const value = event.target.value;
     props.onUserInput(props.id, value);
   };
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return (
     <>
       <label htmlFor={props.id}><b>{props.label}</b></label>

src/jsx/elements/menu.js

@@ -39,6 +39,10 @@ const MenuTab = (props) => {
       styles.title.active :
       {}),
   };
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return (
     <div style={styles.menuTab}>
       <div style={styleTitleText}
@@ -75,6 +79,10 @@ const Menu = (props) => {
       display: 'table',
     },
   };
+  /**
+   * Renders the React component.
+   * @return {JSX.Element} - React markup for component.
+   */
   return props.visible ? (
     <div style={styles.root}>
       <div style={styles.menu}>