Building dashboards in Noemata

This is the entry point for authoring frames — Noemata’s dashboards. Read it first, then follow the links below into the topic you need.

A frame is a single JSON file (*.frame.json) with two halves:

• a view — a semantic layer over your database tables (filters, derived columns, and metrics), described in Views;
• a page — a tree of UI blocks that query and visualize that view, described in Blocks.

Concepts explains how those two halves fit together and how data flows from a table to a chart. Cookbook has complete, working recipes you can copy.

The shape of a frame

{
  "title": "Checkout latency",
  "view": {
    "tables": [{ "from": { "frame": "@opentelemetry_core/traces" } }]
  },
  "page": {
    "@block/panel": {
      "title": "Latency (p95)",
      "@block/plot": { "marks": [{ "line": { "y": "DurationP95" } }] }
    }
  }
}

Only title, view, and page are required. view.tables is required (it may be empty); page may be null for a data-only frame that exists only to be reused by others.

How to author and validate

The loop is the same every time:

1. Find a base view. Don’t query raw tables. Build on the semantic layer the integrations install (for example @opentelemetry_core/traces), which already defines the columns and metrics you want. See Views.
2. Write the frame. Add a page of blocks that query and render the view’s metrics.
3. Validate. Run noemata validate from anywhere in the workspace. It loads every frame and reports schema and reference errors with file paths. Add --online to also render each frame against the live backend and catch runtime errors — bad SQL, missing columns, never-loading panels — that static validation can’t see. Fix and re-run until clean.
4. Render. noemata up serves the frame; open it in the browser to confirm it looks right against live data.

Where things live

• Your frames: anywhere under @frames/ in the workspace, as *.frame.json.
• Installed semantic layers and example dashboards: @frames/@<integration>/ (for example @frames/@opentelemetry_core/ and @frames/@opentelemetry/). Noemata owns these and overwrites them on every noemata up — extend them by reference, never edit them in place (see Views).
• These docs, installed into the project: @frames/@noemata/docs/.

Reference

• The installed OTel frames under @frames/@opentelemetry/ are the best worked examples — real, validated dashboards. Read them alongside Cookbook.
• The JSON schemas under noemata/schemas/ (frame.json, blocks.json) drive editor autocomplete and list every field and block in full.