Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JupyterChart container width resizing in solara app #3328

Open
Jhsmit opened this issue Feb 8, 2024 · 0 comments
Open

JupyterChart container width resizing in solara app #3328

Jhsmit opened this issue Feb 8, 2024 · 0 comments
Labels

Comments

@Jhsmit
Copy link

Jhsmit commented Feb 8, 2024

I have a JupyterChart in a solara app. I would like the chart to respond to width changes of the container its sitting in.
By monkey-patching the css it mostly works, however on initial render the chart has a width of zero (action menu button does show correctly), and only when I resize the container or the 'green' one next to it, is the chart correctly rendered.

Is there a way I can dispatch a resize event on initial render?
There currently is a deprecation warning from anywidget where direct export of render might be removed in favour of a split in initialize and render. Perhaps an initial resize event should be trigger there? More info here: manzt/anywidget#395

solara app code:

import altair as alt
import pandas as pd
import solara
from solara.alias import rv

data = pd.DataFrame({"x": range(10), "y": range(10)})
chart = alt.Chart(data).mark_point().encode(x="x", y="y").properties(width="container")

# monkey-patch css
_css = r"""
.vega-embed {
    /* Make sure action menu isn't cut off */
    overflow: visible;
    width: 80% !important;
}
"""
alt.JupyterChart._css = _css


@solara.component
def ColorCard(title, color):
    with rv.Card(style_=f"background-color: {color}; width: 100%; height: 100%") as main:
        rv.CardTitle(children=[title])
    return main


@solara.component
def ChartCard(chart):
    jchart = alt.JupyterChart(chart)
    with solara.Card(style="width: 100%; height: 100%"):
        solara.display(jchart)


@solara.component
def Page():
    grid_layout_initial = [
        {"h": 10, "i": "0", "moved": False, "w": 3, "x": 0, "y": 0},
        {"h": 10, "i": "1", "moved": False, "w": 5, "x": 3, "y": 0},
    ]

    grid_layout, set_grid_layout = solara.use_state(grid_layout_initial)
    items = [ChartCard(chart), ColorCard("green", "green")]
    with solara.VBox() as main:

        def reset_layout():
            set_grid_layout(grid_layout_initial)

        solara.Button("Reset to initial layout", on_click=reset_layout)
        solara.GridDraggable(
            items=items,
            grid_layout=grid_layout,
            resizable=True,
            draggable=True,
            on_grid_layout=set_grid_layout,
        )

    return main

Initial render:
image

After resizing the chart card:
image

@Jhsmit Jhsmit added the bug label Feb 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant