Add rank direction controls and update layout handling

Author: ArtyomVancyan

langgraphics-web/src/components/Controls.tsx

@@ -1,9 +1,12 @@
 import {useEffect, useRef, useState} from "react";
 import type {ColorMode} from "@xyflow/react";
+import type {RankDir} from "../layout";
 
 interface ControlsProps {
     colorMode: ColorMode;
     setColorMode: (v: ColorMode) => void;
+    rankDir: RankDir;
+    setRankDir: (v: RankDir) => void;
     goAuto: () => void;
     goManual: () => void;
     isManual: boolean;
@@ -15,7 +18,7 @@ const themeOptions: { value: ColorMode; label: string }[] = [
     {value: "dark", label: "Dark"},
 ];
 
-export function Controls({isManual, colorMode, setColorMode, goAuto, goManual}: ControlsProps) {
+export function Controls({isManual, colorMode, setColorMode, rankDir, setRankDir, goAuto, goManual}: ControlsProps) {
     const [open, setOpen] = useState(false);
     const ref = useRef<HTMLDivElement>(null);
 
@@ -38,6 +41,10 @@ export function Controls({isManual, colorMode, setColorMode, goAuto, goManual}:
                 <button className={isManual ? "" : "active"} onClick={goAuto}>Auto</button>
                 <button className={isManual ? "active" : ""} onClick={goManual}>Manual</button>
             </div>
+            <div className="mode-toggle">
+                <button className={rankDir === "TB" ? "active" : ""} onClick={() => setRankDir("TB")}>↕</button>
+                <button className={rankDir === "LR" ? "active" : ""} onClick={() => setRankDir("LR")}>↔</button>
+            </div>
             <div className="theme-select" ref={ref}>
                 <button className="theme-select-trigger" onClick={() => setOpen((v) => !v)}>
                     {current.label}

langgraphics-web/src/components/GraphCanvas.tsx

@@ -1,9 +1,10 @@
-import {type ReactNode, useState} from "react";
+import {type ReactNode, useCallback, useState} from "react";
 import {Background, type ColorMode, type Edge, type Node, type NodeTypes, ReactFlow} from "@xyflow/react";
 import {Controls} from "./Controls";
 import {CustomNode} from "./CustomNode";
 import {useFocus} from "../hooks/useFocus";
 import type {EdgeData, NodeData} from "../types";
+import type {RankDir} from "../layout";
 
 const nodeTypes: NodeTypes = {custom: CustomNode as NodeTypes[string]};
 
@@ -12,11 +13,21 @@ interface GraphCanvasProps {
     edges: Edge<EdgeData>[];
     activeNodeId: string | null;
     inspect: ReactNode;
+    initialRankDir?: RankDir;
+    initialColorMode?: ColorMode;
+    onRankDirChange?: (v: RankDir) => void;
 }
 
-export function GraphCanvas({nodes, edges, activeNodeId, inspect}: GraphCanvasProps) {
-    const [colorMode, setColorMode] = useState<ColorMode>("system");
-    const {isManual, goAuto, goManual} = useFocus({nodes, edges, activeNodeId});
+export function GraphCanvas({nodes, edges, activeNodeId, inspect, initialColorMode = "system", initialRankDir = "TB", onRankDirChange}: GraphCanvasProps) {
+    const [rankDir, setRankDir] = useState<RankDir>(initialRankDir);
+    const [colorMode, setColorMode] = useState<ColorMode>(initialColorMode);
+    const {isManual, goAuto, goManual, fitContent} = useFocus({nodes, edges, activeNodeId, rankDir});
+
+    const handleRankDirChange = useCallback(async (v: RankDir) => {
+        setRankDir(v);
+        onRankDirChange?.(v);
+        await fitContent();
+    }, [onRankDirChange, fitContent])
 
     return (
         <ReactFlow
@@ -31,10 +42,12 @@ export function GraphCanvas({nodes, edges, activeNodeId, inspect}: GraphCanvasPr
         >
             <Controls
                 goAuto={goAuto}
+                rankDir={rankDir}
                 goManual={goManual}
                 isManual={isManual}
                 colorMode={colorMode}
                 setColorMode={setColorMode}
+                setRankDir={handleRankDirChange}
             />
             <Background/>
             {inspect}

langgraphics-web/src/hooks/useFocus.ts

@@ -2,19 +2,20 @@ import {useCallback, useEffect, useMemo, useRef, useState} from "react";
 import type {Edge, Node} from "@xyflow/react";
 import {useReactFlow} from "@xyflow/react";
 import type {EdgeData, NodeData} from "../types";
-import {IS_HORIZONTAL} from "../layout";
+import type {RankDir} from "../layout";
 
 interface UseFocusOptions {
     nodes: Node<NodeData>[];
     edges: Edge<EdgeData>[];
     activeNodeId: string | null;
+    rankDir?: RankDir;
 }
 
 const FIT_VIEW_DURATION = 1500;
 
-function getNeighbourIds(nodeId: string, nodes: Node<NodeData>[], edges: Edge<EdgeData>[]): any[] {
+function getNeighbourIds(nodeId: string, nodes: Node<NodeData>[], edges: Edge<EdgeData>[], isHorizontal: boolean): any[] {
     const nodeRank = new Map<string, number>(
-        nodes.map((n) => [n.id, IS_HORIZONTAL ? n.position.x : n.position.y]),
+        nodes.map((n) => [n.id, isHorizontal ? n.position.x : n.position.y]),
     );
     const selfRank = nodeRank.get(nodeId) ?? 0;
 
@@ -35,20 +36,25 @@ function getNeighbourIds(nodeId: string, nodes: Node<NodeData>[], edges: Edge<Ed
     return [before?.id, after?.id].filter((id): id is string => id !== undefined).map((id) => ({id}));
 }
 
-export function useFocus({nodes, edges, activeNodeId}: UseFocusOptions) {
+export function useFocus({nodes, edges, activeNodeId, rankDir = "TB"}: UseFocusOptions) {
     const {fitView} = useReactFlow();
     const [mode, setMode] = useState<"auto" | "manual">("auto");
     const prevMode = useRef<"auto" | "manual">(mode);
     const initialDone = useRef(false);
     const prevFocusId = useRef<string | null>(null);
 
     const isManual = useMemo(() => mode === "manual", [mode]);
+    const isHorizontal = useMemo(() => ["LR", "RL"].includes(rankDir), [rankDir]);
 
-    const goAuto = useCallback(async () => {
-        setMode("auto");
+    const fitContent = useCallback(async () => {
         await fitView({duration: FIT_VIEW_DURATION});
     }, [fitView])
 
+    const goAuto = useCallback(async () => {
+        setMode("auto");
+        await fitContent();
+    }, [fitContent])
+
     const goManual = useCallback(() => {
         setMode("manual");
     }, [])
@@ -61,7 +67,7 @@ export function useFocus({nodes, edges, activeNodeId}: UseFocusOptions) {
             const startNode = nodes.find((n) => n.data.nodeType === "start");
             if (startNode) {
                 fitView({
-                    nodes: [startNode, ...getNeighbourIds(startNode.id, nodes, edges)],
+                    nodes: [startNode, ...getNeighbourIds(startNode.id, nodes, edges, isHorizontal)],
                     duration: 0,
                 }).then();
             }
@@ -83,12 +89,12 @@ export function useFocus({nodes, edges, activeNodeId}: UseFocusOptions) {
                 fitView({duration: FIT_VIEW_DURATION}).then();
             } else {
                 fitView({
-                    nodes: [{id: activeNodeId}, ...getNeighbourIds(activeNodeId, nodes, edges)],
+                    nodes: [{id: activeNodeId}, ...getNeighbourIds(activeNodeId, nodes, edges, isHorizontal)],
                     duration: FIT_VIEW_DURATION,
                 }).then();
             }
         }
-    }, [nodes, edges, activeNodeId, fitView, mode]);
+    }, [nodes, edges, activeNodeId, fitView, mode, isHorizontal]);
 
-    return {isManual, goAuto, goManual};
+    return {isManual, goAuto, goManual, fitContent};
 }

langgraphics-web/src/hooks/useGraphState.ts

@@ -1,7 +1,7 @@
 import {useMemo} from "react";
 import {type Edge, MarkerType, type Node} from "@xyflow/react";
 import type {EdgeData, EdgeStatus, ExecutionEvent, GraphMessage, NodeData, NodeStatus} from "../types";
-import {computeLayout} from "../layout";
+import {computeLayout, type RankDir} from "../layout";
 
 export function computeStatuses(events: ExecutionEvent[]): {
     nodeStatuses: Map<string, NodeStatus>;
@@ -45,11 +45,11 @@ export function computeStatuses(events: ExecutionEvent[]): {
     return {nodeStatuses, edgeStatuses};
 }
 
-export function useGraphState(topology: GraphMessage | null, events: ExecutionEvent[]) {
+export function useGraphState(topology: GraphMessage | null, events: ExecutionEvent[], rankDir: RankDir = "TB") {
     const base = useMemo(() => {
         if (!topology) return {nodes: [] as Node<NodeData>[], edges: [] as Edge<EdgeData>[]};
-        return computeLayout(topology);
-    }, [topology]);
+        return computeLayout(topology, rankDir);
+    }, [topology, rankDir]);
 
     return useMemo(() => {
         if (events.length === 0) return {nodes: base.nodes, edges: base.edges, activeNodeId: null as string | null};

langgraphics-web/src/hooks/useInspectTree.tsx

@@ -116,7 +116,7 @@ export function useInspectTree(
     nodeOutputLog: NodeOutputEntry[],
     nodeStepLog: NodeStepEntry[],
 ) {
-    const [selectedKey, setSelectedKey] = useState<string>("");
+    const [selectedKey, setSelectedKey] = useState<string>("log-0");
 
     const depthMap = useMemo(
         () => topology ? computeDepthMap(topology) : new Map<string, NodeMeta>(),

langgraphics-web/src/layout.ts

@@ -3,26 +3,28 @@ import {Position} from "@xyflow/react";
 import type {Edge, Node} from "@xyflow/react";
 import type {EdgeData, GraphMessage, NodeData} from "./types";
 
-const RANK_DIR = "TB";
+export type RankDir = "TB" | "LR";
+
 const NODE_WIDTH = 180;
 const NODE_HEIGHT = 60;
 const SMALL_NODE_WIDTH = 120;
 const SMALL_NODE_HEIGHT = 40;
-const DIRECTIONS_MAP: any = {
+const DIRECTIONS_MAP: Record<string, Position> = {
     T: Position.Top, L: Position.Left,
     R: Position.Right, B: Position.Bottom,
-}
-const RANK_TO = DIRECTIONS_MAP[RANK_DIR[1]] as Position;
-const RANK_FROM = DIRECTIONS_MAP[RANK_DIR[0]] as Position;
-export const IS_HORIZONTAL = ["LR", "RL"].includes(RANK_DIR);
+};
 
-export function computeLayout(topology: GraphMessage): {
+export function computeLayout(topology: GraphMessage, rankDir: RankDir = "TB"): {
     nodes: Node<NodeData>[];
     edges: Edge<EdgeData>[];
 } {
+    const RANK_TO = DIRECTIONS_MAP[rankDir[1]] as Position;
+    const RANK_FROM = DIRECTIONS_MAP[rankDir[0]] as Position;
+    const IS_HORIZONTAL = ["LR", "RL"].includes(rankDir);
+
     const g = new dagre.graphlib.Graph();
     g.setDefaultEdgeLabel(() => ({}));
-    g.setGraph({rankdir: RANK_DIR, ranksep: 80, nodesep: 60, marginx: 20, marginy: 20});
+    g.setGraph({rankdir: rankDir, ranksep: 80, nodesep: 60, marginx: 20, marginy: 20});
 
     for (const n of topology.nodes) {
         const isTerminal = n.node_type === "start" || n.node_type === "end";

langgraphics-web/src/main.tsx

@@ -1,24 +1,43 @@
+import {useState} from "react";
 import {createRoot} from "react-dom/client";
+import {type ColorMode} from "@xyflow/react";
 import {ReactFlowProvider} from "@xyflow/react";
 import {useWebSocket} from "./hooks/useWebSocket";
 import {useGraphState} from "./hooks/useGraphState";
 import {GraphCanvas} from "./components/GraphCanvas";
 import {InspectPanel} from "./components/InspectPanel";
+import type {RankDir} from "./layout";
 import "@xyflow/react/dist/style.css";
 import "./index.css";
 
 const WS_URL = "ws://localhost:8765";
 
+function parseParams(): {colorMode: ColorMode; rankDir: RankDir} {
+    const p = new URLSearchParams(window.location.search);
+    const theme = p.get("theme") ?? "system";
+    const direction = p.get("direction") ?? "TB";
+    return {
+        colorMode: (["system", "light", "dark"].includes(theme) ? theme : "system") as ColorMode,
+        rankDir: (["TB", "LR"].includes(direction) ? direction : "TB") as RankDir,
+    };
+}
+
+const {colorMode: initialColorMode, rankDir: initialRankDir} = parseParams();
+
 function Index() {
+    const [rankDir, setRankDir] = useState<RankDir>(initialRankDir);
     const {topology, events, nodeOutputLog, nodeStepLog} = useWebSocket(WS_URL);
-    const {nodes, edges, activeNodeId} = useGraphState(topology, events);
+    const {nodes, edges, activeNodeId} = useGraphState(topology, events, rankDir);
 
     return (
         <ReactFlowProvider>
             <GraphCanvas
                 nodes={nodes}
                 edges={edges}
                 activeNodeId={activeNodeId}
+                initialColorMode={initialColorMode}
+                initialRankDir={initialRankDir}
+                onRankDirChange={setRankDir}
                 inspect={
                     <InspectPanel
                         nodes={nodes}