From 39cf0ee327ff839967adf3dde20fba29aeeea55b Mon Sep 17 00:00:00 2001
From: Dominik Haentsch <dominik.haentsch@gmail.com>
Date: Mon, 19 Feb 2024 14:28:55 +0100
Subject: [PATCH] set fill for text in bbox title

---
 src/lenses/BoundingBoxLens/BBox.tsx  | 13 ++++++++-----
 src/lenses/BoundingBoxLens/index.tsx |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/lenses/BoundingBoxLens/BBox.tsx b/src/lenses/BoundingBoxLens/BBox.tsx
index b92c8b15..732ce9fc 100644
--- a/src/lenses/BoundingBoxLens/BBox.tsx
+++ b/src/lenses/BoundingBoxLens/BBox.tsx
@@ -6,7 +6,7 @@ interface BBoxProps {
     y: number;
     width: number;
     height: number;
-    color: string;
+    color: chroma.Color;
     label: string;
 }
 
@@ -17,6 +17,9 @@ const BBox = ({ x, y, width, height, color, label }: BBoxProps) => {
     const textColor =
         chroma.contrast(color, WHITE) > chroma.contrast(color, BLACK) ? WHITE : BLACK;
 
+    const colorCss = color.css();
+    const textColorCss = textColor.css();
+
     return (
         <g>
             <rect
@@ -25,7 +28,7 @@ const BBox = ({ x, y, width, height, color, label }: BBoxProps) => {
                 width={width}
                 height={height}
                 fill="none"
-                stroke={color}
+                stroke={colorCss}
                 strokeWidth={2}
             ></rect>
             <rect
@@ -33,11 +36,11 @@ const BBox = ({ x, y, width, height, color, label }: BBoxProps) => {
                 y={y - 11}
                 width={width}
                 height={12}
-                fill={color}
-                stroke={color}
+                fill={colorCss}
+                stroke={colorCss}
                 strokeWidth={2}
             ></rect>
-            <text x={x} y={y} fontSize={12} stroke={textColor.hex()}>
+            <text x={x} y={y} fontSize={12} stroke={textColorCss} fill={textColorCss}>
                 {label}
             </text>
         </g>
diff --git a/src/lenses/BoundingBoxLens/index.tsx b/src/lenses/BoundingBoxLens/index.tsx
index fb2a1291..feef1f0b 100644
--- a/src/lenses/BoundingBoxLens/index.tsx
+++ b/src/lenses/BoundingBoxLens/index.tsx
@@ -117,7 +117,7 @@ const BoundingBoxLens: Lens = ({ urls, values, columns }) => {
                         height={(box[3] - box[1]) * renderedHeight}
                         x={box[0] * renderedWidth + offsetWidth}
                         y={box[1] * renderedHeight + offsetHeight}
-                        color={colorTransferFunction(categories[index]).hex()}
+                        color={colorTransferFunction(categories[index])}
                         label={
                             categoricalDtype?.invertedCategories[categories[index]] ??
                             ''