Skip to content

Commit

Permalink
fix(ui): Fix overflow and scroll behavior in events sidebar (#798)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daryllimyt
daryllimyt authored Jan 25, 2025
1 parent d4c25cc commit 8c3a27c
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 109 deletions.
101 changes: 42 additions & 59 deletions frontend/src/components/workbench/events/events-selected-action.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,16 @@ export function ActionEvent({
)
}
return (
<ActionEventDetails
actionId={node.id}
workflowId={workflowId}
workspaceId={workspaceId}
status={execution.status}
events={execution.events}
type={type}
/>
<div className="p-4">
<ActionEventDetails
actionId={node.id}
workflowId={workflowId}
workspaceId={workspaceId}
status={execution.status}
events={execution.events}
type={type}
/>
</div>
)
}
export function ActionEventDetails({
Expand Down Expand Up @@ -125,18 +127,12 @@ export function ActionEventDetails({
}
const actionEvent = actionEventsForRef[0]
return (
<div className="space-y-4">
<div className="space-y-2 p-4">
<JsonViewWithControls
src={
type === "input"
? actionEvent.action_input
: actionEvent.action_result
}
defaultExpanded={true}
/>
</div>
</div>
<JsonViewWithControls
src={
type === "input" ? actionEvent.action_input : actionEvent.action_result
}
defaultExpanded={true}
/>
)
}

Expand Down Expand Up @@ -194,10 +190,12 @@ export function JsonViewWithControls({
? flattenObject(src as Record<string, unknown>)
: src

console.log(flattenedSrc)
console.log(src)
const tabItems = [
{ value: "flat", label: "Flat", src: flattenedSrc },
{ value: "nested", label: "Nested", src: src },
]
return (
<div className="space-y-2">
<div className="w-full space-y-2 overflow-x-auto">
<div className="flex w-full items-center gap-4">
<span className="text-xs font-semibold text-foreground/50">
{title}
Expand All @@ -215,44 +213,29 @@ export function JsonViewWithControls({
</div>
<Tabs defaultValue="flat">
<TabsList className="h-7 text-xs">
<TabsTrigger value="flat" className="text-xs">
Flat
</TabsTrigger>
<TabsTrigger value="nested" className="text-xs">
Nested
</TabsTrigger>
{tabItems.map(({ value, label }) => (
<TabsTrigger key={value} value={value} className="text-xs">
{label}
</TabsTrigger>
))}
</TabsList>

<TabsContent
value="flat"
className="rounded-md border bg-muted-foreground/5 p-4"
>
<JsonView
collapsed={!isExpanded}
displaySize
enableClipboard
src={flattenedSrc}
className="text-sm"
theme="atom"
customizeCopy={(node) => {
console.log("COPY", node)
return node
}}
/>
</TabsContent>
<TabsContent
value="nested"
className="rounded-md border bg-muted-foreground/5 p-4"
>
<JsonView
collapsed={!isExpanded}
displaySize
enableClipboard
src={src}
className="text-sm"
theme="atom"
/>
</TabsContent>
{tabItems.map(({ value, src: source }) => (
<TabsContent
key={value}
value={value}
className="rounded-md border bg-muted-foreground/5 p-4"
>
<JsonView
collapsed={!isExpanded}
displaySize
enableClipboard
src={source}
className="w-full overflow-x-scroll text-wrap text-sm"
theme="atom"
/>
</TabsContent>
))}
</Tabs>
</div>
)
Expand Down
115 changes: 69 additions & 46 deletions frontend/src/components/workbench/events/events-sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
useCompactWorkflowExecution,
useManualWorkflowExecution,
} from "@/lib/hooks"
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CenteredSpinner } from "@/components/loading/spinner"
Expand Down Expand Up @@ -123,54 +124,76 @@ function WorkbenchSidebarEventsList({
/>
)

const tabItems = [
{
value: "workflow-events",
label: "Events",
icon: CalendarSearchIcon,
content: (
<>
<WorkflowEventsHeader execution={execution} />
<WorkflowEvents events={execution.events} />
</>
),
},
{
value: "action-input",
label: "Input",
icon: FileInputIcon,
content: <ActionEvent execution={execution} type="input" />,
},
{
value: "action-result",
label: "Result",
icon: ShapesIcon,
content: <ActionEvent execution={execution} type="result" />,
},
]
return (
<Tabs
value={activeTab}
onValueChange={(value: string) => {
if (sidebarRef.current?.setActiveTab) {
sidebarRef.current.setActiveTab(value as EventsSidebarTabs)
}
}}
className="flex size-full flex-col"
>
<div className="w-full grow">
<div className="mt-2 flex items-center justify-start">
<TabsList className="h-8 justify-start rounded-none bg-transparent p-0">
<TabsTrigger
className="flex h-full min-w-28 items-center justify-center rounded-none border-b-2 border-transparent py-0 text-xs data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
value="workflow-events"
>
<CalendarSearchIcon className="mr-2 size-4" />
<span>Events</span>
</TabsTrigger>
<TabsTrigger
className="h-full min-w-28 rounded-none border-b-2 border-transparent py-0 text-xs data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
value="action-input"
>
<FileInputIcon className="mr-2 size-4" />
<span>Input</span>
</TabsTrigger>
<TabsTrigger
className="h-full min-w-28 rounded-none border-b-2 border-transparent py-0 text-xs data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
value="action-result"
>
<ShapesIcon className="mr-2 size-4" />
<span>Result</span>
</TabsTrigger>
</TabsList>
<div className="h-full">
<Tabs
value={activeTab}
onValueChange={(value: string) => {
if (sidebarRef.current?.setActiveTab) {
sidebarRef.current.setActiveTab(value as EventsSidebarTabs)
}
}}
className="flex size-full flex-col"
>
<div className="sticky top-0 z-10 mt-2 bg-background">
<ScrollArea className="w-full whitespace-nowrap rounded-md">
<TabsList className="inline-flex h-8 w-full items-center justify-start bg-transparent p-0">
{tabItems.map((tab) => (
<TabsTrigger
key={tab.value}
value={tab.value}
className="flex h-full min-w-28 items-center justify-center rounded-none border-b-2 border-transparent py-0 text-xs data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
>
<tab.icon className="mr-2 size-4" />
<span>{tab.label}</span>
</TabsTrigger>
))}
</TabsList>
<ScrollBar orientation="horizontal" className="invisible" />
</ScrollArea>
</div>
<Separator />
<TabsContent value="workflow-events">
<WorkflowEventsHeader execution={execution} />
<WorkflowEvents events={execution.events} />
</TabsContent>
<TabsContent value="action-input">
<ActionEvent execution={execution} type="input" />
</TabsContent>
<TabsContent value="action-result">
<ActionEvent execution={execution} type="result" />
</TabsContent>
</div>
</Tabs>
<ScrollArea className="!m-0 flex-1 rounded-md p-0">
<div className="overflow-y-auto">
{tabItems.map((tab) => (
<TabsContent
key={tab.value}
value={tab.value}
className="m-0 size-full min-w-[200px] p-0"
>
{tab.content}
</TabsContent>
))}
</div>
<ScrollBar orientation="horizontal" />
<ScrollBar orientation="vertical" />
</ScrollArea>
</Tabs>
</div>
)
}
6 changes: 2 additions & 4 deletions frontend/src/components/workbench/workbench.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,9 @@ export function Workbench({ defaultLayout = [0, 68, 32] }: WorkbenchProps) {
collapsible={true}
minSize={20}
maxSize={40}
className="flex h-full flex-col"
className="h-full"
>
<div className="relative flex-1">
<WorkbenchSidebarEvents />
</div>
<WorkbenchSidebarEvents />
</ResizablePanel>
<TooltipProvider>
<Tooltip>
Expand Down

0 comments on commit 8c3a27c

Please sign in to comment.