#417 integrated new actions to handle instances

Author: ddelpiano

webapp/components/index.js

@@ -14,7 +14,7 @@ import { openBackendErrorDialog, closeBackendErrorDialog } from '../redux/action
 import {
   updateCards, editModel, simulateNetwork, createNetwork, closeDialog,
   createAndSimulateNetwork, showNetwork, pythonCall, modelLoaded, deleteNetParamsObj, resetModel,
-  setDefaultWidgets,
+  setDefaultWidgets, changeInstanceColor,
 } from '../redux/actions/general';
 
 import {
@@ -244,8 +244,11 @@ export const NetPyNEInstantiated = connect(
   (state) => ({
     modelState: state.general.modelState,
     theme: state.general.theme,
+    data: state.general.instances,
+  }),
+  (dispatch) => ({
+    selectInstances: (instances) => dispatch(changeInstanceColor(instances)),
   }),
-  null,
 )(_NetPyNEInstantiated);
 
 export const NetWorkControlButtons = connect(

webapp/components/instantiation/NetPyNEInstantiated.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { withStyles } from '@material-ui/core';
 import Canvas from '@metacell/geppetto-meta-ui/3d-canvas/Canvas';
 import CameraControls from '@metacell/geppetto-meta-ui/camera-controls/CameraControls';
+import { applySelection, mapToCanvasData } from '@metacell/geppetto-meta-ui/3d-canvas/showcase/utils/SelectionUtils';
 // TODO: replace this with the list viewer during refactoring
 // import ControlPanel from 'geppetto-client/js/components/interface/controlPanel/controlpanel';
 
@@ -15,10 +16,10 @@ import { THEMES } from '../../constants';
 const CANVAS_LIGHT = 'canvas-toolbar-btns-light';
 const CANVAS_DARK = 'canvas-toolbar-btns-dark';
 const SELECTION_COLOR = {
-  r: 0.8, g: 0.8, b: 0, a: 1,
+  r: 0, g: 0.8, b: 0.8, a: 1,
 };
 const DEFAULT_COLOR = {
-  r: 1, g: 0, b: 0, a: 0.5,
+  g: 0.50, b: 0.60, r: 1, a: 0.80,
 };
 
 const styles = () => ({
@@ -38,14 +39,6 @@ class NetPyNEInstantiated extends React.Component {
       hasModelLoaded: false,
       intersected: [],
       tooltipVisible: false,
-      data: [
-        {
-          instancePath: 'network',
-          color: {
-            g: 0.50, b: 0.60, r: 1, a: 0.80,
-          },
-        },
-      ],
       selected: {},
       cameraOptions: {
         angle: 60,
@@ -66,11 +59,26 @@ class NetPyNEInstantiated extends React.Component {
       },
     };
     this.dimensions = {
-      width: '1980px',
-      height: '1900px',
+      width: '100%',
+      height: '100%',
     };
     this.canvasRef = React.createRef();
-    this.controlPanelToggle = this.controlPanelToggle.bind(this);
+
+    this.onSelection = this.onSelection.bind(this);
+  }
+
+  onSelection (selectedInstances) {
+    const { selectInstances, data } = this.props;
+    selectInstances(applySelection(data, selectedInstances));
+  }
+
+  getParentSize () {
+    if (this.canvasRef.current === null) {
+      return false;
+    }
+    // eslint-disable-next-line react/no-find-dom-node
+    const node = ReactDOM.findDOMNode(this);
+    return node.parentNode.getBoundingClientRect();
   }
 
   updateBtnsWithTheme = (removeClass, addClass) => {
@@ -102,46 +110,11 @@ class NetPyNEInstantiated extends React.Component {
     this.timer = setTimeout(() => this.resizeIfNeeded(), 100);
   }
 
-  getParentSize () {
-    if (this.canvasRef.current === null) {
-      return false;
-    }
-    // eslint-disable-next-line react/no-find-dom-node
-    const node = ReactDOM.findDOMNode(this);
-    return node.parentNode.getBoundingClientRect();
-  }
-
-  controlPanelToggle () {
-    if (!this.state.controlPanelInitialized) {
-      this.setState({ controlPanelInitialized: true });
-    } else {
-      $('#controlpanel')
-        .show();
-    }
-  }
-
-  mapToCanvasData (data) {
-    return data.map((item) => (
-      {
-        color: item.selected ? SELECTION_COLOR : item.color,
-        instancePath: item.instancePath,
-      }
-    ));
-  }
-
   render () {
-    const {
-      update,
-      canvasBtnCls,
-      controlPanelInitialized,
-    } = this.state;
-    const { theme } = this.props;
-    const { controlPanelToggle } = this;
-    const bgColor = theme === THEMES.LIGHT ? canvasBgLight : theme === THEMES.BLACK ? canvasBgDark : 'transparent';
-
-    const { data, cameraOptions } = this.state;
+    const { cameraOptions } = this.state;
+    const { data } = this.props;
 
-    const canvasData = this.mapToCanvasData(data);
+    const canvasData = mapToCanvasData(data);
 
     let camOptions = cameraOptions;
     if (this.lastCameraUpdate) {
@@ -155,7 +128,6 @@ class NetPyNEInstantiated extends React.Component {
       };
     }
 
-
     return (
       <div className="instantiatedContainer">
         <Canvas
@@ -164,6 +136,7 @@ class NetPyNEInstantiated extends React.Component {
           key="CanvasContainer"
           data={canvasData}
           backgroundColor={bgRegular}
+          onSelection={this.onSelection}
         />
       </div>
     );

webapp/constants.js

@@ -16,6 +16,10 @@ export const MODEL_STATE = {
   SIMULATED: 'SIMULATED',
 };
 
+export const DEFAULT_COLOR = {
+  g: 0.50, b: 0.60, r: 1, a: 0.80,
+};
+
 export const NETPYNE_COMMANDS = {
   instantiateModel: 'netpyne_geppetto.instantiateNetPyNEModelInGeppetto',
   simulateModel: 'netpyne_geppetto.simulateNetPyNEModelInGeppetto',

webapp/redux/actions/general.js

@@ -20,7 +20,9 @@ export const AUTOMATIC_SIMULATION = 'AUTOMATIC_SIMULATION';
 export const IMPORT_APPLICATION_STATE = 'IMPORT_APPLICATION_STATE';
 export const SET_THEME = 'SET_THEME';
 
+export const ADD_CANVAS_INSTANCES = 'ADD_CANVAS_INSTANCES';
 export const CHANGE_INSTANCE_COLOR = 'CHANGE_INSTANCE_COLOR';
+export const REMOVE_CANVAS_INSTANCES = 'REMOVE_CANVAS_INSTANCES';
 
 // Actions
 export const updateCards = { type: UPDATE_CARDS };
@@ -91,3 +93,13 @@ export const changeInstanceColor = (instance, color) => ({
     color,
   },
 });
+
+export const addInstancesToCanvas = (instances) => ({
+  type: ADD_CANVAS_INSTANCES,
+  instances,
+});
+
+export const removeInstancesFromCanvas = (instances) => ({
+  type: REMOVE_CANVAS_INSTANCES,
+  instances,
+});

webapp/redux/middleware/middleware.js

@@ -20,6 +20,9 @@ import {
   RESET_MODEL,
   showNetwork,
   MODEL_LOADED,
+  changeInstanceColor,
+  addInstancesToCanvas,
+  removeInstancesFromCanvas,
 } from '../actions/general';
 import { openBackendErrorDialog } from '../actions/errors';
 import { closeDrawerDialogBox } from '../actions/drawer';
@@ -137,6 +140,18 @@ export default (store) => (next) => (action) => {
       next(GeppettoActions.waitData('Loading the NetPyNE Model', GeppettoActions.clientActions.MODEL_LOADED));
       next(action);
       break;
+    case GeppettoActions.clientActions.MODEL_LOADED:
+      if (store.getState()?.general?.modelState === Constants.MODEL_STATE.NOT_INSTANTIATED) {
+        const networkPath = window.Instances.getInstance('network');
+        if (networkPath) {
+          store.dispatch(addInstancesToCanvas([{
+            instancePath: networkPath.getInstancePath(),
+            color: Constants.DEFAULT_COLOR,
+          }]));
+        }
+      }
+      next(action);
+      break;
     case UPDATE_CARDS:
       console.log('Triggered card update');
       next(action);
@@ -265,7 +280,7 @@ export default (store) => (next) => (action) => {
             GEPPETTO.trigger(GEPPETTO.Events.Show_spinner, GEPPETTO.Resources.PARSING_MODEL);
             dehydrateCanvas();
             GEPPETTO.Manager.loadModel(response);
-            GEPPETTO.CommandController.log('Instantiation / Simulation completed.');
+            console.log('Instantiation / Simulation completed.');
 
             store.dispatch(showNetwork);
           }

webapp/redux/reducers/general.js

@@ -14,6 +14,7 @@ export const GENERAL_DEFAULT_STATE = {
   automaticSimulation: false,
   automaticInstantiation: false,
   theme: 'gui',
+  instances: [],
 };
 
 // reducer function
@@ -51,6 +52,12 @@ export default function reduceGeneral (state = GENERAL_DEFAULT_STATE, action) {
       return { ...state, theme: action.payload };
     }
     case Actions.CHANGE_INSTANCE_COLOR: {
+      return { ...state, instances: [...action.instances] };
+    }
+    case Actions.ADD_CANVAS_INSTANCES: {
+      return { ...state, instances: [...state.instances, ...action.instances] };
+    }
+    case Actions.REMOVE_CANVAS_INSTANCES: {
       return { ...state };
     }
     default: {