Make it easy to align .servable component center

[MarcSkovMadsen]

panel: 0.12.6

I'm updating awesome-panel.org to use the proposed api of

pn.extension(template='fast')
...
component1.servable()
component2.servable()

I'm having trouble aligning the component center, primarily horizontally. As you can see below it can be done. But not via pn.pane.Matplotlib(plot, height=600, sizing_mode="scale_height", align="center").servable(). It is more cumbersome.

I believe a lot of users would have difficulties figuring this out. It took me some time.

import matplotlib.pyplot as plt
import numpy as np
from matplotlib import cm
from matplotlib.figure import Figure
import panel as pn

pn.extension(template="fast")

def get_theme() -> str:
    """Returns the name of the active theme"""
    template = pn.state.template
    theme = "dark" if template.theme == pn.template.DarkTheme else "default"
    return theme

def get_plot(theme="default"):
    plt.style.use("default")
    if theme == "dark":
        plt.style.use("dark_background")
    Y, X = np.mgrid[-3:3:100j, -3:3:100j]
    U = -1 - X**2 + Y
    V = 1 + X - Y**2

    fig0 = Figure(figsize=(12, 6))
    ax0 = fig0.subplots()

    strm = ax0.streamplot(X, Y, U, V, color=U, linewidth=2, cmap=cm.autumn)
    fig0.colorbar(strm.lines)
    return fig0

plot = get_plot(theme=get_theme())

pn.pane.Matplotlib(plot, height=600, sizing_mode="scale_height", align="center").servable()

pn.Column(
    pn.Spacer(),
    pn.pane.Matplotlib(plot, height=600, sizing_mode="scale_height", align="center"),
    sizing_mode="stretch_both",
).servable()

Solution

Make pn.pane.Matplotlib(plot, height=600, sizing_mode="scale_height", align="center").servable() align center

[philippjfr]

Appears to be fixed in 1.0rc3:

plot = get_plot(theme=get_theme())

pn.pane.Matplotlib(plot, min_height=600, sizing_mode="scale_height", align="center").servable()

pn.Column(
    pn.pane.Matplotlib(plot, min_height=600, sizing_mode="scale_height", align="center"),
    sizing_mode="stretch_both",
).servable()

[philippjfr]

Wait, guess that's not what you were asking for. I don't see how your requested behavior can work because alignment depends on the parent container.