#142 Layout refactoring ok

Author: filippomc

webapp/components/NetPyNE.js

@@ -20,17 +20,14 @@ const styles = ({ zIndex, palette, spacing }) => ({
   content: { flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }
 });
 
-import {
-  DEFAULT_HLS_WIDGETS, getPythonDefaultConsoleWidget, 
-  DEFAULT_MORPHOLOGY_WIDGET,DEFAULT_PLOTS_WIDGETS
-} from '../constants'
+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) {
@@ -43,7 +40,7 @@ class NetPyNE extends React.Component {
 
   componentDidMount () {
     GEPPETTO.on(GEPPETTO.Events.Error_while_exec_python_command, this.openPythonCallDialog, this);
-    this.props.addWidgets([getPythonDefaultConsoleWidget(true) ]);
+    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);
@@ -53,7 +50,7 @@ class NetPyNE extends React.Component {
         const data = Utils.convertToJSON(response);
         this.addMetadataToWindow(data);
         this.props.modelLoaded();
-        this.props.addWidgets(Object.values(DEFAULT_HLS_WIDGETS));
+        this.props.setWidgets(EDIT_WIDGETS);
         GEPPETTO.trigger("spinner:hide");
       })
 

webapp/components/general/NetPyNEIcons.js

@@ -2,11 +2,14 @@ import React, { Component } from 'react'
 
 import PythonConsole from '@geppettoengine/geppetto-client/js/components/interface/pythonConsole/PythonConsole';
 
-export default class NetPyNEPythonConsole extends Component {
+export class NetPyNEPythonConsole extends Component {
 
+  shouldComponentUpdate () {
+    return false;
+  }
 
   componentWillUnmount () {
-    console.log("unmounting python console")
+    console.info("unmounting python console");
   }
 
   componentDidMount () {
@@ -17,3 +20,6 @@ export default class NetPyNEPythonConsole extends Component {
     return <PythonConsole pythonNotebookPath={"notebooks/notebook.ipynb"} />
   }
 }
+
+
+export default NetPyNEPythonConsole;

webapp/components/general/NetPyNEPythonConsole.js

@@ -4,9 +4,7 @@ import PythonControlledCapability from "geppetto-client/js/communication/geppett
 
 import {
   activateWidget,
-  addWidgets,
-  minimizeWidget,
-  maximizeWidget,
+  setWidgets,
   updateWidget,
   newWidget
 } from "../redux/actions/layout";
@@ -79,10 +77,10 @@ export const Dimensions = connect(
 
 import _NetPyNE from "./NetPyNE";
 export const NetPyNE = connect(
-  state => ({ editMode: state.general.editMode }),
+  null,
   dispatch => ({ 
     pythonCallErrorDialogBox: payload => dispatch(openBackendErrorDialog(payload)),
-    addWidgets: payload => dispatch(addWidgets(payload)),
+    setWidgets: payload => dispatch(setWidgets(payload)),
     modelLoaded: () => dispatch(modelLoaded), 
     newWidget: widget => dispatch(newWidget(widget)),
     activateWidget: widgetId => dispatch(activateWidget(widgetId))
@@ -193,12 +191,7 @@ export const ActionDialog = connect(
   })
 )(_ActionDialog)
 
-import _NetPyNEPythonConsole from './general/NetPyNEPythonConsole';
-export const NetPyNEPythonConsole = connect(
-  null,
-  null
-)(_NetPyNEPythonConsole)
-
+export { NetPyNEPythonConsole } from './general/NetPyNEPythonConsole';
 
 import _Drawer from './settings/Drawer'
 export const Drawer = connect(

webapp/components/index.js

@@ -21,9 +21,11 @@ import {
   DESTROY_WIDGET,
   ACTIVATE_WIDGET,
   SET_LAYOUT,
+  SET_WIDGETS,
   setLayout
 } from "./actions";
 
+import { MINIMIZED_PANEL } from '.';
 
 const styles = (theme) => createStyles({
   container: {
@@ -66,7 +68,10 @@ class LayoutManager {
     this.enableMinimize = enableMinimize;
   }
 
-  addWidget(widgetConfiguration) {
+  addWidget(widgetConfiguration: Widget) {
+    if(this.getWidget(widgetConfiguration.id)) {
+      return this.updateWidget(widgetConfiguration);
+    }
     const { model } = this;
     let tabset = model.getNodeById(widgetConfiguration.panelName);
     if (tabset === undefined) {
@@ -77,7 +82,7 @@ class LayoutManager {
         widget2Node(widgetConfiguration),
         widgetConfiguration.panelName,
         DockLocation.CENTER,
-        widgetConfiguration.index ? widgetConfiguration.index : -1
+        widgetConfiguration.pos ? widgetConfiguration.pos : -1
       )
     );
   }
@@ -141,16 +146,16 @@ class LayoutManager {
 
   middleware = (store) => (next) => (action) => {
     const model = this.model;
-
+    console.debug(action);
     switch (action.type) {
       case ADD_WIDGET: {
+
         this.addWidget(action.data);
+        
         break;
       }
       case ADD_WIDGETS: {
-        for(let widget of action.data){
-          this.addWidget(widget);
-        }
+        this.addWidgets(action.data);
         break;
       }
       case UPDATE_WIDGET: {
@@ -160,14 +165,25 @@ class LayoutManager {
 
       case DESTROY_WIDGET: {
         const widget = action.data;
-        model.doAction(Actions.deleteTab(widget.id));
+        this.deleteWidget(widget);
         break;
       }
 
       case ACTIVATE_WIDGET: {
-        model.doAction(Actions.updateNodeAttributes(action.data.id, {status: WidgetStatus.ACTIVE})); 
         action.data.status = WidgetStatus.ACTIVE;
+        this.updateWidget(action.data);
+        break;
+      }
+      case SET_WIDGETS: {
+        const newWidgets: Map<string, Widget> = action.data;
+        for(let widget of this.getWidgets()) {
+          if(!newWidgets[widget.id]){
+            this.deleteWidget(widget);
+          }
+        }
+        this.addWidgets(Object.values(newWidgets));
         break;
+
       }
 
       case SET_LAYOUT: {
@@ -184,6 +200,26 @@ class LayoutManager {
 
     next(setLayout(model.toJson()));
   };
+
+  private addWidgets(newWidgets: Array<Widget>) {
+    let active = null;
+    for (let widget of newWidgets) {
+      if (widget.status == WidgetStatus.ACTIVE) {
+        active = widget.id;
+      }
+
+      this.addWidget(widget);
+      
+    }
+    if (active) {
+      this.model.doAction(FlexLayout.Actions.selectTab(active));
+    }
+  }
+
+  private deleteWidget( widget: any) {
+   this.model.doAction(Actions.deleteTab(widget.id));
+  }
+
   getWidgets() {
 
     let nodes = [];
@@ -261,7 +297,8 @@ class LayoutManager {
 
 
   getWidget(id): Widget {
-    return (this.model.getNodeById(id)['_attributes'] as ExtendedNode).config;
+    const node = this.model.getNodeById(id);
+    return node && node['_attributes'] ? (node['_attributes'] as ExtendedNode).config: null;
   }
 
 
@@ -291,25 +328,38 @@ class LayoutManager {
 
   minimizeWidget(widgetId) {
 
-    var updatedWidget = this.getWidget(widgetId);
+    var updatedWidget = {...this.getWidget(widgetId)};
     if (updatedWidget === undefined) {
       return;
     }
     updatedWidget.status = WidgetStatus.MINIMIZED;
-    updatedWidget.panelName = "border_bottom";
+    updatedWidget.defaultPanel = updatedWidget.panelName;
+    updatedWidget.panelName = MINIMIZED_PANEL;
     this.updateWidget(updatedWidget);
     // this.model.doAction(FlexLayout.Actions.moveNode(widgetId, "border_bottom", FlexLayout.DockLocation.CENTER, 0));
   }
 
   updateWidget (widget: Widget) {
     const { model } = this;
-    if (widget) {
+    if(!widget){
+      debugger;
+    }
+      const previousWidget = this.getWidget(widget.id);
+      if(previousWidget.status != widget.status) {
+        if(previousWidget.status == WidgetStatus.MINIMIZED) {
+          this.restoreWidget(widget);
+        }
+        else {
+          this.moveWidget(widget);
+        }
+      }
       this.widgetFactory.updateWidget(widget);
       model.doAction(Actions.updateNodeAttributes(widget.id, widget2Node(widget))); 
-    }
-    this.model.doAction(FlexLayout.Actions.moveNode(widget.id, widget.panelName, FlexLayout.DockLocation.CENTER, widget.pos));
-    
+      if (widget.status == WidgetStatus.ACTIVE) {
+        model.doAction(FlexLayout.Actions.selectTab(widget.id));
+      }
   }
+
   onActionMaximizeWidget(action) {
     // const { model } = this;
     // const panel2maximize = <Panel>model.getNodeById(action.data.node);
@@ -337,9 +387,10 @@ class LayoutManager {
     return this.tabsetIconFactory.factory(node.getConfig());
   }
 
-  restoreWidget(widget) {
+  restoreWidget(widget: Widget) {
     const { model } = this;
-    const panelName = widget.panelName;
+    widget.panelName = widget.defaultPanel;
+    const panelName = widget.panelName ;
     let tabset = model.getNodeById(panelName);
     if (tabset === undefined) {
       this.createTabSet(panelName);
@@ -354,7 +405,7 @@ class LayoutManager {
         widget.id,
         widget.panelName,
         FlexLayout.DockLocation.CENTER,
-        0
+        widget.pos
       )
     );
     // Resize of canvas and SVG images

webapp/components/layout/LayoutManager.tsx

@@ -1,6 +1,7 @@
 import { WidgetStatus } from './model';
 
 export const SET_LAYOUT = 'SET_LAYOUT';
+export const SET_WIDGETS = 'SET_WIDGETS';
 export const UPDATE_WIDGET = 'UPDATE_WIDGET';
 export const ACTIVATE_WIDGET = 'ACTIVATE_WIDGET';
 export const ADD_WIDGET = 'ADD_WIDGET';
@@ -23,16 +24,28 @@ export const newWidget = ({ path, component, panelName, ...others }) => ({
   }
 });
 
+export const addWidget = (widget) => ({
+  type: ADD_WIDGET,
+  data: widget
+});
+
 export const addWidgets = (widgets) => ({
   type: ADD_WIDGETS,
   data: widgets
 });
 
+export const setWidgets = (widgets) => ({
+  type: SET_WIDGETS,
+  data: widgets
+});
+
 export const updateWidget = (newConf => ({
   type: UPDATE_WIDGET,
   data: newConf
 }))
 
+
+
 export const setLayout = (newLayout => ({
   type: SET_LAYOUT,
   data: newLayout

webapp/components/layout/actions.ts

@@ -0,0 +1 @@
+export const MINIMIZED_PANEL = "border_bottom";

webapp/components/layout/index.js

@@ -22,6 +22,7 @@ export interface Widget {
   id: string;
   status: WidgetStatus;
   panelName: string;
+  defaultPanel?: any;
   hideOnClose?: boolean;
   name: string;
   enableClose?: boolean;

webapp/components/layout/model.ts

@@ -14,7 +14,7 @@ export function widget2Node (configuration: Widget) {
     enableRename: false,
     enableClose,
     // attr defined inside config, will also be available from within flexlayout nodes.  For example:  node.getNodeById(id).getConfig()
-    config: configuration ,
+    config: {...configuration} ,
     ...others
   };
 }
@@ -47,16 +47,3 @@ export function isEqual (a: any, b: any): boolean {
   }
   return keys.every(k => isEqual(a[k], b[k]));
 }
-
-export const getPythonDefaultConsoleWidget = (editMode: boolean): Widget => ({
-  id: editMode ? 'pythonEdit' : 'pythonExplore', 
-  name: 'Python', 
-  status: WidgetStatus.ACTIVE, 
-  component: 'PythonConsole', 
-  panelName: "consolePanel",
-  enableClose: true,
-  enableDrag: true,
-  enableRename: false,
-  pos: 100
-}) ;
-