Merge pull request #233 from PrefectHQ/y-axis

Add default config values and add real range for y axis

package.json

@@ -46,6 +46,7 @@
     "eslint": "8.50.0",
     "postcss": "8.4.19",
     "tailwindcss": "3.3.3",
+    "ts-essentials": "^9.4.1",
     "tsc-alias": "1.8.8",
     "typescript": "5.2.2",
     "vite": "4.4.9",

src/models/RunGraph.ts

@@ -1,4 +1,5 @@
 import { ColorSource } from 'pixi.js'
+import { DeepRequired } from 'ts-essentials'
 import { StateType } from '@/models/states'
 
 export type RunGraphData = {
@@ -36,15 +37,22 @@ export function isRunGraphNodeType(value: unknown): value is RunGraphNodeKind {
 export type RunGraphFetch = (runId: string) => RunGraphData | Promise<RunGraphData>
 
 export type RunGraphNodeStyles = {
-  background: ColorSource,
+  background?: ColorSource,
 }
 
 export type RunGraphStyles = {
-  node: (node: RunGraphNode) => RunGraphNodeStyles,
+  nodeHeight?: number,
+  node?: (node: RunGraphNode) => RunGraphNodeStyles,
 }
 
 export type RunGraphConfig = {
   runId: string,
   fetch: RunGraphFetch,
-  styles: RunGraphStyles,
+  styles?: RunGraphStyles,
+}
+
+export type RequiredGraphConfig = DeepRequired<RunGraphConfig> & {
+  styles: {
+    node: (node: RunGraphNode) => Required<RunGraphNodeStyles>,
+  },
 }

src/objects/config.ts

@@ -1,9 +1,32 @@
 import { watch } from 'vue'
-import { RunGraphConfig } from '@/models/RunGraph'
+import { RequiredGraphConfig, RunGraphConfig } from '@/models/RunGraph'
 import { EventKey, emitter, waitForEvent } from '@/objects/events'
 import { waitForScope } from '@/objects/scope'
 
-let config: RunGraphConfig | null = null
+let config: RequiredGraphConfig | null = null
+
+const defaults = {
+  styles: {
+    nodeHeight: 20,
+    node: () => ({
+      background: '#ffffff',
+    }),
+  },
+} as const satisfies Omit<RequiredGraphConfig, 'runId' | 'fetch'>
+
+function withDefaults(config: RunGraphConfig): RequiredGraphConfig {
+  return {
+    runId: config.runId,
+    fetch: config.fetch,
+    styles: {
+      nodeHeight: config.styles?.nodeHeight ?? defaults.styles.nodeHeight,
+      node: node => ({
+        ...defaults.styles.node(),
+        ...config.styles?.node?.(node),
+      }),
+    },
+  }
+}
 
 export async function startConfig(runConfig: () => RunGraphConfig): Promise<void> {
   const scope = await waitForScope()
@@ -12,7 +35,7 @@ export async function startConfig(runConfig: () => RunGraphConfig): Promise<void
     watch(runConfig, value => {
       const event: EventKey = config ? 'configUpdated' : 'configCreated'
 
-      config = value
+      config = withDefaults(value)
 
       emitter.emit(event, config)
     }, { immediate: true })
@@ -23,7 +46,7 @@ export function stopConfig(): void {
   config = null
 }
 
-export async function waitForConfig(): Promise<RunGraphConfig> {
+export async function waitForConfig(): Promise<RequiredGraphConfig> {
   if (config) {
     return config
   }

src/objects/events.ts

@@ -2,7 +2,7 @@ import mitt from 'mitt'
 import { Viewport } from 'pixi-viewport'
 import { Application } from 'pixi.js'
 import { EffectScope } from 'vue'
-import { RunGraphConfig } from '@/models/RunGraph'
+import { RequiredGraphConfig } from '@/models/RunGraph'
 import { RunGraphDomain } from '@/objects/domain'
 import { Fonts } from '@/objects/fonts'
 import { Scales } from '@/objects/scales'
@@ -14,8 +14,8 @@ type Events = {
   stageCreated: HTMLDivElement,
   stageUpdated: HTMLDivElement,
   viewportCreated: Viewport,
-  configCreated: RunGraphConfig,
-  configUpdated: RunGraphConfig,
+  configCreated: RequiredGraphConfig,
+  configUpdated: RequiredGraphConfig,
   scopeCreated: EffectScope,
   domainCreated: RunGraphDomain,
   domainUpdated: RunGraphDomain,

src/objects/nodes.ts

@@ -17,7 +17,7 @@ type NodeSprites = {
 const nodes = new Map<string, NodeSprites>()
 
 // dummy offset for now
-let yOffset = 1
+let yOffset = 0
 
 export async function startNodes(): Promise<void> {
   const config = await waitForConfig()
@@ -29,7 +29,7 @@ export async function startNodes(): Promise<void> {
 
 export function stopNodes(): void {
   nodes.clear()
-  yOffset = 1
+  yOffset = 0
   stopData()
 }
 
@@ -49,11 +49,11 @@ async function renderNode(node: RunGraphNode): Promise<void> {
 
   const offset = yOffset++
   const x = scaleX(node.start_time)
-  const y = scaleY(offset * 5)
+  const y = scaleY(offset)
   const width = scaleX(node.end_time ?? new Date()) - x
-  const height = scaleY(offset * 5 + 4) - y
+  const height = scaleY(offset + 1) - y
 
-  graphics.lineStyle(1, 0x0, 1, 2)
+  // graphics.lineStyle(1, 0x0, 1, 2)
   graphics.beginFill(background)
   graphics.drawRoundedRect(0, 0, width, height, 4)
   graphics.endFill()

src/objects/scales.ts

@@ -1,4 +1,5 @@
 import { ScaleLinear, scaleLinear, scaleTime, ScaleTime } from 'd3'
+import { waitForConfig } from '@/objects/config'
 import { RunGraphDomain, waitForDomain } from '@/objects/domain'
 import { emitter, EventKey, waitForEvent } from '@/objects/events'
 import { waitForStage } from '@/objects/stage'
@@ -96,17 +97,27 @@ export function initialized(): boolean {
   return scaleXDomainInitialized && scaleXRangeInitialized && scaleYDomainInitialized && scaleYRangeInitialized
 }
 
-function setScaleRangesFromStage(stage: HTMLDivElement): void {
+async function setScaleRangesFromStage(stage: HTMLDivElement): Promise<void> {
+  const domainY = await getDomainYFromStage(stage)
+
   setScales({
     x: {
       range: [0, stage.clientWidth],
     },
     y: {
+      domain: domainY,
       range: [0, stage.clientHeight],
     },
   })
 }
 
+async function getDomainYFromStage(stage: HTMLDivElement): Promise<ScaleYDomain> {
+  const config = await waitForConfig()
+  const domainYEnd = stage.clientHeight / config.styles.nodeHeight
+
+  return [0, domainYEnd]
+}
+
 function setScaleDomain(domain: RunGraphDomain): void {
   setScales({ x: { domain } })
 }