A tutorial published today shows how to build a fully interactive operations dashboard using only Python code. The project uses Prefab to generate a React-based interface with reactive state, charts, and tables. It then exports the result as a static HTML file that runs directly inside Google Colab. This workflow lets developers move from Python data logic to a modern user interface without writing frontend code by hand.
Installing Prefab in Colab
The setup begins by importing standard Python utilities and defining the Prefab version, app path, and HTML export path. The code installs the pinned prefab-ui package to ensure the tutorial runs consistently. An empty APP_CODE string is then created to build the complete application step by step.
import os
import sys
import base64
import subprocess
from pathlib import Path
from IPython.display import HTML, display, FileLink
PREFAB_VERSION = "0.20.2"
APP_PATH = Path("/content/prefab_advanced_tutorial_app.py")
HTML_PATH = Path("/content/prefab_advanced_dashboard.html")
subprocess.check_call([
sys.executable,
"-m",
"pip",
"install",
"-q",
f"prefab-ui=={PREFAB_VERSION}",
])
APP_CODE = ""
Generating Synthetic Operations Data
The next section creates realistic pipeline monitoring data. It imports random number generators and Prefab components like Alert, Button, and DataTable. The code defines lists for dates, regions, pipelines, owners, and states. It then loops through thirty days and multiple regions to generate volume, failures, and latency figures for each run.
import random
from collections import Counter, defaultdict
from datetime import date, timedelta
from prefab_ui.actions import AppendState, OpenLink, PopState, SetState, ShowToast, ToggleState
from prefab_ui.app import PrefabApp
from prefab_ui.components import (
Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardContent,
CardDescription, CardFooter, CardHeader, CardTitle, Code, Column,
DataTable, DataTableColumn, Form, Grid, H2, Input, Markdown, Mermaid,
Metric, Muted, Progress, Ring, Row, Slider, Small, Switch, Tab, Tabs,
Text
)
from prefab_ui.components.charts import (
BarChart, ChartSeries, LineChart, PieChart, RadarChart, ScatterChart,
Sparkline
)
from prefab_ui.components.control_flow import Else, ForEach, If
from prefab_ui.rx import EVENT, STATE
random.seed(42)
TODAY = date.today()
DATES = [TODAY - timedelta(days=29 - i) for i in range(30)]
REGIONS = ["All", "APAC", "EMEA", "NA", "LATAM"]
PIPELINES = [
"Customer 360 ETL",
"Invoice OCR",
"LLM Triage",
"Risk Scoring",
"Forecast Sync",
"Warehouse Load",
]
OWNERS = ["Data Platform", "AI Apps", "Revenue Ops", "Risk Engineering"]
STATES = ["Completed", "Completed", "Completed", "Completed", "Late", "Failed"]
PRIORITIES = ["P0", "P1", "P2", "P3"]
runs = []
daily_region_rows = []
for d in DATES:
for region in REGIONS[1:]:
region_bias = {
"APAC": 0.96,
"EMEA": 0.94,
"NA": 0.97,
"LATAM": 0.91,
}[region]
volume = random.randint(32, 78)
failures = 0
late = 0
total_cost = 0.0
total_latency = 0.0
total_revenue = 0.0
for i in range(volume):
pipeline = random.choice(PIPELINES)
owner = random.choice(OWNERS)
state = random.choices(
STATES,
weights=[
region_bias * 10,
6,
4,
3,
1.2,
max(0.2, (1 - region_bias) * 16),
],
k=1,
)[0]
duration = max(
12,
int(
random.gauss(95, 35)
+ (20 if state == "Late" else 0)
+ (45 if state == "Failed" else 0)
),
)
cost = round(max(0.09, random.lognormvariate(-1.15, 0.55) + duration / 1800), 2)
revenue = round(random.uniform(1.2, 8.5) * (1.3 if state == "Completed" else 0.6), 2)
priority = random.choices(PRIORITIES, weights=[1, 3, 7, 10], k=1)[0]
if state == "Failed":
failures += 1
if state == "Late":
late += 1
total_cost += cost
total_latency += duration
total_revenue += revenue
if d >= TODAY - timedelta(days=10) and (state in {"Failed", "Late"} or random.random() < 0.05):
runs.append({
"run_id": f"{d.strftime('%m%d')}-{region[:2]}-{len(runs)+1:04d}",
"date": d.strftime("%Y-%m-%d"),
"pipeline": pipeline,
"owner": owner,
"region": region,
"state": state,
"priority": priority,
"duration_s": duration,
"cost_usd": cost,
"revenue_k": revenue,
"sla_gap": round(max(0, duration - 120) / 60, 1),
})
daily_region_rows.append({
"date": d.strftime("%b %d"),
"region": region,
"runs": volume,
"failures": failures,
"late": late,
"success_rate": round(100 * (volume - failures - late * 0.35) / volume, 1),
"avg_latency": round(total_latency / volume, 1),
"cost_usd": round(total_cost, 2),
"revenue_k": round(total_revenue, 1),
})
runs = sorted(
runs,
key=lambda r: (r["priority"], r["state"] != "Failed", -r["duration_s"])
)[:80]
def aggregate_daily(rows):
by_date = defaultdict(lambda: {
"date": "",
"runs": 0,
"failures": 0,
"late": 0,
"cost_usd": 0.0,
"revenue_k": 0.0,
"latency_weighted": 0.0,
})
for r in rows:
bucket = by_date[r["date"]]
bucket["date"] = r["date"]
bucket["runs"] += r["runs"]
bucket["failures"] += r["failures"]
bucket["late"] += r["late"]
bucket["cost_usd"] += r["cost_usd"]
bucket["revenue_k"] += r["revenue_k"]
bucket["latency_weighted"] += r["avg_latency"] * r["runs"]
out = []
for d in [x.strftime("%b %d") for x in DATES]:
b = by_date[d]
if b["runs"]:
b["success_rate"] = round(100 * (b["runs"] - b["failures"] - b["late"] * 0.35) / b["runs"], 1)
b["avg_latency"] = round(b["latency_weighted"] / b["runs"], 1)
b["cost_usd"] = round(b["cost_usd"], 2)
b["revenue_k"] = round(b["revenue_k"], 1)
del b["latency_weighted"]
out.append(dict(b))
return out
def aggregate_regions(rows):
by_region = defaultdict(lambda: {
"region": "",
"runs": 0,
"failures": 0,
"late": 0,
"cost_usd": 0.0,
"revenue_k": 0.0,
"latency_weighted": 0.0,
})
for r in rows:
b = by_region[r["region"]]
b["region"] = r["region"]
b["runs"] += r["runs"]
b["failures"] += r["failures"]
b["late"] += r["late"]
b["cost_usd"] += r["cost_usd"]
b["revenue_k"] += r["revenue_k"]
b["latency_weightedSource Read original →More in AI Guides & Tutorials
