Implementation:ArroyoSystems Arroyo Example Query Card

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

Overview

An expandable card component that displays an example SQL query with a name, description, syntax-highlighted SQL, optional tutorial link, and a "Copy to Editor" button.

Description

ExampleQueryCard renders a Chakra UI Card with an Accordion containing a single expandable item. The collapsed view shows the example name and short description alongside a "Copy to Editor" button. When expanded, it reveals the long description, an optional external tutorial link, and a syntax-highlighted SQL code block (using react-syntax-highlighter with the vs2015 dark theme). Clicking "Copy to Editor" calls the setQuery callback and advances the tour to the Preview step.

Usage

Rendered within the ExampleQueries drawer on the pipeline creation page.

Code Reference

Source Location

• Repository: ArroyoSystems_Arroyo
• File: webui/src/components/ExampleQueryCard.tsx

Signature

export interface ExampleQueryCardProps {
  example: ExampleQuery;
  setQuery: (s: string) => void;
}

const ExampleQueryCard: React.FC<ExampleQueryCardProps>;
export default ExampleQueryCard;

Import

import ExampleQueryCard from '../components/ExampleQueryCard';

I/O Contract

Inputs

Name	Type	Required	Description
example	ExampleQuery	Yes	Object with name, shortDescription, longDescription, query, and optional url
setQuery	(s: string) => void	Yes	Callback to copy the SQL query to the editor

Outputs

Name	Type	Description
Card element	React element	Expandable card with query preview and copy-to-editor action

Usage Examples

<ExampleQueryCard example={exampleQuery} setQuery={setQuery} />

Related Pages

• Environment:ArroyoSystems_Arroyo_Webui_Runtime
• ArroyoSystems_Arroyo_Pipeline_Editor_Tabs