Semantic UI

A vibe-coded app connected directly to a semantic layer still has to handle every interaction itself. When a user picks a region, clicks a bar, or compares to last period, the agent writes code to rebuild each affected query: which filters apply to which charts, how a drill changes the grain, how to calculate the prior period. Every app does this differently, and this code is where the numbers usually go wrong.

Semantic UI is the layer between your frontend code and the semantic layer that handles this for you. Instead of building queries for each interaction, your page declares what it shows and how its parts are connected. Anfra Server turns each interaction into a new semantic query.

The three objects

The Anfra SDK gives your page three kinds of objects:

• Queries: the data each view needs, by dataset, dimension, and metric.
• Controls: inputs such as a region filter, a date drill, or a parameter.
• Interaction mappings: which controls and selections affect which queries.

Your page still decides how views look and how they respond to clicks. You can use any HTML, CSS, and charting library.

How an interaction runs

1. The user changes an input or clicks a view. The page updates the matching control or selection and calls app.execute().
2. The SDK sends the current queries, control values, and selections to Anfra Server.
3. The server applies the mappings, resolves each affected query through the semantic layer, and runs it on the warehouse.
4. Results return to the page. Your subscription redraws the views.

The browser does not calculate any numbers. Every result can be traced back to the query and metric definitions that produced it.

Inspect

Every result carries its provenance: the executed query, the fields and metric definitions it used, timing, cache status, and lineage. Use it to check where any number in an app comes from.

The examples in this section assume an app created with anfra.createApp().