financebench-viewer / index.html
timchen0618's picture
Polish cross-tab trajectory UX
662f6d6 verified
Raw
History Blame Contribute Delete
7.76 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FinanceBench Viewer</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="trajectory-ui.css">
<link rel="stylesheet" href="e2e-structures.css">
</head>
<body>
<div class="app-shell">
<aside class="app-sidebar">
<header>
<h1>🏦 FinanceBench</h1>
<p class="subtitle">Financial QA Viewer</p>
</header>
<div class="controls">
<div class="view-toggle-row">
<div class="sidebar-label">Tab</div>
<div class="view-toggle" id="viewToggle">
<button id="modeCorpusBtn" type="button" data-mode="corpus" class="active">📚 Corpus</button>
<button id="modeEvalBtn" type="button" data-mode="eval">❓ Eval</button>
<span id="runTabButtons"></span>
</div>
</div>
<!-- Corpus controls -->
<div id="corpusControls">
<div class="search-box">
<div class="sidebar-label">Document</div>
<input type="text" id="corpusFilter" placeholder="Filter by name / company..." />
<div class="filter-row">
<select id="sectorFilter"><option value="">All sectors</option></select>
<select id="docTypeFilter"><option value="">All types</option></select>
</div>
<select id="docSelect" size="1"></select>
</div>
<div>
<div class="sidebar-label">Navigate</div>
<div class="nav-controls">
<button id="corpusPrevBtn" title="Previous (←)">← Prev</button>
<span id="corpusCounter">0 / 0</span>
<button id="corpusNextBtn" title="Next (→)">Next →</button>
</div>
</div>
</div>
<!-- Eval controls -->
<div id="evalControls" style="display:none;">
<div class="search-box">
<div class="sidebar-label">Search</div>
<input type="text" id="evalSearch" placeholder="Question / company / id / answer..." />
<div style="display:flex;gap:6px;">
<button id="evalSearchBtn" style="flex:1;">Search</button>
<button id="evalClearBtn" style="flex:1;">Clear</button>
</div>
<select id="qTypeFilter">
<option value="">All question types</option>
<option value="metrics-generated">metrics-generated</option>
<option value="domain-relevant">domain-relevant</option>
<option value="novel-generated">novel-generated</option>
</select>
</div>
<div>
<div class="sidebar-label">Navigate</div>
<div class="nav-controls">
<button id="evalPrevBtn" title="Previous (←)">← Prev</button>
<span id="evalCounter">0 / 0</span>
<button id="evalNextBtn" title="Next (→)">Next →</button>
</div>
</div>
</div>
<!-- Shared controls for c1/c2/naive/E2E run tabs -->
<div id="runControls" style="display:none;">
<div class="search-box">
<div class="sidebar-label">Search run</div>
<input type="text" id="runSearch" placeholder="Question / qid / gold / prediction..." />
<select id="runStatusFilter">
<option value="all">All statuses</option>
<option value="correct">Correct</option>
<option value="incorrect">Incorrect</option>
<option value="missing">Missing</option>
</select>
<div class="sidebar-label selector-label">Question</div>
<select id="runQidSelect"></select>
</div>
<div>
<div class="sidebar-label">Navigate</div>
<div class="nav-controls">
<button id="runPrevBtn" title="Previous (←)">← Prev</button>
<span id="runCounter">0 / 0</span>
<button id="runNextBtn" title="Next (→)">Next →</button>
</div>
</div>
</div>
<!-- Compare controls -->
<div id="compareControls" style="display:none;">
<div class="search-box">
<div class="sidebar-label">Compare filter</div>
<input type="text" id="compareSearch" placeholder="Question / company / qid..." />
<select id="compareFilter">
<option value="all">All questions</option>
<option value="disagreement">Disagreement</option>
<option value="missing">Any missing</option>
<option value="e2e-only">Only E2E correct</option>
</select>
<div class="sidebar-label selector-label">Question</div>
<select id="compareQidSelect"></select>
</div>
<div>
<div class="sidebar-label">Navigate</div>
<div class="nav-controls">
<button id="comparePrevBtn" title="Previous (←)">← Prev</button>
<span id="compareCounter">0 / 0</span>
<button id="compareNextBtn" title="Next (→)">Next →</button>
</div>
</div>
</div>
<div class="sidebar-footer" id="sidebarFooter"></div>
</div>
</aside>
<main class="app-main">
<div id="loading">Loading dataset…</div>
<!-- Corpus view -->
<section id="corpusView" style="display:none;">
<div class="doc-meta-card" id="docMetaCard"></div>
<div class="document-text-wrap" id="docTextContent"></div>
</section>
<!-- Eval view -->
<section id="evalView" style="display:none;">
<div class="card" id="evalCard"></div>
</section>
<!-- Shared run view -->
<section id="runView" style="display:none;">
<div class="run-summary" id="runSummary"></div>
<div class="card run-card" id="runCard"></div>
</section>
<!-- Comparison view -->
<section id="compareView" style="display:none;">
<div class="compare-summaries" id="compareSummaries"></div>
<div id="compareCard"></div>
</section>
</main>
</div>
<script src="trajectory-ui.js"></script>
<script src="viewer.js"></script>
<script src="e2e-structures.js"></script>
</body>
</html>