Implementation:ArroyoSystems Arroyo Udf State

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, React, UDFs, StateManagement
Last Updated	2026-02-08 08:00 GMT

Overview

A React context module that manages the complete lifecycle of local and global UDFs, including creation, editing, deletion, tab management, override detection, and localStorage persistence.

Description

This module provides the LocalUdfsContext and getLocalUdfsContextValue for managing UDF state across the pipeline editor. Key features:

State management:

localUdfs -- Array of LocalUdf objects persisted to localStorage via use-local-storage. Each has name, definition, language (python/rust), id, open state, and optional errors.
openedGlobalUdfs -- Tracks which global UDFs have been opened in editor tabs (in-memory only).
editorTab -- Current active editor tab index (0 = Query, 1+ = UDFs).

Operations:

newUdf(language) -- Creates a new local UDF with default template code (Rust or Python) and opens it.
openTab(udf) -- Opens a UDF in the editor tabs. For global UDFs, adds to openedGlobalUdfs.
closeUdf(udf) -- Closes the editor tab for the UDF.
deleteLocalUdf(udf) -- Removes a local UDF from the list.
deleteGlobalUdf(udf) -- Deletes a global UDF via the API.
deleteUdf(udf) -- Universal delete handling both local and global.
updateLocalUdf(udf, update) -- Partial update for definition, open state, or name.
isOverridden(udf) -- Returns true if a global UDF has a local UDF with the same name root.
isGlobal(udf) -- Checks if a UDF is in the global UDFs list.

Helper:

nameRoot(name) -- Extracts the leaf name from a path-like UDF name (splits on /, returns last segment).

Usage

The context is provided at the App level and consumed throughout UDF-related components (UdfEditTab, UdfNodePopover, UdfsResourceTab, GlobalizeModal, CreatePipeline).

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/udf_state.ts

Signature

export interface LocalUdf {
  name: string;
  definition: string;
  language: 'python' | 'rust';
  id: string;
  open: boolean;
  errors?: string[];
}

export const LocalUdfsContext: React.Context<{
  localUdfs: LocalUdf[];
  setLocalUdfs: (localUdfs: LocalUdf[]) => void;
  deleteLocalUdf: (udf: LocalUdf) => void;
  deleteGlobalUdf: (udf: GlobalUdf) => void;
  deleteUdf: (udf: LocalUdf | GlobalUdf) => void;
  openedUdfs: (GlobalUdf | LocalUdf)[];
  openTab: (tabItem: 'query' | LocalUdf | GlobalUdf) => void;
  closeUdf: (udf: LocalUdf | GlobalUdf) => void;
  isOverridden: (udf: LocalUdf | GlobalUdf) => boolean;
  updateLocalUdf: (udf: LocalUdf, update: { definition?; open?; name? }) => void;
  isGlobal: (udf: LocalUdf | GlobalUdf) => boolean;
  newUdf: (language: 'python' | 'rust') => void;
  editorTab: number;
  handleEditorTabChange: (index: number) => void;
}>;

export const getLocalUdfsContextValue: () => typeof LocalUdfsContext;
export const nameRoot: (name: string | undefined) => string;

Import

import { LocalUdfsContext, LocalUdf, getLocalUdfsContextValue, nameRoot } from './udf_state';

I/O Contract

Inputs

Name	Type	Required	Description
localStorage key "localUdfs"	JSON	No	Persisted local UDF definitions
useGlobalUdfs()	API hook	Yes	Provides global UDF list and CRUD operations

Outputs

Name	Type	Description
LocalUdfsContext	React Context	Provides UDF state and operations to consuming components
localStorage persistence	Side effect	Saves local UDF changes to browser localStorage

Usage Examples

// Consuming the context in a component
const { localUdfs, newUdf, openTab, isGlobal } = useContext(LocalUdfsContext);

// Creating a new Rust UDF
newUdf('rust');

// Checking if a UDF is overridden
if (isOverridden(someGlobalUdf)) {
  // Show warning
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment