use Splitter for debugger layout (#3383)

skyvern-frontend/src/components/Splitter.tsx

@@ -3,7 +3,71 @@ import { useMountEffect } from "@/hooks/useMountEffect";
 import { cn } from "@/util/utils";
 import { useOnChange } from "@/hooks/useOnChange";
 
+function Handle({
+  direction,
+  isDragging,
+  onDoubleClick,
+}: {
+  direction: "vertical" | "horizontal";
+  isDragging: boolean;
+  onDoubleClick?: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        "absolute flex h-[1.25rem] w-[10px] flex-wrap items-center justify-center gap-[2px] bg-slate-800 pb-1 pt-1",
+        {
+          "cursor-col-resize": direction === "vertical",
+          "cursor-row-resize": direction === "horizontal",
+          "bg-slate-700": isDragging,
+        },
+      )}
+      onDoubleClick={() => onDoubleClick?.()}
+    >
+      <div className="flex w-full items-center justify-center gap-[0.15rem]">
+        <div
+          className={cn("h-[2px] w-[2px] rounded-full bg-[#666]", {
+            "bg-[#222]": isDragging,
+          })}
+        />
+        <div
+          className={cn("h-[2px] w-[2px] rounded-full bg-[#666]", {
+            "bg-[#222]": isDragging,
+          })}
+        />
+      </div>
+      <div className="flex w-full items-center justify-center gap-[0.15rem]">
+        <div
+          className={cn("h-[2px] w-[2px] rounded-full bg-[#666]", {
+            "bg-[#222]": isDragging,
+          })}
+        />
+        <div
+          className={cn("h-[2px] w-[2px] rounded-full bg-[#666]", {
+            "bg-[#222]": isDragging,
+          })}
+        />
+      </div>
+      <div className="flex w-full items-center justify-center gap-[0.15rem]">
+        <div
+          className={cn("h-[2px] w-[2px] rounded-full bg-[#666]", {
+            "bg-[#222]": isDragging,
+          })}
+        />
+        <div
+          className={cn("h-[2px] w-[2px] rounded-full bg-[#666]", {
+            "bg-[#222]": isDragging,
+          })}
+        />
+      </div>
+    </div>
+  );
+}
+
 interface Props {
+  className?: string;
+  classNameLeft?: string;
+  classNameRight?: string;
   /**
    * The direction of the splitter. If "vertical", the split bar is vertical,
    * etc.
@@ -38,6 +102,10 @@ interface Props {
    * key.
    */
   storageKey?: string;
+  /**
+   * Callback fired when the splitter is resized
+   */
+  onResize?: () => void;
 }
 
 type SizingTarget = "left" | "right" | "top" | "bottom";
@@ -196,7 +264,16 @@ const setStoredSizing = (
   localStorage.setItem(key, sizing);
 };
 
