From 9f9289d04d2d36924b0d01c83b05fd01c2008cf8 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Sat, 16 May 2026 18:55:53 +0000 Subject: [PATCH] feat: show args form in compact pipeline preview when script has inputs AssetGraphDetailsPane keeps the compact (hideArgs) preview but, via a new previewPanel.argsAboveLogs flag, renders a compact SchemaForm between the floating Test button and the logs/result panel when the script declares inputs (e.g. a partitioned script needing a `partition` arg). The preview pane also grows ~18pts so the args form doesn't shrink logs/result. Co-Authored-By: Claude Opus 4.7 --- .../src/lib/components/ScriptEditor.svelte | 132 ++++++++++++------ .../AssetGraph/AssetGraphDetailsPane.svelte | 13 +- frontend/src/lib/components/custom_ui.ts | 6 + 3 files changed, 107 insertions(+), 44 deletions(-) diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte index 5da72898dc..d9bd9e5cb7 100644 --- a/frontend/src/lib/components/ScriptEditor.svelte +++ b/frontend/src/lib/components/ScriptEditor.svelte @@ -1349,6 +1349,36 @@ } } + // When the compact preview shows a SchemaForm above the logs + // (`argsAboveLogs`), give the preview pane extra height so the args + // form doesn't shrink the logs/result area. This is a deliberate + // $effect (not $derived): the schema loads async and the same + // code/test sizes are two-way bound to the splitpane drag handle, so + // the offset is folded into the user-resizable state once on the + // has-args transition — manual resizing still works afterwards. + let hasArgsAboveLogs = $derived( + customUi?.previewPanel?.argsAboveLogs === true && + !!schema?.properties && + Object.keys(schema.properties).length > 0 + ) + let argsHeightBonus = $state(0) + $effect(() => { + const want = hasArgsAboveLogs ? 18 : 0 + untrack(() => { + const delta = want - argsHeightBonus + if (delta === 0) return + if (testPanelSize > 0) { + testPanelSize += delta + codePanelSize -= delta + } else { + // preview collapsed — bake the bonus into the size it + // restores to so it lands correctly on expand. + storedTestPanelSize += delta + } + argsHeightBonus = want + }) + }) + function getError(job: Job | undefined) { if (job != undefined && job.type === 'CompletedJob' && !job.success) { return getStringError(job.result) @@ -1682,7 +1712,7 @@ now positioned inside the panel — `top-1` keeps it visually pinned to the top edge without relying on cross-browser overflow behaviour. --> -
+
{#if testIsLoading} {/if}
- { - historyTabActive = tab === 'history' - if (historyTabActive) { - loadPastTests() - } - }} - previewIsLoading={debugMode - ? $debugState.running && !$debugState.stopped - : testIsLoading} - {editor} - {diffEditor} - args={activeModuleTab !== null ? testPanelArgs : args} - {showCaptures} - customUi={customUi?.previewPanel} - showCustomResultPanel={showDebugPanel} - > - {#if scriptProgress && !debugMode} - - {/if} - + {#if customUi?.previewPanel?.argsAboveLogs && schema?.properties && Object.keys(schema.properties).length > 0} +
+ {#key argsRender} + + {/key} +
+ {/if} +
+ { + historyTabActive = tab === 'history' + if (historyTabActive) { + loadPastTests() + } + }} + previewIsLoading={debugMode + ? $debugState.running && !$debugState.stopped + : testIsLoading} + {editor} + {diffEditor} + args={activeModuleTab !== null ? testPanelArgs : args} + {showCaptures} + customUi={customUi?.previewPanel} + showCustomResultPanel={showDebugPanel} + > + {#if scriptProgress && !debugMode} + + {/if} + +
{:else} {#key previewLayout} diff --git a/frontend/src/lib/components/assets/AssetGraph/AssetGraphDetailsPane.svelte b/frontend/src/lib/components/assets/AssetGraph/AssetGraphDetailsPane.svelte index 7c39d7f81a..835aa6c5f5 100644 --- a/frontend/src/lib/components/assets/AssetGraph/AssetGraphDetailsPane.svelte +++ b/frontend/src/lib/components/assets/AssetGraph/AssetGraphDetailsPane.svelte @@ -801,13 +801,16 @@ disableTracing: true, disableTriggerCaptures: true, disableJsonView: true, - // Pipeline scripts in this view are dispatched without - // args (the page's runScriptByPath / runScriptPreview - // passes `{}`), so the SchemaForm column is dead - // space. Drop it, render the LogPanel full-width with + // Drop the full args column (most pipeline scripts take + // no inputs), render the LogPanel full-width with // logs|result side by side, and float the Test/Cancel - // button onto the editor band above. + // button onto the editor band above. But when the + // script *does* declare inputs (e.g. a partitioned + // script that needs a `partition` arg to run), show a + // compact SchemaForm between the Test button and the + // logs so the run can actually be parameterised. hideArgs: true, + argsAboveLogs: true, logsResultSideBySide: true, downstreamSubscribers } diff --git a/frontend/src/lib/components/custom_ui.ts b/frontend/src/lib/components/custom_ui.ts index 3cd080d067..05c55da9bf 100644 --- a/frontend/src/lib/components/custom_ui.ts +++ b/frontend/src/lib/components/custom_ui.ts @@ -78,6 +78,12 @@ export type PreviewPanelUi = { // downstream" that lets the asset-dispatch hook fire downstream jobs. // Undefined or 0 → plain Test button (no cascade UI). downstreamSubscribers?: number + // Pairs with `hideArgs`: still hide the full args column, but when the + // script actually declares inputs render a compact SchemaForm between + // the floating Test button and the logs/result panel (e.g. a + // partitioned pipeline script that needs a `partition` arg to run). + // No-op when the script has no input properties. + argsAboveLogs?: boolean } export type EditorBarUi = {