#139 Focus tabs by clicking the docker and create tabsets if they don't exist

Author: rodriguez-facundo

webapp/components/NetPyNE.js

@@ -61,12 +61,12 @@ class NetPyNE extends React.Component {
         </div>
 
 
-        <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 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/layout/LayoutManager.js

@@ -136,34 +136,38 @@ class LayoutManager extends Component {
     if (tabset === undefined) {
       this.createTabSet(widgetConfiguration.panelName)
     }
-    this.refs.layout.addTabToTabSet(widgetConfiguration.panelName, widget2Node(widgetConfiguration))
+    if (widgetConfiguration.status === WidgetStatus.BORDER){
+      this.refs.layout.addTabToTabSet('border_bottom', widget2Node(widgetConfiguration))
+    } else {
+      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.getChildren().forEach(child => {
+      const newWeight = child.getWeight() / 2
+      child._setWeight(newWeight)
+      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)
-      
     }
   }
 

webapp/components/layout/layoutConf.json

@@ -3,13 +3,16 @@
         "sideBorders": 8,
         "tabSetHeaderHeight": 26,
         "tabSetTabStripHeight": 26,
-        "enableEdgeDock": false
+        "enableEdgeDock": false,
+        "borderBarSize": "0px"
     },
     "layout": {
         "type": "tabset",
         "weight": 100,
         "id": "root",
-        "children": []
+        "children": [
+            
+        ]
     }
   }
 

webapp/constants.js

@@ -12,7 +12,8 @@ export const WidgetStatus = {
   HIDDEN: 'HIDDEN',
   ACTIVE: 'ACTIVE',
   MAXIMIZED: 'MAXIMIZED',
-  MINIMIZED: 'MINIMIZED'
+  MINIMIZED: 'MINIMIZED',
+  BORDER: 'BORDER'
 };
 
 export const MODEL_STATE = {

webapp/redux/reducers/flexlayout.js

@@ -310,11 +310,10 @@ export const HLS_WIDGETS = {
 }
 
 export const FLEXLAYOUT_DEFAULT_STATE = { 
-  // 'python': PYTHON_CONSOLE_WIDGET 
-  widgets: {},
+  widgets: { python: PYTHON_CONSOLE_WIDGET },
   widgetsBackground: {
-    'D3Canvas': MORPHOLOGY_WIDGET,
-    // 'python': PYTHON_CONSOLE_WIDGET,
+    D3Canvas: MORPHOLOGY_WIDGET,
+    python: PYTHON_CONSOLE_WIDGET,
   }
 };