Legend text

Author: cmdcolin

plugins/wiggle/src/MultiLinearWiggleDisplay/components/ColorLegend.tsx

@@ -1,6 +1,7 @@
 import { observer } from 'mobx-react'
 
 import LegendItem from './LegendItem'
+import LegendItemText from './LegendItemText'
 import RectBg from './RectBg'
 
 import type { WiggleDisplayModel } from '../model'
@@ -41,6 +42,7 @@ const ColorLegend = observer(function ({
           />
         ) : null
       }
+      {/* Render all background rectangles first */}
       {sources.map((source, idx) => (
         <LegendItem
           key={`${source.name}-${idx}`}
@@ -52,6 +54,17 @@ const ColorLegend = observer(function ({
           labelWidth={labelWidth}
         />
       ))}
+      {/* Then render all text elements on top */}
+      {sources.map((source, idx) => (
+        <LegendItemText
+          key={`${source.name}-text-${idx}`}
+          source={source}
+          idx={idx}
+          model={model}
+          rowHeight={rowHeight}
+          exportSVG={exportSVG}
+        />
+      ))}
     </>
   ) : null
 })

plugins/wiggle/src/MultiLinearWiggleDisplay/components/LegendItem.tsx

@@ -26,23 +26,29 @@ const LegendItem = function ({
     rowHeightTooSmallForScalebar,
     renderColorBoxes,
   } = model
-  const svgFontSize = Math.min(rowHeight, 12)
-  const canDisplayLabel = rowHeight >= 6
   const colorBoxWidth = renderColorBoxes ? 15 : 0
   const legendWidth = labelWidth + colorBoxWidth + 5
   const svgOffset = exportSVG ? 10 : 0
   const extraOffset =
     svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0)
   return (
     <>
-      {canDisplayLabel ? (
-        <text
-          y={idx * rowHeight + 13}
-          x={extraOffset + colorBoxWidth + 2}
-          fontSize={svgFontSize}
-        >
-          {source.name}
-        </text>
+      {needsFullHeightScalebar ? null : (
+        <RectBg
+          y={idx * rowHeight + 1}
+          x={extraOffset}
+          width={legendWidth}
+          height={boxHeight}
+        />
+      )}
+      {source.color ? (
+        <RectBg
+          y={idx * rowHeight + 1}
+          x={extraOffset}
+          width={colorBoxWidth}
+          height={needsCustomLegend ? rowHeight : boxHeight}
+          color={source.color}
+        />
       ) : null}
     </>
   )

plugins/wiggle/src/MultiLinearWiggleDisplay/components/LegendItemText.tsx

@@ -0,0 +1,36 @@
+import type { Source } from '../../util'
+import type { WiggleDisplayModel } from '../model'
+
+const LegendItemText = function ({
+  source,
+  idx,
+  rowHeight,
+  model,
+  exportSVG,
+}: {
+  source: Source
+  idx: number
+  rowHeight: number
+  model: WiggleDisplayModel
+  exportSVG?: boolean
+}) {
+  const { graphType, rowHeightTooSmallForScalebar, renderColorBoxes } = model
+  const svgFontSize = Math.min(rowHeight, 12)
+  const canDisplayLabel = rowHeight >= 6
+  const colorBoxWidth = renderColorBoxes ? 15 : 0
+  const svgOffset = exportSVG ? 10 : 0
+  const extraOffset =
+    svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0)
+
+  return canDisplayLabel ? (
+    <text
+      y={idx * rowHeight + 13}
+      x={extraOffset + colorBoxWidth + 2}
+      fontSize={svgFontSize}
+    >
+      {source.name}
+    </text>
+  ) : null
+}
+
+export default LegendItemText

plugins/wiggle/src/MultiLinearWiggleDisplay/components/WiggleClusterDialog/WiggleClusterDialogAuto.tsx

@@ -123,13 +123,25 @@ const WiggleClusterDialogAuto = observer(function ({
                   },
                 )) as { order: number[] }
 
+                // Preserve color and other layout customizations
+                const currentLayout = model.layout.length
+                  ? model.layout
+                  : sourcesWithoutLayout
+                const sourcesByName = Object.fromEntries(
+                  currentLayout.map(s => [s.name, s]),
+                )
+
                 model.setLayout(
                   ret.order.map(idx => {
-                    const ret = sourcesWithoutLayout[idx]
-                    if (!ret) {
+                    const sourceItem = sourcesWithoutLayout[idx]
+                    if (!sourceItem) {
                       throw new Error(`out of bounds at ${idx}`)
                     }
-                    return ret
+                    // Preserve customizations from current layout
+                    return {
+                      ...sourceItem,
+                      ...sourcesByName[sourceItem.name],
+                    }
                   }),
                 )
               }

plugins/wiggle/src/MultiLinearWiggleDisplay/components/WiggleClusterDialog/WiggleClusterDialogManual.tsx

@@ -261,18 +261,30 @@ cat(resultClusters$order,sep='\n')`
             const { sourcesWithoutLayout } = model
             if (sourcesWithoutLayout) {
               try {
+                // Preserve color and other layout customizations
+                const currentLayout = model.layout.length
+                  ? model.layout
+                  : sourcesWithoutLayout
+                const sourcesByName = Object.fromEntries(
+                  currentLayout.map(s => [s.name, s]),
+                )
+
                 model.setLayout(
                   paste
                     .split('\n')
                     .map(t => t.trim())
                     .filter(f => !!f)
                     .map(r => +r)
                     .map(idx => {
-                      const ret = sourcesWithoutLayout[idx - 1]
-                      if (!ret) {
+                      const sourceItem = sourcesWithoutLayout[idx - 1]
+                      if (!sourceItem) {
                         throw new Error(`out of bounds at ${idx}`)
                       }
-                      return ret
+                      // Preserve customizations from current layout
+                      return {
+                        ...sourceItem,
+                        ...sourcesByName[sourceItem.name],
+                      }
                     }),
                 )
               } catch (e) {