fix: resolved comments

simstudioai · aadamgough · May 14, 2025 · May 14, 2025 · May 14, 2025 · May 14, 2025
commit 37fa5279013f47e386904aecf8321206850a2ce8
diff --git a/apps/sim/app/api/workflows/sync/route.ts b/apps/sim/app/api/workflows/sync/route.ts
@@ -22,7 +22,6 @@ const WorkflowStateSchema = z.object({
   blocks: z.record(z.any()),
   edges: z.array(z.any()),
   loops: z.record(z.any()).default({}),
-  loopBlocks: z.record(z.any()).optional(),
   lastSaved: z.number().optional(),
   isDeployed: z.boolean().optional(),
   deployedAt: z

diff --git a/apps/sim/app/globals.css b/apps/sim/app/globals.css
@@ -339,134 +339,4 @@ input[type='search']::-ms-clear {
 .main-content-overlay {
   z-index: 40;
   /* Higher z-index to appear above content */
-}
-
-/* Drag and drop styles for loop node */
-.drag-target {
-  transition: border-color 0.2s ease, background-color 0.2s ease;
-}
-
-.drag-target.drag-over {
-  border-color: hsl(var(--primary));
-  background-color: hsl(var(--primary) / 0.05);
-}
-
-/* Optimize node rendering for smooth dragging performance */
-.react-flow__node-workflowBlock {
-  contain: layout style;
-  will-change: transform;
-  user-select: none;
-  touch-action: none;
-}
-
-/* React Flow position transitions within loops */
-.react-flow__node[data-parent-node-id] {
-  transition: transform 0.05s ease;
-  pointer-events: all;
-}
-
-/* Prevent jumpy drag behavior */
-.loop-drop-container .react-flow__node {
-  transform-origin: center;
-  position: absolute;
-}
-
-/* Remove default border from React Flow group nodes */
-.react-flow__node-group {
-  border: none;
-  background-color: transparent;
-  outline: none;
-  box-shadow: none;
-}
-
-/* Ensure child nodes stay within parent bounds */
-.react-flow__node[data-parent-node-id] .react-flow__handle {
-  z-index: 30;
-}
-
-/* Enhanced drag detection */
-.react-flow__node-group.dragging-over {
-  background-color: rgba(34,197,94,0.05);
-  transition: all 0.2s ease-in-out;
-}
-
-/* Loop node animation for drag operations */
-@keyframes loop-node-pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(64, 224, 208, 0.3);
-  }
-  70% {
-    box-shadow: 0 0 0 6px rgba(64, 224, 208, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(64, 224, 208, 0);
-  }
-}
-
-.loop-node-drag-over {
-  animation: loop-node-pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  border-style: solid !important;
-  background-color: rgba(47, 179, 255, 0.08) !important;
-  box-shadow: 0 0 0 8px rgba(47, 179, 255, 0.1);
-}
-/* Make resizer handles more visible */
-.react-flow__resize-control {
-  z-index: 10;
-  pointer-events: all !important;
-}
-
-.react-flow__resize-control.bottom-right {
-  width: 12px !important;
-  height: 12px !important;
-  background-color: hsl(var(--primary)) !important;
-  border: 2px solid white !important;
-  transition: transform 0.2s ease-in-out;
-  opacity: 1 !important;
-  visibility: visible !important;
-  pointer-events: all !important;
-  position: absolute !important;
-  right: 0 !important;
-  bottom: 0 !important;
-}
-
-.react-flow__resize-control.bottom-right:hover {
-  transform: scale(1.3);
-  background-color: #2FB3FF !important;
-}
-
-/* Ensure NodeResizer is always above the custom resize handle */
-.react-flow__noderesize {
-  z-index: 11 !important;
-  pointer-events: all !important;
-}
-
-/* Ensure parent borders are visible when hovering over resize controls */
-.react-flow__node-group:hover,
-.hover-highlight {
-  border-color: #1e293b !important;
-}
-
-/* Ensure hover effects work well */
-.group-node-container:hover .react-flow__resize-control.bottom-right {
-  opacity: 1 !important;
-  visibility: visible !important;
-}
-
-/* Child node styling */
-.react-flow__node[data-parent] {
-  border: 1px dashed #4e9eff !important;
-  transition: all 0.2s ease;
-}
-
-/* Visual feedback for nodes that are children of loops */
-.react-flow__node[data-parent]::after {
-  content: '';
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: #4e9eff;
-  z-index: 5;
-}
+}
diff --git a/...ponents/control-bar/components/deployment-controls/components/deployed-workflow-modal.tsx b/...ponents/control-bar/components/deployment-controls/components/deployed-workflow-modal.tsx
@@ -52,13 +52,8 @@ export function DeployedWorkflowModal({
   }))
 
   const handleRevert = () => {
-    // Add the missing loopBlocks property
-    const completeState = {
-      ...deployedWorkflowState,
-      loopBlocks: {} // Add empty loopBlocks if not present
-    };
-
-    revertToDeployedState(completeState);
+    // Revert to the deployed state
+    revertToDeployedState(deployedWorkflowState);
     setShowRevertDialog(false);
     onClose();
   }

diff --git a/...op-node/components/loop-config-badges.tsx → ...ents/loop-node/components/loop-badges.tsx b/...op-node/components/loop-config-badges.tsx → ...ents/loop-node/components/loop-badges.tsx
@@ -11,12 +11,30 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/themes/prism.css'
 
 
-interface LoopConfigBadgesProps {
+interface LoopNodeData {
+  width?: number;
+  height?: number;
+  parentId?: string;
+  state?: string;
+  type?: string;
+  extent?: 'parent';
+  loopType?: 'for' | 'forEach';
+  count?: number;
+  collection?: string | any[] | Record<string, any>;
+  executionState?: {
+    currentIteration: number;
+    isExecuting: boolean;
+    startTime: number | null;
+    endTime: number | null;
+  };
+}
+
+interface LoopBadgesProps {
   nodeId: string
-  data: any
+  data: LoopNodeData
 }
 
-export function LoopConfigBadges({ nodeId, data }: LoopConfigBadgesProps) {
+export function LoopBadges({ nodeId, data }: LoopBadgesProps) {
   // State
   const [loopType, setLoopType] = useState(data?.loopType || 'for')
   const [iterations, setIterations] = useState(data?.count || 5)
@@ -26,7 +44,7 @@ export function LoopConfigBadges({ nodeId, data }: LoopConfigBadgesProps) {
   const [configPopoverOpen, setConfigPopoverOpen] = useState(false)
 
   // Get store methods
-  const updateNodeData = useCallback((updates: any) => {
+  const updateNodeData = useCallback((updates: Partial<LoopNodeData>) => {
     useWorkflowStore.setState(state => ({
       blocks: {
         ...state.blocks,