Enhancement: adaptive artifacts placement

src/factories/flowRunArtifact.ts

@@ -4,6 +4,7 @@ import { ArtifactSelection, ArtifactsSelection, RunGraphArtifact } from '@/model
 import { waitForApplication, waitForViewport } from '@/objects'
 import { waitForConfig } from '@/objects/config'
 import { emitter } from '@/objects/events'
+import { waitForRunEvents } from '@/objects/flowRunEvents'
 import { waitForScale } from '@/objects/scale'
 import { selectItem } from '@/objects/selection'
 import { layout, waitForSettings } from '@/objects/settings'
@@ -28,8 +29,12 @@ export async function flowRunArtifactFactory<T extends ArtifactFactoryOptions>(o
   const viewport = await waitForViewport()
   const config = await waitForConfig()
   const settings = await waitForSettings()
+  const events = await waitForRunEvents()
+
   let scale = await waitForScale()
 
+  let flowHasEvents = events && events.length > 0
+
   const factory = await getFactory() as FactoryType<T>
 
   factory.element.on('click', clickEvent => {
@@ -58,6 +63,14 @@ export async function flowRunArtifactFactory<T extends ArtifactFactoryOptions>(o
     updatePosition()
   })
   emitter.on('viewportMoved', () => updatePosition())
+  emitter.on('eventDataCreated', (data) => {
+    flowHasEvents = data.length > 0
+    updatePosition()
+  })
+  emitter.on('eventDataUpdated', (data) => {
+    flowHasEvents = data.length > 0
+    updatePosition()
+  })
 
   async function render(props?: RenderPropsType<T>): Promise<void> {
     await factory.render(props)
@@ -81,7 +94,7 @@ export async function flowRunArtifactFactory<T extends ArtifactFactoryOptions>(o
 
     const selected = factory.getSelected()
     const { element } = factory
-    const { eventTargetSize } = config.styles
+    const { eventTargetSize, flowStateSelectedBarHeight } = config.styles
 
     let selectedOffset = 0
 
@@ -94,7 +107,7 @@ export async function flowRunArtifactFactory<T extends ArtifactFactoryOptions>(o
     const centeredX = x - (element.width - selectedOffset) / 2
     const y = application.screen.height
       - (element.height - selectedOffset)
-      - eventTargetSize
+      - (flowHasEvents ? eventTargetSize : flowStateSelectedBarHeight)
 
     element.position.set(centeredX, y)
   }

src/factories/nodeFlowRun.ts

@@ -33,6 +33,9 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
   const { element: nodesEvents, render: renderNodesEvents, update: updateNodesEvents } = await runEventsFactory({ parentStartDate: node.start_time })
   const { element: nodesArtifacts, render: renderNodesArtifacts, update: updateNodesArtifacts } = await runArtifactsFactory({ parentStartDate: node.start_time })
 
+  let hasEvents = false
+  let hasArtifacts = false
+
   container.sortableChildren = true
   bar.zIndex = 2
   label.zIndex = 3
@@ -48,6 +51,8 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
   border.cursor = 'default'
 
   const { start: startData, stop: stopData } = await dataFactory(node.id, data => {
+    hasArtifacts = !!data.artifacts && data.artifacts.length > 0
+
     renderNodes(data)
     renderStates(data.states)
     renderArtifacts(data.artifacts)
@@ -61,6 +66,8 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
     }
   }
   const { start: startEventsData, stop: stopEventsData } = await eventDataFactory(node.id, data => {
+    hasEvents = data.length > 0
+
     renderEvents(data)
   }, getEventFactoryOptions)
 
@@ -149,9 +156,11 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
   }
 
   async function renderArtifacts(data?: RunGraphArtifact[]): Promise<void> {
+    const { eventTargetSize, flowStateSelectedBarHeight } = config.styles
     const { height } = getSize()
 
-    const y = height - config.styles.eventTargetSize
+    const y = height - (hasEvents ? eventTargetSize : flowStateSelectedBarHeight)
+
     nodesArtifacts.position = { x: 0, y }
 
     if (data) {
@@ -256,10 +265,11 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
       artifactIconSize,
     } = config.styles
 
-    const artifactsHeight = artifactIconSize + artifactPaddingY * 2
+    const artifactsHeight = hasArtifacts ? artifactIconSize + artifactPaddingY * 2 : 0
+    const eventsHeight = hasEvents ? eventTargetSize : 0
 
     const nodesHeight = isOpen
-      ? nodes.height + artifactsHeight + eventTargetSize + nodesPadding * 2
+      ? nodes.height + artifactsHeight + eventsHeight + nodesPadding * 2
       : 0
     const nodesWidth = isOpen ? nodes.width : 0
     const flowRunNodeHeight = nodeHeight

src/objects/flowRunEvents.ts

@@ -4,7 +4,7 @@ import { runEventsFactory } from '@/factories/runEvents'
 import { RunGraphEvent } from '@/models'
 import { waitForApplication } from '@/objects/application'
 import { waitForConfig } from '@/objects/config'
-import { EventKey, emitter } from '@/objects/events'
+import { EventKey, emitter, waitForEvent } from '@/objects/events'
 import { waitForSettings } from '@/objects/settings'
 
 let stopEventData: (() => void) | null = null
@@ -45,4 +45,12 @@ export function stopFlowRunEvents(): void {
   stopEventData?.()
   stopEventData = null
   rootGraphEvents = null
+}
+
+export async function waitForRunEvents(): Promise<RunGraphEvent[] | null> {
+  if (rootGraphEvents) {
+    return rootGraphEvents
+  }
+
+  return await waitForEvent('eventDataCreated')
 }