Implementation:ArroyoSystems Arroyo Catalog Component
| Knowledge Sources | |
|---|---|
| Domains | WebUI, React, Pipelines |
| Last Updated | 2026-02-08 08:00 GMT |
Overview
An accordion-based catalog viewer that displays available connection tables and their schema fields in the pipeline editor sidebar.
Description
Catalog renders a Chakra UI Accordion listing all available ConnectionTable objects. Each table is shown as an expandable accordion item with a table icon and the table name in monospace font. When expanded, it displays the table's schema fields using the recursive CatalogField component.
CatalogField handles two cases:
- Struct fields -- Recursively renders nested sub-fields with progressive indentation.
- Scalar fields -- Displays the field name on the left and SQL type name on the right in pink.
Usage
Rendered in the catalog sidebar tab of the CreatePipeline page to show tables available for SQL queries.
Code Reference
Source Location
- Repository: ArroyoSystems_Arroyo
- File: webui/src/routes/pipelines/Catalog.tsx
Signature
export function Catalog({ tables }: { tables: Array<ConnectionTable> }): JSX.Element;
Import
import { Catalog } from './Catalog';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| tables | Array<ConnectionTable> | Yes | List of connection tables with schema field definitions |
Outputs
| Name | Type | Description |
|---|---|---|
| Catalog view | React element | Expandable accordion listing tables and their typed fields |
Usage Examples
<Catalog tables={connectionTables} />
Related Pages
Page Connections
Double-click a node to navigate. Hold to expand connections.
Principle
Implementation
Heuristic
Environment