Make it possible to integrate ipyaladin with Panel

[MarcSkovMadsen]

Hi

I wanted to explore ipyaladin in a Panel data app starting from this example https://github.com/cds-astro/ipyaladin/blob/master/examples/01_Getting_Started.ipynb.

Normally I can use AnyWidget components with Panel if I've installed the prerequisites:

pip install panel ipywidgets_bokeh ipyaladin

Then create a file called app.py.

import panel as pn
from ipyaladin import Aladin

pn.extension("ipywidgets")

aladin = Aladin(
    survey="http://alasky.cds.unistra.fr/DECaPS/DR1/color/",
    show_coo_grid=True,
    target="galactic center",
    coo_frame="galactic",
    fov=40,
    height=600,
)

pn.panel(aladin).servable()

and serve it by running the below in a terminal:

panel serve app.py

Finally open it. On a laptop it would be at at http://localhost:5006. But I'm working on a Jupyterhub so its served behind a reverse proxy at

https://SOME-DOMAIN/SOME-PATH/vscode/proxy/5006/

I'm not an expert here but I think that two things could be fixed here in ipyaladin or in aladin-lite?

• Requests to alasky.cds.unistra.fr should use https and not http protocol.
• You should add the appropriate headers to assets at alasky.cds.unistra.fra to allow them to be accessed from other domains.

I think these issues are not specifically related to Panel. Other users working in notebooks on JupyterHub/ Binder or trying to deploy data apps based on ipyaladin using for example Jupyter Voila server, Shiny Py or Solara would experience the same issues.

[MarcSkovMadsen]

If I change the survey argument to https then first issue goes away.

import panel as pn
from ipyaladin import Aladin

pn.extension("ipywidgets")

aladin = Aladin(
    survey="https://alasky.cds.unistra.fr/DECaPS/DR1/color/",
    show_coo_grid=True,
    target="galactic center",
    coo_frame="galactic",
    fov=40,
    height=600,
)

pn.panel(aladin).servable()

But CORS issue remains.

[MarcSkovMadsen]

That is what ChatGPT says is required to fix the issue:

The error message you're seeing is related to Cross-Origin Resource Sharing (CORS) policy. This is a security measure implemented by web browsers to prevent requests to different domains (cross-origin requests) unless the server specifies that it allows such requests.

In this case, the server at 'https://alasky.cds.unistra.fr/' is not sending the 'Access-Control-Allow-Origin' header in its response, which is why the browser is blocking the request.

To fix this issue, the server administrator for 'https://alasky.cds.unistra.fr/' needs to update the server's configuration to include the 'Access-Control-Allow-Origin' header in its responses. This header should be set to the origin of the request ('https://SOMe-DOMAIN/' in this case) or to '*' to allow requests from any origin.

If you don't have control over the server at 'https://alasky.cds.unistra.fr/', you might need to contact the server administrator or the service provider and ask them to make this change.

[MarcSkovMadsen]

Using alasky.u-strasbg.fr seems to work 👍

import panel as pn
from ipyaladin import Aladin

pn.extension("ipywidgets")

aladin = Aladin(
    target="159.2135528 -58.6241989",
    survey="https://alasky.u-strasbg.fr/Planets/Mars_Viking_MDIM21",
    fov=10,
    height=800,
)
pn.panel(aladin, sizing_mode="stretch_width").servable()

https://github.com/user-attachments/assets/68113c2c-d874-465c-9176-33a16be672c0

Just a comment. For data app usage it would be really nice to be able to set the heigth and width of Aladin to "100%" instead an integer. That makes it much easier to make modern apps the responsively adjusts to the window size of the app.