fix(workflow): prevent canvas slowdown cascades

Author: j15z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx

@@ -21,6 +21,8 @@ import {
 import {
   filterAndCap,
   GROUP_HEADING_CLASSNAME,
+  MAX_RESULTS_PER_GROUP,
+  sliceGroupsToLimit,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 import {
   CMDK_ITEM_GAP_CLASS,
@@ -139,6 +141,7 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
   const [search, setSearch] = useState('')
   const [selectedValue, setSelectedValue] = useState('')
   const [recentSelections, setRecentSelections] = useState<RecentSelection[]>([])
+  const [browseLimit, setBrowseLimit] = useState(MAX_RESULTS_PER_GROUP)
   const deferredSearch = useDeferredValue(search)
   const isSearching = deferredSearch.trim().length > 0
   const recentStorageKey = `${RECENT_SELECTION_STORAGE_PREFIX}:${workspaceId}`
@@ -260,6 +263,11 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
     () => availableTools.filter((tool) => !recentSelectionKeys.has(`tool:${tool.id}`)),
     [availableTools, recentSelectionKeys]
   )
+  const [visibleBrowseBlocks, visibleBrowseTools] = useMemo(
+    () => sliceGroupsToLimit([browseBlocks, browseTools], browseLimit),
+    [browseBlocks, browseLimit, browseTools]
+  )
+  const hasMoreBrowseResults = browseLimit < browseBlocks.length + browseTools.length
 
   const dispatchSelection = useCallback(
     (type: string, resultType: 'block' | 'tool' | 'tool_operation', presetOperation?: string) => {
@@ -480,11 +488,22 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
                 )}
                 <BlocksGroup items={popularBlocks} onSelect={handleBlockSelect} heading='Popular' />
                 <BlocksGroup
-                  items={browseBlocks}
+                  items={visibleBrowseBlocks}
                   onSelect={handleBlockSelect}
                   heading='All blocks'
                 />
-                <ToolsGroup items={browseTools} onSelect={handleToolSelect} />
+                <ToolsGroup items={visibleBrowseTools} onSelect={handleToolSelect} />
+                {hasMoreBrowseResults && (
+                  <div className='px-2 py-1.5'>
+                    <Button
+                      variant='ghost'
+                      className='nodrag nopan h-8 w-full text-[var(--text-secondary)]'
+                      onClick={() => setBrowseLimit((current) => current + MAX_RESULTS_PER_GROUP)}
+                    >
+                      Show more
+                    </Button>
+                  </div>
+                )}
               </>
             )}
           </CommandFadedList>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx

