Node Settings Panel

Features

• Dynamic Content: Displays settings specific to the selected node's type.

• Node Information Header: Shows the selected node's label (or a generated name from its type), ID, and type.

• Execution Status: If the node has an execution result, it displays a badge indicating the status (e.g., Running, Executed, Error).

• Theming: Adapts its appearance (background, borders) based on the current theme (dark/light).

• Empty/Loading States:

  • Shows a loading animation (animate-pulse) while initially mounting.
  • Displays a message "Select a node to edit its settings" if no node is currently selected.
  • Shows "No settings available for this node." if the selected node type doesn't have a dedicated settings component.

Component Structure

1. State and Hooks:

   • Uses useFlowStore to get selectedNodeId, all nodes, and nodeResults.
   • Uses useTheme from next-themes to get the current theme for styling.
   • useState and useEffect for mounted state to prevent hydration mismatches, showing a loading state initially.
   • useMemo to efficiently find the selectedNode object.

2. Conditional Rendering:

   • Loading State: If !mounted, an animated placeholder is rendered.
   • No Node Selected: If !selectedNode, a message prompts the user to select a node.

   • Node-Specific Settings: A switch statement based on selectedNode.type determines which specific settings component to render. Supported types include:

     httpRequest, jsonNode, selectFields, delayNode, variableSetNode, transformNode, conditionalNode, loop, exportNode

     A default case handles unknown or settings-less node types.

3. Panel Layout:

   • Main container: <aside>.

   • Header (<header>): Contains node label/type, ID, and optional execution status badge (, , ).

   • Content (<section>): Scrollable area for the dynamic settings component.

Styling

• Uses cn utility for conditional class naming, primarily for theming.
• Background, border, and text colors adjust for dark/light modes (e.g., bg-[#0f172acc] vs bg-white).
• Header and content sections have distinct styling and borders.

Key Functionalities

• Node Selection Logic: Reacts to selectedNodeId changes from useFlowStore.
• Dynamic Component Rendering: The Panel variable is assigned the correct settings component JSX based on selectedNode.type.
• Execution Result Display: Fetches and displays node execution status and results.
• Label Generation: Generates display names for nodes without custom labels (e.g., httpRequest becomes "Http Request").

Imported Child Settings Components

The panel imports and utilizes components for specific node types. Refer to the component's source for the full list, including:

• SelectFieldsSettings
• HttpRequestSettings
• JsonNodeSettings
• ...and others for delay, variable set, transform, conditional, loop, and export nodes.