superlocalmemory 2.6.0 → 2.6.5

package/ui/js/graph-d3-backup.js

@@ -0,0 +1,32 @@
+// SuperLocalMemory V2 - Knowledge Graph (D3.js force-directed)
+// Depends on: core.js, modal.js (openMemoryDetail)
+
+var graphData = { nodes: [], links: [] };
+
+async function loadGraph() {
+    var maxNodes = document.getElementById('graph-max-nodes').value;
+    try {
+        var response = await fetch('/api/graph?max_nodes=' + maxNodes);
+        graphData = await response.json();
+        renderGraph(graphData);
+    } catch (error) {
+        console.error('Error loading graph:', error);
+    }
+}
+
+function renderGraph(data) {
+    var container = document.getElementById('graph-container');
+    container.textContent = '';
+    var width = container.clientWidth || 1200;
+    var height = 600;
+    var svg = d3.select('#graph-container').append('svg').attr('width', width).attr('height', height);
+    var tooltip = d3.select('body').append('div').attr('class', 'tooltip-custom').style('opacity', 0);
+    var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
+    var simulation = d3.forceSimulation(data.nodes).force('link', d3.forceLink(data.links).id(function(d) { return d.id; }).distance(100)).force('charge', d3.forceManyBody().strength(-200)).force('center', d3.forceCenter(width / 2, height / 2)).force('collision', d3.forceCollide().radius(20));
+    var link = svg.append('g').selectAll('line').data(data.links).enter().append('line').attr('class', 'link').attr('stroke-width', function(d) { return Math.sqrt(d.weight * 2); });
+    var node = svg.append('g').selectAll('circle').data(data.nodes).enter().append('circle').attr('class', 'node').attr('r', function(d) { return 5 + (d.importance || 5); }).attr('fill', function(d) { return colorScale(d.cluster_id || 0); }).call(d3.drag().on('start', dragStarted).on('drag', dragged).on('end', dragEnded)).on('mouseover', function(event, d) { tooltip.transition().duration(200).style('opacity', .9); var label = d.category || d.project_name || 'Memory #' + d.id; tooltip.text(label + ': ' + (d.content_preview || d.summary || 'No content')).style('left', (event.pageX + 10) + 'px').style('top', (event.pageY - 28) + 'px'); }).on('mouseout', function() { tooltip.transition().duration(500).style('opacity', 0); }).on('click', function(event, d) { openMemoryDetail(d); });
+    simulation.on('tick', function() { link.attr('x1', function(d) { return d.source.x; }).attr('y1', function(d) { return d.source.y; }).attr('x2', function(d) { return d.target.x; }).attr('y2', function(d) { return d.target.y; }); node.attr('cx', function(d) { return d.x; }).attr('cy', function(d) { return d.y; }); });
+    function dragStarted(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; }
+    function dragged(event, d) { d.fx = event.x; d.fy = event.y; }
+    function dragEnded(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; }
+}

package/ui/js/graph-filters.js

