Skip to content

Commit f4ffcac

Browse files
WilliangalvaniWilliangalvani
committed
Plotly: more multi-window support
1 parent cfb1242 commit f4ffcac

File tree

3 files changed

+104
-49
lines changed

3 files changed

+104
-49
lines changed

‎src/components/Globals.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,5 +59,6 @@ export const store = {
5959
/* global _COMMIT_ */
6060
commit: _COMMIT_.slice(0, 6),
6161
/* global _BUILDDATE_ */
62-
buildDate: _BUILDDATE_
62+
buildDate: _BUILDDATE_,
63+
childPlots: []
6364
}

‎src/components/Plotly.vue‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,9 @@ const plotOptions = {
152152
export default {
153153
created () {
154154
this.$eventHub.$on('cesium-time-changed', this.setCursorTime)
155+
this.$eventHub.$on('hoveredTime', this.setCursorTime)
155156
this.$eventHub.$on('force-resize-plotly', this.resize)
157+
this.$eventHub.$on('child-zoomed', this.onTimeRangeChanged)
156158
this.zoomInterval = null
157159
this.cache = {}
158160
},
@@ -244,8 +246,12 @@ export default {
244246
newWindow.setPlotData(gd.data)
245247
newWindow.setPlotOptions(gd.layout)
246248
newWindow.setCssColors(this.state.cssColors)
249+
newWindow.setFlightModeChanges(this.state.flightModeChanges)
250+
console.log(this.$eventHub)
251+
newWindow.setEventHub(this.$eventHub)
247252
newWindow.plot()
248253
}, 1000)
254+
this.state.childPlots.push(newWindow)
249255
console.log(newWindow)
250256
}
251257
}
@@ -341,15 +347,30 @@ export default {
341347
// this.$router.push({query: query})
342348
if (event['xaxis.range']) {
343349
this.state.timeRange = event['xaxis.range']
350+
this.updatChildrenTimeRange(this.state.timeRange)
344351
}
345352
if (event['xaxis.range[0]']) {
346353
this.state.timeRange = [event['xaxis.range[0]'], event['xaxis.range[1]']]
354+
this.updatChildrenTimeRange(this.state.timeRange)
347355
}
348356
if (event['xaxis.autorange']) {
349357
this.state.timeRange = [this.gd.layout.xaxis.range[0], this.gd.layout.xaxis.range[1]]
358+
this.updatChildrenTimeRange(this.state.timeRange)
350359
}
351360
}
352361
},
362+
363+
onTimeRangeChanged (timeRange) {
364+
// check if it actually changed, with a delta tolarance
365+
this.state.timeRange = timeRange
366+
367+
this.updatChildrenTimeRange(this.state.timeRange)
368+
},
369+
updatChildrenTimeRange (timeRange) {
370+
for (const child of this.state.childPlots) {
371+
child.setTimeRange(timeRange)
372+
}
373+
},
353374
addMaxMinMeanToTitles () {
354375
const average = arr => arr.reduce((p, c) => p + c, 0) / arr.length
355376
const gd = this.gd
@@ -858,6 +879,7 @@ export default {
858879
console.log('layout done in ' + (new Date() - start) + 'ms')
859880
},
860881
setCursorTime (time) {
882+
console.log('master got hover event at ' + time + 'ms')
861883
try {
862884
const bglayer = document.getElementsByClassName('bglayer')[0]
863885
const rect = bglayer.childNodes[0]
@@ -1070,23 +1092,21 @@ export default {
10701092
},
10711093
watch: {
10721094
timeRange (range) {
1073-
if (Math.abs(this.gd.layout.xaxis.range[0] - range[0]) > 5 ||
1074-
Math.abs(this.gd.layout.xaxis.range[1] - range[1]) > 5) {
1075-
if (this.zoomInterval !== null) {
1076-
clearTimeout(this.zoomInterval)
1077-
}
1078-
this.zoomInterval = setTimeout(() => {
1079-
Plotly.relayout(this.gd, {
1080-
xaxis: {
1081-
title: 'Time since boot',
1082-
range: range,
1083-
domain: this.calculateXAxisDomain(),
1084-
rangeslider: {},
1085-
tickformat: timeformat
1086-
}
1087-
})
1088-
}, 500)
1095+
if (this.zoomInterval !== null) {
1096+
clearTimeout(this.zoomInterval)
10891097
}
1098+
this.updatChildrenTimeRange(this.state.timeRange)
1099+
this.zoomInterval = setTimeout(() => {
1100+
Plotly.relayout(this.gd, {
1101+
xaxis: {
1102+
title: 'Time since boot',
1103+
range: range,
1104+
domain: this.calculateXAxisDomain(),
1105+
rangeslider: {},
1106+
tickformat: timeformat
1107+
}
1108+
})
1109+
}, 500)
10901110
return range // make linter happy, it says this is a computed property(?)
10911111
},
10921112
expressions: {

‎src/components/PlotlyPopup.vue‎

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,6 @@ const updatemenus = [
5050
export default {
5151
name: 'PlotlyPopup',
5252
created () {
53-
this.$eventHub.$on('cesium-time-changed', this.setCursorTime)
54-
this.$eventHub.$on('force-resize-plotly', this.resize)
5553
this.zoomInterval = null
5654
this.cache = {}
5755
},
@@ -62,8 +60,16 @@ export default {
6260
window.plot = () => { this.plot() }
6361
window.setPlotData = (data) => { this.plotData = data }
6462
window.setPlotOptions = (options) => { this.plotOptions = options }
65-
window.setFlightModes = (modes) => { this.flightModes = modes }
63+
window.setFlightModeChanges = (modes) => { this.flightModeChanges = modes }
6664
window.setCssColors = (colors) => { this.cssColors = colors }
65+
window.setTimeRange = (timeRange) => { this.setTimeRange(timeRange) }
66+
window.setEventHub = (eventHub) => {
67+
this.$eventHub = eventHub
68+
this.$eventHub.$on('cesium-time-changed', this.setCursorTime)
69+
this.$eventHub.$on('hoveredTime', this.setCursorTime)
70+
this.$eventHub.$on('child-zoomed', this.setTimeRange)
71+
this.$eventHub.$on('force-resize-plotly', this.resize)
72+
}
6773
}
6874
const WIDTH_IN_PERCENT_OF_PARENT = 90
6975
d3.select('#line')
@@ -88,11 +94,16 @@ export default {
8894
state: store,
8995
plotData: [],
9096
plotOptions: {},
91-
flightModeChanges: []
92-
97+
flightModeChanges: [],
98+
externalTimeRange: null,
99+
$eventHub: null,
100+
cursor: null
93101
}
94102
},
95103
methods: {
104+
setTimeRange (timeRange) {
105+
this.externalTimeRange = timeRange
106+
},
96107
csvButton () {
97108
return {
98109
name: 'downloadCsv',
@@ -183,13 +194,16 @@ export default {
183194
if (event !== undefined) {
184195
// this.$router.push({query: query})
185196
if (event['xaxis.range']) {
186-
this.state.timeRange = event['xaxis.range']
197+
this.setTimeRange(event['xaxis.range'])
198+
this.$eventHub.$emit('child-zoomed', this.timeRange)
187199
}
188200
if (event['xaxis.range[0]']) {
189-
this.state.timeRange = [event['xaxis.range[0]'], event['xaxis.range[1]']]
201+
this.setTimeRange([event['xaxis.range[0]'], event['xaxis.range[1]']])
202+
this.$eventHub.$emit('child-zoomed', this.timeRange)
190203
}
191204
if (event['xaxis.autorange']) {
192-
this.state.timeRange = [this.gd.layout.xaxis.range[0], this.gd.layout.xaxis.range[1]]
205+
this.setTimeRange([this.gd.layout.xaxis.range[0], this.gd.layout.xaxis.range[1]])
206+
this.$eventHub.$emit('child-zoomed', this.timeRange)
193207
}
194208
}
195209
},
@@ -231,6 +245,7 @@ export default {
231245
plot () {
232246
console.log('plot()')
233247
const start = new Date()
248+
delete this.plotOptions.xaxis.rangeslider
234249
if (this.plotInstance !== null) {
235250
this.plotOptions.xaxis.range = this.gd._fullLayout.xaxis.range
236251
Plotly.newPlot(this.gd, this.plotData, this.plotOptions, { scrollZoom: true, responsive: true })
@@ -254,11 +269,12 @@ export default {
254269
return d.x
255270
})
256271
this.$eventHub.$emit('hoveredTime', infotext[0])
272+
this.setCursorTime(infotext[0])
257273
})
258274
259275
this.addModeShapes()
260276
this.addEvents()
261-
this.addParamChanges()
277+
// this.addParamChanges()
262278
263279
this.state.plotLoading = false
264280
@@ -312,7 +328,7 @@ export default {
312328
},
313329
addModeShapes () {
314330
const shapes = []
315-
const modeChanges = [...this.state.this.flightModeChanges]
331+
const modeChanges = [...this.flightModeChanges]
316332
modeChanges.push([this.gd.layout.xaxis.range[1], null])
317333
318334
for (let i = 0; i < modeChanges.length - 1; i++) {
@@ -339,6 +355,26 @@ export default {
339355
shapes: shapes
340356
})
341357
},
358+
calculateXAxisDomain () {
359+
let start = 0.02
360+
let end = 0.98
361+
for (const field of this.state.expressions) {
362+
if (field.axis === 0) {
363+
start = Math.max(start, 0.03)
364+
} else if (field.axis === 1) {
365+
start = Math.max(start, 0.07)
366+
} else if (field.axis === 2) {
367+
start = Math.max(start, 0.11)
368+
} else if (field.axis === 5) {
369+
end = Math.min(end, 0.96)
370+
} else if (field.axis === 4) {
371+
end = Math.min(end, 0.92)
372+
} else if (field.axis === 3) {
373+
end = Math.min(end, 0.88)
374+
}
375+
}
376+
return [start, end]
377+
},
342378
addEvents () {
343379
annotationsEvents = []
344380
let i = -300
@@ -363,7 +399,7 @@ export default {
363399
i = -300
364400
}
365401
}
366-
const modeChanges = [...this.state.this.flightModeChanges]
402+
const modeChanges = [...this.flightModeChanges]
367403
modeChanges.push([this.gd.layout.xaxis.range[1], null])
368404
for (let i = 0; i < modeChanges.length - 1; i++) {
369405
annotationsModes.push(
@@ -398,7 +434,7 @@ export default {
398434
annotationsParams = []
399435
const firstFetch = new Set()
400436
let startAt = null
401-
for (const change of this.state.params.changeArray) {
437+
for (const change of this.changeArray) {
402438
if (!firstFetch.has(change[1])) {
403439
firstFetch.add(change[1])
404440
} else {
@@ -407,7 +443,7 @@ export default {
407443
}
408444
}
409445
let last = [0, 0]
410-
for (const change of this.state.params.changeArray) {
446+
for (const change of this.changeArray) {
411447
if (change[0] < startAt) {
412448
continue
413449
}
@@ -462,16 +498,16 @@ export default {
462498
computed: {
463499
setOfModes () {
464500
const set = []
465-
for (const mode of this.state.this.flightModeChanges) {
501+
for (const mode of this.flightModeChanges) {
466502
if (!set.includes(mode[1])) {
467503
set.push(mode[1])
468504
}
469505
}
470506
return set
471507
},
472508
timeRange () {
473-
if (this.state.timeRange != null) {
474-
return this.state.timeRange
509+
if (this.externalTimeRange != null) {
510+
return this.externalTimeRange
475511
}
476512
return undefined
477513
},
@@ -491,23 +527,21 @@ export default {
491527
},
492528
watch: {
493529
timeRange (range) {
494-
if (Math.abs(this.gd.layout.xaxis.range[0] - range[0]) > 5 ||
495-
Math.abs(this.gd.layout.xaxis.range[1] - range[1]) > 5) {
496-
if (this.zoomInterval !== null) {
497-
clearTimeout(this.zoomInterval)
498-
}
499-
this.zoomInterval = setTimeout(() => {
500-
Plotly.relayout(this.gd, {
501-
xaxis: {
502-
title: 'Time since boot',
503-
range: range,
504-
domain: this.calculateXAxisDomain(),
505-
rangeslider: {},
506-
tickformat: timeformat
507-
}
508-
})
509-
}, 500)
530+
console.log('timeRange', range)
531+
532+
if (this.zoomInterval !== null) {
533+
clearTimeout(this.zoomInterval)
510534
}
535+
this.zoomInterval = setTimeout(() => {
536+
Plotly.relayout(this.gd, {
537+
xaxis: {
538+
title: 'Time since boot',
539+
range: range,
540+
domain: this.calculateXAxisDomain(),
541+
tickformat: timeformat
542+
}
543+
})
544+
}, 500)
511545
return range // make linter happy, it says this is a computed property(?)
512546
},
513547
expressions: {

0 commit comments

Comments
 (0)