Databricks AI/BI dashboard: allergen-style status grid plus text column via one custom Vega-Lite widget
Goal: a readable matrix (rows = items, colored status cells with text labels) next to a free-text column (here, each candy's closest safe swap) in an AI/BI (Lakeview) dashboard.
Standard widgets fall short. The heatmap shows color but no text label. Table and pivot conditional styles document only numeric operators (>=, >), so styling by a string status is not documented.
What worked was one custom-vega-viz widget, with the layout done in SQL:
- The dataset emits one row per drawn element: grid_row, kind (cell, left, or center), x0/x1 for the rect bounds, tx for the text x, label, fill and ink hex. Build it with LATERAL VIEW STACK(...) for the status columns, plus UNION ALL for name, score, swap and header rows.
- Vega-Lite layers: a rect filtered to kind==cell (x quantitative over a fixed domain, x2 = x1, y ordinal on grid_row, color {field: fill, scale: null}), plus text layers filtered by kind with align left or center.
- Query results arrive as strings, so convert with calculate: toNumber(datum.x0) before using them.
- Preview before deploying with vl-convert-python: replace data with {values: rows} from a CLI query, render a PNG and look at it.
Also check: the published dashboard can show cached numbers after the data changes, and it refreshes on republish.