only show main chart on mobile due to compute resources on mobile phones

app/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react"
 import * as duckdb from "@duckdb/duckdb-wasm"
 import { Loader2 } from "lucide-react"
 import { toast } from 'sonner'
+import { useIsMobile } from "@/hooks/useIsMobile"
 
 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, FETCH_TOP_BASE_MODELS_TABLE_QUERY } from "@/lib/queries"
 import { AreaChartStacked, ChartDataPoint } from "@/components/area-chart-stacked"
@@ -23,6 +24,7 @@ export default function IndexPage() {
   const [finetuneModelGrowthData, setFinetuneModelGrowthData] = useState<Array<{ date: Date; count: number }>>([])
   const [isLoading, setIsLoading] = useState(false)
   const [topFinetunedModels, setTopFinetunedModels] = useState<Array<{ model: string; finetunes: number }> | undefined>(undefined)
+  const isMobile = useIsMobile()
 
   useEffect(() => {
     initDB()
@@ -60,9 +62,15 @@ export default function IndexPage() {
     await connection.query(CREATE_VIEWS_QUERY)
 
     setConn(connection)
-    await fetchChartData(connection)
   }
 
+  // fetch data when connection establishes and isMobile is false
+  useEffect(() => {
+    if (conn && !isMobile) {
+      fetchChartData(conn)
+    }
+  }, [conn, isMobile])
+
   const fetchChartData = async (connection: duckdb.AsyncDuckDBConnection) => {
     const result = await connection.query(FETCH_CHART_DATA_QUERY)
 
@@ -111,6 +119,7 @@ export default function IndexPage() {
       model: row.model,
       finetunes: Number(row.finetunes)
     })))
+
   }
 
   const handleBaseModelSubmit = async (e: React.FormEvent) => {
@@ -123,14 +132,11 @@ export default function IndexPage() {
 
     setIsLoading(true)
     try {
-      console.log("Fetching finetune model growth data for", baseModel)
       const result = await conn.query(FETCH_FINETUNE_MODEL_GROWTH_QUERY(baseModel))
-      console.log("Received Result")
       const data = result.toArray().map((row: { date: Date; count: bigint }) => ({
         date: new Date(row.date),
         count: parseInt(row.count.toString())
       }))
-      console.log("Setting finetune model growth data", data)
       setFinetuneModelGrowthData(data)
     } catch (error) {
       console.error("Error executing query:", error)
@@ -150,76 +156,81 @@ export default function IndexPage() {
         <AreaChartStacked data={chartData} />
       </div>
 
-      <div className="flex flex-wrap gap-8 max-w-6xl mt-10 w-full mx-auto">
-        <div className="flex-1 min-w-[300px]">
-          <CustomPieChart
-            title="Model Licenses"
-            data={modelLicenseData}
-            dataKey="value"
-          />
-        </div>
-        <div className="flex-1 min-w-[300px]">
-          <CustomPieChart
-            title="Dataset Licenses"
-            data={datasetLicenseData}
-            dataKey="value"
-          />
-        </div>
-        <div className="flex-1 min-w-[300px]">
-          <CustomPieChart
-            title="Space SDKs"
-            data={spaceSdkData}
-            dataKey="value"
-          />
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-4 max-w-4xl my-36 w-full mx-auto">
-        <h2 className="text-4xl font-bold my-10 text-center">Finetuned Model Leaderboard</h2>
-        <GenericTable
-          data={topFinetunedModels}
-          caption="Top 10 base models by number of finetunes"
-        />
-      </div>
-
-
-      <div className="flex flex-col items-center gap-4 max-w-6xl mt-10 w-full mx-auto">
-        <h2 className="text-4xl font-bold text-center">Finetuned Model Growth</h2>
-        <p className="text-center mb-4">Find how many finetuned models have been created for your favorite model</p>
-        <form onSubmit={handleBaseModelSubmit} className="flex flex-col gap-2 w-full max-w-sm">
-          <input
-            type="text"
-            value={baseModel}
-            onChange={(e) => setBaseModel(e.target.value.trim())}
-            placeholder="Base Model Name"
-            className="px-4 w-full py-2 border rounded"
-          />
-          <Button type="submit" disabled={isLoading} className="w-full">
-            {isLoading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Loading
-              </>
-            ) : (
-              "Submit"
-            )}
-          </Button>
-        </form>
-      </div>
-
-      {finetuneModelGrowthData.length > 0 && (
-        <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"}`}
-            data={finetuneModelGrowthData}
-          />
-        </div>
+      {/* Mobile devices have much less resources to process these queries */}
+
+      {isMobile === false && (
+        <>
+          <div className="flex flex-wrap gap-8 max-w-6xl mt-10 w-full mx-auto">
+            <div className="flex-1 min-w-[300px]">
+              <CustomPieChart
+                title="Model Licenses"
+                data={modelLicenseData}
+                dataKey="value"
+              />
+            </div>
+            <div className="flex-1 min-w-[300px]">
+              <CustomPieChart
+                title="Dataset Licenses"
+                data={datasetLicenseData}
+                dataKey="value"
+              />
+            </div>
+            <div className="flex-1 min-w-[300px]">
+              <CustomPieChart
+                title="Space SDKs"
+                data={spaceSdkData}
+                dataKey="value"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4 max-w-4xl my-36 w-full mx-auto">
+            <h2 className="text-4xl font-bold my-10 text-center">Finetuned Model Leaderboard</h2>
+            <GenericTable
+              data={topFinetunedModels}
+              caption="Top 10 base models by number of finetunes"
+            />
+          </div>
+
+          <div className="flex flex-col items-center gap-4 max-w-6xl w-full mx-auto">
+            <h2 className="text-4xl font-bold text-center">Finetuned Model Growth</h2>
+            <p className="text-center mb-4">Find how many finetuned models have been created for your favorite model</p>
+            <form onSubmit={handleBaseModelSubmit} className="flex flex-col gap-2 w-full max-w-sm">
+              <input
+                type="text"
+                value={baseModel}
+                onChange={(e) => setBaseModel(e.target.value.trim())}
+                placeholder="Base Model Name"
+                className="px-4 w-full py-2 border rounded"
+              />
+              <Button type="submit" disabled={isLoading} className="w-full">
+                {isLoading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Loading
+                  </>
+                ) : (
+                  "Submit"
+                )}
+              </Button>
+            </form>
+          </div>
+
+          {finetuneModelGrowthData.length > 0 && (
+            <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"}`}
+                data={finetuneModelGrowthData}
+              />
+            </div>
+          )}
+        </>
       )}
-      <div className="my-48">
+
+      <div className="my-20 lg:my-48">
         <CTABanner />
       </div>
     </section>
-
   )
 }

hooks/useIsMobile.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(true);
+
+  useEffect(() => {
+    const checkIfMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkIfMobile();
+    window.addEventListener('resize', checkIfMobile);
+
+    return () => window.removeEventListener('resize', checkIfMobile);
+  }, []);
+
+  return isMobile;
+}