feat(genie): add automatic chart visualization for query results

apps/dev-playground/.env.dist

@@ -6,6 +6,7 @@ NODE_ENV='development'
 OTEL_EXPORTER_OTLP_ENDPOINT='http://localhost:4318'
 OTEL_RESOURCE_ATTRIBUTES='service.sample_attribute=dev'
 OTEL_SERVICE_NAME='dev-playground'
+DATABRICKS_GENIE_SPACE_ID=
 LAKEBASE_ENDPOINT='' # Run: databricks postgres list-endpoints projects/{project-id}/branches/{branch-id} — use the `name` field from the output
 PGHOST=
 PGUSER=

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

@@ -13,8 +13,13 @@ import { Route as TypeSafetyRouteRouteImport } from './routes/type-safety.route'
 import { Route as TelemetryRouteRouteImport } from './routes/telemetry.route'
 import { Route as SqlHelpersRouteRouteImport } from './routes/sql-helpers.route'
 import { Route as ReconnectRouteRouteImport } from './routes/reconnect.route'
+
+import { Route as GenieRouteRouteImport } from './routes/genie.route'
+
 import { Route as LakebaseRouteRouteImport } from './routes/lakebase.route'
+
 import { Route as DataVisualizationRouteRouteImport } from './routes/data-visualization.route'
+import { Route as ChartInferenceRouteRouteImport } from './routes/chart-inference.route'
 import { Route as ArrowAnalyticsRouteRouteImport } from './routes/arrow-analytics.route'
 import { Route as AnalyticsRouteRouteImport } from './routes/analytics.route'
 import { Route as IndexRouteImport } from './routes/index'
@@ -39,6 +44,12 @@ const ReconnectRouteRoute = ReconnectRouteRouteImport.update({
   path: '/reconnect',
   getParentRoute: () => rootRouteImport,
 } as any)
+
+const GenieRouteRoute = GenieRouteRouteImport.update({
+  id: '/genie',
+  path: '/genie',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LakebaseRouteRoute = LakebaseRouteRouteImport.update({
   id: '/lakebase',
   path: '/lakebase',
@@ -49,6 +60,11 @@ const DataVisualizationRouteRoute = DataVisualizationRouteRouteImport.update({
   path: '/data-visualization',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ChartInferenceRouteRoute = ChartInferenceRouteRouteImport.update({
+  id: '/chart-inference',
+  path: '/chart-inference',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ArrowAnalyticsRouteRoute = ArrowAnalyticsRouteRouteImport.update({
   id: '/arrow-analytics',
   path: '/arrow-analytics',
@@ -69,8 +85,13 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRouteRoute
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
+  '/chart-inference': typeof ChartInferenceRouteRoute
   '/data-visualization': typeof DataVisualizationRouteRoute
+
+  '/genie': typeof GenieRouteRoute
+
   '/lakebase': typeof LakebaseRouteRoute
+
   '/reconnect': typeof ReconnectRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
@@ -80,8 +101,13 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRouteRoute
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
+  '/chart-inference': typeof ChartInferenceRouteRoute
   '/data-visualization': typeof DataVisualizationRouteRoute
+
+  '/genie': typeof GenieRouteRoute
+
   '/lakebase': typeof LakebaseRouteRoute
+
   '/reconnect': typeof ReconnectRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
@@ -92,8 +118,13 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRouteRoute
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
+  '/chart-inference': typeof ChartInferenceRouteRoute
   '/data-visualization': typeof DataVisualizationRouteRoute
+
+  '/genie': typeof GenieRouteRoute
+
   '/lakebase': typeof LakebaseRouteRoute
+
   '/reconnect': typeof ReconnectRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
@@ -105,8 +136,13 @@ export interface FileRouteTypes {
     | '/'
     | '/analytics'
     | '/arrow-analytics'
+    | '/chart-inference'
     | '/data-visualization'
+
+    | '/genie'
+
     | '/lakebase'
+
     | '/reconnect'
     | '/sql-helpers'
     | '/telemetry'
@@ -116,8 +152,13 @@ export interface FileRouteTypes {
     | '/'
     | '/analytics'
     | '/arrow-analytics'
+    | '/chart-inference'
     | '/data-visualization'
+
+    | '/genie'
+
     | '/lakebase'
+
     | '/reconnect'
     | '/sql-helpers'
     | '/telemetry'
@@ -127,8 +168,13 @@ export interface FileRouteTypes {
     | '/'
     | '/analytics'
     | '/arrow-analytics'
+    | '/chart-inference'
     | '/data-visualization'
+
+    | '/genie'
+
     | '/lakebase'
+
     | '/reconnect'
     | '/sql-helpers'
     | '/telemetry'
@@ -139,8 +185,13 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AnalyticsRouteRoute: typeof AnalyticsRouteRoute
   ArrowAnalyticsRouteRoute: typeof ArrowAnalyticsRouteRoute
+  ChartInferenceRouteRoute: typeof ChartInferenceRouteRoute
   DataVisualizationRouteRoute: typeof DataVisualizationRouteRoute
+
+  GenieRouteRoute: typeof GenieRouteRoute
+
   LakebaseRouteRoute: typeof LakebaseRouteRoute
+
   ReconnectRouteRoute: typeof ReconnectRouteRoute
   SqlHelpersRouteRoute: typeof SqlHelpersRouteRoute
   TelemetryRouteRoute: typeof TelemetryRouteRoute
@@ -177,6 +228,14 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ReconnectRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
+
+    '/genie': {
+      id: '/genie'
+      path: '/genie'
+      fullPath: '/genie'
+      preLoaderRoute: typeof GenieRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/lakebase': {
       id: '/lakebase'
       path: '/lakebase'
@@ -191,6 +250,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DataVisualizationRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/chart-inference': {
+      id: '/chart-inference'
+      path: '/chart-inference'
+      fullPath: '/chart-inference'
+      preLoaderRoute: typeof ChartInferenceRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/arrow-analytics': {
       id: '/arrow-analytics'
       path: '/arrow-analytics'
@@ -219,8 +285,13 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AnalyticsRouteRoute: AnalyticsRouteRoute,
   ArrowAnalyticsRouteRoute: ArrowAnalyticsRouteRoute,
+  ChartInferenceRouteRoute: ChartInferenceRouteRoute,
   DataVisualizationRouteRoute: DataVisualizationRouteRoute,
+
+  GenieRouteRoute: GenieRouteRoute,
+
   LakebaseRouteRoute: LakebaseRouteRoute,
+
   ReconnectRouteRoute: ReconnectRouteRoute,
   SqlHelpersRouteRoute: SqlHelpersRouteRoute,
   TelemetryRouteRoute: TelemetryRouteRoute,

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

@@ -80,6 +80,22 @@ function RootComponent() {
                     SQL Helpers
                   </Button>
                 </Link>
+                <Link to="/genie" className="no-underline">
+                  <Button
+                    variant="ghost"
+                    className="text-foreground hover:text-secondary-foreground"
+                  >
+                    Genie
+                  </Button>
+                </Link>
+                <Link to="/chart-inference" className="no-underline">
+                  <Button
+                    variant="ghost"
+                    className="text-foreground hover:text-secondary-foreground"
+                  >
+                    Chart Inference
+                  </Button>
+                </Link>
                 <ThemeSelector />
               </div>
             </nav>