show derived model count

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# DuckDB temp files.
+.tmp 

package.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.15",
+    "parquetjs-lite": "^0.8.7",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.15"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "typescript": "^5",

src/app/page.tsx

@@ -1,45 +1,80 @@
 import fs from 'fs';
 import path from 'path';
+import { ParquetReader } from 'parquetjs-lite';
 
-type DataItem = {
-  title: string;
-  description: string;
-  data: any[];
-};
-
-type Data = {
-  title: string;
-  description: string;
-  data: DataItem[];
+type ModelData = {
+  ancestor: string;
+  direct_children: string[] | null;
+  all_children: string[];
+  all_children_count: number;
+  direct_children_count: number | null;
 };
 
 export default async function Home() {
-  // Read the JSON file
-  const jsonDirectory = path.join(process.cwd(), 'content');
-  const fileContents = await fs.readFileSync(jsonDirectory + '/data.json', 'utf8');
-  const data: Data = JSON.parse(fileContents);
+  try {
+    // Read the Parquet file using parquetjs-lite
+    const parquetFilePath = path.join(process.cwd(), 'tables', 'ancestor_children.parquet');
+    const reader = await ParquetReader.openFile(parquetFilePath);
+    const cursor = reader.getCursor();
+
+    // Read all rows and convert to a JavaScript array
+    const data: ModelData[] = [];
+    let row = null;
+    while (row = await cursor.next()) {
+      data.push({
+        ancestor: row.ancestor,
+        direct_children: row.direct_children,
+        all_children: row.all_children,
+        all_children_count: row.all_children_count,
+        direct_children_count: row.direct_children_count,
+      });
+      // console.log(row.all_children.list.length)
+    }
+    await reader.close();
+
+    // console.log('Data:', data);
+
+    // Get the top 10 models with the most all_children
+    const top10Models = data
+      .sort((a, b) => b.all_children.length - a.all_children.length)
+      .slice(0, 10);
 
-  return (
-    <main className="container mx-auto py-8 text-gray-900 dark:text-white">
-      <h1 className="text-4xl font-bold mb-4">{data.title}</h1>
-      <p className="text-xl mb-8">{data.description}</p>
+    // console.log('Top 10 Models:', top10Models);
 
-      <table className="table-auto border-collapse w-full">
-        <thead>
-          <tr>
-            <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-left">Title</th>
-            <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-left">Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.data.map((item: DataItem, index: number) => (
-            <tr key={index} className="border-t border-gray-200 dark:border-gray-700">
-              <td className="px-4 py-2">{item.title}</td>
-              <td className="px-4 py-2">{item.description}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </main>
-  );
+    return (
+      <main className="container mx-auto py-8 text-gray-900 dark:text-white">
+        <h1 className="text-4xl font-bold mb-4">Top 10 Models with the Most All Children</h1>
+        {top10Models.length > 0 ? (
+          <table className="table-auto border-collapse w-full">
+            <thead>
+              <tr>
+                <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-left">Model</th>
+                <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-right">Direct Children</th>
+                <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-right">All Children</th>
+              </tr>
+            </thead>
+            <tbody>
+              {top10Models.map((model, index) => (
+                <tr key={index} className="border-t border-gray-200 dark:border-gray-700">
+                  <td className="px-4 py-2">{model.ancestor}</td>
+                  <td className="px-4 py-2 text-right">{model.direct_children_count ?? 0}</td>
+                  <td className="px-4 py-2 text-right">{model.all_children_count}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <p>No data found.</p>
+        )}
+      </main>
+    );
+  } catch (error) {
+    console.error('Error:', error);
+    return (
+      <main className="container mx-auto py-8 text-gray-900 dark:text-white">
+        <h1 className="text-4xl font-bold mb-4">Error</h1>
+        <p>An error occurred while processing the data: {error.message}</p>
+      </main>
+    );
+  }
 }