Bar chart tooltip

Author: diegochine

client/app.css

@@ -1197,3 +1197,15 @@
   max-width: var(--UI-Spacing-spacing-xxxl) !important;
   margin-right: var(--UI-Spacing-spacing-s) !important;
 }
+
+/* ===== BAR CHART TOOLTIP ===== */
+
+.pl-bar-chart-tooltip {
+  padding: var(--UI-Spacing-spacing-s) var(--UI-Spacing-spacing-ml);
+  font-family: var(--body-family);
+  font-size: var(--UI-Typography-body-small-size);
+  line-height: var(--UI-Typography-body-small-line-height);
+  color: var(--Colors-Text-Body-Default);
+  white-space: nowrap;
+  max-width: none;
+}

client/src/probability-lab/ui/charts/bar-chart.js

@@ -2,9 +2,9 @@
 import withCanvas2d from './canvas.js';
 import { getCssVar } from './colors.js';
 import { clamp } from '../../../shared/math.js';
-import { formatProbability } from '../../../shared/format.js';
+import { formatProbability, formatCount } from '../../../shared/format.js';
 
-export default function drawBarChart(canvas, labels, values, theory) {
+export default function drawBarChart(canvas, labels, values, theory, counts = [], trials = 0) {
   const primary = getCssVar('--Colors-Base-Primary-600', '#377DFF');
   const grid = getCssVar('--Colors-Stroke-Default', '#DDE0EA');
   const text = getCssVar('--Colors-Text-Body-Medium', '#66718F');
@@ -99,3 +99,108 @@ export default function drawBarChart(canvas, labels, values, theory) {
     }
   });
 }
+
+// Store cleanup function for event listeners
+let hoverCleanup = null;
+
+export function setupBarChartHover(canvas, labels, counts, trials) {
+  // Clean up previous listeners if they exist
+  if (hoverCleanup) {
+    hoverCleanup();
+    hoverCleanup = null;
+  }
+
+  // Get or create tooltip element
+  let tooltip = document.querySelector('.pl-bar-chart-tooltip');
+  if (!tooltip) {
+    tooltip = document.createElement('div');
+    tooltip.className = 'pl-bar-chart-tooltip box card';
+    tooltip.style.display = 'none';
+    tooltip.style.position = 'absolute';
+    tooltip.style.pointerEvents = 'none';
+    tooltip.style.zIndex = '1000';
+    document.body.appendChild(tooltip);
+  }
+
+  const padding = { top: 14, right: 12, bottom: 34, left: 44 };
+  const tooltipOffset = 10; // Offset from cursor
+
+  function handleMouseMove(event) {
+    if (trials === 0 || labels.length === 0) {
+      tooltip.style.display = 'none';
+      return;
+    }
+
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const w = rect.width;
+    const h = rect.height;
+    const plotW = Math.max(1, w - padding.left - padding.right);
+    const plotH = Math.max(1, h - padding.top - padding.bottom);
+
+    // Check if mouse is within plot area
+    if (x < padding.left || x > padding.left + plotW || y < padding.top || y > padding.top + plotH) {
+      tooltip.style.display = 'none';
+      return;
+    }
+
+    // Calculate which bar slot the mouse is over
+    const gap = labels.length > 1 ? Math.min(14, plotW / (labels.length * 2)) : 0;
+    const slotW = (plotW - gap * (labels.length - 1)) / labels.length;
+    const relativeX = x - padding.left;
+    const barIndex = Math.floor(relativeX / (slotW + gap));
+
+    // Check if mouse is over a valid bar
+    if (barIndex < 0 || barIndex >= labels.length) {
+      tooltip.style.display = 'none';
+      return;
+    }
+
+    // Check if mouse is within the bar slot bounds
+    const slotX = padding.left + barIndex * (slotW + gap);
+    if (x < slotX || x > slotX + slotW) {
+      tooltip.style.display = 'none';
+      return;
+    }
+
+    // Get data for this bar
+    const count = counts[barIndex] ?? 0;
+    const label = labels[barIndex];
+    const probability = trials > 0 ? count / trials : 0;
+
+    // Format tooltip content
+    const tooltipText = `P(${label}) = ${formatCount(count)} / ${formatCount(trials)} = ${formatProbability(probability, 2)}`;
+    tooltip.textContent = tooltipText;
+
+    // Position tooltip near cursor
+    tooltip.style.display = 'block';
+    tooltip.style.left = `${event.clientX + tooltipOffset}px`;
+    tooltip.style.top = `${event.clientY + tooltipOffset}px`;
+
+    // Adjust if tooltip goes off screen
+    requestAnimationFrame(() => {
+      const tooltipRect = tooltip.getBoundingClientRect();
+      if (tooltipRect.right > window.innerWidth) {
+        tooltip.style.left = `${event.clientX - tooltipRect.width - tooltipOffset}px`;
+      }
+      if (tooltipRect.bottom > window.innerHeight) {
+        tooltip.style.top = `${event.clientY - tooltipRect.height - tooltipOffset}px`;
+      }
+    });
+  }
+
+  function handleMouseLeave() {
+    tooltip.style.display = 'none';
+  }
+
+  canvas.addEventListener('mousemove', handleMouseMove);
+  canvas.addEventListener('mouseleave', handleMouseLeave);
+
+  // Store cleanup function
+  hoverCleanup = () => {
+    canvas.removeEventListener('mousemove', handleMouseMove);
+    canvas.removeEventListener('mouseleave', handleMouseLeave);
+  };
+}

client/src/probability-lab/ui/render-single.js

@@ -1,5 +1,5 @@
 // Single-mode rendering
-import drawBarChart from './charts/bar-chart.js';
+import drawBarChart, { setupBarChartHover } from './charts/bar-chart.js';
 import drawLineChart from './charts/line-chart.js';
 import { buildFrequencyTableHtml } from './tables.js';
 import { updateDeviceViewSingle } from './device-view.js';
@@ -71,7 +71,8 @@ export default function renderSingle(els, state) {
   // TODO: add nice die animation, e.g. https://github.com/3d-dice/dice-box
 
   const rel = state.single.trials === 0 ? def.labels.map(() => 0) : state.single.counts.map((c) => c / state.single.trials);
-  drawBarChart(els.barChart, def.labels, rel, def.probabilities);
+  drawBarChart(els.barChart, def.labels, rel, def.probabilities, state.single.counts, state.single.trials);
+  setupBarChartHover(els.barChart, def.labels, state.single.counts, state.single.trials);
 
   const historyTrials = state.single.history.map((p) => p.trials);
   const historyEst = state.single.history.map((p) => Array.from(selectedIndices).reduce((acc, idx) => acc + (p.rel[idx] ?? 0), 0));