Repository: streamlit/streamlit

Issue:
Altair support - Layer charts, `.resolve_scale` dont appear to work
# Summary

Altair appears to work just fine inside streamlit, but I have problems getting layer charts to work. Note - Concat (vert/horizontal) of altair charts works fine, but doing something like
```
(chart1 + chart2).resolve_scale(y='independent') 
```
results in everything going blank and no chart canvas displayed

# Steps to reproduce

What are the steps we should take to reproduce the bug:

1. Build 2 altair charts inside the same streamlit script, ideally with a shared x-axis like time/date (so it makes sense to crate a compound chart)
2. try to layer them using `(chart1 + chart2).resolve_scale(y='independent')`

## Expected behavior:

The layer chart should display with different y-axes
## Actual behavior:

Nothing displays - the chart fades as if to reload but everything goes blank

## Is this a regression?

this works elsewhere, e.g. in jupyterlab

# Debug info

- Streamlit version: 0.60.0
- Python version: Python 3.7.4
- Using Conda
- OS version: Mac OS X Catalina
- Browser version: Brave, Version 1.10.97 Chromium: 83.0.4103.116

# Additional information

If needed, add any other context about the problem here. For example, did this bug come from https://discuss.streamlit.io or another site? Link the original source here!



Discussion:
Hi @niviksha, thanks for the issue. It looks like Streamlit magics does not detect the output of `resolve_scale` as an Altair object, but you can display the Altair layer through `st.altair_chart` as a workaround.

Code sample : 

```python
import altair as alt
from altair.expr import datum
from vega_datasets import data
import streamlit as st

stocks = data.stocks.url

base = alt.Chart(stocks).encode(
    x='date:T',
    y='price:Q',
    color='symbol:N'
).transform_filter(
    datum.symbol == 'GOOG'
)

(base.mark_line() + base.mark_point()).resolve_scale(y='independent') # does not work
st.write((base.mark_line() + base.mark_point()).resolve_scale(y='independent')) # works
st.altair_chart((base.mark_line() + base.mark_point()).resolve_scale(y='independent')) # works
```
Running into this problem on 0.65 for any variation of the methods outlined above.