@@ -0,0 +1,220 @@
+// SuperLocalMemory V2.6.5 - Interactive Knowledge Graph - Filtering Module
+// Copyright (c) 2026 Varun Pratap Bhardwaj — MIT License
+// Part of modular graph visualization system (split from monolithic graph-cytoscape.js)
+
+// ============================================================================
+// FILTER LOGIC
+// ============================================================================
+
+function filterByCluster(data, cluster_id) {
+    console.log('[filterByCluster] Filtering for cluster_id:', cluster_id, 'Type:', typeof cluster_id);
+    console.log('[filterByCluster] Total nodes in data:', data.nodes.length);
+
+    // Convert to integer for comparison
+    const targetClusterId = parseInt(cluster_id);
+    let debugCount = 0;
+
+    const filteredNodes = data.nodes.filter(n => {
+        // Convert node cluster_id to integer for comparison
+        const nodeClusterId = n.cluster_id ? parseInt(n.cluster_id) : null;
+
+        // Log first 3 nodes to debug
+        if (debugCount < 3) {
+            console.log('[filterByCluster] Sample node:', {
+                id: n.id,
+                cluster_id: n.cluster_id,
+                type: typeof n.cluster_id,
+                parsed: nodeClusterId,
+                match: nodeClusterId === targetClusterId
+            });
+            debugCount++;
+        }
+
+        // Use strict equality after type conversion
+        return nodeClusterId === targetClusterId;
+    });
+
+    console.log('[filterByCluster] Filtered to', filteredNodes.length, 'nodes');
+
+    const nodeIds = new Set(filteredNodes.map(n => n.id));
+    const filteredLinks = data.links.filter(l =>
+        nodeIds.has(l.source) && nodeIds.has(l.target)
+    );
+
+    console.log('[filterByCluster] Found', filteredLinks.length, 'edges between filtered nodes');
+
+    return { nodes: filteredNodes, links: filteredLinks, clusters: data.clusters };
+}
+
+function filterByEntity(data, entity) {
+    const filteredNodes = data.nodes.filter(n => {
+        if (n.entities && Array.isArray(n.entities)) {
+            return n.entities.includes(entity);
+        }
+        if (n.tags && n.tags.includes(entity)) {
+            return true;
+        }
+        return false;
+    });
+    const nodeIds = new Set(filteredNodes.map(n => n.id));
+    const filteredLinks = data.links.filter(l =>
+        nodeIds.has(l.source) && nodeIds.has(l.target)
+    );
+    return { nodes: filteredNodes, links: filteredLinks, clusters: data.clusters };
+}
+
+function clearGraphFilters() {
+    console.log('[clearGraphFilters] Clearing all filters and reloading full graph');
+
+    // Clear filter state
+    filterState = { cluster_id: null, entity: null };
+
+    // CRITICAL: Clear URL completely - remove ?cluster_id=X from address bar
+    const cleanUrl = window.location.origin + window.location.pathname;
+    window.history.replaceState({}, '', cleanUrl);
+    console.log('[clearGraphFilters] URL cleaned to:', cleanUrl);
+
+    // CRITICAL: Clear saved layout positions so nodes don't stay in corner
+    // When switching from filtered to full graph, we want fresh layout
+    localStorage.removeItem('slm_graph_layout');
+    console.log('[clearGraphFilters] Cleared saved layout positions');
+
+    // Reload full graph from API (respects dropdown settings)
+    loadGraph();
+}
+
+// ============================================================================
+// EVENT HANDLERS
+// ============================================================================
+
+function setupGraphEventListeners() {
+    // Load graph when Graph tab is clicked
+    const graphTab = document.querySelector('a[href="#graph"]');
+    if (graphTab) {
+        // CRITICAL FIX: Add click handler to clear filter even when already on KG tab
+        // Bootstrap's shown.bs.tab only fires when SWITCHING TO tab, not when clicking same tab!
+        graphTab.addEventListener('click', function(event) {
+            console.log('[Event] Knowledge Graph tab CLICKED');
+
+            // Check if we're viewing a filtered graph
+            const hasFilter = filterState.cluster_id || filterState.entity;
+
+            if (hasFilter && cy) {
+                console.log('[Event] Click detected on KG tab while filter active - clearing filter');
+
+                // Clear filter state
+                filterState = { cluster_id: null, entity: null };
+
+                // Clear URL completely
+                const cleanUrl = window.location.origin + window.location.pathname;
+                window.history.replaceState({}, '', cleanUrl);
+                console.log('[Event] URL cleaned to:', cleanUrl);
+
+                // CRITICAL: Clear saved layout positions so nodes don't stay in corner
+                localStorage.removeItem('slm_graph_layout');
+                console.log('[Event] Cleared saved layout positions');
+
+                // Reload with full graph
+                loadGraph();
+            }
+        });
+
+        // Also keep shown.bs.tab for when switching FROM another tab TO KG tab
+        graphTab.addEventListener('shown.bs.tab', function(event) {
+            console.log('[Event] Knowledge Graph tab SHOWN (tab switch)');
+
+            if (cy) {
+                // Graph already exists - user is returning to KG tab from another tab
+                // Clear filter and reload to show full graph
+                console.log('[Event] Returning to KG tab from another tab - clearing filter');
+
+                // Clear filter state
+                filterState = { cluster_id: null, entity: null };
+
+                // Clear URL completely
+                const cleanUrl = window.location.origin + window.location.pathname;
+                window.history.replaceState({}, '', cleanUrl);
+                console.log('[Event] URL cleaned to:', cleanUrl);
+
+                // CRITICAL: Clear saved layout positions so nodes don't stay in corner
+                localStorage.removeItem('slm_graph_layout');
+                console.log('[Event] Cleared saved layout positions');
+
+                // Reload with full graph (respects dropdown settings)
+                loadGraph();
+            } else {
+                // First load - check if cluster filter is in URL (from cluster badge click)
+                const urlParams = new URLSearchParams(window.location.search);
+                const clusterIdParam = urlParams.get('cluster_id');
+
+                if (clusterIdParam) {
+                    console.log('[Event] First load with cluster filter:', clusterIdParam);
+                    // Load with filter (will be applied in loadGraph)
+                } else {
+                    console.log('[Event] First load, no filter');
+                }
+
+                loadGraph();
+            }
+        });
+    }
+
+    // Reload graph when dropdown settings change
+    const maxNodesSelect = document.getElementById('graph-max-nodes');
+    if (maxNodesSelect) {
+        maxNodesSelect.addEventListener('change', function() {
+            console.log('[Event] Max nodes changed to:', this.value);
+
+            // Clear any active filter when user manually changes settings
+            if (filterState.cluster_id || filterState.entity) {
+                console.log('[Event] Clearing filter due to dropdown change');
+                filterState = { cluster_id: null, entity: null };
+
+                // Clear URL
+                const cleanUrl = window.location.origin + window.location.pathname;
+                window.history.replaceState({}, '', cleanUrl);
+            }
+
+            // Clear saved layout when changing node count (different # of nodes = different layout)
+            localStorage.removeItem('slm_graph_layout');
+            console.log('[Event] Cleared saved layout due to settings change');
+
+            loadGraph();
+        });
+    }
+
+    const minImportanceSelect = document.getElementById('graph-min-importance');
+    if (minImportanceSelect) {
+        minImportanceSelect.addEventListener('change', function() {
+            console.log('[Event] Min importance changed to:', this.value);
+
+            // Clear any active filter when user manually changes settings
+            if (filterState.cluster_id || filterState.entity) {
+                console.log('[Event] Clearing filter due to dropdown change');
+                filterState = { cluster_id: null, entity: null };
+
+                // Clear URL
+                const cleanUrl = window.location.origin + window.location.pathname;
+                window.history.replaceState({}, '', cleanUrl);
+            }
+
+            // Clear saved layout when changing importance (different nodes = different layout)
+            localStorage.removeItem('slm_graph_layout');
+            console.log('[Event] Cleared saved layout due to settings change');
+
+            loadGraph();
+        });
+    }
+
+    console.log('[Init] Graph event listeners setup complete');
+}
+
+// ============================================================================
+// INITIALIZATION
+// ============================================================================
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setupGraphEventListeners);
+} else {
+    setupGraphEventListeners();
+}

