superlocalmemory 2.6.0 → 2.7.0

package/ui/index.html

@@ -20,6 +20,11 @@
 
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            overflow-y: scroll;  /* Always show scrollbar to prevent layout shift */
+        }
+
+        html {
+            scroll-behavior: smooth;
         }
 
         [data-bs-theme="light"] body,
@@ -70,12 +75,35 @@
             margin: 0;
         }
 
+        .tab-content {
+            min-height: 700px;
+            overflow: visible;
+        }
+
+        .tab-pane {
+            overflow: visible;
+        }
+
         #graph-container {
             background: var(--bs-body-bg);
             border-radius: 10px;
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-            min-height: 600px;
+            height: 600px !important;
+            max-height: 600px;
+            width: 100% !important;
             position: relative;
+            overflow: hidden;
+            /* Mobile touch support - prevent default gestures */
+            touch-action: none;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        #graph-container canvas {
+            max-width: 100% !important;
+            max-height: 100% !important;
         }
 
         .node {
@@ -363,6 +391,244 @@
         [data-bs-theme="dark"] footer a {
             color: #8fa4ff;
         }
+
+        /* ========================================
+           MOBILE & TABLET RESPONSIVE STYLES
+           ======================================== */
+
+        /* Tablet (768px and below) */
+        @media (max-width: 768px) {
+            .navbar-brand {
+                font-size: 1rem;
+            }
+
+            #navbar-subtitle {
+                display: none !important;
+            }
+
+            .stat-card {
+                margin-bottom: 12px;
+            }
+
+            .stat-value {
+                font-size: 1.4rem;
+            }
+
+            .stat-icon {
+                font-size: 1.5rem;
+            }
+
+            /* Graph container - smaller on tablet */
+            #graph-container {
+                height: 450px !important;
+                max-height: 450px;
+            }
+
+            /* Stack controls vertically on tablet */
+            .tab-pane .row > .col-md-6,
+            .tab-pane .row > .col-md-8,
+            .tab-pane .row > .col-md-4 {
+                margin-bottom: 10px;
+            }
+
+            /* Smaller buttons on mobile */
+            .btn-sm {
+                font-size: 0.8rem;
+                padding: 4px 8px;
+            }
+
+            /* Memory table - hide less important columns */
+            .memory-table th:nth-child(4),
+            .memory-table td:nth-child(4),
+            .memory-table th:nth-child(5),
+            .memory-table td:nth-child(5) {
+                display: none;
+            }
+
+            .memory-content {
+                max-width: 200px;
+            }
+        }
+
+        /* Mobile (480px and below) */
+        @media (max-width: 480px) {
+            body {
+                font-size: 0.9rem;
+            }
+
+            .navbar-brand {
+                font-size: 0.9rem;
+            }
+
+            .container-fluid {
+                padding-left: 10px;
+                padding-right: 10px;
+            }
+
+            /* Stat cards - 2 per row on mobile */
+            .col-6.mb-3 {
+                padding-left: 5px;
+                padding-right: 5px;
+            }
+
+            .stat-card {
+                padding: 12px 8px !important;
+            }
+
+            .stat-value {
+                font-size: 1.2rem;
+            }
+
+            .stat-icon {
+                font-size: 1.2rem;
+            }
+
+            .stat-card small {
+                font-size: 0.7rem;
+            }
+
+            /* Graph container - even smaller on mobile */
+            #graph-container {
+                height: 350px !important;
+                max-height: 350px;
+                border-radius: 6px;
+            }
+
+            /* Tabs - smaller text */
+            .nav-tabs .nav-link {
+                font-size: 0.8rem;
+                padding: 8px 10px;
+            }
+
+            .nav-tabs .nav-link i {
+                display: none;
+            }
+
+            /* Search controls - stack vertically */
+            #memories-pane .row > div {
+                margin-bottom: 8px;
+            }
+
+            /* Memory table - show only essentials */
+            .memory-table {
+                font-size: 0.8rem;
+            }
+
+            .memory-table th:nth-child(3),
+            .memory-table td:nth-child(3),
+            .memory-table th:nth-child(4),
+            .memory-table td:nth-child(4),
+            .memory-table th:nth-child(5),
+            .memory-table td:nth-child(5) {
+                display: none;
+            }
+
+            .memory-content {
+                max-width: 150px;
+                font-size: 0.75rem;
+            }
+
+            /* Modal - full screen on mobile */
+            .modal-dialog {
+                margin: 0;
+                max-width: 100%;
+                height: 100vh;
+            }
+
+            .modal-content {
+                height: 100%;
+                border-radius: 0;
+            }
+
+            /* Dropdown controls */
+            .form-select-sm {
+                font-size: 0.8rem;
+                padding: 4px 8px;
+            }
+
+            /* Profile select - smaller */
+            .profile-select {
+                min-width: 90px;
+                font-size: 0.75rem;
+                padding: 2px 24px 2px 8px;
+            }
+
+            /* Theme toggle - smaller */
+            .theme-toggle {
+                font-size: 0.8rem;
+                padding: 3px 10px;
+            }
+
+            /* Footer - smaller text */
+            footer {
+                font-size: 0.75rem;
+                padding: 15px;
+                margin-top: 20px;
+            }
+
+            /* Graph controls - stack vertically on mobile */
+            #graph-pane .card .row > div {
+                margin-bottom: 10px;
+            }
+
+            /* Hide "Show All Memories" button text on mobile, icon only */
+            #graph-status-filtered .btn span {
+                display: none;
+            }
+
+            #graph-status-filtered .btn i::after {
+                content: ' All';
+            }
+        }
+
+        /* Landscape mobile (small height) */
+        @media (max-height: 500px) and (orientation: landscape) {
+            #graph-container {
+                height: 250px !important;
+                max-height: 250px;
+            }
+
+            .stat-card {
+                padding: 8px !important;
+            }
+
+            .stat-value {
+                font-size: 1rem;
+            }
+
+            .navbar {
+                padding: 5px 0;
+            }
+        }
+
+        /* Touch feedback for interactive elements */
+        @media (hover: none) and (pointer: coarse) {
+            /* This targets touch devices only */
+            .btn:active,
+            .nav-link:active,
+            .sortable:active {
+                opacity: 0.7;
+                transform: scale(0.98);
+            }
+
+            /* Larger tap targets on touch devices */
+            .btn {
+                min-height: 44px;
+                min-width: 44px;
+            }
+
+            .nav-tabs .nav-link {
+                min-height: 44px;
+            }
+
+            /* Prevent accidental double-tap zoom on buttons */
+            .btn,
+            .nav-link,
+            .form-control,
+            .form-select {
+                touch-action: manipulation;
+            }
+        }
     </style>
 </head>
 <body>
