[FEATURE] Allowing native Bokeh server app support on Visual Studio Code

My problem / request

Hi,

(This post is related to what I thought was a bug in the Jupyter extension of Visual Studio Code and is actually more of a missing feature in Bokeh)

I am working with Bokeh and Jupyter Notebooks in Visual Studio Code because, well … I like them. After a bit of fiddling with Server Apps for animated plots (following this example), I realised that they show no output in VSCode, and I did not see any error message while running the code.

Alternatives considered

I have run the code successfully in Jupyter Lab & Jupyter Notebook. So it is a VSCode+Bokeh problem.

What seems to be missing

Some people of the Jupyter Notebook community (thanks, @rchiodo !) have pointed me to the following error happening during the code execution (somehow I could not see it):

ERROR:bokeh.server.views.ws:Refusing websocket connection from Origin 'vscode-webview://8676e056-ff6e-461f-b0b9-4b600c50665f';                       use --allow-websocket-origin=8676e056-ff6e-461f-b0b9-4b600c50665f or set BOKEH_ALLOW_WS_ORIGIN=8676e056-ff6e-461f-b0b9-4b600c50665f to permit this; currently we allow origins {'localhost:8888'}
WARNING:tornado.access:403 GET /ws?platform=electron (::1) 1.00ms

Solving the issue

Is there any way we could :

1. Allow the plots from VSCode on-the-fly using just show() ?
2. Alternatively, provide a bit more info to the user on where to set these options either :
   • as a warning / message when the code is run,
   • as a additional comment in the last lines of the nice example from above,
   • or even in the documentation ?

Cheers,

[ddrinka]

@FilJed I haven’t come back around to this in a couple months, but according to @Hoxbro in https://github.com/holoviz/holoviews/pull/5398, the following should work now.

import holoviews as hv
import pandas as pd

hv.extension('bokeh')

import panel as pn
pn.config.comms = "vscode"  # <- this is needed for it to work

# creating a dataframe with both an int and an obj dtype
df = pd.DataFrame({
    'count':    [ 0,    1,    2 ], 
    'distance': [ 3,    4,    7 ],
    'length':   [ 5,  -20,   35 ]
})

# set up a DynamicMap where the user can select the y_axis column
y_dim = hv.Dimension('y_column', values=df.columns.tolist(), default='distance')

def return_scatter(col_name):
    return hv.Scatter(df, kdims='count', vdims=[col_name])

hv.DynamicMap(return_scatter, kdims=y_dim).opts(framewise=True, axiswise=True)

[ddrinka]

I’ve created https://github.com/holoviz/panel/issues/3876 to try to get Panel up and running. I’ll come back here to document a workaround for Bokeh interactivity if I’m able to get that sorted out over there.