Apply new eslint style to frontend codebase

Author: Lucas Rebscher

tests/frontend/e2e/tests/TestTutorial1.js

@@ -9,6 +9,7 @@ module.exports = {
 
     // Tweak some rules to our preferences
     'space-before-function-paren': ['error', 'always'],
+    'no-console': 0,
   },
   globals: {
     page: true,
@@ -20,5 +21,7 @@ module.exports = {
     net1: true,
     CanvasContainer: true,
     patchRequire: true,
+    window: true,
+    GEPPETTO: true,
   },
 };

webapp/.eslintrc.js

@@ -1,16 +1,16 @@
-global.jQuery = require("jquery");
+global.jQuery = require('jquery');
 global.GEPPETTO_CONFIGURATION = require('./GeppettoConfiguration.json');
 
-jQuery(function () {
+jQuery(() => {
   require('geppetto-client-initialization');
   const ReactDOM = require('react-dom');
   const React = require('react');
-  const MuiThemeProvider = require('@material-ui/core/styles').MuiThemeProvider;
-  const NetPyNE = require('./components').NetPyNE;
+  const { MuiThemeProvider } = require('@material-ui/core/styles');
+  const { NetPyNE } = require('./components');
 
-  const theme = require('./theme').default
+  const theme = require('./theme').default;
 
-  const Provider = require("react-redux").Provider;
+  const { Provider } = require('react-redux');
   const configureStore = require('./redux/store').default;
 
   require('./css/netpyne.less');
@@ -25,16 +25,15 @@ jQuery(function () {
     <div>
       <MuiThemeProvider theme={theme}>
         <Provider store={store}>
-          <NetPyNE ></NetPyNE>
+          <NetPyNE />
         </Provider>
       </MuiThemeProvider>
 
-    </div>, 
-    document.querySelector('#mainContainer')
+    </div>,
+    document.querySelector('#mainContainer'),
   );
 
   GEPPETTO.G.setIdleTimeOut(-1);
-  GEPPETTO.Resources.COLORS.DEFAULT = "#6f54aa";
-  GEPPETTO.trigger(GEPPETTO.Events.Show_spinner, "Initialising NetPyNE");
-  
-});
+  GEPPETTO.Resources.COLORS.DEFAULT = '#6f54aa';
+  GEPPETTO.trigger(GEPPETTO.Events.Show_spinner, 'Initialising NetPyNE');
+});

webapp/Main.js

@@ -1,157 +1,160 @@
 import {
   execPythonMessage,
-  evalPythonMessage
+  evalPythonMessage,
 } from '@geppettoengine/geppetto-client/js/communication/geppettoJupyter/GeppettoJupyterUtils';
 import React from 'react';
 
-
 const Utils = {
 
-  getAvailableKey: function (model, prefix) {
+  getAvailableKey (model, prefix) {
     if (model == undefined) {
       return prefix;
     }
     // Get New Available ID
-    var id = prefix;
+    let id = prefix;
     if (model[id + 0] == undefined) {
-      return id + 0
+      return id + 0;
     }
-    var i = 0;
-    id = prefix + i++
+    let i = 0;
+    id = prefix + i++;
     while (model[id] != undefined) {
       id = prefix + i++;
     }
     return id;
   },
 
-  getMetadataField: function (key, field) {
+  getMetadataField (key, field) {
     if (key == undefined) {
       return;
     }
-    var currentObject;
-    var nextObject = window.metadata;
-    key.split('.').forEach(item => {
-      if (item in nextObject) {
-        currentObject = nextObject[item];
-        if ("children" in currentObject) {
-          nextObject = currentObject["children"];
+    let currentObject;
+    let nextObject = window.metadata;
+    key.split('.')
+      .forEach((item) => {
+        if (item in nextObject) {
+          currentObject = nextObject[item];
+          if ('children' in currentObject) {
+            nextObject = currentObject.children;
+          }
+        } else {
+          currentObject = undefined;
         }
-      } else {
-        currentObject = undefined;
-        return;
-      }
-    });
+      });
     return (currentObject == undefined) ? currentObject : currentObject[field];
   },
 
-  getHTMLType: function (key) {
-    var type = this.getMetadataField(key, "type")
+  getHTMLType (key) {
+    const type = this.getMetadataField(key, 'type');
 
     switch (type) {
-    case "int":
-      var htmlType = "number"
-      break;
-    default:
-      var htmlType = "text"
-      break;
+      case 'int':
+        var htmlType = 'number';
+        break;
+      default:
+        var htmlType = 'text';
+        break;
     }
     return htmlType;
-
   },
 
-  isObject: function (item) {
+  isObject (item) {
     return (item && typeof item === 'object' && !Array.isArray(item));
   },
 
-  mergeDeep: function (target, source) {
-    let output = Object.assign({}, target);
+  mergeDeep (target, source) {
+    const output = { ...target };
     if (this.isObject(target) && this.isObject(source)) {
-      Object.keys(source).forEach(key => {
-        if (this.isObject(source[key])) {
-          if (!(key in target)) {
-            Object.assign(output, { [key]: source[key] });
+      Object.keys(source)
+        .forEach((key) => {
+          if (this.isObject(source[key])) {
+            if (!(key in target)) {
+              Object.assign(output, { [key]: source[key] });
+            } else {
+              output[key] = this.mergeDeep(target[key], source[key]);
+            }
           } else {
-            output[key] = this.mergeDeep(target[key], source[key]);
+            Object.assign(output, { [key]: source[key] });
           }
-        } else {
-          Object.assign(output, { [key]: source[key] });
-        }
-      });
+        });
     }
     return output;
   },
 
-  getFieldsFromMetadataTree: function (tree, callback) {
+  getFieldsFromMetadataTree (tree, callback) {
     function iterate (object, path) {
       if (Array.isArray(object)) {
-        object.forEach(function (a, i) {
+        object.forEach((a, i) => {
           iterate(a, path.concat(i));
         });
         return;
       }
       if (object !== null && typeof object === 'object') {
-        Object.keys(object).forEach(function (k) {
-          // Don't add the leaf to path
-          iterate(object[k], (typeof object[k] === 'object') ? path.concat(k) : path);
-
-        });
+        Object.keys(object)
+          .forEach((k) => {
+            // Don't add the leaf to path
+            iterate(object[k], (typeof object[k] === 'object') ? path.concat(k) : path);
+          });
         return;
       }
 
       // Push to array of field id. Remove children and create id string
-      modelFieldsIds.push(path.filter(path => path != 'children').join('.'));
+      modelFieldsIds.push(path.filter((path) => path != 'children')
+        .join('.'));
     }
 
     // Iterate the array extracting the fields Ids
     var modelFieldsIds = [];
     iterate(tree, []);
 
     // Generate model fields based on ids
-    var modelFields = [];
-    modelFieldsIds.filter((v, i, a) => a.indexOf(v) === i).map(id => modelFields.push(callback(id, 0)))
+    const modelFields = [];
+    modelFieldsIds.filter((v, i, a) => a.indexOf(v) === i)
+      .map((id) => modelFields.push(callback(id, 0)));
     return modelFields;
   },
 
   renameKey (path, oldValue, newValue, callback) {
-    this.execPythonMessage('netpyne_geppetto.rename("' + path + '","' + oldValue + '","' + newValue + '")')
-      .then(response => {
+    this.execPythonMessage(`netpyne_geppetto.rename("${path}","${oldValue}","${newValue}")`)
+      .then((response) => {
         callback(response, newValue);
-      })
+      });
   },
 
   nameValidation (name) {
     // Remove spaces
     if ((/\s/.test(name))) {
-      name = name.replace(/\s+/g, "").replace(/^\d+/g, "");
+      name = name.replace(/\s+/g, '')
+        .replace(/^\d+/g, '');
     } else if ((/^[0-9]/.test(name))) { // Remove number at the beginning
-      name = name.replace(/\s+/g, "").replace(/^\d+/g, "");
+      name = name.replace(/\s+/g, '')
+        .replace(/^\d+/g, '');
     }
     return name;
-
   },
 
   // FIXME: Hack to remove scaped chars (\\ -> \ and \' -> ') manually
-  convertToJSON (data){
-    if (typeof data === 'string' || data instanceof String){
-      return JSON.parse(data.replace(/\\\\/g, '\\').replace(/\\'/g, '\''))
+  convertToJSON (data) {
+    if (typeof data === 'string' || data instanceof String) {
+      return JSON.parse(data.replace(/\\\\/g, '\\')
+        .replace(/\\'/g, '\''));
     }
-    return data
+    return data;
   },
 
   getPlainStackTrace (stackTrace) {
     return stackTrace.replace(/\u001b\[.*?m/g, '');
   },
 
   getErrorResponse (data) {
-    var parsedData = this.convertToJSON(data)
-    if (parsedData.type && parsedData['type'] == 'ERROR') {
-      const error = { details: parsedData['details'] }
-      if (Object.prototype.hasOwnProperty.call(parsedData, "message")) {
-        error["message"] = parsedData['message']
-      } else if (Object.prototype.hasOwnProperty.call(parsedData, "websocket")) {
-        error["message"] = parsedData['websocket']
+    const parsedData = this.convertToJSON(data);
+    if (parsedData.type && parsedData.type == 'ERROR') {
+      const error = { details: parsedData.details };
+      if (Object.prototype.hasOwnProperty.call(parsedData, 'message')) {
+        error.message = parsedData.message;
+      } else if (Object.prototype.hasOwnProperty.call(parsedData, 'websocket')) {
+        error.message = parsedData.websocket;
       }
-      return error
+      return error;
     }
     return null;
   },
@@ -164,34 +167,33 @@ const Utils = {
        */
       context.setState({
         currentName: newValue,
-        errorMessage: "Error",
-        errorDetails: "Leading digits or whitespaces are not allowed in " + componentName + " names."
+        errorMessage: 'Error',
+        errorDetails: `Leading digits or whitespaces are not allowed in ${componentName} names.`,
       });
       return true;
-    } else if ((updateCondition) && (newValue == originalValue)){
+    } if ((updateCondition) && (newValue == originalValue)) {
       context.setState({ currentName: newValue });
       return true;
-    } else if (!(updateCondition) && (newValue == originalValue)) {
+    } if (!(updateCondition) && (newValue == originalValue)) {
       context.setState({
         currentName: newValue,
-        errorMessage: "Error",
-        errorDetails: "Name collision detected, the name " + newValue
-                                        + " is already used in this model, please pick another name."
+        errorMessage: 'Error',
+        errorDetails: `Name collision detected, the name ${newValue
+        } is already used in this model, please pick another name.`,
       });
       return false;
-    } else if (!(updateCondition) && (newValue != originalValue)) {
+    } if (!(updateCondition) && (newValue != originalValue)) {
       context.setState({
         currentName: newValue,
-        errorMessage: "Error",
-        errorDetails: "Leading digits or whitespaces are not allowed in " + componentName + " names."
+        errorMessage: 'Error',
+        errorDetails: `Leading digits or whitespaces are not allowed in ${componentName} names.`,
       });
       return false;
     }
   },
 
-  execPythonMessage: execPythonMessage,
-  evalPythonMessage: evalPythonMessage
-}
-
+  execPythonMessage,
+  evalPythonMessage,
+};
 
-export default Utils
+export default Utils;

webapp/Utils.js

@@ -6,6 +6,6 @@ module.exports = {
     ],
   ],
   plugins: [
-    "@babel/plugin-proposal-class-properties",
-  ]
-};
+    '@babel/plugin-proposal-class-properties',
+  ],
+};