add toasts

app/layout.tsx

@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils"
 import { SiteHeader } from "@/components/site-header"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
 import { ThemeProvider } from "@/components/theme-provider"
+import { Toaster } from 'sonner'
 
 export const metadata: Metadata = {
   title: {
@@ -48,6 +49,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             <TailwindIndicator />
           </ThemeProvider>
         </body>
+        <Toaster />
       </html>
     </>
   )

app/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react"
 import * as duckdb from "@duckdb/duckdb-wasm"
 import { Loader2 } from "lucide-react"
+import { toast } from 'sonner'
 
 import { CREATE_VIEWS_QUERY, FETCH_CHART_DATA_QUERY, FETCH_DATASET_LICENSE_DATA_QUERY, FETCH_FINETUNE_MODEL_GROWTH_QUERY, FETCH_MODEL_LICENSE_DATA_QUERY, FETCH_SPACE_SDK_DATA_QUERY } from "@/lib/queries"
 import { AreaChartStacked, ChartDataPoint } from "@/components/area-chart-stacked"
@@ -107,6 +108,7 @@ export default function IndexPage() {
     e.preventDefault()
     if (!conn) {
       console.warn("Database connection not established")
+      toast.error("Database connection not established")
       return
     }
 
@@ -123,6 +125,7 @@ export default function IndexPage() {
       setFinetuneModelGrowthData(data)
     } catch (error) {
       console.error("Error executing query:", error)
+      toast.error(`Failed to fetch data for ${baseModel}`)
     } finally {
       setIsLoading(false)
     }
@@ -169,7 +172,7 @@ export default function IndexPage() {
           <input
             type="text"
             value={baseModel}
-            onChange={(e) => setBaseModel(e.target.value)}
+            onChange={(e) => setBaseModel(e.target.value.trim())}
             placeholder="Base Model Name"
             className="px-4 w-full py-2 border rounded"
           />
@@ -190,7 +193,7 @@ export default function IndexPage() {
         <div className="flex flex-col gap-4 max-w-4xl mt-10 w-full mx-auto">
           <SimpleArea
             title="Finetune Model Growth"
-            description={`Showing the growth of finetune models over time for ${baseModel || "your favorite model."}`}
+            description={`Showing the growth of finetune models over time for ${baseModel || "your favorite model"}`}
             data={finetuneModelGrowthData}
           />
         </div>

lib/queries.ts

@@ -44,7 +44,7 @@ export const FETCH_SPACE_SDK_DATA_QUERY = `
 
 export const FETCH_FINETUNE_MODEL_GROWTH_QUERY = (baseModel: string) => `
   WITH RECURSIVE month_series AS (
-    SELECT DATE_TRUNC('month', MIN(CAST(createdAt AS TIMESTAMP))) AS month
+    SELECT DATE_TRUNC('month', MIN(CAST(createdAt AS TIMESTAMP))) - INTERVAL 1 MONTH AS month
     FROM models, UNNEST(tags) AS t(tag)
     WHERE tag = 'base_model:${baseModel}'
 

package-lock.json

@@ -19,6 +19,7 @@
         "react-dom": "^18.2.0",
         "recharts": "^2.12.7",
         "sharp": "^0.31.3",
+        "sonner": "^1.5.0",
         "tailwind-merge": "^1.13.2",
         "tailwindcss-animate": "^1.0.6"
       },
@@ -5554,6 +5555,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/sonner": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.5.0.tgz",
+      "integrity": "sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",

package.json

@@ -25,6 +25,7 @@
     "react-dom": "^18.2.0",
     "recharts": "^2.12.7",
     "sharp": "^0.31.3",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^1.13.2",
     "tailwindcss-animate": "^1.0.6"
   },