bokeh/ipywidgets_bokeh

Only one widget gets displayed with ipyvuetify - Error: Comm is already created

filyp opened this issue · 0 comments

filyp commented

panel==0.12.1
ipywidgets==7.6.3
ipywidgets-bokeh==1.0.2
ipykernel==5.5.5
ipyvue==1.5.0
ipyvuetify==1.8.1
jupyterlab==3.0.0

Description

When creating a pn.Row or pn.GridSpec with multiple ipyvuetify widgets, only one of them gets displayed.
The same thing happens for example when trying to display the same ipywidgets.Button twice - the same error is thrown.

Minimal steps to reproduce

In jupyter lab:

import ipyvuetify as v
import panel as pn

pn.extension()

button1 = v.Btn(class_="ma-4", children=["B1"])
button2 = v.Btn(class_="ma-4", children=["B2"])

row = pn.Row(button1, button2)
pn.panel(row).show()

Console output

This error gets thrown when this happens:

Uncaught (in promise) Error: Comm is already created
    at m.createComm (ipywidgets_bokeh.js:69)
    at au._create_comm (ipywidgets_bokeh.js:95)
    at ipywidgets_bokeh.js:95
    at Array.map (<anonymous>)
    at ipywidgets_bokeh.js:95
    at async au.render (ipywidgets_bokeh.js:95)
    at async lu._render (ipywidgets_bokeh.js:95)

HTML produced

<div class="bk" style="position: relative; display: block; left: 0px; top: 0px; width: 117px; height: 78px; margin: 0px;">
    <div class="bk" style="position: absolute; left: 5px; top: 5px; width: 97px; height: 68px; display: block;">
        <div class="lm-Widget p-Widget">
            <div class="vuetify-styles">
                <div data-app="true" class="v-application v-application--is-ltr theme--light" id="app">
                    <div class="v-application--wrap">
                        <button type="button" class="v-btn v-btn--contained theme--light v-size--default ma-4">
                            <span class="v-btn__content">B1</span></button></div></div></div></div></div>
    <div class="bk" style="position: absolute; left: 112px; top: 5px; width: 0px; height: 68px; display: block;"></div>
</div>

The last div class="bk" is where the second button is supposed to be, but as you can see it's empty.