superlocalmemory 2.6.0 → 2.7.0

package/ui/js/graph-ui.js

@@ -0,0 +1,214 @@
+// SuperLocalMemory V2.6.5 - Interactive Knowledge Graph - UI Elements Module
+// Copyright (c) 2026 Varun Pratap Bhardwaj — MIT License
+// Part of modular graph visualization system (split from monolithic graph-cytoscape.js)
+
+// ============================================================================
+// FILTER BADGE UI
+// ============================================================================
+
+function updateFilterBadge() {
+    const statusFull = document.getElementById('graph-status-full');
+    const statusFiltered = document.getElementById('graph-status-filtered');
+    const filterDescription = document.getElementById('graph-filter-description');
+    const filterCount = document.getElementById('graph-filter-count');
+    const statusFullText = document.getElementById('graph-status-full-text');
+
+    const hasFilter = filterState.cluster_id || filterState.entity;
+
+    if (hasFilter) {
+        // FILTERED STATE - Show prominent alert with "Show All Memories" button
+        if (statusFull) statusFull.style.display = 'none';
+        if (statusFiltered) statusFiltered.style.display = 'block';
+
+        // Update filter description
+        if (filterDescription) {
+            const text = filterState.cluster_id
+                ? `Viewing Cluster ${filterState.cluster_id}`
+                : `Viewing: ${filterState.entity}`;
+            filterDescription.textContent = text;
+        }
+
+        // Update count (will be set after graph renders)
+        if (filterCount && graphData && graphData.nodes) {
+            filterCount.textContent = `(${graphData.nodes.length} ${graphData.nodes.length === 1 ? 'memory' : 'memories'})`;
+        }
+
+        console.log('[updateFilterBadge] Showing FILTERED state');
+    } else {
+        // FULL GRAPH STATE - Show normal status with refresh button
+        if (statusFull) statusFull.style.display = 'block';
+        if (statusFiltered) statusFiltered.style.display = 'none';
+
+        // Update count
+        if (statusFullText && graphData && graphData.nodes) {
+            const maxNodes = document.getElementById('graph-max-nodes')?.value || 50;
+            statusFullText.textContent = `Showing ${graphData.nodes.length} of ${maxNodes} memories`;
+        }
+
+        console.log('[updateFilterBadge] Showing FULL state');
+    }
+}
+
+// ============================================================================
+// GRAPH STATS
+// ============================================================================
+
+function updateGraphStats(data) {
+    const statsEl = document.getElementById('graph-stats');
+    if (statsEl) {
+        // Clear and rebuild safely
+        statsEl.textContent = '';
+
+        const nodeBadge = document.createElement('span');
+        nodeBadge.className = 'badge bg-primary';
+        nodeBadge.textContent = `${data.nodes.length} nodes`;
+        statsEl.appendChild(nodeBadge);
+
+        const edgeBadge = document.createElement('span');
+        edgeBadge.className = 'badge bg-secondary';
+        edgeBadge.textContent = `${data.links.length} edges`;
+        statsEl.appendChild(document.createTextNode(' '));
+        statsEl.appendChild(edgeBadge);
+
+        const clusterBadge = document.createElement('span');
+        clusterBadge.className = 'badge bg-info';
+        clusterBadge.textContent = `${data.clusters?.length || 0} clusters`;
+        statsEl.appendChild(document.createTextNode(' '));
+        statsEl.appendChild(clusterBadge);
+    }
+}
+
+// ============================================================================
+// LOADING SPINNER
+// ============================================================================
+
+function showLoadingSpinner() {
+    const container = document.getElementById('graph-container');
+    if (container) {
+        container.textContent = ''; // Clear safely
+
+        const wrapper = document.createElement('div');
+        wrapper.style.cssText = 'text-align:center; padding:100px;';
+
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-border text-primary';
+        spinner.setAttribute('role', 'status');
+        wrapper.appendChild(spinner);
+
+        const text = document.createElement('p');
+        text.style.marginTop = '20px';
+        text.textContent = 'Loading graph...';
+        wrapper.appendChild(text);
+
+        container.appendChild(wrapper);
+    }
+}
+
+function hideLoadingSpinner() {
+    // Do nothing - renderGraph() already cleared the spinner
+    // If we clear here, we destroy the Cytoscape canvas!
+    console.log('[hideLoadingSpinner] Graph already rendered, spinner cleared by renderGraph()');
+}
+
+function showError(message) {
+    const container = document.getElementById('graph-container');
+    if (container) {
+        container.textContent = ''; // Clear safely
+
+        const alert = document.createElement('div');
+        alert.className = 'alert alert-danger';
+        alert.setAttribute('role', 'alert');
+        alert.style.margin = '50px';
+        alert.textContent = message;
+        container.appendChild(alert);
+    }
+}
+
+// ============================================================================
+// LAYOUT MANAGEMENT
+// ============================================================================
+
+function saveLayoutPositions() {
+    if (!cy) return;
+
+    const positions = {};
+    cy.nodes().forEach(node => {
+        positions[node.id()] = node.position();
+    });
+
+    try {
+        localStorage.setItem('slm_graph_layout', JSON.stringify(positions));
+    } catch (e) {
+        console.warn('Failed to save graph layout:', e);
+    }
+}
+
+function restoreSavedLayout() {
+    if (!cy) return;
+
+    try {
+        const saved = localStorage.getItem('slm_graph_layout');
+        if (saved) {
+            const positions = JSON.parse(saved);
+            cy.nodes().forEach(node => {
+                const pos = positions[node.id()];
+                if (pos) {
+                    node.position(pos);
+                }
+            });
+        }
+    } catch (e) {
+        console.warn('Failed to restore graph layout:', e);
+    }
+}
+
+function changeGraphLayout(layoutName) {
+    if (!cy) return;
+
+    currentLayout = layoutName;
+    const layout = cy.layout(getLayoutConfig(layoutName));
+    layout.run();
+
+    // Save preference
+    localStorage.setItem('slm_graph_layout_preference', layoutName);
+}
+
+// ============================================================================
+// EXPAND NEIGHBORS
+// ============================================================================
+
+function expandNeighbors(memoryId) {
+    if (!cy) return;
+
+    const node = cy.getElementById(String(memoryId));
+    if (!node || node.length === 0) return;
+
+    // Hide all nodes and edges
+    cy.elements().addClass('dimmed');
+
+    // Show target node + neighbors + connecting edges
+    node.removeClass('dimmed');
+    node.neighborhood().removeClass('dimmed');
+    node.connectedEdges().removeClass('dimmed');
+
+    // Fit view to visible elements
+    cy.fit(node.neighborhood().union(node), 50);
+}
+
+// ============================================================================
+// SCREEN READER STATUS
+// ============================================================================
+
+function updateScreenReaderStatus(message) {
+    let statusRegion = document.getElementById('graph-sr-status');
+    if (!statusRegion) {
+        statusRegion = document.createElement('div');
+        statusRegion.id = 'graph-sr-status';
+        statusRegion.setAttribute('role', 'status');
+        statusRegion.setAttribute('aria-live', 'polite');
+        statusRegion.setAttribute('aria-atomic', 'true');
+        statusRegion.style.cssText = 'position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;';
+        document.body.appendChild(statusRegion);
+    }
+    statusRegion.textContent = message;
+}