[![Open in Streamlit Cloud](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://issues.streamlitapp.com/?issue=gh-1667)

```
#!/usr/bin/env python3

# Testing if layered charts work in streamlit. Showing up blank for me.

import altair as alt
from altair.expr import datum
import pandas
import streamlit as st

results=[
    [2016, 11525, 3],
    [2017, 11517, 2],
    [2018, 11521, 2],
    [2019, 11519, 4],
]

dataframe = pandas.DataFrame(
    results,
    columns=["Job Number", "Test Count", "Test Failures"]
)
st.dataframe(dataframe)
base = alt.Chart(dataframe).encode(alt.X('Job Number:O'))
chart_test_count = base.mark_line().encode(alt.Y('Test Count:N'))
chart_test_failures = base.mark_line().encode(alt.Y('Test Failures:N'))

st.write((chart_test_count + chart_test_failures).resolve_scale(y='independent'))
st.altair_chart((chart_test_count + chart_test_failures).resolve_scale(y='independent'))

st.altair_chart(chart_test_count)
st.altair_chart(chart_test_failures)
st.altair_chart(chart_test_count | chart_test_failures)
```
![Screenshot_20201006_233327](https://user-images.githubusercontent.com/687378/95284507-573b0100-082c-11eb-860a-09a0361be335.png)

@andfanilo as you mentioned, resolve_scale isn't passing back the requisite object. I can get the preceding code to work if I then append some additional methods to it. e.g.

```
# Doesn't work
st.altair_chart((chart_test_count + chart_test_failures).resolve_scale(y='independent'))
# Works
st.altair_chart((chart_test_count + chart_test_failures).resolve_scale(y='independent').properties(width=650,height=400))
```
The combination of concatenations does not work neither:

does not work:
    chart = alt.vconcat(
        alt.hconcat(linebuy, linerent, linefactor),
        alt.hconcat(barbuy, barrent, barfactor),
        center=True
    )

works:
     chart = alt.vconcat(linebuy, linerent, linefactor)

works:
     chart = alt.hconcat(linebuy, linerent, linefactor)
Are there any updates on this? 

I am also facing the same concat-within-concat issue producing blank charts. This is the javascript console error:
```java
7.37f183da.chunk.js:2 ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval (eval at l (7.37f183da.chunk.js:2), <anonymous>:3:107)
    at M._update (7.37f183da.chunk.js:2)
    at M.evaluate (7.37f183da.chunk.js:2)
    at M.run (7.37f183da.chunk.js:2)
    at Be.<anonymous> (7.37f183da.chunk.js:2)
    at c (5.53ccda26.chunk.js:2)
    at Generator._invoke (5.53ccda26.chunk.js:2)
    at Generator.next (5.53ccda26.chunk.js:2)
    at n (7.37f183da.chunk.js:2)
    at s (7.37f183da.chunk.js:2)
```
Possible duplicate of #1461
I can confirm this issue still exists in the latest Streamlit version. I was able to reproduce this [here](https://issues.streamlit.app/?issue=gh-1667).

Resolving patch:
diff --git a/e2e_playwright/st_altair_chart.py b/e2e_playwright/st_altair_chart.py
--- a/e2e_playwright/st_altair_chart.py
+++ b/e2e_playwright/st_altair_chart.py
@@ -116,3 +116,20 @@
 c2 = alt.Chart(df1).mark_line().encode(alt.X("x"), alt.Y("y2"))
 
 st.altair_chart(c1 & c2, use_container_width=True)
+
+from altair.expr import datum
+
+results = [
+    [2016, 11525, 3],
+    [2017, 11517, 2],
+    [2018, 11521, 2],
+    [2019, 11519, 4],
+]
+
+dataframe = pd.DataFrame(results, columns=["Job Number", "Test Count", "Test Failures"])
+
+base = alt.Chart(dataframe).encode(alt.X("Job Number:O"))
+chart_test_count = base.mark_line().encode(alt.Y("Test Count:N"))
+chart_test_failures = base.mark_line().encode(alt.Y("Test Failures:N"))
+
+st.altair_chart((chart_test_count + chart_test_failures).resolve_scale(y="independent"))


Test patch:
diff --git a/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[dark_theme-chromium].png b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[dark_theme-chromium].png
new file mode 100644
Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[dark_theme-chromium].png differ
diff --git a/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[dark_theme-firefox].png b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[dark_theme-firefox].png
new file mode 100644
Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[dark_theme-firefox].png differ
diff --git a/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[dark_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[dark_theme-webkit].png
new file mode 100644
Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[dark_theme-webkit].png differ
diff --git a/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[light_theme-chromium].png b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[light_theme-chromium].png
new file mode 100644
Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[light_theme-chromium].png differ
diff --git a/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[light_theme-firefox].png b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[light_theme-firefox].png
new file mode 100644
Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[light_theme-firefox].png differ
diff --git a/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[light_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[light_theme-webkit].png
new file mode 100644
Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_altair_chart_test/st_altair_chart-resolve-scale-independent[light_theme-webkit].png differ
diff --git a/e2e_playwright/st_altair_chart_test.py b/e2e_playwright/st_altair_chart_test.py
--- a/e2e_playwright/st_altair_chart_test.py
+++ b/e2e_playwright/st_altair_chart_test.py
@@ -22,9 +22,9 @@ def test_altair_chart_displays_correctly(
 ):
     expect(
         themed_app.get_by_test_id("stArrowVegaLiteChart").locator("canvas")
-    ).to_have_count(10)
+    ).to_have_count(11)
     charts = themed_app.get_by_test_id("stArrowVegaLiteChart")
-    expect(charts).to_have_count(10)
+    expect(charts).to_have_count(11)
     snapshot_names = [
         "st_altair_chart-scatter_chart_default_theme",
         "st_altair_chart-scatter_chart_streamlit_theme",
@@ -36,6 +36,7 @@ def test_altair_chart_displays_correctly(
         "st_altair_chart-grouped_use_container_width_default_theme",
         "st_altair_chart-grouped_layered_line_chart_streamlit_theme",
         "st_altair_chart-vconcat_width",
+        "st_altair_chart-resolve-scale-independent",
     ]
     for i, name in enumerate(snapshot_names):
         assert_snapshot(