Autosize with filter transform and selection creates empty rows and causes marks to "jump around"

[joelostblom]

Bug Description

I see odd behavior when using "autosize": {"resize": true} together with a dropdown and a faceted spec. My expectation would be that only one row would be visible in the spec at a time as I select in the dropdown. Instead, there are empty rows added that contain only the outline of the axis. The marks jump around between these rows although the axis labels stays at the first row. See video below:

altair-ex-2024-03-05_19.31.55.mp4

Open the Chart in the Vega Editor

My expectation would be that there is only one row visible at a time as the dropdown selection changes.

Maybe related #5219

Checklist

• I checked for duplicate issues.

Altair code

import altair as alt
import pandas as pd

source = pd.DataFrame(
    [
        {"a": "a1", "b": "b1", "c": "x", "p": "0.14"},
        {"a": "a1", "b": "b1", "c": "y", "p": "0.60"},
        {"a": "a1", "b": "b1", "c": "z", "p": "0.03"},
        {"a": "a1", "b": "b2", "c": "x", "p": "0.80"},
        {"a": "a1", "b": "b2", "c": "y", "p": "0.38"},
        {"a": "a1", "b": "b2", "c": "z", "p": "0.55"},
        {"a": "a2", "b": "b1", "c": "x", "p": "0.83"},
        {"a": "a2", "b": "b1", "c": "y", "p": "0.87"},
        {"a": "a2", "b": "b1", "c": "z", "p": "0.67"},
        {"a": "a2", "b": "b2", "c": "x", "p": "0.97"},
        {"a": "a2", "b": "b2", "c": "y", "p": "0.84"},
        {"a": "a2", "b": "b2", "c": "z", "p": "0.90"},
        {"a": "a3", "b": "b1", "c": "x", "p": "0.57"},
        {"a": "a3", "b": "b1", "c": "y", "p": "0.35"},
        {"a": "a3", "b": "b1", "c": "z", "p": "0.49"},
        {"a": "a3", "b": "b2", "c": "x", "p": "0.91"},
        {"a": "a3", "b": "b2", "c": "y", "p": "0.38"},
        {"a": "a3", "b": "b2", "c": "z", "p": "0.91"},
    ]
)

dropdown_select = alt.binding_select(options=sorted(source['a'].unique().tolist()), name='Selection ')
dropdown = alt.selection_point(fields=['a'], bind=dropdown_select, value='a3')

alt.Chart(source, width=100, height=alt.Step(15)).mark_bar().encode(
    alt.Y("c:N"),
    alt.X("p:Q"),
    alt.Color("c:N"),
    alt.Row("a:N"),
    alt.Column("b:N"),
).transform_filter(
    dropdown
).add_params(
    dropdown
).configure(
    autosize=alt.AutoSizeParams(resize=True),
)

[joelostblom]

Possibly related to #8675 and #5937?

[PBI-David]

Try this as a temp workaround:

{
  "config": {"autosize": {"resize": true}},
  "data": {"name": "data-c69e60c4b3c263e62f2cf0b96b6c89a7"},
  "mark": {"type": "bar"},
  "encoding": {
    "color": {"field": "c", "type": "nominal"},
    "column": {"field": "b", "type": "nominal"},
    "row": {
      "field": "a",
      "type": "nominal",
      "aggregate": "sum",
      "title": "a",
      "header": {"labelExpr": "param_1_a"}
    },
    "x": {"field": "p", "type": "quantitative"},
    "y": {"field": "c", "type": "nominal"}
  },
  "height": {"step": 15},
  "params": [
    {
      "name": "param_1",
      "select": {"type": "point", "fields": ["a"]},
      "bind": {
        "input": "select",
        "options": ["a1", "a2", "a3"],
        "name": "Selection "
      },
      "value": "a3"
    }
  ],
  "transform": [{"filter": "datum.a == param_1_a"}],
  "width": 100,
  "$schema": "https://vega.github.io/schema/vega-lite/v5.16.3.json",
  "datasets": {
    "data-c69e60c4b3c263e62f2cf0b96b6c89a7": [
      {"a": "a1", "b": "b1", "c": "x", "p": "0.14"},
      {"a": "a1", "b": "b1", "c": "y", "p": "0.60"},
      {"a": "a1", "b": "b1", "c": "z", "p": "0.03"},
      {"a": "a1", "b": "b2", "c": "x", "p": "0.80"},
      {"a": "a1", "b": "b2", "c": "y", "p": "0.38"},
      {"a": "a1", "b": "b2", "c": "z", "p": "0.55"},
      {"a": "a2", "b": "b1", "c": "x", "p": "0.83"},
      {"a": "a2", "b": "b1", "c": "y", "p": "0.87"},
      {"a": "a2", "b": "b1", "c": "z", "p": "0.67"},
      {"a": "a2", "b": "b2", "c": "x", "p": "0.97"},
      {"a": "a2", "b": "b2", "c": "y", "p": "0.84"},
      {"a": "a2", "b": "b2", "c": "z", "p": "0.90"},
      {"a": "a3", "b": "b1", "c": "x", "p": "0.57"},
      {"a": "a3", "b": "b1", "c": "y", "p": "0.35"},
      {"a": "a3", "b": "b1", "c": "z", "p": "0.49"},
      {"a": "a3", "b": "b2", "c": "x", "p": "0.91"},
      {"a": "a3", "b": "b2", "c": "y", "p": "0.38"},
      {"a": "a3", "b": "b2", "c": "z", "p": "0.91"}
    ]
  }
}