Skip to content

Commit a393ace

Browse files
ddelpianoddelpiano
committed
fixing plot instatiation
1 parent 78e8a1a commit a393ace

8 files changed

Lines changed: 292 additions & 166 deletions

File tree

‎webapp/components/general/PlotViewer.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import HTMLViewer from '../index';
3+
4+
const PlotViewer = ({ key, id, method }) => {
5+
const data = window.plotCache[id];
6+
7+
if (method.plotMethod.startsWith('iplot')) {
8+
return (
9+
<div
10+
style={{
11+
width: '100%',
12+
height: '100%',
13+
textAlign: 'center',
14+
}}
15+
>
16+
<iframe
17+
title="plot"
18+
name="dipole"
19+
srcDoc={data}
20+
style={{
21+
border: 0,
22+
width: '100%',
23+
height: '100%',
24+
}}
25+
/>
26+
</div>
27+
);
28+
}
29+
return <HTMLViewer content={data} id={id} />;
30+
};
31+
32+
export default PlotViewer;

‎webapp/components/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ import _ExperimentEdit from './experiments/ExperimentEdit';
6363
import _ExperimentManager from './experiments/ExperimentManager';
6464
import _LaunchDialog from './topbar/dialogs/LaunchDialog';
6565
import _NetPyNEPythonConsole from './general/NetPyNEPythonConsole';
66+
import _PlotViewer from './general/PlotViewer';
6667

6768
const updateCardsDispatch = (dispatch) => ({ updateCards: () => dispatch(updateCards) });
6869

@@ -355,6 +356,11 @@ export const SelectCellTemplate = connect(
355356
),
356357
}),
357358
)(_SelectCellTemplate);
359+
360+
export const PlotViewer = connect(
361+
null,
362+
null,
363+
)(_PlotViewer);
358364
// ---------------------------------------------------------------------------------------- //
359365

360366
// DEFAULTS

