Plotly: fix external graphs

Author: Williangalvani

src/components/Plotly.vue

@@ -240,16 +240,21 @@ export default {
                         '/#/plot', '_blank',
                         'toolbar=no,scrollbars=yes,resizable=yes,top=500,left=500,width=800,height=400,allow-scripts'
                     )
-                    setTimeout(() => {
-                        console.log(newWindow)
-                        console.log(newWindow.setPlotData)
-                        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()
+                    const externalPlotInterval = setInterval(() => {
+                        try {
+                            console.log(newWindow)
+                            console.log(newWindow.setPlotData)
+                            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()
+                            clearInterval(externalPlotInterval)
+                        } catch (e) {
+                            console.log(e)
+                        }
                     }, 1000)
                     this.state.childPlots.push(newWindow)
                     console.log(newWindow)

src/components/PlotlyPopup.vue

@@ -56,20 +56,18 @@ export default {
     mounted () {
         console.log('mounted')
         console.log(this.$route.path)
-        if (this.$route.path === '/plot') {
-            window.plot = () => { this.plot() }
-            window.setPlotData = (data) => { this.plotData = data }
-            window.setPlotOptions = (options) => { this.plotOptions = options }
-            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)
-            }
+        window.plot = () => { this.plot() }
+        window.setPlotData = (data) => { this.plotData = data }
+        window.setPlotOptions = (options) => { this.plotOptions = options }
+        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')