space out barplots correctly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: soham-chitnis10

client/src/components/Barplot.jsx

@@ -5,7 +5,7 @@ const MARGIN = { top: 16, right: 48, bottom: 8, left: 160 };
 const MIN_WIDTH = 220;
 const MIN_HEIGHT = 240;
 const MAX_BANDWIDTH = 20;
-const BAND_PADDING = 0.1;
+const BAND_PADDING = 0.2;
 
 /**
  * React wrapper around the original D3 barplot from client/js/main.js (barplot_new).
@@ -65,23 +65,29 @@ export default function Barplot({ data, onTickClick, disabled }) {
       .attr("width", outerW)
       .attr("height", outerH);
 
-    const idealRange = (MAX_BANDWIDTH * plotData.length) / (1 - BAND_PADDING);
-    const rangeHeight = Math.min(height, idealRange);
-    const yOffset = Math.max(0, (height - rangeHeight) / 2);
+    // Fill the full height. If bandwidth would exceed MAX_BANDWIDTH, increase
+    // padding instead of shrinking the range — bars stay capped, gaps absorb
+    // the extra space.
+    const n = plotData.length;
+    const naturalBandwidth = (height / (n + BAND_PADDING)) * (1 - BAND_PADDING);
+    const bandPadding =
+      naturalBandwidth > MAX_BANDWIDTH
+        ? (height - MAX_BANDWIDTH * n) / (height + MAX_BANDWIDTH)
+        : BAND_PADDING;
 
     const svg = d3
       .select(svgEl)
       .append("g")
-      .attr("transform", `translate(${MARGIN.left},${MARGIN.top + yOffset})`)
+      .attr("transform", `translate(${MARGIN.left},${MARGIN.top})`)
       .attr("fill", "white");
 
     const xMax = d3.max(plotData, (d) => d.prob) || 1;
     const xScale = d3.scaleLinear().domain([0, xMax]).range([0, width]);
     const yScale = d3
       .scaleBand()
       .domain(plotData.map((d) => d.text))
-      .range([0, rangeHeight])
-      .padding(BAND_PADDING);
+      .range([0, height])
+      .padding(bandPadding);
 
     const yAxis = svg.append("g").call(d3.axisLeft(yScale));
     const tickFontSize = Math.min(15, Math.max(5, yScale.bandwidth() * 0.9));