97 lines
3.5 KiB
HTML
97 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>TLC Reference Graph</title>
|
|
<link rel="icon" href="/static/favicon.png" type="image/png" />
|
|
<link rel="stylesheet" href="https://unpkg.com/xp.css" />
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="window graph-window" style="max-width: 1100px; margin: 20px auto;">
|
|
<div class="title-bar">
|
|
<div class="title-bar-text">Reference Graph</div>
|
|
<div class="title-bar-controls">
|
|
<a class="title-bar-link" href="/">⬅ Search</a>
|
|
</div>
|
|
</div>
|
|
<div class="window-body">
|
|
<p>
|
|
Explore how videos reference each other. Enter a <code>video_id</code> to see its immediate
|
|
neighbors (referenced and referencing videos). Choose a larger depth to expand the graph.
|
|
</p>
|
|
|
|
<form id="graphForm" class="graph-controls">
|
|
<div class="field-group">
|
|
<label for="graphVideoId">Video ID</label>
|
|
<input
|
|
id="graphVideoId"
|
|
name="video_id"
|
|
type="text"
|
|
placeholder="e.g. dQw4w9WgXcQ"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label for="graphDepth">Depth</label>
|
|
<select id="graphDepth" name="depth">
|
|
<option value="1">1 hop</option>
|
|
<option value="2">2 hops</option>
|
|
<option value="3">3 hops</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label for="graphMaxNodes">Max nodes</label>
|
|
<select id="graphMaxNodes" name="max_nodes">
|
|
<option value="100">100</option>
|
|
<option value="150">150</option>
|
|
<option value="200" selected>200</option>
|
|
<option value="300">300</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="graphFullToggle" name="full_graph" />
|
|
Attempt entire reference graph
|
|
</label>
|
|
<p class="field-hint">
|
|
Includes every video that references another (ignores depth; may be slow). Max nodes still
|
|
applies.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label for="graphLabelSize">Labels</label>
|
|
<select id="graphLabelSize" name="label_size">
|
|
<option value="off">Off</option>
|
|
<option value="tiny" selected>Tiny</option>
|
|
<option value="small">Small</option>
|
|
<option value="normal">Normal</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="large">Large</option>
|
|
<option value="xlarge">Extra large</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit">Build graph</button>
|
|
</form>
|
|
|
|
<div id="graphStatus" class="graph-status">Enter a video ID to begin.</div>
|
|
<div id="graphContainer" class="graph-container"></div>
|
|
</div>
|
|
|
|
<div class="status-bar">
|
|
<p class="status-bar-field">Click nodes to open the video on YouTube</p>
|
|
<p class="status-bar-field">Colors represent channels</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/graph.js"></script>
|
|
</body>
|
|
</html>
|