Add mobile responsiveness to explorepage.html

explorepage.html

@@ -13,7 +13,6 @@
             padding: 0;
             box-sizing: border-box;
         }
-
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             background: linear-gradient(135deg, #4a5568 0%, #2d3748 50%, #1a202c 100%);
@@ -21,12 +20,10 @@
             height: 100vh;
             overflow: hidden;
         }
-
         .container {
             display: flex;
             height: 100vh;
         }
-
         /* Sidebar Styles */
         .sidebar {
             width: 400px;
@@ -37,30 +34,26 @@
             position: relative;
             z-index: 100;
         }
-
         .sidebar.collapsed {
             margin-left: -400px;
         }
-
         /* Header */
         .sidebar-header {
             padding: 1.5rem;
         }
-
         .header-controls {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-bottom: 1rem;
         }
-
         /* Menu Toggle - Always Visible */
         .menu-toggle {
             position: fixed;
             top: 1.5rem;
             left: 0.7rem;
-            z-index: 300;
-            background: none;
+            z-index: 1100;
+            background: rgba(0, 0, 0, 0.6);
             border: none;
             color: white;
             font-size: 1.5rem;
@@ -69,11 +62,9 @@
             border-radius: 8px;
             backdrop-filter: blur(10px);
         }
-
         .menu-toggle:hover {
             background: rgba(0, 0, 0, 0.8);
         }
-
         .home-btn {
             position: fixed;
             background: none;
@@ -85,11 +76,9 @@
             border-radius: 4px;
             transition: background-color 0.3s ease;
         }
-
         .home-btn:hover {
             background-color: rgba(0, 0, 0, 0.8);
         }
-
         .sidebar-title {
             font-size: 2.5rem;
             font-weight: 700;
@@ -97,12 +86,10 @@
             line-height: 1.2;
             margin-top : 50px;
         }
-
         /* Search Section */
         .search-section {
             padding: 0 1.5rem 1.5rem;
         }
-
         .search-input {
             width: 100%;
             padding: 0.75rem 1rem;
@@ -115,19 +102,16 @@
             color: #797979;
             margin-bottom: 1rem;
         }
-
         .search-input::placeholder {
             color: #a0aec0;
         }
-
         .search-input:focus {
             outline: none;
             background: rgba(255, 255, 255, 1);
         }
-
         .reset-btn {
-            display: block;          /* make it a block so margin works */
-            margin: 0 auto;          /* this centers it horizontally */
+            display: block;
+            margin: 0 auto;
             background: rgb(110 131 131);
             border: none;
             color: white;
@@ -141,11 +125,9 @@
             box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
             transition: all 0.3s ease;
         }
-
         .reset-btn:hover {
             background: rgba(74, 85, 104, 1);
         }
-
         /* Instructions Panel */
         .instructions-panel {
             margin: 1rem;
@@ -157,7 +139,6 @@
             margin-bottom: 7rem;
             box-shadow: inset 0 4px 4px rgba(0,0,0,0.25);
         }
-
         .instructions-title {
             font-size: 1.5rem;
             font-weight: 800;
@@ -166,7 +147,6 @@
             margin-bottom: 1rem;
             text-align: center;
         }
-
         .instruction-item {
             margin-bottom: 1rem;
             font-family: 'Varta', sans-serif;
@@ -175,29 +155,25 @@
             line-height: 1.5;
             font-weight: 300;
         }
-
         .instruction-item:last-child {
             margin-bottom: 0;
         }
-
         .instruction-action {
             font-weight: 700;
             color: #485656;
         }
-
         /* Main Graph Area */
         .main-content {
             flex: 1;
             position: relative;
             background: rgb(77 83 109);
         }
-
         /* Home Button in Top-Right Corner */
         .main-home-btn {
             position: absolute;
             top: 1.5rem;
             right: 1.5rem;
-            z-index: 200;
+            z-index: 1050;
             background: rgba(0, 0, 0, 0.6);
             border: none;
             color: white;
@@ -208,73 +184,60 @@
             transition: background-color 0.3s ease;
             backdrop-filter: blur(10px);
         }
-
         .main-home-btn:hover {
             background: rgba(0, 0, 0, 0.8);
         }
-
         /* Remove floating home - not needed anymore */
         .floating-home {
             display: none;
         }
-
         /* Graph Styles */
         #graph {
             width: 100%;
             height: 100%;
         }
-
         .node {
             cursor: pointer;
             transition: all 0.3s ease;
             filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.3));
         }
-
         .node:hover {
             stroke-width: 3px;
             filter: drop-shadow(0 0 12px rgba(76, 175, 80, 0.6));
         }
