From 0d4c6185248da9308e42e63e31b8b908d751df6b Mon Sep 17 00:00:00 2001
From: Paddy Mullen <paddy@paddymullen.com>
Date: Mon, 11 Nov 2024 12:21:35 -0500
Subject: [PATCH 1/2] fixes Histograms display without fills intermittently
 #292

---
 js/components/DFViewerParts/HistogramCell.tsx | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/js/components/DFViewerParts/HistogramCell.tsx b/js/components/DFViewerParts/HistogramCell.tsx
index db355050..de76ebae 100644
--- a/js/components/DFViewerParts/HistogramCell.tsx
+++ b/js/components/DFViewerParts/HistogramCell.tsx
@@ -87,6 +87,15 @@ export const HistogramCell = (props: any) => {
     console.log('dumbClickHandler', rechartsArgs);
   };
 
+  const gensym = (base: string) => {
+    const id = `${base}-${crypto.randomUUID()}`;
+    return [id, `url(#${id})`];
+  };
+  const [starId, starUrl] = gensym('star');
+  const [stripeId, stripeUrl] = gensym('stripe');
+  const [circleId, circleUrl] = gensym('circle');
+  const [checkersId, checkersUrl] = gensym('checkers');
+  const [leafsId, leafsUrl] = gensym('leafs');
   const [screenCoords, setScreenCoords] = React.useState<{
     x: number;
     y: number;
@@ -106,7 +115,7 @@ export const HistogramCell = (props: any) => {
       >
         <defs>
           <pattern
-            id="star"
+            id={starId}
             width="10"
             height="10"
             patternUnits="userSpaceOnUse"
@@ -117,7 +126,7 @@ export const HistogramCell = (props: any) => {
             />
           </pattern>
           <pattern
-            id="stripe"
+            id={stripeId}
             width="4"
             height="4"
             patternUnits="userSpaceOnUse"
@@ -126,7 +135,7 @@ export const HistogramCell = (props: any) => {
             <rect width="2" height="4" fill="red" />
           </pattern>
           <pattern
-            id="circles"
+            id={circleId}
             width="4"
             height="4"
             patternUnits="userSpaceOnUse"
@@ -141,7 +150,7 @@ export const HistogramCell = (props: any) => {
           </pattern>
 
           <pattern
-            id="checkers"
+            id={checkersId}
             x="0"
             y="0"
             width="4"
@@ -153,7 +162,7 @@ export const HistogramCell = (props: any) => {
           </pattern>
 
           <pattern
-            id="leafs"
+            id={leafsId}
             x="0"
             y="0"
             width="6"
@@ -172,25 +181,16 @@ export const HistogramCell = (props: any) => {
         <Bar dataKey="tail" stroke="#000" fill="gray" stackId="stack" />
         <Bar dataKey="true" stroke="#00f" fill="#00f" stackId="stack" />
         <Bar dataKey="false" stroke="#000" fill="#fff" stackId="stack" />
-        <Bar
-          dataKey="cat_pop"
-          stroke="pink"
-          fill="url(#circles)"
-          stackId="stack"
-        />
+        <Bar dataKey="cat_pop" stroke="pink" fill={circleUrl} stackId="stack" />
         <Bar
           dataKey="unique"
           stroke="#0f0"
-          fill="url(#checkers)"
-          stackId="stack"
-        />
-        <Bar
-          dataKey="longtail"
-          stroke="teal"
-          fill="url(#leafs)"
+          fill={checkersUrl}
           stackId="stack"
         />
-        <Bar dataKey="NA" fill="url(#stripe)" stackId="stack" />
+        <Bar dataKey="longtail" stroke="teal" fill={leafsUrl} stackId="stack" />
+        <Bar dataKey="user1" stroke="teal" fill={starUrl} stackId="stack" />
+        <Bar dataKey="NA" fill={stripeUrl} stackId="stack" />
         <Tooltip
           formatter={formatter}
           allowEscapeViewBox={{ x: true, y: true }}

From 75160346e22517d88ffdab3aa43f38735bbb9720 Mon Sep 17 00:00:00 2001
From: Paddy Mullen <paddy@paddymullen.com>
Date: Mon, 11 Nov 2024 12:26:13 -0500
Subject: [PATCH 2/2] added an explanatory comment linking back to the original
 bug

---
 js/components/DFViewerParts/HistogramCell.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/components/DFViewerParts/HistogramCell.tsx b/js/components/DFViewerParts/HistogramCell.tsx
index de76ebae..7e768f00 100644
--- a/js/components/DFViewerParts/HistogramCell.tsx
+++ b/js/components/DFViewerParts/HistogramCell.tsx
@@ -87,6 +87,8 @@ export const HistogramCell = (props: any) => {
     console.log('dumbClickHandler', rechartsArgs);
   };
 
+  // used to prevent duplicate IDs which lead to a nasty bug where patterns aren't applied
+  // https://github.com/paddymul/buckaroo/issues/292
   const gensym = (base: string) => {
     const id = `${base}-${crypto.randomUUID()}`;
     return [id, `url(#${id})`];