Nail/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v9.46: add dependency graph modal (dagre+panzoom, progressive render)

Browse Source
This commit is contained in:
Naeel
2026-04-17 09:32:42 +03:00
parent 5820ab0731
commit 99f39247e2
3 changed files with 511 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+35
View File
@@ -212,7 +212,27 @@
.params-grid, .deps-grid { grid-template-columns: 1fr; }
.user-email { display: none; }
}
/* ── Graph Modal ──────────────────────────────────────────────────── */
#graph-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 2000; display: none; align-items: center; justify-content: center; }
#graph-modal { background: #161b22; border: 1px solid #30363d; border-radius: 12px; width: 96vw; max-width: 1400px; height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
#graph-toolbar { padding: 10px 16px; border-bottom: 1px solid #30363d; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#graph-toolbar h2 { font-size: 14px; font-weight: 700; color: #e1e4e8; flex: 1; }
#graph-status { font-size: 12px; color: #8b949e; flex: 1; }
#graph-canvas { flex: 1; overflow: hidden; position: relative; background: #0d1117; }
#graph-canvas svg { display: block; }
.btn-graph-ctrl { padding: 5px 12px; background: #21262d; border: 1px solid #30363d; border-radius: 6px; color: #e1e4e8; cursor: pointer; font-size: 12px; }
.btn-graph-ctrl:hover { background: #30363d; }
.btn-graph-close { color: #f85149; }
.btn-graph-close:hover { background: #3d1a1a !important; border-color: #f85149 !important; }
body.light #graph-modal { background: #f6f8fa; border-color: #d0d7de; }
body.light #graph-toolbar { border-color: #d0d7de; }
body.light #graph-canvas { background: #edf2f7; }
body.light .btn-graph-ctrl { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
body.light .btn-graph-ctrl:hover { background: #e2e8f0; }
</style>
<script src="https://cdn.jsdelivr.net/npm/dagre@0.8.5/dist/dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/panzoom@9.4.3/dist/panzoom.min.js"></script>
</head>
<body>
<div id="login-screen">
@@ -251,6 +271,7 @@
<div class="spacer"></div>
<span class="data-ts" id="data-ts"></span>
<button class="btn-refresh" id="btn-refresh">&#8635; Обновить</button>
<button class="btn-refresh" id="btn-graph-open" title="Схема зависимостей">&#9741; Схема</button>
<button class="btn-theme" id="btn-theme" title="Сменить тему">🌙</button>
<div class="header-user">
<span class="user-email" id="user-email"></span>
@@ -1075,5 +1096,19 @@ window.navBack = navBack;
})();
</script>
<!-- ── Graph Modal ───────────────────────────────────────────────────── -->
<div id="graph-overlay" style="display:none;align-items:center;justify-content:center;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;">
<div id="graph-modal">
<div id="graph-toolbar">
<h2>&#9741; Схема зависимостей</h2>
<span id="graph-status"></span>
<button class="btn-graph-ctrl" id="btn-graph-refresh">&#8635; Обновить</button>
<button class="btn-graph-ctrl btn-graph-close" id="btn-graph-close">&#10005; Закрыть</button>
</div>
<div id="graph-canvas"></div>
</div>
</div>
<script src="/dashboard/static/graph.js"></script>
</body>
</html>