marimo-team / marimo

A reactive notebook for Python — run reproducible experiments, execute as a script, deploy as an app, and version with git.
https://marimo.io
Apache License 2.0
8.07k stars 291 forks source link

ipyaladin viewer style sheet issue in marimo notebooks #2106

Closed pgriffin17 closed 2 months ago

pgriffin17 commented 3 months ago

Describe the bug

I am attempting to use ipyaladin (an astronomical sky survey viewer, and more) in marimo. They use AnyWidget so I thought it would be fun to try in marimo. However, I ran into an issue that the icons for the widget appeared huge and did not appear on the image visualization. The area that registers clicks was also directly below the image. See screenshot for an idea of what's going on - the screenshot is at 30% zoom in my browser.

This issue is also posted to the ipyaladin repo. Through the marimo discord, it was suggested this is a stylesheet issue, potentially with ShadowDOM.

361097600-cb2d1e6e-1ccc-4c59-b9d4-b07c43c2815a

Environment

{ "marimo": "0.8.2", "OS": "Windows", "OS Version": "10", "Processor": "Intel64 Family 6 Model 151 Stepping 2, GenuineIntel", "Python Version": "3.10.6", "Binaries": { "Browser": "128.0.6613.84", "Node": "v18.18.2" }, "Requirements": { "click": "8.1.7", "importlib-resources": "5.12.0", "jedi": "0.18.1", "markdown": "3.6", "pymdown-extensions": "10.8.1", "pygments": "2.18.0", "tomlkit": "0.13.0", "uvicorn": "0.30.1", "starlette": "0.37.2", "websockets": "12.0", "typing-extensions": "4.12.2", "ruff": "0.5.2" } }

Code to reproduce

import marimo

__generated_with = "0.8.2" app = marimo.App(width="full")

@app.cell def __(): import marimo as mo from ipyaladin import Aladin return Aladin, mo

@app.cell def __(Aladin, mo): aladin = Aladin(target="ngc4151", fov=2) aladin = mo.ui.anywidget(aladin) aladin return aladin,

if name == "main": app.run()

ManonMarchand commented 3 months ago

Hi Marimo team, ipyaladin team here :slightly_smiling_face:

We'd love to make things better on our side, but it is a bit out of our expertise. Do you have good readings on how to proceed? Or maybe other anywidgets that do stylesheets correctly so that we could get inspiration?

ManonMarchand commented 3 months ago

We have a dirty solution where we import Aladin's style sheet in the widget for now.

image

:crossed_fingers: I think we can find a cleaner way and support Marimo in the next version

mscolnick commented 2 months ago

Looks like this was fixed upstream: https://github.com/cds-astro/aladin-lite/pull/194 Closing as completed