#484 fixed randomization color, selection through control panel, selection in general

Author: ddelpiano

webapp/components/general/ControlPanelTreeItem.js

@@ -12,7 +12,7 @@ import Shuffle from '@material-ui/icons/Shuffle';
 import { ChromePicker } from 'react-color';
 import { useDispatch, useSelector } from 'react-redux';
 import { experimentLabelColor } from '../../theme';
-import { changeInstanceColor } from '../../redux/actions/general';
+import { changeInstanceColor, selectInstances } from '../../redux/actions/general';
 
 const useStyles = makeStyles((theme) => ({
   networkItem: {
@@ -62,26 +62,39 @@ const ControlPanelTreeItem = (props) => {
     setColor(_color.rgb);
   };
 
+  const getRandomColor = () => ({
+    r: parseFloat((Math.random() * 255).toFixed(2)),
+    g: parseFloat((Math.random() * 255).toFixed(2)),
+    b: parseFloat((Math.random() * 255).toFixed(2)),
+    a: 1,
+  });
+
   const generateRandomColor = (event, nodeId) => {
-    const newInstances = instances.filter((instance) => !(instance.instancePath.startsWith(nodeId)));
-    const randomColor = {
-      r: parseFloat((Math.random() * 255).toFixed(2)),
-      g: parseFloat((Math.random() * 255).toFixed(2)),
-      b: parseFloat((Math.random() * 255).toFixed(2)),
-      a: 1,
-    };
+    const children = window.Instances.getInstance(nodeId).getChildren().map((instance) => instance.getInstancePath());
+    // const newInstances = instances.filter((instance) => !(instance.instancePath.startsWith(nodeId)));
+    const newInstances = instances.filter((instance) => {
+      let condition = true;
+      children.forEach((child) => {
+        if (instance.instancePath.startsWith(child)) {
+          condition = false;
+        }
+      });
+      return condition;
+    });
 
-    newInstances.push({
-      instancePath: nodeId,
-      color: {
-        r: randomColor.r / 255,
-        g: randomColor.g / 255,
-        b: randomColor.b / 255,
-        a: randomColor.a,
-      },
+    children.forEach((child) => {
+      const randomColor = getRandomColor();
+      newInstances.push({
+        instancePath: child,
+        color: {
+          r: randomColor.r / 255,
+          g: randomColor.g / 255,
+          b: randomColor.b / 255,
+          a: randomColor.a,
+        },
+      });
     });
     dispatch(changeInstanceColor(newInstances));
-    setColor(randomColor);
   };
 
   const changeVisibility = (event, nodeId) => {
@@ -126,6 +139,7 @@ const ControlPanelTreeItem = (props) => {
     onNodeSelect,
     onVisibilityClick,
     children,
+    disableRandom,
     ...other
   } = props;
 
@@ -153,7 +167,7 @@ const ControlPanelTreeItem = (props) => {
                   <IconButton onClick={(event) => changeVisibility(event, nodeId)}>
                     { visibility ? <Visibility /> : <VisibilityOff /> }
                   </IconButton>
-                  <IconButton onClick={(event) => generateRandomColor(event, nodeId)}><Shuffle /></IconButton>
+                  <IconButton disabled={disableRandom} onClick={(event) => generateRandomColor(event, nodeId)}><Shuffle /></IconButton>
                   <IconButton onClick={() => setShowColorPicker(true)}><ColorLens /></IconButton>
                   {
               showColorPicker

webapp/components/general/ExperimentControlPanel.js

@@ -1,17 +1,16 @@
 /* eslint-disable no-nested-ternary */
 import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 import TreeView from '@material-ui/lab/TreeView';
-import TreeItem from '@material-ui/lab/TreeItem';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ControlPanelTreeItem from './ControlPanelTreeItem';
 import { experimentLabelColor } from '../../theme';
-
-import { MODEL_STATE } from '../../constants';
+import { selectInstances } from '../../redux/actions/general';
 
 const useStyles = makeStyles(() => ({
   header: {
@@ -24,9 +23,11 @@ const useStyles = makeStyles(() => ({
 
 const ExperimentControlPanel = (props) => {
   const classes = useStyles();
+  const dispatch = useDispatch();
+  const instances = useSelector((state) => state.general.instances);
   const [filter, setFilter] = React.useState('');
   const onNodeSelect = (nodeId) => {
-    console.log(`Node with id ${nodeId} clicked`);
+    dispatch(selectInstances(instances, [nodeId]));
   };
   const instancesMap = new Map();
 
@@ -71,7 +72,7 @@ const ExperimentControlPanel = (props) => {
   };
 
   const getTreeItemsFromData = (treeItems) => treeItems.map((treeItemData) => {
-    let children;
+    let children = [];
     if (treeItemData.getChildren() && treeItemData.getChildren().length > 0) {
       children = getTreeItemsFromData(treeItemData.getChildren());
     }
@@ -84,6 +85,7 @@ const ExperimentControlPanel = (props) => {
         type={treeItemData.getType().getId()}
         onNodeSelect={onNodeSelect}
         onVisibilityClick={onVisibilityClick}
+        disableRandom={children.length === 0}
       >
         {children}
       </ControlPanelTreeItem>
@@ -110,12 +112,9 @@ const ExperimentControlPanel = (props) => {
                     defaultCollapseIcon={<ExpandMoreIcon />}
                     defaultExpandIcon={<ChevronRightIcon />}
                   >
-                    <TreeItem nodeId="network" label="network_netpyne">
-                      {filter === ''
-                        ? getTreeItemsFromData(window.Instances.network.getChildren())
-                        : getFlatFilteredList(window.Instances.network.getChildren())
-                      }
-                    </TreeItem>
+                    {filter === ''
+                      ? getTreeItemsFromData([window.Instances.getInstance('network')])
+                      : getFlatFilteredList([window.Instances.getInstance('network')])}
                   </TreeView>
                 </Box>
               )

webapp/components/index.js

@@ -16,7 +16,7 @@ import { openBackendErrorDialog, closeBackendErrorDialog } from '../redux/action
 import {
   updateCards, editModel, simulateNetwork, createNetwork, closeDialog,
   createAndSimulateNetwork, showNetwork, pythonCall, modelLoaded, deleteNetParamsObj, resetModel,
-  setDefaultWidgets, changeInstanceColor, openConfirmationDialog, closeConfirmationDialog,
+  setDefaultWidgets, changeInstanceColor, openConfirmationDialog, closeConfirmationDialog, selectInstances,
 } from '../redux/actions/general';
 
 import {
@@ -250,7 +250,7 @@ export const NetPyNEInstantiated = connect(
     data: state.general.instances,
   }),
   (dispatch) => ({
-    selectInstances: (instances) => dispatch(changeInstanceColor(instances)),
+    selectInstances: (instances, selectedInstances) => dispatch(selectInstances(instances, selectedInstances)),
   }),
 )(_NetPyNEInstantiated);
 

webapp/components/instantiation/NetPyNEInstantiated.js

@@ -50,13 +50,12 @@ class NetPyNEInstantiated extends React.Component {
     this.canvasRef = React.createRef();
 
     this.onSelection = this.onSelection.bind(this);
-    this.applySelection = this.applySelection.bind(this);
     this.mapToCanvasData = this.mapToCanvasData.bind(this);
   }
 
   onSelection (selectedInstances) {
     const { selectInstances, data } = this.props;
-    selectInstances(this.applySelection(data, selectedInstances));
+    selectInstances(data, selectedInstances);
   }
 
   updateBtnsWithTheme = (removeClass, addClass) => {
@@ -78,38 +77,6 @@ class NetPyNEInstantiated extends React.Component {
     ));
   }
 
-  applySelection (data, selectedInstances) {
-    const smap = new Map(selectedInstances.map((i) => [i, true]));
-    const newData = data.map((item) => {
-      if (smap.get(item.instancePath)) {
-        return {
-          ...item,
-          selected: !item.selected,
-        };
-      }
-      return { ...item };
-    });
-    const dmap = new Map(newData.map((i) => [i.instancePath, true]));
-
-    smap.forEach((value, key) => {
-      const item = dmap.get(key);
-      if (!item) {
-        newData.push({
-          instancePath: key,
-          color: undefined,
-          selected: true,
-        });
-      }
-    });
-    const canvasData = newData.filter((item) => {
-      if ((item?.selected !== undefined && item?.selected === false) && item?.color === undefined) {
-        return false;
-      }
-      return true;
-    });
-    return canvasData;
-  }
-
   render () {
     const { cameraOptions } = this.state;
     const { data } = this.props;

webapp/redux/actions/general.js

@@ -25,6 +25,7 @@ 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';
+export const SELECT_INSTANCE = 'SELECT_INSTANCE';
 
 // Actions
 export const updateCards = { type: UPDATE_CARDS };
@@ -112,3 +113,11 @@ export const removeInstancesFromCanvas = (instances) => ({
   type: REMOVE_CANVAS_INSTANCES,
   instances,
 });
+
+export const selectInstances = (instance, selectedInstances) => ({
+  type: SELECT_INSTANCE,
+  data: {
+    instance,
+    selectedInstances,
+  },
+});

webapp/redux/reducers/general.js

@@ -21,6 +21,33 @@ export const GENERAL_DEFAULT_STATE = {
   instances: [],
 };
 
+const applySelection = (data, selectedInstances) => {
+  const smap = new Map(selectedInstances.map((i) => [i, true]));
+  const newData = data.map((item) => ({
+    ...item,
+    selected: false,
+  }));
+  const dmap = new Map(newData.map((i) => [i.instancePath, true]));
+
+  smap.forEach((value, key) => {
+    const item = dmap.get(key);
+    if (!item) {
+      newData.push({
+        instancePath: key,
+        color: undefined,
+        selected: true,
+      });
+    }
+  });
+  const canvasData = newData.filter((item) => {
+    if ((item?.selected !== undefined && item?.selected === false) && item?.color === undefined) {
+      return false;
+    }
+    return true;
+  });
+  return canvasData;
+};
+
 // reducer function
 export default function reduceGeneral (state = GENERAL_DEFAULT_STATE, action) {
   switch (action.type) {
@@ -76,6 +103,10 @@ export default function reduceGeneral (state = GENERAL_DEFAULT_STATE, action) {
     case Actions.REMOVE_CANVAS_INSTANCES: {
       return { ...state };
     }
+    case Actions.SELECT_INSTANCE: {
+      const newData = applySelection(action.data.instance, action.data.selectedInstances);
+      return { ...state, instances: [...newData] };
+    }
     default: {
       return state;
     }