Implement modes for inspect panel (GH-7)

Author: ArtyomVancyan

langgraphics-web/src/components/Controls.tsx

@@ -3,7 +3,7 @@ import {Background, type ColorMode, type Edge, type Node, type NodeTypes, ReactF
 import {Controls} from "./Controls";
 import {CustomNode} from "./CustomNode";
 import {useFocus} from "../hooks/useFocus";
-import type {EdgeData, ExecutionEvent, NodeData} from "../types";
+import type {EdgeData, ExecutionEvent, InspectorMode, NodeData, ViewMode} from "../types";
 import type {RankDir} from "../layout";
 
 const nodeTypes: NodeTypes = {custom: CustomNode as NodeTypes[string]};
@@ -14,15 +14,18 @@ interface GraphCanvasProps {
     events: ExecutionEvent[];
     activeNodeId: string | null;
     inspect: ReactNode;
+    initialMode: ViewMode;
     initialRankDir?: RankDir;
     initialColorMode?: ColorMode;
+    initialInspect?: InspectorMode;
     onRankDirChange?: (v: RankDir) => void;
 }
 
-export function GraphCanvas({nodes, edges, events, activeNodeId, inspect, initialColorMode = "system", initialRankDir = "TB", onRankDirChange}: GraphCanvasProps) {
+export function GraphCanvas({nodes, edges, events, activeNodeId, inspect, initialMode = "auto", initialInspect = "off", 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 [inspectorMode, setInspectorMode] = useState<InspectorMode>(initialInspect);
+    const {isManual, goAuto, goManual, fitContent} = useFocus({nodes, edges, activeNodeId, rankDir, initialMode});
 
     const handleRankDirChange = useCallback(async (v: RankDir) => {
         setRankDir(v);
@@ -43,6 +46,7 @@ export function GraphCanvas({nodes, edges, events, activeNodeId, inspect, initia
             colorMode={colorMode}
             nodeTypes={nodeTypes}
             proOptions={{hideAttribution: true}}
+            className={`inspector-${inspectorMode}`}
             zoomOnDoubleClick={false} nodesDraggable={false}
             nodesConnectable={false} elementsSelectable={false}
             panOnDrag={isManual} zoomOnScroll={isManual} zoomOnPinch={isManual}
@@ -53,11 +57,16 @@ export function GraphCanvas({nodes, edges, events, activeNodeId, inspect, initia
                 goManual={goManual}
                 isManual={isManual}
                 colorMode={colorMode}
+                fitContent={fitContent}
                 setColorMode={setColorMode}
+                inspectorMode={inspectorMode}
                 setRankDir={handleRankDirChange}
+                setInspectorMode={setInspectorMode}
             />
             <Background/>
-            {inspect}
+            <div className={`inspect-wrapper-${inspectorMode}`}>
+                {inspect}
+            </div>
         </ReactFlow>
     );
 }

langgraphics-web/src/components/GraphCanvas.tsx

@@ -1,14 +1,15 @@
 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 type {EdgeData, NodeData, ViewMode} from "../types";
 import type {RankDir} from "../layout";
 
 interface UseFocusOptions {
     nodes: Node<NodeData>[];
     edges: Edge<EdgeData>[];
     activeNodeId: string | null;
     rankDir?: RankDir;
+    initialMode?: ViewMode;
 }
 
 const FIT_VIEW_DURATION = 1500;
@@ -36,9 +37,9 @@ 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, rankDir = "TB"}: UseFocusOptions) {
+export function useFocus({nodes, edges, activeNodeId, rankDir = "TB", initialMode = "auto"}: UseFocusOptions) {
     const {fitView} = useReactFlow();
-    const [mode, setMode] = useState<"auto" | "manual">("auto");
+    const [mode, setMode] = useState<"auto" | "manual">(initialMode);
     const prevMode = useRef<"auto" | "manual">(mode);
     const initialDone = useRef(false);
     const prevFocusId = useRef<string | null>(null);

langgraphics-web/src/hooks/useFocus.ts

@@ -58,6 +58,14 @@ html, body, #root {
     width: 50% !important;
 }
 
+.react-flow.inspector-tree .react-flow__renderer {
+    width: calc(100% - 220px) !important;
+}
+
+.react-flow.inspector-off .react-flow__renderer {
+    width: 100% !important;
+}
+
 @keyframes node-pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
@@ -115,83 +123,51 @@ html, body, #root {
     right: calc(50% + 10px);
 }
 
+.react-flow.inspector-tree .canvas-controls {
+    right: calc(220px + 10px);
+}
+
+.react-flow.inspector-off .canvas-controls {
+    right: 10px;
+}
+
 .mode-toggle {
     display: flex;
     overflow: hidden;
     border-radius: 2px;
+    border: 1px solid #3b82f6;
 }
 
 .mode-toggle button {
     flex: 1;
+    border: none;
+    display: flex;
     color: #3b82f6;
     cursor: pointer;
     font-size: 11px;
     font-weight: 400;
     padding: 4px 10px;
-    border: 1px solid #3b82f6;
+    align-items: center;
+    justify-content: center;
     background: var(--xy-node-background-color-default);
     transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
 }
 
+.mode-toggle button:not(:last-child) {
+    border-right: 1px solid #3b82f6;
+}
+
 .mode-toggle button.active {
     background: #3b82f6;
     color: #fff;
 }
 
-.theme-select {
-    width: 100%;
-    position: relative;
-}
-
-.theme-select-trigger {
-    width: 100%;
-    color: #3b82f6;
-    cursor: pointer;
-    font-size: 11px;
-    font-weight: 400;
-    text-align: left;
-    padding: 4px 10px;
-    border-radius: 2px;
-    border: 1px solid #3b82f6;
-    background: var(--xy-node-background-color-default);
-    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233b82f6'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-}
-
-.theme-select-popup {
-    left: 0;
-    right: 0;
-    display: flex;
-    overflow: hidden;
-    position: absolute;
-    border-radius: 2px;
-    top: calc(100% + 4px);
-    flex-direction: column;
-    border: 1px solid #3b82f6;
-    background: var(--xy-node-background-color-default);
-}
-
-.theme-select-popup button {
-    border: none;
-    color: #3b82f6;
-    cursor: pointer;
-    font-size: 11px;
-    font-weight: 400;
-    text-align: left;
-    padding: 4px 10px;
-    background: transparent;
-    transition: background 0.1s;
-}
-
-.theme-select-popup button:hover {
-    background: rgba(59, 130, 246, 0.25);
+.mode-toggle button svg {
+    fill: #3b82f6;
 }
 
-.theme-select-popup button.selected {
-    background: #3b82f6;
-    color: #fff;
+.mode-toggle button.active svg {
+    fill: #fff;
 }
 
 .inspect-panel {
@@ -378,3 +354,20 @@ html, body, #root {
 .inspect-detail-section.chat_model .inspect-detail-text:not(.error) {
     color: #4f46e5cc;
 }
+
+.inspect-wrapper-off {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.inspect-wrapper-tree .inspect-detail-pane {
+    display: none;
+}
+
+.inspect-wrapper-tree .inspect-panel {
+    width: 220px;
+}
+
+.inspect-wrapper-tree .inspect-tree-pane {
+    border-right: none;
+}

langgraphics-web/src/index.css

@@ -6,26 +6,31 @@ import {useWebSocket} from "./hooks/useWebSocket";
 import {useGraphState} from "./hooks/useGraphState";
 import {GraphCanvas} from "./components/GraphCanvas";
 import {InspectPanel} from "./components/InspectPanel";
+import type {ViewMode, InspectorMode} from "./types.ts";
 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} {
+function parseParams(): {theme: ColorMode; direction: RankDir, mode: ViewMode, inspect: InspectorMode} {
     const p = new URLSearchParams(window.location.search);
+    const mode = p.get("mode") ?? "auto";
     const theme = p.get("theme") ?? "system";
+    const inspect = p.get("inspect") ?? "off";
     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,
+        inspect: (["off", "tree", "full"].includes(inspect) ? inspect : "off") as InspectorMode,
+        theme: (["system", "light", "dark"].includes(theme) ? theme : "system") as ColorMode,
+        direction: (["TB", "LR"].includes(direction) ? direction : "TB") as RankDir,
+        mode: (["auto", "manual"].includes(mode) ? mode : "auto") as ViewMode,
     };
 }
 
-const {colorMode: initialColorMode, rankDir: initialRankDir} = parseParams();
+const {theme, mode, inspect, direction} = parseParams();
 
 function Index() {
-    const [rankDir, setRankDir] = useState<RankDir>(initialRankDir);
+    const [rankDir, setRankDir] = useState<RankDir>(direction);
     const {topology, events, nodeEntries} = useWebSocket(WS_URL);
     const {nodes, edges, activeNodeId} = useGraphState(topology, events, rankDir);
 
@@ -35,10 +40,12 @@ function Index() {
                 nodes={nodes}
                 edges={edges}
                 events={events}
+                initialMode={mode}
+                initialInspect={inspect}
+                initialColorMode={theme}
+                initialRankDir={direction}
                 activeNodeId={activeNodeId}
                 onRankDirChange={setRankDir}
-                initialRankDir={initialRankDir}
-                initialColorMode={initialColorMode}
                 inspect={<InspectPanel nodeEntries={nodeEntries}/>}
             />
         </ReactFlowProvider>

langgraphics-web/src/main.tsx

@@ -1,5 +1,8 @@
 import {Position} from "@xyflow/react";
 
+export type ViewMode = "auto" | "manual";
+export type InspectorMode = "off" | "tree" | "full";
+
 export type NodeStatus = "idle" | "active" | "completed" | "error";
 export type EdgeStatus = "idle" | "active" | "traversed" | "error";
 

langgraphics-web/src/types.ts

@@ -44,6 +44,8 @@ def watch(
     ws_port: int = 8765,
     open_browser: bool = True,
     direction: Literal["TB", "LR"] = "TB",
+    mode: Literal["auto", "manual"] = "auto",
+    inspect: Literal["off", "tree", "full"] = "off",
     theme: Literal["system", "dark", "light"] = "system",
 ) -> Viewport:
     topology = extract(graph)
@@ -54,7 +56,12 @@ def watch(
     start_ws_server(manager, host, ws_port)
 
     if open_browser:
-        defaults = (("theme", theme, "system"), ("direction", direction, "TB"))
+        defaults = (
+            ("mode", mode, "auto"),
+            ("theme", theme, "system"),
+            ("inspect", inspect, "off"),
+            ("direction", direction, "TB"),
+        )
         params = [f"{k}={v}" for k, v, default in defaults if v != default]
         query = ("?" + "&".join(params)) if params else ""
         webbrowser.open(f"http://{host}:{port}{query}")