Subplots do not always render correctly in flex components

[alexpeters1208]

Description

Figures with subplots (IE, figures created via Figure(rows=y, columns=x)) do not always render correctly when included in a ui.flex() call. The failure is not guaranteed, and may take a few re-runs of the same script to pop up. When it occurs, only the last plot in the subplot actually gets displayed, but the legend is correct, and all of the axes seem to try to overlap with each other.

Steps to reproduce

Here's a repro script:

from deephaven import ui
from deephaven import empty_table
from deephaven.plot.figure import Figure

@ui.component
def test():
    t = empty_table(100).update(["X = ii", "Y = Math.sin(X)"])
    plot = Figure(rows=1, cols=3). \
        new_chart(row=0, col=0). \
        plot_xy(series_name="1",
                t=t,
                x="X",
                y="Y"). \
        new_chart(row=0, col=1). \
        plot_xy(series_name="2",
                t=t,
                x="X",
                y="Y"). \
        new_chart(row=0, col=2). \
        plot_xy(series_name="3",
                t=t,
                x="X",
                y="Y"). \
        show()

    return ui.flex(
        ui.text("This is a block of text"),
        plot,
        direction="column",
        flex_grow=1
    )

Expected results

I expect this to produce the same figure with subplots every time:

Actual results

Sometimes, the following incorrect plot will be produced:

Versions

• Engine Version: 0.31.0

• OS: MacOS

• Browser: Safari

• Deephaven UI version is from ghcr.io/mofojed/deephaven-plugins:alpha

[jnumainville]

I'm unable to recreate the original issue. All traces are rendering as expected after running this several hundred times.

I did change one thing in the example by adding the width. If I don't add the width it's squished (see screenshot). @dsmmcken is something like setting the width expected or is there some way we could make this better?

from deephaven import ui
from deephaven import empty_table
from deephaven.plot.figure import Figure

@ui.component
def test():
    t = empty_table(100).update(["X = ii", "Y = Math.sin(X)"])
    plot = Figure(rows=1, cols=3). \
        new_chart(row=0, col=0). \
        plot_xy(series_name="1",
                t=t,
                x="X",
                y="Y"). \
        new_chart(row=0, col=1). \
        plot_xy(series_name="2",
                t=t,
                x="X",
                y="Y"). \
        new_chart(row=0, col=2). \
        plot_xy(series_name="3",
                t=t,
                x="X",
                y="Y"). \
        show()

    return ui.flex(
        ui.text("This is a block of text"),
        plot,
        direction="column",
        flex_grow=1,
        width="100%" # added this
    )

fig = test()

[mofojed]

I believe this is partial a result of our change to align-items: start on ui.panel: #604
This can be fixed by using a ui.panel instead of a ui.flex:

from deephaven import ui
from deephaven import empty_table
from deephaven.plot.figure import Figure

@ui.component
def plot_test():
    t = empty_table(100).update(["X = ii", "Y = Math.sin(X)"])
    plot = Figure(rows=1, cols=3). \
        new_chart(row=0, col=0). \
        plot_xy(series_name="1",
                t=t,
                x="X",
                y="Y"). \
        new_chart(row=0, col=1). \
        plot_xy(series_name="2",
                t=t,
                x="X",
                y="Y"). \
        new_chart(row=0, col=2). \
        plot_xy(series_name="3",
                t=t,
                x="X",
                y="Y"). \
        show()

    return ui.panel(
        ui.text("This is a block of text"),
        plot,
    )

t = plot_test()

Still think we could do better...

[mofojed]

@dsmmcken currently making some changes to default layouting, will need to check this with his changes.

[mofojed]

Looks good with @dsmmcken 's latest changes #896