package/ui/js/graph-interactions.js

@@ -0,0 +1,354 @@
+// SuperLocalMemory V2.6.5 - Interactive Knowledge Graph - Interactions Module
+// Copyright (c) 2026 Varun Pratap Bhardwaj — MIT License
+// Part of modular graph visualization system (split from monolithic graph-cytoscape.js)
+
+// ============================================================================
+// CYTOSCAPE INTERACTIONS
+// ============================================================================
+
+function addCytoscapeInteractions() {
+    if (!cy) return;
+
+    // Hover: Show tooltip
+    cy.on('mouseover', 'node', function(evt) {
+        const node = evt.target;
+        const pos = evt.renderedPosition;
+        showTooltip(node, pos.x, pos.y);
+
+        // Highlight connected nodes
+        node.addClass('highlighted');
+        node.connectedEdges().addClass('highlighted');
+        node.neighborhood('node').addClass('highlighted');
+
+        // Dim others
+        cy.nodes().not(node).not(node.neighborhood('node')).addClass('dimmed');
+        cy.edges().not(node.connectedEdges()).addClass('dimmed');
+    });
+
+    cy.on('mouseout', 'node', function(evt) {
+        hideTooltip();
+
+        // Remove highlighting
+        cy.elements().removeClass('highlighted').removeClass('dimmed');
+    });
+
+    // Single click: Open modal preview
+    cy.on('tap', 'node', function(evt) {
+        const node = evt.target;
+        openMemoryModal(node);
+    });
+
+    // Double click: Navigate to Memories tab
+    cy.on('dbltap', 'node', function(evt) {
+        const node = evt.target;
+        navigateToMemoryTab(node.data('id'));
+    });
+
+    // Enable node dragging
+    cy.on('drag', 'node', function(evt) {
+        // Node position is automatically updated by Cytoscape
+    });
+
+    // Save layout when drag ends
+    cy.on('dragfree', 'node', function(evt) {
+        saveLayoutPositions();
+    });
+
+    // Pan & zoom events (for performance monitoring)
+    let panZoomTimeout;
+    cy.on('pan zoom', function() {
+        clearTimeout(panZoomTimeout);
+        panZoomTimeout = setTimeout(() => {
+            saveLayoutPositions();
+        }, 1000);
+    });
+
+    // Add keyboard navigation
+    setupKeyboardNavigation();
+}
+
+// ============================================================================
+// TOOLTIP
+// ============================================================================
+
+let tooltipTimeout;
+function showTooltip(node, x, y) {
+    clearTimeout(tooltipTimeout);
+    tooltipTimeout = setTimeout(() => {
+        let tooltip = document.getElementById('graph-tooltip');
+        if (!tooltip) {
+            tooltip = document.createElement('div');
+            tooltip.id = 'graph-tooltip';
+            tooltip.style.cssText = 'position:fixed; background:#333; color:#fff; padding:10px; border-radius:6px; font-size:12px; max-width:300px; z-index:10000; pointer-events:none; box-shadow: 0 4px 12px rgba(0,0,0,0.3);';
+            document.body.appendChild(tooltip);
+        }
+
+        // Build tooltip content safely (no innerHTML)
+        tooltip.textContent = ''; // Clear
+        const data = node.data();
+
+        const title = document.createElement('strong');
+        title.textContent = data.label;
+        tooltip.appendChild(title);
+
+        tooltip.appendChild(document.createElement('br'));
+
+        const meta = document.createElement('span');
+        meta.style.color = '#aaa';
+        meta.textContent = `Cluster ${data.cluster_id} • Importance ${data.importance}`;
+        tooltip.appendChild(meta);
+
+        tooltip.appendChild(document.createElement('br'));
+
+        const preview = document.createElement('span');
+        preview.style.cssText = 'font-size:11px; color:#ccc;';
+        preview.textContent = data.content_preview;
+        tooltip.appendChild(preview);
+
+        tooltip.style.display = 'block';
+        tooltip.style.left = (x + 20) + 'px';
+        tooltip.style.top = (y - 20) + 'px';
+    }, 200);
+}
+
+function hideTooltip() {
+    clearTimeout(tooltipTimeout);
+    const tooltip = document.getElementById('graph-tooltip');
+    if (tooltip) {
+        tooltip.style.display = 'none';
+    }
+}
+
+// ============================================================================
+// MODAL INTEGRATION
+// ============================================================================
+
+function openMemoryModal(node) {
+    const memoryData = {
+        id: node.data('id'),
+        content: node.data('content'),
+        summary: node.data('summary'),
+        category: node.data('category'),
+        project_name: node.data('project_name'),
+        cluster_id: node.data('cluster_id'),
+        importance: node.data('importance'),
+        tags: node.data('tags'),
+        created_at: node.data('created_at')
+    };
+
+    // Call existing openMemoryDetail function from modal.js
+    if (typeof openMemoryDetail === 'function') {
+        openMemoryDetail(memoryData);
+    } else {
+        console.error('openMemoryDetail function not found. Is modal.js loaded?');
+    }
+}
+
+function navigateToMemoryTab(memoryId) {
+    // Switch to Memories tab
+    const memoriesTab = document.querySelector('a[href="#memories"]');
+    if (memoriesTab) {
+        memoriesTab.click();
+    }
+
+    // Scroll to memory after a short delay (for tab to load)
+    setTimeout(() => {
+        if (typeof scrollToMemory === 'function') {
+            scrollToMemory(memoryId);
+        } else {
+            console.warn('scrollToMemory function not found in memories.js');
+        }
+    }, 300);
+}
+
+// ============================================================================
+// KEYBOARD NAVIGATION
+// ============================================================================
+
+function setupKeyboardNavigation() {
+    if (!cy) return;
+
+    const container = document.getElementById('graph-container');
+    if (!container) return;
+
+    // Make container focusable
+    container.setAttribute('tabindex', '0');
+
+    // Focus handler - enable keyboard nav when container is focused
+    container.addEventListener('focus', function() {
+        keyboardNavigationEnabled = true;
+        if (cy.nodes().length > 0) {
+            focusNodeAtIndex(0);
+        }
+    });
+
+    container.addEventListener('blur', function() {
+        keyboardNavigationEnabled = false;
+        cy.nodes().removeClass('keyboard-focused');
+    });
+
+    // Keyboard event handler
+    container.addEventListener('keydown', function(e) {
+        if (!keyboardNavigationEnabled || !cy) return;
+
+        const nodes = cy.nodes();
+        if (nodes.length === 0) return;
+
+        const currentNode = nodes[focusedNodeIndex];
+
+        switch(e.key) {
+            case 'Tab':
+                e.preventDefault();
+                if (e.shiftKey) {
+                    // Shift+Tab: previous node
+                    focusedNodeIndex = (focusedNodeIndex - 1 + nodes.length) % nodes.length;
+                } else {
+                    // Tab: next node
+                    focusedNodeIndex = (focusedNodeIndex + 1) % nodes.length;
+                }
+                focusNodeAtIndex(focusedNodeIndex);
+                announceNode(nodes[focusedNodeIndex]);
+                break;
+
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (currentNode) {
+                    lastFocusedElement = container;
+                    openMemoryModal(currentNode);
+                }
+                break;
+
+            case 'ArrowRight':
+                e.preventDefault();
+                moveToAdjacentNode('right', currentNode);
+                break;
+
+            case 'ArrowLeft':
+                e.preventDefault();
+                moveToAdjacentNode('left', currentNode);
+                break;
+
+            case 'ArrowDown':
+                e.preventDefault();
+                moveToAdjacentNode('down', currentNode);
+                break;
+
+            case 'ArrowUp':
+                e.preventDefault();
+                moveToAdjacentNode('up', currentNode);
+                break;
+
+            case 'Escape':
+                e.preventDefault();
+                if (filterState.cluster_id || filterState.entity) {
+                    clearGraphFilters();
+                    updateScreenReaderStatus('Filters cleared, showing all memories');
+                } else {
+                    container.blur();
+                    keyboardNavigationEnabled = false;
+                }
+                break;
+
+            case 'Home':
+                e.preventDefault();
+                focusedNodeIndex = 0;
+                focusNodeAtIndex(0);
+                announceNode(nodes[0]);
+                break;
+
+            case 'End':
+                e.preventDefault();
+                focusedNodeIndex = nodes.length - 1;
+                focusNodeAtIndex(focusedNodeIndex);
+                announceNode(nodes[focusedNodeIndex]);
+                break;
+        }
+    });
+}
+
+function focusNodeAtIndex(index) {
+    if (!cy) return;
+
+    const nodes = cy.nodes();
+    if (index < 0 || index >= nodes.length) return;
+
+    // Remove focus from all nodes
+    cy.nodes().removeClass('keyboard-focused');
+
+    // Add focus to target node
+    const node = nodes[index];
+    node.addClass('keyboard-focused');
+
+    // Center node in viewport with smooth animation
+    cy.animate({
+        center: { eles: node },
+        zoom: Math.max(cy.zoom(), 1.0),
+        duration: 300,
+        easing: 'ease-in-out'
+    });
+}
+
+function moveToAdjacentNode(direction, currentNode) {
+    if (!currentNode) return;
+
+    const nodes = cy.nodes();
+    const currentPos = currentNode.position();
+    let bestNode = null;
+    let bestScore = Infinity;
+
+    // Find adjacent nodes based on direction
+    nodes.forEach((node, index) => {
+        if (node.id() === currentNode.id()) return;
+
+        const pos = node.position();
+        const dx = pos.x - currentPos.x;
+        const dy = pos.y - currentPos.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        let isCorrectDirection = false;
+        let directionScore = 0;
+
+        switch(direction) {
+            case 'right':
+                isCorrectDirection = dx > 0;
+                directionScore = dx;
+                break;
+            case 'left':
+                isCorrectDirection = dx < 0;
+                directionScore = -dx;
+                break;
+            case 'down':
+                isCorrectDirection = dy > 0;
+                directionScore = dy;
+                break;
+            case 'up':
+                isCorrectDirection = dy < 0;
+                directionScore = -dy;
+                break;
+        }
+
+        // Combine distance with direction preference
+        if (isCorrectDirection) {
+            const score = distance - (directionScore * 0.5);
+            if (score < bestScore) {
+                bestScore = score;
+                bestNode = node;
+                focusedNodeIndex = index;
+            }
+        }
+    });
+
+    if (bestNode) {
+        focusNodeAtIndex(focusedNodeIndex);
+        announceNode(bestNode);
+    }
+}
+
+function announceNode(node) {
+    if (!node) return;
+
+    const data = node.data();
+    const message = `Memory ${data.id}: ${data.label}, Cluster ${data.cluster_id}, Importance ${data.importance} out of 10`;
+    updateScreenReaderStatus(message);
+}