From 9b8f124e018167a5b2a45a4dfd0913e6929b3345 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 29 Jan 2025 20:52:21 -0800
Subject: [PATCH] Added block enable/disable state

---
 app/w/components/control-bar/control-bar.tsx  | 29 +++++++---
 .../components/action-bar/action-bar.tsx      | 55 ++++++++++++++++---
 stores/workflow/types.ts                      |  2 +
 stores/workflow/workflow-store.ts             | 18 ++++++
 4 files changed, 86 insertions(+), 18 deletions(-)

diff --git a/app/w/components/control-bar/control-bar.tsx b/app/w/components/control-bar/control-bar.tsx
index 91ecc14c40..3ada77baec 100644
--- a/app/w/components/control-bar/control-bar.tsx
+++ b/app/w/components/control-bar/control-bar.tsx
@@ -17,6 +17,11 @@ import { useEffect, useState } from 'react'
 import { useWorkflowExecution } from '../../hooks/use-workflow-execution'
 import { useWorkflowRegistry } from '@/stores/workflow/workflow-registry'
 import { useRouter } from 'next/navigation'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 
 export function ControlBar() {
   const { notifications, getWorkflowNotifications } = useNotificationStore()
@@ -70,15 +75,21 @@ export function ControlBar() {
 
       {/* Right Section - Actions */}
       <div className="flex items-center gap-3">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={handleDeleteWorkflow}
-          disabled={Object.keys(workflows).length <= 1}
-        >
-          <Trash2 className="h-5 w-5" />
-          <span className="sr-only">Delete Workflow</span>
-        </Button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleDeleteWorkflow}
+              disabled={Object.keys(workflows).length <= 1}
+              className="hover:text-red-600"
+            >
+              <Trash2 className="h-5 w-5" />
+              <span className="sr-only">Delete Workflow</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Delete Workflow</TooltipContent>
+        </Tooltip>
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
diff --git a/app/w/components/workflow-block/components/action-bar/action-bar.tsx b/app/w/components/workflow-block/components/action-bar/action-bar.tsx
index b79269d08c..8422cba5b4 100644
--- a/app/w/components/workflow-block/components/action-bar/action-bar.tsx
+++ b/app/w/components/workflow-block/components/action-bar/action-bar.tsx
@@ -1,6 +1,11 @@
 import { Button } from '@/components/ui/button'
-import { Trash2, Play, Pause, RotateCcw } from 'lucide-react'
+import { Trash2, Play, Circle, CircleOff } from 'lucide-react'
 import { useWorkflowStore } from '@/stores/workflow/workflow-store'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 
 interface ActionBarProps {
   blockId: string
@@ -8,17 +13,49 @@ interface ActionBarProps {
 
 export function ActionBar({ blockId }: ActionBarProps) {
   const removeBlock = useWorkflowStore((state) => state.removeBlock)
+  const toggleBlockEnabled = useWorkflowStore(
+    (state) => state.toggleBlockEnabled
+  )
+  const isEnabled = useWorkflowStore(
+    (state) => state.blocks[blockId]?.enabled ?? true
+  )
 
   return (
     <div className="absolute -top-20 right-0 inline-flex items-center gap-2 p-2 bg-white rounded-md shadow-sm border border-gray-200 animate-in fade-in slide-in-from-bottom-2">
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={() => removeBlock(blockId)}
-        className="text-gray-500 hover:text-red-600"
-      >
-        <Trash2 className="h-4 w-4" />
-      </Button>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => removeBlock(blockId)}
+            className="text-gray-500 hover:text-red-600"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Delete Block</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => toggleBlockEnabled(blockId)}
+            className="text-gray-500"
+          >
+            {isEnabled ? (
+              <Circle className="h-4 w-4" />
+            ) : (
+              <CircleOff className="h-4 w-4" />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {isEnabled ? 'Disable Block' : 'Enable Block'}
+        </TooltipContent>
+      </Tooltip>
+
       <Button className="gap-2 bg-[#7F2FFF] hover:bg-[#7F2FFF]/90" size="sm">
         <Play fill="currentColor" className="!h-3.5 !w-3.5" />
         Run
diff --git a/stores/workflow/types.ts b/stores/workflow/types.ts
index 792f3fbfe5..08cd265b1f 100644
--- a/stores/workflow/types.ts
+++ b/stores/workflow/types.ts
@@ -14,6 +14,7 @@ export interface BlockState {
   position: Position
   subBlocks: Record<string, SubBlockState>
   outputs: Record<string, OutputType>
+  enabled: boolean
 }
 
 export interface SubBlockState {
@@ -42,6 +43,7 @@ export interface WorkflowActions {
   removeEdge: (edgeId: string) => void
   clear: () => void
   updateLastSaved: () => void
+  toggleBlockEnabled: (id: string) => void
 }
 
 export type WorkflowStore = WorkflowState & WorkflowActions 
\ No newline at end of file
diff --git a/stores/workflow/workflow-store.ts b/stores/workflow/workflow-store.ts
index 7dbe17cd70..a4049b5a5d 100644
--- a/stores/workflow/workflow-store.ts
+++ b/stores/workflow/workflow-store.ts
@@ -92,6 +92,7 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
               position,
               subBlocks,
               outputs,
+              enabled: true,
             },
           },
           edges: [...get().edges],
@@ -183,6 +184,23 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
       updateLastSaved: () => {
         set({ lastSaved: Date.now() })
       },
+
+      toggleBlockEnabled: (id: string) => {
+        const newState = {
+          blocks: {
+            ...get().blocks,
+            [id]: {
+              ...get().blocks[id],
+              enabled: !get().blocks[id].enabled,
+            },
+          },
+          edges: [...get().edges],
+        }
+        
+        set(newState)
+        pushHistory(set, get, newState, 'Enabled/disabled block')
+        get().updateLastSaved()
+      },
     })),
     { name: 'workflow-store' }
   )