| import { |
| esc, |
| icon, |
| external, |
| section, |
| table, |
| empty, |
| fact, |
| tier, |
| status, |
| thumbnail, |
| enhance, |
| } from "./ui.js"; |
| import { |
| previewHTML, |
| figuresHTML, |
| videoHTML, |
| bindPreview, |
| bindVideo, |
| } from "./preview.js"; |
|
|
| export const defaults = { |
| q: "", |
| source: "", |
| method: "", |
| tier: "", |
| status: "", |
| route: "", |
| preview: false, |
| sort: "name", |
| }; |
| const tabs = [ |
| ["overview", "概况"], |
| ["annotation", "采集与标注"], |
| ["access", "数据访问"], |
| ["conversion", "SOMA转换"], |
| ]; |
|
|
| function options(list, value, label) { |
| return `<option value="">${label}</option>${list.map((item) => `<option value="${esc(item.id)}" ${item.id === value ? "selected" : ""}>${esc(item.name)}</option>`).join("")}`; |
| } |
|
|
| export function filterDatasets(context, filters) { |
| const q = filters.q.trim().toLowerCase(); |
| return context.data.datasets |
| .filter((d) => { |
| if ( |
| ["source", "method", "tier", "status", "route"].some( |
| (key) => filters[key] && d[key] !== filters[key], |
| ) |
| ) |
| return false; |
| if (filters.preview && !context.previews[d.id]?.length) return false; |
| const haystack = [ |
| d.name, |
| d.camera, |
| d.gt, |
| d.fills, |
| d.scale, |
| d.subjects, |
| ...(d.tags || []), |
| ] |
| .join(" ") |
| .toLowerCase(); |
| return !q || haystack.includes(q); |
| }) |
| .sort((a, b) => { |
| if (filters.sort === "year") |
| return ( |
| (Number(b.year?.match(/\d{4}/)?.[0]) || 0) - |
| (Number(a.year?.match(/\d{4}/)?.[0]) || 0) || |
| a.name.localeCompare(b.name) |
| ); |
| if (filters.sort === "status") |
| return ( |
| context.meta.status[a.status].order - |
| context.meta.status[b.status].order || a.name.localeCompare(b.name) |
| ); |
| return a.name.localeCompare(b.name, "en", { sensitivity: "base" }); |
| }); |
| } |
|
|
| export function catalogView(context, filters) { |
| return `<section class="view catalog-view"><header class="page-heading"><h1>数据集 <span class="heading-count">${context.data.datasets.length}</span></h1><div class="heading-actions"><a href="#overview" class="text-link"><i data-lucide="grid-2x2" aria-hidden="true"></i>数据分布</a></div></header> |
| <form id="catalog-filters" role="search" class="catalog-filters"> |
| <div class="search-field"><i data-lucide="search" aria-hidden="true"></i><input id="dataset-search" type="search" aria-label="搜索数据集" placeholder="搜索数据集、相机或标注" value="${esc(filters.q)}"></div> |
| <div class="filter-row"> |
| <select data-filter="source" aria-label="数据来源">${options(context.data.meta.sources, filters.source, "全部来源")}</select> |
| <select data-filter="method" aria-label="标注方法">${options(context.data.meta.methods, filters.method, "全部标注")}</select> |
| <select data-filter="tier" aria-label="Shape真值层级">${options( |
| context.data.meta.tiers.map((t) => ({ |
| ...t, |
| name: `${t.id === "-" ? "—" : t.id} ${t.name}`, |
| })), |
| filters.tier, |
| "全部Shape层级", |
| )}</select> |
| <select data-filter="status" aria-label="使用状态">${options(context.data.meta.statuses, filters.status, "全部状态")}</select> |
| ${filters.route ? `<select data-filter="route" aria-label="SOMA转换路线">${options(context.data.meta.routes, filters.route, "全部转换路线")}</select>` : ""} |
| <label class="checkbox"><input data-filter="preview" type="checkbox" ${filters.preview ? "checked" : ""}>有样例</label> |
| ${icon("rotate-ccw", "重置筛选", "data-clear-filters")} |
| </div> |
| </form> |
| <div class="results-toolbar"><span id="result-count" role="status" aria-live="polite"></span><select id="dataset-sort" aria-label="排序"><option value="name">名称</option><option value="year">年份</option><option value="status">使用状态</option></select></div> |
| <div class="dataset-list"><div class="dataset-columns" aria-hidden="true"><span>数据集</span><span>数据来源</span><span>标注</span><span>规模</span><span>状态</span></div><div id="dataset-results"></div></div> |
| </section>`; |
| } |
|
|
| export function bindCatalog(context, filters) { |
| function update() { |
| const datasets = filterDatasets(context, filters); |
| document.getElementById("result-count").textContent = |
| `${datasets.length} / ${context.data.datasets.length}`; |
| document.getElementById("dataset-results").innerHTML = datasets.length |
| ? datasets |
| .map( |
| (d) => `<a class="dataset-row" href="#ds-${d.id}"> |
| <div class="dataset-name">${thumbnail(d, context)}<div><h2>${esc(d.name)}</h2><span class="dataset-year">${esc(d.year)}</span></div></div> |
| <div class="dataset-source"><span>${esc(context.meta.source[d.source].name)}</span><span class="muted">${esc(context.meta.method[d.method].short)}</span></div> |
| <div class="dataset-annotation"><span>${esc(d.gt)}</span>${tier(d.tier, context.meta)}</div> |
| <div class="dataset-scale"><span>${esc(d.scale || "—")}</span><span class="muted">${esc(d.subjects)}</span></div> |
| <div class="dataset-status">${status(d.status, context.meta)}</div> |
| </a>`, |
| ) |
| .join("") |
| : empty("没有匹配的数据集", true); |
| const params = new URLSearchParams(); |
| Object.entries(filters).forEach(([k, v]) => { |
| if (v && v !== defaults[k]) params.set(k, String(v)); |
| }); |
| history.replaceState( |
| null, |
| "", |
| `#catalog${params.size ? "?" + params : ""}`, |
| ); |
| document.getElementById("dataset-sort").value = filters.sort; |
| enhance(); |
| document.querySelectorAll("[data-clear-filters]").forEach((button) => { |
| button.onclick = reset; |
| }); |
| } |
| function reset() { |
| Object.assign(filters, defaults); |
| document.getElementById("dataset-search").value = ""; |
| document.querySelectorAll("[data-filter]").forEach((el) => { |
| if (el.type === "checkbox") el.checked = false; |
| else el.value = ""; |
| }); |
| update(); |
| } |
| document.getElementById("catalog-filters").onsubmit = (event) => |
| event.preventDefault(); |
| document.getElementById("dataset-search").oninput = (event) => { |
| filters.q = event.target.value; |
| update(); |
| }; |
| document.querySelectorAll("[data-filter]").forEach((el) => { |
| el.onchange = () => { |
| filters[el.dataset.filter] = |
| el.type === "checkbox" ? el.checked : el.value; |
| update(); |
| }; |
| }); |
| document.getElementById("dataset-sort").onchange = (event) => { |
| filters.sort = event.target.value; |
| update(); |
| }; |
| update(); |
| } |
|
|
| export function overviewView(context) { |
| const { data, meta } = context; |
| const matrix = data.meta.methods.map( |
| (method) => |
| `<tr><th scope="row"><a href="#methods/${method.id}">${esc(method.short)}</a></th>${data.meta.sources |
| .map((source) => { |
| const items = data.datasets.filter( |
| (d) => d.method === method.id && d.source === source.id, |
| ); |
| return `<td>${items.map((d) => `<a href="#ds-${d.id}" class="matrix-link">${esc(d.name)}</a>`).join("") || '<span class="muted">—</span>'}</td>`; |
| }) |
| .join("")}</tr>`, |
| ); |
| return `<section class="view"><header class="page-heading"><h1>数据分布</h1><a href="#catalog" class="text-link">${data.datasets.length} 个数据集<i data-lucide="arrow-up-right" aria-hidden="true"></i></a></header> |
| <div class="source-counts">${data.meta.sources.map((source) => `<a href="#catalog?source=${source.id}"><b>${data.datasets.filter((d) => d.source === source.id).length}</b><span>${esc(source.name)}</span></a>`).join("")}</div> |
| ${section("来源 × 标注", table(["标注方法", ...data.meta.sources.map((s) => s.name)], matrix, "matrix"))} |
| ${section("Shape真值", `<dl class="tier-reference">${data.meta.tiers.map((t) => `<div><dt>${tier(t.id, meta)}<strong>${esc(t.name)}</strong></dt><dd>${esc(t.desc)}</dd><a href="#catalog?tier=${encodeURIComponent(t.id)}">${data.datasets.filter((d) => d.tier === t.id).length}<i data-lucide="arrow-up-right" aria-hidden="true"></i></a></div>`).join("")}</dl>`)} |
| ${section( |
| "优先接入", |
| `<div class="recommendations">${data.datasets |
| .filter((d) => d.status === "p0") |
| .map( |
| (d) => |
| `<a href="#ds-${d.id}">${thumbnail(d, context)}<h3>${esc(d.name)}</h3><p>${esc(d.fills)}</p></a>`, |
| ) |
| .join("")}</div>`, |
| )} |
| </section>`; |
| } |
|
|
| export function detailView(id, tab, context) { |
| const dataset = context.byId[id]; |
| if (!dataset) |
| return empty("未找到这个数据集") + '<a href="#catalog">返回数据集</a>'; |
| const { meta } = context, |
| method = meta.method[dataset.method], |
| route = meta.route[dataset.route]; |
| const links = [...(dataset.links || []), ...(dataset.team || [])]; |
| const body = |
| tab === "annotation" |
| ? `${section(method.name, `<ol class="flow">${method.steps.map((s) => `<li>${esc(s)}</li>`).join("")}</ol><dl class="facts">${fact("可信度", esc(method.trust))}${fact("常见问题", esc(method.issues))}</dl><a href="#methods/${method.id}" class="text-link">相关数据集<i data-lucide="arrow-up-right" aria-hidden="true"></i></a>`)}${figuresHTML(id, context)}` |
| : tab === "access" |
| ? section( |
| "来源", |
| `<ul class="resource-links">${links.map((l) => `<li>${external(l.label, l.url)}</li>`).join("")}</ul>${!links.length ? '<p class="muted">暂无已登记的访问链接。</p>' : ""}`, |
| ) |
| : tab === "conversion" |
| ? `${section(route.name, `<dl class="facts">${fact("原始标注", esc(route.from))}${fact("方法", esc(route.how))}${fact("Shape监督", route.shape ? "可用；仍须核对来源与拟合残差" : "不使用")}${fact("层级", tier(dataset.tier, meta) + " " + esc(meta.tier[dataset.tier].name))}</dl><a class="text-link" href="#soma/${route.id}">全部转换路线<i data-lucide="arrow-up-right" aria-hidden="true"></i></a>`)}${id === "egorenderer" ? '<p class="notice">拟合MANO/SOMA是辅助标注，不参与原生手部渲染。</p>' : ""}` |
| : `${previewHTML(dataset, context)}${section("数据规格", `<dl class="facts">${fact("视角与相机", esc(dataset.camera))}${fact("受试者", esc(dataset.subjects))}${fact("规模", esc(dataset.scale))}${fact("原始标注", esc(dataset.gt))}${fact("Shape来源", tier(dataset.tier, meta) + " " + esc(meta.tier[dataset.tier].name))}</dl>${dataset.risk ? `<p class="notice">${esc(dataset.risk)}</p>` : ""}`)}${videoHTML(id, context)}${!context.previews[id]?.length ? figuresHTML(id, context) : ""}`; |
| return `<section class="view detail-view"><a class="breadcrumb" href="#catalog"><i data-lucide="arrow-left" aria-hidden="true"></i>数据集</a><header class="detail-heading"><div><h1>${esc(dataset.name)}</h1><p>${esc(dataset.fills)}</p></div><div class="detail-meta">${status(dataset.status, meta)}<span>${esc(dataset.year)}</span></div></header> |
| ${id === "egorenderer" ? '<div class="dataset-tools"><a href="#synthetic/progress">生产进度<i data-lucide="arrow-up-right" aria-hidden="true"></i></a><a href="#synthetic/reading">读取方法<i data-lucide="arrow-up-right" aria-hidden="true"></i></a><a href="#synthetic/versions">版本<i data-lucide="arrow-up-right" aria-hidden="true"></i></a></div>' : ""} |
| <nav class="section-tabs" aria-label="数据集详情">${tabs.map(([key, name]) => `<a href="#ds-${id}/${key}" ${key === tab ? 'aria-current="page"' : ""}>${name}</a>`).join("")}</nav>${body} |
| </section>`; |
| } |
|
|
| export function bindDetail(id, context) { |
| if (!context.byId[id]) return; |
| bindPreview(context.byId[id], context); |
| bindVideo(id, context); |
| } |
|
|