-
         .node.highlighted {
             stroke: #4CAF50 !important;
             stroke-width: 3px !important;
             filter: drop-shadow(0 0 15px rgba(76, 175, 80, 0.8));
         }
-
         .node.selected {
             stroke: #FFD700 !important;
             stroke-width: 4px !important;
             filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
         }
-
         .node.dimmed {
             opacity: 0.2;
             filter: none;
         }
-
         .link {
             stroke: rgba(255, 255, 255, 0.4);
             stroke-width: 2px;
             cursor: pointer;
             transition: all 0.3s ease;
         }
-
         .link:hover {
             stroke: #4CAF50;
             stroke-width: 3px;
             filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
         }
-
         .link.highlighted {
             stroke: #4CAF50 !important;
             stroke-width: 3px !important;
             filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.6));
         }
-
         .link.dimmed {
             opacity: 0.1;
         }
-
         .node-label {
             font-size: 11px;
             font-weight: 600;
@@ -284,17 +247,14 @@
             text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
             transition: all 0.3s ease;
         }
-
         .node-label.dimmed {
             opacity: 0.2;
         }
-
         .node-label.highlighted {
             fill: #4CAF50;
             font-size: 13px;
             text-shadow: 0 0 8px rgba(76, 175, 80, 0.8);
         }
-
         .tooltip {
             position: absolute;
             text-align: left;
@@ -311,13 +271,11 @@
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
             z-index: 1000;
         }
-
         .tooltip h4 {
             margin: 0 0 0.5rem 0;
             color: #4CAF50;
             font-weight: 700;
         }
-
         .loading {
             position: absolute;
             top: 50%;
@@ -327,7 +285,6 @@
             color: white;
             text-align: center;
         }
-
         .loading-spinner {
             border: 3px solid rgba(255, 255, 255, 0.3);
             border-radius: 50%;
@@ -337,12 +294,10 @@
             animation: spin 1s linear infinite;
             margin: 0 auto 1rem;
         }
-
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-
         .error {
             color: #ff6b6b;
             background: rgba(255, 107, 107, 0.1);
@@ -351,7 +306,6 @@
             margin: 1rem;
             border: 1px solid rgba(255, 107, 107, 0.3);
         }
