131 lines
4.8 KiB
HTML
131 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Graph Viewer - System Monitor</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body class="graph-viewer">
|
|
<header class="graph-header">
|
|
<a href="../index.html" class="back-link">← Index</a>
|
|
<div class="nav-controls">
|
|
<button
|
|
onclick="navigate(-1)"
|
|
id="btn-prev"
|
|
title="Previous (←)"
|
|
>
|
|
◀
|
|
</button>
|
|
<span id="nav-position">1 / 4</span>
|
|
<button onclick="navigate(1)" id="btn-next" title="Next (→)">
|
|
▶
|
|
</button>
|
|
</div>
|
|
<h1 id="graph-title">Loading...</h1>
|
|
<div class="graph-controls">
|
|
<button onclick="setMode('fit')">Fit</button>
|
|
<button onclick="setMode('fit-width')">Width</button>
|
|
<button onclick="setMode('fit-height')">Height</button>
|
|
<button onclick="setMode('actual-size')">100%</button>
|
|
<button onclick="downloadSvg()">↓ SVG</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="graph-container" id="graph-container">
|
|
<img id="graph-img" src="" alt="Graph" />
|
|
</div>
|
|
|
|
<script>
|
|
const graphOrder = [
|
|
"01-system-overview",
|
|
"02-data-flow",
|
|
"03-deployment",
|
|
"04-grpc-services",
|
|
];
|
|
|
|
const graphs = {
|
|
"01-system-overview": {
|
|
title: "System Overview",
|
|
file: "01-system-overview.svg",
|
|
},
|
|
"02-data-flow": {
|
|
title: "Data Flow Pipeline",
|
|
file: "02-data-flow.svg",
|
|
},
|
|
"03-deployment": {
|
|
title: "Deployment Architecture",
|
|
file: "03-deployment.svg",
|
|
},
|
|
"04-grpc-services": {
|
|
title: "gRPC Service Definitions",
|
|
file: "04-grpc-services.svg",
|
|
},
|
|
};
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
let graphKey = params.get("g") || "01-system-overview";
|
|
let currentIndex = graphOrder.indexOf(graphKey);
|
|
if (currentIndex === -1) currentIndex = 0;
|
|
|
|
function loadGraph(key) {
|
|
const graph = graphs[key];
|
|
document.getElementById("graph-title").textContent =
|
|
graph.title;
|
|
document.getElementById("graph-img").src = graph.file;
|
|
document.title = graph.title + " - System Monitor";
|
|
history.replaceState(null, "", "?g=" + key);
|
|
graphKey = key;
|
|
updateNavHints();
|
|
}
|
|
|
|
function updateNavHints() {
|
|
const idx = graphOrder.indexOf(graphKey);
|
|
const prevBtn = document.getElementById("btn-prev");
|
|
const nextBtn = document.getElementById("btn-next");
|
|
prevBtn.disabled = idx === 0;
|
|
nextBtn.disabled = idx === graphOrder.length - 1;
|
|
document.getElementById("nav-position").textContent =
|
|
idx + 1 + " / " + graphOrder.length;
|
|
}
|
|
|
|
function navigate(direction) {
|
|
const idx = graphOrder.indexOf(graphKey);
|
|
const newIdx = idx + direction;
|
|
if (newIdx >= 0 && newIdx < graphOrder.length) {
|
|
currentIndex = newIdx;
|
|
loadGraph(graphOrder[newIdx]);
|
|
}
|
|
}
|
|
|
|
function setMode(mode) {
|
|
const container = document.getElementById("graph-container");
|
|
container.className = "graph-container " + mode;
|
|
}
|
|
|
|
function downloadSvg() {
|
|
const graph = graphs[graphKey];
|
|
const link = document.createElement("a");
|
|
link.href = graph.file;
|
|
link.download = graph.file;
|
|
link.click();
|
|
}
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "ArrowLeft") {
|
|
navigate(-1);
|
|
} else if (e.key === "ArrowRight") {
|
|
navigate(1);
|
|
} else if (e.key === "Escape") {
|
|
window.location.href = "../index.html";
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
loadGraph(graphOrder[currentIndex]);
|
|
setMode("fit");
|
|
</script>
|
|
</body>
|
|
</html>
|