Feat/auto browser and bad query fallback

Cargo.toml

@@ -16,6 +16,7 @@ tokio-rusqlite = "0.5.1"
 tracing = "0.1.40"
 tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
 warp = "0.3.7"
+open = "3.2.0"
 
 [profile.release]
 strip = true

src/main.rs

@@ -2,9 +2,9 @@ use std::{collections::HashMap, path::Path, sync::Arc};
 
 use clap::Parser;
 use color_eyre::eyre::OptionExt;
+use open::that;
 use tokio_rusqlite::{Connection, OpenFlags};
 use warp::Filter;
-
 const ROWS_PER_PAGE: i32 = 50;
 const SAMPLE_DB: &[u8] = include_bytes!("../sample.sqlite3");
 
@@ -144,7 +144,7 @@ impl TheDB {
             .await?;
 
         tracing::info!("found {tables} tables in {path}");
-
+        that("http://127.0.0.1:3030").expect("Failed to open browser");
         Ok(Self {
             path,
             conn: Arc::new(conn),

ui/src/routeTree.gen.ts

@@ -8,60 +8,60 @@
 
 // This file is auto-generated by TanStack Router
 
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
 // Import Routes
 
-import { Route as rootRoute } from "./routes/__root";
+import { Route as rootRoute } from './routes/__root'
 
 // Create Virtual Routes
 
-const TablesLazyImport = createFileRoute("/tables")();
-const QueryLazyImport = createFileRoute("/query")();
-const IndexLazyImport = createFileRoute("/")();
+const TablesLazyImport = createFileRoute('/tables')()
+const QueryLazyImport = createFileRoute('/query')()
+const IndexLazyImport = createFileRoute('/')()
 
 // Create/Update Routes
 
 const TablesLazyRoute = TablesLazyImport.update({
-  path: "/tables",
+  path: '/tables',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import("./routes/tables.lazy").then((d) => d.Route));
+} as any).lazy(() => import('./routes/tables.lazy').then((d) => d.Route))
 
 const QueryLazyRoute = QueryLazyImport.update({
-  path: "/query",
+  path: '/query',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import("./routes/query.lazy").then((d) => d.Route));
+} as any).lazy(() => import('./routes/query.lazy').then((d) => d.Route))
 
 const IndexLazyRoute = IndexLazyImport.update({
-  path: "/",
+  path: '/',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import("./routes/index.lazy").then((d) => d.Route));
+} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
 
 // Populate the FileRoutesByPath interface
 
-declare module "@tanstack/react-router" {
+declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    "/": {
-      id: "/";
-      path: "/";
-      fullPath: "/";
-      preLoaderRoute: typeof IndexLazyImport;
-      parentRoute: typeof rootRoute;
-    };
-    "/query": {
-      id: "/query";
-      path: "/query";
-      fullPath: "/query";
-      preLoaderRoute: typeof QueryLazyImport;
-      parentRoute: typeof rootRoute;
-    };
-    "/tables": {
-      id: "/tables";
-      path: "/tables";
-      fullPath: "/tables";
-      preLoaderRoute: typeof TablesLazyImport;
-      parentRoute: typeof rootRoute;
-    };
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexLazyImport
+      parentRoute: typeof rootRoute
+    }
+    '/query': {
+      id: '/query'
+      path: '/query'
+      fullPath: '/query'
+      preLoaderRoute: typeof QueryLazyImport
+      parentRoute: typeof rootRoute
+    }
+    '/tables': {
+      id: '/tables'
+      path: '/tables'
+      fullPath: '/tables'
+      preLoaderRoute: typeof TablesLazyImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -71,7 +71,7 @@ export const routeTree = rootRoute.addChildren({
   IndexLazyRoute,
   QueryLazyRoute,
   TablesLazyRoute,
-});
+})
 
 /* prettier-ignore-end */
 

ui/src/routes/query.lazy.tsx

@@ -16,21 +16,20 @@ export const Route = createLazyRoute("/query")({
 function Query() {
   const [code, setCode] = useState("select 1 + 1");
 
-  const { data } = useQuery({
+  const { data, error } = useQuery({
     queryKey: ["query", code],
     queryFn: () => fetchQuery(code),
   });
-
   const grid = !data ? (
-    <Skeleton className="w-full h-[300px]" />
+    !error && <Skeleton className="w-full h-[300px]" />
   ) : (
     <DataGrid
       columns={data.columns.map((col) => ({ key: col, name: col }))}
       rows={data.rows.map((row) =>
         row.reduce((acc, curr, i) => {
           acc[data.columns[i]] = curr;
           return acc;
-        }, {}),
+        }, {})
       )}
       className="rdg-light"
     />