Spaces:

ai4data
/

fcv-data-mentions-explorer

Running

App Files Files Community

fcv-data-mentions-explorer / index.html

rafmacalaba

Upload folder using huggingface_hub

a453203 verified about 1 month ago

Raw

History Blame Contribute Delete

15.1 kB

	<!DOCTYPE html>
	<html lang="en" data-theme="dark">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>FCV Data Mentions Explorer</title>

	<!-- Google Fonts -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

	<!-- Chart.js -->
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

	<!-- Lucide Icons -->
	<script src="https://unpkg.com/lucide@latest"></script>

	<!-- Application Stylesheets -->
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="app-container">
	<!-- Top Navigation Bar -->
	<header class="app-header">
	<div class="logo-area">
	<div class="logo-icon">
	<i data-lucide="database"></i>
	</div>
	<div class="logo-text">
	<h1>FCV Data Mentions</h1>
	<span class="subtitle">Mined Knowledge & Validated Datasets Explorer</span>
	</div>
	</div>

	<!-- Global Stats Bar (Quick Look) -->
	<div class="quick-stats">
	<div class="quick-stat-card">
	<span class="q-label">Total Mentions</span>
	<span class="q-val" id="stat-total-mentions">-</span>
	</div>
	<div class="quick-stat-card">
	<span class="q-label">Unique Documents</span>
	<span class="q-val" id="stat-total-docs">-</span>
	</div>
	<div class="quick-stat-card">
	<span class="q-label">Standardized Datasets</span>
	<span class="q-val text-success" id="stat-unique-entities">-</span>
	</div>
	</div>

	<!-- Header Controls -->
	<div class="header-controls">
	<button id="theme-toggle" class="icon-btn" title="Toggle Theme">
	<i data-lucide="sun" class="sun-icon"></i>
	<i data-lucide="moon" class="moon-icon"></i>
	</button>
	</div>
	</header>

	<!-- Main Dashboard Workspace -->
	<div class="workspace">
	<!-- Sidebar: Document Search & Selector -->
	<aside class="sidebar">
	<div class="sidebar-section-title">
	<i data-lucide="filter"></i>
	<h2>Filters & Search</h2>
	</div>

	<!-- Search Box -->
	<div class="search-box-container">
	<i data-lucide="search" class="search-icon"></i>
	<input type="text" id="global-search" placeholder="Search documents, entities, contexts...">
	</div>

	<!-- Dropdown Filters -->
	<div class="filter-group">
	<label for="filter-category">Corpus Category</label>
	<select id="filter-category">
	<option value="all">All Categories</option>
	</select>
	</div>

	<div class="filter-group">
	<label for="filter-impact-channel">Impact Channel</label>
	<select id="filter-impact-channel">
	<option value="all">All Impact Channels</option>
	</select>
	</div>

	<div class="filter-group">
	<label for="filter-specificity">Data Specificity</label>
	<select id="filter-specificity">
	<option value="all">All Specificities</option>
	<option value="named" selected>Named Datasets</option>
	<option value="descriptive">Descriptive Datasets</option>
	<option value="vague">Vague References</option>
	</select>
	</div>

	<div class="sidebar-section-title document-title-section">
	<i data-lucide="file-text"></i>
	<h2>Documents (<span id="filtered-doc-count">0</span>)</h2>
	</div>

	<!-- List of Documents -->
	<div class="document-list" id="document-list">
	<!-- Loaded dynamically -->
	<div class="loading-placeholder">
	<div class="spinner"></div>
	<p>Loading document registry...</p>
	</div>
	</div>
	</aside>

	<!-- Main Interactive Content Panel -->
	<main class="content-panel">
	<!-- Navigation Tabs -->
	<nav class="view-tabs">
	<button class="tab-btn active" data-tab="dashboard-view">
	<i data-lucide="layout-dashboard"></i>
	<span>Visual Dashboard</span>
	</button>
	<button class="tab-btn" data-tab="mentions-view">
	<i data-lucide="list"></i>
	<span>Master Mention Table</span>
	</button>
	<button class="tab-btn" id="tab-doc-dive" data-tab="document-dive-view">
	<i data-lucide="book-open"></i>
	<span>Document Deep-Dive</span>
	</button>
	</nav>

	<!-- Tab 1: Visual Dashboard View -->
	<section class="tab-content active" id="dashboard-view">
	<!-- Info Alert -->
	<div class="dashboard-banner">
	<div class="banner-icon">
	<i data-lucide="sparkles"></i>
	</div>
	<div class="banner-text">
	<h3>Welcome to the FCV Data Mentions Explorer</h3>
	<p>This analytics interface aggregates validated dataset mentions from fragile, conflict, and violence research and project documents. Click tags in the word cloud or bar segments to drill down into the records.</p>
	</div>
	</div>

	<!-- Metrics Grid -->
	<div class="metrics-grid">
	<div class="metric-card bg-gradient-indigo">
	<div class="metric-header">
	<span class="metric-title">Data Uses Mined</span>
	<i data-lucide="activity"></i>
	</div>
	<div class="metric-value" id="card-total-mentions">0</div>
	<div class="metric-desc">Validated mentions across FCV literature</div>
	</div>
	<div class="metric-card bg-gradient-violet">
	<div class="metric-header">
	<span class="metric-title">Unique Documents</span>
	<i data-lucide="file-text"></i>
	</div>
	<div class="metric-value" id="card-total-docs">0</div>
	<div class="metric-desc">Unique publications with validated mentions</div>
	</div>
	<div class="metric-card bg-gradient-cyan">
	<div class="metric-header">
	<span class="metric-title">Standardized Datasets</span>
	<i data-lucide="check-check"></i>
	</div>
	<div class="metric-value" id="card-unique-entities">0</div>
	<div class="metric-desc">Distinct normalized dataset entities</div>
	</div>
	</div>

	<!-- Visualization Grid -->
	<div class="charts-grid">
	<!-- Card: Interactive Word Cloud -->
	<div class="chart-card">
	<div class="chart-header">
	<h3>Interactive Mentions Word Cloud</h3>
	<i data-lucide="cloud" title="Most frequent dataset mentions scaled by frequency"></i>
	</div>
	<div class="word-cloud-wrapper">
	<div id="word-cloud" class="word-cloud-container">
	<!-- Rendered dynamically -->
	</div>
	</div>
	</div>

	<!-- Chart: Top Standardized Mentions -->
	<div class="chart-card">
	<div class="chart-header">
	<h3>Top Mined Data Mentions (Normalized)</h3>
	<i data-lucide="bar-chart-horizontal" title="Standardized dataset frequencies"></i>
	</div>
	<div class="chart-container-wrapper">
	<canvas id="chart-top-mentions"></canvas>
	</div>
	</div>
	</div>
	</section>

	<!-- Tab 2: Master Mention Table View -->
	<section class="tab-content" id="mentions-view">
	<div class="table-controls">
	<div class="table-info">
	Showing <span id="table-showing-count">0</span> of <span id="table-total-count">0</span> mentions
	</div>
	<div class="table-actions">
	<button id="btn-export-csv" class="action-btn outline">
	<i data-lucide="download"></i>
	<span>Export CSV</span>
	</button>
	<button id="btn-clear-filters" class="action-btn link">Reset Filters</button>
	</div>
	</div>

	<div class="table-wrapper">
	<table class="data-table" id="mentions-table">
	<thead>
	<tr>
	<th>Document</th>
	<th>Page</th>
	<th>Mined Entity (Normalized)</th>
	<th>Raw Mention</th>
	<th>Impact Channel</th>
	<th>Context & Impact Sentence</th>
	</tr>
	</thead>
	<tbody id="table-body">
	<!-- Loaded dynamically -->
	</tbody>
	</table>
	</div>

	<!-- Table Pagination -->
	<div class="pagination" id="table-pagination">
	<!-- Loaded dynamically -->
	</div>
	</section>

	<!-- Tab 3: Document Deep-Dive View -->
	<section class="tab-content" id="document-dive-view">
	<!-- Blank Slate -->
	<div id="dive-blank-state" class="blank-state">
	<i data-lucide="book-open" class="blank-icon animate-pulse"></i>
	<h3>Select a Document</h3>
	<p>Choose a document from the sidebar to inspect all its individual data mentions, page-by-page extractions, and context validation logs.</p>
	</div>

	<!-- Main Document Dive Detail Panel (hidden until doc selected) -->
	<div id="dive-detail" class="dive-detail-container hidden">
	<div class="dive-doc-header">
	<div class="dive-doc-badge" id="dive-doc-category">-</div>
	<h2 id="dive-doc-title">-</h2>
	<div class="dive-doc-meta">
	<span><i data-lucide="file"></i> ID: <code id="dive-doc-id">-</code></span>
	<span><i data-lucide="hash"></i> Mined Mentions: <strong id="dive-doc-mention-count">0</strong></span>
	</div>
	</div>

	<div class="dive-workspace-split">
	<!-- Left Pane: PDF Viewer OR Fallback text layer -->
	<div class="dive-view-pane">
	<div class="page-controls" id="dive-page-controls">
	<button id="btn-prev-page" class="icon-btn-sm" title="Previous Page">
	<i data-lucide="chevron-left" style="width:14px;height:14px;"></i>
	</button>
	<span>Page <strong id="current-viewer-page">1</strong> of <strong id="total-viewer-pages">1</strong></span>
	<button id="btn-next-page" class="icon-btn-sm" title="Next Page">
	<i data-lucide="chevron-right" style="width:14px;height:14px;"></i>
	</button>
	</div>
	<div id="pdf-viewer-frame-container" style="flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg-workspace);">
	<!-- Embedded iframe or fallback text viewer rendered dynamically -->
	</div>
	</div>

	<!-- Right Pane: Mentions Inventory -->
	<div class="dive-inventory-pane">
	<div class="dive-section-header" style="margin-top: 0;">
	<i data-lucide="align-left"></i>
	<h3>Mined Mentions Inventory</h3>
	</div>
	<div class="dive-mentions-list" id="dive-mentions-list">
	<!-- Populated dynamically -->
	</div>
	</div>
	</div>
	</div>
	</section>
	</main>
	</div>
	</div>

	<!-- Application Script -->
	<script src="app.js?v=1.1"></script>
	</body>
	</html>