diff --git a/frontend/src/lib/components/assets/AssetGraph/AssetGraphCanvas.svelte b/frontend/src/lib/components/assets/AssetGraph/AssetGraphCanvas.svelte index dd47a1f5c9..388c8fae30 100644 --- a/frontend/src/lib/components/assets/AssetGraph/AssetGraphCanvas.svelte +++ b/frontend/src/lib/components/assets/AssetGraph/AssetGraphCanvas.svelte @@ -22,7 +22,11 @@ import AssetGraphEdge from './AssetGraphEdge.svelte' import PanToNode from './PanToNode.svelte' import InitialFitView from './InitialFitView.svelte' - import { layoutAssetGraph, PIPELINE_NODE_EXTRA_ROW } from './assetGraphLayout' + import { + layoutAssetGraph, + PIPELINE_NODE_EXTRA_ROW, + PIPELINE_NODE_HEADER + } from './assetGraphLayout' import { assetsOnlyView, upstreamDeletion, @@ -1430,12 +1434,17 @@ : `${upstream.trigger.label}${upstream.trigger.draft ? ' · draft' : ''}`, runState: 'runState' in upstream && !!upstream.runState, chipIcon: foldedErrors > 0, - scriptChips: + header: 'runnableId' in upstream - ? 1 - : 'scripts' in upstream - ? (upstream.scripts?.length ?? 0) - : 0 + ? { label: upstream.summary || upstream.path, icons: 1 } + : 'scripts' in upstream && upstream.scripts?.length + ? upstream.scripts.length === 1 + ? { + label: upstream.scripts[0].summary || upstream.scripts[0].path, + icons: 1 + } + : { label: `${upstream.scripts.length} scripts`, icons: 2 } + : undefined }) : undefined return { @@ -1583,7 +1592,11 @@ ) }) let layoutPositions = $derived( - layoutAssetGraph(layoutInput, ADD_NODE_ID, assetsOnly ? PIPELINE_NODE_EXTRA_ROW : 0) + layoutAssetGraph( + layoutInput, + ADD_NODE_ID, + assetsOnly ? PIPELINE_NODE_EXTRA_ROW + PIPELINE_NODE_HEADER : 0 + ) ) /** Assets-only asset cards size to their text; every other node is `NODE.width`. */ diff --git a/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte b/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte index e7d80da8c1..9f2f486889 100644 --- a/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte +++ b/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte @@ -19,6 +19,7 @@ ShieldCheck, ShieldAlert, CheckCircle2, + ChevronDown, CircleSlash, Trash2, XCircle @@ -244,8 +245,7 @@ const n = upstream && 'scripts' in upstream ? upstream.scripts.length : 1 return `${n} script${n === 1 ? '' : 's'}` }) - const CHIP_CLASS = - 'shrink-0 h-5 min-w-5 rounded-md border bg-surface text-secondary hover:bg-surface-hover border-gray-300 dark:border-gray-600' + const HEADER_SELECTED = 'bg-surface-accent-selected hover:bg-surface-accent-selected text-accent' const CHIP_SELECTED = 'bg-surface-accent-selected border-border-selected hover:bg-surface-accent-selected text-accent' let producer = $derived(upstream && 'path' in upstream ? upstream : undefined) @@ -322,37 +322,72 @@ ) -{#snippet scriptChip(sc: { - path: string - summary?: string - language?: ScriptLang - unsaved?: boolean - selected?: boolean - onOpen: () => void -})} - +{#snippet scriptHeader()} + + {@const one = producer ?? (coProducers.length === 1 ? coProducers[0] : undefined)} + {@const headerClass = twMerge( + 'flex items-center gap-1.5 w-full min-w-0 px-2 text-3xs font-normal leading-none text-secondary hover:bg-surface-hover hover:text-primary' + )} + {#if one} + {@const isSelected = producer ? !!producer.selected : coSelected} + + {:else if coProducers.length > 1} + +