Implementation:Ucbepic Docetl UseDecomposeWebSocket

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the custom React hook that manages WebSocket communication for operation decomposition tasks.

Description

The useDecomposeWebSocket hook provides a dedicated WebSocket connection to the backend's decomposition endpoint (/ws/decompose/{namespace}). It manages the connection lifecycle, sends decomposition requests with YAML config, step name, and operation name, handles streaming output messages (for terminal display), processes final results into DecomposeResult format, and supports cancellation by sending a "kill" message. The WebSocket automatically closes after receiving a result or error.

Usage

Used by the OperationCard component to run operation decomposition tasks with real-time output streaming to the terminal panel.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/hooks/useDecomposeWebSocket.ts
• Lines: 1-145

Signature

interface UseDecomposeWebSocketProps {
  namespace: string;
  onOutput?: (output: string) => void;
  onComplete?: (result: DecomposeResult) => void;
  onError?: (error: string) => void;
}

export function useDecomposeWebSocket(props: UseDecomposeWebSocketProps): {
  isConnected: boolean;
  isRunning: boolean;
  startDecomposition: (yamlConfig: string, stepName: string, opName: string) => Promise<void>;
  cancel: () => void;
  disconnect: () => void;
}

Import

import { useDecomposeWebSocket } from "@/hooks/useDecomposeWebSocket";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
namespace	string	Yes	User namespace for WebSocket URL
onOutput	(output: string) => void	No	Callback for streaming output
onComplete	(result: DecomposeResult) => void	No	Callback when decomposition completes
onError	(error: string) => void	No	Callback for errors

Outputs

Name	Type	Description
isConnected	boolean	Whether the WebSocket is connected
isRunning	boolean	Whether a decomposition is in progress
startDecomposition	function	Start a decomposition task
cancel	function	Cancel the running decomposition
disconnect	function	Close the WebSocket connection

Usage Examples

const { isRunning, startDecomposition, cancel } = useDecomposeWebSocket({
  namespace: "my-namespace",
  onOutput: (text) => appendToTerminal(text),
  onComplete: (result) => showComparisonDialog(result),
  onError: (err) => showError(err),
});

await startDecomposition(yamlConfig, "main_pipeline", "extract_themes");

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment