Both models and orgs page working!

src/app/components/Pagination.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+};
+
+export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  return (
+    <div className="mt-4 flex items-center justify-between">
+      <button
+        onClick={() => onPageChange(Math.max(currentPage - 1, 1))}
+        disabled={currentPage === 1}
+        className={`px-4 py-2 rounded-md mr-2 ${
+          currentPage === 1
+            ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed'
+            : 'bg-blue-500 dark:bg-blue-600 text-white'
+        }`}
+      >
+        &lt;
+      </button>
+      <div className="flex items-center space-x-2">
+        {currentPage > 1 && (
+          <>
+            <button
+              onClick={() => onPageChange(1)}
+              className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
+            >
+              1
+            </button>
+            {currentPage > 2 && <span className="text-gray-500">...</span>}
+          </>
+        )}
+        {[...Array(5)].map((_, i) => {
+          const page = currentPage + i - 2;
+          if (page >= 1 && page <= totalPages) {
+            return (
+              <button
+                key={page}
+                onClick={() => onPageChange(page)}
+                className={`px-2 py-1 rounded-md ${
+                  page === currentPage
+                    ? 'bg-blue-500 dark:bg-blue-600 text-white'
+                    : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200'
+                }`}
+              >
+                {page}
+              </button>
+            );
+          }
+          return null;
+        })}
+        {currentPage < totalPages && (
+          <>
+            {currentPage < totalPages - 1 && <span className="text-gray-500">...</span>}
+            <button
+              onClick={() => onPageChange(totalPages)}
+              className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
+            >
+              {totalPages}
+            </button>
+          </>
+        )}
+      </div>
+      <button
+        onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}
+        disabled={currentPage === totalPages}
+        className={`px-4 py-2 rounded-md ${
+          currentPage === totalPages
+            ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed'
+            : 'bg-blue-500 dark:bg-blue-600 text-white'
+        }`}
+      >
+        &gt;
+      </button>
+    </div>
+  );
+}