@@ -383,8 +649,8 @@
                     </button>
                 </div>
                 <span class="text-white-50 d-none d-md-inline" id="navbar-subtitle">Knowledge Graph Explorer</span>
-                <button class="theme-toggle" id="theme-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
-                    <i class="bi bi-sun-fill" id="theme-icon"></i>
+                <button class="theme-toggle" id="theme-toggle" onclick="toggleDarkMode()" aria-label="Toggle dark mode">
+                    <i class="bi bi-sun-fill" id="theme-icon" aria-hidden="true"></i>
                 </button>
             </div>
         </div>
@@ -475,24 +741,77 @@
             <!-- Graph Visualization -->
             <div class="tab-pane fade show active" id="graph-pane">
                 <div class="card p-3 mb-3">
-                    <div class="row align-items-center">
+                    <div class="row align-items-center mb-2">
                         <div class="col-md-8">
-                            <h5 class="mb-0">Force-Directed Knowledge Graph</h5>
-                            <small class="text-muted">Nodes = Memories | Links = Semantic Similarity</small>
+                            <h5 class="mb-0">Interactive Knowledge Graph</h5>
+                            <small class="text-muted">Zoom, pan, click nodes to explore • Powered by Cytoscape.js</small>
+                            <div id="graph-stats" class="mt-2"></div>
                         </div>
                         <div class="col-md-4 text-end">
-                            <button class="btn btn-sm btn-outline-primary" onclick="loadGraph()">
+                            <button class="btn btn-sm btn-outline-primary" onclick="loadGraph()" aria-label="Refresh graph data">
                                 <i class="bi bi-arrow-clockwise"></i> Refresh
                             </button>
