fix: align vertical set bars with matrix columns

- Add explicit X-axis encoding to set bars to match matrix encoding
- Change set_bar_chart width from full width to matrix_width
- Create spacer element for top-right area to align cardinality bars
- Restructure layout with hconcat for top and bottom rows
- Bars now align horizontally with corresponding matrix columns

Author: edmundmiller

altair_upset/components.py

@@ -145,6 +145,7 @@ def create_vertical_set_bars(
         x=alt.X(
             "set_order:N",
             axis=alt.Axis(grid=False, labels=False, ticks=False, domain=False),
+            scale=alt.Scale(paddingInner=0, paddingOuter=0),
             title=None,
         ),
         color=alt.Color(
@@ -162,12 +163,24 @@ def create_vertical_set_bars(
         set_label_bg.mark_bar(size=set_bar_size, color=main_color)
         .transform_filter(alt.datum["is_intersect"] == 1)
         .encode(
+            x=alt.X(
+                "set_order:N",
+                axis=alt.Axis(grid=False, labels=False, ticks=False, domain=False),
+                scale=alt.Scale(paddingInner=0, paddingOuter=0),
+                title=None,
+            ),
             y=alt.Y(
                 "sum(count):Q",
-                axis=alt.Axis(grid=False, tickCount=3, domain=False),
+                axis=alt.Axis(
+                    grid=False,
+                    tickCount=3,
+                    domain=False,
+                    offset=0,
+                    titlePadding=5,
+                ),
                 scale=alt.Scale(zero=True, padding=0, nice=False),
                 title="Set Size",
-            )
+            ),
         )
     )
 
@@ -191,12 +204,14 @@ def create_vertical_matrix(
         x=alt.X(
             "set_order:N",
             axis=alt.Axis(grid=False, labels=False, ticks=False, domain=False),
+            scale=alt.Scale(paddingInner=0, paddingOuter=0),
             title=None,
         ),
         y=alt.Y(
             "intersection_id:N",
             axis=alt.Axis(grid=False, labels=False, ticks=False, domain=False),
             sort=y_sort,
+            scale=alt.Scale(paddingInner=0, paddingOuter=0),
             title=None,
         ),
         color=alt.value("#E6E6E6"),
@@ -217,9 +232,15 @@ def create_vertical_matrix(
         base.mark_bar(size=line_connection_size, color=main_color)
         .transform_filter(alt.datum["is_intersect"] == 1)
         .encode(
-            x=alt.X("min(set_order):N"),
+            x=alt.X(
+                "min(set_order):N", scale=alt.Scale(paddingInner=0, paddingOuter=0)
+            ),
             x2=alt.X2("max(set_order):N"),
-            y=alt.Y("intersection_id:N", sort=y_sort),
+            y=alt.Y(
+                "intersection_id:N",
+                sort=y_sort,
+                scale=alt.Scale(paddingInner=0, paddingOuter=0),
+            ),
         )
     )
 
@@ -248,11 +269,14 @@ def create_horizontal_cardinality_bar(
             "intersection_id:N",
             axis=alt.Axis(grid=False, labels=False, ticks=False, domain=True),
             sort=y_sort,
+            scale=alt.Scale(paddingInner=0, paddingOuter=0),
             title=None,
         ),
         x=alt.X(
             "max(count):Q",
-            axis=alt.Axis(grid=False, tickCount=3, orient=x_axis_orient),
+            axis=alt.Axis(
+                grid=False, tickCount=3, orient=x_axis_orient, offset=0, titlePadding=5
+            ),
             scale=alt.Scale(zero=True, padding=0, nice=False),
             title="Intersection Size",
         ),

altair_upset/config.py

@@ -2,7 +2,7 @@ def upsetaltair_top_level_configuration(
     base, legend_orient="top-left", legend_symbol_size=30
 ):
     return (
-        base.configure_view(stroke=None)
+        base.configure_view(stroke=None, continuousHeight=300, continuousWidth=400)
         .configure_title(
             fontSize=18, fontWeight=400, anchor="start", subtitlePadding=10
         )

altair_upset/upset.py

@@ -603,7 +603,7 @@ def UpSetVertical(
     )
 
     set_bar_chart = (set_label_bg + set_label + set_bar).properties(
-        width=width, height=set_bar_height
+        width=matrix_width, height=set_bar_height
     )
 
     circle_bg, rect_bg, circle, line_connection = create_vertical_matrix(
@@ -642,10 +642,22 @@ def UpSetVertical(
         .properties(width=cardinality_bar_width, height=matrix_height)
     )
 
+    # Create empty spacer for top-right area
+    spacer = (
+        alt.Chart(pd.DataFrame({"x": [0]}))
+        .mark_text()
+        .encode(text=alt.value(""))
+        .properties(width=cardinality_bar_width, height=set_bar_height)
+    )
+
     # Combine components vertically with cardinality bars
     upsetaltair = (
         alt.vconcat(
-            set_bar_chart.properties(width=width),
+            alt.hconcat(
+                set_bar_chart,
+                spacer,
+                spacing=0,
+            ).resolve_scale(x="shared"),
             alt.hconcat(
                 matrix_view,
                 cardinality_bar_chart,
@@ -668,7 +680,8 @@ def UpSetVertical(
             "fontWeight": 500,
             "subtitleColor": main_color,
             "subtitleFontSize": 14,
-        }
+        },
+        autosize=alt.AutoSizeParams(type="fit", resize=False, contains="padding"),
     )
 
     return UpSetChart(chart, data, sets)