Skip to content

Commit

Permalink
Plotly: more multi-window support
Browse files Browse the repository at this point in the history
  • Loading branch information
@Williangalvani
Williangalvani committed Jun 17, 2023
1 parent cfb1242 commit f4ffcac
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 49 deletions.
3 changes: 2 additions & 1 deletion src/components/Globals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,5 +59,6 @@ export const store = {
/* global _COMMIT_ */
commit: _COMMIT_.slice(0, 6),
/* global _BUILDDATE_ */
buildDate: _BUILDDATE_
buildDate: _BUILDDATE_,
childPlots: []
}
52 changes: 36 additions & 16 deletions src/components/Plotly.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,9 @@ const plotOptions = {
export default {
created () {
this.$eventHub.$on('cesium-time-changed', this.setCursorTime)
this.$eventHub.$on('hoveredTime', this.setCursorTime)
this.$eventHub.$on('force-resize-plotly', this.resize)
this.$eventHub.$on('child-zoomed', this.onTimeRangeChanged)
this.zoomInterval = null
this.cache = {}
},
Expand Down Expand Up @@ -244,8 +246,12 @@ export default {
newWindow.setPlotData(gd.data)
newWindow.setPlotOptions(gd.layout)
newWindow.setCssColors(this.state.cssColors)
newWindow.setFlightModeChanges(this.state.flightModeChanges)
console.log(this.$eventHub)
newWindow.setEventHub(this.$eventHub)
newWindow.plot()
}, 1000)
this.state.childPlots.push(newWindow)
console.log(newWindow)
}
}
Expand Down Expand Up @@ -341,15 +347,30 @@ export default {
// this.$router.push({query: query})
if (event['xaxis.range']) {
this.state.timeRange = event['xaxis.range']
this.updatChildrenTimeRange(this.state.timeRange)
}
if (event['xaxis.range[0]']) {
this.state.timeRange = [event['xaxis.range[0]'], event['xaxis.range[1]']]
this.updatChildrenTimeRange(this.state.timeRange)
}
if (event['xaxis.autorange']) {
this.state.timeRange = [this.gd.layout.xaxis.range[0], this.gd.layout.xaxis.range[1]]
this.updatChildrenTimeRange(this.state.timeRange)
}
}
},
onTimeRangeChanged (timeRange) {
// check if it actually changed, with a delta tolarance
this.state.timeRange = timeRange
this.updatChildrenTimeRange(this.state.timeRange)
},
updatChildrenTimeRange (timeRange) {
for (const child of this.state.childPlots) {
child.setTimeRange(timeRange)
}
},
addMaxMinMeanToTitles () {
const average = arr => arr.reduce((p, c) => p + c, 0) / arr.length
const gd = this.gd
Expand Down Expand Up @@ -858,6 +879,7 @@ export default {
console.log('layout done in ' + (new Date() - start) + 'ms')
},
setCursorTime (time) {
console.log('master got hover event at ' + time + 'ms')
try {
const bglayer = document.getElementsByClassName('bglayer')[0]
const rect = bglayer.childNodes[0]
Expand Down Expand Up @@ -1070,23 +1092,21 @@ export default {
},
watch: {
timeRange (range) {
if (Math.abs(this.gd.layout.xaxis.range[0] - range[0]) > 5 ||
Math.abs(this.gd.layout.xaxis.range[1] - range[1]) > 5) {
if (this.zoomInterval !== null) {
clearTimeout(this.zoomInterval)
}
this.zoomInterval = setTimeout(() => {
Plotly.relayout(this.gd, {
xaxis: {
title: 'Time since boot',
range: range,
domain: this.calculateXAxisDomain(),
rangeslider: {},
tickformat: timeformat
}
})
}, 500)
if (this.zoomInterval !== null) {
clearTimeout(this.zoomInterval)
}
this.updatChildrenTimeRange(this.state.timeRange)
this.zoomInterval = setTimeout(() => {
Plotly.relayout(this.gd, {
xaxis: {
title: 'Time since boot',
range: range,
domain: this.calculateXAxisDomain(),
rangeslider: {},
tickformat: timeformat
}
})
}, 500)
return range // make linter happy, it says this is a computed property(?)
},
expressions: {
Expand Down
98 changes: 66 additions & 32 deletions src/components/PlotlyPopup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,6 @@ const updatemenus = [
export default {
name: 'PlotlyPopup',
created () {
this.$eventHub.$on('cesium-time-changed', this.setCursorTime)
this.$eventHub.$on('force-resize-plotly', this.resize)
this.zoomInterval = null
this.cache = {}
},
Expand All @@ -62,8 +60,16 @@ export default {
window.plot = () => { this.plot() }
window.setPlotData = (data) => { this.plotData = data }
window.setPlotOptions = (options) => { this.plotOptions = options }
window.setFlightModes = (modes) => { this.flightModes = modes }
window.setFlightModeChanges = (modes) => { this.flightModeChanges = modes }
window.setCssColors = (colors) => { this.cssColors = colors }
window.setTimeRange = (timeRange) => { this.setTimeRange(timeRange) }
window.setEventHub = (eventHub) => {
this.$eventHub = eventHub
this.$eventHub.$on('cesium-time-changed', this.setCursorTime)
this.$eventHub.$on('hoveredTime', this.setCursorTime)
this.$eventHub.$on('child-zoomed', this.setTimeRange)
this.$eventHub.$on('force-resize-plotly', this.resize)
}
}
const WIDTH_IN_PERCENT_OF_PARENT = 90
d3.select('#line')
Expand All @@ -88,11 +94,16 @@ export default {
state: store,
plotData: [],
plotOptions: {},
flightModeChanges: []
flightModeChanges: [],
externalTimeRange: null,
$eventHub: null,
cursor: null
}
},
methods: {
setTimeRange (timeRange) {
this.externalTimeRange = timeRange
},
csvButton () {
return {
name: 'downloadCsv',
Expand Down Expand Up @@ -183,13 +194,16 @@ export default {
if (event !== undefined) {
// this.$router.push({query: query})
if (event['xaxis.range']) {
this.state.timeRange = event['xaxis.range']
this.setTimeRange(event['xaxis.range'])
this.$eventHub.$emit('child-zoomed', this.timeRange)
}
if (event['xaxis.range[0]']) {
this.state.timeRange = [event['xaxis.range[0]'], event['xaxis.range[1]']]
this.setTimeRange([event['xaxis.range[0]'], event['xaxis.range[1]']])
this.$eventHub.$emit('child-zoomed', this.timeRange)
}
if (event['xaxis.autorange']) {
this.state.timeRange = [this.gd.layout.xaxis.range[0], this.gd.layout.xaxis.range[1]]
this.setTimeRange([this.gd.layout.xaxis.range[0], this.gd.layout.xaxis.range[1]])
this.$eventHub.$emit('child-zoomed', this.timeRange)
}
}
},
Expand Down Expand Up @@ -231,6 +245,7 @@ export default {
plot () {
console.log('plot()')
const start = new Date()
delete this.plotOptions.xaxis.rangeslider
if (this.plotInstance !== null) {
this.plotOptions.xaxis.range = this.gd._fullLayout.xaxis.range
Plotly.newPlot(this.gd, this.plotData, this.plotOptions, { scrollZoom: true, responsive: true })
Expand All @@ -254,11 +269,12 @@ export default {
return d.x
})
this.$eventHub.$emit('hoveredTime', infotext[0])
this.setCursorTime(infotext[0])
})
this.addModeShapes()
this.addEvents()
this.addParamChanges()
// this.addParamChanges()
this.state.plotLoading = false
Expand Down Expand Up @@ -312,7 +328,7 @@ export default {
},
addModeShapes () {
const shapes = []
const modeChanges = [...this.state.this.flightModeChanges]
const modeChanges = [...this.flightModeChanges]
modeChanges.push([this.gd.layout.xaxis.range[1], null])
for (let i = 0; i < modeChanges.length - 1; i++) {
Expand All @@ -339,6 +355,26 @@ export default {
shapes: shapes
})
},
calculateXAxisDomain () {
let start = 0.02
let end = 0.98
for (const field of this.state.expressions) {
if (field.axis === 0) {
start = Math.max(start, 0.03)
} else if (field.axis === 1) {
start = Math.max(start, 0.07)
} else if (field.axis === 2) {
start = Math.max(start, 0.11)
} else if (field.axis === 5) {
end = Math.min(end, 0.96)
} else if (field.axis === 4) {
end = Math.min(end, 0.92)
} else if (field.axis === 3) {
end = Math.min(end, 0.88)
}
}
return [start, end]
},
addEvents () {
annotationsEvents = []
let i = -300
Expand All @@ -363,7 +399,7 @@ export default {
i = -300
}
}
const modeChanges = [...this.state.this.flightModeChanges]
const modeChanges = [...this.flightModeChanges]
modeChanges.push([this.gd.layout.xaxis.range[1], null])
for (let i = 0; i < modeChanges.length - 1; i++) {
annotationsModes.push(
Expand Down Expand Up @@ -398,7 +434,7 @@ export default {
annotationsParams = []
const firstFetch = new Set()
let startAt = null
for (const change of this.state.params.changeArray) {
for (const change of this.changeArray) {
if (!firstFetch.has(change[1])) {
firstFetch.add(change[1])
} else {
Expand All @@ -407,7 +443,7 @@ export default {
}
}
let last = [0, 0]
for (const change of this.state.params.changeArray) {
for (const change of this.changeArray) {
if (change[0] < startAt) {
continue
}
Expand Down Expand Up @@ -462,16 +498,16 @@ export default {
computed: {
setOfModes () {
const set = []
for (const mode of this.state.this.flightModeChanges) {
for (const mode of this.flightModeChanges) {
if (!set.includes(mode[1])) {
set.push(mode[1])
}
}
return set
},
timeRange () {
if (this.state.timeRange != null) {
return this.state.timeRange
if (this.externalTimeRange != null) {
return this.externalTimeRange
}
return undefined
},
Expand All @@ -491,23 +527,21 @@ export default {
},
watch: {
timeRange (range) {
if (Math.abs(this.gd.layout.xaxis.range[0] - range[0]) > 5 ||
Math.abs(this.gd.layout.xaxis.range[1] - range[1]) > 5) {
if (this.zoomInterval !== null) {
clearTimeout(this.zoomInterval)
}
this.zoomInterval = setTimeout(() => {
Plotly.relayout(this.gd, {
xaxis: {
title: 'Time since boot',
range: range,
domain: this.calculateXAxisDomain(),
rangeslider: {},
tickformat: timeformat
}
})
}, 500)
console.log('timeRange', range)
if (this.zoomInterval !== null) {
clearTimeout(this.zoomInterval)
}
this.zoomInterval = setTimeout(() => {
Plotly.relayout(this.gd, {
xaxis: {
title: 'Time since boot',
range: range,
domain: this.calculateXAxisDomain(),
tickformat: timeformat
}
})
}, 500)
return range // make linter happy, it says this is a computed property(?)
},
expressions: {
Expand Down

0 comments on commit f4ffcac

Please sign in to comment.