From da0fdde71c1661ac4f64410d27273e72a28dc04b Mon Sep 17 00:00:00 2001
From: Daniel LaForce <daniel@argobox.com>
Date: Sat, 26 Apr 2025 21:38:56 -0600
Subject: [PATCH] fix(MiniGraph): Resolve init error, add cose layout &
 fullscreen features

---
 src/components/MiniGraph.astro | 1037 +++++++++++++++++++++++++++-----
 1 file changed, 891 insertions(+), 146 deletions(-)

diff --git a/src/components/MiniGraph.astro b/src/components/MiniGraph.astro
index 65318f5..bf1b5ca 100644
--- a/src/components/MiniGraph.astro
+++ b/src/components/MiniGraph.astro
@@ -1,5 +1,5 @@
 ---
-// MiniGraph.astro - A standalone mini knowledge graph component
+// MiniGraph.astro - A standalone mini knowledge graph component with fullscreen capability
 // This component is designed to work independently from the blog structure
 
 // Define props interface
@@ -68,7 +68,9 @@ const nodes = [
     id: slug,
     label: title,
     type: "post",
-    level: 0
+    level: 0,
+    category: category,
+    tags: tags
   },
   // Level 1: Tag nodes
   ...tags.map(tag => ({
@@ -82,7 +84,9 @@ const nodes = [
     id: post.slug,
     label: post.data.title,
     type: "post",
-    level: 1
+    level: 1,
+    category: post.data.category || "Uncategorized",
+    tags: post.data.tags || []
   })),
   // Level 2: Related tags nodes
   ...relatedPostsTags.map(tag => ({
@@ -96,7 +100,9 @@ const nodes = [
     id: post.slug,
     label: post.data.title,
     type: "post",
-    level: 2
+    level: 2,
+    category: post.data.category || "Uncategorized",
+    tags: post.data.tags || []
   })),
   // Level 2: Tags from Level 2 posts
   ...[...level2Tags].map(tag => ({
@@ -141,18 +147,100 @@ const edges = [
 
 // Prepare graph data object
 const graphData = { nodes, edges };
+
+// Define colors for categories
+const predefinedColors = {
+  'Kubernetes': '#326CE5', 'Docker': '#2496ED', 'DevOps': '#FF6F61',
+  'Homelab': '#06B6D4', 'Networking': '#9333EA', 'Infrastructure': '#10B981',
+  'Automation': '#F59E0B', 'Security': '#EF4444', 'Monitoring': '#6366F1',
+  'Storage': '#8B5CF6', 'Obsidian': '#7C3AED', 'Tutorial': '#3B82F6',
+  'Uncategorized': '#A0AEC0'
+};
 ---
 
 <!-- Super simple HTML structure -->
 <div class="knowledge-graph-wrapper">
   <h4 class="graph-title">Post Connections</h4>
   <div id={graphId} class="mini-graph-container"></div>
+  
+  <!-- Fullscreen Toggle Button -->
+  <button id={`${graphId}-fullscreen-toggle`} class="fullscreen-toggle" aria-label="Toggle fullscreen">
+    <svg id={`${graphId}-fullscreen-enter`} class="fullscreen-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="15 3 21 3 21 9"></polyline>
+      <polyline points="9 21 3 21 3 15"></polyline>
+      <line x1="21" y1="3" x2="14" y2="10"></line>
+      <line x1="3" y1="21" x2="10" y2="14"></line>
+    </svg>
+    <svg id={`${graphId}-fullscreen-exit`} class="fullscreen-icon hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="4 14 10 14 10 20"></polyline>
+      <polyline points="20 10 14 10 14 4"></polyline>
+      <line x1="14" y1="10" x2="21" y2="3"></line>
+      <line x1="3" y1="21" x2="10" y2="14"></line>
+    </svg>
+  </button>
+</div>
+
+<!-- Fullscreen container (initially hidden) -->
+<div id={`${graphId}-fullscreen`} class="fullscreen-container">
+  <div class="fullscreen-header">
+    <div class="fullscreen-title">Knowledge Graph</div>
+    <button id={`${graphId}-exit-fullscreen`} class="exit-fullscreen" aria-label="Exit fullscreen">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+  </div>
+  
+  <div class="fullscreen-content">
+    <!-- Fullscreen graph container -->
+    <div id={`${graphId}-fullscreen-graph`} class="fullscreen-graph"></div>
+    
+    <!-- Info panel -->
+    <div id={`${graphId}-info-panel`} class="info-panel">
+      <div class="info-panel-header">
+        <h3 id={`${graphId}-info-title`} class="info-title">Node Info</h3>
+        <button id={`${graphId}-close-info`} class="close-info" aria-label="Close info panel">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="info-content">
+        <div class="info-type">
+          <span class="info-label">Type:</span>
+          <span id={`${graphId}-info-type`} class="info-value type-value">Post</span>
+        </div>
+        
+        <div id={`${graphId}-info-category-container`} class="info-category">
+          <span class="info-label">Category:</span>
+          <span id={`${graphId}-info-category`} class="info-value category-value">Category</span>
+        </div>
+        
+        <div id={`${graphId}-info-tags-container`} class="info-tags">
+          <span class="info-label">Tags:</span>
+          <div id={`${graphId}-info-tags`} class="tags-container"></div>
+        </div>
+        
+        <div class="info-connections">
+          <span class="info-label">Connections:</span>
+          <ul id={`${graphId}-info-connections`} class="connections-list"></ul>
+        </div>
+        
+        <a href="#" id={`${graphId}-info-link`} class="info-link" target="_self">View Content</a>
+      </div>
+    </div>
+  </div>
 </div>
 
 <!-- Minimal CSS -->
 <style>
+  /* Base styles for mini graph */
   .knowledge-graph-wrapper {
     width: 100%;
+    position: relative;
     margin-bottom: 1rem;
   }
 
@@ -170,10 +258,286 @@ const graphData = { nodes, edges };
     border: 1px solid var(--card-border, rgba(56, 189, 248, 0.2));
     background: rgba(15, 23, 42, 0.2);
   }
+  
+  /* Fullscreen toggle button */
+  .fullscreen-toggle {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    background: rgba(30, 41, 59, 0.7);
+    border: 1px solid var(--border-primary, rgba(56, 189, 248, 0.3));
+    color: var(--text-primary, #e2e8f0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 2;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+  
+  .fullscreen-toggle:hover {
+    background: rgba(30, 41, 59, 0.9);
+    transform: translateY(-2px);
+  }
+  
+  .fullscreen-icon {
+    width: 16px;
+    height: 16px;
+  }
+  
+  .hidden {
+    display: none;
+  }
+  
+  /* Fullscreen container */
+  .fullscreen-container {
+    display: none; /* Hidden by default */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: var(--bg-primary, #0f172a);
+    z-index: 9999;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  
+  .fullscreen-container.active {
+    display: flex;
+  }
+  
+  .fullscreen-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid var(--border-primary, rgba(56, 189, 248, 0.2));
+    background: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(8px);
+  }
+  
+  .fullscreen-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary, #e2e8f0);
+  }
+  
+  .exit-fullscreen {
+    width: 36px;
+    height: 36px;
+    border-radius: 6px;
+    background: rgba(30, 41, 59, 0.7);
+    border: 1px solid var(--border-primary, rgba(56, 189, 248, 0.2));
+    color: var(--text-primary, #e2e8f0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .exit-fullscreen:hover {
+    background: rgba(30, 41, 59, 0.9);
+  }
+  
+  .fullscreen-content {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+  
+  .fullscreen-graph {
+    flex: 1;
+    height: 100%;
+    border-right: 1px solid var(--border-primary, rgba(56, 189, 248, 0.2));
+  }
+  
+  /* Info panel */
+  .info-panel {
+    width: 0;
+    height: 100%;
+    background: var(--bg-secondary, #1e293b);
+    transition: width 0.3s ease;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .info-panel.active {
+    width: 350px;
+  }
+  
+  .info-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-primary, rgba(56, 189, 248, 0.1));
+  }
+  
+  .info-title {
+    font-size: 1.2rem;
+    margin: 0;
+    color: var(--text-primary, #e2e8f0);
+    font-weight: 600;
+  }
+  
+  .close-info {
+    background: none;
+    border: none;
+    color: var(--text-secondary, #94a3b8);
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+  }
+  
+  .close-info:hover {
+    color: var(--text-primary, #e2e8f0);
+    background: rgba(255, 255, 255, 0.1);
+  }
+  
+  .info-content {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+  }
+  
+  .info-type, .info-category, .info-tags, .info-connections {
+    margin-bottom: 1.25rem;
+  }
+  
+  .info-label {
+    display: block;
+    color: var(--text-secondary, #94a3b8);
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .type-value {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+  }
+  
+  .post-type {
+    background-color: rgba(59, 130, 246, 0.15);
+    color: #3B82F6;
+  }
+  
+  .tag-type {
+    background-color: rgba(16, 185, 129, 0.15);
+    color: #10B981;
+  }
+  
+  .category-value {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+  }
+  
+  .tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .tag {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10B981;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .tag:hover {
+    background: rgba(16, 185, 129, 0.2);
+    transform: translateY(-2px);
+  }
+  
+  .connections-list {
+    padding-left: 0;
+    list-style: none;
+    margin: 0;
+    max-height: 150px;
+    overflow-y: auto;
+  }
+  
+  .connections-list li {
+    color: var(--text-secondary, #94a3b8);
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .connections-list a {
+    color: var(--accent-primary, #38bdf8);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+  
+  .connections-list a:hover {
+    color: var(--accent-secondary, #06b6d4);
+    text-decoration: underline;
+  }
+  
+  .info-link {
+    display: block;
+    background: linear-gradient(90deg, var(--accent-primary, #38bdf8), var(--accent-secondary, #06b6d4));
+    color: var(--bg-primary, #0f172a);
+    font-weight: 500;
+    padding: 0.6rem 1.25rem;
+    border-radius: 6px;
+    text-decoration: none;
+    text-align: center;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2);
+    margin-top: 1rem;
+  }
+  
+  .info-link:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(6, 182, 212, 0.3);
+  }
+  
+  /* Media queries for mobile responsiveness */
+  @media screen and (max-width: 768px) {
+    .fullscreen-content {
+      flex-direction: column;
+    }
+    
+    .fullscreen-graph {
+      height: 60%;
+      border-right: none;
+      border-bottom: 1px solid var(--border-primary, rgba(56, 189, 248, 0.2));
+    }
+    
+    .info-panel {
+      width: 100%;
+      height: 0;
+    }
+    
+    .info-panel.active {
+      width: 100%;
+      height: 40%;
+    }
+  }
 </style>
 
 <!-- Standalone initialization script -->
-<script define:vars={{ graphId, graphData }}>
+<script define:vars={{ graphId, graphData, predefinedColors }}>
   // Wait for page to fully load
   window.addEventListener('load', function() {
     // Retry initialization multiple times in case Cytoscape or the DOM isn't ready yet
@@ -205,6 +569,22 @@ const graphData = { nodes, edges };
         return;
       }
 
+      // Fullscreen elements
+      const fullscreenToggle = document.getElementById(`${graphId}-fullscreen-toggle`);
+      const fullscreenContainer = document.getElementById(`${graphId}-fullscreen`);
+      const fullscreenGraph = document.getElementById(`${graphId}-fullscreen-graph`);
+      const exitFullscreenBtn = document.getElementById(`${graphId}-exit-fullscreen`);
+      const fullscreenEnterIcon = document.getElementById(`${graphId}-fullscreen-enter`);
+      const fullscreenExitIcon = document.getElementById(`${graphId}-fullscreen-exit`);
+      const infoPanel = document.getElementById(`${graphId}-info-panel`);
+      const closeInfoBtn = document.getElementById(`${graphId}-close-info`);
+      
+      // State variables
+      let isFullscreen = false;
+      let cy = null;         // Mini graph instance
+      let cyFullscreen = null; // Fullscreen graph instance
+      let originalStyles = {}; // To restore page layout after exiting fullscreen
+      
       try {
         // Check if we have any nodes
         if (graphData.nodes.length === 0) {
@@ -212,148 +592,517 @@ const graphData = { nodes, edges };
           return;
         }
 
-        // Initialize Cytoscape
-        const cy = cytoscape({
-          container,
-          elements: [
-            ...graphData.nodes.map(node => ({
-              data: {
-                id: node.id,
-                label: node.label,
-                type: node.type,
-                level: node.level
-              }
-            })),
-            ...graphData.edges.map((edge, index) => ({
-              data: {
-                id: `e${index}`,
-                source: edge.source,
-                target: edge.target,
-                type: edge.type
-              }
-            }))
-          ],
-          style: [
-            // Base node style
-            {
-              selector: 'node',
-              style: {
-                'background-color': '#3B82F6',
-                'label': 'data(label)',
-                'width': 20,
-                'height': 20,
-                'font-size': '8px',
-                'color': '#E2E8F0',
-                'text-valign': 'bottom',
-                'text-halign': 'center',
-                'text-margin-y': 5,
-                'text-wrap': 'ellipsis',
-                'text-max-width': '60px'
-              }
-            },
-            // Current post node style (Level 0)
-            {
-              selector: 'node[type="post"][level=0]',
-              style: {
-                'background-color': '#06B6D4',
-                'width': 30,
-                'height': 30,
-                'font-size': '9px',
-                'text-max-width': '80px',
-                'border-width': 2,
-                'border-color': '#38BDF8'
-              }
-            },
-            // Related post node style (Level 1)
-            {
-              selector: 'node[type="post"][level=1]',
-              style: {
-                'background-color': '#3B82F6',
-                'width': 25,
-                'height': 25,
-                'font-size': '8px'
-              }
-            },
-            // Distant post node style (Level 2)
-            {
-              selector: 'node[type="post"][level=2]',
-              style: {
-                'background-color': '#60A5FA',
-                'width': 20,
-                'height': 20,
-                'font-size': '7px',
-                'opacity': 0.8
-              }
-            },
-            // Primary tag node style (Level 1)
-            {
-              selector: 'node[type="tag"][level=1]',
-              style: {
-                'background-color': '#10B981',
-                'shape': 'diamond',
-                'width': 20,
-                'height': 20
-              }
-            },
-            // Secondary tag node style (Level 2)
-            {
-              selector: 'node[type="tag"][level=2]',
-              style: {
-                'background-color': '#34D399',
-                'shape': 'diamond',
-                'width': 15,
-                'height': 15,
-                'opacity': 0.8
-              }
-            },
-            // Direct edge style
-            {
-              selector: 'edge[type="post-tag"]',
-              style: {
-                'width': 1.5,
-                'line-color': 'rgba(16, 185, 129, 0.7)',
-                'line-style': 'solid',
-                'curve-style': 'bezier',
-                'opacity': 0.8
-              }
-            },
-            // Related post edge style
-            {
-              selector: 'edge[type="post-related"]',
-              style: {
-                'width': 1.5,
-                'line-color': 'rgba(59, 130, 246, 0.7)',
-                'line-style': 'dashed',
-                'curve-style': 'bezier',
-                'opacity': 0.8
-              }
-            },
-            // Secondary connections
-            {
-              selector: 'edge[type="tag-post"]',
-              style: {
-                'width': 1,
-                'line-color': 'rgba(16, 185, 129, 0.4)',
-                'line-style': 'dotted',
-                'curve-style': 'bezier',
-                'opacity': 0.6
-              }
+        // Generate node colors based on type and category
+        const nodeElements = graphData.nodes.map(node => {
+          let nodeColor = '#3B82F6'; // Default blue for posts
+          
+          if (node.type === 'tag') {
+            nodeColor = '#10B981'; // Green for tags
+          } else if (node.type === 'post' && node.category) {
+            // Use category color for posts if available
+            nodeColor = predefinedColors[node.category] || '#3B82F6';
+          }
+          
+          // Adjust opacity based on level
+          const levelOpacity = node.level === 0 ? 1 : 
+                               node.level === 1 ? 0.85 : 0.7;
+          
+          // Calculate node size based on level
+          const nodeSize = node.level === 0 ? 30 : 
+                           node.level === 1 ? 22 : 16;
+          
+          return {
+            data: {
+              id: node.id,
+              label: node.label,
+              type: node.type,
+              level: node.level,
+              category: node.category,
+              tags: node.tags || [],
+              color: nodeColor,
+              opacity: levelOpacity,
+              size: nodeSize
             }
-          ],
-          // Improved layout for multi-level visualization
+          };
+        });
+        
+        // Generate edge elements
+        const edgeElements = graphData.edges.map((edge, index) => ({
+          data: {
+            id: `e${index}`,
+            source: edge.source,
+            target: edge.target,
+            type: edge.type
+          }
+        }));
+        
+        // Combine nodes and edges
+        const elements = [...nodeElements, ...edgeElements];
+        
+        // Define common style array to be used by both graph instances
+        const graphStyles = [
+          // Base node style
+          {
+            selector: 'node',
+            style: {
+              'background-color': 'data(color)',
+              'label': 'data(label)',
+              'width': 'data(size)',
+              'height': 'data(size)',
+              'font-size': '8px',
+              'color': '#E2E8F0',
+              'text-valign': 'bottom',
+              'text-halign': 'center',
+              'text-margin-y': 5,
+              'text-wrap': 'ellipsis',
+              'text-max-width': '60px',
+              'text-background-opacity': 0.7,
+              'text-background-color': '#0F1219',
+              'text-background-padding': '2px',
+              'text-background-shape': 'roundrectangle',
+              'border-width': 2,
+              'border-color': '#0F1219',
+              'border-opacity': 0.8,
+              'opacity': 'data(opacity)'
+            }
+          },
+          // Post node styles
+          {
+            selector: 'node[type="post"]',
+            style: {
+              'shape': 'ellipse',
+              'text-max-width': '80px'
+            }
+          },
+          // Current post node (Level 0)
+          {
+            selector: 'node[type="post"][level=0]',
+            style: {
+              'border-width': 3,
+              'border-color': '#38BDF8'
+            }
+          },
+          // Tag node styles
+          {
+            selector: 'node[type="tag"]',
+            style: {
+              'shape': 'diamond',
+              'width': 'mapData(level, 0, 2, 25, 15)',
+              'height': 'mapData(level, 0, 2, 25, 15)'
+            }
+          },
+          // Edge styles
+          {
+            selector: 'edge',
+            style: {
+              'width': 1.5,
+              'line-color': 'rgba(226, 232, 240, 0.2)',
+              'curve-style': 'bezier',
+              'opacity': 0.6
+            }
+          },
+          // Post-tag edges
+          {
+            selector: 'edge[type="post-tag"]',
+            style: {
+              'line-color': 'rgba(16, 185, 129, 0.7)',
+              'line-style': 'solid'
+            }
+          },
+          // Related post edges
+          {
+            selector: 'edge[type="post-related"]',
+            style: {
+              'line-color': 'rgba(59, 130, 246, 0.7)',
+              'line-style': 'dashed'
+            }
+          },
+          // Level 2 connections
+          {
+            selector: 'edge[type="tag-post"]',
+            style: {
+              'line-color': 'rgba(16, 185, 129, 0.4)',
+              'line-style': 'dotted',
+              'opacity': 0.5
+            }
+          },
+          // Highlight styles
+          {
+            selector: '.highlighted',
+            style: {
+              'background-color': 'data(color)',
+              'border-color': '#FFFFFF',
+              'border-width': 3,
+              'text-background-opacity': 0.9,
+              'color': '#FFFFFF',
+              'opacity': 1,
+              'z-index': 20
+            }
+          },
+          {
+            selector: '.faded',
+            style: {
+              'opacity': 0.2,
+              'text-opacity': 0.3
+            }
+          },
+          {
+            selector: 'node:selected',
+            style: {
+              'border-width': 4,
+              'border-color': '#FFFFFF'
+            }
+          }
+        ];
+        
+        // Initialize mini graph with cose layout
+        cy = cytoscape({
+          container,
+          elements,
+          style: graphStyles,
           layout: {
-            name: 'concentric', // NOTE: This is concentric, not cose as requested earlier
-            concentric: function(node) {
-              // Use node level for concentric layout
-              return 10 - node.data('level') * 3;
-            },
-            levelWidth: function() { return 2; },
-            minNodeSpacing: 40,
+            name: 'cose',
+            idealEdgeLength: 50,
+            nodeOverlap: 20,
+            refresh: 20,
+            fit: true,
+            padding: 15,
+            randomize: false,
+            componentSpacing: 70,
+            nodeRepulsion: 400000,
+            edgeElasticity: 100,
+            nestingFactor: 5,
+            gravity: 80,
+            numIter: 1000,
+            initialTemp: 200,
+            coolingFactor: 0.95,
+            minTemp: 1.0,
             animate: false
+          },
+          minZoom: 0.5,
+          maxZoom: 2,
+          wheelSensitivity: 0.2
+        });
+        
+        // Fit graph to container
+        cy.fit(undefined, 20);
+        
+        // Add event listeners
+        cy.on('tap', 'node', function(evt) {
+          const node = evt.target;
+          highlightNode(node, cy);
+        });
+        
+        // Add fullscreen toggle functionality if the button exists
+        if (fullscreenToggle && fullscreenContainer) {
+          fullscreenToggle.addEventListener('click', function() {
+            enterFullscreenMode();
+          });
+        }
+        
+        // Exit fullscreen when button is clicked
+        if (exitFullscreenBtn) {
+          exitFullscreenBtn.addEventListener('click', function() {
+            exitFullscreenMode();
+          });
+        }
+        
+        // Close info panel when close button is clicked
+        if (closeInfoBtn && infoPanel) {
+          closeInfoBtn.addEventListener('click', function() {
+            infoPanel.classList.remove('active');
+          });
+        }
+        
+        // Toggle fullscreen mode by keyboard ESC
+        document.addEventListener('keydown', function(e) {
+          if (e.key === 'Escape' && isFullscreen) {
+            exitFullscreenMode();
           }
         });
-
-        // Make nodes clickable
+        
+        // Function to enter fullscreen mode
+        function enterFullscreenMode() {
+          if (isFullscreen) return;
+          
+          isFullscreen = true;
+          
+          // Show fullscreen container
+          fullscreenContainer.classList.add('active');
+          
+          // Update fullscreen toggle icons
+          fullscreenEnterIcon.classList.add('hidden');
+          fullscreenExitIcon.classList.remove('hidden');
+          
+          // Store original styles of important page elements to restore later
+          saveOriginalStyles();
+          
+          // Initialize fullscreen graph if not already done
+          if (!cyFullscreen && fullscreenGraph) {
+            initFullscreenGraph();
+          }
+          
+          // Prevent body scroll
+          document.body.style.overflow = 'hidden';
+        }
+        
+        // Function to exit fullscreen mode
+        function exitFullscreenMode() {
+          if (!isFullscreen) return;
+          
+          isFullscreen = false;
+          
+          // Hide fullscreen container
+          fullscreenContainer.classList.remove('active');
+          
+          // Update fullscreen toggle icons
+          fullscreenEnterIcon.classList.remove('hidden');
+          fullscreenExitIcon.classList.add('hidden');
+          
+          // Close info panel
+          if (infoPanel) {
+            infoPanel.classList.remove('active');
+          }
+          
+          // Restore original page layout
+          restoreOriginalStyles();
+          
+          // Allow body scroll again
+          document.body.style.overflow = '';
+        }
+        
+        // Save original styles of page elements before entering fullscreen
+        function saveOriginalStyles() {
+          originalStyles = {
+            bodyOverflow: document.body.style.overflow,
+            // Add other elements that need to be restored later
+          };
+          
+          // Check for sidebar, content containers, etc. and save their styles
+          const sidebar = document.querySelector('.sidebar, aside, nav');
+          const mainContent = document.querySelector('main, .content, article');
+          
+          if (sidebar) {
+            originalStyles.sidebar = {
+              element: sidebar,
+              display: sidebar.style.display,
+              visibility: sidebar.style.visibility,
+              position: sidebar.style.position,
+              zIndex: sidebar.style.zIndex
+            };
+          }
+          
+          if (mainContent) {
+            originalStyles.mainContent = {
+              element: mainContent,
+              marginLeft: mainContent.style.marginLeft,
+              width: mainContent.style.width,
+              maxWidth: mainContent.style.maxWidth
+            };
+          }
+        }
+        
+        // Restore original styles when exiting fullscreen
+        function restoreOriginalStyles() {
+          document.body.style.overflow = originalStyles.bodyOverflow || '';
+          
+          // Restore sidebar if it exists
+          if (originalStyles.sidebar && originalStyles.sidebar.element) {
+            const sidebar = originalStyles.sidebar.element;
+            sidebar.style.display = originalStyles.sidebar.display;
+            sidebar.style.visibility = originalStyles.sidebar.visibility;
+            sidebar.style.position = originalStyles.sidebar.position;
+            sidebar.style.zIndex = originalStyles.sidebar.zIndex;
+          }
+          
+          // Restore main content if it exists
+          if (originalStyles.mainContent && originalStyles.mainContent.element) {
+            const mainContent = originalStyles.mainContent.element;
+            mainContent.style.marginLeft = originalStyles.mainContent.marginLeft;
+            mainContent.style.width = originalStyles.mainContent.width;
+            mainContent.style.maxWidth = originalStyles.mainContent.maxWidth;
+          }
+        }
+        
+        // Initialize the fullscreen graph
+        function initFullscreenGraph() {
+          if (!fullscreenGraph) return;
+          
+          // Create a new cytoscape instance for fullscreen with the same data
+          cyFullscreen = cytoscape({
+            container: fullscreenGraph,
+            elements: elements,
+            style: graphStyles,
+            layout: {
+              name: 'cose',
+              idealEdgeLength: 80,
+              nodeOverlap: 20,
+              refresh: 20,
+              fit: true,
+              padding: 30,
+              randomize: false,
+              componentSpacing: 100,
+              nodeRepulsion: 450000,
+              edgeElasticity: 100,
+              nestingFactor: 5,
+              gravity: 80,
+              numIter: 1000,
+              initialTemp: 200,
+              coolingFactor: 0.95,
+              minTemp: 1.0,
+              animate: false
+            },
+            minZoom: 0.2,
+            maxZoom: 3,
+            wheelSensitivity: 0.3
+          });
+          
+          // Fit graph to container
+          cyFullscreen.fit(undefined, 30);
+          
+          // Add fullscreen interactions
+          addFullscreenInteractions();
+        }
+        
+        // Add interactions for fullscreen mode
+        function addFullscreenInteractions() {
+          // Click on node to show info
+          cyFullscreen.on('tap', 'node', function(evt) {
+            const node = evt.target;
+            const nodeData = node.data();
+            
+            // Highlight the selected node
+            highlightNode(node, cyFullscreen);
+            
+            // Show info panel
+            showNodeInfo(nodeData);
+          });
+          
+          // Click on background to reset
+          cyFullscreen.on('tap', function(evt) {
+            if (evt.target === cyFullscreen) {
+              // Remove highlights
+              cyFullscreen.elements().removeClass('highlighted faded');
+              
+              // Hide info panel
+              if (infoPanel) {
+                infoPanel.classList.remove('active');
+              }
+            }
+          });
+        }
+        
+        // Highlight a node and its connections
+        function highlightNode(node, cyInstance) {
+          // Remove previous highlights
+          cyInstance.elements().removeClass('highlighted faded');
+          
+          // Highlight selected node and its neighborhood
+          node.addClass('highlighted');
+          node.neighborhood().addClass('highlighted');
+          
+          // Fade the rest
+          cyInstance.elements().difference(node.neighborhood().union(node)).addClass('faded');
+        }
+        
+        // Show node info in the panel
+        function showNodeInfo(nodeData) {
+          if (!infoPanel) return;
+          
+          // Set node title
+          document.getElementById(`${graphId}-info-title`).textContent = nodeData.label;
+          
+          // Set node type
+          const typeEl = document.getElementById(`${graphId}-info-type`);
+          typeEl.textContent = nodeData.type.charAt(0).toUpperCase() + nodeData.type.slice(1);
+          typeEl.className = `info-value type-value ${nodeData.type}-type`;
+          
+          // Set category if it's a post
+          const categoryContainer = document.getElementById(`${graphId}-info-category-container`);
+          const categoryEl = document.getElementById(`${graphId}-info-category`);
+          
+          if (nodeData.type === 'post' && nodeData.category) {
+            categoryContainer.style.display = 'block';
+            categoryEl.textContent = nodeData.category;
+            
+            // Use category colors
+            const catColor = predefinedColors[nodeData.category] || '#A0AEC0';
+            categoryEl.style.backgroundColor = `${catColor}33`; // Add alpha
+            categoryEl.style.color = catColor;
+          } else {
+            categoryContainer.style.display = 'none';
+          }
+          
+          // Set tags
+          const tagsContainer = document.getElementById(`${graphId}-info-tags-container`);
+          const tagsEl = document.getElementById(`${graphId}-info-tags`);
+          
+          if (nodeData.type === 'post' && nodeData.tags && nodeData.tags.length > 0) {
+            tagsContainer.style.display = 'block';
+            tagsEl.innerHTML = '';
+            
+            nodeData.tags.forEach(tag => {
+              const tagEl = document.createElement('span');
+              tagEl.className = 'tag';
+              tagEl.textContent = tag;
+              tagEl.addEventListener('click', () => {
+                // Try to find and highlight the tag node
+                const tagNode = cyFullscreen.getElementById(`tag-${tag}`);
+                if (tagNode.length > 0) {
+                  highlightNode(tagNode, cyFullscreen);
+                  showNodeInfo(tagNode.data());
+                }
+              });
+              tagsEl.appendChild(tagEl);
+            });
+          } else {
+            tagsContainer.style.display = 'none';
+          }
+          
+          // Set connections
+          const connectionsEl = document.getElementById(`${graphId}-info-connections`);
+          connectionsEl.innerHTML = '';
+          
+          const neighbors = cyFullscreen.getElementById(nodeData.id).neighborhood('node');
+          if (neighbors.length > 0) {
+            neighbors.forEach(neighbor => {
+              const neighborData = neighbor.data();
+              const li = document.createElement('li');
+              const a = document.createElement('a');
+              a.href = '#';
+              a.textContent = neighborData.label;
+              a.addEventListener('click', (e) => {
+                e.preventDefault();
+                highlightNode(neighbor, cyFullscreen);
+                showNodeInfo(neighborData);
+              });
+              li.appendChild(a);
+              connectionsEl.appendChild(li);
+            });
+          } else {
+            const li = document.createElement('li');
+            li.textContent = 'No connections';
+            connectionsEl.appendChild(li);
+          }
+          
+          // Set link based on node type
+          const linkEl = document.getElementById(`${graphId}-info-link`);
+          if (nodeData.type === 'post') {
+            linkEl.textContent = 'Read Post';
+            linkEl.href = `/posts/${nodeData.id}/`;
+          } else if (nodeData.type === 'tag') {
+            linkEl.textContent = 'View Tag';
+            linkEl.href = `/tag/${nodeData.label}/`;
+          } else {
+            linkEl.textContent = 'View Content';
+            linkEl.href = '#';
+          }
+          
+          // Show the panel
+          infoPanel.classList.add('active');
+        }
+        
+        // Make nodes clickable in mini graph
         cy.on('tap', 'node[type="tag"]', function(evt) {
           const node = evt.target;
           const tagName = node.data('label');
@@ -365,10 +1114,6 @@ const graphData = { nodes, edges };
           const postSlug = node.id();
           window.location.href = `/posts/${postSlug}/`;
         });
-
-        // Fit graph to container
-        cy.fit(undefined, 20);
-
       } catch (error) {
         console.error('[MiniGraph] Error initializing graph:', error);
         container.innerHTML = '<div style="padding:10px;color:#a0aec0;text-align:center;">Error loading graph</div>';