44 ExecutionError ,
55 ExecutionParameterResult ,
66 ExecutionResult ,
7- Flow , FunctionDefinition ,
7+ Flow ,
8+ FunctionDefinition ,
89 Maybe ,
910 Namespace ,
1011 NamespaceProject ,
@@ -24,6 +25,10 @@ import {
2425 MenuItem ,
2526 MenuPortal ,
2627 MenuTrigger ,
28+ ScrollArea ,
29+ ScrollAreaScrollbar ,
30+ ScrollAreaThumb ,
31+ ScrollAreaViewport ,
2732 Spacing ,
2833 Text ,
2934 Tooltip ,
@@ -274,11 +279,11 @@ export const FlowExecutionResultView: React.FC = () => {
274279 item . type === "node" ? item ?. data ?. payload ?. functionDefinition ?. displayIcon : item . type === "function" ? item ?. data ?. payload ?. displayIcon : item ?. data ?. payload ?. type ?. displayIcon ,
275280 )
276281
277- return < Tooltip key = { item . id } >
282+ return < Tooltip key = { item . id } delayDuration = { 700 } >
278283 < TooltipTrigger asChild >
279284 < Flex align = { "center" } justify = { "start" } w = { "100%" } h = { "100%" }
280285 style = { { cursor : "pointer" } } >
281- < Card color = { "primary" }
286+ < Card color = { item . data . error ? "error" : "primary" }
282287 className = { `d-flow-node` }
283288 paddingSize = { "xs" }
284289 py = { "0.35" }
@@ -316,80 +321,112 @@ export const FlowExecutionResultView: React.FC = () => {
316321 </ TooltipTrigger >
317322 < TooltipPortal >
318323 < TooltipContent forceMount sideOffset = { 8 } align = { "start" }
319- maw = { "300px" } >
320- < Flex align = { "center" } justify = { "space-between" }
321- style = { { gap : "0.7rem" } } >
322- < Flex align = { "center" } style = { { gap : "0.35rem" } } >
323- < DisplayIcon size = { 16 }
324- style = { {
325- minWidth : "16px" ,
326- minHeight : "16px" ,
327- } }
328- color = { hashToColor ( item ?. data ?. payload ?. id ?? "" ) } />
329- < Text size = { "md" }
330- style = { {
331- overflow : "hidden" ,
332- position : "relative"
333- } } >
334- { item ?. data ?. displayMessage }
335- </ Text >
336- </ Flex >
337- < Text size = { "sm" } hierarchy = { "tertiary" } >
338- { getRelativeValue ( item . end - item . start ) }
339- </ Text >
340- </ Flex >
341- < Spacing spacing = { "xs" } />
324+ maw = { "300px" }
325+ mah = { "var(--radix-popper-available-height)" } >
326+ < ScrollArea h = { "var(--radix-popper-available-height)" } >
327+ < ScrollAreaViewport >
328+ < div >
342329
343- < >
344- < Text size = { "md" } >
345- { item . type === "node" || item . type === "function" ? "Parameters" : "Input" }
346- </ Text >
347- { item . type === "node" || item . type === "function" ? item . data . input ?. map ( ( input : ExecutionParameterResult , index : number ) => {
330+ < Flex align = { "center" } justify = { "space-between" }
331+ style = { { gap : "0.7rem" } } >
332+ < Flex align = { "center" } style = { { gap : "0.35rem" } } >
333+ < DisplayIcon size = { 16 }
334+ style = { {
335+ minWidth : "16px" ,
336+ minHeight : "16px" ,
337+ } }
338+ color = { hashToColor ( item ?. data ?. payload ?. id ?? "" ) } />
339+ < Text size = { "md" }
340+ style = { {
341+ overflow : "hidden" ,
342+ position : "relative"
343+ } } >
344+ { item ?. data ?. displayMessage }
345+ </ Text >
346+ </ Flex >
347+ < Text size = { "sm" } hierarchy = { "tertiary" } >
348+ { getRelativeValue ( item . end - item . start ) }
349+ </ Text >
350+ </ Flex >
351+ < Spacing spacing = { "xs" } />
348352
349- //TODO: for item.type === function this is wrong
350- const parameter : ParameterDefinition = item ?. data ?. payload ?. functionDefinition ?. parameterDefinitions ?. nodes ?. [ index ]
353+ < >
354+ < Text size = { "md" } >
355+ { item . type === "node" || item . type === "function" ? "Parameters" : "Input" }
356+ </ Text >
357+ { item . type === "node" || item . type === "function" ? item . data . input ?. map ( ( input : ExecutionParameterResult , index : number ) => {
351358
352- return < div key = { input . id } >
353- < Text size = { "sm" } hierarchy = { "tertiary" } >
354- { parameter ?. names ?. [ 0 ] ?. content }
355- </ Text >
356- < Editor readonly showTooltips = { false }
357- language = { "json" }
358- initialValue = { input . value }
359- customSuggestionComponent = { false }
360- basicSetup = { {
361- highlightActiveLine : false ,
362- highlightActiveLineGutter : false ,
363- } } />
364- </ div >
359+ //TODO: for item.type === function this is wrong
360+ const parameter : ParameterDefinition = item ?. data ?. payload ?. functionDefinition ?. parameterDefinitions ?. nodes ?. [ index ]
365361
366- } ) : item . type === "trigger" ? (
367- < Editor readonly showTooltips = { false } language = { "json" }
368- initialValue = { item . data . input }
369- customSuggestionComponent = { false }
370- basicSetup = { {
371- highlightActiveLine : false ,
372- highlightActiveLineGutter : false ,
373- } } />
374- ) : null }
375- </ >
362+ return < div key = { input . id } >
363+ < Text size = { "sm" }
364+ hierarchy = { "tertiary" } >
365+ { parameter ?. names ?. [ 0 ] ?. content }
366+ </ Text >
367+ < Editor readonly showTooltips = { false }
368+ language = { "json" }
369+ initialValue = { input . value }
370+ customSuggestionComponent = { false }
371+ basicSetup = { {
372+ highlightActiveLine : false ,
373+ highlightActiveLineGutter : false ,
374+ } } />
375+ </ div >
376376
377- < Spacing spacing = { "xs" } />
378- {
379- item . data . success && (
380- < div >
381- < Text size = { "md" } >
382- Result
383- </ Text >
384- < Editor readonly showTooltips = { false } language = { "json" }
385- initialValue = { item . data . success }
386- basicSetup = { {
387- highlightActiveLine : false ,
388- highlightActiveLineGutter : false ,
389- } } />
377+ } ) : item . type === "trigger" ? (
378+ < Editor readonly showTooltips = { false }
379+ language = { "json" }
380+ initialValue = { item . data . input }
381+ customSuggestionComponent = { false }
382+ basicSetup = { {
383+ highlightActiveLine : false ,
384+ highlightActiveLineGutter : false ,
385+ } } />
386+ ) : null }
387+ {
388+ item . data . error ? (
389+ < >
390+ < Text size = { "md" } >
391+ Error
392+ </ Text >
393+ < Editor readonly
394+ showTooltips = { false }
395+ language = { "json" }
396+ initialValue = { item . data . error }
397+ customSuggestionComponent = { false }
398+ basicSetup = { {
399+ highlightActiveLine : false ,
400+ highlightActiveLineGutter : false ,
401+ } } />
402+ </ >
403+ ) : null
404+ }
405+ </ >
406+
407+ < Spacing spacing = { "xs" } />
408+ {
409+ item . data . success && (
410+ < div >
411+ < Text size = { "md" } >
412+ Result
413+ </ Text >
414+ < Editor readonly showTooltips = { false }
415+ language = { "json" }
416+ initialValue = { item . data . success }
417+ basicSetup = { {
418+ highlightActiveLine : false ,
419+ highlightActiveLineGutter : false ,
420+ } } />
421+ </ div >
422+ )
423+ }
390424 </ div >
391- )
392- }
425+ </ ScrollAreaViewport >
426+ < ScrollAreaScrollbar orientation = { "vertical" } >
427+ < ScrollAreaThumb />
428+ </ ScrollAreaScrollbar >
429+ </ ScrollArea >
393430 </ TooltipContent >
394431 </ TooltipPortal >
395432 </ Tooltip >
0 commit comments