Implementation:ArroyoSystems Arroyo Udf Node Popover

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

Overview

A popover component that shows a UDF's definition with syntax highlighting when hovering over a UDF node in the resource sidebar, with a click-to-open-tab action and delete capability.

Description

UdfNodePopover renders a clickable button (the UDF trigger) that opens the UDF in an editor tab when clicked. On hover, a right-positioned Popover appears displaying:

• Header -- The UDF name (extracted via nameRoot) in a Code element. If the UDF is overridden by a local definition, the name is shown with strikethrough decoration and a warning text. A delete IconButton is included.
• Description -- The UDF description (for global UDFs).
• Definition -- Syntax-highlighted Rust code block using react-syntax-highlighter with the vs2015 dark theme.
• Delete modal -- DeleteUdfModal for confirming deletion.

Usage

Rendered by UdfNodeViewer for each UDF node in the sidebar resource tree.

Code Reference

Source Location

• Repository: ArroyoSystems_Arroyo
• File: webui/src/routes/udfs/UdfNodePopover.tsx

Signature

export interface UdfNodePopoverProps {
  udf: GlobalUdf | LocalUdf;
}

const UdfNodePopover: React.FC<UdfNodePopoverProps>;
export default UdfNodePopover;

Import

import UdfNodePopover from './UdfNodePopover';

I/O Contract

Inputs

Name	Type	Required	Description
udf	GlobalUdf or LocalUdf	Yes	The UDF to display

Outputs

Name	Type	Description
Popover element	React element	Hover popover with syntax-highlighted UDF definition

Usage Examples

<UdfNodePopover udf={globalUdf} />

Related Pages

• Environment:ArroyoSystems_Arroyo_Webui_Runtime
• ArroyoSystems_Arroyo_Udfs_Resource_Tab
• ArroyoSystems_Arroyo_Udf_State