Bokeh Column Layout not displayed

Summary

Bokeh column layout are not being displayed

Steps to reproduce

Execute the code below

Expected behavior:

Column layout should work

Actual behavior:

Other layouts are working fine

Debug info

• Streamlit version: Streamlit, version 0.67.0
• Python version: 3.7.4
• Using PyEnv
• OS version: Linux Mint 19
• Browser version: Google Chrome 84.0.4147.125

Additional information

bokeh.sampledata.download()

# In[2]:


from bokeh.embed import file_html
from bokeh.resources import CDN, INLINE
from bokeh.sampledata.stocks import AAPL, GOOG, IBM, MSFT
import holoviews as hv
from holoviews.operation.timeseries import rolling
from holoviews import opts
import numpy as np
import pandas as pd
import streamlit as st


# In[3]:


hv.extension('bokeh')

color_cycle = hv.Cycle(values=['#A6CEE3', '#B2DF8A','#33A02C', '#FB9A99'])

def get_curve(data, label=''):
    df = pd.DataFrame(data)
    df['date'] = df.date.astype('datetime64[ns]')
    return hv.Curve(df, ('date', 'Date'), ('adj_close', 'Price'), label=label)

hv.Dimension.type_formatters[np.datetime64] = '%Y'

aapl = get_curve(AAPL, label='AAPL')
goog = get_curve(GOOG, label='GOOG')
ibm  = get_curve(IBM, label='IBM')
msft = get_curve(MSFT, label='MSFT')

avg_curve = rolling(aapl, rolling_window=30).relabel('Average')
avg_scatter = hv.Scatter((np.array(AAPL['date'], dtype=np.datetime64), np.array(AAPL['adj_close'])), 
                         ('date', 'Date'), ('adj_close', 'Price'), label='close')


# In[4]:


full_view = ((aapl * goog * ibm * msft) + (avg_scatter * avg_curve)).opts(
    opts.Curve(color=color_cycle),
    opts.Curve('Curve.Average', color='navy'),
    opts.Scatter(alpha=0.2, size=4, color='darkgrey'),
    opts.Overlay(width=400, height=400, legend_position='top_left'))


# In[5]:


full_view


# In[6]:


single_view = aapl


# In[7]:


single_view


# In[8]:


type(hv.render(single_view, backend='bokeh'))


# In[9]:

### THIS WORKS

st.write(hv.render(single_view, backend='bokeh'))


# In[10]:


type(hv.render(full_view, backend='bokeh'))


# In[11]:

### THIS WORKS

st.write(hv.render(full_view[0], backend='bokeh'))


# In[12]:

### THIS DOES NOT WORK

st.write(hv.render(full_view, backend='bokeh'))```

[kmcgrady]

Awesome! I was able to reproduce the issue @LeonDpl ! This is due to the way we make Bokeh work in our frontend implementation.

Essentially, we generate an id for the chart based on an index. The index is (more or less) the position vertically in the report. We, then, use Bokeh to render the element. Eventually, we have elements with duplicate ids, and the browser favors the first element (the first column).

The simplest fix would entail incorporating the location more into the id. We have a concept of a “delta path” that indicates more specific placement, but it isn’t sent to the frontend (somewhat deliberately). We would need to figure out what’s the best way to send it through.

I have marked this as a project to work on for tech debt. I cannot give a timeframe, but once we get an idea, we can share it for contributors to help out if needed.

[LeonDpl]

Hi @kmcgrady using both streamlit version 0.80 or 0.81.1