feat(web): enhance WorkflowCanvas with keyboard shortcuts and tooltip improvements for action buttons

Author: leonardcser

apps/web/src/components/workflow/workflow-canvas.tsx

@@ -27,6 +27,7 @@ import {
   Square,
   X,
 } from "lucide-react";
+import { useEffect, useRef } from "react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -76,7 +77,7 @@ function CanvasButton({
     : `absolute top-4 ${position} z-50`;
 
   return (
-    <Tooltip>
+    <Tooltip delayDuration={0}>
       <TooltipTrigger asChild>
         <Button
           onClick={onClick}
@@ -102,7 +103,7 @@ interface ActionBarButtonProps {
   onClick: (e: React.MouseEvent) => void;
   disabled?: boolean;
   className?: string;
-  tooltip: string;
+  tooltip: React.ReactNode;
   children: React.ReactNode;
   position?: "first" | "middle" | "last" | "only";
 }
@@ -117,30 +118,27 @@ function ActionBarButton({
 }: ActionBarButtonProps) {
   const roundingClass = {
     first: "rounded-l-lg rounded-r-none",
-    middle: "rounded-none border-l-0",
-    last: "rounded-r-lg rounded-l-none border-l-0",
+    middle: "rounded-none",
+    last: "rounded-r-lg rounded-l-none",
     only: "rounded-lg",
   }[position];
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          onClick={onClick}
-          disabled={disabled}
-          className={cn(
-            "h-10 px-3 border-neutral-300 shadow-sm",
-            roundingClass,
-            className,
-            { "opacity-50 cursor-not-allowed": disabled }
-          )}
-        >
-          {children}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>{tooltip}</p>
-      </TooltipContent>
+    <Tooltip delayDuration={0}>
+      <div className={cn("bg-background", roundingClass)}>
+        <TooltipTrigger asChild>
+          <Button
+            onClick={onClick}
+            disabled={disabled}
+            className={cn("h-10 px-3", className, roundingClass, {
+              "opacity-50 cursor-not-allowed": disabled,
+            })}
+          >
+            {children}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </div>
     </Tooltip>
   );
 }
