121 lines
4.2 KiB
HTML
121 lines
4.2 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>
|