use-show-drawer.tsx

Overview

The use-show-drawer.tsx file provides a set of React hooks designed to manage the visibility and interactions of various drawers (modal panels) within a graph-based UI application. These drawers include:

• A Form Drawer for displaying and editing node details.

• A Single Debug Drawer for debugging individual nodes.

• Run Drawer and Chat Drawer for different operational modes based on graph state.

This file orchestrates the display logic, user interactions (like node clicks), and modal state transitions in a cohesive manner, enabling a smooth user experience when interacting with graph nodes and their associated functionalities.

Detailed Explanation of Components

1. useShowFormDrawer

Purpose

Manages the state and behavior of the form drawer which shows details of a selected graph node.

Returns

{
  formDrawerVisible: boolean;       // Whether the form drawer is visible
  hideFormDrawer: () => void;       // Function to hide the form drawer
  showFormDrawer: (node: Node) => void; // Function to show the form drawer for a given node
  clickedNode: Node | undefined;    // The currently selected node
}

Usage

const { formDrawerVisible, showFormDrawer, hideFormDrawer, clickedNode } = useShowFormDrawer();

// Show drawer when a node is clicked
showFormDrawer(node);

// Hide drawer
hideFormDrawer();

Implementation Details

• Uses a global graph store (useGraphStore) to get and set the clicked node ID.

• Uses a modal state hook (useSetModalState) to toggle the drawer visibility.

• handleShow sets the clicked node ID and shows the drawer.

2. useShowSingleDebugDrawer

Purpose

Controls the visibility and logic for the single debug drawer, which is used to debug individual nodes.

Returns

{
  singleDebugDrawerVisible: boolean; // Whether the single debug drawer is visible
  showSingleDebugDrawer: () => Promise<void>; // Function to save the graph and then show debug drawer
  hideSingleDebugDrawer: () => void;          // Function to hide the debug drawer
}

Usage

const { singleDebugDrawerVisible, showSingleDebugDrawer, hideSingleDebugDrawer } = useShowSingleDebugDrawer();

// Show debug drawer after saving graph
await showSingleDebugDrawer();

Implementation Details

• Calls saveGraph() before showing the debug drawer to ensure up-to-date graph data.

• Shows the debug drawer only if the save operation is successful (code === 0).

3. useShowDrawer

Purpose

The primary hook that integrates and manages multiple drawers' visibility and interactions within the graph UI. It handles:

• Showing/hiding run and chat drawers based on the presence of "begin nodes" in the graph.

• Managing form drawer and single debug drawer visibility.

• Handling node clicks and pane clicks.

• Hiding/showing appropriate drawers based on user interactions.

Parameters

{
  drawerVisible: boolean; // Controls whether the overall drawer area is visible
  hideDrawer: () => void; // Function to hide the drawer area
}

Returns

{
  chatVisible: boolean;               // Visibility of chat drawer
  runVisible: boolean;                // Visibility of run drawer
  onPaneClick: () => void;            // Handler for clicking on the graph pane (background)
  singleDebugDrawerVisible: boolean; // Visibility of single debug drawer
  showSingleDebugDrawer: () => Promise<void>; // Show single debug drawer
  hideSingleDebugDrawer: () => void;          // Hide single debug drawer
  formDrawerVisible: boolean;         // Visibility of form drawer
  showFormDrawer: (node: Node) => void;       // Show form drawer for node
  clickedNode: Node | undefined;      // Currently clicked node
  onNodeClick: NodeMouseHandler;      // Handler for clicking on a node
  hideFormDrawer: () => void;          // Hide form drawer
  hideRunOrChatDrawer: () => void;     // Hide run and chat drawers and overall drawer
  showChatModal: () => void;            // Show chat drawer
}

Usage Example

const {
  chatVisible,
  runVisible,
  onPaneClick,
  singleDebugDrawerVisible,
  showSingleDebugDrawer,
  hideSingleDebugDrawer,
  formDrawerVisible,
  showFormDrawer,
  clickedNode,
  onNodeClick,
  hideFormDrawer,
  hideRunOrChatDrawer,
  showChatModal,
} = useShowDrawer({
  drawerVisible: isDrawerOpen,
  hideDrawer: () => setDrawerOpen(false),
});

