Bug: Altair charts with VConcat and HConcat broken on st v1.42 onwards #13410
Description
Checklist
- I have searched the existing issues for similar issues.
- I added a very descriptive title to this issue.
- I have provided sufficient information below to help reproduce this issue.
Summary
Altair charts that contain both HConcat and Vconcat elements (as featured in streamlit release demos) appear to be broken in streamlit 1.42 and above.
The issue seems to occur for any chart of the form alt.vconcat(chart, alt.hconcat(chart, chart )), or equivalently chart & (chart | chart ). No python error is raised, but the rendered element is empty.
An common example is a plot with marginal histograms, for example as featured in the Altair gallery here. This plot is was also featured in a previous set of streamlit's own release notes.
I've boiled down a minimal reproducible version below. The example linked above can also be used to reproduce the issue.
Reproducible Code Example
import altair as alt
import streamlit as st
import pandas as pd
from numpy.random import default_rng
df = pd.DataFrame(default_rng(0).standard_normal((60, 2)), columns=["a", "b"])
base = alt.Chart(df).mark_circle().encode(x="a", y="b").properties(width=200, height=200)
chart = base & (base | base)
st.altair_chart(chart)Steps To Reproduce
Execute the example with streamlit >= 1.42
Expected Behavior
The chart should render, looking something like this:
Current Behavior
An empty altair element appears.
No errors or warnings are shown in the streamlit terminal output
In the browser console (F12), I see these two warnings:
WARN Infinite extent for field "a": [Infinity, -Infinity]
WARN Infinite extent for field "b": [Infinity, -Infinity]
Is this a regression?
- Yes, this used to work in a previous version.
Debug info
I was able to reproduce the issue streamlit versions 1.42 and after, up to 1.52. The error does not occur on versions 1.41 and earlier.
- Tested on both Altair 4.2.2 and 5.5.0
- Python version: 3.10
- Operating System: Linux
- Browser: Chrome
Additional Information
As an initial debugging effort, here is the compiled Vega as generated by the streamlit widget:
Compiled vega for st 1.41
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": {"type": "pad", "contains": "padding"},
"background": "#ffffff",
"padding": {"bottom": 20},
"data": [
{"name": "cf025101d9247e0e7131c4174bb7b974"},
{
"name": "data_0",
"source": "cf025101d9247e0e7131c4174bb7b974",
"transform": [
{
"type": "filter",
"expr": "isValid(datum[\"a\"]) && isFinite(+datum[\"a\"]) && isValid(datum[\"b\"]) && isFinite(+datum[\"b\"])"
}
]
}
],
"signals": [
{"name": "childHeight", "value": 200},
{"name": "concat_0_width", "value": 200},
{"name": "concat_1_childWidth", "value": 200}
],
"layout": {"padding": 20, "columns": 1, "bounds": "full", "align": "each"},
"marks": [
{
"type": "group",
"name": "concat_0_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "concat_0_width"},
"height": {"signal": "childHeight"}
}
},
"marks": [
{
"name": "concat_0_marks",
"type": "symbol",
"style": ["circle"],
"from": {"data": "data_0"},
"encode": {
"update": {
"opacity": {"value": 0.7},
"fill": {"value": "#0068c9"},
"tooltip": {
"signal": "{\"a\": format(datum[\"a\"], \"\"), \"b\": format(datum[\"b\"], \"\")}"
},
"ariaRoleDescription": {"value": "circle"},
"description": {
"signal": "\"a: \" + (format(datum[\"a\"], \"\")) + \"; b: \" + (format(datum[\"b\"], \"\"))"
},
"x": {"scale": "concat_0_x", "field": "a"},
"y": {"scale": "concat_0_y", "field": "b"},
"shape": {"value": "circle"}
}
}
}
],
"axes": [
{
"scale": "concat_0_x",
"orient": "bottom",
"gridScale": "concat_0_y",
"grid": true,
"tickCount": {"signal": "ceil(concat_0_width/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"gridScale": "concat_0_x",
"grid": true,
"tickCount": {"signal": "ceil(childHeight/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_x",
"orient": "bottom",
"grid": false,
"title": "a",
"tickCount": {"signal": "ceil(concat_0_width/40)"},
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"grid": false,
"title": "b",
"tickCount": {"signal": "ceil(childHeight/40)"},
"zindex": 0
}
]
},
{
"type": "group",
"name": "concat_1_group",
"layout": {"padding": 20, "bounds": "full", "align": "each"},
"marks": [
{
"type": "group",
"name": "concat_1_concat_0_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "concat_1_childWidth"},
"height": {"signal": "childHeight"}
}
},
"marks": [
{
"name": "concat_1_concat_0_marks",
"type": "symbol",
"style": ["circle"],
"from": {"data": "data_0"},
"encode": {
"update": {
"opacity": {"value": 0.7},
"fill": {"value": "#0068c9"},
"tooltip": {
"signal": "{\"a\": format(datum[\"a\"], \"\"), \"b\": format(datum[\"b\"], \"\")}"
},
"ariaRoleDescription": {"value": "circle"},
"description": {
"signal": "\"a: \" + (format(datum[\"a\"], \"\")) + \"; b: \" + (format(datum[\"b\"], \"\"))"
},
"x": {"scale": "concat_1_concat_0_x", "field": "a"},
"y": {"scale": "concat_1_concat_0_y", "field": "b"},
"shape": {"value": "circle"}
}
}
}
],
"axes": [
{
"scale": "concat_1_concat_0_x",
"orient": "bottom",
"gridScale": "concat_1_concat_0_y",
"grid": true,
"tickCount": {"signal": "ceil(concat_1_childWidth/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_concat_0_y",
"orient": "left",
"gridScale": "concat_1_concat_0_x",
"grid": true,
"tickCount": {"signal": "ceil(childHeight/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_concat_0_x",
"orient": "bottom",
"grid": false,
"title": "a",
"tickCount": {"signal": "ceil(concat_1_childWidth/40)"},
"zindex": 0
},
{
"scale": "concat_1_concat_0_y",
"orient": "left",
"grid": false,
"title": "b",
"tickCount": {"signal": "ceil(childHeight/40)"},
"zindex": 0
}
]
},
{
"type": "group",
"name": "concat_1_concat_1_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "concat_1_childWidth"},
"height": {"signal": "childHeight"}
}
},
"marks": [
{
"name": "concat_1_concat_1_marks",
"type": "symbol",
"style": ["circle"],
"from": {"data": "data_0"},
"encode": {
"update": {
"opacity": {"value": 0.7},
"fill": {"value": "#0068c9"},
"tooltip": {
"signal": "{\"a\": format(datum[\"a\"], \"\"), \"b\": format(datum[\"b\"], \"\")}"
},
"ariaRoleDescription": {"value": "circle"},
"description": {
"signal": "\"a: \" + (format(datum[\"a\"], \"\")) + \"; b: \" + (format(datum[\"b\"], \"\"))"
},
"x": {"scale": "concat_1_concat_1_x", "field": "a"},
"y": {"scale": "concat_1_concat_1_y", "field": "b"},
"shape": {"value": "circle"}
}
}
}
],
"axes": [
{
"scale": "concat_1_concat_1_x",
"orient": "bottom",
"gridScale": "concat_1_concat_1_y",
"grid": true,
"tickCount": {"signal": "ceil(concat_1_childWidth/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_concat_1_y",
"orient": "left",
"gridScale": "concat_1_concat_1_x",
"grid": true,
"tickCount": {"signal": "ceil(childHeight/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_concat_1_x",
"orient": "bottom",
"grid": false,
"title": "a",
"tickCount": {"signal": "ceil(concat_1_childWidth/40)"},
"zindex": 0
},
{
"scale": "concat_1_concat_1_y",
"orient": "left",
"grid": false,
"title": "b",
"tickCount": {"signal": "ceil(childHeight/40)"},
"zindex": 0
}
]
}
]
}
],
"scales": [
{
"name": "concat_0_x",
"type": "linear",
"domain": {"data": "data_0", "field": "a"},
"range": [0, {"signal": "concat_0_width"}],
"nice": true,
"zero": true
},
{
"name": "concat_0_y",
"type": "linear",
"domain": {"data": "data_0", "field": "b"},
"range": [{"signal": "childHeight"}, 0],
"nice": true,
"zero": true
},
{
"name": "concat_1_concat_0_x",
"type": "linear",
"domain": {"data": "data_0", "field": "a"},
"range": [0, {"signal": "concat_1_childWidth"}],
"nice": true,
"zero": true
},
{
"name": "concat_1_concat_0_y",
"type": "linear",
"domain": {"data": "data_0", "field": "b"},
"range": [{"signal": "childHeight"}, 0],
"nice": true,
"zero": true
},
{
"name": "concat_1_concat_1_x",
"type": "linear",
"domain": {"data": "data_0", "field": "a"},
"range": [0, {"signal": "concat_1_childWidth"}],
"nice": true,
"zero": true
},
{
"name": "concat_1_concat_1_y",
"type": "linear",
"domain": {"data": "data_0", "field": "b"},
"range": [{"signal": "childHeight"}, 0],
"nice": true,
"zero": true
}
],
"config": {
"fieldTitle": "verbal",
"autosize": {"type": "fit", "contains": "padding"},
"range": {
"category": [
"#0068c9",
"#83c9ff",
"#ff2b2b",
"#ffabab",
"#29b09d",
"#7defa1",
"#ff8700",
"#ffd16a",
"#6d3fc0",
"#d5dae5"
],
"diverging": [
"#7d353b",
"#bd4043",
"#ff4b4b",
"#ff8c8c",
"#ffc7c7",
"#a6dcff",
"#60b4ff",
"#1c83e1",
"#0054a3",
"#004280"
],
"ramp": [
"#e4f5ff",
"#c7ebff",
"#a6dcff",
"#83c9ff",
"#60b4ff",
"#3d9df3",
"#1c83e1",
"#0068c9",
"#0054a3",
"#004280"
],
"heatmap": [
"#e4f5ff",
"#c7ebff",
"#a6dcff",
"#83c9ff",
"#60b4ff",
"#3d9df3",
"#1c83e1",
"#0068c9",
"#0054a3",
"#004280"
]
},
"mark": {"tooltip": true},
"axis": {
"labelFontSize": 12,
"labelFontWeight": 400,
"labelColor": "#808495",
"labelFontStyle": "normal",
"titleFontWeight": 400,
"titleFontSize": 14,
"titleColor": "#808495",
"titleFontStyle": "normal",
"ticks": false,
"gridColor": "#e6eaf1",
"domain": false,
"domainWidth": 1,
"domainColor": "#e6eaf1",
"labelFlush": true,
"labelFlushOffset": 1,
"labelBound": false,
"labelLimit": 100,
"titlePadding": 16,
"labelPadding": 16,
"labelSeparation": 4,
"labelOverlap": true
},
"legend": {
"labelFontSize": 14,
"labelFontWeight": 400,
"labelColor": "#808495",
"titleFontSize": 14,
"titleFontWeight": 400,
"titleFontStyle": "normal",
"titleColor": "#808495",
"titlePadding": 5,
"labelPadding": 16,
"columnPadding": 8,
"rowPadding": 4,
"padding": 7,
"symbolStrokeWidth": 4
},
"style": {
"guide-label": {"font": "\"Source Sans Pro\", sans-serif"},
"guide-title": {"font": "\"Source Sans Pro\", sans-serif"},
"group-title": {
"font": "\"Source Sans Pro\", sans-serif",
"align": "left",
"titleFontStyle": "normal",
"fontWeight": 600,
"fontSize": 16,
"fill": "#31333F"
},
"group-subtitle": {
"font": "\"Source Sans Pro\", sans-serif",
"align": "left"
},
"cell": {"columns": 1, "strokeWidth": 0, "stroke": "transparent"},
"text": {"font": "\"Source Sans Pro\", sans-serif"}
}
}
}
Compiled vega for st 1.42
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": {"type": "fit-x", "contains": "padding"},
"background": "#ffffff",
"padding": {"bottom": 20},
"data": [
{"name": "cf025101d9247e0e7131c4174bb7b974"},
{
"name": "data_0",
"source": "cf025101d9247e0e7131c4174bb7b974",
"transform": [
{
"type": "filter",
"expr": "isValid(datum[\"a\"]) && isFinite(+datum[\"a\"]) && isValid(datum[\"b\"]) && isFinite(+datum[\"b\"])"
}
]
}
],
"signals": [
{"name": "childHeight", "value": 200},
{"name": "concat_0_width", "value": 704},
{"name": "concat_1_childWidth", "value": 200}
],
"layout": {"padding": 20, "columns": 1, "bounds": "full", "align": "each"},
"marks": [
{
"type": "group",
"name": "concat_0_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "concat_0_width"},
"height": {"signal": "childHeight"}
}
},
"marks": [
{
"name": "concat_0_marks",
"type": "symbol",
"style": ["circle"],
"from": {"data": "data_0"},
"encode": {
"update": {
"opacity": {"value": 0.7},
"fill": {"value": "#0068c9"},
"tooltip": {
"signal": "{\"a\": format(datum[\"a\"], \"\"), \"b\": format(datum[\"b\"], \"\")}"
},
"ariaRoleDescription": {"value": "circle"},
"description": {
"signal": "\"a: \" + (format(datum[\"a\"], \"\")) + \"; b: \" + (format(datum[\"b\"], \"\"))"
},
"x": {"scale": "concat_0_x", "field": "a"},
"y": {"scale": "concat_0_y", "field": "b"},
"shape": {"value": "circle"}
}
}
}
],
"axes": [
{
"scale": "concat_0_x",
"orient": "bottom",
"gridScale": "concat_0_y",
"grid": true,
"tickCount": {"signal": "ceil(concat_0_width/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"gridScale": "concat_0_x",
"grid": true,
"tickCount": {"signal": "ceil(childHeight/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_x",
"orient": "bottom",
"grid": false,
"title": "a",
"tickCount": {"signal": "ceil(concat_0_width/40)"},
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"grid": false,
"title": "b",
"tickCount": {"signal": "ceil(childHeight/40)"},
"zindex": 0
}
]
},
{
"type": "group",
"name": "concat_1_group",
"layout": {"padding": 20, "bounds": "full", "align": "each"},
"marks": [
{
"type": "group",
"name": "concat_1_concat_0_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "concat_1_childWidth"},
"height": {"signal": "childHeight"}
}
},
"marks": [
{
"name": "concat_1_concat_0_marks",
"type": "symbol",
"style": ["circle"],
"from": {"data": "data_0"},
"encode": {
"update": {
"opacity": {"value": 0.7},
"fill": {"value": "#0068c9"},
"tooltip": {
"signal": "{\"a\": format(datum[\"a\"], \"\"), \"b\": format(datum[\"b\"], \"\")}"
},
"ariaRoleDescription": {"value": "circle"},
"description": {
"signal": "\"a: \" + (format(datum[\"a\"], \"\")) + \"; b: \" + (format(datum[\"b\"], \"\"))"
},
"x": {"scale": "concat_1_concat_0_x", "field": "a"},
"y": {"scale": "concat_1_concat_0_y", "field": "b"},
"shape": {"value": "circle"}
}
}
}
],
"axes": [
{
"scale": "concat_1_concat_0_x",
"orient": "bottom",
"gridScale": "concat_1_concat_0_y",
"grid": true,
"tickCount": {"signal": "ceil(concat_1_childWidth/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_concat_0_y",
"orient": "left",
"gridScale": "concat_1_concat_0_x",
"grid": true,
"tickCount": {"signal": "ceil(childHeight/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_concat_0_x",
"orient": "bottom",
"grid": false,
"title": "a",
"tickCount": {"signal": "ceil(concat_1_childWidth/40)"},
"zindex": 0
},
{
"scale": "concat_1_concat_0_y",
"orient": "left",
"grid": false,
"title": "b",
"tickCount": {"signal": "ceil(childHeight/40)"},
"zindex": 0
}
]
},
{
"type": "group",
"name": "concat_1_concat_1_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "concat_1_childWidth"},
"height": {"signal": "childHeight"}
}
},
"marks": [
{
"name": "concat_1_concat_1_marks",
"type": "symbol",
"style": ["circle"],
"from": {"data": "data_0"},
"encode": {
"update": {
"opacity": {"value": 0.7},
"fill": {"value": "#0068c9"},
"tooltip": {
"signal": "{\"a\": format(datum[\"a\"], \"\"), \"b\": format(datum[\"b\"], \"\")}"
},
"ariaRoleDescription": {"value": "circle"},
"description": {
"signal": "\"a: \" + (format(datum[\"a\"], \"\")) + \"; b: \" + (format(datum[\"b\"], \"\"))"
},
"x": {"scale": "concat_1_concat_1_x", "field": "a"},
"y": {"scale": "concat_1_concat_1_y", "field": "b"},
"shape": {"value": "circle"}
}
}
}
],
"axes": [
{
"scale": "concat_1_concat_1_x",
"orient": "bottom",
"gridScale": "concat_1_concat_1_y",
"grid": true,
"tickCount": {"signal": "ceil(concat_1_childWidth/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_concat_1_y",
"orient": "left",
"gridScale": "concat_1_concat_1_x",
"grid": true,
"tickCount": {"signal": "ceil(childHeight/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_concat_1_x",
"orient": "bottom",
"grid": false,
"title": "a",
"tickCount": {"signal": "ceil(concat_1_childWidth/40)"},
"zindex": 0
},
{
"scale": "concat_1_concat_1_y",
"orient": "left",
"grid": false,
"title": "b",
"tickCount": {"signal": "ceil(childHeight/40)"},
"zindex": 0
}
]
}
]
}
],
"scales": [
{
"name": "concat_0_x",
"type": "linear",
"domain": {"data": "data_0", "field": "a"},
"range": [0, {"signal": "concat_0_width"}],
"nice": true,
"zero": true
},
{
"name": "concat_0_y",
"type": "linear",
"domain": {"data": "data_0", "field": "b"},
"range": [{"signal": "childHeight"}, 0],
"nice": true,
"zero": true
},
{
"name": "concat_1_concat_0_x",
"type": "linear",
"domain": {"data": "data_0", "field": "a"},
"range": [0, {"signal": "concat_1_childWidth"}],
"nice": true,
"zero": true
},
{
"name": "concat_1_concat_0_y",
"type": "linear",
"domain": {"data": "data_0", "field": "b"},
"range": [{"signal": "childHeight"}, 0],
"nice": true,
"zero": true
},
{
"name": "concat_1_concat_1_x",
"type": "linear",
"domain": {"data": "data_0", "field": "a"},
"range": [0, {"signal": "concat_1_childWidth"}],
"nice": true,
"zero": true
},
{
"name": "concat_1_concat_1_y",
"type": "linear",
"domain": {"data": "data_0", "field": "b"},
"range": [{"signal": "childHeight"}, 0],
"nice": true,
"zero": true
}
],
"config": {
"fieldTitle": "verbal",
"autosize": {"type": "fit", "contains": "padding"},
"range": {
"category": [
"#0068c9",
"#83c9ff",
"#ff2b2b",
"#ffabab",
"#29b09d",
"#7defa1",
"#ff8700",
"#ffd16a",
"#6d3fc0",
"#d5dae5"
],
"diverging": [
"#7d353b",
"#bd4043",
"#ff4b4b",
"#ff8c8c",
"#ffc7c7",
"#a6dcff",
"#60b4ff",
"#1c83e1",
"#0054a3",
"#004280"
],
"ramp": [
"#e4f5ff",
"#c7ebff",
"#a6dcff",
"#83c9ff",
"#60b4ff",
"#3d9df3",
"#1c83e1",
"#0068c9",
"#0054a3",
"#004280"
],
"heatmap": [
"#e4f5ff",
"#c7ebff",
"#a6dcff",
"#83c9ff",
"#60b4ff",
"#3d9df3",
"#1c83e1",
"#0068c9",
"#0054a3",
"#004280"
]
},
"mark": {"tooltip": true},
"axis": {
"labelFontSize": 12,
"labelFontWeight": 400,
"labelColor": "#808495",
"labelFontStyle": "normal",
"titleFontWeight": 400,
"titleFontSize": 14,
"titleColor": "#808495",
"titleFontStyle": "normal",
"ticks": false,
"gridColor": "#e6eaf1",
"domain": false,
"domainWidth": 1,
"domainColor": "#e6eaf1",
"labelFlush": true,
"labelFlushOffset": 1,
"labelBound": false,
"labelLimit": 100,
"titlePadding": 16,
"labelPadding": 16,
"labelSeparation": 4,
"labelOverlap": true
},
"legend": {
"labelFontSize": 14,
"labelFontWeight": 400,
"labelColor": "#808495",
"titleFontSize": 14,
"titleFontWeight": 400,
"titleFontStyle": "normal",
"titleColor": "#808495",
"titlePadding": 5,
"labelPadding": 16,
"columnPadding": 8,
"rowPadding": 4,
"padding": 7,
"symbolStrokeWidth": 4
},
"style": {
"guide-label": {"font": "\"Source Sans Pro\", sans-serif"},
"guide-title": {"font": "\"Source Sans Pro\", sans-serif"},
"group-title": {
"font": "\"Source Sans Pro\", sans-serif",
"align": "left",
"titleFontStyle": "normal",
"fontWeight": 600,
"fontSize": 16,
"fill": "#31333F"
},
"group-subtitle": {
"font": "\"Source Sans Pro\", sans-serif",
"align": "left"
},
"cell": {"columns": 1, "strokeWidth": 0, "stroke": "transparent"},
"text": {"font": "\"Source Sans Pro\", sans-serif"}
}
}
}
I note a difference on the second line of the compiled vega:
# v1.41
"autosize": {"type": "pad", "contains": "padding"},
# v1.42
"autosize": {"type": "fit-x", "contains": "padding"},
EDIT: I discovered that the issue occurs on all streamlit versions when use_container_width=True (or equivalently width="stretch") is passed. And, the issue does not occur if use_container_width=False is passed.