feat: UC Metric Views on Analytics

apps/dev-playground/client/package.json

@@ -21,19 +21,23 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "lucide-react": "0.546.0",
+    "plotly.js": "^3.5.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "react-plotly.js": "^2.6.0",
     "recharts": "3.4.1",
     "tailwind-merge": "3.3.1",
     "tailwindcss-animate": "1.0.7",
     "tw-animate-css": "1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "9.36.0",
+    "@tailwindcss/postcss": "4.1.17",
     "@tanstack/router-cli": "1.133.20",
     "@types/node": "24.6.0",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
+    "@types/react-plotly.js": "^2.6.4",
     "@vitejs/plugin-react": "5.0.4",
     "autoprefixer": "10.4.21",
     "eslint": "9.36.0",
@@ -43,7 +47,6 @@
     "postcss": "8.5.6",
     "shiki": "3.15.0",
     "tailwindcss": "4.1.17",
-    "@tailwindcss/postcss": "4.1.17",
     "typescript": "5.9.3",
     "typescript-eslint": "8.45.0",
     "vite": "npm:rolldown-vite@7.1.14"

apps/dev-playground/client/src/main.tsx

@@ -1,9 +1,26 @@
+import {
+  type MetricsMetadataBundle,
+  registerMetricsMetadata,
+} from "@databricks/appkit-ui/format";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import React from "react";
 import ReactDOM from "react-dom/client";
+// Build-time-emitted metadata bundle. In a production app this file is
+// regenerated by `npx @databricks/appkit metric sync` (or the Vite plugin)
+// from `config/queries/metric.json`. Phase 7 ships a hand-authored copy so
+// the demo route at `/metrics` can wire format specs into Plotly even when
+// the dev workspace does not host the underlying UC metric views.
+import metricsMetadata from "../../shared/appkit-types/metrics.metadata.json";
 import { routeTree } from "./routeTree.gen";
 import "./index.css";
 
