139 lines
6.7 KiB
HTML
139 lines
6.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>DocForge graph</title>
|
|||
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22/%3E">
|
|||
|
|
<link rel="stylesheet" href="assets/graph.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="app">
|
|||
|
|
<header>
|
|||
|
|
<div class="view-switch" id="view-switch" data-mode="nodes"
|
|||
|
|
role="group" aria-label="Graph view">
|
|||
|
|
<button id="view-nodes" type="button" aria-pressed="true">Nodes</button>
|
|||
|
|
<button id="view-flow" type="button" aria-pressed="false">Flow</button>
|
|||
|
|
</div>
|
|||
|
|
<h1 id="project-title">DocForge graph</h1>
|
|||
|
|
<div class="stats">
|
|||
|
|
<span><strong id="node-count">—</strong> nodes</span>
|
|||
|
|
<span><strong id="edge-count">—</strong> edges</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="status" id="status">Loading validated index snapshot…</div>
|
|||
|
|
</header>
|
|||
|
|
<div class="layout">
|
|||
|
|
<aside class="left" aria-label="Graph navigation">
|
|||
|
|
<form id="search-form">
|
|||
|
|
<label for="search">Find nodes</label>
|
|||
|
|
<div class="search-row">
|
|||
|
|
<input id="search" name="q" type="search" autocomplete="off"
|
|||
|
|
placeholder="title, symbol, path…">
|
|||
|
|
<button class="button" type="submit">Find</button>
|
|||
|
|
</div>
|
|||
|
|
<label for="family">Family</label>
|
|||
|
|
<select id="family" name="family"><option value="">All families</option></select>
|
|||
|
|
</form>
|
|||
|
|
<div class="results-context">
|
|||
|
|
<strong id="results-label">All nodes</strong>
|
|||
|
|
<button id="clear-result-filter" type="button" hidden>Clear filter</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="results" id="results"></div>
|
|||
|
|
</aside>
|
|||
|
|
<div class="panel-resizer" id="left-resizer" role="separator" tabindex="0"
|
|||
|
|
aria-label="Resize navigation panel" aria-orientation="vertical"
|
|||
|
|
aria-valuemin="220" aria-valuemax="900" aria-valuenow="310"></div>
|
|||
|
|
<main class="canvas">
|
|||
|
|
<div class="viewport-controls" role="group" aria-label="Graph viewport controls">
|
|||
|
|
<button class="viewport-control" id="zoom-in" type="button"
|
|||
|
|
title="Zoom in" aria-label="Zoom in">+</button>
|
|||
|
|
<button class="viewport-control" id="zoom-out" type="button"
|
|||
|
|
title="Zoom out" aria-label="Zoom out">−</button>
|
|||
|
|
<button class="viewport-control" id="reset-view" type="button"
|
|||
|
|
title="Reset view" aria-label="Reset graph view">⌂</button>
|
|||
|
|
<output class="zoom-level" id="zoom-level" aria-live="polite">100%</output>
|
|||
|
|
<button class="restore-hidden" id="restore-hidden" type="button" hidden>
|
|||
|
|
Restore hidden
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<details class="relationship-key" id="relationship-key">
|
|||
|
|
<summary>
|
|||
|
|
<span>Relationships</span>
|
|||
|
|
<span class="relationship-key-count" id="relationship-key-count">0 visible</span>
|
|||
|
|
</summary>
|
|||
|
|
<ul class="relationship-key-list" id="relationship-key-list"
|
|||
|
|
aria-label="Visible relationship color and symbol key"></ul>
|
|||
|
|
</details>
|
|||
|
|
<svg id="graph" viewBox="-600 -410 1200 820"
|
|||
|
|
role="img" aria-label="Node neighborhood"></svg>
|
|||
|
|
<div class="empty" id="empty">Search for a node to inspect its neighborhood.</div>
|
|||
|
|
<div class="connection-state" id="connection-state" role="alert" hidden>
|
|||
|
|
<strong>Visualization disconnected</strong>
|
|||
|
|
<span>The project-bound listener is unavailable. Invoke docforge_visualize again.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="viewport-hint">
|
|||
|
|
Left-click descriptor · right-click full inspector · Space centers selection
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
<div class="panel-resizer" id="right-resizer" role="separator" tabindex="0"
|
|||
|
|
aria-label="Resize neighborhood panel" aria-orientation="vertical"
|
|||
|
|
aria-valuemin="240" aria-valuemax="900" aria-valuenow="350"></div>
|
|||
|
|
<aside class="right" aria-label="Neighborhood navigation">
|
|||
|
|
<p class="panel-empty" id="neighborhood-empty">
|
|||
|
|
Select a node to inspect its nearby relationships.
|
|||
|
|
</p>
|
|||
|
|
<div class="neighborhood" id="neighborhood" hidden>
|
|||
|
|
<h2 class="neighborhood-title">Neighborhood</h2>
|
|||
|
|
<div class="node-legend" role="group" aria-label="Node role colors">
|
|||
|
|
<span class="node-legend-primary"><i></i><b id="primary-role-label">Focus</b></span>
|
|||
|
|
<span class="node-legend-child"><i></i><b id="child-role-label">Outgoing</b></span>
|
|||
|
|
<span class="node-legend-edge"><i></i><b id="edge-role-label">Incoming</b></span>
|
|||
|
|
</div>
|
|||
|
|
<div id="neighborhood-sections"></div>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<dialog id="node-dialog" aria-labelledby="node-dialog-label">
|
|||
|
|
<div class="dialog-shell">
|
|||
|
|
<div class="dialog-head">
|
|||
|
|
<strong id="node-dialog-label">Inspect node</strong>
|
|||
|
|
<button class="dialog-close" id="close-node-dialog" type="button"
|
|||
|
|
aria-label="Close node inspection">×</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="dialog-body" id="node-dialog-details"></div>
|
|||
|
|
<div class="dialog-actions">
|
|||
|
|
<button class="button" id="open-node-source" type="button">Open source</button>
|
|||
|
|
<button class="button" id="hide-node" type="button">Hide node</button>
|
|||
|
|
<button class="button" id="explore-node" type="button">Explore neighborhood</button>
|
|||
|
|
<button class="button" id="dismiss-node-dialog" type="button">Close</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</dialog>
|
|||
|
|
<dialog class="compact-dialog" id="node-card" aria-label="Selected node descriptor">
|
|||
|
|
<div class="dialog-shell">
|
|||
|
|
<div class="dialog-body" id="node-card-details"></div>
|
|||
|
|
<div class="dialog-actions">
|
|||
|
|
<button class="button" id="open-card-source" type="button">Open source</button>
|
|||
|
|
<button class="button" id="hide-card-node" type="button">Hide node</button>
|
|||
|
|
<button class="button" id="explore-card-node" type="button">Explore neighborhood</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</dialog>
|
|||
|
|
<dialog class="source-dialog" id="source-dialog" aria-labelledby="source-dialog-label">
|
|||
|
|
<div class="dialog-shell">
|
|||
|
|
<div class="dialog-head">
|
|||
|
|
<strong id="source-dialog-label">Node source</strong>
|
|||
|
|
<button class="dialog-close" id="close-source-dialog" type="button"
|
|||
|
|
aria-label="Close source">×</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="dialog-body"><code class="source-code" id="source-code"></code></div>
|
|||
|
|
<div class="dialog-actions">
|
|||
|
|
<button class="button" id="dismiss-source-dialog" type="button">Close</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</dialog>
|
|||
|
|
<script src="assets/graph.js" defer></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|