give background to cluster labels

enjalot · Dec 15, 2024 · 9b70b39 · 9b70b39
1 parent ca3ec61
commit 9b70b39
Showing 1 changed file with 50 additions and 0 deletions.
diff --git a/web/src/components/HullPlot.jsx b/web/src/components/HullPlot.jsx
@@ -186,6 +186,55 @@ const HullPlot = ({
 
     labelSel.exit().remove();
 
+    // Add background rectangles for labels
+    let labelBgSel = svg.selectAll('rect.hull-label-bg').data(hulls);
+
+    labelBgSel.exit().remove();
+
+    if (label) {
+      // Add this helper function to calculate text width
+      const calculateTextWidth = (text, fontSize) => {
+        // Approximate width per character (assuming monospace font)
+        const charWidth = fontSize * 0.6; // Monospace fonts are typically ~60% as wide as they are tall
+        return text.length * charWidth + 2 * fontSize; // Add padding of 1 character width on each side
+      };
+
+      // Then modify the label background rect code to use this function
+      labelBgSel
+        .enter()
+        .append('rect')
+        .attr('class', 'hull-label-bg')
+        .merge(labelBgSel)
+        .attr('fill', 'white')
+        .attr('rx', 3)
+        .attr('ry', 3)
+        .attr('opacity', 0.85)
+        .attr('x', (d) => {
+          const centroid = hullToSvgCoordinate(
+            calculateCentroid(d),
+            xDomain,
+            yDomain,
+            width,
+            height
+          );
+          const fontSize = calculateScaledFontSize(width, height);
+          const textWidth = calculateTextWidth(labelToShow, fontSize);
+          return centroid.x - textWidth / 2; // Center the background
+        })
+        .attr('y', (d) => {
+          const highest = hullToSvgCoordinate(findHighestPoint(d), xDomain, yDomain, width, height);
+          return highest.y - 20; // Position above the highest point
+        })
+        .attr('width', (d) => {
+          const fontSize = calculateScaledFontSize(width, height);
+          return calculateTextWidth(labelToShow, fontSize);
+        })
+        .attr('height', (d) => {
+          const fontSize = calculateScaledFontSize(width, height);
+          return fontSize * 2; // Make height 1.5 times the font size for proper padding
+        });
+    }
+
     if (label) {
       labelSel
         .enter()
@@ -203,6 +252,7 @@ const HullPlot = ({
         )
         .attr('text-anchor', 'middle')
         .attr('fill', textColor)
+        .attr('font-family', 'monospace')
         .attr('alignment-baseline', 'auto')
         .attr('font-size', calculateScaledFontSize(width, height))
         .text(label.label);