ruvector-extensions
Version:
Advanced features for ruvector: embeddings, UI, exports, temporal tracking, and persistence
128 lines (120 loc) • 5.24 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RuVector - Graph Explorer</title>
<link rel="stylesheet" href="styles.css">
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div class="app-container">
<!-- Header -->
<header class="app-header">
<div class="header-content">
<h1>🔍 RuVector Graph Explorer</h1>
<div class="header-controls">
<button id="export-png" class="btn btn-secondary" title="Export as PNG">
📷 PNG
</button>
<button id="export-svg" class="btn btn-secondary" title="Export as SVG">
📊 SVG
</button>
<button id="reset-view" class="btn btn-secondary" title="Reset View">
🔄 Reset
</button>
<div class="connection-status" id="connection-status">
<span class="status-dot"></span>
<span class="status-text">Connecting...</span>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="main-content">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-section">
<h2>Search & Filter</h2>
<div class="search-box">
<input
type="text"
id="node-search"
placeholder="Search nodes by ID or metadata..."
class="search-input"
>
<button id="clear-search" class="btn-icon" title="Clear search">✕</button>
</div>
</div>
<div class="sidebar-section">
<h2>Filters</h2>
<div class="filter-group">
<label for="min-similarity">Min Similarity:</label>
<input
type="range"
id="min-similarity"
min="0"
max="1"
step="0.01"
value="0.5"
>
<span id="similarity-value">0.50</span>
</div>
<div class="filter-group">
<label for="max-nodes">Max Nodes:</label>
<input
type="number"
id="max-nodes"
min="10"
max="1000"
step="10"
value="100"
>
</div>
<button id="apply-filters" class="btn btn-primary">Apply Filters</button>
</div>
<div class="sidebar-section">
<h2>Statistics</h2>
<div class="stats">
<div class="stat-item">
<span class="stat-label">Nodes:</span>
<span class="stat-value" id="stat-nodes">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Edges:</span>
<span class="stat-value" id="stat-edges">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Selected:</span>
<span class="stat-value" id="stat-selected">None</span>
</div>
</div>
</div>
<div class="sidebar-section" id="metadata-panel" style="display: none;">
<h2>Node Details</h2>
<div id="metadata-content"></div>
<button id="find-similar" class="btn btn-primary">Find Similar Nodes</button>
<button id="close-metadata" class="btn btn-secondary">Close</button>
</div>
</aside>
<!-- Graph Canvas -->
<main class="graph-container">
<div id="graph-canvas"></div>
<div class="graph-controls">
<button id="zoom-in" class="btn-icon" title="Zoom In">+</button>
<button id="zoom-out" class="btn-icon" title="Zoom Out">−</button>
<button id="fit-view" class="btn-icon" title="Fit to View">⊡</button>
</div>
<div class="loading-overlay" id="loading-overlay">
<div class="spinner"></div>
<p>Loading graph data...</p>
</div>
</main>
</div>
</div>
<!-- Toast Notifications -->
<div id="toast-container"></div>
<!-- Scripts -->
<script src="app.js"></script>
</body>
</html>