diff --git a/packages/upset/src/components/Columns/SizeBar.tsx b/packages/upset/src/components/Columns/SizeBar.tsx index 132ec381..f2413b3e 100644 --- a/packages/upset/src/components/Columns/SizeBar.tsx +++ b/packages/upset/src/components/Columns/SizeBar.tsx @@ -38,6 +38,8 @@ type Rect = { width: number; /** Hex fill color */ fillColor: string; + /** Opacity of the bar, 0-1 */ + opacity: number; } const colors = ['rgb(189, 189, 189)', 'rgb(136, 136, 136)', 'rgb(37, 37, 37)']; @@ -51,6 +53,9 @@ export const SizeBar: FC = ({ row, size, selected }) => { const nextColor = useRecoilValue(nextColorSelector); const elementSelectionColor = useRecoilValue(elementColorSelector); + // Opacity for the selection color + const SELECTION_OPACITY = .6; + /** * Darkens a size bar color according to its nesting index. * Used to darken the interior size bars when more than one size bar is necessary. @@ -125,7 +130,8 @@ export const SizeBar: FC = ({ row, size, selected }) => { transform: translate(0, (i * OFFSET) / 2), height: dimensions.size.plotHeight - i * OFFSET, width: dimensions.attribute.width, - fillColor: i < fullSelectBars ? darkenColor(i, elementSelectionColor) : getFillColor(i) + fillColor: i < fullSelectBars ? darkenColor(i, elementSelectionColor) : getFillColor(i), + opacity: i < fullSelectBars ? SELECTION_OPACITY : 1, }) // Partial standard bar else if (i === fullBars) @@ -134,6 +140,7 @@ export const SizeBar: FC = ({ row, size, selected }) => { height: dimensions.size.plotHeight - fullBars * OFFSET, width: scale(rem), fillColor: getFillColor(fullBars), + opacity: 1, }); // Partial element selection bar if (i === fullSelectBars) @@ -142,6 +149,7 @@ export const SizeBar: FC = ({ row, size, selected }) => { height: dimensions.size.plotHeight - fullSelectBars * OFFSET, width: selectedWidth, fillColor: darkenColor(fullSelectBars, elementSelectionColor), + opacity: SELECTION_OPACITY, }); } @@ -161,6 +169,7 @@ export const SizeBar: FC = ({ row, size, selected }) => { width={rect.width} height={rect.height} fill={rect.fillColor} + fillOpacity={rect.opacity} /> ))} {fullSelectBars < 3 && selected > 0 && (<>