set fill for text in bbox title

Renumics · Feb 19, 2024 · 39cf0ee · 39cf0ee
1 parent 290448d
commit 39cf0ee
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git 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,19 +28,19 @@ const BBox = ({ x, y, width, height, color, label }: BBoxProps) => {
                 width={width}
                 height={height}
                 fill="none"
-                stroke={color}
+                stroke={colorCss}
                 strokeWidth={2}
             ></rect>
             <rect
                 x={x}
                 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
@@ -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]] ??
                             ''