Plot Legend list arrows are broken

[MartinBarus]

Wave SDK Version, OS

Mac, wave 22

Actual behavior

When there is a plot with legend and too many line plots, the legend allows for scrolling (yellow arrows).

These arrows work one way (next), but no the other way (previous) so once you scroll to last portion of legend, you cannot get back to the first portion of it

Steps To Reproduce

Create plot with many Line plots

from h2o_wave import main, app, Q, ui, data


@app('/')
async def serve(q: Q):
    rows = [
        [0, "plot_label_1", 0],
        [0, "plot_label_2", 10],
        [0, "plot_label_3", 20],
        [100, "plot_label_1", 0],
        [100, "plot_label_2", 10],
        [100, "plot_label_3", 20],
        [0, "plot_label_4", 40],
        [0, "plot_label_5", 50],
        [0, "plot_label_6", 60],
        [100, "plot_label_4", 40],
        [100, "plot_label_5", 50],
        [100, "plot_label_6", 60],
    ]
    d = data(fields=["step", "type", "val"], rows=rows, pack=True)

    viz = ui.visualization(
        plot=ui.plot(
            [
                ui.mark(
                    type="line",
                    x_title="step",
                    x_scale="linear",
                    y_scale="linear",
                    x="=step",
                    y="=val",
                    color="=type",
                )
            ]
        ),
        data=d,
        interactions=["brush"],
        height="calc((100vh - 275px)*0.42)",
        width="560px",
    )

    q.page["charts"] = ui.form_card(box='1 1 20 20', items=[viz])

    await q.page.save()

[mturoci]

This is a bug in the underlying plotting library, tracked in antvis/G2#2549.

Reasoning: G2 lib supports 2 types of renderers - canvas and SVG. Wave uses SVG to leverage the power of CSS variables for theming. Unfortunately, the legend pagination is broken for this type of renderer.