Elements¶

Elements are UI components that make your apps interactive and display data.

Element Categories¶

Display Elements¶

Show information to users:

Table: Tabular data with sorting, filtering, searching
PlotlyPlot: Interactive visualizations
RichText: Markdown-formatted text
Image: Display images
Infographic: Metrics and KPIs

Input Elements¶

Collect user input:

SingleDropdown: Select one option
MultiDropdown: Select multiple options
TextInput: Free-text input
NumericSlider: Numeric value selection
NumericRange: Range selection
DateTimeRange: Date/time range

Layout Elements¶

Organize other elements:

Dashboard: Grid-based layouts
Row: Horizontal arrangement
Column: Vertical arrangement

Using Elements¶

In run() Method¶

Display elements when step loads:

def run(self, flow_metadata):
    return Page(
        title="Data View",
        sections=[
            Section(
                title="Dataset",
                cards=[
                    Card(
                        title="Table",
                        content=[
                            Table(
                                id="data_table",
                                data=df
                            )
                        ]
                    )
                ]
            )
        ]
    )

In action() Method¶

Get user input and update display:

def action(self, flow_metadata):
    # Get input value
    filter_value = self.page.get_element_by_id("filter_dropdown").value

    # Process based on input
    filtered = df[df['category'] == filter_value]

    # Return updated page
    return Page(...)

Element IDs¶

Every element should have a unique ID:

dropdown = SingleDropdown(
    id="region_filter",  # Unique ID
    title="Select Region",
    options=["North", "South", "East", "West"]
)

# Later retrieve it
value = self.page.get_element_by_id("region_filter").value

Common Patterns¶

Input + Display¶

Collect input and update display:

# Input element
filter_dropdown = SingleDropdown(
    id="filter",
    title="Filter By",
    options=categories
)

# In action(), update table based on selection
def action(self, flow_metadata):
    selection = self.page.get_element_by_id("filter").value
    filtered_data = data[data['category'] == selection]

    return Page(
        sections=[
            Section(
                title="Filtered Data",
                cards=[
                    Card(content=[
                        filter_dropdown,  # Keep the input
                        Table(data=filtered_data)  # Updated table
                    ])
                ]
            )
        ]
    )

Multiple Visualizations¶

Combine different element types:

Card(
    title="Analysis",
    content=[
        RichText("## Summary"),
        Infographic(data=metrics),
        PlotlyPlot(figure=chart),
        Table(data=details)
    ]
)

Best Practices¶

Unique IDs: Every element needs a unique ID
Clear Labels: Use descriptive titles
Default Values: Provide sensible defaults
Validation: Validate user inputs
Performance: Large tables/plots may impact performance