-function Splitter({ children, direction, split, storageKey }: Props) {
+function Splitter({
+  children,
+  className,
+  classNameLeft,
+  classNameRight,
+  direction,
+  split,
+  storageKey,
+  onResize,
+}: Props) {
   if (!Array.isArray(children) || children.length !== 2) {
     throw new Error("Splitter must have exactly two children");
   }
@@ -240,7 +317,9 @@ function Splitter({ children, direction, split, storageKey }: Props) {
       const newWidth = (newPixelPos / maxSize) * 100;
       const clampedWidth = Math.max(0, Math.min(newWidth, 100));
 
+      setIsClosed(false);
       setSplitPosition(clampedWidth);
+      onResize?.();
     };
 
     const onMouseUp = () => {
@@ -248,6 +327,7 @@ function Splitter({ children, direction, split, storageKey }: Props) {
       document.body.classList.remove("no-select-global");
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
+      onResize?.();
     };
 
     document.addEventListener("mousemove", onMouseMove);
@@ -255,6 +335,9 @@ function Splitter({ children, direction, split, storageKey }: Props) {
   };
 
   const [splitPosition, setSplitPosition] = useState<number>(50);
+  const [isClosed, setIsClosed] = useState(false);
+  const [closedSplitPosition, setClosedSplitPosition] =
+    useState<number>(splitPosition);
   const [isDragging, setIsDragging] = useState(false);
 
   useMountEffect(() => {
@@ -287,21 +370,51 @@ function Splitter({ children, direction, split, storageKey }: Props) {
     }
   });
 
+  /**
+   * A "snap" is:
+   * - if the splitter is not "closed", then "close it"
+   * - if the splitter is "closed", then "open it"
+   *
+   * "closed" depends on the `split` prop definition. For instance, if the
+   * `split` prop has `left` defined, then "closing" is the `left` side
+   * resizing down to 0.
+   *
+   * When "closing", the current splitPosition should be memorized and then
+   * returned to when an "open" happens.
+   */
+  const snap = () => {
+    if (isClosed) {
+      setSplitPosition(closedSplitPosition);
+    } else {
+      setClosedSplitPosition(splitPosition);
+      setSplitPosition(0);
+    }
+    setIsClosed(!isClosed);
+    onResize?.();
+  };
+
   return (
     <div
       className={cn(
         "splitter flex h-full w-full overflow-hidden",
         direction === "vertical" ? "flex-row" : "flex-col",
+        className || "",
       )}
       ref={containerRef}
     >
       {direction === "vertical" ? (
         <>
           <div
-            className={cn("left h-full", {
+            className={cn(
+              "left h-full",
+              {
                 "pointer-events-none cursor-col-resize select-none opacity-80":
                   isDragging,
-            })}
+                "overflow-x-hidden": direction === "vertical",
+                "overflow-y-hidden": direction !== "vertical",
+              },
+              classNameLeft,
+            )}
             style={{
               width: `calc(${splitPosition}% - (${splitterThickness} / 2))`,
             }}
@@ -310,16 +423,34 @@ function Splitter({ children, direction, split, storageKey }: Props) {
           </div>
           <div
             className={cn(
-              "splitter-bar z-[0] h-full w-[5px] cursor-col-resize bg-[#ccc] opacity-10 hover:opacity-90",
+              "splitter-bar relative z-[0] flex h-full w-[10px] cursor-col-resize items-center justify-center opacity-50 hover:opacity-100",
               { "opacity-90": isDragging },
             )}
             onMouseDown={onMouseDown}
-          ></div>
+            onDoubleClick={snap}
+          >
             <div
-            className={cn("right h-full", {
+              className={cn("h-full w-[2px] bg-slate-800", {
+                "bg-slate-700": isDragging,
+              })}
+            />
+            <Handle
+              direction={direction}
+              isDragging={isDragging}
+              onDoubleClick={snap}
+            />
+          </div>
+          <div
+            className={cn(
+              "right h-full",
+              {
                 "pointer-events-none cursor-col-resize select-none opacity-80":
                   isDragging,
-            })}
+                "overflow-x-hidden": direction === "vertical",
+                "overflow-y-hidden": direction !== "vertical",
+              },
+              classNameRight,
+            )}
             style={{
               width: `calc(100% - ${splitPosition}% - (${splitterThickness} / 2))`,
             }}

skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx

@@ -221,6 +221,7 @@ function convertToParametersYAML(
 
 type Props = {
   hideBackground?: boolean;
+  hideControls?: boolean;
   nodes: Array<AppNode>;
   edges: Array<Edge>;
   setNodes: (nodes: Array<AppNode>) => void;
@@ -233,10 +234,12 @@ type Props = {
   onDebuggableBlockCountChange?: (count: number) => void;
   onMouseDownCapture?: () => void;
   zIndex?: number;
+  onContainerResize?: number;
 };
 
 function FlowRenderer({
   hideBackground = false,
+  hideControls = false,
   nodes,
   edges,
   setNodes,
@@ -249,6 +252,7 @@ function FlowRenderer({
   onDebuggableBlockCountChange,
   onMouseDownCapture,
   zIndex,
+  onContainerResize,
 }: Props) {
   const reactFlowInstance = useReactFlow();
   const debugStore = useDebugStore();
@@ -485,14 +489,34 @@ function FlowRenderer({
 
   useAutoPan(editorElementRef, nodes);
 
+  useEffect(() => {
+    doLayout(nodes, edges);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onContainerResize]);
+
   const zoomLock = 1 as const;
   const yLockMax = 140 as const;
 
   /**
    * TODO(jdo): hack
+   *
+   * Locks the x position of the flow to an ideal x based on the ideal width
+   * of the flow. The ideal width is based on differently-width'd blocks.
    */
   const getXLock = () => {
+    const rect = editorElementRef.current?.getBoundingClientRect();
+
+    if (!rect) {
       return 24;
+    }
+
+    const width = rect.width;
+    const hasLoopBlock = nodes.some((node) => node.type === "loop");
+    const hasHttpBlock = nodes.some((node) => node.type === "http_request");
+    const idealWidth = hasHttpBlock ? 580 : hasLoopBlock ? 498 : 475;
+    const split = (width - idealWidth) / 2;
+
+    return Math.max(24, split);
   };
 
   useOnChange(debugStore.isDebugMode, (newValue) => {
@@ -673,7 +697,7 @@ function FlowRenderer({
           {!hideBackground && (
             <Background variant={BackgroundVariant.Dots} bgColor="#020617" />
           )}
-          <Controls position="bottom-left" />
+          {!hideControls && <Controls position="bottom-left" />}
         </ReactFlow>
       </BlockActionContext.Provider>
     </div>

skyvern-frontend/src/routes/workflows/editor/Workspace.tsx

@@ -28,6 +28,7 @@ import {
   PowerButton,
   ReloadButton,
 } from "@/components/FloatingWindow";
+import { Splitter } from "@/components/Splitter";
 import {
   Dialog,
   DialogContent,
@@ -127,6 +128,7 @@ function Workspace({
   const [showPowerButton, setShowPowerButton] = useState(true);
   const [reloadKey, setReloadKey] = useState(0);
   const [windowResizeTrigger, setWindowResizeTrigger] = useState(0);
+  const [containerResizeTrigger, setContainerResizeTrigger] = useState(0);
   const [isReloading, setIsReloading] = useState(false);
   const credentialGetter = useCredentialGetter();
   const queryClient = useQueryClient();
@@ -206,10 +208,10 @@ function Workspace({
   const hasLoopBlock = nodes.some((node) => node.type === "loop");
   const hasHttpBlock = nodes.some((node) => node.type === "http_request");
   const workflowWidth = hasHttpBlock
-    ? "39rem"
+    ? "35.1rem"
     : hasLoopBlock
-      ? "34.25rem"
+      ? "31.25rem"
-      : "33rem";
+      : "30rem";
 
   /**
    * Open a new tab (not window) with the browser session URL.
@@ -762,16 +764,18 @@ function Workspace({
       {/* infinite canvas, sub panels, browser, and timeline when in debug mode */}
       {showBrowser && (
         <div className="relative flex h-full w-full overflow-hidden overflow-x-hidden">
-          {/* infinite canvas */}
+          <Splitter
-          <div
+            className="splittah"
-            className="skyvern-split-left h-full"
+            classNameLeft="flex items-center justify-center"
-            style={{
+            direction="vertical"
-              width: workflowWidth,
+            split={{ left: workflowWidth }}
-              maxWidth: workflowWidth,
+            onResize={() => setContainerResizeTrigger((prev) => prev + 1)}
-            }}
           >
+            {/* infinite canvas */}
+            <div className="skyvern-split-left h-full w-full">
               <FlowRenderer
                 hideBackground={true}
+                hideControls={true}
                 nodes={nodes}
                 edges={edges}
                 setNodes={setNodes}
@@ -780,19 +784,12 @@ function Workspace({
                 onEdgesChange={onEdgesChange}
                 initialTitle={initialTitle}
                 workflow={workflow}
+                onContainerResize={containerResizeTrigger}
               />
             </div>
 
-          {/* divider*/}
-          <div className="mt-[8rem] h-[calc(100%_-_8rem)] w-[1px] bg-slate-800" />
-
             {/* browser & timeline & sub-panels in debug mode */}
-          <div
+            <div className="skyvern-split-right relative flex h-full items-end justify-center bg-[#020617] p-4 pl-6">
-            className="skyvern-split-right relative flex h-full items-end justify-center bg-[#020617] p-4 pl-6"
-            style={{
-              width: `calc(100% - ${workflowWidth})`,
-            }}
-          >
               {/* sub panels */}
               {workflowPanelState.active && (
                 <div
@@ -871,7 +868,9 @@ function Workspace({
                         "mr-16": !blockLabel,
                       })}
                     >
-                    {showPowerButton && <PowerButton onClick={() => cycle()} />}
+                      {showPowerButton && (
+                        <PowerButton onClick={() => cycle()} />
+                      )}
                       <ReloadButton
                         isReloading={isReloading}
                         onClick={() => reload()}
@@ -951,6 +950,7 @@ function Workspace({
                 </div>
               </div>
             </div>
+          </Splitter>
         </div>
       )}
     </div>

skyvern-frontend/src/routes/workflows/editor/reactFlowOverrideStyles.css

@@ -21,3 +21,8 @@
 .react-flow__handle-bottom {
   bottom: 3px;
 }
+
+.react-flow__attribution {
+  background-color: rgb(2 6 23);
+  color: white;
+}