From 3bdec00d2f28c03e41ab0e64fa73e7cdd1e19f92 Mon Sep 17 00:00:00 2001 From: Anthony Volk <14987227+anth-volk@users.noreply.github.com> Date: Thu, 27 Aug 2026 23:11:01 +0400 Subject: [PATCH 01/12] Move target navigation into calibration fit --- frontend/app/microcosm/page.tsx | 13 +- frontend/app/microcosm/targets/page.tsx | 4 + .../calibration-target-navigation-cards.tsx | 144 ++++++++++++++++ .../microcosm/microcosm-overview-view.tsx | 9 +- .../microcosm/microcosm-targets-view.tsx | 156 ++---------------- 5 files changed, 184 insertions(+), 142 deletions(-) create mode 100644 frontend/components/microcosm/calibration-target-navigation-cards.tsx diff --git a/frontend/app/microcosm/page.tsx b/frontend/app/microcosm/page.tsx index a61f5535..6c4d1f5c 100644 --- a/frontend/app/microcosm/page.tsx +++ b/frontend/app/microcosm/page.tsx @@ -1,10 +1,19 @@ import { AppShell } from "@/components/layout/app-shell"; import { MicrocosmOverviewView } from "@/components/microcosm/microcosm-overview-view"; -export default function MicrocosmOverviewPage() { +interface MicrocosmOverviewPageProps { + searchParams?: Promise>; +} + +export default async function MicrocosmOverviewPage({ + searchParams, +}: MicrocosmOverviewPageProps) { + const params = await searchParams; + const rawRelease = Array.isArray(params?.release) ? params.release[0] : params?.release; + return ( - + ); } diff --git a/frontend/app/microcosm/targets/page.tsx b/frontend/app/microcosm/targets/page.tsx index 86558d64..57c2be82 100644 --- a/frontend/app/microcosm/targets/page.tsx +++ b/frontend/app/microcosm/targets/page.tsx @@ -13,6 +13,8 @@ export default async function MicrocosmTargetsPage({ const initialScope = rawScope === "healthcare" ? "healthcare" : "all"; const rawSource = Array.isArray(params?.source) ? params.source[0] : params?.source; const rawLevel = Array.isArray(params?.level) ? params.level[0] : params?.level; + const rawRelease = Array.isArray(params?.release) ? params.release[0] : params?.release; + const rawStart = Array.isArray(params?.start) ? params.start[0] : params?.start; return ( @@ -20,6 +22,8 @@ export default async function MicrocosmTargetsPage({ initialScope={initialScope} initialSource={rawSource ?? ""} initialLevel={rawLevel ?? ""} + initialRelease={rawRelease ?? ""} + initialStep={rawStart === "explore" ? "pick" : "results"} /> ); diff --git a/frontend/components/microcosm/calibration-target-navigation-cards.tsx b/frontend/components/microcosm/calibration-target-navigation-cards.tsx new file mode 100644 index 00000000..044473eb --- /dev/null +++ b/frontend/components/microcosm/calibration-target-navigation-cards.tsx @@ -0,0 +1,144 @@ +"use client"; + +import { useMemo } from "react"; +import Link from "next/link"; + +import { useCountry } from "@/components/layout/country-context"; +import { fmt } from "@/components/shared/format"; +import { useMicrocosmTargetDiagnostics } from "@/lib/api/hooks/use-microcosm"; +import { microcosmTargetsIntro } from "@/lib/microcosm/presentation"; + +type TargetDestination = "explore" | "healthcare" | "everything"; +type CardAccent = "teal" | "slate"; + +const ACCENTS: Record< + CardAccent, + { ink: string; border: string; glow: string } +> = { + teal: { + ink: "text-primary", + border: "hover:border-primary/50", + glow: "wiz-glow-teal", + }, + slate: { + ink: "text-muted-foreground", + border: "hover:border-border-dark", + glow: "wiz-glow-neutral", + }, +}; + +function targetHref( + country: string, + release: string, + destination: TargetDestination, +): string { + const params = new URLSearchParams({ country }); + if (release) params.set("release", release); + if (destination === "explore") params.set("start", "explore"); + if (destination === "healthcare") params.set("scope", "healthcare"); + return `/microcosm/targets?${params.toString()}`; +} + +function TargetNavigationCard({ + eyebrow, + title, + body, + stat, + accent, + href, +}: { + eyebrow: string; + title: string; + body: string; + stat: string; + accent: CardAccent; + href: string; +}) { + const styles = ACCENTS[accent]; + return ( + + + {eyebrow} + +
+

+ {title} +

+

{body}

+
+
+ {stat} + + → + +
+ + ); +} + +export function CalibrationTargetNavigationCards({ release }: { release?: string }) { + const { country } = useCountry(); + const { data, isPlaceholderData } = useMicrocosmTargetDiagnostics({ + release, + limit: 1, + }); + const variableGroupCount = useMemo( + () => + new Set( + (data?.variables ?? []).map((variable) => + [variable.source, variable.level, variable.variable].join("::"), + ), + ).size, + [data?.variables], + ); + const hasHealthcareTargets = + !isPlaceholderData && (data?.scope_counts?.healthcare ?? 0) > 0; + const allTargets = data?.total_targets ?? null; + + return ( +
+ + {hasHealthcareTargets ? ( + + ) : null} + +
+ ); +} diff --git a/frontend/components/microcosm/microcosm-overview-view.tsx b/frontend/components/microcosm/microcosm-overview-view.tsx index 87b3f6d1..a3b7667f 100644 --- a/frontend/components/microcosm/microcosm-overview-view.tsx +++ b/frontend/components/microcosm/microcosm-overview-view.tsx @@ -7,6 +7,7 @@ import { CalibrationExplorerDataPrefetch, CalibrationExplorerMap, } from "@/components/microcosm/calibration-explorer-map"; +import { CalibrationTargetNavigationCards } from "@/components/microcosm/calibration-target-navigation-cards"; import { ArtifactDescriptionBanner } from "@/components/microcosm/artifact-description-banner"; import { WEIGHTED_TARGET_ERROR_HELP } from "@/components/microcosm/calibration-explorer-view"; import { useCountry } from "@/components/layout/country-context"; @@ -70,9 +71,9 @@ function OverviewMetric({ label, value }: { label: ReactNode; value: string }) { ); } -export function MicrocosmOverviewView() { +export function MicrocosmOverviewView({ initialRelease = "" }: { initialRelease?: string }) { const { country } = useCountry(); - const [release, setRelease] = useState(""); + const [release, setRelease] = useState(initialRelease); const [pageIntroHeight, setPageIntroHeight] = useState(0); const { data: releaseData } = useMicrocosmReleases(); const { data, isLoading, error } = useMicrocosm(release || undefined); @@ -245,6 +246,10 @@ export function MicrocosmOverviewView() { /> + + + +