Skip to content

Commit

Permalink
fix(ui): Scrolling making workflow builder minify (#807)
Browse files Browse the repository at this point in the history
  • Loading branch information
topher-lo authored Jan 28, 2025
1 parent 45bc7de commit abbd0cb
Showing 1 changed file with 25 additions and 32 deletions.
57 changes: 25 additions & 32 deletions frontend/src/components/workbench/canvas/selector-node.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,17 @@ export default React.memo(function SelectorNode({
ref={inputRef}
className="!py-0 text-xs"
placeholder="Start typing to search for an action..."
onValueChange={(value) => setInputValue(value)}
onValueChange={(value) => {
// First update the value
setInputValue(value)
// Then force scroll to top of the list
requestAnimationFrame(() => {
const commandList = document.querySelector('[cmdk-list]')
if (commandList) {
commandList.scrollTop = 0
}
})
}}
autoFocus
/>
<CommandList className="border-b">
Expand All @@ -129,7 +139,7 @@ export default React.memo(function SelectorNode({
<Handle
type="target"
position={targetPosition ?? Position.Top}
isConnectable={false} // Prevent initiating a connection from the selector node
isConnectable={false}
className={cn(
"left-1/2 !size-8 !-translate-x-1/2 !border-none !bg-transparent"
)}
Expand All @@ -147,21 +157,12 @@ function ActionCommandSelector({
}) {
const { registryActions, registryActionsIsLoading, registryActionsError } =
useWorkbenchRegistryActions()
const scrollAreaRef = useRef<HTMLDivElement>(null)

// Add effect to reset scroll position when search results change
useEffect(() => {
if (scrollAreaRef.current) {
scrollAreaRef.current.scrollTop = 0
}
}, [inputValue])

if (!registryActions || registryActionsIsLoading) {
return (
<ScrollArea className="h-full" ref={scrollAreaRef}>
<CommandGroup heading="Loading Actions..." className="text-xs">
{/* Render 5 skeleton items */}
{Array.from({ length: 5 }).map((_, index) => (
<ScrollArea className="h-full">
<CommandGroup heading="Loading actions..." className="text-xs">
{Array.from({ length: 3 }).map((_, index) => (
<CommandItem key={index} className="text-xs">
<div className="w-full flex-col">
<div className="flex items-center justify-start">
Expand All @@ -186,13 +187,15 @@ function ActionCommandSelector({
}

return (
<ScrollArea className="h-full" ref={scrollAreaRef}>
<ActionCommandGroup
group="Suggestions"
nodeId={nodeId}
registryActions={registryActions}
inputValue={inputValue}
/>
<ScrollArea className="h-full overflow-y-auto">
{filterActions(registryActions, inputValue).length > 0 && (
<ActionCommandGroup
group="Suggestions"
nodeId={nodeId}
registryActions={registryActions}
inputValue={inputValue}
/>
)}
</ScrollArea>
)
}
Expand Down Expand Up @@ -282,18 +285,8 @@ function ActionCommandGroup({
[getNode, nodeId, workflowId, workspaceId, setNodes, setEdges]
)

// Add ref for the command group
const commandGroupRef = useRef<HTMLDivElement>(null)

// Reset scroll position when filter results change
useEffect(() => {
if (commandGroupRef.current) {
commandGroupRef.current.scrollIntoView({ block: "start" })
}
}, [filterResults])

return (
<CommandGroup heading={group} className="text-xs" ref={commandGroupRef}>
<CommandGroup heading={group} className="text-xs">
{filterResults.map((result) => {
const action = result.obj

Expand Down

0 comments on commit abbd0cb

Please sign in to comment.