package/ui/js/memories.js

@@ -147,3 +147,55 @@ function handleSort(th) {
     var showScores = memories.length > 0 && typeof memories[0].score === 'number';
     renderMemoriesTable(memories, showScores);
 }
+
+// ============================================================================
+// Navigation from Graph (v2.6.5)
+// ============================================================================
+
+// Scroll to a specific memory by ID (called from graph double-click)
+function scrollToMemory(memoryId) {
+    const container = document.getElementById('memories-list');
+    if (!container) return;
+
+    // Find the memory in current list
+    if (!window._slmMemories) {
+        console.warn('No memories loaded yet. Loading all memories...');
+        loadMemories().then(() => {
+            setTimeout(() => scrollToMemoryInTable(memoryId), 500);
+        });
+        return;
+    }
+
+    scrollToMemoryInTable(memoryId);
+}
+
+function scrollToMemoryInTable(memoryId) {
+    const memId = String(memoryId);
+
+    // Find the memory index
+    let idx = -1;
+    if (window._slmMemories) {
+        idx = window._slmMemories.findIndex(m => String(m.id) === memId);
+    }
+
+    if (idx === -1) {
+        console.warn(`Memory #${memoryId} not found in current list`);
+        return;
+    }
+
+    // Find the table row
+    const row = document.querySelector(`tr[data-mem-idx="${idx}"]`);
+    if (!row) {
+        console.warn(`Row for memory #${memoryId} not found in DOM`);
+        return;
+    }
+
+    // Scroll to row
+    row.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+    // Highlight temporarily
+    row.style.backgroundColor = '#fff3cd';
+    setTimeout(() => {
+        row.style.backgroundColor = '';
+    }, 2000);
+}

package/ui/js/modal.js

@@ -14,6 +14,11 @@ function openMemoryDetail(mem) {
         return;
     }
 
