Skip to content

Commit 5c8e6bd

Browse files
ddelpianoddelpiano
committed
#417 integrating changes required to plug geppetto actions
1 parent e0407d4 commit 5c8e6bd

9 files changed

Lines changed: 291 additions & 347 deletions

File tree

‎webapp/components/general/ControlPanelTreeItem.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ const ControlPanelTreeItem = (props) => {
3838
const [isHoveredOver, setIsHoveredOver] = React.useState(false);
3939
const [color, setColor] = React.useState('#ff0000');
4040

41-
const handleColorSelection = (color) => {
41+
const handleColorSelection = (color, event, nodeId) => {
42+
event.preventDefault();
43+
event.stopPropagation();
4244
setColor(color.hex);
4345
};
4446

@@ -80,7 +82,7 @@ const ControlPanelTreeItem = (props) => {
8082
<ChromePicker
8183
className={classes.colorPicker}
8284
color={color}
83-
onChangeComplete={handleColorSelection}
85+
onChangeComplete={(e, color) => handleColorSelection(e, color, nodeId)}
8486
/>
8587
) : null
8688
}

‎webapp/components/general/ExperimentControlPanel.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ const ExperimentControlPanel = (props) => {
4141
return (
4242
<ControlPanelTreeItem
4343
key={treeItemData.id}
44-
nodeId={treeItemData.id}
45-
label={treeItemData.getPath()}
46-
type={treeItemData.id}
44+
nodeId={treeItemData.getPath()}
45+
label={treeItemData.id}
46+
type={treeItemData.getType().getId()}
4747
onNodeSelect={onNodeSelect}
4848
onVisibilityClick={onVisibilityClick}
4949
>

‎webapp/components/instantiation/NetPyNEInstantiated.js‎

Lines changed: 15 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import CameraControls from '@metacell/geppetto-meta-ui/camera-controls/CameraCon
77
// import ControlPanel from 'geppetto-client/js/components/interface/controlPanel/controlpanel';
88

99
import { NetWorkControlButtons } from 'netpyne/components';
10-
import { primaryColor, canvasBgDark, canvasBgLight, bgRegular } from '../../theme';
10+
import {
11+
primaryColor, canvasBgDark, canvasBgLight, bgRegular,
12+
} from '../../theme';
1113
import { THEMES } from '../../constants';
1214

1315
const CANVAS_LIGHT = 'canvas-toolbar-btns-light';
@@ -39,6 +41,9 @@ class NetPyNEInstantiated extends React.Component {
3941
data: [
4042
{
4143
instancePath: 'network',
44+
color: {
45+
g: 0.50, b: 0.60, r: 1, a: 0.80,
46+
},
4247
},
4348
],
4449
selected: {},
@@ -48,58 +53,26 @@ class NetPyNEInstantiated extends React.Component {
4853
far: 2000000,
4954
baseZoom: 1,
5055
position: { x: -97.349, y: 53.797, z: 387.82 },
51-
rotation: { rx: 0.051, ry: -0.192, rz: -0.569, radius: 361.668 },
56+
rotation: {
57+
rx: 0.051, ry: -0.192, rz: -0.569, radius: 361.668,
58+
},
5259
autoRotate: false,
5360
movieFilter: true,
5461
reset: false,
55-
cameraControls: {
62+
cameraControls: {
5663
instance: CameraControls,
57-
props: {}
64+
props: {},
5865
},
5966
},
6067
};
6168
this.dimensions = {
62-
width: 200,
63-
height: 200,
69+
width: '1980px',
70+
height: '1900px',
6471
};
6572
this.canvasRef = React.createRef();
6673
this.controlPanelToggle = this.controlPanelToggle.bind(this);
6774
}
6875

69-
componentDidMount () {
70-
// this.canvasRef.current.engine.setLinesThreshold(10000);
71-
// this.canvasRef.current.displayAllInstances();
72-
// this.updateBtnsWithTheme('', this.state.canvasBtnCls);
73-
// window.addEventListener('resize', this.delayedResize.bind(this));
74-
// this.resizeIfNeeded();
75-
// this.updateInstances();
76-
77-
// GEPPETTO.on(GEPPETTO.Events.Control_panel_close, () => {
78-
// this.setState({ bringItToFront: 0 });
79-
// });
80-
}
81-
82-
componentDidUpdate (prevProps, prevState) {
83-
// this.resizeIfNeeded();
84-
// const { theme } = this.props;
85-
// if (prevProps.theme !== this.props.theme) {
86-
// theme === THEMES.LIGHT ? this.updateBtnsWithTheme(CANVAS_DARK, CANVAS_LIGHT)
87-
// : this.updateBtnsWithTheme(CANVAS_LIGHT, CANVAS_DARK);
88-
// }
89-
// if (prevState.controlPanelInitialized !== this.state.controlPanelInitialized) {
90-
// if (this.state.controlPanelInitialized) {
91-
// $('#controlpanel')
92-
// .show();
93-
// }
94-
// }
95-
}
96-
97-
componentWillUnmount () {
98-
// GEPPETTO.off(GEPPETTO.Events.Control_panel_close);
99-
// clearTimeout(this.timer);
100-
// window.removeEventListener('resize', this.delayedResize);
101-
}
102-
10376
updateBtnsWithTheme = (removeClass, addClass) => {
10477
const element = document.getElementById('CanvasContainer_component');
10578
if (removeClass) {
@@ -109,25 +82,6 @@ class NetPyNEInstantiated extends React.Component {
10982
this.setState({ canvasBtnCls: addClass });
11083
};
11184

112-
// updateInstances () {
113-
// if (window.Instances != null && window.Instances.network) {
114-
// // update canvas only if there are instances to show
115-
// this.canvasRef.current.engine.setLinesThreshold(25000);
116-
// this.canvasRef.current.engine.updateSceneWithNewInstances(
117-
// window.Instances,
118-
// );
119-
// this.canvasRef.current.resetCamera();
120-
121-
// this.canvasRef.current.setColor('network', primaryColor, true);
122-
// const spotLight = this.canvasRef.current.engine.scene.children.find(
123-
// (child) => child.type === 'SpotLight',
124-
// );
125-
// if (spotLight) {
126-
// this.canvasRef.current.engine.scene.remove(spotLight);
127-
// }
128-
// }
129-
// }
130-
13185
resizeCanvas () {
13286
this.setState((prevState) => ({ update: prevState.update + 1 }));
13387
}
@@ -169,7 +123,7 @@ class NetPyNEInstantiated extends React.Component {
169123
mapToCanvasData (data) {
170124
return data.map((item) => (
171125
{
172-
color: item.selected ? SELECTION_COLOR : DEFAULT_COLOR,
126+
color: item.selected ? SELECTION_COLOR : item.color,
173127
instancePath: item.instancePath,
174128
}
175129
));
@@ -204,18 +158,6 @@ class NetPyNEInstantiated extends React.Component {
204158

205159
return (
206160
<div className="instantiatedContainer">
207-
{/* <Canvas
208-
id="CanvasContainer"
209-
name="Canvas"
210-
componentType="Canvas"
211-
ref={this.canvasRef}
212-
style={{
213-
height: '100%',
214-
width: '100%',
215-
background: bgColor,
216-
}}
217-
update={update}
218-
/> */}
219161
<Canvas
220162
ref={this.canvasRef}
221163
cameraOptions={camOptions}
@@ -228,4 +170,4 @@ class NetPyNEInstantiated extends React.Component {
228170
}
229171
}
230172

231-
export default withStyles(styles)(NetPyNEInstantiated);
173+
export default withStyles(styles)(NetPyNEInstantiated);

‎webapp/dev_package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,22 @@
1717
"@fortawesome/fontawesome-svg-core": "^1.2.35",
1818
"@fortawesome/free-solid-svg-icons": "^5.13.0",
1919
"@fortawesome/react-fontawesome": "^0.1.9",
20-
"@material-ui/core": "4.11.4",
21-
"@material-ui/icons": "^4.9.1",
22-
"@material-ui/lab": "^4.0.0-alpha.51",
20+
"@material-ui/core": "4.12.1",
21+
"@material-ui/icons": "^4.11.2",
22+
"@material-ui/lab": "^4.0.0-alpha.60",
2323
"@metacell/geppetto-meta-client": "file:.yalc/@metacell/geppetto-meta-client",
2424
"@metacell/geppetto-meta-core": "file:.yalc/@metacell/geppetto-meta-core",
2525
"@metacell/geppetto-meta-ui": "file:.yalc/@metacell/geppetto-meta-ui",
2626
"@nosferatu500/react-sortable-tree": "3.0.5",
27+
"@sentry/integrations": "^6.17.0",
2728
"@sentry/react": "^6.16.1",
2829
"@sentry/tracing": "^6.16.1",
29-
"@sentry/integrations": "^6.17.0",
3030
"jquery": "^3.6.0",
3131
"js-base64": "^3.6.1",
3232
"less-vars-to-js": "^1.3.0",
3333
"prop-types": "^15.7.2",
3434
"react": "^17.0.1",
35+
"react-color": "^2.19.3",
3536
"react-dom": "^16.4.0",
3637
"react-json-view": "^1.21.3",
3738
"react-redux": "^7.2.0",

‎webapp/package.bak‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
"@fortawesome/fontawesome-svg-core": "^1.2.35",
1818
"@fortawesome/free-solid-svg-icons": "^5.13.0",
1919
"@fortawesome/react-fontawesome": "^0.1.9",
20-
"@material-ui/core": "4.11.4",
21-
"@material-ui/icons": "^4.9.1",
22-
"@material-ui/lab": "^4.0.0-alpha.51",
20+
"@material-ui/core": "4.12.1",
21+
"@material-ui/icons": "^4.11.2",
22+
"@material-ui/lab": "^4.0.0-alpha.60",
2323
"@metacell/geppetto-meta-client": "file:.yalc/@metacell/geppetto-meta-client",
2424
"@metacell/geppetto-meta-core": "file:.yalc/@metacell/geppetto-meta-core",
2525
"@metacell/geppetto-meta-ui": "file:.yalc/@metacell/geppetto-meta-ui",
@@ -32,6 +32,7 @@
3232
"less-vars-to-js": "^1.3.0",
3333
"prop-types": "^15.7.2",
3434
"react": "^17.0.1",
35+
"react-color": "^2.19.3",
3536
"react-dom": "^16.4.0",
3637
"react-json-view": "^1.21.3",
3738
"react-redux": "^7.2.0",

‎webapp/redux/actions/general.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const AUTOMATIC_SIMULATION = 'AUTOMATIC_SIMULATION';
2020
export const IMPORT_APPLICATION_STATE = 'IMPORT_APPLICATION_STATE';
2121
export const SET_THEME = 'SET_THEME';
2222

23+
export const CHANGE_INSTANCE_COLOR = 'CHANGE_INSTANCE_COLOR';
24+
2325
// Actions
2426
export const updateCards = { type: UPDATE_CARDS };
2527

@@ -81,3 +83,11 @@ export const setDefaultWidgets = setWidgets({
8183
status: WidgetStatus.ACTIVE,
8284
},
8385
});
86+
87+
export const changeInstanceColor = (instance, color) => ({
88+
type: CHANGE_INSTANCE_COLOR,
89+
data: {
90+
instance,
91+
color,
92+
},
93+
});

‎webapp/redux/reducers/general.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ export default function reduceGeneral (state = GENERAL_DEFAULT_STATE, action) {
5050
case Actions.SET_THEME: {
5151
return { ...state, theme: action.payload };
5252
}
53+
case Actions.CHANGE_INSTANCE_COLOR: {
54+
return { ...state };
55+
}
5356
default: {
5457
return state;
5558
}

‎webapp/yalc.lock‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"version": "v1",
3+
"packages": {
4+
"@metacell/geppetto-meta-client": {
5+
"signature": "76b4ff460a6493b5c18b286c84364673",
6+
"file": true
7+
},
8+
"@metacell/geppetto-meta-core": {
9+
"signature": "7a6d29eedb3eef09a122aaf65973490e",
10+
"file": true
11+
},
12+
"@metacell/geppetto-meta-ui": {
13+
"signature": "97b9fc1702c553365226f12053b9e87b",
14+
"file": true
15+
}
16+
}
17+
}

0 commit comments

Comments
 (0)