@@ -697,6 +697,7 @@ export const ToolInput = memo(function ToolInput({
 
   const customBlockOverlayVersion = useCustomBlockOverlayVersion()
   const toolBlocks = useMemo(() => {
+    if (!open) return []
     const allToolBlocks = getAllBlocks().filter(isAgentToolBlock)
     /* An empty option list means the block declares no selectable operation, so
        there is nothing to gate — only a wholly denied one leaves the picker. */
@@ -705,7 +706,7 @@ export const ToolInput = memo(function ToolInput({
       const { options, denied } = getOperationChoices(block)
       return options.length === 0 || options.some((option) => !denied.has(option.id))
     })
-  }, [filterBlocks, customBlockOverlayVersion, getOperationChoices])
+  }, [filterBlocks, customBlockOverlayVersion, getOperationChoices, open])
 
   const hasBackfilledRef = useRef(false)
   useEffect(() => {
@@ -1403,6 +1404,7 @@ export const ToolInput = memo(function ToolInput({
    * @returns Array of option groups for the combobox component
    */
   const toolGroups = useMemo((): ComboboxOptionGroup[] => {
+    if (!open) return []
     const groups: ComboboxOptionGroup[] = []
 
     // MCP Server drill-down: when navigated into a server, show only its tools
@@ -1681,6 +1683,7 @@ export const ToolInput = memo(function ToolInput({
 
     return groups
   }, [
+    open,
     mcpServerDrilldown,
     customTools,
     availableMcpTools,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx

@@ -110,6 +110,21 @@ function createActiveSearchTarget(
 }
 
 export function WorkflowSearchReplace() {
+  const { isOpen, open } = useWorkflowSearchReplaceStore(
+    useShallow((state) => ({ isOpen: state.isOpen, open: state.open }))
+  )
+
+  useRegisterGlobalCommands([
+    createCommand({
+      id: 'open-workflow-search-replace',
+      handler: open,
+    }),
+  ])
+
+  return isOpen ? <WorkflowSearchReplacePanel /> : null
+}
+
+function WorkflowSearchReplacePanel() {
   const params = useParams()
   const workspaceId = params.workspaceId as string | undefined
   const routeWorkflowId = params.workflowId as string | undefined
@@ -143,38 +158,34 @@ export function WorkflowSearchReplace() {
   >({})
 
   const {
-    isOpen,
     query,
     replacement: textReplacement,
     activeMatchId,
     position,
     close,
-    open,
     setPosition,
     setQuery,
     setReplacement,
     setActiveMatchId,
   } = useWorkflowSearchReplaceStore(
     useShallow((state) => ({
-      isOpen: state.isOpen,
       query: state.query,
       replacement: state.replacement,
       activeMatchId: state.activeMatchId,
       position: state.position,
       close: state.close,
-      open: state.open,
       setPosition: state.setPosition,
       setQuery: state.setQuery,
       setReplacement: state.setReplacement,
       setActiveMatchId: state.setActiveMatchId,
     }))
   )
   const prevQueryRef = useRef(query)
-  const prevIsOpenRef = useRef(false)
+  const isFirstMatchSyncRef = useRef(true)
   const afterReplaceIndexRef = useRef<number | null>(null)
-  const { data: workspaceCredentials } = useWorkspaceCredentials({ workspaceId, enabled: isOpen })
-  const { data: customTools = [] } = useCustomTools(isOpen && workspaceId ? workspaceId : '')
-  const { mcpTools } = useMcpTools(isOpen && workspaceId ? workspaceId : '')
+  const { data: workspaceCredentials } = useWorkspaceCredentials({ workspaceId })
+  const { data: customTools = [] } = useCustomTools(workspaceId ?? '')
+  const { mcpTools } = useMcpTools(workspaceId ?? '')
   const mcpToolNamesById = useMemo(() => {
     const names = new Map<string, string>()
     for (const t of mcpTools) {
@@ -183,19 +194,6 @@ export function WorkflowSearchReplace() {
     return names
   }, [mcpTools])
 
-  useRegisterGlobalCommands([
-    createCommand({
-      id: 'open-workflow-search-replace',
-      handler: () => {
-        open()
-        requestAnimationFrame(() => {
-          searchInputRef.current?.focus()
-          searchInputRef.current?.select()
-        })
-      },
-    }),
-  ])
-
   const searchBlocks = useMemo(
     () =>
       getWorkflowSearchBlocks({
@@ -267,10 +265,16 @@ export function WorkflowSearchReplace() {
   )
 
   useEffect(() => {
-    if (!isOpen) return
     searchInputRef.current?.focus()
     searchInputRef.current?.select()
-  }, [isOpen])
+  }, [])
+
+  useEffect(
+    () => () => {
+      usePanelEditorSearchStore.getState().setActiveSearchTarget(null)
+    },
+    []
+  )
 
   const panelHeight = isReplaceExpanded
     ? SEARCH_PANEL_EXPANDED_HEIGHT
@@ -288,7 +292,7 @@ export function WorkflowSearchReplace() {
   })
 
   useFloatBoundarySync({
-    isOpen,
+    isOpen: true,
     position: actualPosition,
     width: SEARCH_PANEL_WIDTH,
     height: panelHeight,
@@ -384,14 +388,8 @@ export function WorkflowSearchReplace() {
   }
 
   useEffect(() => {
-    if (!isOpen) {
-      prevIsOpenRef.current = false
-      usePanelEditorSearchStore.getState().setActiveSearchTarget(null)
-      return
-    }
-
-    const justOpened = !prevIsOpenRef.current
-    prevIsOpenRef.current = true
+    const justOpened = isFirstMatchSyncRef.current
+    isFirstMatchSyncRef.current = false
     const queryChanged = prevQueryRef.current !== query
     prevQueryRef.current = query
 
@@ -422,9 +420,7 @@ export function WorkflowSearchReplace() {
     usePanelEditorSearchStore
       .getState()
       .setActiveSearchTarget(createActiveSearchTarget(activeHydratedMatch, query))
-  }, [activeMatchId, handleSelectMatch, hydratedMatches, isOpen, query, setActiveMatchId])
-
-  if (!isOpen) return null
+  }, [activeMatchId, handleSelectMatch, hydratedMatches, query, setActiveMatchId])
 
   const handleMoveActiveMatch = (delta: number) => {
     if (hydratedMatches.length === 0) return

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.test.ts

@@ -3,10 +3,166 @@
  */
 import { describe, expect, it } from 'vitest'
 import {
+  getArrowNavigationDirection,
   isPositionalTriggerBlock,
+  reconcileCanvasEdges,
+  reconcileCanvasNodes,
   shouldHighlightContainerDropTarget,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers'
 
+describe('getArrowNavigationDirection', () => {
+  it('moves once for a fresh horizontal arrow press', () => {
+    expect(
+      getArrowNavigationDirection({
+        key: 'ArrowRight',
+        repeat: false,
+        metaKey: false,
+        ctrlKey: false,
+        altKey: false,
+        shiftKey: false,
+      })
+    ).toBe(1)
+    expect(
+      getArrowNavigationDirection({
+        key: 'ArrowLeft',
+        repeat: false,
+        metaKey: false,
+        ctrlKey: false,
+        altKey: false,
+        shiftKey: false,
+      })
+    ).toBe(-1)
+  })
+
+  it('ignores held-arrow repeat events instead of restarting canvas navigation', () => {
+    expect(
+      getArrowNavigationDirection({
+        key: 'ArrowRight',
+        repeat: true,
+        metaKey: false,
+        ctrlKey: false,
+        altKey: false,
+        shiftKey: false,
+      })
+    ).toBeNull()
+  })
+
+  it('ignores modified arrows and unrelated keys', () => {
+    expect(
+      getArrowNavigationDirection({
+        key: 'ArrowDown',
+        repeat: false,
+        metaKey: false,
+        ctrlKey: false,
+        altKey: false,
+        shiftKey: true,
+      })
+    ).toBeNull()
+    expect(
+      getArrowNavigationDirection({
+        key: 'Enter',
+        repeat: false,
+        metaKey: false,
+        ctrlKey: false,
+        altKey: false,
+        shiftKey: false,
+      })
+    ).toBeNull()
+  })
+})
+
+describe('canvas reference reconciliation', () => {
+  it('preserves unaffected node references when one block measurement changes', () => {
+    const currentNodes = [
+      {
+        id: 'block-1',
+        position: { x: 0, y: 0 },
+        data: { name: 'One' },
+        height: 100,
+        selected: true,
+      },
+      {
+        id: 'block-2',
+        position: { x: 200, y: 0 },
+        data: { name: 'Two' },
+        height: 100,
+        selected: false,
+      },
+    ]
+    const derivedNodes = [
+      {
+        id: 'block-1',
+        position: { x: 0, y: 0 },
+        data: { name: 'One' },
+        height: 120,
+      },
+      {
+        id: 'block-2',
+        position: { x: 200, y: 0 },
+        data: { name: 'Two' },
+        height: 100,
+      },
+    ]
+
+    const reconciled = reconcileCanvasNodes(currentNodes, derivedNodes)
+
+    expect(reconciled).not.toBe(currentNodes)
+    expect(reconciled[0]).not.toBe(currentNodes[0])
+    expect(reconciled[0].selected).toBe(true)
+    expect(reconciled[1]).toBe(currentNodes[1])
+  })
+
+  it('preserves edge references when a graph refresh changes no edge semantics', () => {
+    const onDelete = () => {}
+    const currentEdges = [
+      {
+        id: 'edge-1',
+        source: 'block-1',
+        target: 'block-2',
+        data: { onDelete, isSelected: false },
+      },
+    ]
+    const derivedEdges = [
+      {
+        id: 'edge-1',
+        source: 'block-1',
+        target: 'block-2',
+        data: { onDelete, isSelected: false },
+      },
+    ]
+
+    const reconciled = reconcileCanvasEdges(currentEdges, derivedEdges)
+
+    expect(reconciled).toBe(currentEdges)
+    expect(reconciled[0]).toBe(currentEdges[0])
+  })
+
+  it('applies derived graph order while retaining unchanged item references', () => {
+    const currentNodes = [
+      { id: 'block-1', position: { x: 0, y: 0 }, data: {}, selected: false },
+      { id: 'block-2', position: { x: 100, y: 0 }, data: {}, selected: false },
+    ]
+    const currentEdges = [
+      { id: 'edge-1', source: 'block-1', target: 'block-2' },
+      { id: 'edge-2', source: 'block-2', target: 'block-1' },
+    ]
+
+    const reconciledNodes = reconcileCanvasNodes(currentNodes, [
+      { id: 'block-2', position: { x: 100, y: 0 }, data: {} },
+      { id: 'block-1', position: { x: 0, y: 0 }, data: {} },
+    ])
+    const reconciledEdges = reconcileCanvasEdges(currentEdges, [
+      { ...currentEdges[1] },
+      { ...currentEdges[0] },
+    ])
+
+    expect(reconciledNodes).toEqual([currentNodes[1], currentNodes[0]])
+    expect(reconciledEdges).toEqual([currentEdges[1], currentEdges[0]])
+    expect(reconciledNodes[0]).toBe(currentNodes[1])
+    expect(reconciledEdges[0]).toBe(currentEdges[1])
+  })
+})
+
 describe('isPositionalTriggerBlock', () => {
   it('returns true for a top-level block with no incoming edges', () => {
     const block = { id: 'block-1' }