Merge pull request #146 from MetaCell/feature/142

Feature/142: Layout refactor

Author: filippomc

netpyne_ui/geppetto

@@ -0,0 +1 @@
+Subproject commit 7588ed3475f0da25e6caed3d48e43b86d1fb4fc4

package-lock.json

@@ -8,7 +8,7 @@ jQuery(function () {
   const MuiThemeProvider = require('@material-ui/core/styles').MuiThemeProvider;
   const NetPyNE = require('./components').NetPyNE;
 
-  const theme = require('./Theme').default
+  const theme = require('./theme').default
 
   const Provider = require("react-redux").Provider;
   const configureStore = require('./redux/store').default;

webapp/Main.js

@@ -185,32 +185,5 @@ const Utils = {
   evalPythonMessage: evalPythonMessage
 }
 
-/**
- * Deep object comparison
- * @param {*} a 
- * @param {*} b 
- */
-export function isEqual (a, b) {
-  if (a === b) {
-    return true;
-  }
-  if (a instanceof Date && b instanceof Date) {
-    return a.getTime() === b.getTime();
-  }
-  if (!a || !b || (typeof a !== 'object' && typeof b !== 'object')) {
-    return a === b;
-  }
-  if (a === null || a === undefined || b === null || b === undefined) {
-    return false;
-  }
-  if (a.prototype !== b.prototype) {
-    return false;
-  }
-  let keys = Object.keys(a);
-  if (keys.length !== Object.keys(b).length) {
-    return false;
-  }
-  return keys.every(k => isEqual(a[k], b[k]));
-}
 
 export default Utils

webapp/Utils.js

@@ -7,7 +7,7 @@ import {
 } from "netpyne/components";
 
 import { withStyles } from '@material-ui/core/styles'
-
+import Utils from '../Utils';
 const styles = ({ zIndex, palette, spacing }) => ({
   root: { height: '100%', overflow: 'hidden' },
   container: {
@@ -18,18 +18,44 @@ const styles = ({ zIndex, palette, spacing }) => ({
   },
   topbar: { position: "relative", zIndex: zIndex.drawer + 1 },
   content: { flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }
-})
+});
+
+import { EDIT_WIDGETS, PYTHON_CONSOLE_WIDGET, WidgetStatus } from '../constants'
 
 
 class NetPyNE extends React.Component {
 
   openPythonCallDialog (event) {
     const payload = { errorMessage: event['evalue'], errorDetails: event['traceback'].join('\n') }
-    this.props.pythonCallErrorDialogBox(payload)
+    this.props.pythonCallErrorDialogBox(payload);
+  }
+
+  addMetadataToWindow (data) {
+    console.log("Initialising NetPyNE Tabs");
+    window.metadata = data.metadata;
+    window.currentFolder = data.currentFolder;
+    window.isDocker = data.isDocker;
+    window.pythonConsoleLoaded = true
   }
 
   componentDidMount () {
-    GEPPETTO.on(GEPPETTO.Events.Error_while_exec_python_command, this.openPythonCallDialog, this)
+    GEPPETTO.on(GEPPETTO.Events.Error_while_exec_python_command, this.openPythonCallDialog, this);
+    this.props.setWidgets({ [PYTHON_CONSOLE_WIDGET.id]: { ...PYTHON_CONSOLE_WIDGET, panelName: PYTHON_CONSOLE_WIDGET.defaultPanel, status: WidgetStatus.ACTIVE } });
+    GEPPETTO.on('jupyter_geppetto_extension_ready', data => {
+      let project = { id: 1, name: 'Project', experiments: [{ "id": 1, "name": 'Experiment', "status": 'DESIGN' }] }
+      GEPPETTO.Manager.loadProject(project, false);
+      GEPPETTO.Manager.loadExperiment(1, [], []);
+      Utils.execPythonMessage('from netpyne_ui.netpyne_geppetto import netpyne_geppetto');
+      Utils.evalPythonMessage('netpyne_geppetto.getData',[]).then(response => {
+        const data = Utils.convertToJSON(response);
+        this.addMetadataToWindow(data);
+        this.props.modelLoaded();
+        this.props.setWidgets(EDIT_WIDGETS);
+        GEPPETTO.trigger("spinner:hide");
+      })
+      
+    });
+    
   }
 
   componentWillUnmount () {
@@ -38,6 +64,7 @@ class NetPyNE extends React.Component {
 
   render () {
     const { classes } = this.props
+    const Layout = LayoutManager();
     return (
       <div className={classes.root}>
         <div className={classes.container}>
@@ -46,7 +73,7 @@ class NetPyNE extends React.Component {
           </div>
           <div className={classes.content}>
             <Drawer/>
-            <LayoutManager/>
+            <Layout />
           </div>
         </div>
       </div>

webapp/components/NetPyNE.js

@@ -1,40 +1,25 @@
 import React, { Component } from 'react'
-import Utils from '../../Utils'
 
 import PythonConsole from '@geppettoengine/geppetto-client/js/components/interface/pythonConsole/PythonConsole';
 
-export default class NetPyNEPythonConsole extends Component {
-
-  addMetadataToWindow (data) {
-    console.log("Initialising NetPyNE Tabs");
-    window.metadata = data.metadata;
-    window.currentFolder = data.currentFolder;
-    window.isDocker = data.isDocker;
-    window.pythonConsoleLoaded = true
+export class NetPyNEPythonConsole extends Component {
+  
+  shouldComponentUpdate () {
+    return false;
   }
 
   componentWillUnmount () {
-    console.log("unmounting python console")
+    console.info("unmounting python console");
   }
 
   componentDidMount () {
-    if (!window.pythonConsoleLoaded) {
-      GEPPETTO.on('jupyter_geppetto_extension_ready', data => {
-        let project = { id: 1, name: 'Project', experiments: [{ "id": 1, "name": 'Experiment', "status": 'DESIGN' }] }
-        GEPPETTO.Manager.loadProject(project, false);
-        GEPPETTO.Manager.loadExperiment(1, [], []);
-        Utils.execPythonMessage('from netpyne_ui.netpyne_geppetto import netpyne_geppetto');
-        Utils.evalPythonMessage('netpyne_geppetto.getData',[]).then(response => {
-          const data = Utils.convertToJSON(response);
-          this.addMetadataToWindow(data)
-          this.props.modelLoaded();
-          GEPPETTO.trigger("spinner:hide");
-        })
-      });
-    }
+    
 
   }
   render () {
     return <PythonConsole pythonNotebookPath={"notebooks/notebook.ipynb"} />
   }
 }
+
+
+export default NetPyNEPythonConsole;

webapp/components/general/NetPyNEIcons.js

@@ -4,12 +4,10 @@ import PythonControlledCapability from "geppetto-client/js/communication/geppett
 
 import {
   activateWidget,
-  destroyWidget,
-  minimizeWidget,
-  maximizeWidget,
+  setWidgets,
   updateWidget,
   newWidget
-} from "../redux/actions/flexlayout";
+} from "../redux/actions/layout";
 import { openBackendErrorDialog, closeBackendErrorDialog } from '../redux/actions/errors';
 import {
   updateCards, editModel, simulateNetwork, createNetwork, 
@@ -79,8 +77,14 @@ export const Dimensions = connect(
 
 import _NetPyNE from "./NetPyNE";
 export const NetPyNE = connect(
-  state => ({ editMode: state.general.editMode }),
-  pythonCallErrorDispatch
+  null,
+  dispatch => ({ 
+    pythonCallErrorDialogBox: payload => dispatch(openBackendErrorDialog(payload)),
+    setWidgets: payload => dispatch(setWidgets(payload)),
+    modelLoaded: () => dispatch(modelLoaded), 
+    newWidget: widget => dispatch(newWidget(widget)),
+    activateWidget: widgetId => dispatch(activateWidget(widgetId))
+  })
 )(_NetPyNE);
 
 import _NetPyNECellRule from "./definition/cellRules/NetPyNECellRule";
@@ -90,17 +94,8 @@ export const NetPyNECellRule = connect((state, ownProps) => ({
 }))(_NetPyNECellRule);
 
 
-import _LayoutManager from "./layout/LayoutManager";
-export const LayoutManager = connect(
-  state => ({ ...state.flexlayout, editMode: state.general.editMode }),
-  dispatch => ({
-    updateWidget: widget => dispatch(updateWidget(widget)),
-    minimizeWidget: id => dispatch(minimizeWidget(id)),
-    destroyWidget: id => dispatch(destroyWidget(id)),
-    maximizeWidget: id => dispatch(maximizeWidget(id)),
-    activateWidget: id => dispatch(activateWidget(id))
-  })
-)(_LayoutManager);
+import { getInstance as getLayoutManagerInstance } from "./layout/LayoutManager";
+export const LayoutManager = () => connect(state => ({ layout: state.layout, }))(getLayoutManagerInstance().getComponent());
 
 
 import _NetPyNEPopulation from "./definition/populations/NetPyNEPopulation";
@@ -196,22 +191,11 @@ export const ActionDialog = connect(
   })
 )(_ActionDialog)
 
-import _NetPyNEPythonConsole from './general/NetPyNEPythonConsole'
-export const NetPyNEPythonConsole = connect(
-  null,
-  dispatch => ({ 
-    modelLoaded: () => dispatch(modelLoaded), 
-    newWidget: widget => dispatch(newWidget(widget)),
-    activateWidget: widgetId => dispatch(activateWidget(widgetId))
-  })
-)(_NetPyNEPythonConsole)
+export { NetPyNEPythonConsole } from './general/NetPyNEPythonConsole';
 
 import _Drawer from './settings/Drawer'
 export const Drawer = connect(
-  state => ({ 
-    widgets: state.flexlayout.widgets,
-    editMode: state.general.editMode 
-  }),
+  state => ({ editMode: state.general.editMode, layout: state.layout }),
   dispatch => ({ 
     updateWidget: newConf => dispatch(updateWidget(newConf)),
     newWidget: widget => dispatch(newWidget(widget)),