+    // Store last focused element (for keyboard nav return)
+    if (!window.lastFocusedElement) {
+        window.lastFocusedElement = document.activeElement;
+    }
+
     var content = mem.content || mem.summary || '(no content)';
     var tags = mem.tags || '';
     var importance = mem.importance || 5;
@@ -57,7 +62,105 @@ function openMemoryDetail(mem) {
 
     body.appendChild(dl);
 
-    var modal = new bootstrap.Modal(document.getElementById('memoryDetailModal'));
+    // Graph action buttons (v2.6.5)
+    if (mem.cluster_id || mem.id) {
+        body.appendChild(document.createElement('hr'));
+
+        var actionsDiv = document.createElement('div');
+        actionsDiv.className = 'memory-detail-graph-actions';
+        actionsDiv.style.cssText = 'display:flex; gap:10px; flex-wrap:wrap;';
+
+        // Button 1: View Full Memory (navigate to Memories tab)
+        var viewBtn = document.createElement('button');
+        viewBtn.className = 'btn btn-primary btn-sm';
+        var viewIcon = document.createElement('i');
+        viewIcon.className = 'bi bi-journal-text';
+        viewBtn.appendChild(viewIcon);
+        viewBtn.appendChild(document.createTextNode(' View Full Memory'));
+        viewBtn.onclick = function() {
+            modal.hide();
+            if (typeof navigateToMemoryTab === 'function') {
+                navigateToMemoryTab(mem.id);
+            } else {
+                // Fallback: just switch tab
+                const memoriesTab = document.querySelector('a[href="#memories"]');
+                if (memoriesTab) memoriesTab.click();
+            }
+        };
+        actionsDiv.appendChild(viewBtn);
+
+        // Button 2: Expand Neighbors (show connected nodes in graph)
+        var expandBtn = document.createElement('button');
+        expandBtn.className = 'btn btn-outline-secondary btn-sm';
+        var expandIcon = document.createElement('i');
+        expandIcon.className = 'bi bi-diagram-3';
+        expandBtn.appendChild(expandIcon);
+        expandBtn.appendChild(document.createTextNode(' Expand Neighbors'));
+        expandBtn.onclick = function() {
+            modal.hide();
+            // Switch to Graph tab
+            const graphTab = document.querySelector('a[href="#graph"]');
+            if (graphTab) graphTab.click();
+            // Expand neighbors after a delay
+            setTimeout(function() {
+                if (typeof expandNeighbors === 'function') {
+                    expandNeighbors(mem.id);
+                }
+            }, 500);
+        };
+        actionsDiv.appendChild(expandBtn);
+
+        // Button 3: Filter to Cluster (show only this cluster in graph)
+        if (mem.cluster_id) {
+            var filterBtn = document.createElement('button');
+            filterBtn.className = 'btn btn-outline-info btn-sm';
+            var filterIcon = document.createElement('i');
+            filterIcon.className = 'bi bi-funnel';
+            filterBtn.appendChild(filterIcon);
+            filterBtn.appendChild(document.createTextNode(' Filter to Cluster ' + mem.cluster_id));
+            filterBtn.onclick = function() {
+                modal.hide();
+                // Switch to Graph tab
+                const graphTab = document.querySelector('a[href="#graph"]');
+                if (graphTab) graphTab.click();
+                // Apply cluster filter after a delay
+                setTimeout(function() {
+                    if (typeof filterState !== 'undefined' && typeof filterByCluster === 'function' && typeof renderGraph === 'function') {
+                        filterState.cluster_id = mem.cluster_id;
+                        const filtered = filterByCluster(originalGraphData, mem.cluster_id);
+                        renderGraph(filtered);
+                        // Update URL
+                        const url = new URL(window.location);
+                        url.searchParams.set('cluster_id', mem.cluster_id);
+                        window.history.replaceState({}, '', url);
+                    }
+                }, 500);
+            };
+            actionsDiv.appendChild(filterBtn);
+        }
+
+        body.appendChild(actionsDiv);
+    }
+
+    var modalEl = document.getElementById('memoryDetailModal');
+    var modal = new bootstrap.Modal(modalEl);
+
+    // Focus first interactive element when modal opens
+    modalEl.addEventListener('shown.bs.modal', function() {
+        const firstButton = modalEl.querySelector('button, a[href]');
+        if (firstButton) {
+            firstButton.focus();
+        }
+    }, { once: true });
+
+    // Return focus when modal closes
+    modalEl.addEventListener('hidden.bs.modal', function() {
+        if (window.lastFocusedElement && typeof window.lastFocusedElement.focus === 'function') {
+            window.lastFocusedElement.focus();
+            window.lastFocusedElement = null;
+        }
+    }, { once: true });
+
     modal.show();
 }