Dashboard on server cannot be displayed when using server IP address

simonxin · December 19, 2022, 9:27am

Dashboard well on the server, shows the dashboard under local host(right). But when Using IP address to access, the content of the dashboard is missing, just showing the blank structure of the dash (left). What have I missed here? Is there a step by step server setup that I can follow?

I am using:
template.servable()
template.show()

carl · December 19, 2022, 9:46am

Hi @simonxin,

People might need to see some code to help better here, how are you serving your app? For example, I serve my apps in my network like the following from conda prompt with:

panel serve app_name_here.ipynb --allow-websocket-origin='*'

For myself the switch and ensuring the firwall is open for the port in use is essential to allow seamless functioning. Hope of some help.

Thanks, Carl.

simonxin · December 19, 2022, 1:55pm

Hi @carl

here is code I am testing

import pandas as pd
import panel as pn
import numpy as np
import datetime as dt
from datetime import timedelta
import matplotlib.pyplot as plt
import pathlib
import ipywidgets as widgets #install nodejs and enable jupyter extension 
from IPython.display import display, Markdown
#holoviz
import holoviews as hv
from holoviews import opts, dim
import hvplot.pandas # noqa
# hv.extension('bokeh')
hv.extension('plotly')
#plotly
import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots


df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

pp = pn.pane.Plotly(fig)

ACCENT_COLOR = pn.template.FastGridTemplate.accent_base_color

# sidebar_widgets = pn.Column('##### From',wrb_from,'##### To',wrb_to,'##### Type',wrb_type_size,'##### Period',wrb_period)

template = pn.template.FastGridTemplate(
    site="Panel Testing", title="Plolty Dash",
    # sidebar=sidebar_widgets,
    # sidebar_width = 300
)
template.main[:5,:] = pp

template.servable()
template.show()

simonxin · December 19, 2022, 1:57pm

looks like there are some run time errors when I try to run the command you use.

panel serve test_panel_dash.ipynb --allow-websocket-origin='*'
2022-12-19 21:49:20,451 Starting Bokeh server version 2.4.3 (running on Tornado 6.2)
2022-12-19 21:49:20,452 Host wildcard "'*'" will allow connections originating from multiple (or possibly all) hostnames or IPs. Use non-wildcard values to restrict access explicitly
2022-12-19 21:49:20,452 User authentication hooks NOT provided (default user enabled)
2022-12-19 21:49:20,455 Bokeh app running at: http://localhost:5006/test_panel_dash
2022-12-19 21:49:20,456 Starting Bokeh server with process id: 12964
2022-12-19 21:49:57,884 Starting Bokeh server version 2.4.3 (running on Tornado 6.2)
2022-12-19 21:49:57,885 User authentication hooks NOT provided (default user enabled)
Launching server at http://localhost:62203
2022-12-19 21:49:57,899 Error running application handler <bokeh.application.handlers.notebook.NotebookHandler object at 0x000002BDEC9D2050>:
File 'windows_events.py', line 319, in run_forever:
assert self._self_reading_future is None Traceback (most recent call last):
  File "C:\Code\demovenv\lib\site-packages\bokeh\application\handlers\code_runner.py", line 231, in run
    exec(self._code, module.__dict__)
  File "C:\Users\svc_rdurrani_py_dev\01_Sandbox_UAT\06_china_balance\test_panel_dash.ipynb", line 70, in <module>
    "      var url = css_urls[i];\n",
  File "C:\Code\demovenv\lib\site-packages\panel\viewable.py", line 425, in show
    return serve(
  File "C:\Code\demovenv\lib\site-packages\panel\io\server.py", line 704, in serve
    return get_server(panels, **kwargs)
  File "C:\Code\demovenv\lib\site-packages\panel\io\server.py", line 965, in get_server
    server.io_loop.start()
  File "C:\Code\demovenv\lib\site-packages\tornado\platform\asyncio.py", line 215, in start
    self.asyncio_loop.run_forever()
  File "C:\Program Files\Python310\lib\asyncio\windows_events.py", line 319, in run_forever
    assert self._self_reading_future is None
AssertionError

2022-12-19 21:50:35,463 WebSocket connection opened
2022-12-19 21:50:35,487 ServerConnection created
2022-12-19 21:50:42,896 Refusing websocket connection from Origin 'http://localhost:5006';                       use --allow-websocket-origin=localhost:5006 or set BOKEH_ALLOW_WS_ORIGIN=localhost:5006 to permit this; currently we allow origins {"'*':80"}
2022-12-19 21:50:42,897 403 GET /test_panel_dash/ws (::1) 1.52ms
2022-12-19 21:54:50,459 WebSocket connection closed: code=1001, reason=None

simonxin · December 19, 2022, 4:50pm

Can i use this together with panel serve command line?

carl · December 19, 2022, 5:51pm

Hi @simonxin,

No think you need to remove show, I’ll send a snippet of code that jumps between either or but don’t think you can use servable with show hanging on the tail there

So actually, I don’t have issues running your code from my linux machine at home it is fine if I server via prompt or run from within jupyter lab. I changed the end of the code line but it actually wasn’t required its just something someone here shared and I’ve been using it ever since.

import pandas as pd
import panel as pn
import numpy as np
import datetime as dt
from datetime import timedelta
import matplotlib.pyplot as plt
import pathlib
#import ipywidgets as widgets #install nodejs and enable jupyter extension 
from IPython.display import display, Markdown
#holoviz
import holoviews as hv
from holoviews import opts, dim
import hvplot.pandas # noqa
# hv.extension('bokeh')
hv.extension('plotly')
#plotly
import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots


df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

pp = pn.pane.Plotly(fig)

ACCENT_COLOR = pn.template.FastGridTemplate.accent_base_color

# sidebar_widgets = pn.Column('##### From',wrb_from,'##### To',wrb_to,'##### Type',wrb_type_size,'##### Period',wrb_period)

template = pn.template.FastGridTemplate(
    site="Panel Testing", title="Plolty Dash",
    # sidebar=sidebar_widgets,
    # sidebar_width = 300
)
template.main[:5,:] = pp

#Create random port automatically
from random import randrange
Port = randrange(4000, 8000)    

#saves a lot of time changing between .servable and .show brilliant
if __name__ == "__main__":
    app = template
    app.show(port=Port)
elif __name__.startswith("bokeh"):
    app = template
    app.servable()

I serve from the prompt like this:

panel serve Untitled2.ipynb --allow-websocket-origin='*' --port=5006

So from the same machine I started the server on in prompt and remote, I can see the template and bar graph no problems, I suspect there would not be an issue on my windows machine at work either but unable to test here just now. With that in mind my next step would be to open the firewall because I see the websocket is being refused if your attempting to connect from a remote machine and ensure the port set 5006 or which ever you decide to use is open for connection but beyond this I’m not sure what the other error information your seeing is saying really,

Thanks, Carl.

simonxin · December 23, 2022, 1:43am

Thank you Carl, that is very helpful!