@@ -197,38 +195,45 @@ function ActionButton({
     idle: {
       icon: <Play className="!size-4" />,
       title: "Execute Workflow",
+      shortcut: "⌘⏎",
       className: "bg-green-600 hover:bg-green-700 text-white border-green-600",
     },
     submitted: {
       icon: <Square className="!size-4" />,
       title: "Stop Execution",
+      shortcut: "⌘⏎",
       className: "bg-red-500 hover:bg-red-600 text-white border-red-500",
     },
     executing: {
       icon: <Square className="!size-4" />,
       title: "Stop Execution",
+      shortcut: "⌘⏎",
       className: "bg-red-500 hover:bg-red-600 text-white border-red-500",
     },
     completed: {
       icon: <X className="!size-4" />,
       title: "Clear Outputs & Reset",
+      shortcut: "⌘⏎",
       className:
         "bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600",
     },
     error: {
       icon: <X className="!size-4" />,
       title: "Clear Errors & Reset",
+      shortcut: "⌘⏎",
       className: "bg-rose-600 hover:bg-rose-700 text-white border-rose-600",
     },
     cancelled: {
       icon: <Play className="!size-4" />,
       title: "Restart Workflow",
+      shortcut: "⌘⏎",
       className:
         "bg-neutral-600 hover:bg-neutral-700 text-white border-neutral-600",
     },
     paused: {
       icon: <Play className="!size-4" />,
       title: "Resume Workflow",
+      shortcut: "⌘⏎",
       className: "bg-blue-500 hover:bg-blue-600 text-white border-blue-500",
     },
   };
@@ -241,7 +246,18 @@ function ActionButton({
       onClick={onClick}
       disabled={disabled}
       className={config.className}
-      tooltip={config.title}
+      tooltip={
+        <div className="flex items-center gap-2">
+          <span>{config.title}</span>
+          <div className="flex items-center gap-1">
+            {config.shortcut.split("").map((key) => (
+              <kbd className="px-1 py-0.25 text-xs rounded border font-mono">
+                {key}
+              </kbd>
+            ))}
+          </div>
+        </div>
+      }
       position="first"
     >
       {config.icon}
@@ -261,8 +277,8 @@ function DeployButton({
       onClick={onClick}
       disabled={disabled}
       className="bg-blue-600 hover:bg-blue-700 text-white border-blue-600"
-      tooltip="Deploy Workflow"
-      position="middle"
+      tooltip={<p>Deploy Workflow</p>}
+      position="last"
     >
       <ArrowUpToLine className="!size-4" />
     </ActionBarButton>
@@ -278,9 +294,8 @@ function SidebarToggle({ onClick, isSidebarVisible }: SidebarToggleProps) {
   return (
     <ActionBarButton
       onClick={onClick}
-      tooltip={isSidebarVisible ? "Hide Sidebar" : "Show Sidebar"}
-      className="bg-neutral-100 hover:bg-neutral-200 text-neutral-700 border-neutral-300"
-      position="last"
+      tooltip={<p>{isSidebarVisible ? "Hide Sidebar" : "Show Sidebar"}</p>}
+      position="only"
     >
       {isSidebarVisible ? (
         <PanelLeftClose className="!size-4 rotate-180" />
@@ -300,18 +315,18 @@ function OutputsToggle({
   expandedOutputs: boolean;
   disabled?: boolean;
 }) {
+  const tooltipText = disabled
+    ? "No outputs to show"
+    : expandedOutputs
+      ? "Hide All Outputs"
+      : "Show All Outputs";
+
   return (
     <ActionBarButton
       onClick={onClick}
       disabled={disabled}
       className="bg-neutral-600 hover:bg-neutral-700 text-white border-neutral-600"
-      tooltip={
-        disabled
-          ? "No outputs to show"
-          : expandedOutputs
-            ? "Hide All Outputs"
-            : "Show All Outputs"
-      }
+      tooltip={<p>{tooltipText}</p>}
       position="middle"
     >
       {expandedOutputs ? (
@@ -352,6 +367,51 @@ export function WorkflowCanvas({
     node.data.outputs.some((output) => output.value !== undefined)
   );
 
+  const reactFlowRef = useRef<ReactFlowInstance<
+    ReactFlowNode<WorkflowNodeType>,
+    ReactFlowEdge<WorkflowEdgeType>
+  > | null>(null);
+
+  // Keyboard shortcut handling
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux) - Execute workflow
+      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+        event.preventDefault();
+        if (onAction && !readonly && nodes.length > 0) {
+          const syntheticEvent = new MouseEvent("click", {
+            bubbles: true,
+            cancelable: true,
+          }) as unknown as React.MouseEvent;
+          onAction(syntheticEvent);
+        }
+        return;
+      }
+
+      // Esc - Center the chart
+      if (event.key === "Escape") {
+        event.preventDefault();
+        if (reactFlowRef.current) {
+          reactFlowRef.current.fitView({ padding: 0.1, duration: 300 });
+        }
+        return;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onAction, readonly, nodes.length]);
+
+  const handleInit = (
+    instance: ReactFlowInstance<
+      ReactFlowNode<WorkflowNodeType>,
+      ReactFlowEdge<WorkflowEdgeType>
+    >
+  ) => {
+    reactFlowRef.current = instance;
+    onInit(instance);
+  };
+
   return (
     <TooltipProvider>
       <ReactFlow
@@ -370,7 +430,7 @@ export function WorkflowCanvas({
         connectionMode={ConnectionMode.Strict}
         connectionLineComponent={WorkflowConnectionLine}
         connectionRadius={8}
-        onInit={onInit}
+        onInit={handleInit}
         isValidConnection={isValidConnection}
         fitView
         minZoom={0.05}
@@ -404,45 +464,50 @@ export function WorkflowCanvas({
         )}
 
         {/* Main Action Bar */}
-        {((!readonly && (onAction || onDeploy || onToggleExpandedOutputs)) ||
-          onToggleSidebar) && (
-          <div className="absolute top-4 right-4 flex items-center rounded-lg shadow-lg bg-background z-50 overflow-hidden">
-            {!readonly && onAction && (
+        {!readonly && (onAction || onDeploy || onToggleExpandedOutputs) && (
+          <div
+            className={cn(
+              "absolute top-4 flex items-center gap-0.5 z-50",
+              onToggleSidebar && isSidebarVisible !== undefined
+                ? "right-16" // Position to the left of sidebar with spacing
+                : "right-4" // Position at right edge if no sidebar
+            )}
+          >
+            {onAction && (
               <ActionButton
                 onClick={onAction}
                 workflowStatus={workflowStatus}
                 disabled={nodes.length === 0}
               />
             )}
 
-            {!readonly && onToggleExpandedOutputs && (
+            {onToggleExpandedOutputs && (
               <OutputsToggle
                 onClick={onToggleExpandedOutputs}
                 expandedOutputs={expandedOutputs}
                 disabled={!hasAnyOutputs}
               />
             )}
 
-            {!readonly && onDeploy && (
+            {onDeploy && (
               <DeployButton onClick={onDeploy} disabled={nodes.length === 0} />
             )}
+          </div>
+        )}
 
-            {onToggleSidebar && isSidebarVisible !== undefined && (
-              <SidebarToggle
-                onClick={onToggleSidebar}
-                isSidebarVisible={isSidebarVisible}
-              />
-            )}
+        {/* Sidebar Toggle - Rightmost position */}
+        {onToggleSidebar && isSidebarVisible !== undefined && (
+          <div className="absolute top-4 right-4 z-50">
+            <SidebarToggle
+              onClick={onToggleSidebar}
+              isSidebarVisible={isSidebarVisible}
+            />
           </div>
         )}
 
         {onAddNode && !readonly && (
           <CanvasButton
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onAddNode();
-            }}
+            onClick={onAddNode}
             position="bottom-4 right-4"
             tooltip="Add Node"
           >