Add Column Spacing slider to toctree graph (#37)

Author: joby-jareddillard

CHANGELOG.rst

@@ -9,6 +9,7 @@ Changelog
 - Fix TypeError with mixed Path and string types for Python 3.12 compatibility
 - Fix AttributeError when title is missing in toctrees
 - Fix KeyError during failed builds when accessing root_doc
+- Add Column Spacing slider to toctree graph
 
 0.8.0
 -----

sphinx_visualized/static/html/toctree-graph.html

@@ -82,9 +82,19 @@
 
     <div class="bg-card p-3 md:p-4 rounded-lg shadow-lg mb-2 border border-border" id="controls-panel">
       <h3 class="m-0 text-base md:text-lg font-semibold text-foreground tracking-tight">Controls</h3>
-      <div class="flex gap-2 mt-2">
-        <button id="expand-all-btn" class="flex-1 px-3 md:px-4 py-2 bg-card border border-border rounded-md text-xs md:text-sm hover:bg-accent hover:shadow transition-all duration-200 font-medium">Expand All</button>
-        <button id="collapse-all-btn" class="flex-1 px-3 md:px-4 py-2 bg-card border border-border rounded-md text-xs md:text-sm hover:bg-accent hover:shadow transition-all duration-200 font-medium">Collapse All</button>
+      <div class="mt-2">
+        <h4 class="m-0 mb-2 text-sm font-medium text-foreground">Expand/Collapse</h4>
+        <div class="flex gap-2">
+          <button id="expand-all-btn" class="flex-1 px-3 md:px-4 py-2 bg-card border border-border rounded-md text-xs md:text-sm hover:bg-accent hover:shadow transition-all duration-200 font-medium">Expand All</button>
+          <button id="collapse-all-btn" class="flex-1 px-3 md:px-4 py-2 bg-card border border-border rounded-md text-xs md:text-sm hover:bg-accent hover:shadow transition-all duration-200 font-medium">Collapse All</button>
+        </div>
+      </div>
+      <div class="mt-3">
+        <h4 class="m-0 mb-2 text-sm font-medium text-foreground">Column Spacing</h4>
+        <div class="flex items-center gap-2">
+          <input type="range" id="spacing-slider" min="50" max="600" value="200" step="25" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary" />
+          <span id="spacing-value" class="text-xs text-muted-foreground font-medium w-12 text-right">200px</span>
+        </div>
       </div>
     </div>
   </div>

sphinx_visualized/static/js/toctree-graph.js

@@ -86,7 +86,22 @@ window.addEventListener('DOMContentLoaded', async () => {
   // Rows are separated by dx pixels, columns by dy pixels
   const root = d3.hierarchy(window.toctree);
   const dx = 30; // Increased vertical spacing (was 20)
-  const dy = 200; // Increased horizontal spacing for better visibility
+
+  // Load column spacing from localStorage or use default
+  let dy = parseInt(localStorage.getItem('toctree-column-spacing')) || 200;
+
+  // Update the spacing display and slider
+  const updateSpacingDisplay = () => {
+    const spacingValueEl = document.getElementById('spacing-value');
+    const spacingSlider = document.getElementById('spacing-slider');
+    if (spacingValueEl) {
+      spacingValueEl.textContent = `${dy}px`;
+    }
+    if (spacingSlider) {
+      spacingSlider.value = dy;
+    }
+  };
+  updateSpacingDisplay();
 
   // Define the tree layout and the shape for links
   const tree = d3.tree().nodeSize([dx, dy]);
@@ -307,6 +322,15 @@ window.addEventListener('DOMContentLoaded', async () => {
     update(null, root);
   });
 
+  // Column spacing slider control
+  document.getElementById('spacing-slider')?.addEventListener('input', (e) => {
+    dy = parseInt(e.target.value);
+    localStorage.setItem('toctree-column-spacing', dy);
+    tree.nodeSize([dx, dy]);
+    updateSpacingDisplay();
+    update(null, root);
+  });
+
   // Search functionality
   const searchInput = document.getElementById('search');
   if (searchInput) {