// Open Data Eval — Metadata Scorecard v5.0 // Reads from window.SCORECARD_DATA (generated by eval/metadata_eval.py) // Uses global React + ReactDOM — no bundler required const { useState, useMemo } = React; const DATA = window.SCORECARD_DATA || []; // ─── constants ─────────────────────────────────────────────────── const USECASES = [ { key: "actRecog", label: "Action Recognition", field: "actRecog", desc: "Temporal activity understanding — classifying and localizing actions in egocentric video", profile: { critical:["RGB video"], important:["Audio","Narrations/captions","Optical flow"], bonus:["Eye gaze","Hand pose annotations","IMU"] }, }, { key: "handObj", label: "Hand-Object Interaction", field: "handPose", desc: "Hand pose, grasping, and manipulation analysis from first-person view", profile: { critical:["RGB video","Hand pose annotations"], important:["Depth (RGB-D)","Depth (stereo)"], bonus:["Tactile","IMU","Force/torque"] }, }, { key: "nav", label: "Navigation", field: "nav", desc: "Navigation, 3D reconstruction, SLAM, and scene-level reasoning", profile: { critical:["RGB video","IMU"], important:["Depth (RGB-D)","SLAM/odometry","3D point clouds"], bonus:["LiDAR","Depth (stereo)","Eye gaze"] }, }, ]; const DIMS = [ { key: "technical", label: "Technical", compute: d => avg([d.fps, d.res]), desc: "Frame rate and resolution quality" }, { key: "scale", label: "Scale", compute: d => d.scale, desc: "Hours, environments, and participant diversity" }, { key: "annotation", label: "Annotation", compute: d => d.annCov, desc: "Annotation coverage across the dataset" }, { key: "accessibility", label: "Accessibility", compute: d => avg([d.lic, d.acc]), desc: "License clarity and ease of access" }, { key: "tooling", label: "Tooling", compute: d => avg([d.dl, d.doc]), desc: "Dataloader support and documentation quality" }, ]; // ─── hooks ─────────────────────────────────────────────────────── function useIsMobile() { const [mob, setMob] = useState(window.innerWidth < 600); React.useEffect(() => { const h = () => setMob(window.innerWidth < 600); window.addEventListener("resize", h); return () => window.removeEventListener("resize", h); }, []); return mob; } // ─── helpers ───────────────────────────────────────────────────── function avg(vals) { const nonNull = vals.filter(v => v != null); if (!nonNull.length) return null; return Math.round(nonNull.reduce((a, b) => a + b, 0) / nonNull.length * 1000) / 1000; } function scoreColor(v) { if (v == null) return "var(--c-null)"; if (v >= 0.7) return "var(--c-green)"; if (v >= 0.4) return "var(--c-amber)"; return "var(--c-red)"; } function scoreBg(v) { if (v == null) return "var(--c-track)"; if (v >= 0.7) return "var(--c-green-bg)"; if (v >= 0.4) return "var(--c-amber-bg)"; return "var(--c-red-bg)"; } function completenessColor(v) { if (v == null) return "var(--c-null)"; if (v >= 0.8) return "var(--c-green)"; if (v >= 0.55) return "var(--c-amber)"; return "var(--c-red)"; } function fmtPct(v) { return v == null ? "—" : `${Math.round(v * 100)}`; } function fmtNum(v) { if (v == null) return "—"; const n = Number(v); if (isNaN(n)) return "—"; if (n >= 10000) return `${Math.round(n / 1000)}k`; if (n >= 1000) return `${(n / 1000).toFixed(1)}k`; return Math.round(n).toString(); } // ─── completion ring ───────────────────────────────────────────── function CompletionRing({ value }) { const size = 42, stroke = 3.5, r = (size - stroke) / 2; const circ = 2 * Math.PI * r; const dash = value != null ? circ * Math.min(value, 1) : 0; const col = completenessColor(value); return (
{value != null ? `${Math.round(value * 100)}%` : "—"}
); } // ─── collapsible section ───────────────────────────────────────── function Section({ title, color, open, onToggle, children }) { return (
{open &&
{children}
}
); } // ─── tech stamp (44px rounded square) ──────────────────────────── function TechStamp({ score, display, label, claimed }) { const isNull = score == null; const isGreen = !isNull && score >= 0.95; const isAmber = !isNull && score >= 0.5 && !isGreen; const bg = isNull ? "linear-gradient(160deg,#f0f2f5 0%,#e8eaee 100%)" : isGreen ? "linear-gradient(160deg,#ecfdf5 0%,#d1fae5 100%)" : isAmber ? "linear-gradient(160deg,#fffbeb 0%,#fef3c7 100%)" : "linear-gradient(160deg,#fef2f2 0%,#fee2e2 100%)"; const bord = isNull ? "var(--c-border)" : isGreen ? "var(--c-green)" : isAmber ? "var(--c-amber)" : "var(--c-red)"; const col = isNull ? "var(--c-text-3)" : isGreen ? "var(--c-green)" : isAmber ? "var(--c-amber)" : "var(--c-red)"; return (
{isNull ? "—" : display} {isGreen && (
✓
)}
{label} {claimed != null && ( claimed: {claimed} )}
); } // ─── device info ───────────────────────────────────────────────── function DeviceInfo({ d }) { const [expanded, setExpanded] = useState(false); const raw = (d.captureDevice || "").trim(); const lensStr = (() => { if (!d.lensType) return null; if (d.lensType === "varies") return "Mixed lenses"; const cap = d.lensType.charAt(0).toUpperCase() + d.lensType.slice(1); return d.fovDegrees ? `${cap} ${d.fovDegrees}°` : cap; })(); const suffix = lensStr ? ` · ${lensStr}` : ""; const wrap = { marginTop:10, fontSize:12, color:"var(--c-text-3)", lineHeight:1.5 }; const btn = { fontSize:12, color:"var(--c-blue)", background:"none", border:"none", cursor:"pointer", padding:0, fontFamily:"inherit", textDecoration:"underline", textDecorationStyle:"dotted" }; if (!raw) { return (
Device not documented{lensStr ? ` · ${lensStr}` : ""}
); } if (expanded) { return (
{raw}{suffix}{" "}
); } const plusIdx = raw.indexOf(" + "); if (plusIdx !== -1) { const parts = raw.split(" + "); const primary = parts[0].replace(/\s*\(.*$/, "").trim(); const n = parts.length - 1; return (
{primary}{" "} {suffix}
); } if (raw.length > 50) { return (
{raw.slice(0, 47).trim()}…{" "} {suffix}
); } return
{raw}{suffix}
; } // ─── tooltip ───────────────────────────────────────────────────── function Tooltip({ text, children }) { const [show, setShow] = useState(false); return ( setShow(true)} onMouseLeave={() => setShow(false)}> {children} {show && (
{text}
)} ); } // ─── radar chart ───────────────────────────────────────────────── function RadarChart({ d, size = 200 }) { const pad = 40; const full = size + pad * 2; const cx = full / 2, cy = full / 2, r = size * 0.35; const n = DIMS.length; const angleStep = (2 * Math.PI) / n; const offset = -Math.PI / 2; function point(i, val) { const angle = offset + i * angleStep; return { x: cx + r * val * Math.cos(angle), y: cy + r * val * Math.sin(angle) }; } const pts = DIMS.map((dim, i) => { const v = dim.compute(d); return point(i, v != null ? v : 0); }); const col = "#2563eb"; return ( {[0.25, 0.5, 0.75, 1.0].map(level => ( { const p = point(i, level); return `${p.x},${p.y}`; }).join(" ")} fill="none" stroke="#d1d5db" strokeWidth={1.0} opacity={0.7} /> ))} {DIMS.map((_, i) => { const p = point(i, 1); return ; })} `${p.x},${p.y}`).join(" ")} fill={col} fillOpacity={0.18} stroke={col} strokeWidth={1.5} /> {pts.map((p, i) => )} {DIMS.map((dim, i) => { const angle = offset + i * angleStep; const lx = cx + (r + 28) * Math.cos(angle); const ly = cy + (r + 28) * Math.sin(angle); return ( {dim.label} ); })} ); } // ─── score breakdown bars ───────────────────────────────────────── function ScoreBreakdown({ d }) { return (
{DIMS.map(dim => { const v = dim.compute(d); const pct = v != null ? Math.round(v * 100) : 0; return (
{dim.label}
{v != null && (
)}
{fmtPct(v)}
); })}
); } // ─── downstream fit section ─────────────────────────────────────── function DownstreamFitSection({ d }) { const [active, setActive] = useState(null); const present = new Set(d.modalities || []); const TIERS = [ { key:"critical", label:"Critical" }, { key:"important", label:"Important" }, { key:"bonus", label:"Bonus" }, ]; return (
{USECASES.map(uc => { const v = d[uc.field]; const isActive = active === uc.key; return ( ); })}
{active && (() => { const uc = USECASES.find(u => u.key === active); if (!uc) return null; return (
{TIERS.map(tier => { const mods = uc.profile[tier.key] || []; if (!mods.length) return null; return (
{tier.label}
{mods.map(m => { const has = present.has(m); return ( {m} ); })}
); })}
); })()}
); } // ─── scale hero ────────────────────────────────────────────────── function ScaleHero({ d }) { const hrsFmt = d.hrs ? Number(d.hrs).toLocaleString() : null; const parts = [ d.envDivCount > 0 ? `${Math.round(d.envDivCount).toLocaleString()} env` : null, d.demoParts != null ? `${Math.round(d.demoParts).toLocaleString()} ppl` : null, d.demoGeo != null ? `${d.demoGeo} countr${Number(d.demoGeo) === 1 ? "y" : "ies"}` : null, ].filter(Boolean); return (
{hrsFmt ?? "—"}
hours
{parts.length > 0 && (
{parts.join(" · ")}
)} {d.dlEffHPG != null && (
{d.dlEffHPG.toFixed(3)} h/GB
)}
); } // ─── calibration checklist ──────────────────────────────────────── // false = gray ✗ (not provided), null = gray ? (unknown), true = green ✓ // red ✗ is reserved for future "claimed but broken" state function CalChecklist({ d }) { const items = [ { key:"calIntrinsics", label:"Intrinsics" }, { key:"calDistortion", label:"Distortion" }, { key:"calExtrinsics", label:"Extrinsics" }, { key:"calValidated", label:"Validated" }, ]; function Icon({ v }) { const box = { width:16, height:16, borderRadius:4, display:"inline-flex", alignItems:"center", justifyContent:"center", flexShrink:0, }; if (v === null || v === undefined) { return ( ? ); } return v ? ( ✓ ) : ( ✗ ); } return (
{items.map(it => (
{it.label}
))}
{d.camCalNotes && (
{d.camCalNotes}
)}
); } // ─── annotation coverage ring ───────────────────────────────────── function AnnotCov({ d }) { const v = d.annCov; const size = 40, stroke = 3.5, r = (size - stroke) / 2; const circ = 2 * Math.PI * r; const dash = v != null ? circ * Math.min(v, 1) : 0; const col = scoreColor(v); const pending = !v && d.annCovSource === "pending_paper_review"; return (
{v != null && ( )}
{v != null ? `${Math.round(v * 100)}%` : "?"}
{d.annCovNotes ? d.annCovNotes : {pending ? "Pending research" : "Not reported"}}
); } // ─── accessibility row ──────────────────────────────────────────── function AccessRow({ label, value, score }) { const col = scoreColor(score); return (
{label} {value || "—"}
); } // ─── hardware row ───────────────────────────────────────────────── function HardwareRow({ label, value }) { return (
{label} {value}
); } // ─── verification panel (below card body) ──────────────────────── function VerificationPanel({ fe }) { if (!fe) return null; const CODEC_LABELS = { hevc:"H.265/HEVC", h265:"H.265/HEVC", h264:"H.264/AVC", avc:"H.264/AVC", vp9:"VP9", av1:"AV1" }; const codecLabel = CODEC_LABELS[fe.actualCodec] || fe.actualCodec || "—"; const bitrateStr = fe.bitrateKbps ? `${fe.bitrateKbps.min.toLocaleString()}–${fe.bitrateKbps.max.toLocaleString()} kbps` : "—"; const VRow = ({ label, value, ok }) => (
{ok != null ? {ok ? "✓" : "⚠"} : } {label} {value}
); return (
{/* panel header */}
Verification {fe.filesChecked} file{fe.filesChecked !== 1 ? "s" : ""} checked via ffprobe {fe.evaluatedAt ? ` · ${fe.evaluatedAt.slice(0, 10)}` : ""}
{/* three columns */}
{/* ── col 1: actual values ─── */}
Actual (ffprobe)
{/* ── col 2: annotation coverage ─── */}
Annotation coverage
{fe.annCovByType ? Object.entries(fe.annCovByType).map(([type, info]) => { const pct = info.pct != null ? info.pct : 0; const col = pct >= 90 ? "var(--c-green)" : pct >= 50 ? "var(--c-amber)" : "var(--c-red)"; return (
{type.replace(/_/g, " ")} {info.covered}/{info.total}
); }) : No data }
{/* ── col 3: discrepancies ─── */}
Discrepancies
{!fe.fieldDiscrepancies || fe.fieldDiscrepancies.length === 0 ? None found : fe.fieldDiscrepancies.map((disc, i) => { const sev = disc.severity || "info"; const isRed = sev === "critical" || sev === "high"; const bord = isRed ? "var(--c-red)" : "var(--c-amber)"; const bg = isRed ? "var(--c-red-bg)" : "var(--c-amber-bg)"; return (
{disc.field.replace(/_/g, " ")} {" · claimed "}{String(disc.claimed)}{", actual "}{String(disc.actual)} {disc.affectedClips != null && ( {" "}({disc.affectedClips}/{disc.totalClips} clips) )}
); }) }
); } // ─── score card ─────────────────────────────────────────────────── function ScoreCard({ d }) { const [open, setOpen] = useState({ technical:true, reliability:true, access:true, scale:true, downstream:true, hardware:true, }); const [modalOpen, setModalOpen] = useState(true); const [hovered, setHovered] = useState(false); const toggle = key => setOpen(s => ({...s, [key]:!s[key]})); const isMobile = useIsMobile(); const shortEdge = d.resW && d.resH ? Math.min(d.resW, d.resH) : null; const fe = d.fileEval; const fmtFps = v => v != null ? `${Math.round(v)}fps` : null; const verifiedFpsDisplay = fe ? fmtFps(fe.actualFps) : (d.fpsRaw != null ? fmtFps(d.fpsRaw) : null); const claimedFpsDisplay = (fe && fe.fpsMatch === false) ? `${Math.round(fe.claimedFps)}fps` : null; const verifiedShortEdge = fe ? Math.min(fe.actualResW, fe.actualResH) : shortEdge; const claimedResDisplay = (fe && fe.resMatch === false && fe.claimedResW && fe.claimedResH) ? `${Math.min(fe.claimedResW, fe.claimedResH)}p` : null; const dlLabel = d.dl == null ? null : d.dl >= 0.8 ? (d.dlFramework && d.dlFramework !== "unspecified" ? d.dlFramework : "Yes") : d.dl >= 0.5 ? "Community" : "No"; const accVal = [d.accLevel, d.accUrlStatus] .filter(v => v && v !== "Not specified").join(" · ") || null; return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background:"var(--c-surface)", border:"1px solid var(--c-border)", borderRadius:14, maxWidth:1100, width:"100%", overflow:"hidden", boxShadow: hovered ? "0 2px 6px rgba(15,17,23,0.08), 0 8px 24px rgba(15,17,23,0.06)" : "var(--shadow-card)", transition:"box-shadow 0.2s ease", }}> {/* ── header ─────────────────────────────────────────────── */}
{d.name}
{d.cat} · {d.yr}
{d.hrs ? `${Number(d.hrs).toLocaleString()} h` : "hours unknown"} {d.citations != null ? ` · ~${d.citations.toLocaleString()} citations` : d.noPaper ? " · No paper" : ""}
{modalOpen && (
{(d.modalities || []).map(m => ( {m} ))}
)}
fields documented {fe && ( File verified )}
{/* ── three-column body ─────────────────────────────────── */}
{/* ── LEFT ─────────────────────────────────────────────── */}
toggle("technical")}>
{(() => { const hasAudio = fe ? fe.hasAudio : (d.modalities || []).includes("Audio"); return ( ); })()}
toggle("access")}>
toggle("reliability")}>
Annotation coverage
Camera calibration
{/* ── MIDDLE ───────────────────────────────────────────── */}
toggle("scale")}>
toggle("downstream")}>
toggle("hardware")}>
{d.captureDevice && } {(d.lensType || d.fovDegrees) && ( )} {d.videoFormat && } {d.annotFormat && }
{/* ── RIGHT: Score Profile ─────────────────────────────── */}
Score Profile
Score Breakdown
{/* ── verification panel ─────────────────────────────────── */} {fe && } {/* ── footer ─────────────────────────────────────────────── */}
Open Data Eval · Metadata Eval v1.0 ISO/IEC 5259-2
); } // ─── compare: 3 use-case constants ─────────────────────────────── const COMPARE_USECASES = [ { key: "actRecog", label: "Action Recognition", field: "actRecog", desc: "Temporal activity understanding — classifying and localizing actions in egocentric video", profile: { critical:["RGB video"], important:["Audio","Narrations/captions","Optical flow"], bonus:["Eye gaze","Hand pose annotations","IMU"] } }, { key: "handObj", label: "Hand-Object Interaction", field: "handPose", desc: "Hand pose, grasping, and manipulation analysis from first-person view", profile: { critical:["RGB video","Hand pose annotations"], important:["Depth (RGB-D)","Depth (stereo)"], bonus:["Tactile","IMU","Force/torque"] } }, { key: "nav", label: "Navigation", field: "nav", desc: "Navigation, 3D reconstruction, SLAM, and scene-level reasoning", profile: { critical:["RGB video","IMU"], important:["Depth (RGB-D)","SLAM/odometry","3D point clouds"], bonus:["LiDAR","Depth (stereo)","Eye gaze"] } }, ]; // ─── compare: tooltip ──────────────────────────────────────────── function CmpTooltip({ text, children }) { const [show, setShow] = React.useState(false); return ( setShow(true)} onMouseLeave={() => setShow(false)}> {children} {show && (
{text}
)} ); } // ─── compare: downstream fit (3 use cases) ─────────────────────── function CmpDownstreamFit({ d }) { const [active, setActive] = React.useState(null); const present = new Set(d.modalities || []); const TIERS = [{ key:"critical", label:"Critical" }, { key:"important", label:"Important" }, { key:"bonus", label:"Bonus" }]; return (
{COMPARE_USECASES.map(uc => { const v = d[uc.field]; const isActive = active === uc.key; return ( ); })}
{active && (() => { const uc = COMPARE_USECASES.find(u => u.key === active); if (!uc) return null; return (
{TIERS.map(tier => { const mods = uc.profile[tier.key] || []; if (!mods.length) return null; return (
{tier.label}
{mods.map(m => { const has = present.has(m); return ( {m} ); })}
); })}
); })()}
); } // ─── compare: fact sheet helpers ───────────────────────────────── function FH({ title }) { return
{title}
; } // Scale bars — no winner highlighting; each side always its dataset color function FNum({ label, vA, vB }) { const nA = vA != null ? Number(vA) : null, nB = vB != null ? Number(vB) : null; const ratio = nA && nB && Math.min(nA, nB) > 0 ? (Math.max(nA, nB) / Math.min(nA, nB)).toFixed(1) + "x" : ""; const maxV = Math.max(nA || 0, nB || 0); const pA = maxV > 0 && nA ? (nA / maxV) * 100 : 0; const pB = maxV > 0 && nB ? (nB / maxV) * 100 : 0; return (
{label} {nA != null ? nA.toLocaleString() : "—"}
{nB != null ? nB.toLocaleString() : "—"} {ratio}
); } // Technical text — colored by threshold, dimmed when values match function FTech({ label, vA, vB, greenAt, amberAt }) { const nA = vA != null ? parseFloat(vA) : null; const nB = vB != null ? parseFloat(vB) : null; const same = vA != null && vB != null && String(vA) === String(vB); const colorOf = n => { if (n == null) return "var(--c-text-3)"; if (n >= greenAt) return "var(--c-green)"; if (n >= amberAt) return "var(--c-amber)"; return "var(--c-red)"; }; return (
{label}
{vA || "—"}
{vB || "—"}
); } function FTxt({ label, vA, vB }) { return (
{label}
{vA || "—"}
{vB || "—"}
); } function FChk({ label, vA, vB }) { const ic = v => v === true ? "✓" : v === false ? "✗" : "?"; const cl = v => v === true ? "var(--c-green)" : v === false ? "var(--c-null)" : "var(--c-text-3)"; return (
{label}
{ic(vA)}
{ic(vB)}
); } // Access section — collapses identical fields, differing fields shown by default function FAccessSection({ A, B, dlL }) { const [allExpanded, setAllExpanded] = React.useState(false); const [diffExpanded, setDiffExpanded] = React.useState(false); const fields = [ { label:"License", vA: A.licType, vB: B.licType }, { label:"Access level", vA: A.accLevel, vB: B.accLevel }, { label:"URL status", vA: A.accUrlStatus, vB: B.accUrlStatus }, { label:"Dataloader", vA: dlL(A), vB: dlL(B) }, { label:"Docs", vA: A.docRating != null ? A.docRating + "/3" : null, vB: B.docRating != null ? B.docRating + "/3" : null }, ]; const norm = v => v == null ? "—" : String(v); const allSame = fields.every(f => norm(f.vA) === norm(f.vB)); const diffFields = fields.filter(f => norm(f.vA) !== norm(f.vB)); const sameFields = fields.filter(f => norm(f.vA) === norm(f.vB)); // All identical — single collapsed row (whole row clickable) if (allSame && !allExpanded) { return (
setAllExpanded(true)} style={{ display:"flex", alignItems:"center", padding:"6px 0", borderBottom:"1px solid var(--c-track)", cursor:"pointer" }}> Access Identical
); } // All identical — expanded (whole row clickable to collapse) if (allSame && allExpanded) { return (
{fields.map(f => )}
setAllExpanded(false)} style={{ fontSize:10, color:"var(--c-text-3)", padding:"4px 0 2px", cursor:"pointer" }}> {fields.length} fields identical
); } // Some differ — show diff rows; identical rows collapsed behind clickable label return (
{diffFields.map(f => )} {sameFields.length > 0 && !diffExpanded && (
setDiffExpanded(true)} style={{ fontSize:10, padding:"4px 0 2px", cursor:"pointer", color:"var(--c-text-3)" }}> {sameFields.length} field{sameFields.length > 1 ? "s" : ""} identical, hidden
)} {sameFields.length > 0 && diffExpanded && (
{sameFields.map(f => )}
setDiffExpanded(false)} style={{ fontSize:10, color:"var(--c-text-3)", padding:"4px 0 2px", cursor:"pointer" }}> {sameFields.length} field{sameFields.length > 1 ? "s" : ""} identical
)}
); } // Downstream fit — four-tier verdict, columns match FTech/FNum exactly const FIT_LABELS = { actRecog:"Action Recognition", handObj:"Hand-Object Interaction", nav:"Navigation" }; function CmpDownstreamFitCompare({ A, B }) { return (
{COMPARE_USECASES.map(uc => { const vA = A[uc.field] != null ? Math.round(A[uc.field] * 100) : null; const vB = B[uc.field] != null ? Math.round(B[uc.field] * 100) : null; const delta = vA != null && vB != null ? Math.abs(vA - vB) : null; const aLeads = vA != null && vB != null && vA >= vB; const winner = aLeads ? A : B; const winColor = aLeads ? "var(--c-blue)" : "var(--c-amber)"; const winBg = aLeads ? "rgba(37,99,235,0.08)" : "rgba(217,119,6,0.08)"; const bothStrong = vA != null && vB != null && vA >= 70 && vB >= 70; const oneStrong = vA != null && vB != null && (vA >= 70) !== (vB >= 70); const bothLow = vA != null && vB != null && vA < 40 && vB < 40; const midRange = vA != null && vB != null && !bothStrong && !oneStrong && !bothLow; const verdictNode = (vA == null || vB == null) ? no data : delta === 0 ? Tied : bothStrong ? Both strong : (oneStrong || midRange) ? {winner.name} +{delta} : {winner.name} +{delta} ; return (
{/* category label on its own line */}
{FIT_LABELS[uc.key] || uc.label}
{/* scores row — no label column so verdict is exactly centered */}
{vA != null ? vA + "%" : "—"}
{verdictNode}
{vB != null ? vB + "%" : "—"}
); })}
); } // Auto-summary: finds 2–3 largest relative differences, templates into sentences function genSummary(A, B) { const fmtHrs = h => h >= 1000 ? (Math.round(h / 100) / 10) + "K" : String(Math.round(h)); const aAdvantages = [], bAdvantages = [], shared = []; // Hours if (A.hrs != null && B.hrs != null && A.hrs !== B.hrs) { const ratio = Math.max(A.hrs, B.hrs) / Math.min(A.hrs, B.hrs); if (ratio >= 1.5) { const winner = A.hrs > B.hrs ? A : B; const loser = A.hrs > B.hrs ? B : A; const txt = `${Math.round(ratio)}× more footage (${fmtHrs(winner.hrs)}h vs ${fmtHrs(loser.hrs)}h)`; (A.hrs > B.hrs ? aAdvantages : bAdvantages).push({ score: ratio, txt }); } } // Participants if (A.demoParts != null && B.demoParts != null && A.demoParts !== B.demoParts) { const ratio = Math.max(A.demoParts, B.demoParts) / Math.min(A.demoParts, B.demoParts); if (ratio >= 2) { const txt = `${Math.round(ratio)}× more participants`; (A.demoParts > B.demoParts ? aAdvantages : bAdvantages).push({ score: ratio * 0.8, txt }); } } // FPS if (A.fpsRaw != null && B.fpsRaw != null && A.fpsRaw !== B.fpsRaw) { const ratio = Math.max(A.fpsRaw, B.fpsRaw) / Math.min(A.fpsRaw, B.fpsRaw); if (ratio >= 1.5) { const winner = A.fpsRaw > B.fpsRaw ? A : B; const loser = A.fpsRaw > B.fpsRaw ? B : A; const txt = `higher frame rate (${winner.fpsRaw}fps vs ${loser.fpsRaw}fps)`; (A.fpsRaw > B.fpsRaw ? aAdvantages : bAdvantages).push({ score: ratio * 0.7, txt }); } } // License clarity const stdLic = l => ["CC-BY-4.0","CC-BY-NC-4.0","CC-BY-NC-SA-4.0","Apache-2.0","MIT","CC-BY-NC-ND-4.0"].includes(l); if (A.licType && B.licType && stdLic(A.licType) !== stdLic(B.licType)) { const winner = stdLic(A.licType) ? A : B; const loser = stdLic(A.licType) ? B : A; const txt = `a standard license (${winner.licType}) vs ${loser.licType || "unspecified"}`; (stdLic(A.licType) ? aAdvantages : bAdvantages).push({ score: 1.4, txt }); } // Modality count if (A.modCount != null && B.modCount != null && Math.abs(A.modCount - B.modCount) >= 2) { const diff = Math.abs(A.modCount - B.modCount); const txt = `${diff} more sensor modalities`; (A.modCount > B.modCount ? aAdvantages : bAdvantages).push({ score: diff * 0.4, txt }); } // Shared modalities const modsA = new Set((A.modalities || []).filter(m => m !== "RGB video")); const modsB = new Set((B.modalities || []).filter(m => m !== "RGB video")); const common = [...modsA].filter(m => modsB.has(m)); if (common.length >= 2) { shared.push(`Both include ${common.slice(0,2).join(" and ")}`); } else if (A.cat && A.cat === B.cat) { shared.push(`Both are ${A.cat.toLowerCase()} datasets`); } aAdvantages.sort((a, b) => b.score - a.score); bAdvantages.sort((a, b) => b.score - a.score); const parts = []; if (aAdvantages.length) parts.push(`${A.name} has ${aAdvantages[0].txt}`); if (bAdvantages.length) parts.push(`${B.name} has ${bAdvantages[0].txt}`); if (shared.length && parts.length >= 1) parts.push(shared[0]); if (!parts.length) return `${A.name} and ${B.name} are similar across most dimensions.`; return parts.map(p => p.endsWith(".") ? p : p + ".").join(" "); } // ─── compare: side-by-side view ─────────────────────────────────── function CompareSideBySide() { const [aIdx, setAIdx] = React.useState(0); const [bIdx, setBIdx] = React.useState(Math.min(1, DATA.length - 1)); const A = DATA[aIdx], B = DATA[bIdx]; const sel = { fontSize:13, padding:"5px 10px", borderRadius:6, border:"1px solid var(--c-border)", background:"var(--c-surface)", color:"var(--c-text-1)", width:"100%" }; const shortA = A.resW && A.resH ? Math.min(A.resW, A.resH) : null; const shortB = B.resW && B.resH ? Math.min(B.resW, B.resH) : null; const dlL = d => d.dl == null ? null : d.dl >= 0.8 ? (d.dlFramework && d.dlFramework !== "unspecified" ? d.dlFramework : "Yes") : d.dl >= 0.5 ? "Community" : "No"; // Use verified ffprobe values when file eval is available const fmtFpsVal = (fe, raw) => fe ? `${Math.round(fe.actualFps)} fps` : (raw != null ? raw + " fps" : null); const fpsValA = fmtFpsVal(A.fileEval, A.fpsRaw); const fpsValB = fmtFpsVal(B.fileEval, B.fpsRaw); const resValA = A.fileEval ? `${Math.min(A.fileEval.actualResW, A.fileEval.actualResH)}p` : (shortA ? shortA + "p" : null); const resValB = B.fileEval ? `${Math.min(B.fileEval.actualResW, B.fileEval.actualResH)}p` : (shortB ? shortB + "p" : null); return (
vs
{/* auto-summary */}
{genSummary(A, B)}
{/* column headers */}
{A.name}
{B.name}
{(A.fileEval || B.fileEval) && (
{A.fileEval ? "ffprobe verified" : "metadata only"}
{B.fileEval ? "ffprobe verified" : "metadata only"}
)} {(() => { const modsA = A.modalities || [], modsB = B.modalities || []; const setB = new Set(modsB), setA = new Set(modsA); const onlyA = modsA.filter(m => !setB.has(m)); const both = modsA.filter(m => setB.has(m)); const onlyB = modsB.filter(m => !setA.has(m)); return (
{onlyA.length > 0 ?
{onlyA.map(m => {m})}
: none unique}
{A.name} only
{both.length > 0 ?
{both.map(m => {m})}
: none shared}
both
{onlyB.length > 0 ?
{onlyB.map(m => {m})}
: none unique}
{B.name} only
); })()}
Downstream Fit
{A.name}
Verdict
{B.name}
); } // ─── compare table ──────────────────────────────────────────────── function CompareTable({ usecase, sortBy, onSortChange, onRowClick }) { const uc = USECASES.find(u => u.key === usecase); const sorted = useMemo(() => { return DATA.map(d => ({ ...d, techScore: avg([d.fps, d.res]), relScore: avg([d.camCal, d.annCov]), accScore: avg([d.lic, d.acc, d.dl, d.doc]), })).sort((a, b) => { const av = a[sortBy], bv = b[sortBy]; if (av == null && bv == null) return 0; if (av == null) return 1; if (bv == null) return -1; return bv - av; }); }, [sortBy, usecase]); const active = col => sortBy === col; const TH = ({ col, label, right = true }) => ( onSortChange(col)} style={{ padding:"9px 8px", textAlign: right ? "right" : "left", fontSize:11, fontWeight:600, color: active(col) ? "var(--c-blue)" : "var(--c-text-2)", background: active(col) ? "rgba(37,99,235,0.04)" : "transparent", cursor:"pointer", whiteSpace:"nowrap", letterSpacing:"0.2px", borderBottom:"1px solid var(--c-border-strong)", userSelect:"none" }}> {label}{active(col) ? " ↓" : ""} ); const ScoreCell = ({ v }) => ( {fmtPct(v)} ); const NumCell = ({ v }) => ( {fmtNum(v)} ); const subHdr = (label) => ( {label} ); return (
{sorted.map((row, idx) => ( onRowClick(row.name)} style={{ cursor:"pointer", background: idx % 2 === 1 ? "var(--c-surface-2)" : "var(--c-surface)" }} onMouseOver={e => e.currentTarget.style.background = "#eef3ff"} onMouseOut={e => e.currentTarget.style.background = idx % 2 === 1 ? "var(--c-surface-2)" : "var(--c-surface)"}> ))}
{subHdr("fps+res")} {subHdr(uc.label)} {subHdr("cal+ann")} {subHdr("lic+acc+dl+doc")} {subHdr("raw")} {subHdr("raw")} {subHdr("raw")} {subHdr("raw")} {subHdr("score")}
{row.name} {row.yr}
Click column header to sort · Click row to open card.  Scores: ■ ≥70  ■ ≥40  ■ <40  ■ no data. Fit column reflects selected use case.
); } // ─── app ────────────────────────────────────────────────────────── function App() { const [selected, setSelected] = useState(DATA[0]?.name || ""); const [usecase, setUsecase] = useState("actRecog"); const [view, setView] = useState("card"); const [sortBy, setSortBy] = useState("completeness"); const d = DATA.find(x => x.name === selected); function handleRowClick(name) { setSelected(name); setView("card"); } const TabBtn = ({ id, label }) => ( ); return (
{/* controls */}
{view === "card" && ( )}
{/* views */} {view === "card" && d && ( )} {view === "datasets" && ( )} {view === "compare" && ( )} {/* page footer */}
); } ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));