org page: pop up for models under this family

src/app/components/Modal.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+
+type ModalProps = {
+  onClose: () => void;
+  children: ReactNode;
+};
+
+export default function Modal({ onClose, children }: ModalProps) {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg max-w-2xl w-full max-h-[80vh] overflow-auto">
+        <button
+          onClick={onClose}
+          className="float-right text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+        >
+          &times;
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/components/Table.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Pagination from './Pagination';
 
 type TableProps<T> = {
@@ -6,16 +6,16 @@ type TableProps<T> = {
   columns: {
     key: keyof T;
     label: string;
-    render?: (value: T[keyof T]) => React.ReactNode;
+    render?: (value: T[keyof T], row: T) => React.ReactNode;
   }[];
   orderBy?: keyof T;
   onOrderByChange?: (key: keyof T) => void;
   pageSize?: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
 };
 
-export default function Table<T>({ data, columns, orderBy, onOrderByChange, pageSize = 100 }: TableProps<T>) {
-  const [currentPage, setCurrentPage] = useState(1);
-
+export default function Table<T>({ data, columns, orderBy, onOrderByChange, pageSize = 100, currentPage, onPageChange }: TableProps<T>) {
   const totalPages = Math.ceil(data.length / pageSize);
 
   const paginatedData = data.slice(
@@ -23,10 +23,6 @@ export default function Table<T>({ data, columns, orderBy, onOrderByChange, page
     currentPage * pageSize
   );
 
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-
   return (
     <>
       <table className="table-auto border-collapse w-full">
@@ -50,7 +46,7 @@ export default function Table<T>({ data, columns, orderBy, onOrderByChange, page
             <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])}
+                  {column.render ? column.render(item[column.key], item) : String(item[column.key])}
                 </td>
               ))}
             </tr>
@@ -60,7 +56,7 @@ export default function Table<T>({ data, columns, orderBy, onOrderByChange, page
       <Pagination
         currentPage={currentPage}
         totalPages={totalPages}
-        onPageChange={handlePageChange}
+        onPageChange={onPageChange}
       />
     </>
   );

src/app/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import * as duckdb from '@duckdb/duckdb-wasm';
 import Table from './components/Table';
+import Modal from './components/Modal';
 
 type ModelData = {
   ancestor: string;
@@ -31,6 +32,15 @@ export default function Home() {
   const [orgCurrentPage, setOrgCurrentPage] = useState(1);
   const [orgPageSize, setOrgPageSize] = useState(100);
   const [orgOrderBy, setOrgOrderBy] = useState<keyof OrgData>('family_all_children_count');
+  const [orgFilterText, setOrgFilterText] = useState('');
+  const [selectedModel, setSelectedModel] = useState<ModelData | null>(null);
+  const [selectedOrg, setSelectedOrg] = useState<string | null>(null);
+  const [selectedOrgModels, setSelectedOrgModels] = useState<ModelData[]>([]);
+  const [selectedModelChildren, setSelectedModelChildren] = useState<string[]>([]);
+  const [selectedModelChildrenType, setSelectedModelChildrenType] = useState<'direct' | 'all'>('all');
+  const [modelChildrenPage, setModelChildrenPage] = useState(1);
+  const [orgModelsPage, setOrgModelsPage] = useState(1);
+  const modalPageSize = 10;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -38,6 +48,7 @@ export default function Home() {
     const page = urlParams.get('page');
     const order = urlParams.get('order');
     const filter = urlParams.get('filter');
+    const orgFilter = urlParams.get('orgFilter');
 
     if (tab === 'orgs') {
       setActiveTab('orgs');
@@ -47,10 +58,15 @@ export default function Home() {
     }
     if (order === 'direct_children') {
       setOrderBy('direct_children');
+    } else {
+      setOrderBy('all_children');
     }
     if (filter) {
       setFilterText(filter);
     }
+    if (orgFilter) {
+      setOrgFilterText(orgFilter);
+    }
   }, []);
 
   useEffect(() => {
@@ -67,9 +83,12 @@ export default function Home() {
     if (filterText) {
       urlParams.set('filter', filterText);
     }
+    if (orgFilterText) {
+      urlParams.set('orgFilter', orgFilterText);
+    }
     const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
     window.history.replaceState(null, '', newUrl);
-  }, [activeTab, currentPage, orderBy, filterText]);
+  }, [activeTab, currentPage, orderBy, filterText, orgFilterText]);
 
   useEffect(() => {
     async function fetchData() {
@@ -156,6 +175,7 @@ export default function Home() {
     setCurrentPage(1);
     setOrderBy('all_children');
     setFilterText('');
+    setOrgFilterText('');
   };
 
   const handlePageChange = (page: number, tab: 'models' | 'orgs') => {
@@ -171,7 +191,11 @@ export default function Home() {
     setCurrentPage(1);
   };
 
-  const sortedOrgData = orgData.sort((a, b) => {
+  const filteredOrgData = orgData.filter((org) =>
+    org.org.toLowerCase().includes(orgFilterText.toLowerCase())
+  );
+
+  const sortedOrgData = filteredOrgData.sort((a, b) => {
     if (orgOrderBy === 'org') {
       return a.org.localeCompare(b.org);
     }
@@ -185,6 +209,27 @@ export default function Home() {
 
   const orgTotalPages = Math.ceil(sortedOrgData.length / orgPageSize);
 
+  const handleModelChildrenClick = (model: ModelData, type: 'direct' | 'all') => {
+    setSelectedModel(model);
+    setSelectedModelChildrenType(type);
+    const children = type === 'direct' ? model.direct_children || [] : model.all_children || [];
+    setSelectedModelChildren(children);
+  };
+
+  const handleOrgModelsClick = (org: string) => {
+    setSelectedOrg(org);
+    const orgModels = allModels.filter((model) => model.ancestor.split('/')[0] === org);
+    setSelectedOrgModels(orgModels);
+  };
+
+  const handleModelChildrenPageChange = (page: number) => {
+    setModelChildrenPage(page);
+  };
+
+  const handleOrgModelsPageChange = (page: number) => {
+    setOrgModelsPage(page);
+  };
+
   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>
@@ -235,40 +280,80 @@ export default function Home() {
             <Table
               data={sortedModels}
               columns={[
-                { key: 'ancestor', label: 'Model' },
+                {
+                  key: 'ancestor',
+                  label: 'Model',
+                },
                 {
                   key: 'direct_children_count',
                   label: 'Direct Children',
-                  render: (value) => <span className="text-right">{value ?? 0}</span>,
+                  render: (value, row) => (
+                    <button
+                      className="text-right text-blue-500 hover:underline"
+                      onClick={() => handleModelChildrenClick(row, 'direct')}
+                    >
+                      {value ?? 0}
+                    </button>
+                  ),
                 },
                 {
                   key: 'all_children_count',
                   label: 'All Children',
-                  render: (value) => <span className="text-right">{value}</span>,
+                  render: (value, row) => (
+                    <button
+                      className="text-right text-blue-500 hover:underline"
+                      onClick={() => handleModelChildrenClick(row, 'all')}
+                    >
+                      {value}
+                    </button>
+                  ),
                 },
               ]}
               orderBy={orderBy}
               onOrderByChange={(key) => {
-                setOrderBy(key as 'all_children' | 'direct_children');
-                setCurrentPage(1);
+                if (key === 'all_children' || key === 'direct_children') {
+                  setOrderBy(key);
+                  setCurrentPage(1);
+                }
               }}
               pageSize={pageSize}
+              currentPage={currentPage}
+              onPageChange={(page) => handlePageChange(page, 'models')}
             />
           )}
         </>
       ) : (
         <>
+          <div className="mb-4">
+            <input
+              type="text"
+              placeholder="Filter by organization name"
+              value={orgFilterText}
+              onChange={(e) => setOrgFilterText(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={sortedOrgData}
+              data={paginatedOrgData}
               columns={[
-                { key: 'org', label: 'Organization' },
+                {
+                  key: 'org',
+                  label: 'Organization',
+                },
                 {
                   key: 'family_model_count',
                   label: 'Model Count',
-                  render: (value) => <span className="text-right">{value}</span>,
+                  render: (value, row) => (
+                    <button
+                      className="text-right text-blue-500 hover:underline"
+                      onClick={() => handleOrgModelsClick(row.org)}
+                    >
+                      {value}
+                    </button>
+                  ),
                 },
                 {
                   key: 'family_direct_children_count',
@@ -284,10 +369,67 @@ export default function Home() {
               orderBy={orgOrderBy}
               onOrderByChange={(key) => setOrgOrderBy(key)}
               pageSize={orgPageSize}
+              currentPage={orgCurrentPage}
+              onPageChange={(page) => handlePageChange(page, 'orgs')}
             />
           )}
         </>
       )}
+      {selectedModel && (
+        <Modal onClose={() => {
+          setSelectedModel(null);
+          setModelChildrenPage(1);
+        }}>
+          <h2 className="text-2xl font-bold mb-4">
+            {selectedModelChildrenType === 'direct' ? 'Direct Children' : 'All Children'} of {selectedModel.ancestor}
+          </h2>
+          {selectedModelChildren.length > 0 ? (
+            <Table
+              data={selectedModelChildren.map((child) => ({ model: child }))}
+              columns={[{ key: 'model', label: 'Model' }]}
+              pageSize={modalPageSize}
+              currentPage={modelChildrenPage}
+              onPageChange={handleModelChildrenPageChange}
+            />
+          ) : (
+            <p>No children found for this model.</p>
+          )}
+        </Modal>
+      )}
+      {selectedOrg && (
+        <Modal onClose={() => {
+          setSelectedOrg(null);
+          setOrgModelsPage(1);
+        }}>
+          <h2 className="text-2xl font-bold mb-4">Models under {selectedOrg}</h2>
+          {selectedOrgModels.length > 0 ? (
+            <Table
+              data={selectedOrgModels}
+              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>,
+                },
+              ]}
+              pageSize={modalPageSize}
+              currentPage={orgModelsPage}
+              onPageChange={handleOrgModelsPageChange}
+            />
+          ) : (
+            <p>No models found for this organization.</p>
+          )}
+        </Modal>
+      )}
     </main>
   );
 }