use-show-drawer.tsx

Overview

The use-show-drawer.tsx file contains a set of custom React hooks designed to manage the visibility and interaction logic for various UI drawers (side panels) within a graph-based application interface. These drawers include forms for node editing, debugging panels, chat interfaces, and log sheets.

The primary focus of this file is to encapsulate complex UI state management and user interaction behaviors related to showing and hiding drawers based on user actions, node states, and application conditions. It leverages shared state from a centralized graph store (useGraphStore) and modal state management hooks (useSetModalState) to coordinate visibility and interaction flows.

Exports

1. useShowFormDrawer

Purpose

Manages the visibility and interaction logic of a form drawer that allows users to edit or view details of a selected graph node.

Functionality

• Tracks the currently clicked node.

• Controls showing and hiding the form drawer modal.

• Handles click events on graph nodes to decide whether to show the form drawer.

• Extracts tool data from the clicked element to associate with the node.

Return Values

Returns an object containing:

• formDrawerVisible: boolean — Whether the form drawer is visible.

• hideFormDrawer: () => void — Function to hide the form drawer.

• showFormDrawer: (e: React.MouseEvent, nodeId: string) => void — Function to show the form drawer based on a click event and node ID.

• clickedNode: Node | undefined — The currently selected node data.

Parameters

None.

Usage Example

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

function onNodeClick(e: React.MouseEvent, nodeId: string) {
  showFormDrawer(e, nodeId);
}

2. useShowSingleDebugDrawer

Purpose

Manages the visibility of a drawer used for debugging a single node or operation. It ensures that the graph is saved before opening the debug drawer.

Functionality

• Saves the current graph state asynchronously.

• Shows the debug drawer if saving succeeds.

Return Values

Returns an object containing:

• singleDebugDrawerVisible: boolean — Whether the debug drawer is visible.

• showSingleDebugDrawer: () => Promise<void> — Async function to save the graph and show the debug drawer.

• hideSingleDebugDrawer: () => void — Function to hide the debug drawer.

Parameters

None.

Usage Example

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

async function onDebugClick() {
  await showSingleDebugDrawer();
}

3. useShowDrawer

Purpose

Provides a comprehensive hook that manages multiple drawer states and interactions:

• Run panel drawer (executes graph input operations)

• Chat panel drawer (for chat interactions)

• Single debug drawer

• Form drawer for node editing

It also manages the logic to switch between run and chat drawers based on the presence of inputs and handles node click events to show appropriate drawers.

Parameters

{
  drawerVisible: boolean;  // Controls overall drawer visibility
  hideDrawer: () => void;  // Callback to hide the drawer
}

Return Values

An object with the following properties and handlers:

• chatVisible: boolean — Whether the chat drawer is visible.

• runVisible: boolean — Whether the run drawer is visible.

• onPaneClick: () => void — Handler to hide the form drawer when clicking empty pane space.

• singleDebugDrawerVisible: boolean — Whether the single debug drawer is visible.

• showSingleDebugDrawer: () => Promise<void> — Function to show the single debug drawer.

• hideSingleDebugDrawer: () => void — Function to hide the single debug drawer.

• formDrawerVisible: boolean — Whether the node form drawer is visible.

• showFormDrawer: (e: React.MouseEvent, nodeId: string) => void — Handler to show the form drawer for a node.

• clickedNode: Node | undefined — Currently selected node.

• onNodeClick: NodeMouseHandler — Handler for node click events, managing which drawers appear.

• hideFormDrawer: () => void — Function to hide the form drawer.

• hideRunOrChatDrawer: () => void — Function to hide either run or chat drawer.

• showChatModal: () => void — Function to explicitly show the chat modal.

Usage Example

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

Important Implementation Details

• Uses React's useEffect to toggle showing run or chat drawer based on whether there are inputs for the "begin node".

• ExcludedNodes array prevents certain nodes (e.g., notes) from triggering form drawers.

• Handles special dataset attributes (data-play) on nodes for triggering debug drawer.

4. useShowLogSheet

Purpose

Manages a drawer/sheet that shows logs related to chat messages.

Parameters