-                            <select class="form-select form-select-sm d-inline-block w-auto" id="graph-max-nodes" onchange="loadGraph()">
-                                <option value="50">50 nodes</option>
-                                <option value="100" selected>100 nodes</option>
+                            <select class="form-select form-select-sm d-inline-block w-auto" id="graph-max-nodes" onchange="loadGraph()" aria-label="Select maximum number of nodes to display">
+                                <option value="50" selected>50 nodes</option>
+                                <option value="100">100 nodes</option>
                                 <option value="200">200 nodes</option>
+                                <option value="500">500 nodes</option>
                             </select>
                         </div>
                     </div>
+                    <div class="row align-items-center">
+                        <div class="col-md-6">
+                            <label class="form-label mb-1 small" for="graph-layout-selector">Layout Algorithm:</label>
+                            <select class="form-select form-select-sm" id="graph-layout-selector" onchange="changeGraphLayout(this.value)" aria-label="Select graph layout algorithm">
+                                <option value="fcose" selected>Force-Directed (Fast)</option>
+                                <option value="cose">Force-Directed (Classic)</option>
+                                <option value="circle">Circular</option>
+                                <option value="grid">Grid</option>
+                                <option value="breadthfirst">Hierarchical</option>
+                                <option value="concentric">Concentric (by Importance)</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <!-- Clear status indicator - shows what user is viewing -->
+                            <div id="graph-status-container">
+                                <!-- When viewing FULL graph (default state) -->
+                                <div id="graph-status-full" style="display:block;" role="status" aria-live="polite">
+                                    <div class="d-flex align-items-center">
+                                        <span class="text-muted small">
+                                            <i class="bi bi-diagram-3"></i> <span id="graph-status-full-text">Showing all memories</span>
+                                        </span>
+                                        <button class="btn btn-sm btn-outline-secondary ms-2" onclick="loadGraph()" aria-label="Refresh current graph view">
+                                            <i class="bi bi-arrow-clockwise"></i> Refresh
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- When viewing FILTERED by cluster (show BIG clear button) -->
+                                <div id="graph-status-filtered" style="display:none;" role="status" aria-live="polite">
+                                    <div class="alert alert-info py-2 px-3 mb-0 d-flex align-items-center justify-content-between">
+                                        <span>
+                                            <i class="bi bi-funnel-fill"></i>
+                                            <strong id="graph-filter-description">Viewing Cluster X</strong>
+                                            <span class="small text-muted ms-2" id="graph-filter-count">(X memories)</span>
+                                        </span>
+                                        <button class="btn btn-primary btn-sm ms-3" onclick="clearGraphFilters()" aria-label="Clear filter and show all memories">
+                                            <i class="bi bi-grid-3x3"></i> Show All Memories
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="graph-container"
+                     role="application"
+                     aria-label="Interactive knowledge graph - use Tab to navigate nodes, Enter to view details, Arrow keys to move between adjacent nodes, Escape to clear filters"
+                     aria-describedby="graph-stats"
+                     style="width:100%; height:600px; border:1px solid #dee2e6; border-radius:8px; background:#f8f9fa;">
                 </div>
-                <div id="graph-container"></div>
+
+                <!-- Skip link for keyboard users -->
+                <a href="#memories-pane" class="visually-hidden-focusable">Skip to Memories list</a>
             </div>
 
             <!-- Memories List -->
@@ -826,12 +1145,26 @@
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- D3.js -->
+    <!-- D3.js (kept for backward compatibility) -->
     <script src="https://d3js.org/d3.v7.min.js"></script>
 
+    <!-- Cytoscape.js + Extensions (v2.6.5 — interactive graph) -->
+    <script src="https://unpkg.com/cytoscape@3.30.4/dist/cytoscape.min.js"></script>
+    <script src="https://unpkg.com/layout-base@2.0.1/layout-base.js"></script>
+    <script src="https://unpkg.com/cose-base@2.2.0/cose-base.js"></script>
+    <script src="https://unpkg.com/cytoscape-fcose@2.2.0/cytoscape-fcose.js"></script>
+    <link href="https://unpkg.com/cytoscape-navigator@1.3.3/cytoscape.js-navigator.css" rel="stylesheet" type="text/css" />
+    <script src="https://unpkg.com/cytoscape-navigator@1.3.3/cytoscape-navigator.js"></script>
+
     <!-- Modular JS (v2.5 — split from monolith app.js) -->
     <script src="static/js/core.js"></script>
