From 1e241744b6e448f4fcd2cb1acdc3f41503527cce Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Fri, 22 Jul 2022 13:05:29 -0600
Subject: [PATCH] Add solid bg for text area in legend

---
 .../components/WiggleDisplayComponent.tsx     | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx
index 13b5b7417f..92b60b14bb 100644
--- a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx
+++ b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx
@@ -101,31 +101,41 @@ const ColorLegend = observer(
     const {
       needsCustomLegend,
       needsScalebar,
+      needsFullHeightScalebar,
       rowHeightTooSmallForScalebar,
       renderColorBoxes,
       sources,
     } = model
     const svgFontSize = Math.min(rowHeight, 12)
     const canDisplayLabel = rowHeight > 11
-
+    const colorBoxWidth = renderColorBoxes ? 15 : 0
+    const legendWidth = labelWidth + colorBoxWidth + 5
+    const extraOffset = needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0
     return sources ? (
       <>
+        {
+          /* 0.25 for hanging letters like g */
+          needsFullHeightScalebar ? (
+            <RectBg
+              y={0}
+              x={extraOffset}
+              width={legendWidth}
+              height={(sources.length + 0.25) * rowHeight}
+            />
+          ) : null
+        }
         {sources.map((source, idx) => {
-          // put the subtrack labels to the right of the scalebar
-          const extraOffset =
-            needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0
-          const colorBoxWidth = renderColorBoxes ? 15 : 0
-          const legendWidth = labelWidth + colorBoxWidth + 5
           const boxHeight = Math.min(20, rowHeight)
-
           return (
             <React.Fragment key={source.name + '-' + idx}>
-              <RectBg
-                y={idx * rowHeight + 1}
-                x={extraOffset}
-                width={legendWidth}
-                height={boxHeight}
-              />
+              {!needsFullHeightScalebar ? (
+                <RectBg
+                  y={idx * rowHeight + 1}
+                  x={extraOffset}
+                  width={legendWidth}
+                  height={boxHeight}
+                />
+              ) : null}
               {source.color ? (
                 <RectBg
                   y={idx * rowHeight + 1}