Merge pull request #136 from PrefectHQ/optimize-time-scale

Enhancement: Optimize time scale

src/FlowRunTimeline.vue

@@ -7,6 +7,7 @@
 
 <script lang="ts" setup>
   import { Cull } from '@pixi-essentials/cull'
+  import { max } from 'date-fns'
   import type { Viewport } from 'pixi-viewport'
   import { Application } from 'pixi.js'
   import {
@@ -29,7 +30,6 @@
     InitTimelineScaleProps,
     GraphState,
     NodeSelectionEvent,
-    hasStartAndEndDates,
     TimelineVisibleDateRange
   } from '@/models'
   import {
@@ -215,22 +215,10 @@
 
   function initTimeScaleProps(): void {
     const minimumTimeSpan = 1000 * 60
+    const { min: minDate, max: maxDate, span } = getDateBounds(props.graphData, minimumTimeSpan, isRunning.value)
 
-    const dates = props.graphData
-      .filter(hasStartAndEndDates)
-      .map(({ start, end }) => ({ start, end }))
-
-    if (isRunning.value) {
-      dates.push({
-        start: new Date(),
-        end: new Date(),
-      })
-    }
-
-    const { min, max, span } = getDateBounds(dates, minimumTimeSpan)
-
-    minimumStartDate = min
-    maximumEndDate.value = max
+    minimumStartDate = minDate
+    maximumEndDate.value = maxDate
     initialOverallTimeSpan = span
 
     graphXDomain = determineGraphXDomain()

src/models/FlowRunTimeline.ts

@@ -14,13 +14,6 @@ export type GraphTimelineNode = {
   subFlowRunId?: string,
 }
 
-export function hasStartAndEndDates(node: GraphTimelineNode): node is GraphTimelineNode & {
-  start: Date,
-  end: Date,
-} {
-  return !!node.start && !!node.end
-}
-
 export type InitTimelineScaleProps = {
   minimumStartTime: number,
   graphXDomain: number,

src/utilities/time.ts

@@ -1,3 +1,5 @@
+import { GraphTimelineNode } from '..'
+
 export const intervals = {
   year: 31536000,
   day: 86400,
@@ -88,41 +90,41 @@ export function formatDate(date: Date): string {
 }
 
 export function getDateBounds(
-  datesArray: { start: Date, end: Date | null }[],
-  minimumTimeSpan?: number,
+  data: GraphTimelineNode[],
+  minimumTimeSpan: number = 0,
+  isRunning: boolean = false,
 ): { min: Date, max: Date, span: number } {
-  let min: Date | undefined
-  let max: Date | undefined
-
-  datesArray.forEach((dates) => {
-    if (
-      min === undefined
-        || min > dates.start
-        || isNaN(dates.start.getDate())
-    ) {
-      min = dates.start
+
+  const defaultMaxEndTime = isRunning ? new Date().getTime() : null
+
+  const [minStartTime, maxEndTime] = data.reduce<[number | null, number | null]>(([min, max], { start, end }) => {
+    const startTime = start?.getTime() ?? null
+    const endTime = end?.getTime() ?? null
+
+    if (startTime && min) {
+      min = Math.min(min, startTime)
     }
 
-    if (
-      dates.end !== null
-      && (
-        max === undefined
-        || max < dates.end
-        || isNaN(dates.end.getDate())
-      )
-    ) {
-      max = dates.end
+    if (endTime && max) {
+      max = Math.max(max, endTime)
     }
-  })
 
-  min = min ?? new Date()
-  max = max ?? new Date(min.getTime() + (minimumTimeSpan ?? 0))
-  const timeSpan = max.getTime() - min.getTime()
+    return [min ?? startTime, max ?? endTime]
+  }, [null, defaultMaxEndTime])
+
+  const min = minStartTime ? new Date(minStartTime) : new Date()
+  let max = maxEndTime ? new Date(maxEndTime) : new Date()
+  let span = max.getTime() - min.getTime()
+
+  if (span < minimumTimeSpan) {
+    max = new Date(min.getTime() + minimumTimeSpan)
+    span = minimumTimeSpan
+  }
 
   return {
     min,
     max,
-    span: minimumTimeSpan && timeSpan < minimumTimeSpan ? minimumTimeSpan : timeSpan,
+    span,
   }
 }