superlocalmemory 3.4.17 → 3.4.19

package/ui/js/graph-core.js

@@ -1,447 +0,0 @@
-// SuperLocalMemory V2.6.5 - Interactive Knowledge Graph - Core Rendering Module
-// Copyright (c) 2026 Varun Pratap Bhardwaj — Elastic License 2.0
-// Part of modular graph visualization system (split from monolithic graph-cytoscape.js)
-
-// ============================================================================
-// GLOBAL STATE
-// ============================================================================
-
-var cy = null; // Cytoscape.js instance (global)
-var graphData = { nodes: [], links: [] }; // Raw data from API
-var originalGraphData = { nodes: [], links: [] }; // Unfiltered data (for reset)
-var currentLayout = 'fcose'; // Default layout
-var filterState = { cluster_id: null, entity: null }; // Current filters
-var isInitialLoad = true; // Track if this is the first graph load
-var focusedNodeIndex = 0; // Keyboard navigation: currently focused node
-var keyboardNavigationEnabled = false; // Track if keyboard nav is active
-var lastFocusedElement = null; // Store last focused element for modal return
-
-// ============================================================================
-// CLUSTER COLORS
-// ============================================================================
-
-const CLUSTER_COLORS = [
-    '#667eea', '#764ba2', '#43e97b', '#38f9d7',
-    '#4facfe', '#00f2fe', '#f093fb', '#f5576c',
-    '#fa709a', '#fee140', '#30cfd0', '#330867'
-];
-
-function getClusterColor(cluster_id) {
-    if (!cluster_id) return '#999';
-    return CLUSTER_COLORS[cluster_id % CLUSTER_COLORS.length];
-}
-
-// ============================================================================
-// HTML ESCAPE UTILITY
-// ============================================================================
-
-function escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-}
-
-// ============================================================================
-// GRAPH LOADING
-// ============================================================================
-
-async function loadGraph() {
-    var maxNodes = document.getElementById('graph-max-nodes').value;
-    var minImportance = document.getElementById('graph-min-importance')?.value || 1;
-
-    // Get cluster filter from URL params ONLY on initial load
-    // After that, use filterState (which tab event handler controls)
-    if (isInitialLoad) {
-        const urlParams = new URLSearchParams(window.location.search);
-        const clusterIdParam = urlParams.get('cluster_id');
-        if (clusterIdParam) {
-            filterState.cluster_id = parseInt(clusterIdParam);
-            console.log('[loadGraph] Initial load with cluster filter from URL:', filterState.cluster_id);
-        }
-        isInitialLoad = false;
-    }
-
-    // CRITICAL FIX: When filtering by cluster, fetch MORE nodes to ensure all cluster members are included
-    // Otherwise only top N memories are fetched and cluster filter fails
-    const fetchLimit = filterState.cluster_id ? 200 : maxNodes;
-    console.log('[loadGraph] Fetching with limit:', fetchLimit, 'Cluster filter:', filterState.cluster_id);
-
-    try {
-        showLoadingSpinner();
-        const response = await fetch(`/api/graph?max_nodes=${fetchLimit}&min_importance=${minImportance}`);
-        graphData = await response.json();
-        originalGraphData = JSON.parse(JSON.stringify(graphData)); // Deep copy
-
-        // Apply filters if set
-        if (filterState.cluster_id) {
-            graphData = filterByCluster(originalGraphData, filterState.cluster_id);
-        }
-        if (filterState.entity) {
-            graphData = filterByEntity(originalGraphData, filterState.entity);
-        }
-
-        renderGraph(graphData);
-        hideLoadingSpinner();
-    } catch (error) {
-        console.error('Error loading graph:', error);
-        showError('Failed to load graph. Please try again.');
-        hideLoadingSpinner();
-    }
-}
-
-// ============================================================================
-// DATA TRANSFORMATION
-// ============================================================================
-
-function transformDataForCytoscape(data) {
-    const elements = [];
-
-    // Add nodes
-    data.nodes.forEach(node => {
-        const contentPreview = node.content_preview || node.summary || node.content || '';
-        // Label: first 4 words of content (readable on node), fallback to category
-        const contentWords = contentPreview.split(/\s+/).slice(0, 4).join(' ');
-        const label = contentWords || node.category || `Memory #${node.id}`;
-        const preview = contentPreview.substring(0, 50) + (contentPreview.length > 50 ? '...' : '');
-
-        elements.push({
-            group: 'nodes',
-            data: {
-                id: String(node.id),
-                label: label,
-                content: node.content || '',
-                summary: node.summary || '',
-                content_preview: preview,
-                category: node.category || '',
-                project_name: node.project_name || '',
-                cluster_id: node.cluster_id || 0,
-                importance: node.importance || 5,
-                tags: node.tags || '',
-                entities: node.entities || [],
-                created_at: node.created_at || '',
-                // For rendering
-                weight: (node.importance || 5) * 5 // Size multiplier
-            }
-        });
-    });
-
-    // Add edges
-    data.links.forEach(link => {
-        const sourceId = String(typeof link.source === 'object' ? link.source.id : link.source);
-        const targetId = String(typeof link.target === 'object' ? link.target.id : link.target);
-
-        elements.push({
-            group: 'edges',
-            data: {
-                id: `${sourceId}-${targetId}`,
-                source: sourceId,
-                target: targetId,
-                weight: link.weight || 0.5,
-                relationship_type: link.relationship_type || '',
-                shared_entities: link.shared_entities || []
-            }
-        });
-    });
-
-    return elements;
-}
-
-// ============================================================================
-// GRAPH RENDERING
-// ============================================================================
-
-function renderGraph(data) {
-    const container = document.getElementById('graph-container');
-    if (!container) {
-        console.error('Graph container not found');
-        return;
-    }
-
-    // Clear existing graph
-    if (cy) {
-        cy.destroy();
-    }
-
-    // Check node count for performance tier
-    const nodeCount = data.nodes.length;
-    let layout = determineBestLayout(nodeCount);
-
-    // Transform data
-    const elements = transformDataForCytoscape(data);
-
-    if (elements.length === 0) {
-        const emptyMsg = document.createElement('div');
-        emptyMsg.style.cssText = 'text-align:center; padding:50px; color:#666;';
-        emptyMsg.textContent = 'No memories found. Try adjusting filters.';
-        container.textContent = ''; // Clear safely
-        container.appendChild(emptyMsg);
-        return;
-    }
-
-    // Clear container (remove spinner/old content) - safe approach
-    container.textContent = '';
-    console.log('[renderGraph] Container cleared, initializing Cytoscape with', elements.length, 'elements');
-
-    // Initialize Cytoscape WITHOUT running layout yet
-    try {
-        cy = cytoscape({
-            container: container,
-            elements: elements,
-            style: getCytoscapeStyles(),
-            layout: { name: 'preset' }, // Don't run layout yet
-            minZoom: 0.2,
-            maxZoom: 3,
-            wheelSensitivity: 0.05,  // Reduced from 0.2 - less sensitive zoom
-            autoungrabify: false,
-            autounselectify: false,
-            // Mobile touch support
-            touchTapThreshold: 8,  // Pixels of movement allowed for tap (vs drag)
-            desktopTapThreshold: 4,  // Desktop click threshold
-            pixelRatio: 'auto'  // Retina/HiDPI support
-        });
-        console.log('[renderGraph] Cytoscape initialized successfully, nodes:', cy.nodes().length);
-    } catch (error) {
-        console.error('[renderGraph] Cytoscape initialization failed:', error);
-        showError('Failed to render graph: ' + error.message);
-        return;
-    }
-
-    // Add interactions
-    addCytoscapeInteractions();
-
-    // Add navigator (mini-map) if available
-    if (cy.navigator && nodeCount > 50) {
-        cy.navigator({
-            container: false, // Will be added to DOM separately if needed
-            viewLiveFramerate: 0,
-            dblClickDelay: 200,
-            removeCustomContainer: false,
-            rerenderDelay: 100
-        });
-    }
-
-    // Update UI
-    updateFilterBadge();
-    updateGraphStats(data);
-
-    // Announce graph load to screen readers
-    updateScreenReaderStatus(`Graph loaded with ${data.nodes.length} memories and ${data.links.length} connections`);
-
-    // Check if we should restore saved layout or run fresh layout
-    const hasSavedLayout = localStorage.getItem('slm_graph_layout');
-
-    if (hasSavedLayout) {
-        // Restore saved positions, then fit
-        restoreSavedLayout();
-        console.log('[renderGraph] Restored saved layout positions');
-        cy.fit(null, 80);
-    } else {
-        // No saved layout - run layout algorithm with fit
-        console.log('[renderGraph] Running fresh layout:', layout);
-        const layoutConfig = getLayoutConfig(layout);
-        const graphLayout = cy.layout(layoutConfig);
-
-        // CRITICAL: Wait for layout to finish, THEN force fit
-        graphLayout.on('layoutstop', function() {
-            console.log('[renderGraph] Layout completed, forcing fit to viewport');
-            cy.fit(null, 80); // Force center with 80px padding
-        });
-
-        graphLayout.run();
-    }
-}
-
-// ============================================================================
-// LAYOUT ALGORITHMS
-// ============================================================================
-
-function determineBestLayout(nodeCount) {
-    if (nodeCount <= 500) {
-        return 'fcose'; // Full interactive graph
-    } else if (nodeCount <= 2000) {
-        return 'cose'; // Faster force-directed
-    } else {
-        return 'circle'; // Focus mode (circular for large graphs)
-    }
-}
-
-function getLayoutConfig(layoutName) {
-    const configs = {
-        'fcose': {
-            name: 'fcose',
-            quality: 'default',
-            randomize: false,
-            animate: false,  // Disabled for stability
-            fit: true,
-            padding: 80,  // Increased padding to keep within bounds
-            nodeSeparation: 100,
-            idealEdgeLength: 100,
-            edgeElasticity: 0.45,
-            nestingFactor: 0.1,
-            gravity: 0.25,
-            numIter: 2500,
-            tile: true,
-            tilingPaddingVertical: 10,
-            tilingPaddingHorizontal: 10,
-            gravityRangeCompound: 1.5,
-            gravityCompound: 1.0,
-            gravityRange: 3.8
-        },
-        'cose': {
-            name: 'cose',
-            animate: false,  // Disabled for stability
-            fit: true,
-            padding: 80,  // Increased padding
-            nodeRepulsion: 8000,
-            idealEdgeLength: 100,
-            edgeElasticity: 100,
-            nestingFactor: 5,
-            gravity: 80,
-            numIter: 1000,
-            randomize: false
-        },
-        'circle': {
-            name: 'circle',
-            animate: true,
-            animationDuration: 1000,
-            fit: true,
-            padding: 50,
-            sort: function(a, b) {
-                return b.data('importance') - a.data('importance');
-            }
-        },
-        'grid': {
-            name: 'grid',
-            animate: true,
-            animationDuration: 1000,
-            fit: true,
-            padding: 50,
-            sort: function(a, b) {
-                return b.data('importance') - a.data('importance');
-            }
-        },
-        'breadthfirst': {
-            name: 'breadthfirst',
-            animate: true,
-            animationDuration: 1000,
-            fit: true,
-            padding: 50,
-            directed: false,
-            circle: false,
-            spacingFactor: 1.5,
-            sort: function(a, b) {
-                return b.data('importance') - a.data('importance');
-            }
-        },
-        'concentric': {
-            name: 'concentric',
-            animate: true,
-            animationDuration: 1000,
-            fit: true,
-            padding: 50,
-            concentric: function(node) {
-                return node.data('importance');
-            },
-            levelWidth: function() {
-                return 2;
-            }
-        }
-    };
-
-    return configs[layoutName] || configs['fcose'];
-}
-
-// ============================================================================
-// CYTOSCAPE STYLES
-// ============================================================================
-
-function getCytoscapeStyles() {
-    return [
-        {
-            selector: 'node',
-            style: {
-                'background-color': function(ele) {
-                    return getClusterColor(ele.data('cluster_id'));
-                },
-                'width': function(ele) {
-                    return Math.max(20, ele.data('weight'));
-                },
-                'height': function(ele) {
-                    return Math.max(20, ele.data('weight'));
-                },
-                'label': 'data(label)',
-                'font-size': '10px',
-                'text-valign': 'center',
-                'text-halign': 'center',
-                'color': '#333',
-                'text-outline-width': 2,
-                'text-outline-color': '#fff',
-                'border-width': function(ele) {
-                    // Trust score → border thickness (if available)
-                    return 2;
-                },
-                'border-color': '#555'
-            }
-        },
-        {
-            selector: 'node:selected',
-            style: {
-                'border-width': 4,
-                'border-color': '#667eea',
-                'background-color': '#667eea'
-            }
-        },
-        {
-            selector: 'node.highlighted',
-            style: {
-                'border-width': 4,
-                'border-color': '#ff6b6b',
-                'box-shadow': '0 0 20px #ff6b6b'
-            }
-        },
-        {
-            selector: 'node.dimmed',
-            style: {
-                'opacity': 0.3
-            }
-        },
-        {
-            selector: 'node.keyboard-focused',
-            style: {
-                'border-width': 5,
-                'border-color': '#0066ff',
-                'border-style': 'solid',
-                'box-shadow': '0 0 15px #0066ff'
-            }
-        },
-        {
-            selector: 'edge',
-            style: {
-                'width': function(ele) {
-                    return Math.max(1, ele.data('weight') * 3);
-                },
-                'line-color': '#ccc',
-                'line-style': function(ele) {
-                    return ele.data('weight') > 0.3 ? 'solid' : 'dashed';
-                },
-                'curve-style': 'bezier',
-                'target-arrow-shape': 'none',
-                'opacity': 0.6
-            }
-        },
-        {
-            selector: 'edge.highlighted',
-            style: {
-                'line-color': '#667eea',
-                'width': 3,
-                'opacity': 1
-            }
-        },
-        {
-            selector: 'edge.dimmed',
-            style: {
-                'opacity': 0.1
-            }
-        }
-    ];
-}

package/ui/js/graph-filters.js

@@ -1,220 +0,0 @@
-// SuperLocalMemory V2.6.5 - Interactive Knowledge Graph - Filtering Module
-// Copyright (c) 2026 Varun Pratap Bhardwaj — Elastic License 2.0
-// 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();
-}