+// Register the metric metadata bundle once at startup so `useMetricView()`'s
+// `metadata` field is populated for every consumer in the app. The cast is
+// load-bearing: TypeScript widens JSON-imported string literals (`"sp"`) to
+// `string`, which the bundle's `lane: "sp" | "obo"` discriminant rejects.
+// The actual JSON values are hand-checked against the schema.
+registerMetricsMetadata(metricsMetadata as unknown as MetricsMetadataBundle);
+
 const router = createRouter({
   routeTree,
   defaultPreload: "intent",

apps/dev-playground/client/src/routeTree.gen.ts

@@ -16,6 +16,7 @@ import { Route as SqlHelpersRouteRouteImport } from './routes/sql-helpers.route'
 import { Route as ServingRouteRouteImport } from './routes/serving.route'
 import { Route as ReconnectRouteRouteImport } from './routes/reconnect.route'
 import { Route as PolicyMatrixRouteRouteImport } from './routes/policy-matrix.route'
+import { Route as MetricsRouteRouteImport } from './routes/metrics.route'
 import { Route as LakebaseRouteRouteImport } from './routes/lakebase.route'
 import { Route as JobsRouteRouteImport } from './routes/jobs.route'
 import { Route as GenieRouteRouteImport } from './routes/genie.route'
@@ -61,6 +62,11 @@ const PolicyMatrixRouteRoute = PolicyMatrixRouteRouteImport.update({
   path: '/policy-matrix',
   getParentRoute: () => rootRouteImport,
 } as any)
+const MetricsRouteRoute = MetricsRouteRouteImport.update({
+  id: '/metrics',
+  path: '/metrics',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LakebaseRouteRoute = LakebaseRouteRouteImport.update({
   id: '/lakebase',
   path: '/lakebase',
@@ -117,6 +123,7 @@ export interface FileRoutesByFullPath {
   '/genie': typeof GenieRouteRoute
   '/jobs': typeof JobsRouteRoute
   '/lakebase': typeof LakebaseRouteRoute
+  '/metrics': typeof MetricsRouteRoute
   '/policy-matrix': typeof PolicyMatrixRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
   '/serving': typeof ServingRouteRoute
@@ -135,6 +142,7 @@ export interface FileRoutesByTo {
   '/genie': typeof GenieRouteRoute
   '/jobs': typeof JobsRouteRoute
   '/lakebase': typeof LakebaseRouteRoute
+  '/metrics': typeof MetricsRouteRoute
   '/policy-matrix': typeof PolicyMatrixRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
   '/serving': typeof ServingRouteRoute
@@ -154,6 +162,7 @@ export interface FileRoutesById {
   '/genie': typeof GenieRouteRoute
   '/jobs': typeof JobsRouteRoute
   '/lakebase': typeof LakebaseRouteRoute
+  '/metrics': typeof MetricsRouteRoute
   '/policy-matrix': typeof PolicyMatrixRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
   '/serving': typeof ServingRouteRoute
@@ -174,6 +183,7 @@ export interface FileRouteTypes {
     | '/genie'
     | '/jobs'
     | '/lakebase'
+    | '/metrics'
     | '/policy-matrix'
     | '/reconnect'
     | '/serving'
@@ -192,6 +202,7 @@ export interface FileRouteTypes {
     | '/genie'
     | '/jobs'
     | '/lakebase'
+    | '/metrics'
     | '/policy-matrix'
     | '/reconnect'
     | '/serving'
@@ -210,6 +221,7 @@ export interface FileRouteTypes {
     | '/genie'
     | '/jobs'
     | '/lakebase'
+    | '/metrics'
     | '/policy-matrix'
     | '/reconnect'
     | '/serving'
@@ -229,6 +241,7 @@ export interface RootRouteChildren {
   GenieRouteRoute: typeof GenieRouteRoute
   JobsRouteRoute: typeof JobsRouteRoute
   LakebaseRouteRoute: typeof LakebaseRouteRoute
+  MetricsRouteRoute: typeof MetricsRouteRoute
   PolicyMatrixRouteRoute: typeof PolicyMatrixRouteRoute
   ReconnectRouteRoute: typeof ReconnectRouteRoute
   ServingRouteRoute: typeof ServingRouteRoute
@@ -289,6 +302,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PolicyMatrixRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/metrics': {
+      id: '/metrics'
+      path: '/metrics'
+      fullPath: '/metrics'
+      preLoaderRoute: typeof MetricsRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/lakebase': {
       id: '/lakebase'
       path: '/lakebase'
@@ -365,6 +385,7 @@ const rootRouteChildren: RootRouteChildren = {
   GenieRouteRoute: GenieRouteRoute,
   JobsRouteRoute: JobsRouteRoute,
   LakebaseRouteRoute: LakebaseRouteRoute,
+  MetricsRouteRoute: MetricsRouteRoute,
   PolicyMatrixRouteRoute: PolicyMatrixRouteRoute,
   ReconnectRouteRoute: ReconnectRouteRoute,
   ServingRouteRoute: ServingRouteRoute,

apps/dev-playground/client/src/routes/__root.tsx

@@ -40,6 +40,14 @@ function RootComponent() {
                     Analytics
                   </Button>
                 </Link>
+                <Link to="/metrics" className="no-underline">
+                  <Button
+                    variant="ghost"
+                    className="text-foreground hover:text-secondary-foreground"
+                  >
+                    Metrics
+                  </Button>
+                </Link>
                 <Link to="/arrow-analytics" className="no-underline">
                   <Button
                     variant="ghost"

apps/dev-playground/client/src/routes/index.tsx

@@ -108,6 +108,24 @@ function IndexRoute() {
             </div>
           </Card>
 
+          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
+            <div className="flex flex-col h-full">
+              <h3 className="text-2xl font-semibold text-foreground mb-3">
+                Metric Views
+              </h3>
+              <p className="text-muted-foreground mb-6 flex-grow">
+                Consume UC Metric Views with type-safe measures, dimensions,
+                filter spec, and metadata-driven Plotly formatting.
+              </p>
+              <Button
+                onClick={() => navigate({ to: "/metrics" })}
+                className="w-full"
+              >
+                Explore Metric Views
+              </Button>
+            </div>
+          </Card>
+
           <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
             <div className="flex flex-col h-full">
               <h3 className="text-2xl font-semibold text-foreground mb-3">