revisit naming of parameter views of layered repeated charts

[mattijn]

In this comment: #8348 (comment). It is not really clear how we implemented naming of view in top-level parameters for a layered repeater.

This was partly discussed before here: vega/altair#2684 (comment), and potentially initially implemented in this commit: vega/altair@f547323 (this commit was not merged), but this PR vega/altair#2702 was merged where the actual change is included.

Moreover, the behavior we implemented before does work in this situation (using altair from main branch on github):

import altair as alt
from vega_datasets import data
iris = data.iris.url

alt.Chart(iris).mark_point().encode(
    alt.X(alt.repeat("column"), type='quantitative'),
    alt.Y(alt.repeat("row"), type='quantitative'),
    color='species:N'
).properties(
    width=160,
    height=130
).repeat(
    row=['petalLength', 'petalWidth'],
    column=['sepalLength', 'sepalWidth']
).interactive().to_dict()

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 300
    }
  },
  "params": [
    {
      "bind": "scales",
      "name": "param_20",
      "select": {
        "encodings": [
          "x",
          "y"
        ],
        "type": "interval"
      },
      "views": [
        "view_24child__row_petalLengthcolumn_sepalLength",
        "view_24child__row_petalLengthcolumn_sepalWidth",
        "view_24child__row_petalWidthcolumn_sepalLength",
        "view_24child__row_petalWidthcolumn_sepalWidth"
      ]
    }
  ],
  "repeat": {
    "column": [
      "sepalLength",
      "sepalWidth"
    ],
    "row": [
      "petalLength",
      "petalWidth"
    ]
  },
  "spec": {
    "data": {
      "url": "https://cdn.jsdelivr.net/npm/[email protected]/data/iris.json"
    },
    "encoding": {
      "color": {
        "field": "species",
        "type": "nominal"
      },
      "x": {
        "field": {
          "repeat": "column"
        },
        "type": "quantitative"
      },
      "y": {
        "field": {
          "repeat": "row"
        },
        "type": "quantitative"
      }
    },
    "height": 130,
    "mark": "point",
    "name": "view_24",
    "width": 160
  }
}

But the following specification:

source = alt.UrlData(
    data.flights_2k.url,
    format={'parse': {'date': 'date'}}
)

brush = alt.selection(type='interval', encodings=['x'])

# Define the base chart, with the common parts of the
# background and highlights
base = alt.Chart(source).mark_bar().encode(
    x=alt.X(alt.repeat('column'), type='quantitative', bin=alt.Bin(maxbins=20)),
    y='count()'
).properties(
    width=160,
    height=130
)

# gray background with selection
background = base.encode(
    color=alt.value('#ddd')
).add_params(brush)

# blue highlights on the transformed data
highlight = base.transform_filter(brush)

# layer the two charts & repeat
chart = alt.layer(
    background,
    highlight,
    data=source
).transform_calculate(
    "time",
    "hours(datum.date)"
).repeat(column=["distance", "delay", "time"])

leads to:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 300
    }
  },
  "params": [
    {
      "name": "param_26",
      "select": {
        "encodings": [
          "x"
        ],
        "type": "interval"
      },
      "views": [
        "view_29"
      ]
    }
  ],
  "repeat": {
    "column": [
      "distance",
      "delay",
      "time"
    ]
  },
  "spec": {
    "data": {
      "format": {
        "parse": {
          "date": "date"
        }
      },
      "url": "https://cdn.jsdelivr.net/npm/[email protected]/data/flights-2k.json"
    },
    "height": 130,
    "layer": [
      {
        "encoding": {
          "color": {
            "value": "#ddd"
          },
          "x": {
            "bin": {
              "maxbins": 20
            },
            "field": {
              "repeat": "column"
            },
            "type": "quantitative"
          },
          "y": {
            "aggregate": "count",
            "type": "quantitative"
          }
        },
        "mark": "bar",
        "name": "view_29"
      },
      {
        "encoding": {
          "x": {
            "bin": {
              "maxbins": 20
            },
            "field": {
              "repeat": "column"
            },
            "type": "quantitative"
          },
          "y": {
            "aggregate": "count",
            "type": "quantitative"
          }
        },
        "mark": "bar",
        "transform": [
          {
            "filter": {
              "param": "param_26"
            }
          }
        ]
      }
    ],
    "transform": [
      {
        "as": "time",
        "calculate": "hours(datum.date)"
      }
    ],
    "width": 160
  }
}

Where the vega-lite specification should be defined similar to this Open the Chart in the Vega Editor as is mentioned in this comment

Which contains a params definition as follows:

"params": [
  {
    "name": "brush",
    "select": {"type": "interval", "encodings": ["x"]},
    "views": [
      ["child__column_distance", "layer_0"],
      ["child__column_delay", "layer_0"],
      ["child__column_time", "layer_0"]
    ]
  }
],

Where our definition looks as such:

"params": [
  {
    "name": "param_26",
    "select": {
      "encodings": [
        "x"
      ],
      "type": "interval"
    },
    "views": [
      "view_29"
    ]
  }
]

The views object is different.

We might have missed something here. Maybe this is because the second example contains a layered repeater object, where the first example does not contain a layered repeater.

[mattijn]

Whoops. This was for supposed to be for the Altair repo. Closing.