File size: 4,580 Bytes
c80b461 836ccb6 2ea1dfc 836ccb6 c80b461 2ea1dfc c80b461 2ea1dfc c80b461 2ea1dfc c80b461 a658051 c80b461 a658051 c80b461 2ea1dfc c80b461 2ea1dfc c80b461 a658051 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
'use client';
import { useState, useEffect } from 'react';
import * as duckdb from '@duckdb/duckdb-wasm';
type ModelData = {
ancestor: string;
direct_children: string[] | null;
all_children: string[];
all_children_count: number;
direct_children_count: number | null;
};
export default function Home() {
const [allModels, setAllModels] = useState<ModelData[]>([]);
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(100);
const [filterText, setFilterText] = useState('');
useEffect(() => {
async function fetchData() {
const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
// Select a bundle based on browser checks
const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
const worker_url = URL.createObjectURL(
new Blob([`importScripts("${bundle.mainWorker!}");`], { type: 'text/javascript' })
);
// Instantiate the asynchronous version of DuckDB-Wasm
const worker = new Worker(worker_url);
const logger = new duckdb.ConsoleLogger();
const db = new duckdb.AsyncDuckDB(logger, worker);
await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
// Register the Parquet file using the URL
await db.registerFileURL(
'ancestor_children.parquet',
`${window.location.origin}/ancestor_children.parquet`,
duckdb.DuckDBDataProtocol.HTTP,
false
);
// Execute the SQL query using the registered Parquet file
const query = `
SELECT
ancestor,
direct_children,
all_children,
CAST(all_children_count AS INTEGER) AS all_children_count,
CAST(direct_children_count AS INTEGER) AS direct_children_count
FROM 'ancestor_children.parquet'
`;
const conn = await db.connect();
const result = await conn.query(query);
// Convert the result to a JavaScript array
const data: ModelData[] = result.toArray();
// Close the connection and terminate the worker
await conn.close();
await db.terminate();
setAllModels(data);
}
fetchData();
}, []);
const filteredModels = allModels.filter((model) =>
model.ancestor.toLowerCase().includes(filterText.toLowerCase())
);
const totalPages = Math.ceil(filteredModels.length / pageSize);
const paginatedModels = filteredModels.slice(
(currentPage - 1) * pageSize,
currentPage * pageSize
);
return (
<main className="container mx-auto py-8 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 rounded-md"
/>
</div>
{paginatedModels.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>
{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">
<button
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
disabled={currentPage === 1}
className="px-4 py-2 bg-blue-500 text-white rounded-md mr-2"
>
Previous
</button>
<button
onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
disabled={currentPage === totalPages}
className="px-4 py-2 bg-blue-500 text-white rounded-md"
>
Next
</button>
</div>
</>
) : (
<p>No data found.</p>
)}
</main>
);
}
|