use Splitter for debugger layout (#3383)

2025-09-06 13:49:54 -07:00
parent 2e7cc94a9e
commit 68a88706f7
4 changed files with 347 additions and 187 deletions
--- a/skyvern-frontend/src/components/Splitter.tsx
+++ b/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))`,
            }}
--- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
+++ b/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>
--- a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
+++ b/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"
-      : "33rem";
+      ? "31.25rem"
+      : "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 */}
-          <div
-            className="skyvern-split-left h-full"
-            style={{
-              width: workflowWidth,
-              maxWidth: workflowWidth,
-            }}
+          <Splitter
+            className="splittah"
+            classNameLeft="flex items-center justify-center"
+            direction="vertical"
+            split={{ left: 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
-            className="skyvern-split-right relative flex h-full items-end justify-center bg-[#020617] p-4 pl-6"
-            style={{
-              width: `calc(100% - ${workflowWidth})`,
-            }}
-          >
+            <div className="skyvern-split-right relative flex h-full items-end justify-center bg-[#020617] p-4 pl-6">
              {/* 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>
--- a/skyvern-frontend/src/routes/workflows/editor/reactFlowOverrideStyles.css
+++ b/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;
+}