Implementation:ArroyoSystems Arroyo Udfs Resource Tab

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

Overview

A sidebar panel that organizes UDFs into Local and Global sections, with a folder tree for global UDFs and buttons to create new Rust or Python UDFs.

Description

UdfsResourceTab renders a two-section Accordion (both sections open by default):

LOCAL section:

Lists all local UDFs from LocalUdfsContext using UdfNodeViewer for each.
Provides two "New UDF" buttons: one with a Rust icon and one with a Python icon, calling newUdf('rust') or newUdf('python').

GLOBAL section:

Fetches global UDFs via useGlobalUdfs and builds a folder tree (UdfNode) from each UDF's prefix path. The tree type is a discriminated union: either a UdfFolder (with id, folderName, and children) or a GlobalUdf/'LocalUdf leaf.
Folders are sorted before leaf UDFs. The tree is rendered recursively via UdfNodeViewer.

The component defines the UdfNode and UdfFolder types for the tree structure.

Usage

Rendered in the UDFs sidebar tab of the CreatePipeline page.

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/routes/udfs/UdfsResourceTab.tsx

Signature

export type UdfNode = UdfFolder | GlobalUdf | LocalUdf;

export interface UdfFolder {
  id: string;
  folderName: string;
  children: UdfNode[];
}

const UdfsResourceTab: React.FC<UdfsTabProps>;
export default UdfsResourceTab;

Import

import UdfsResourceTab from './UdfsResourceTab';

I/O Contract

Inputs

Name	Type	Required	Description
(none)	N/A	N/A	Uses LocalUdfsContext and useGlobalUdfs internally

Outputs

Name	Type	Description
UDF sidebar	React element	Two-section accordion with local and global UDF trees plus creation buttons

Usage Examples

<UdfsResourceTab />

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment