#139 Flexlayout, redux, topbar and drawer changes as per new mockups

Author: rodriguez-facundo

webapp/Theme.js

@@ -1,11 +1,8 @@
 
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
-import purple from '@material-ui/core/colors/purple';
-import orange from '@material-ui/core/colors/orange';
 
 // orange
 const primaryColor = '#37ABC8'
-const secondaryColor = '#37ABC8'
 
 export const bgLight = '#4A4A4A';
 export const bgRegular = '#434343';
@@ -63,7 +60,8 @@ export default createMuiTheme({
     MuiMenuItem: { root: { color: 'white' } },
 
     MuiListItemText: { root: { color: 'white' } },
-    MuiDialogTitle: { root: { color: 'white' } }
+    MuiDialogTitle: { root: { color: 'white' } },
+    MuiTypography: { root: { color: 'white' } }
 
   }
 });

webapp/components/NetPyNE.js

@@ -7,31 +7,26 @@ import {
 } from "netpyne/components";
 
 import { withStyles } from '@material-ui/core/styles'
+import { NetPyNEPythonConsole } from 'netpyne/components'
 
 const styles = ({ zIndex, palette, spacing }) => ({
+  root: { height: '100%', overflow: 'hidden' },
   container: {
     height: "100%",
     width: "100%",
     display: "flex",
     flexDirection: "column"
   },
-  toolbar: {
-    backgroundColor: palette.primary.main,
-    width: "100%",
-    boxShadow: "0 0px 4px 0 rgba(0, 0, 0, 0.2), 0 0px 8px 0 rgba(0, 0, 0, 0.19)",
-    position: "relative",
-    top: 0,
-    left: 0,
-    zIndex: zIndex.appBar
-  },
+  console: { marginTop: 12, width: 0, height: 0 },
   views: {
     display: "flex",
     flexFlow: "rows",
     width: "100%",
     marginRight: spacing(-1)
   },
   drawer: { marginLeft: spacing(-1) },
-  content: { position: "relative", zIndex: zIndex.drawer + 1 }
+  topbar: { position: "relative", zIndex: zIndex.drawer + 1 },
+  content: { flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }
 })
 
 
@@ -54,14 +49,26 @@ class NetPyNE extends React.Component {
     const { classes } = this.props
 
     return (
-      <div className={classes.container}>
-        <div className={classes.content}>
-          <Topbar/>
+      <div className={classes.root}>
+        <div className={classes.container}>
+          <div className={classes.topbar}>
+            <Topbar/>
+          </div>
+          <div className={classes.content}>
+            <Drawer/>
+            <LayoutManager/>
+          </div>
         </div>
-        <div style={{ flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }}>
-          <Drawer/>
-          <LayoutManager/>
+
+
+        <div className={classes.console}>
+          {/* Flexlayout bottom panel gives weird layout so can't send the console there
+              when the widget is closed and the python console must remain open somewhere for the app to sync
+           */}
+          {!this.props.pythonConsoleWidget ? <NetPyNEPythonConsole /> : null}
         </div>
+      
+      
       </div>
     );
   }

webapp/components/general/NetPyNEField.js

@@ -72,6 +72,7 @@ export default class NetPyNEField extends Component {
               onClick={() => this.handleOpenHelp(help)}
             />
             <Dialog
+              style={{ zIndex: 5000 }}
               open={this.state.openHelp}
               onClose={() => this.setState({ openHelp: false })}
             >

webapp/components/general/NetPyNEIcons.js

@@ -78,7 +78,7 @@ export const Dimensions = connect(
 
 import _NetPyNE from "./NetPyNE";
 export const NetPyNE = connect(
-  state => ({ editMode: state.general.editMode, }),
+  state => ({ editMode: state.general.editMode, pythonConsoleWidget: state.flexlayout.widgets['python'] }),
   pythonCallErrorDispatch
 )(_NetPyNE);
 

webapp/components/index.js

@@ -2,7 +2,7 @@ import React, { createRef } from 'react';
 import ReactDOM from 'react-dom'
 import Canvas from '@geppettoengine/geppetto-client/js/components/interface/3dCanvas/Canvas';
 import ControlPanel from 'geppetto-client/js/components/interface/controlPanel/controlpanel';
-import IconButton from '@geppettoengine/geppetto-client/js/components/controls/iconButton/IconButton';
+
 import { NetWorkControlButtons } from 'netpyne/components'
 
 

webapp/components/instantiation/NetPyNEInstantiated.js

@@ -1,14 +1,13 @@
 import React, { Component } from 'react';
 import * as FlexLayout from 'geppetto-client/js/components/interface/flexLayout2/src/index';
-import Actions from 'geppetto-client/js/components/interface/flexLayout2/src/model/Actions';
+import Actions from '@geppettoengine/geppetto-client/js/components/interface/flexLayout2/src/model/Actions';
 
 
 import { WidgetStatus } from '../../constants';
 import { isEqual } from '../../Utils';
 import WidgetFactory from './WidgetFactory';
 import TabsetIconFactory from './TabsetIconFactory'
 import defaultLayoutConfiguration from './layoutConf.json';
-import simulateLayoutConfiguration from './simulateLayoutConf.json';
 import Icon from '@material-ui/core/Icon';
 
 import { withStyles } from '@material-ui/core/styles'
@@ -62,7 +61,7 @@ class LayoutManager extends Component {
 
     this.cacheModels = { 
       edit: FlexLayout.Model.fromJson(layout), 
-      simulate: FlexLayout.Model.fromJson(simulateLayoutConfiguration) 
+      simulate: FlexLayout.Model.fromJson(layout) 
     }
   }
 
@@ -83,10 +82,6 @@ class LayoutManager extends Component {
     if (newWidgets.length > 0) {
       this.addWidgets(newWidgets);
     }
-
-    if (!this.props.editMode && !this.cacheModels.simulate.getNodeById(widgets.python.id)) {
-      this.addWidgets([widgets.python]);
-    }
 
     const updatedWidgets = this.findUpdatedWidgets(widgets, oldWidgets);
     if (updatedWidgets) {
@@ -136,7 +131,40 @@ class LayoutManager extends Component {
   }
 
   addWidget (widgetConfiguration) {
-    this.refs.layout.addTabToTabSet(widgetConfiguration.panelName, widget2Node(widgetConfiguration));
+    const model = this.getModel()
+    let tabset = model.getNodeById(widgetConfiguration.panelName)
+    if (tabset === undefined) {
+      this.createTabSet(widgetConfiguration.panelName)
+    }
+    this.refs.layout.addTabToTabSet(widgetConfiguration.panelName, widget2Node(widgetConfiguration))
+  }
+  
+  createTabSet (tabsetID) {
+    // In case the tabset doesn't exist
+    const model = this.getModel()
+    const rootNode = model.getNodeById("root")
+
+    const pyPanel = model.getNodeById('consolePanel')
+    if (pyPanel) {
+      pyPanel._setWeight(20)
+    }
+
+    let hrow = new FlexLayout.RowNode(model, {});
+    hrow._setWeight(100)
+
+    const tabset = new FlexLayout.TabSetNode(model, { id: tabsetID });
+    tabset._setWeight(80)
+    
+    hrow._addChild(tabset)
+    
+    rootNode.getChildren().forEach(child => hrow._addChild(child))
+    rootNode._removeAll()
+    rootNode._addChild(hrow, 0);
+    if (!this.props.editMode && tabsetID === 'plotPanel') {
+      // We need to resize Geppetto 3D canvas to new panel sizes
+      setTimeout(() => window.dispatchEvent(new Event('resize')), 1000)
+      
+    }
   }
 
   updateWidgets (widgets) {
@@ -214,11 +242,31 @@ class LayoutManager extends Component {
     case Actions.MOVE_NODE :
       window.dispatchEvent(new Event('resize'));
       break;
+    case Actions.ADD_NODE:{
+      if (this.props.editMode && action.data.toNode === 'hlsPanel') {
+        action.data.index = this.findWidgetInsertionIndex(action.data.json.config.pos)
+      }
+      break
+    }
     }
-       
     model.doAction(action);
   }
 
+  findWidgetInsertionIndex (position) {
+    const model = this.getModel()
+    const tabset = model.getNodeById('hlsPanel')
+        
+    const positions = tabset.getChildren().map(node => node.getConfig().pos)
+    var index = -1
+    for (let i = 0; i < positions.length; i++) {
+      if (position < positions[i]) {
+        index = i
+        break
+      }
+    }
+    return index
+  }
+
   onActionMaximizeWidget (action) {
     const model = this.getModel()
     const { widgets } = this.props;
@@ -270,7 +318,11 @@ class LayoutManager extends Component {
 
   clickOnBordersAction (node) {
     const model = this.getModel()
-    model.doAction(FlexLayout.Actions.moveNode(node.getId(), 'bottomPanel', FlexLayout.DockLocation.CENTER, 0));
+    let tabset = model.getNodeById('consolePanel')
+    if (tabset === undefined) {
+      this.createTabSet('consolePanel')
+    }
+    model.doAction(FlexLayout.Actions.moveNode(node.getId(), 'consolePanel', FlexLayout.DockLocation.CENTER, 0));
   }
 
   onRenderTab (node,renderValues) {

webapp/components/layout/LayoutManager.js

@@ -9,43 +9,7 @@
         "type": "tabset",
         "weight": 100,
         "id": "root",
-        "children": [
-            {
-                "type": "row",
-                "weight": 100,
-                "children": [
-                    {
-                        "type": "row",
-                        "weight": 65,
-                        "children": [
-                            {
-                                "type": "tabset",
-                                "weight": 100,
-                                "id": "hlsPanel",
-                                "enableDeleteWhenEmpty": false,
-                                "children": [
-                                ]
-                            }
-                        ]
-                    },
-                    {
-                        "type": "row",
-                        "weight": 35,
-                        "children": [
-                            {
-                                "type": "tabset",
-                                "weight": 100,
-                                "id": "consolePanel",
-                                "enableDeleteWhenEmpty": false,
-                                "children": [
-                                ]
-                            }
-                        ]
-                    }
-
-                ]
-            }
-        ]
+        "children": []
     }
   }