Skip to content

Add Architecture page and inline docs to campaign_pacing_app#13

Open
ameliachu wants to merge 2 commits into
mainfrom
add/architecture-tab-docs
Open

Add Architecture page and inline docs to campaign_pacing_app#13
ameliachu wants to merge 2 commits into
mainfrom
add/architecture-tab-docs

Conversation

@ameliachu
Copy link
Copy Markdown
Collaborator

Summary

  • Adds an Architecture tab to the campaign_pacing_app, with a vertical data-flow diagram (Kafka → Spark RTM → Lakebase → FastAPI + React, joined to a UC-governed Delta segment table) and a 1–2 sentence description on each box.
  • Adds a left-nav shell (AppLayout / LeftNav / PageHeader) so the app is now three pages: Realtime monitor, Architecture, Settings.
  • Adds a persona-framing callout above the Realtime monitor: "Imagine you are a campaign manager who cares about whether your live campaigns are burning budget at the right rate…"
  • Aligns rectangle/callout colors to the Databricks brand palette via the styleguide ramps: navy for the Kafka chain, blue for RTM + Lakebase, lava for the Databricks App container + Delta. tailwind.config.ts gains databricks-lava / databricks-navy ramps sourced from adtech-measurement/docs/styleguide/colors.json.
  • Crops the Apache Spark and Delta Lake SVGs to glyph-only so they render at parity with the other Key Technologies icons.
  • Backend: campaigns.py joins segment_definition from media_advertising.segments.megacorp_segment_definitions at read time so each card shows audience context; main.py SPA fallback now serves static files from dist/ (so /favicon, /logos, /icons work in production).
  • Adds frontend/.gitignore for node_modules/, dist/, .vite/.

Out of scope (separate PRs)

  • Audience Segmentation app (segment_builder/) — stays on local main for its own PR.
  • Brandfolder API integration (src/api/brand.py, src/core/brandfolder.py, Settings "Brand assets" panel) — dev-only scaffolding, intentionally excluded.

Test plan

  • cd campaign_pacing_app/frontend && npm install && npm run build succeeds.
  • uvicorn src.main:app --port 8000 serves the built SPA at / with favicon + MegaCorp logo loading from public/.
  • Realtime monitor tab shows the blue persona callout above the campaign cards; cards still render with live pacing data from Lakebase.
  • Architecture tab renders the 7 boxes with descriptions; clicking the link-arrow on the Spark/Lakebase/Delta boxes opens the right Databricks workspace URLs.
  • Settings tab shows Appearance toggle + Lakebase/UC resource links + Pipelines (no Brand assets section).
  • Light/dark theme toggle preserves the navy/blue/lava treatment on the Architecture page.

This pull request and its description were written by Isaac.

Builds out the campaign_pacing_app as a multi-page Databricks App so
the realtime monitor surfaces *what's happening* alongside *why it
matters*:

- New left-nav shell (AppLayout / LeftNav / PageHeader) routing to
  three pages: Realtime monitor, Architecture, Settings.
- Architecture page: vertical data flow (Kafka → Spark RTM →
  Lakebase → FastAPI + React, joined to a Delta segment table) with
  a 1–2 sentence description per box and a Key Technologies legend
  linking to docs.
- Realtime monitor: intro callout framing the campaign-manager
  persona — pacing decisions in ~2s via Lakebase + Spark RTM.
- Tone system aligned to Databricks brand palette (navy = Kafka
  chain, blue = RTM + Lakebase, lava = Databricks App + Delta);
  tailwind.config.ts gains databricks-lava/navy ramps from the
  styleguide.
- Icons cropped to glyph-only and sized consistently (apache-spark,
  delta-lake).
- Backend: campaigns.py joins segment_definition from UC at read
  time; main.py SPA fallback now serves static files from dist so
  /favicon, /logos, /icons work in production.

Co-authored-by: Isaac
Closes the loop on the persona callout: after the "Imagine you are a
campaign manager…" pitch, point the reader to the Architecture tab
for the under-the-hood story. CampaignDashboard accepts an optional
onNavigateToArchitecture callback; AppLayout wires it up to flip the
nav page state.

Co-authored-by: Isaac
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant