fix(change-detection): move change detection logic to client-side to prevent unnecessary API calls, consolidate utils (#2576)

* fix(change-detection): move change detection logic to client-side to prevent unnecessary API calls, consolidate utils

* added tests

* ack PR comments

* added isPublished to API response

Author: waleedlatif1

apps/sim/app/api/workflows/[id]/deploy/route.ts

@@ -66,7 +66,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
           loops: normalizedData.loops,
           parallels: normalizedData.parallels,
         }
-        const { hasWorkflowChanged } = await import('@/lib/workflows/utils')
+        const { hasWorkflowChanged } = await import('@/lib/workflows/comparison')
         needsRedeployment = hasWorkflowChanged(currentState as any, active.state as any)
       }
     }

apps/sim/app/api/workflows/[id]/status/route.ts

@@ -3,8 +3,8 @@ import { and, desc, eq } from 'drizzle-orm'
 import type { NextRequest } from 'next/server'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { createLogger } from '@/lib/logs/console/logger'
+import { hasWorkflowChanged } from '@/lib/workflows/comparison'
 import { loadWorkflowFromNormalizedTables } from '@/lib/workflows/persistence/utils'
-import { hasWorkflowChanged } from '@/lib/workflows/utils'
 import { validateWorkflowAccess } from '@/app/api/workflows/middleware'
 import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
 
