Skip to content

Commit 18edde2

Browse files
author
rodriguez-facundo
committed
#135 Move svg plots to flexlayout
1 parent afd4f3c commit 18edde2

11 files changed

Lines changed: 497 additions & 241 deletions

File tree

‎webapp/components/general/HTMLViewer.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React, { Component, createRef } from 'react'
2+
3+
import HTMLViewer from '@geppettoengine/geppetto-client/js/components/interface/htmlViewer/HTMLViewer'
4+
5+
import { withStyles } from '@material-ui/core/styles'
6+
7+
const style = ({ palette }) => ({
8+
container: {
9+
display: 'flex',
10+
alignItems: 'center',
11+
justifyContent: 'center',
12+
backgroundColor: palette.common.white
13+
}
14+
})
15+
16+
17+
class CustomHTMLViewer extends Component {
18+
containerRef = createRef()
19+
20+
dimensions = { width: 200, height: 200 }
21+
22+
componentDidMount () {
23+
window.addEventListener('resize', this.delayedResize.bind(this))
24+
this.resizeIfNeeded()
25+
}
26+
27+
componentWillUnmount () {
28+
clearTimeout(this.timer)
29+
window.removeEventListener('resize', this.delayedResize)
30+
}
31+
32+
componentDidUpdate (){
33+
this.resizeIfNeeded()
34+
}
35+
36+
wasParentResized (dimensions) {
37+
return dimensions.width !== this.dimensions.width || dimensions.height !== this.dimensions.height
38+
}
39+
40+
getParentSize () {
41+
if (this.containerRef.current === null) {
42+
return false
43+
}
44+
return this.containerRef.current.parentNode.getBoundingClientRect()
45+
}
46+
47+
getSvgComponent () {
48+
// svg element
49+
return this.containerRef.current.children[0].children[0].children[0]
50+
}
51+
52+
adjustSVGSize () {
53+
const svg = this.getSvgComponent()
54+
svg.removeAttribute('width');
55+
svg.removeAttribute('height');
56+
svg.setAttribute('width', `${this.dimensions.width}px`);
57+
svg.setAttribute('height', `${this.dimensions.height}px`);
58+
}
59+
60+
resizeIfNeeded (){
61+
const dimensions = this.getParentSize()
62+
63+
if (dimensions !== false && this.wasParentResized(dimensions)) {
64+
this.dimensions = dimensions
65+
this.adjustSVGSize()
66+
}
67+
}
68+
69+
delayedResize () {
70+
this.timer = setTimeout(() => this.resizeIfNeeded(), 100)
71+
}
72+
73+
render () {
74+
const { classes } = this.props
75+
return (
76+
<div className={classes.container} ref={this.containerRef}>
77+
<HTMLViewer {...this.props} style={{ backgroundColor: 'white' }} />
78+
</div>
79+
)
80+
}
81+
}
82+
83+
84+
export default withStyles(style)(CustomHTMLViewer)

‎webapp/components/index.js‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,41 @@ import {
1010
} from "../redux/actions/flexlayout";
1111

1212
import { updateCards, editModel, createNetwork, createAndSimulateNetwork, showNetwork } from "../redux/actions/general";
13-
13+
import { newWidget } from "../redux/actions/flexlayout";
1414

1515
const updateCardsDispatch = dispatch => ({ updateCards: () => dispatch(updateCards) });
1616
const editModelDispatch = dispatch => ({ editModel: () => dispatch(editModel) });
1717

1818

1919
/** **** COMPONENT PROXIES ******/
2020

21+
// Python controlled
22+
23+
import TextField from "@material-ui/core/TextField";
24+
export const NetPyNETextField = PythonControlledCapability.createPythonControlledControl(
25+
TextField
26+
);
27+
28+
import _NetPyNECellRules from "./definition/cellRules/NetPyNECellRules";
29+
export const NetPyNECellRules = PythonControlledCapability.createPythonControlledComponent(
30+
_NetPyNECellRules
31+
);
32+
33+
import _NetPyNEConnectivityRules from "./definition/connectivity/NetPyNEConnectivityRules";
34+
export const NetPyNEConnectivityRules = PythonControlledCapability.createPythonControlledComponent(
35+
_NetPyNEConnectivityRules
36+
);
37+
38+
import _NetPyNEPlots from "./definition/plots/NetPyNEPlots";
39+
export const NetPyNEPlots = PythonControlledCapability.createPythonControlledComponent(
40+
_NetPyNEPlots
41+
);
42+
43+
import _ListComponent from "./general/List";
44+
export const ListComponent = PythonControlledCapability.createPythonControlledControl(
45+
_ListComponent
46+
);
47+
2148
import _AdapterComponent from "./general/AdapterComponent";
2249
export const AdapterComponent = PythonControlledCapability.createPythonControlledControl(
2350
_AdapterComponent
@@ -28,54 +55,34 @@ export const NetPyNECheckbox = PythonControlledCapability.createPythonControlled
2855
Checkbox
2956
);
3057

58+
import _NetPyNEStimulationTargets from "./definition/stimulationTargets/NetPyNEStimulationTargets";
59+
export const NetPyNEStimulationTargets = PythonControlledCapability.createPythonControlledComponent(
60+
_NetPyNEStimulationTargets
61+
);
62+
63+
// ---------------------------------------------------------------------------------------- //
64+
65+
// CONNECT
66+
3167
import _Dimensions from "./definition/populations/Dimensions";
3268
export const Dimensions = connect(
3369
(state, ownProps) => ({ ...ownProps }),
3470
updateCardsDispatch
3571
)(_Dimensions);
3672

