Results Panel & Generative UI

When you ask a spatial question, the AI agent does more than return text. It selects from a catalog of typed UI components — tables, charts, comparison grids — and streams them into a dedicated Results Panel alongside the map. This is the generative UI system.

Why generative UI?

Traditional chatbot interfaces return unstructured text. That works for simple answers but falls short for spatial analysis. A table of scored parcels needs sortable columns, clickable rows that zoom the map, and export buttons. A score distribution needs a bar chart, not a paragraph of numbers.

The generative UI pattern lets the agent choose the right visual representation for each result. The agent decides what to show; the frontend decides how to render it.

graph LR
    Q[Your question] --> A[AI Agent]
    A --> T[Tool call]
    T --> R[Typed result]
    R --> C{Component selection}
    C --> DT[DataTable]
    C --> BC[BarChart]
    C --> CM[ComparisonMatrix]
    C --> SS[StatSummary]
    C --> MB[MessageBlock]
    C --> MS[MapSnapshot]

How it works

1. You type a spatial question in the chat console
2. The agent calls a spatial tool (score_parcels, spatial_query)
3. The tool returns structured data with a component type hint
4. The Results Panel renders the data using the matching component
5. Results stream in real-time as the agent works — no page refresh

Each result can contain multiple components. A scoring query might produce a StatSummary (totals), a DataTable (per-parcel scores), and a BarChart (score distribution) in a single response.

Component catalog

The agent selects from six component types based on the query and data shape.

Component	Best for	Interactive?
DataTable	Per-parcel results, query output	Sortable, clickable rows, multi-select
StatSummary	Aggregate metrics (counts, averages)	Display only
BarChart	Score distributions, criterion breakdowns	Clickable bars zoom the map
ComparisonMatrix	Side-by-side parcel comparison (up to 4)	Display only
MessageBlock	Explanatory text, methodology notes	Display only
MapSnapshot	Capture the current map view as an image	Click to capture

Map synchronization

Results are not isolated from the map. The panel and map stay in sync through bidirectional interaction:

• Click a table row and the map zooms to that parcel, highlighted in cyan
• Hover a table row and the map highlights the parcel in real-time
• Click a parcel on the map and the panel scrolls to the matching row
• Hover a parcel on the map and the panel highlights the matching row

This two-way binding means you can explore results spatially (on the map) or analytically (in the panel) and both views stay consistent.

Filtering and export

The Results Panel includes a filter sidebar and export toolbar.

Filters narrow results without a server roundtrip — status checkboxes, score range sliders, criteria toggles, and text search all apply instantly. Filtered results also sync to the map through layer dimming.

Exports capture results in three formats:

• CSV — tabular data without geometry, opens in any spreadsheet
• GeoJSON — includes geometry for use in GIS tools
• PDF — server-rendered report with optional map snapshot

All three formats respect the current scope: export all results, only selected rows (via checkboxes), or only filtered rows.

Learn more

• Use the Results Panel — step-by-step guide to working with results
• Architecture: Data Flow — how data moves from agent to UI