#417 various fixes to the drawer and layout to go with the changes done for the layout manager

Author: ddelpiano

webapp/components/drawer/Drawer.js

@@ -19,6 +19,7 @@ import {
 import DrawerIcon from '../general/NetPyNEIcons';
 import useStyles from './useStyles';
 import Tooltip from '../general/Tooltip';
+import { maximizeWidget } from '@metacell/geppetto-meta-client/common/layout/actions';
 
 const drawerOpenWidth = 'auto';
 const drawerCloseWidth = 55;
@@ -94,7 +95,9 @@ const DrawerList = ({
   editMode,
   widgets,
   activateWidget,
+  maximiseWidget,
   updateWidget,
+  addWidget,
   classes,
 }) => {
   const [expand, setExpand] = useState(false);
@@ -110,10 +113,8 @@ const DrawerList = ({
     if (!widget) {
       const widgetConf = getNewWidgetConf(widgetId);
       newWidget({ path: widgetConf.id, ...widgetConf });
-    } else if (widget.status === WidgetStatus.MINIMIZED) {
-      updateBorderWidget(widgetId);
     } else {
-      activateWidget(widgetId);
+      updateBorderWidget(widgetId);
     }
   }
 
@@ -204,8 +205,8 @@ const DrawerList = ({
                 setTimeout(() => window.dispatchEvent(new Event('resize')), 400);
               }}
             >
-              {expand ? <DrawerIcon style={{ padding: '12px !important' }} name="arrow-left" fontSize="inherit" />
-                : <DrawerIcon style={{ padding: '12px !important' }} name="arrow-right" fontSize="inherit" />}
+              {expand ? <DrawerIcon name="arrow-left" fontSize="inherit" />
+                : <DrawerIcon name="arrow-right" fontSize="inherit" />}
             </IconButton>
           </Tooltip>
         </div>

webapp/components/drawer/useStyles.js

@@ -24,7 +24,7 @@ export default makeStyles(({
 
   closeDrawer: drawerCss(false, transitions, palette, spacing),
 
-  buttonContainerOpen: { textAlign: 'end' },
+  buttonContainerOpen: { textAlign: 'end', padding: '12px' },
   buttonContainerClosed: { textAlign: 'center', padding: '12px' },
   button: {
     color: 'white',

webapp/components/index.js

@@ -3,10 +3,12 @@ import { connect } from 'react-redux';
 import TextField from '@material-ui/core/TextField';
 import { getLayoutManagerInstance } from '@metacell/geppetto-meta-client/common/layout/LayoutManager';
 import {
+  addWidget,
   activateWidget,
   setWidgets,
   updateWidget,
   newWidget,
+  maximiseWidget,
 } from '@metacell/geppetto-meta-client/common/actions';
 import { TOPBAR_CONSTANTS } from '../constants';
 import PythonControlledCapability from './general/PythonControlledCapability';
@@ -297,6 +299,8 @@ export const Drawer = connect(
     updateWidget: (newConf) => dispatch(updateWidget(newConf)),
     newWidget: (widget) => dispatch(newWidget(widget)),
     activateWidget: (widgetId) => dispatch(activateWidget(widgetId)),
+    maximiseWidget: (widgetId) => dispatch(maximiseWidget(widgetId)),
+    addWidget: (widgetConf) => dispatch(addWidget(widgetConf)),
   }),
 )(_Drawer);
 

webapp/constants.js

@@ -387,7 +387,6 @@ export const PLOT_WIDGETS = {
 };
 
 export const DEFAULT_NETWORK_WIDGETS = {
-  PYTHON_CONSOLE_WIDGET,
   D3Canvas: {
     id: 'D3Canvas',
     name: '3D Representation',
@@ -405,7 +404,7 @@ export const DEFAULT_NETWORK_WIDGETS = {
     hideOnClose: true,
     component: 'experimentManager',
     panelName: MINIMIZED_PANEL,
-    defaultPanel: 'plotPanel',
+    defaultPanel: TOP_PANEL,
     enableRename: false,
     pos: 14,
     specification: TOOLS_LIST,

webapp/css/flexlayout.less

@@ -85,11 +85,9 @@ div.flexlayout__layout {
   .flexlayout__tabset-selected {
     background-color: @bgDarker; //color-light
   }
-  .flexlayout__border_inner_bottom {
-    // position: fixed !important;
-    // top: 100% !important;
-    position: fixed;
-    bottom: -100px;
+  .flexlayout__border_bottom {
+    position: fixed !important;
+    top: 110% !important;
     left: 0;
     padding-left: @gutter / 2;
     border-top-right-radius: @radius;

webapp/css/netpyne.less

@@ -599,7 +599,3 @@ body {
     }
   }
 }
-
-.bottom_icon {
-  padding: 12px;
-}

webapp/redux/middleware/middleware.js

@@ -35,6 +35,11 @@ let previousLayout = {
   network: undefined,
 };
 
+let previousWidgets = {
+  edit: undefined,
+  network: undefined,
+};
+
 export const processError = (response) => {
   const parsedResponse = Utils.getErrorResponse(response);
   if (parsedResponse) {
@@ -112,17 +117,26 @@ const simulateNetwork = (payload) => createSimulateBackendCall(
 export default (store) => (next) => (action) => {
   const switchLayoutAction = (edit = true, reset = true) => {
     previousLayout[store.getState().general.editMode ? 'edit' : 'network'] = store.getState().layout;
+    previousWidgets[store.getState().general.editMode ? 'edit' : 'network'] = store.getState().widgets;
     if (reset) {
       previousLayout = {
         edit: undefined,
         network: undefined,
       };
+      previousWidgets = {
+        edit: undefined,
+        network: undefined,
+      };
     }
     // TO FIX: I am not sure the one below is to fix, previously we were setting layout or widgets but I don't understand
     // how the widgets where making it back into the redux store without the set widgets
     return next(edit
-      ? GeppettoActions.setLayout(previousLayout.edit) && GeppettoActions.setWidgets({ ...Constants.EDIT_WIDGETS })
-      : GeppettoActions.setLayout(previousLayout.network) && GeppettoActions.setWidgets({ ...Constants.DEFAULT_NETWORK_WIDGETS }));
+      ? previousLayout.edit
+        ? GeppettoActions.setLayout(previousLayout.edit) && GeppettoActions.setWidgets(previousWidgets.edit)
+        : GeppettoActions.setWidgets({ ...Constants.EDIT_WIDGETS })
+      : previousLayout.network
+        ? GeppettoActions.setLayout(previousLayout.network) && GeppettoActions.setWidgets(previousWidgets.network)
+        : GeppettoActions.setWidgets({ ...Constants.DEFAULT_NETWORK_WIDGETS }));
   };
 
   const toNetworkCallback = (reset) => () => {

webapp/static/icons/experimentControlPanel.svg

@@ -2,7 +2,7 @@
   "version": "v1",
   "packages": {
     "@metacell/geppetto-meta-client": {
-      "signature": "9189795eefe9451f437274f6bae6fd84",
+      "signature": "0b89acbd0446b4c00b9c4e99ba1ce30d",
       "file": true
     },
     "@metacell/geppetto-meta-core": {