riz/mcp-memory
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): add zoom and fit navigation to graph and fix kanban flex layout overflow

Browse Source
This commit is contained in:
Riz Ashraf committed 2026-09-12 11:04:28 +01:00
1 parent 06dc67e9d0
commit 981a49327c
1 file changed
+28 -5
Download Patch File Download Diff File Expand all files Collapse all files
server/src/dashboard.html
+28 -5
View File
@@ -14,7 +14,7 @@
.panel h2 { margin-top: 0; margin-bottom: 15px; color: #34495e; font-size: 1.2em; border-bottom: 1px solid #ecf0f1; padding-bottom: 10px; }
/* Graph Panel */
.graph-panel { flex: 2; }
.graph-panel { flex: 2; position: relative; display: flex; flex-direction: column; }
#network-container { flex: 1; min-height: 400px; position: relative; border: 1px solid #bdc3c7; border-radius: 4px; background: #fafafa; }
/* Right Column */
@@ -28,11 +28,16 @@
.search-result-item strong { color: #2980b9; display: block; }
/* Kanban Panel */
.kanban-panel { flex: 1.5; }
.kanban-board { display: flex; gap: 10px; height: 100%; }
.kanban-column { flex: 1; background: #f8f9fa; border-radius: 4px; padding: 10px; display: flex; flex-direction: column; }
.kanban-panel { flex: 1.5; display: flex; flex-direction: column; min-height: 0; }
.kanban-board { display: flex; gap: 10px; flex: 1; min-height: 0; }
.kanban-column { flex: 1; background: #f8f9fa; border-radius: 4px; padding: 10px; display: flex; flex-direction: column; min-height: 0; }
.kanban-column h3 { margin: 0 0 10px 0; font-size: 0.9em; color: #7f8c8d; text-align: center; }
.kanban-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.kanban-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding-right: 5px; }
/* Graph Controls */
.graph-controls { position: absolute; top: 50px; right: 30px; z-index: 10; display: flex; flex-direction: column; gap: 5px; }
.graph-controls button { background: white; border: 1px solid #bdc3c7; border-radius: 4px; width: 30px; height: 30px; cursor: pointer; font-weight: bold; }
.graph-controls button:hover { background: #ecf0f1; }
.task-card { background: white; padding: 8px; border-radius: 4px; border-left: 4px solid #3498db; font-size: 0.85em; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.task-card.completed { border-left-color: #2ecc71; opacity: 0.7; }
@@ -51,8 +56,14 @@
<div class="main-container">
<div class="panel graph-panel">
<h2>Knowledge Graph</h2>
<div class="graph-controls">
<button onclick="zoomGraph(0.2)" title="Zoom In">+</button>
<button onclick="zoomGraph(-0.2)" title="Zoom Out">-</button>
<button onclick="resetGraph()" title="Reset View">⌂</button>
</div>
<div id="network-container"></div>
</div>
</div>
<div class="right-column">
<div class="panel search-panel">
@@ -83,6 +94,17 @@
</div>
<script>
// Graph Controls
function zoomGraph(step) {
if (!network) return;
const currentScale = network.getScale();
network.moveTo({ scale: currentScale * (1 + step) });
}
function resetGraph() {
if (!network) return;
network.fit({ animation: { duration: 500, easingFunction: 'easeInOutQuad' } });
}
// Graph Initialization
let network = null;
async function loadGraph() {
@@ -205,3 +227,4 @@