viktor/claude-memory-mcp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add fullscreen toggle to graph visualization

Browse source 
Expand/collapse button in bottom-right corner lets the graph fill the
entire viewport for better exploration. Escape key exits fullscreen.
Category filters overlay in top-left when fullscreen.
This commit is contained in:
Viktor Barzin 2026-03-23 00:37:24 +02:00
parent f3e61d8c77
commit f8bbb2e993
No known key found for this signature in database
GPG key ID: 0EB088298288D958
3 changed files with 89 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/claude_memory/ui/static/css/app.css
View file

@ -289,6 +289,60 @@ textarea.input-field {
height: 100%;
}
/* Fullscreen toggle button */
.fullscreen-toggle-btn {
position: absolute;
bottom: 1rem;
right: 1rem;
z-index: 11;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.5rem;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.fullscreen-toggle-btn:hover {
color: var(--accent);
border-color: var(--border-accent);
box-shadow: 0 0 12px var(--accent-glow);
}
/* Graph fullscreen mode */
.graph-fullscreen {
position: fixed !important;
inset: 0 !important;
z-index: 50 !important;
background: var(--bg-primary) !important;
padding: 0 !important;
margin: 0 !important;
width: 100vw !important;
height: 100vh !important;
}
.graph-fullscreen .graph-container {
height: 100vh !important;
border-radius: 0;
border: none;
}
.graph-fullscreen .flex.flex-wrap.gap-2.mb-4 {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 11;
background: var(--bg-primary);
padding: 0.5rem 0.75rem;
border-radius: 6px;
border: 1px solid var(--border);
opacity: 0.9;
}
/* Node detail panel */
.node-detail {
background: var(--bg-secondary);

16
src/claude_memory/ui/static/index.html
View file

@ -488,6 +488,22 @@
<div class="relative">
<div class="graph-container" x-ref="graphContainer"></div>
<!-- Fullscreen toggle button -->
<button class="fullscreen-toggle-btn" @click="toggleFullscreen()" :title="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'">
<template x-if="!isFullscreen">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline>
<line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line>
</svg>
</template>
<template x-if="isFullscreen">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline>
<line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line>
</svg>
</template>
</button>
<template x-if="selectedNode">
<div class="node-detail" style="position:absolute; top:1rem; right:1rem; width:20rem; z-index:10;">
<div class="flex items-center gap-2 mb-2">

19
src/claude_memory/ui/static/js/graph.js
View file

@ -7,6 +7,7 @@ function graphComponent() {
loading: false,
selectedNode: null,
simulation: null,
isFullscreen: false,
async init() {
this.loading = true;
@ -194,6 +195,24 @@ function graphComponent() {
});
},
toggleFullscreen() {
this.isFullscreen = !this.isFullscreen;
const wrapper = this.$el.closest('[x-show="$store.app.activeTab === \'graph\'"]');
if (wrapper) {
wrapper.classList.toggle('graph-fullscreen', this.isFullscreen);
}
if (this.isFullscreen) {
this._escHandler = (e) => { if (e.key === 'Escape') this.toggleFullscreen(); };
document.addEventListener('keydown', this._escHandler);
} else {
if (this._escHandler) {
document.removeEventListener('keydown', this._escHandler);
this._escHandler = null;
}
}
setTimeout(() => this.render(), 50);
},
preview(content, len = 200) {
if (!content) return '';
return content.length > len ? content.substring(0, len) + '...' : content;