| const HF = "https://huggingface.co/"; |
| const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """ }[c])); |
| const link = (path, text) => `<a href="${esc(HF + path)}" target="_blank" rel="noopener">${esc(text)}</a>`; |
| const size = (b) => (b >= 1e9 ? (b / 1e9).toFixed(1) + " GB" : b >= 1e6 ? Math.round(b / 1e6) + " MB" : Math.max(1, Math.round(b / 1e3)) + " KB"); |
| const logo = (o) => (o === "danielrosehill" ? '<img src="daniel.webp" alt="">' : o === "Hebrish" ? '<img src="hebrish.webp" alt="">' : ""); |
|
|
| function card(d) { |
| const facts = [["Size", size(d.bytes)]]; |
| if (d.rows >= 10) facts.push(["Rows", d.rows.toLocaleString("en-US")]); |
| if (d.license) facts.push(["License", esc(d.license)]); |
| return `<article class="card"><div class="who">${logo(d.owner)}<span>${esc(d.owner)} · ${esc(d.type)}</span></div> |
| <h3>${link("datasets/" + d.id, d.name)}</h3><p>${esc(d.summary)}</p> |
| ${d.gated ? '<div class="meta"><span class="badge">Access request</span></div>' : ""} |
| <dl class="facts">${facts.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join("")}</dl></article>`; |
| } |
| const navCard = (n) => `<article class="card"><div class="who"><span>Navigator</span></div><h3>${link("spaces/" + n.space, n.name)}</h3><p>${esc(n.summary)}</p> |
| <div class="count">${n.count} <span>dataset${n.count === 1 ? "" : "s"}</span></div></article>`; |
| const topicCard = (g) => `<article class="card"><div class="who"><span>Topic</span></div><h3><a href="#${g.slug}">${esc(g.name)}</a></h3> |
| <p>${esc(g.datasets.slice(0, 3).map((d) => d.name).join(", "))} and more.</p><div class="count">${g.datasets.length} <span>datasets</span></div></article>`; |
|
|
| (async () => { |
| const data = await (await fetch("data.json")).json(); |
| const q = document.getElementById("q"), out = document.getElementById("list"), tabs = document.getElementById("tabs"); |
| const navName = Object.fromEntries(data.navigators.map((n) => [n.id, n.name])); |
| document.getElementById("built").textContent = data.built; |
| document.getElementById("count").textContent = `${data.total} datasets.`; |
| const grid = (html) => `<div class="grid">${html}</div>`; |
| const draw = () => { |
| const slug = location.hash.slice(1), current = data.groups.find((g) => g.slug === slug); |
| const term = q.value.trim().toLowerCase(); |
| tabs.innerHTML = [`<a href="#"${!term && !current ? ' aria-current="page"' : ""}>Navigators</a>`, |
| ...data.groups.map((g) => `<a href="#${g.slug}"${!term && g === current ? ' aria-current="page"' : ""}>${esc(g.tab)} (${g.datasets.length})</a>`)].join(""); |
| if (!term) { |
| out.innerHTML = current ? `<h2>${esc(current.name)}</h2>` + grid(current.datasets.map(card).join("")) |
| : "<h2>Specialist navigators</h2>" + grid(data.navigators.map(navCard).join("")) + "<h2>By topic</h2>" + grid(data.groups.map(topicCard).join("")); |
| return; |
| } |
| const has = (...parts) => parts.join(" ").toLowerCase().includes(term); |
| const groups = data.groups.map((g) => [g, g.datasets.filter((d) => has(d.id, d.name, d.type, d.summary))]).filter(([, h]) => h.length); |
| const inside = data.inside.filter((d) => has(d.id, d.name, navName[d.nav])); |
| out.innerHTML = groups.map(([g, h]) => `<h2>${esc(g.name)}</h2>` + grid(h.map(card).join(""))).join("") |
| + (inside.length ? "<h2>Inside the navigators</h2>" + grid(inside.map((d) => `<article class="card"><div class="who"><span>${esc(d.id.split("/")[0])} · ${esc(navName[d.nav])}</span></div><h3>${link("datasets/" + d.id, d.name)}</h3></article>`).join("")) : ""); |
| if (!out.innerHTML) out.innerHTML = '<p class="empty">No datasets match.</p>'; |
| }; |
| q.addEventListener("input", draw); |
| addEventListener("hashchange", () => { q.value = ""; draw(); }); |
| draw(); |
| })(); |
|
|