Implementation Details

• Drawer Visibility Logic:

  • Uses useEffect to detect when the drawer becomes visible.

  • Queries "begin nodes" via useGetBeginNodeDataQuery.

  • If begin nodes exist, shows the run drawer; otherwise, shows the chat drawer.

  • Ensures only one of run/chat drawers is visible at a time.

• Node Interaction:

  • onNodeClick disables form drawer for excluded nodes (IterationStart and Note).

  • Shows form drawer for other nodes.

  • Detects clicks on a debug icon within a node to show the single debug drawer.

• Pane Interaction:

  • Clicking on the background pane hides the form drawer.

• Drawer Hiding:

  • hideRunOrChatDrawer hides both run and chat drawers and closes the drawer container.

• Excluded Nodes:

  • Nodes with labels IterationStart or Note do not trigger the form drawer.

Important Implementation Details and Algorithms

• State Management:

  • Uses custom hooks like useSetModalState for modal visibility state management.

  • Uses a centralized graph store (useGraphStore) for node selection state.

• Asynchronous Operations:

  • The single debug drawer display awaits saving the graph to ensure state consistency.

• Event Handling:

  • The node click handler is carefully designed to:

    • Ignore certain node types.

    • Differentiate between normal clicks and clicks on the debug icon using DOM dataset attributes.

• Conditional Drawer Display:

  • The drawer shown depends dynamically on the presence of "begin nodes" in the graph, making UI responsive to graph structure.

Interaction with Other Parts of the System

• Graph Store (useGraphStore):

  • Provides access to current graph nodes and clicked node ID.

  • Allows setting the clicked node.

• Modal State Hook (useSetModalState):

  • Abstracts modal visibility toggling logic used across different drawers.

• Graph Queries and Saving:

  • useGetBeginNodeDataQuery is queried to detect "begin nodes" which influence drawer display.

  • useSaveGraph is used to persist graph changes before debugging.

• Constants and Interfaces:

  • Uses Operator constants to filter excluded node types.

  • Uses Node and NodeMouseHandler types from @xyflow/react for typing node-related data and events.

Visual Diagram

componentDiagram
    component useShowDrawer {
        +chatVisible: boolean
        +runVisible: boolean
        +onPaneClick(): void
        +singleDebugDrawerVisible: boolean
        +showSingleDebugDrawer(): Promise<void>
        +hideSingleDebugDrawer(): void
        +formDrawerVisible: boolean
        +showFormDrawer(node: Node): void
        +clickedNode: Node | undefined
        +onNodeClick(e, node): void
        +hideFormDrawer(): void
        +hideRunOrChatDrawer(): void
        +showChatModal(): void
    }

    component useShowFormDrawer {
        +formDrawerVisible: boolean
        +hideFormDrawer(): void
        +showFormDrawer(node: Node): void
        +clickedNode: Node | undefined
    }

    component useShowSingleDebugDrawer {
        +singleDebugDrawerVisible: boolean
        +showSingleDebugDrawer(): Promise<void>
        +hideSingleDebugDrawer(): void
    }

    useShowDrawer --> useShowFormDrawer : uses
    useShowDrawer --> useShowSingleDebugDrawer : uses
    useShowDrawer --> useSetModalState : multiple instances
    useShowFormDrawer --> useGraphStore : gets/sets clickedNodeId
    useShowSingleDebugDrawer --> useSaveGraph : calls saveGraph()

Summary

The use-show-drawer.tsx file is a critical module for managing UI drawer components in a graph-based React application. It provides reusable hooks to:

• Show node details in a form drawer.

• Display debug information in a debug drawer.

• Switch between chat and run drawers based on the graph state.

• Handle user interactions like node clicks and pane clicks.

By encapsulating drawer logic, state management, and interaction handlers, it enables a modular and maintainable way to control complex UI modal behaviors around graph nodes.