‎webapp/components/instantiation/NetPyNEInstantiated.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ class NetPyNEInstantiated extends React.Component {
222222
cameraOptions={camOptions}
223223
key="CanvasContainer"
224224
data={canvasData}
225-
backgroundColor={'#000000'}
225+
backgroundColor="#000000"
226226
/>
227227
<div id="controlpanel" style={{ top: 0 }}>
228228
{/* TODO: refactor the control panel with the list viewer

‎webapp/components/layout/componentsMap.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable quote-props */
22
import * as React from 'react';
33
import {
4-
HTMLViewer,
54
NetPyNEInstantiated,
65
NetPyNESynapses,
76
NetPyNEConnectivityRules,
@@ -15,6 +14,8 @@ import {
1514
ExperimentManager,
1615
} from '..';
1716

17+
import PlotViewer from '../general/PlotViewer';
18+
1819
/**
1920
* Key of the component is the `component` attribute of the widgetConfiguration.
2021
* This map is used inside the LayoutManager to know which component to display for a given widget.
@@ -23,7 +24,7 @@ import {
2324
const componentMap = {
2425
'PythonConsole': NetPyNEPythonConsole,
2526
'D3Canvas': NetPyNEInstantiated,
26-
'Plot': HTMLViewer,
27+
'Plot': PlotViewer,
2728
'popParams': NetPyNEPopulations,
2829
'cellParams': NetPyNECellRules,
2930
'synMechParams': NetPyNESynapses,

‎webapp/constants.js‎

Lines changed: 109 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,16 @@ export const NETWORK_PLOT_WIDGETS = {
9393
enableRename: false,
9494
hideOnClose: true,
9595
initialized: false,
96-
method: {
97-
plotKey: 'plotConn',
98-
plotMethod: 'iplotConn',
99-
plotType: false,
100-
},
10196
pos: 1,
97+
config: {
98+
id: 'connectionPlot',
99+
name: 'Connections Plot',
100+
method: {
101+
plotKey: 'plotConn',
102+
plotMethod: 'iplotConn',
103+
plotType: false,
104+
},
105+
},
102106
},
103107
d2NetPlot: {
104108
id: 'd2NetPlot',
@@ -110,12 +114,16 @@ export const NETWORK_PLOT_WIDGETS = {
110114
enableRename: false,
111115
hideOnClose: true,
112116
initialized: false,
113-
method: {
114-
plotKey: 'plot2Dnet',
115-
plotMethod: 'iplot2Dnet',
116-
plotType: false,
117-
},
118117
pos: 2,
118+
config: {
119+
id: 'd2NetPlot',
120+
name: '2D Net Plot',
121+
method: {
122+
plotKey: 'plot2Dnet',
123+
plotMethod: 'iplot2Dnet',
124+
plotType: false,
125+
},
126+
},
119127
},
120128
};
121129

@@ -132,12 +140,16 @@ export const PLOT_WIDGETS = {
132140
enableRename: false,
133141
initialized: false,
134142
disabled: true,
135-
method: {
136-
plotKey: 'plotTraces',
137-
plotMethod: 'iplotTraces',
138-
plotType: false,
139-
},
140143
pos: 3,
144+
config: {
145+
id: 'tracesPlot',
146+
name: 'Cell traces',
147+
method: {
148+
plotKey: 'plotTraces',
149+
plotMethod: 'iplotTraces',
150+
plotType: false,
151+
},
152+
},
141153
},
142154
rasterPlot: {
143155
id: 'rasterPlot',
@@ -150,12 +162,16 @@ export const PLOT_WIDGETS = {
150162
hideOnClose: true,
151163
initialized: false,
152164
disabled: true,
153-
method: {
154-
plotKey: 'plotRaster',
155-
plotMethod: 'iplotRaster',
156-
plotType: false,
157-
},
158165
pos: 4,
166+
config: {
167+
id: 'rasterPlot',
168+
name: 'Raster plot',
169+
method: {
170+
plotKey: 'plotRaster',
171+
plotMethod: 'iplotRaster',
172+
plotType: false,
173+
},
174+
},
159175
},
160176
spikePlot: {
161177
id: 'spikePlot',
@@ -168,12 +184,17 @@ export const PLOT_WIDGETS = {
168184
hideOnClose: true,
169185
initialized: false,
170186
disabled: true,
171-
method: {
172-
plotKey: 'plotSpikeHist',
173-
plotMethod: 'iplotSpikeHist',
174-
plotType: false,
175-
},
176187
pos: 5,
188+
config: {
189+
id: 'spikePlot',
190+
name: 'Spike Hist Plot',
191+
method: {
192+
plotKey: 'plotSpikeHist',
193+
plotMethod: 'iplotSpikeHist',
194+
plotType: false,
195+
},
196+
pos: 5,
197+
},
177198
},
178199
spikeStatsPlot: {
179200
id: 'spikeStatsPlot',
@@ -186,12 +207,16 @@ export const PLOT_WIDGETS = {
186207
enableRename: false,
187208
initialized: false,
188209
disabled: true,
189-
method: {
190-
key: 'plotSpikeStats',
191-
plotMethod: 'iplotSpikeStats',
192-
plotType: false,
193-
},
194210
pos: 6,
211+
config: {
212+
id: 'spikeStatsPlot',
213+
name: 'Spike Stats Plot',
214+
method: {
215+
key: 'plotSpikeStats',
216+
plotMethod: 'iplotSpikeStats',
217+
plotType: false,
218+
},
219+
},
195220
},
196221
ratePSDPlot: {
197222
id: 'ratePSDPlot',
@@ -210,6 +235,15 @@ export const PLOT_WIDGETS = {
210235
plotType: false,
211236
},
212237
pos: 7,
238+
config: {
239+
id: 'ratePSDPlot',
240+
name: 'Rate PSD Plot',
241+
method: {
242+
key: 'plotRatePSD',
243+
plotMethod: 'iplotRatePSD',
244+
plotType: false,
245+
},
246+
},
213247
},
214248
LFPTimeSeriesPlot: {
215249
id: 'LFPTimeSeriesPlot',
@@ -228,6 +262,15 @@ export const PLOT_WIDGETS = {
228262
plotType: 'timeSeries',
229263
},
230264
pos: 8,
265+
config: {
266+
id: 'LFPTimeSeriesPlot',
267+
name: 'LFP Time Series Plot',
268+
method: {
269+
plotKey: 'plotLFP',
270+
plotMethod: 'iplotLFP',
271+
plotType: 'timeSeries',
272+
},
273+
},
231274
},
232275
LFPPSDPlot: {
233276
id: 'LFPPSDPlot',
@@ -246,6 +289,15 @@ export const PLOT_WIDGETS = {
246289
plotType: 'PSD',
247290
},
248291
pos: 9,
292+
config: {
293+
id: 'LFPPSDPlot',
294+
name: 'LFP PSD Plot',
295+
method: {
296+
plotKey: 'plotLFP',
297+
plotMethod: 'iplotLFP',
298+
plotType: 'PSD',
299+
},
300+
},
249301
},
250302
LFPSpectrogramPlot: {
251303
id: 'LFPSpectrogramPlot',
@@ -264,6 +316,15 @@ export const PLOT_WIDGETS = {
264316
plotType: 'spectrogram',
265317
},
266318
pos: 10,
319+
config: {
320+
id: 'LFPSpectrogramPlot',
321+
name: 'LFP Spectrogram Plot',
322+
method: {
323+
plotKey: 'plotLFP',
324+
plotMethod: 'iplotLFP',
325+
plotType: 'spectrogram',
326+
},
327+
},
267328
},
268329
grangerPlot: {
269330
id: 'grangerPlot',
@@ -282,6 +343,15 @@ export const PLOT_WIDGETS = {
282343
plotType: false,
283344
},
284345
pos: 11,
346+
config: {
347+
id: 'grangerPlot',
348+
name: 'Granger Plot',
349+
method: {
350+
plotKey: 'granger',
351+
plotMethod: 'iplotGranger',
352+
plotType: false,
353+
},
354+
},
285355
},
286356
rxdConcentrationPlot: {
287357
id: 'rxdConcentrationPlot',
@@ -300,6 +370,15 @@ export const PLOT_WIDGETS = {
300370
plotType: false,
301371
},
302372
pos: 12,
373+
config: {
374+
id: 'rxdConcentrationPlot',
375+
name: 'RxD concentration plot',
376+
method: {
377+
plotKey: 'plotRxDConcentration',
378+
plotMethod: 'iplotRxDConcentration',
379+
plotType: false,
380+
},
381+
},
303382
},
304383
};
305384

‎webapp/dev_package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
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/react": "^6.16.1",
28+
"@sentry/tracing": "^6.16.1",
2729
"jquery": "^3.6.0",
2830
"js-base64": "^3.6.1",
2931
"less-vars-to-js": "^1.3.0",
@@ -33,7 +35,8 @@
3335
"react-json-view": "^1.21.3",
3436
"react-redux": "^7.2.0",
3537
"react-sortable-tree": "^2.8.0",
36-
"redux": "^4.1.0"
38+
"redux": "^4.1.0",
39+
"three": "0.111.0"
3740
},
3841
"resolutions": {
3942
"@material-ui/core": "4.11.4"
@@ -71,8 +74,8 @@
7174
"exports-loader": "^0.6.3",
7275
"file-loader": "^5.1.0",
7376
"file-saver": "^2.0.2",
74-
"html-webpack-plugin": "^3.2.0",
7577
"html-to-image": "^1.9.0",
78+
"html-webpack-plugin": "^3.2.0",
7679
"ignore-loader": "^0.1.2",
7780
"imports-loader": "^0.7.1",
7881
"jasmine": "^3.2.0",

‎webapp/redux/middleware/plotMiddleware.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
// and ensured that plot data doesn't lead to performance issues due to possible deep-copy in reducers.
1818
window.plotCache = {};
1919

20-
const isDisabled = (widget, plots) => !plots[widget.method.plotKey] ?? true;
20+
const isDisabled = (widget, plots) => !plots[widget.config.method.plotKey] ?? true;
2121

2222
const setPlotToWindow = (plotId, data) => {
2323
if (data === '') {
@@ -95,7 +95,7 @@ export default (store) => (next) => (action) => {
9595
const {
9696
plotMethod,
9797
plotType,
98-
} = widget.method;
98+
} = widget.config.method;
9999
return plotFigure(widget.id, plotMethod, plotType, store.getState().general.theme)
100100
.then((data) => {
101101
setPlotToWindow(widget.id, data);
@@ -110,7 +110,7 @@ export default (store) => (next) => (action) => {
110110
}
111111

112112
switch (action.type) {
113-
case GeppettoActions.UPDATE_WIDGET: {
113+
case GeppettoActions.layoutActions.UPDATE_WIDGET: {
114114
// Triggered on tab of widget icon in sidebar
115115
// and refreshes widget data if widget wasn't initialized before.
116116
const widget = action.data;
@@ -123,7 +123,7 @@ export default (store) => (next) => (action) => {
123123
next(action);
124124
break;
125125
}
126-
case GeppettoActions.SET_WIDGETS: {
126+
case GeppettoActions.layoutActions.SET_WIDGETS: {
127127
// This is triggered once when we change the layout from Edit > Explore.
128128
// We add the widgets (back) to the sidebar but without fetching any data.
129129
Object.values(action.data)

0 commit comments

Comments
 (0)