Merge pull request #288 from PrefectHQ/update-viewport-date-range-whe…

…n-scale-changes

Sync global scales when scale changes

src/factories/nodes.ts

@@ -76,6 +76,8 @@ export async function nodesContainerFactory(runId: string) {
     if (!data.end_time) {
       interval = setTimeout(() => fetch(), DEFAULT_POLL_INTERVAL)
     }
+
+    container.emit('fetched', data)
   }
 
   async function renderNodes(): Promise<void> {

src/objects/events.ts

@@ -5,7 +5,7 @@ import { EffectScope } from 'vue'
 import { eventsFactory } from '@/factories/events'
 import { HorizontalScale } from '@/factories/position'
 import { LayoutSettings } from '@/models/layout'
-import { RequiredGraphConfig } from '@/models/RunGraph'
+import { RequiredGraphConfig, RunGraphData } from '@/models/RunGraph'
 import { ViewportDateRange } from '@/models/viewport'
 import { Fonts } from '@/objects/fonts'
 import { VisibilityCull } from '@/services/visibilityCull'
@@ -28,6 +28,8 @@ type Events = {
   cullCreated: Cull,
   labelCullCreated: VisibilityCull,
   edgeCullCreated: VisibilityCull,
+  runDataCreated: RunGraphData,
+  runDataUpdated: RunGraphData,
 }
 
 export type EventKey = keyof Events

src/objects/nodes.ts

@@ -1,9 +1,12 @@
 import { Ticker } from 'pixi.js'
 import { NodesContainer, nodesContainerFactory } from '@/factories/nodes'
+import { RunGraphData } from '@/models/RunGraph'
 import { waitForConfig } from '@/objects/config'
+import { EventKey, emitter, waitForEvent } from '@/objects/events'
 import { centerViewport, waitForViewport } from '@/objects/viewport'
 
 let nodes: NodesContainer | null = null
+let data: RunGraphData | null = null
 
 export async function startNodes(): Promise<void> {
   const viewport = await waitForViewport()
@@ -18,11 +21,29 @@ export async function startNodes(): Promise<void> {
   nodes.render()
 
   nodes.element.once('rendered', center)
+  nodes.element.on('fetched', onFetched)
 }
 
 export function stopNodes(): void {
   nodes?.stop()
   nodes = null
+  data = null
+}
+
+export async function waitForRunData(): Promise<RunGraphData> {
+  if (data) {
+    return data
+  }
+
+  return await waitForEvent('runDataCreated')
+}
+
+function onFetched(value: RunGraphData): void {
+  const event: EventKey = data ? 'runDataUpdated' : 'runDataCreated'
+
+  data = value
+
+  emitter.emit(event, data)
 }
 
 function center(): void {

src/objects/scale.ts

@@ -1,18 +1,16 @@
 import { HorizontalScale, horizontalScaleFactory } from '@/factories/position'
 import { horizontalSettingsFactory } from '@/factories/settings'
-import { waitForConfig } from '@/objects/config'
-import { emitter, waitForEvent } from '@/objects/events'
+import { EventKey, emitter, waitForEvent } from '@/objects/events'
+import { waitForRunData } from '@/objects/nodes'
 
 let scale: HorizontalScale | null = null
 
 export async function startScale(): Promise<void> {
-  const config = await waitForConfig()
-  const data = await config.fetch(config.runId)
-  const settings = await horizontalSettingsFactory(data.start_time)
+  const data = await waitForRunData()
 
-  scale = await horizontalScaleFactory(settings)
+  setHorizontalScale(data.start_time)
 
-  emitter.emit('scaleCreated', scale)
+  emitter.on('layoutUpdated', () => setHorizontalScale(data.start_time))
 }
 
 export function stopScale(): void {
@@ -26,4 +24,13 @@ export async function waitForScale(): Promise<HorizontalScale> {
   }
 
   return await waitForEvent('scaleCreated')
+}
+
+function setHorizontalScale(startTime: Date): void {
+  const event: EventKey = scale ? 'scaleUpdated' : 'scaleCreated'
+  const settings = horizontalSettingsFactory(startTime)
+
+  scale = horizontalScaleFactory(settings)
+
+  emitter.emit(event, scale)
 }

src/objects/viewport.ts

@@ -40,6 +40,7 @@ export async function startViewport(props: RunGraphProps): Promise<void> {
 
   emitter.emit('viewportCreated', viewport)
   emitter.on('applicationResized', resizeViewport)
+  emitter.on('scaleUpdated', () => updateViewportDateRange())
 
   watchVisibleDateRange(props)
   startViewportDateRange()

src/pixi.d.ts

@@ -1,6 +1,9 @@
+import { RunGraphData } from '@/models'
+
 declare namespace GlobalMixins {
   interface DisplayObjectEvents {
     resized: [{ height: number, width: number }],
     rendered: [],
+    fetched: [RunGraphData],
   }
 }