#417 finished sorting issues geppetto related for the selection, visibility, changing color through the new control panel + fixed source maps for the geppetto packages

Author: ddelpiano

webapp/components/general/ControlPanelTreeItem.js

@@ -6,6 +6,7 @@ import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import TreeItem from '@material-ui/lab/TreeItem';
 import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import ColorLens from '@material-ui/icons/ColorLens';
 import Shuffle from '@material-ui/icons/Shuffle';
 import { ChromePicker } from 'react-color';
@@ -40,35 +41,84 @@ const ControlPanelTreeItem = (props) => {
   const dispatch = useDispatch();
   const [showColorPicker, setShowColorPicker] = React.useState(false);
   const [isHoveredOver, setIsHoveredOver] = React.useState(false);
-  const [color, setColor] = React.useState('#ff0000');
+  const [color, setColor] = React.useState({
+    g: 0.50, b: 0.60, r: 1, a: 1,
+  });
+  const [visibility, setVisibility] = React.useState(true);
   const instances = useSelector((state) => state.general.instances);
 
-  const handleColorSelection = (color, event, nodeId) => {
+  const handleColorSelection = (_color, event, nodeId) => {
     const newInstances = instances.filter((instance) => !(instance.instancePath.startsWith(nodeId)));
     newInstances.push({
       instancePath: nodeId,
       color: {
-        r: color.rgb.r / 255,
-        g: color.rgb.g / 255,
-        b: color.rgb.b / 255,
-        a: color.rgb.a,
+        r: _color.rgb.r / 255,
+        g: _color.rgb.g / 255,
+        b: _color.rgb.b / 255,
+        a: _color.rgb.a,
       },
     });
     dispatch(changeInstanceColor(newInstances));
-    console.log(color);
-    setColor(color.hex);
+    setColor(_color.rgb);
   };
 
-  const generateRandomColor = () => {
+  const generateRandomColor = (event, nodeId) => {
+    const newInstances = instances.filter((instance) => !(instance.instancePath.startsWith(nodeId)));
     const randomColor = {
-      r: parseFloat((Math.random() * 1.00).toFixed(2)),
-      g: parseFloat((Math.random() * 1.00).toFixed(2)),
-      b: parseFloat((Math.random() * 1.00).toFixed(2)),
+      r: parseFloat((Math.random() * 255).toFixed(2)),
+      g: parseFloat((Math.random() * 255).toFixed(2)),
+      b: parseFloat((Math.random() * 255).toFixed(2)),
       a: 1,
     };
+
+    newInstances.push({
+      instancePath: nodeId,
+      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) => {
+    const copiedInstances = instances.slice();
+    let oldIndex = null;
+    let oldInstance = copiedInstances.find((pInstance, index) => {
+      if (pInstance.instancePath === nodeId) {
+        oldIndex = index;
+        return true;
+      }
+      return false;
+    });
+    if (!oldInstance) {
+      oldInstance = {
+        instancePath: nodeId,
+        visibility: false,
+      };
+    } else {
+      copiedInstances.splice(oldIndex, 1);
+      oldInstance.visibility = (oldInstance?.visibility !== undefined) ? !oldInstance.visibility : false;
+    }
+
+    const newInstances = instances.map((instance) => {
+      if (!(instance.instancePath.startsWith(nodeId))) {
+        return instance;
+      }
+      const newInstance = instance;
+      newInstance.visibility = oldInstance.visibility;
+      return newInstance;
+    });
+
+    newInstances.push(oldInstance);
+
+    dispatch(changeInstanceColor(newInstances));
+    setVisibility(oldInstance.visibility);
+  };
+
   const {
     label,
     type,
@@ -100,8 +150,10 @@ const ControlPanelTreeItem = (props) => {
               ? (
                 <>
 
-                  <IconButton onClick={(event) => onVisibilityClick(event, nodeId)}><Visibility /></IconButton>
-                  <IconButton onClick={generateRandomColor}><Shuffle /></IconButton>
+                  <IconButton onClick={(event) => changeVisibility(event, nodeId)}>
+                    { visibility ? <Visibility /> : <VisibilityOff /> }
+                  </IconButton>
+                  <IconButton onClick={(event) => generateRandomColor(event, nodeId)}><Shuffle /></IconButton>
                   <IconButton onClick={() => setShowColorPicker(true)}><ColorLens /></IconButton>
                   {
               showColorPicker

webapp/components/general/ExperimentControlPanel.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';

webapp/components/instantiation/NetPyNEInstantiated.js

@@ -2,12 +2,13 @@ import React from 'react';
 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';
 import {
   primaryColor, canvasBgDark, canvasBgLight, bgRegular,
 } from '../../theme';
 import { THEMES } from '../../constants';
 
+require('source-map-support').install();
+
 const CANVAS_LIGHT = 'canvas-toolbar-btns-light';
 const CANVAS_DARK = 'canvas-toolbar-btns-dark';
 const SELECTION_COLOR = {
@@ -51,11 +52,13 @@ 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(applySelection(data, selectedInstances));
+    selectInstances(this.applySelection(data, selectedInstances));
   }
 
   updateBtnsWithTheme = (removeClass, addClass) => {
@@ -67,11 +70,46 @@ class NetPyNEInstantiated extends React.Component {
     this.setState({ canvasBtnCls: addClass });
   };
 
+  mapToCanvasData (data) {
+    return data.map((item) => (
+      {
+        visibility: item?.visibility !== undefined ? item.visibility : true,
+        color: item.selected ? SELECTION_COLOR : item.color,
+        instancePath: item.instancePath,
+      }
+    ));
+  }
+
+  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) => {
+      if (!dmap.get(key)) {
+        newData.push({
+          instancePath: key,
+          color: undefined,
+          selected: true,
+        });
+      }
+    });
+    return newData;
+  }
+
   render () {
     const { cameraOptions } = this.state;
     const { data } = this.props;
 
-    const canvasData = mapToCanvasData(data);
+    const canvasData = this.mapToCanvasData(data);
 
     let camOptions = cameraOptions;
     if (this.lastCameraUpdate) {

webapp/package.json

@@ -36,7 +36,6 @@
     "react-dom": "^16.4.0",
     "react-json-view": "^1.21.3",
     "react-redux": "^7.2.0",
-    "react-resize-detector": "^6.7.4",
     "react-sortable-tree": "^2.8.0",
     "redux": "^4.1.0",
     "sass": "^1.49.0",

webapp/webpack.config.js

@@ -16,6 +16,8 @@ try {
   console.error('\nFailed to load Geppetto Configuration');
 }
 const geppettoClientPath = 'node_modules/@metacell/geppetto-meta-client';
+const geppettoCorePath = 'node_modules/@metacell/geppetto-meta-core';
+const geppettoUIPath = 'node_modules/@metacell/geppetto-meta-ui';
 
 const publicPath = path.join('/', geppettoConfig.contextPath, 'geppetto/build/');
 console.log(`\nThe public path (used by the main bundle when including split bundles) is: ${publicPath}`);
@@ -37,6 +39,16 @@ const availableExtensions = [
     to: 'static',
     flatten: true,
   },
+  {
+    from: path.resolve(__dirname, geppettoCorePath, 'static/*'),
+    to: 'static',
+    flatten: true,
+  },
+  {
+    from: path.resolve(__dirname, geppettoUIPath, 'static/*'),
+    to: 'static',
+    flatten: true,
+  },
   {
     from: path.resolve(__dirname, 'images/*'),
     to: '',
@@ -128,6 +140,8 @@ module.exports = function (env) {
       alias: {
         root: path.resolve(__dirname),
         'geppetto-client': path.resolve(__dirname, geppettoClientPath),
+        'geppetto-core': path.resolve(__dirname, geppettoCorePath),
+        'geppetto-ui': path.resolve(__dirname, geppettoUIPath),
         geppetto: path.resolve(__dirname, geppettoClientPath, 'pages/geppetto/GEPPETTO.js'),
         'geppetto-client-initialization': path.resolve(__dirname, geppettoClientPath, 'pages/geppetto/main.js'),
         handlebars: 'handlebars/dist/handlebars.js',
@@ -140,7 +154,10 @@ module.exports = function (env) {
       rules: [
         {
           test: /\.(js|jsx|ts|tsx)$/,
-          exclude: [/ami.min.js/, /node_modules\/(?!(@metacell\/geppetto-meta-client)\/).*/],
+          exclude: [
+            /ami.min.js/,
+            /node_modules\/(?!(@metacell\/geppetto-meta-client)|(@metacell\/geppetto-meta-core)|(@metacell\/geppetto-meta-ui)\/).*/,
+          ],
           use: {
             loader: 'babel-loader',
             options: {