3773

38-
import _ListComponent from "./general/List";
39-
export const ListComponent = PythonControlledCapability.createPythonControlledControl(
40-
_ListComponent
41-
);
42-
4374
import _NetPyNE from "./NetPyNE";
4475
export const NetPyNE = connect(
4576
state => ({ editMode: state.general.editMode, }),
4677
editModelDispatch
4778
)(_NetPyNE);
4879

49-
import NetPyNEAddNew from "./general/NetPyNEAddNew";
50-
export { NetPyNEAddNew };
51-
52-
import NetPyNEHome from "./general/NetPyNEHome";
53-
export { NetPyNEHome };
54-
5580
import _NetPyNECellRule from "./definition/cellRules/NetPyNECellRule";
5681
export const NetPyNECellRule = connect((state, ownProps) => ({
5782
...ownProps,
5883
updates: state.general.updates
5984
}))(_NetPyNECellRule);
6085

61-
import _NetPyNECellRules from "./definition/cellRules/NetPyNECellRules";
62-
export const NetPyNECellRules = PythonControlledCapability.createPythonControlledComponent(
63-
_NetPyNECellRules
64-
);
65-
66-
import _NetPyNEConnectivityRules from "./definition/connectivity/NetPyNEConnectivityRules";
67-
export const NetPyNEConnectivityRules = PythonControlledCapability.createPythonControlledComponent(
68-
_NetPyNEConnectivityRules
69-
);
70-
71-
import NetPyNECoordsRange from "./general/NetPyNECoordsRange";
72-
export { NetPyNECoordsRange };
73-
74-
import NetPyNEField from "./general/NetPyNEField";
75-
export { NetPyNEField };
76-
77-
import NetPyNEInstantiated from "./instantiation/NetPyNEInstantiated";
78-
export { NetPyNEInstantiated };
7986

8087
import _LayoutManager from "./layout/LayoutManager";
8188
export const LayoutManager = connect(
@@ -88,10 +95,6 @@ export const LayoutManager = connect(
8895
})
8996
)(_LayoutManager);
9097

91-
import _NetPyNEPlots from "./definition/plots/NetPyNEPlots";
92-
export const NetPyNEPlots = PythonControlledCapability.createPythonControlledComponent(
93-
_NetPyNEPlots
94-
);
9598

9699
import _NetPyNEPopulation from "./definition/populations/NetPyNEPopulation";
97100
export const NetPyNEPopulation = connect(
@@ -109,10 +112,6 @@ export const NetPyNEPopulations = connect(
109112
)
110113
);
111114

112-
import NetPyNESimConfig from "./definition/configuration/NetPyNESimConfig";
113-
export { NetPyNESimConfig };
114-
115-
116115
import _NetPyNEStimulationSource from "./definition/stimulationSources/NetPyNEStimulationSource";
117116
export const NetPyNEStimulationSource = connect(
118117
null,
@@ -138,10 +137,6 @@ export const NetPyNEStimulationTarget = connect(
138137
updateCardsDispatch
139138
)(_NetPyNEStimulationTarget);
140139

141-
import _NetPyNEStimulationTargets from "./definition/stimulationTargets/NetPyNEStimulationTargets";
142-
export const NetPyNEStimulationTargets = PythonControlledCapability.createPythonControlledComponent(
143-
_NetPyNEStimulationTargets
144-
);
145140

146141
import _NetPyNESynapse from "./definition/synapses/NetPyNESynapse";
147142
export const NetPyNESynapse = connect(
@@ -166,10 +161,6 @@ export const NetPyNETabs = connect(
166161
})
167162
)(_NetPyNETabs);
168163

169-
170-
import NetPyNEThumbnail from "./general/NetPyNEThumbnail";
171-
export { NetPyNEThumbnail };
172-
173164
import _NetPyNEToolbar from "./settings/NetPyNEToolBar";
174165
export const NetPyNEToolBar = connect(
175166
state => state.general
@@ -183,13 +174,26 @@ export const NetPyNESelectField = connect((state, ownProps) => ({
183174
SelectField
184175
));
185176

186-
import TextField from "@material-ui/core/TextField";
187-
export const NetPyNETextField = PythonControlledCapability.createPythonControlledControl(
188-
TextField
189-
);
190177

191178
import _NetPyNEInclude from './definition/plots/NetPyNEInclude';
192179
export const NetPyNEInclude = connect(
193180
(state, ownProps) => ({ ...ownProps, updates: state.general.updates }),
194181
null
195-
)(_NetPyNEInclude);
182+
)(_NetPyNEInclude);
183+
184+
import _NetPyNEInstantiated from "./instantiation/NetPyNEInstantiated"
185+
export const NetPyNEInstantiated = connect(
186+
null,
187+
dispatch => ({ newWidget: conf => dispatch(newWidget(conf)), })
188+
)(_NetPyNEInstantiated)
189+
190+
// ---------------------------------------------------------------------------------------- //
191+
192+
// DEFAULTS
193+
export { default as NetPyNEHome } from "./general/NetPyNEHome";
194+
export { default as NetPyNEField } from "./general/NetPyNEField";
195+
export { default as NetPyNEAddNew } from "./general/NetPyNEAddNew";
196+
export { default as NetPyNEThumbnail } from "./general/NetPyNEThumbnail";
197+
export { default as NetPyNECoordsRange } from "./general/NetPyNECoordsRange";
198+
export { default as NetPyNESimConfig } from "./definition/configuration/NetPyNESimConfig";
199+
export { default as HTMLViewer } from './general/HTMLViewer'

0 commit comments

Comments
 (0)