-
         /* Responsive Design */
         @media (max-width: 768px) {
             .sidebar {
@@ -364,15 +318,95 @@
             .sidebar.collapsed {
                 margin-left: -100%;
             }
+
+            .sidebar-title {
+                font-size: 2rem;
+                margin-top: 60px;
+            }
+
+            .search-section {
+                padding: 0 1rem 1rem;
+            }
+
+            .instructions-panel {
+                margin: 0.5rem;
+                padding: 1rem;
+                margin-bottom: 2rem;
+            }
+
+            .instructions-title {
+                font-size: 1.2rem;
+            }
+
+            .instruction-item {
+                font-size: 0.9rem;
+                margin-bottom: 0.75rem;
+            }
+
+            .main-home-btn {
+                top: 1rem;
+                right: 1rem;
+                padding: 0.5rem;
+                font-size: 1.2rem;
+            }
+
+            .menu-toggle {
+                top: 1rem;
+                left: 1rem;
+                padding: 0.5rem;
+                font-size: 1.2rem;
+            }
+
+            .tooltip {
+                max-width: 200px;
+                font-size: 0.8rem;
+                padding: 0.75rem;
+            }
+
+            .node-label {
+                font-size: 9px;
+            }
+
+            .node-label.highlighted {
+                font-size: 11px;
+            }
+        }
+
+        /* Extra small devices */
+        @media (max-width: 480px) {
+            .sidebar-title {
+                font-size: 1.75rem;
+            }
+
+            .search-input {
+                font-size: 0.85rem;
+                padding: 0.6rem 0.8rem;
+            }
+
+            .reset-btn {
+                padding: 0.6rem 1.2rem;
+                font-size: 0.85rem;
+            }
+
+            .instructions-title {
+                font-size: 1.1rem;
+            }
+
+            .instruction-item {
+                font-size: 0.85rem;
+            }
+
+            .main-home-btn img {
+                width: 16px !important;
+                height: 16px !important;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <!-- Fixed Menu Toggle Button -->
         <button class="menu-toggle" id="menuToggle">☰</button>
         
-        <!-- Sidebar -->
         <div class="sidebar" id="sidebar">
             <div class="sidebar-header">
                 <h1 class="sidebar-title">KNOWLEDGE<br>GRAPH</h1>
@@ -408,9 +442,7 @@
             </div>
         </div>
 
-        <!-- Main Graph Area -->
         <div class="main-content">
-            <!-- Home Button in Top-Right -->
             <button class="main-home-btn" id="mainHomeBtn">
                 <img src="/static/Home.png" alt="Home" style="width: 20px; height: 20px;">
             </button>
@@ -425,10 +457,8 @@
     <div class="tooltip" id="tooltip"></div>
 
     <script>
-        // Configuration
         const API_BASE = '/api';
         
-        // Global variables
         let graphData = { nodes: [], edges: [] };
         let simulation;
         let svg, g;
@@ -437,20 +467,23 @@
         let highlightedElements = { nodes: new Set(), edges: new Set() };
         let sidebarCollapsed = false;
 
-        // Initialize the application
         async function init() {
             setupEventListeners();
             setupVisualizationSVG();
+            
+            // Auto-collapse sidebar on mobile
+            if (window.innerWidth <= 768) {
+                sidebarCollapsed = true;
+                document.getElementById('sidebar').classList.add('collapsed');
+            }
+            
             await loadGraphData();
             hideLoading();
         }
 
         function setupEventListeners() {
-            // Sidebar toggle
             document.getElementById('menuToggle').addEventListener('click', toggleSidebar);
             document.getElementById('mainHomeBtn').addEventListener('click', goHome);
-            
-            // Search and reset
             document.getElementById('searchInput').addEventListener('input', debounce(handleSearch, 300));
             document.getElementById('resetBtn').addEventListener('click', resetHighlighting);
         }
@@ -467,7 +500,6 @@
         }
 
         function goHome() {
-            // Navigate back to main page
             window.location.href = '/'; 
         }
 
@@ -478,19 +510,15 @@
             svg = d3.select('#graph')
                 .attr('width', containerRect.width)
                 .attr('height', containerRect.height);
-
             g = svg.append('g');
 
-            // Add zoom behavior
             const zoom = d3.zoom()
                 .scaleExtent([0.1, 4])
                 .on('zoom', (event) => {
                     g.attr('transform', event.transform);
                 });
-
             svg.call(zoom);
 
-            // Click on empty space to reset highlighting
             svg.on('click', (event) => {
                 if (event.target === event.currentTarget) {
                     resetHighlighting();
@@ -499,23 +527,23 @@
         }
 
         async function loadGraphData(search = '') {
-        try {
-            showLoading();
-            const url = search 
-                ? `${API_BASE}/graph?search=${encodeURIComponent(search)}`
-                : `${API_BASE}/graph`;
-            
-            const response = await fetch(url);
-            if (!response.ok) throw new Error('Failed to fetch graph data');
-            
-            graphData = await response.json();
-            renderGraph();
-        } catch (error) {
-            showError('Failed to load graph data: ' + error.message);
-        } finally {
-            hideLoading();
+            try {
+                showLoading();
+                const url = search 
+                    ? `${API_BASE}/graph?search=${encodeURIComponent(search)}`
+                    : `${API_BASE}/graph`;
+                
+                const response = await fetch(url);
+                if (!response.ok) throw new Error('Failed to fetch graph data');
+                
+                graphData = await response.json();
+                renderGraph();
+            } catch (error) {
+                showError('Failed to load graph data: ' + error.message);
+            } finally {
+                hideLoading();
+            }
         }
-    }
 
         function renderGraph() {
             if (!graphData.nodes || graphData.nodes.length === 0) {
@@ -523,22 +551,23 @@
                 return;
             }
 
-            // Clear existing elements
             g.selectAll('*').remove();
             resetHighlighting();
 
-            // Get container dimensions
             const width = +svg.attr('width');
             const height = +svg.attr('height');
 
-            // Create simulation
+            const isMobile = window.innerWidth <= 768;
+            const linkDistance = isMobile ? 60 : 100;
+            const chargeStrength = isMobile ? -150 : -300;
+            const collisionRadius = isMobile ? 20 : 30;
+
             simulation = d3.forceSimulation(graphData.nodes)
-                .force('link', d3.forceLink(graphData.edges).id(d => d.id).distance(100))
-                .force('charge', d3.forceManyBody().strength(-300))
+                .force('link', d3.forceLink(graphData.edges).id(d => d.id).distance(linkDistance))
+                .force('charge', d3.forceManyBody().strength(chargeStrength))
                 .force('center', d3.forceCenter(width / 2, height / 2))
-                .force('collision', d3.forceCollide().radius(30));
+                .force('collision', d3.forceCollide().radius(collisionRadius));
 
-            // Create links
             const link = g.append('g')
                 .selectAll('line')
                 .data(graphData.edges)
@@ -547,13 +576,14 @@
                 .on('mouseover', showEdgeTooltip)
                 .on('mouseout', hideTooltip);
 
-            // Create nodes
+            const nodeRadius = isMobile ? 8 : 12;
+            
             const node = g.append('g')
                 .selectAll('circle')
                 .data(graphData.nodes)
                 .join('circle')
                 .attr('class', 'node')
-                .attr('r', 12)
+                .attr('r', nodeRadius)
                 .attr('fill', d => getNodeColor(d))
                 .attr('stroke', '#fff')
                 .attr('stroke-width', 2)
@@ -565,26 +595,23 @@
                     .on('drag', dragged)
                     .on('end', dragEnded));
 
-            // Create labels
+            const maxLabelLength = isMobile ? 8 : 12;
             const labels = g.append('g')
                 .selectAll('text')
                 .data(graphData.nodes)
                 .join('text')
                 .attr('class', 'node-label')
-                .text(d => d.label.length > 12 ? d.label.substring(0, 12) + '...' : d.label);
+                .text(d => d.label.length > maxLabelLength ? d.label.substring(0, maxLabelLength) + '...' : d.label);
 
-            // Update positions on simulation tick
             simulation.on('tick', () => {
                 link
                     .attr('x1', d => d.source.x)
                     .attr('y1', d => d.source.y)
                     .attr('x2', d => d.target.x)
                     .attr('y2', d => d.target.y);
-
                 node
                     .attr('cx', d => d.x)
                     .attr('cy', d => d.y);
-
                 labels
                     .attr('x', d => d.x)
                     .attr('y', d => d.y + 20);
@@ -605,6 +632,8 @@
 
         function showNodeTooltip(event, d) {
             const tooltip = d3.select('#tooltip');
+            const isMobile = window.innerWidth <= 768;
+            
             tooltip.transition().duration(200).style('opacity', 1);
             
             const connectionCount = graphData.edges.filter(edge => 
@@ -615,7 +644,7 @@
                 <h4>${d.label}</h4>
                 <p><strong>Type:</strong> ${d.type || 'Node'}</p>
                 <p><strong>Connections:</strong> ${connectionCount}</p>
-                <p>Click to highlight connections</p>
+                ${isMobile ? '<p>Tap to highlight</p>' : '<p>Click to highlight connections</p>'}
             `)
                 .style('left', (event.pageX + 10) + 'px')
                 .style('top', (event.pageY - 28) + 'px');
@@ -644,7 +673,6 @@
                 resetHighlighting();
                 return;
             }
-
             selectedNode = d;
             highlightConnections(d);
         }
@@ -652,7 +680,6 @@
         function highlightConnections(selectedNode) {
             highlightedElements.nodes.clear();
             highlightedElements.edges.clear();
-
             graphData.edges.forEach(edge => {
                 if (edge.source.id === selectedNode.id || edge.target.id === selectedNode.id) {
                     highlightedElements.edges.add(edge);
@@ -660,7 +687,6 @@
                     highlightedElements.nodes.add(edge.target.id);
                 }
             });
-
             applyHighlighting();
         }
 
@@ -669,11 +695,9 @@
                 .classed('highlighted', d => highlightedElements.nodes.has(d.id) && (!selectedNode || d.id !== selectedNode.id))
                 .classed('selected', d => selectedNode && d.id === selectedNode.id)
                 .classed('dimmed', d => selectedNode && !highlightedElements.nodes.has(d.id));
-
             g.selectAll('.link')
                 .classed('highlighted', d => highlightedElements.edges.has(d))
                 .classed('dimmed', d => selectedNode && !highlightedElements.edges.has(d));
-
             g.selectAll('.node-label')
                 .classed('highlighted', d => highlightedElements.nodes.has(d.id))
                 .classed('dimmed', d => selectedNode && !highlightedElements.nodes.has(d.id));
@@ -683,16 +707,13 @@
             selectedNode = null;
             highlightedElements.nodes.clear();
             highlightedElements.edges.clear();
-
             g.selectAll('.node')
                 .classed('highlighted', false)
                 .classed('selected', false)
                 .classed('dimmed', false);
-
             g.selectAll('.link')
                 .classed('highlighted', false)
                 .classed('dimmed', false);
-
             g.selectAll('.node-label')
                 .classed('highlighted', false)
                 .classed('dimmed', false);
@@ -735,7 +756,6 @@
             };
         }
 
-        // Drag functions
         function dragStarted(event, d) {
             if (!event.active) simulation.alphaTarget(0.3).restart();
             d.fx = d.x;
@@ -753,7 +773,6 @@
             d.fy = null;
         }
 
-        // Window resize handler
         window.addEventListener('resize', () => {
             const container = document.querySelector('.main-content');
             const containerRect = container.getBoundingClientRect();
@@ -767,7 +786,6 @@
             }
         });
 
-        // Initialize when DOM is loaded
         document.addEventListener('DOMContentLoaded', init);
     </script>
 </body>