src/app/page.tsx

import fs from 'fs';
import path from 'path';
import { ParquetReader } from 'parquetjs-lite';

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() {
  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);

    // console.log('Top 10 Models:', top10Models);

    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>
    );
  }
}