{
  setCurrentMessageId: (id: string) => void; // Setter function for the current message id
}

Functionality

• Shows the log sheet drawer and sets the current message ID when invoked.

Return Values

Returns:

• logSheetVisible: boolean — Whether the log sheet drawer is visible.

• hideLogSheet: () => void — Function to hide the log sheet.

• showLogSheet: (messageId: string) => void — Function to show the log sheet for a given message ID.

Usage Example

const { logSheetVisible, showLogSheet, hideLogSheet } = useShowLogSheet({ setCurrentMessageId });

showLogSheet('msg-123');

5. useHideFormSheetOnNodeDeletion

Purpose

Automatically hides the form drawer if the currently selected node is deleted from the graph.

Parameters

{
  hideFormDrawer: () => void;
}

Functionality

• Listens to changes in the graph store's nodes and the selected node ID.

• If the selected node no longer exists, calls hideFormDrawer.

Usage Example

useHideFormSheetOnNodeDeletion({ hideFormDrawer });

Important Implementation Details & Algorithms

• Modal State Management: Multiple instances of useSetModalState are used to independently manage visibility states for different drawers. This abstraction likely provides visible, showModal, and hideModal for each modal instance.

• Graph Store Integration: The hooks heavily rely on useGraphStore to track the current clicked node, set clicked node/tool IDs, and access node data.

• Conditional Drawer Display: The main useShowDrawer hook switches between the run drawer and chat drawer depending on whether the application has inputs to process (useGetBeginNodeDataInputs).

• Event Dataset Attributes: The onNodeClick handler uses dataset attributes (data-tool and data-play) on event targets to determine which drawer to display and whether to trigger debug mode.

• Node Exclusion: Nodes labeled as Operator.Note are excluded from triggering form drawers, demonstrating role-based UI behavior control.

• Graph Save Before Debugging: The debug drawer is only shown after successfully saving the current graph state, preserving data integrity.

Interaction with Other Parts of the Application

• Hooks Imported:

  • useSetModalState — Manages modal visibility state.

  • useGraphStore — Central store for graph-related state and actions.

  • useCacheChatLog — Hook related to chat log management.

  • useGetBeginNodeDataInputs — Retrieves inputs for the start node in the graph.

  • useSaveGraph — Handles saving the current graph state.

• Constant Imports:

  • Operator — Enum or constants defining node types or labels (e.g., Tool, Note).

• Graph Interaction:

  • Manages UI state in response to graph node clicks and pane clicks.

  • Shows forms or debug drawers based on node types and user actions.

• UI Components:

  • Assumes modal/drawer UI components that consume visibility booleans and show/hide methods.

Visual Diagram

componentDiagram
    direction LR
    subgraph Hooks
      useShowFormDrawer
      useShowSingleDebugDrawer
      useShowDrawer
      useShowLogSheet
      useHideFormSheetOnNodeDeletion
    end

    subgraph Dependencies
      useSetModalState
      useGraphStore
      useCacheChatLog
      useGetBeginNodeDataInputs
      useSaveGraph
      Operator
    end

    useShowFormDrawer --> useSetModalState
    useShowFormDrawer --> useGraphStore

    useShowSingleDebugDrawer --> useSetModalState
    useShowSingleDebugDrawer --> useSaveGraph

    useShowDrawer --> useSetModalState
    useShowDrawer --> useShowSingleDebugDrawer
    useShowDrawer --> useShowFormDrawer
    useShowDrawer --> useGetBeginNodeDataInputs

    useShowLogSheet --> useSetModalState
    useShowLogSheet --> useCacheChatLog

    useHideFormSheetOnNodeDeletion --> useGraphStore
    useHideFormSheetOnNodeDeletion --> useShowFormDrawer

    Operator --> useShowFormDrawer
    Operator --> useShowDrawer

Summary

The use-show-drawer.tsx file is a critical piece of UI state management for an interactive graph application, providing modular hooks to control the visibility of various drawers related to node editing, debugging, chat, and logging. It integrates tightly with the graph state store and modal visibility hooks, offering a clean and maintainable approach to complex UI workflows driven by node interactions.