-    <script src="static/js/graph.js"></script>
+
+    <!-- Graph Visualization Scripts (v2.6.5 - Modular) -->
+    <script src="static/js/graph-core.js"></script>
+    <script src="static/js/graph-filters.js"></script>
+    <script src="static/js/graph-ui.js"></script>
+    <script src="static/js/graph-interactions.js"></script>
+
     <script src="static/js/memories.js"></script>
     <script src="static/js/search.js"></script>
     <script src="static/js/modal.js"></script>

package/ui/js/clusters.js

@@ -30,7 +30,9 @@ function renderClusters(clusters) {
 
         var card = document.createElement('div');
         card.className = 'card cluster-card';
-        card.style.borderColor = color;
+        card.style.cssText = 'border-color:' + color + '; cursor:pointer;';
+        card.setAttribute('data-cluster-id', cluster.cluster_id);
+        card.title = 'Click to filter graph to this cluster';
 
         var body = document.createElement('div');
         body.className = 'card-body';
@@ -76,5 +78,92 @@ function renderClusters(clusters) {
 
         card.appendChild(body);
         container.appendChild(card);
+
+        // v2.6.5: Click card → filter graph to this cluster
+        card.addEventListener('click', function(e) {
+            // Don't trigger if clicking on badge or entity
+            if (e.target.classList.contains('entity-badge') || e.target.classList.contains('badge')) {
+                return;
+            }
+
+            const clusterId = parseInt(card.getAttribute('data-cluster-id'));
+            filterGraphToCluster(clusterId);
+        });
+
+        // v2.6.5: Click entity badge → filter graph by entity
+        if (cluster.top_entities && cluster.top_entities.length > 0) {
+            const entityBadges = body.querySelectorAll('.entity-badge');
+            entityBadges.forEach(function(badge) {
+                badge.style.cursor = 'pointer';
+                badge.title = 'Click to show memories with this entity';
+                badge.addEventListener('click', function(e) {
+                    e.stopPropagation(); // Don't trigger card click
+                    const entityText = badge.textContent.split(' (')[0]; // Extract entity name
+                    filterGraphByEntity(entityText);
+                });
+            });
+        }
+
+        // v2.6.5: Click "X memories" badge → show list in sidebar (future feature)
+        countBadge.style.cursor = 'pointer';
+        countBadge.title = 'Click to view memories in this cluster';
+        countBadge.addEventListener('click', function(e) {
+            e.stopPropagation(); // Don't trigger card click
+            showClusterMemories(cluster.cluster_id);
+        });
     });
 }
+
+// v2.6.5: Filter graph to a specific cluster
+function filterGraphToCluster(clusterId) {
+    // Switch to Graph tab
+    const graphTab = document.querySelector('a[href="#graph"]');
+    if (graphTab) {
+        graphTab.click();
+    }
+
+    // Apply filter after a delay (for tab to load)
+    setTimeout(function() {
+        if (typeof filterState !== 'undefined' && typeof filterByCluster === 'function' && typeof renderGraph === 'function') {
+            filterState.cluster_id = clusterId;
+            const filtered = filterByCluster(originalGraphData, clusterId);
+            renderGraph(filtered);
+
+            // Update URL
+            const url = new URL(window.location);
+            url.searchParams.set('cluster_id', clusterId);
+            window.history.replaceState({}, '', url);
+        }
+    }, 300);
+}
+
+// v2.6.5: Filter graph by entity
+function filterGraphByEntity(entity) {
+    // Switch to Graph tab
+    const graphTab = document.querySelector('a[href="#graph"]');
+    if (graphTab) {
+        graphTab.click();
+    }
+
+    // Apply filter after a delay
+    setTimeout(function() {
+        if (typeof filterState !== 'undefined' && typeof filterByEntity === 'function' && typeof renderGraph === 'function') {
+            filterState.entity = entity;
+            const filtered = filterByEntity(originalGraphData, entity);
+            renderGraph(filtered);
+        }
+    }, 300);
+}
+
+// v2.6.5: Show memories in a cluster (future: sidebar list)
+function showClusterMemories(clusterId) {
+    // For now, just filter Memories tab
+    const memoriesTab = document.querySelector('a[href="#memories"]');
+    if (memoriesTab) {
+        memoriesTab.click();
+    }
+
+    // TODO: Implement sidebar memory list view
+    console.log('Show memories for cluster', clusterId);
+    showToast('Filtering memories for cluster ' + clusterId);
+}