src/app/components/Table.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import Pagination from './Pagination';
+
+type TableProps<T> = {
+  data: T[];
+  columns: {
+    key: keyof T;
+    label: string;
+    render?: (value: T[keyof T]) => React.ReactNode;
+  }[];
+  orderBy?: keyof T;
+  onOrderByChange?: (key: keyof T) => void;
+  pageSize?: number;
+};
+
+export default function Table<T>({ data, columns, orderBy, onOrderByChange, pageSize = 100 }: TableProps<T>) {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const totalPages = Math.ceil(data.length / pageSize);
+
+  const paginatedData = data.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  );
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return (
+    <>
+      <table className="table-auto border-collapse w-full">
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column.key as string}
+                className={`px-4 py-2 bg-gray-100 dark:bg-gray-800 text-left ${
+                  onOrderByChange ? 'cursor-pointer' : ''
+                }`}
+                onClick={() => onOrderByChange && onOrderByChange(column.key)}
+              >
+                {column.label} {orderBy === column.key && '▼'}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {paginatedData.map((item, index) => (
+            <tr key={index} className="border-t border-gray-200 dark:border-gray-700">
+              {columns.map((column) => (
+                <td key={column.key as string} className="px-4 py-2">
+                  {column.render ? column.render(item[column.key]) : String(item[column.key])}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={handlePageChange}
+      />
+    </>
+  );
+}

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import * as duckdb from '@duckdb/duckdb-wasm';
+import Table from './components/Table';
 
 type ModelData = {
   ancestor: string;
@@ -11,13 +12,64 @@ type ModelData = {
   direct_children_count: number | null;
 };
 
+type OrgData = {
+  org: string;
+  family_model_count: number;
+  family_direct_children_count: number;
+  family_all_children_count: number;
+};
+
 export default function Home() {
   const [allModels, setAllModels] = useState<ModelData[]>([]);
+  const [orgData, setOrgData] = useState<OrgData[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(100);
   const [filterText, setFilterText] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [orderBy, setOrderBy] = useState<'all_children' | 'direct_children'>('all_children');
+  const [activeTab, setActiveTab] = useState<'models' | 'orgs'>('models');
+  const [orgCurrentPage, setOrgCurrentPage] = useState(1);
+  const [orgPageSize, setOrgPageSize] = useState(100);
+  const [orgOrderBy, setOrgOrderBy] = useState<keyof OrgData>('family_all_children_count');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const tab = urlParams.get('tab');
+    const page = urlParams.get('page');
+    const order = urlParams.get('order');
+    const filter = urlParams.get('filter');
+
+    if (tab === 'orgs') {
+      setActiveTab('orgs');
+    }
+    if (page) {
+      setCurrentPage(parseInt(page, 10));
+    }
+    if (order === 'direct_children') {
+      setOrderBy('direct_children');
+    }
+    if (filter) {
+      setFilterText(filter);
+    }
+  }, []);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams();
+    if (activeTab === 'orgs') {
+      urlParams.set('tab', 'orgs');
+    }
+    if (currentPage > 1) {
+      urlParams.set('page', currentPage.toString());
+    }
+    if (orderBy === 'direct_children') {
+      urlParams.set('order', 'direct_children');
+    }
+    if (filterText) {
+      urlParams.set('filter', filterText);
+    }
+    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+    window.history.replaceState(null, '', newUrl);
+  }, [activeTab, currentPage, orderBy, filterText]);
 
   useEffect(() => {
     async function fetchData() {
@@ -60,11 +112,28 @@ export default function Home() {
       // Convert the result to a JavaScript array
       const data: ModelData[] = result.toArray();
 
+      // Execute the SQL query to get the grouped org data with additional counts
+      const orgQuery = `
+        SELECT
+          SPLIT_PART(ancestor, '/', 1) AS org,
+          CAST(COUNT(DISTINCT ancestor) AS INTEGER) AS family_model_count,
+          CAST(SUM(direct_children_count) AS INTEGER) AS family_direct_children_count,
+          CAST(SUM(all_children_count) AS INTEGER) AS family_all_children_count
+        FROM 'ancestor_children.parquet'
+        GROUP BY org
+        ORDER BY family_all_children_count DESC
+      `;
+      const orgResult = await conn.query(orgQuery);
+
+      // Convert the org result to a JavaScript array
+      const orgData: OrgData[] = orgResult.toArray();
+
       // Close the connection and terminate the worker
       await conn.close();
       await db.terminate();
 
       setAllModels(data);
+      setOrgData(orgData);
       setIsLoading(false);
     }
     fetchData();
@@ -82,124 +151,142 @@ export default function Home() {
     }
   });
 
-  const totalPages = Math.ceil(sortedModels.length / pageSize);
+  const handleTabChange = (tab: 'models' | 'orgs') => {
+    setActiveTab(tab);
+    setCurrentPage(1);
+    setOrderBy('all_children');
+    setFilterText('');
+  };
 
-  const paginatedModels = sortedModels.slice(
-    (currentPage - 1) * pageSize,
-    currentPage * pageSize
-  );
+  const handlePageChange = (page: number, tab: 'models' | 'orgs') => {
+    if (tab === 'models') {
+      setCurrentPage(page);
+    } else {
+      setOrgCurrentPage(page);
+    }
+  };
 
   const handleOrderByClick = (column: 'all_children' | 'direct_children') => {
     setOrderBy(column);
     setCurrentPage(1);
   };
 
+  const sortedOrgData = orgData.sort((a, b) => {
+    if (orgOrderBy === 'org') {
+      return a.org.localeCompare(b.org);
+    }
+    return b[orgOrderBy] - a[orgOrderBy];
+  });
+
+  const paginatedOrgData = sortedOrgData.slice(
+    (orgCurrentPage - 1) * orgPageSize,
+    orgCurrentPage * orgPageSize
+  );
+
+  const orgTotalPages = Math.ceil(sortedOrgData.length / orgPageSize);
+
   return (
     <main className="container mx-auto py-8 bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
       <h1 className="text-4xl font-bold mb-4">All Models</h1>
-      <div className="mb-4">
-        <input
-          type="text"
-          placeholder="Filter by model name"
-          value={filterText}
-          onChange={(e) => setFilterText(e.target.value)}
-          className="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-        />
+      <div className="mb-4 flex space-x-4">
+        <a
+          href={`?tab=models`}
+          onClick={(e) => {
+            e.preventDefault();
+            handleTabChange('models');
+          }}
+          className={`px-4 py-2 rounded-md ${
+            activeTab === 'models'
+              ? 'bg-blue-500 dark:bg-blue-600 text-white'
+              : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200'
+          }`}
+        >
+          Models
+        </a>
+        <a
+          href={`?tab=orgs`}
+          onClick={(e) => {
+            e.preventDefault();
+            handleTabChange('orgs');
+          }}
+          className={`px-4 py-2 rounded-md ${
+            activeTab === 'orgs'
+              ? 'bg-blue-500 dark:bg-blue-600 text-white'
+              : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200'
+          }`}
+        >
+          Organizations
+        </a>
       </div>
-      {isLoading ? (
-        <p>Loading data...</p>
-      ) : paginatedModels.length > 0 ? (
+      {activeTab === 'models' ? (
         <>
-          <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 cursor-pointer"
-                  onClick={() => handleOrderByClick('direct_children')}
-                >
-                  Direct Children {orderBy === 'direct_children' && '▼'}
-                </th>
-                <th
-                  className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-right cursor-pointer"
-                  onClick={() => handleOrderByClick('all_children')}
-                >
-                  All Children {orderBy === 'all_children' && '▼'}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {paginatedModels.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>
-          <div className="mt-4 flex items-center justify-between">
-            <button
-              onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-              disabled={currentPage === 1}
-              className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-md mr-2"
-            >
-              Previous
-            </button>
-            <div className="flex items-center space-x-2">
-              {currentPage > 1 && (
-                <>
-                  <button
-                    onClick={() => setCurrentPage(1)}
-                    className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
-                  >
-                    1
-                  </button>
-                  {currentPage > 2 && <span className="text-gray-500">...</span>}
-                </>
-              )}
-              {[...Array(5)].map((_, i) => {
-                const page = currentPage + i - 2;
-                if (page >= 1 && page <= totalPages) {
-                  return (
-                    <button
-                      key={page}
-                      onClick={() => setCurrentPage(page)}
-                      className={`px-2 py-1 ${
-                        page === currentPage
-                          ? 'bg-blue-500 dark:bg-blue-600 text-white'
-                          : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200'
-                      } rounded-md`}
-                    >
-                      {page}
-                    </button>
-                  );
-                }
-                return null;
-              })}
-              {currentPage < totalPages && (
-                <>
-                  {currentPage < totalPages - 1 && <span className="text-gray-500">...</span>}
-                  <button
-                    onClick={() => setCurrentPage(totalPages)}
-                    className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
-                  >
-                    {totalPages}
-                  </button>
-                </>
-              )}
-            </div>
-            <button
-              onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
-              disabled={currentPage === totalPages}
-              className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-md"
-            >
-              Next
-            </button>
+          <div className="mb-4">
+            <input
+              type="text"
+              placeholder="Filter by model name"
+              value={filterText}
+              onChange={(e) => setFilterText(e.target.value)}
+              className="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+            />
           </div>
+          {isLoading ? (
+            <p>Loading data...</p>
+          ) : (
+            <Table
+              data={sortedModels}
+              columns={[
+                { key: 'ancestor', label: 'Model' },
+                {
+                  key: 'direct_children_count',
+                  label: 'Direct Children',
+                  render: (value) => <span className="text-right">{value ?? 0}</span>,
+                },
+                {
+                  key: 'all_children_count',
+                  label: 'All Children',
+                  render: (value) => <span className="text-right">{value}</span>,
+                },
+              ]}
+              orderBy={orderBy}
+              onOrderByChange={(key) => {
+                setOrderBy(key as 'all_children' | 'direct_children');
+                setCurrentPage(1);
+              }}
+              pageSize={pageSize}
+            />
+          )}
         </>
       ) : (
-        <p>No data found.</p>
+        <>
+          {isLoading ? (
+            <p>Loading data...</p>
+          ) : (
+            <Table
+              data={sortedOrgData}
+              columns={[
+                { key: 'org', label: 'Organization' },
+                {
+                  key: 'family_model_count',
+                  label: 'Model Count',
+                  render: (value) => <span className="text-right">{value}</span>,
+                },
+                {
+                  key: 'family_direct_children_count',
+                  label: 'Direct Children',
+                  render: (value) => <span className="text-right">{value}</span>,
+                },
+                {
+                  key: 'family_all_children_count',
+                  label: 'All Children',
+                  render: (value) => <span className="text-right">{value}</span>,
+                },
+              ]}
+              orderBy={orgOrderBy}
+              onOrderByChange={(key) => setOrgOrderBy(key)}
+              pageSize={orgPageSize}
+            />
+          )}
+        </>
       )}
     </main>
   );