@@ -69,6 +69,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
     return createSuccessResponse({
       isDeployed: validation.workflow.isDeployed,
       deployedAt: validation.workflow.deployedAt,
+      isPublished: validation.workflow.isPublished,
       needsRedeployment,
     })
   } catch (error) {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-change-detection.ts

@@ -1,111 +1,87 @@
-import { useEffect, useMemo, useState } from 'react'
-import { createLogger } from '@/lib/logs/console/logger'
+import { useMemo } from 'react'
+import { hasWorkflowChanged } from '@/lib/workflows/comparison'
 import { useDebounce } from '@/hooks/use-debounce'
-import { useOperationQueueStore } from '@/stores/operation-queue/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
-const logger = createLogger('useChangeDetection')
-
 interface UseChangeDetectionProps {
   workflowId: string | null
   deployedState: WorkflowState | null
   isLoadingDeployedState: boolean
 }
 
 /**
- * Hook to detect changes between current workflow state and deployed state
- * Uses API-based change detection for accuracy
+ * Detects meaningful changes between current workflow state and deployed state.
+ * Performs comparison entirely on the client - no API calls needed.
  */
 export function useChangeDetection({
   workflowId,
   deployedState,
   isLoadingDeployedState,
 }: UseChangeDetectionProps) {
-  const [changeDetected, setChangeDetected] = useState(false)
-  const [blockStructureVersion, setBlockStructureVersion] = useState(0)
-  const [edgeStructureVersion, setEdgeStructureVersion] = useState(0)
-  const [subBlockStructureVersion, setSubBlockStructureVersion] = useState(0)
-
-  // Get current store state for change detection
-  const currentBlocks = useWorkflowStore((state) => state.blocks)
-  const currentEdges = useWorkflowStore((state) => state.edges)
-  const lastSaved = useWorkflowStore((state) => state.lastSaved)
+  const blocks = useWorkflowStore((state) => state.blocks)
+  const edges = useWorkflowStore((state) => state.edges)
+  const loops = useWorkflowStore((state) => state.loops)
+  const parallels = useWorkflowStore((state) => state.parallels)
   const subBlockValues = useSubBlockStore((state) =>
     workflowId ? state.workflowValues[workflowId] : null
   )
 
-  // Track structure changes
-  useEffect(() => {
-    setBlockStructureVersion((version) => version + 1)
-  }, [currentBlocks])
-
-  useEffect(() => {
-    setEdgeStructureVersion((version) => version + 1)
-  }, [currentEdges])
+  // Build current state with subblock values merged into blocks
+  const currentState = useMemo((): WorkflowState | null => {
+    if (!workflowId) return null
 
-  useEffect(() => {
-    setSubBlockStructureVersion((version) => version + 1)
-  }, [subBlockValues])
+    const blocksWithSubBlocks: WorkflowState['blocks'] = {}
+    for (const [blockId, block] of Object.entries(blocks)) {
+      const blockSubValues = subBlockValues?.[blockId] || {}
+      const subBlocks: Record<string, any> = {}
 
-  // Reset version counters when workflow changes
-  useEffect(() => {
-    setBlockStructureVersion(0)
-    setEdgeStructureVersion(0)
-    setSubBlockStructureVersion(0)
-  }, [workflowId])
-
-  // Create trigger for status check
-  const statusCheckTrigger = useMemo(() => {
-    return JSON.stringify({
-      lastSaved: lastSaved ?? 0,
-      blockVersion: blockStructureVersion,
-      edgeVersion: edgeStructureVersion,
-      subBlockVersion: subBlockStructureVersion,
-    })
-  }, [lastSaved, blockStructureVersion, edgeStructureVersion, subBlockStructureVersion])
-
-  const debouncedStatusCheckTrigger = useDebounce(statusCheckTrigger, 500)
+      // Merge subblock values into the block's subBlocks structure
+      for (const [subId, value] of Object.entries(blockSubValues)) {
+        subBlocks[subId] = { value }
+      }
 
-  useEffect(() => {
-    // Avoid off-by-one false positives: wait until operation queue is idle
-    const { operations, isProcessing } = useOperationQueueStore.getState()
-    const hasPendingOps =
-      isProcessing || operations.some((op) => op.status === 'pending' || op.status === 'processing')
+      // Also include existing subBlocks from the block itself
+      if (block.subBlocks) {
+        for (const [subId, subBlock] of Object.entries(block.subBlocks)) {
+          if (!subBlocks[subId]) {
+            subBlocks[subId] = subBlock
+          } else {
+            subBlocks[subId] = { ...subBlock, value: subBlocks[subId].value }
+          }
+        }
+      }
 
-    if (!workflowId || !deployedState) {
-      setChangeDetected(false)
-      return
+      blocksWithSubBlocks[blockId] = {
+        ...block,
+        subBlocks,
+      }
     }
 
-    if (isLoadingDeployedState || hasPendingOps) {
-      return
+    return {
+      blocks: blocksWithSubBlocks,
+      edges,
+      loops,
+      parallels,
     }
+  }, [workflowId, blocks, edges, loops, parallels, subBlockValues])
 
-    // Use the workflow status API to get accurate change detection
-    // This uses the same logic as the deployment API (reading from normalized tables)
-    const checkForChanges = async () => {
-      try {
-        const response = await fetch(`/api/workflows/${workflowId}/status`)
-        if (response.ok) {
-          const data = await response.json()
-          setChangeDetected(data.needsRedeployment || false)
-        } else {
-          logger.error('Failed to fetch workflow status:', response.status, response.statusText)
-          setChangeDetected(false)
-        }
-      } catch (error) {
-        logger.error('Error fetching workflow status:', error)
-        setChangeDetected(false)
-      }
+  // Compute change detection with debouncing for performance
+  const rawChangeDetected = useMemo(() => {
+    if (!currentState || !deployedState || isLoadingDeployedState) {
+      return false
     }
+    return hasWorkflowChanged(currentState, deployedState)
+  }, [currentState, deployedState, isLoadingDeployedState])
 
-    checkForChanges()
-  }, [workflowId, deployedState, debouncedStatusCheckTrigger, isLoadingDeployedState])
+  // Debounce to avoid UI flicker during rapid edits
+  const changeDetected = useDebounce(rawChangeDetected, 300)
 
-  return {
-    changeDetected,
-    setChangeDetected,
+  const setChangeDetected = () => {
+    // No-op: change detection is now computed, not stateful
+    // Kept for API compatibility
   }
+
+  return { changeDetected, setChangeDetected }
 }

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

@@ -885,7 +885,8 @@ export function ToolInput({
         block.type === 'knowledge' ||
         block.type === 'function') &&
       block.type !== 'evaluator' &&
-      block.type !== 'mcp'
+      block.type !== 'mcp' &&
+      block.type !== 'file'
   )
 
   const value = isPreview ? previewValue : storeValue

apps/sim/lib/logs/execution/snapshot/service.ts

@@ -11,6 +11,12 @@ import type {
   WorkflowExecutionSnapshotInsert,
   WorkflowState,
 } from '@/lib/logs/types'
+import {
+  normalizedStringify,
+  normalizeEdge,
+  normalizeValue,
+  sortEdges,
+} from '@/lib/workflows/comparison'
 
 const logger = createLogger('SnapshotService')
 
@@ -45,7 +51,7 @@ export class SnapshotService implements ISnapshotService {
       id: uuidv4(),
       workflowId,
       stateHash,
-      stateData: state, // Full state with positions, subblock values, etc.
+      stateData: state,
     }
 
     const [newSnapshot] = await db
@@ -107,7 +113,7 @@ export class SnapshotService implements ISnapshotService {
 
   computeStateHash(state: WorkflowState): string {
     const normalizedState = this.normalizeStateForHashing(state)
-    const stateString = this.normalizedStringify(normalizedState)
+    const stateString = normalizedStringify(normalizedState)
     return createHash('sha256').update(stateString).digest('hex')
   }
 
@@ -126,23 +132,10 @@ export class SnapshotService implements ISnapshotService {
   }
 
   private normalizeStateForHashing(state: WorkflowState): any {
-    // Use the same normalization logic as hasWorkflowChanged for consistency
-
-    // 1. Normalize edges (same as hasWorkflowChanged)
-    const normalizedEdges = (state.edges || [])
-      .map((edge) => ({
-        source: edge.source,
-        sourceHandle: edge.sourceHandle,
-        target: edge.target,
-        targetHandle: edge.targetHandle,
-      }))
-      .sort((a, b) =>
-        `${a.source}-${a.sourceHandle}-${a.target}-${a.targetHandle}`.localeCompare(
-          `${b.source}-${b.sourceHandle}-${b.target}-${b.targetHandle}`
-        )
-      )
+    // 1. Normalize and sort edges
+    const normalizedEdges = sortEdges((state.edges || []).map(normalizeEdge))
 
-    // 2. Normalize blocks (same as hasWorkflowChanged)
+    // 2. Normalize blocks
     const normalizedBlocks: Record<string, any> = {}
 
     for (const [blockId, block] of Object.entries(state.blocks || {})) {
@@ -155,18 +148,16 @@ export class SnapshotService implements ISnapshotService {
         ...dataRest
       } = blockWithoutLayoutFields.data || {}
 
-      // Handle subBlocks with detailed comparison (same as hasWorkflowChanged)
+      // Normalize subBlocks
       const subBlocks = blockWithoutLayoutFields.subBlocks || {}
       const normalizedSubBlocks: Record<string, any> = {}
 
       for (const [subBlockId, subBlock] of Object.entries(subBlocks)) {
-        // Normalize value with special handling for null/undefined
         const value = subBlock.value ?? null
 
         normalizedSubBlocks[subBlockId] = {
           type: subBlock.type,
-          value: this.normalizeValue(value),
-          // Include other properties except value
+          value: normalizeValue(value),
           ...Object.fromEntries(
             Object.entries(subBlock).filter(([key]) => key !== 'value' && key !== 'type')
           ),
@@ -183,12 +174,12 @@ export class SnapshotService implements ISnapshotService {
     // 3. Normalize loops and parallels
     const normalizedLoops: Record<string, any> = {}
     for (const [loopId, loop] of Object.entries(state.loops || {})) {
-      normalizedLoops[loopId] = this.normalizeValue(loop)
+      normalizedLoops[loopId] = normalizeValue(loop)
     }
 
     const normalizedParallels: Record<string, any> = {}
     for (const [parallelId, parallel] of Object.entries(state.parallels || {})) {
-      normalizedParallels[parallelId] = this.normalizeValue(parallel)
+      normalizedParallels[parallelId] = normalizeValue(parallel)
     }
 
     return {
@@ -198,46 +189,6 @@ export class SnapshotService implements ISnapshotService {
       parallels: normalizedParallels,
     }
   }
-
-  private normalizeValue(value: any): any {
-    // Handle null/undefined consistently
-    if (value === null || value === undefined) return null
-
-    // Handle arrays
-    if (Array.isArray(value)) {
-      return value.map((item) => this.normalizeValue(item))
-    }
-
-    // Handle objects
-    if (typeof value === 'object') {
-      const normalized: Record<string, any> = {}
-      for (const [key, val] of Object.entries(value)) {
-        normalized[key] = this.normalizeValue(val)
-      }
-      return normalized
-    }
-
-    // Handle primitives
-    return value
-  }
-
-  private normalizedStringify(obj: any): string {
-    if (obj === null || obj === undefined) return 'null'
-    if (typeof obj === 'string') return `"${obj}"`
-    if (typeof obj === 'number' || typeof obj === 'boolean') return String(obj)
-
-    if (Array.isArray(obj)) {
-      return `[${obj.map((item) => this.normalizedStringify(item)).join(',')}]`
-    }
-
-    if (typeof obj === 'object') {
-      const keys = Object.keys(obj).sort()
-      const pairs = keys.map((key) => `"${key}":${this.normalizedStringify(obj[key])}`)
-      return `{${pairs.join(',')}}`
-    }
-
-    return String(obj)
-  }
 }
 
 export const snapshotService = new SnapshotService()