ui.plotly auto resize

[chupins]

Question

Hello,

Perhaps my question is more on the styling side than the nicegui side, but I hope someone could help me.

I'm using a ui.plotly in a splitter and I would like the figure to shrink when the splitter is moved.
By default, a scroll bar appears instead of reducing the figure side.

Here is a small code to show what i mean :

from nicegui import ui
import plotly.graph_objects as go

with ui.splitter(value=15).classes('w-full') as splitter:
    with splitter.before:
        with ui.column().classes('w-full items-start'):
            with ui.row():
                ui.label('label')
                ui.radio(['x', 'tps'], value='x')
            with splitter.after:
                with ui.row().classes('w-full h-full'):
                    fig = go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 3, 2.5]))
                    fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
                    ui.plotly(fig).classes('w-full h-full')

ui.run()

Is there any way to do what I want ?

Thank by advance !

[falkoschindler]

Hi @chupins,

With a custom JavaScript call we can tell Plotly to resize:

with ui.splitter(value=15).classes('w-full') as splitter:
    with splitter.before:
        ui.label('before')
    with splitter.after:
        plot = ui.plotly(go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 3, 2.5]))).classes('w-full h-full')

splitter.on_value_change(lambda: ui.run_javascript(f'Plotly.Plots.resize(getHtmlElement({plot.id}))'))

Optionally you can let the splitter emit change events while being dragged:

splitter.props('emit-immediately')

[chupins]

I was using edge (132.0.2957.115) and just tried with firefox (134.0.2) and got the same behaviour.

I'm using your code (juste added a function to add the print) :

from nicegui import ui
import plotly.graph_objects as go

def resize_window(plot):
    print('splitter moved')
    ui.run_javascript(f'Plotly.Plots.resize(getHtmlElement({plot.id}))')

with ui.splitter(value=15).classes('w-full') as splitter:
    with splitter.before:
        ui.label('before')
    with splitter.after:
        plot = ui.plotly(go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 3, 2.5]))).classes('w-full h-full')

splitter.props('emit-immediately')
splitter.on_value_change(lambda: resize_window(plot))

ui.run()

When I move the splitter, the print statement is correctly dispatched but i'm getting this javacript error in the console :

Uncaught (in promise) ReferenceError: getHtmlElement is not defined
    <anonymous> nicegui.js line 239 > eval:1
    runJavascript nicegui.js:239
    runJavascript nicegui.js:239
    run_javascript nicegui.js:364
    mounted nicegui.js:377
    mounted nicegui.js:383
    emit index.mjs:136
    value socket.js:538
    value socket.js:525
    value socket.js:495
    emit index.mjs:136
    value manager.js:204
    promise callback*ce< websocket-constructor.browser.js:5
    value manager.js:203
    emit index.mjs:136
    value index.js:146
    value manager.js:190
    emit index.mjs:136
    value socket.js:341
    emit index.mjs:136
    value transport.js:98
    value transport.js:90
    onmessage websocket.js:68
    value websocket.js:68
    value websocket.js:50
    value transport.js:46
    value socket.js:170
    a socket.js:111
    value manager.js:108
    s manager.js:39
    Ve index.js:29
    mounted nicegui.js:313

I tried to redefine getHtmlElement by adding

<script>
function getHtmlElement(id) {
  return document.getElementById(id);
}
</script>

in ui.add_head_html.

But it's not working : I'm getting "Error: DOM element provided is null or undefined" in the javascript console...

Edit : nicegui version 2.10.1

[chupins]

After looking a bit deeper in the html page, i find that the plotly element's id is called 'c6'.
But when I'm debugging the python script plot.id = '6'
If I write Plotly.Plots.resize(document.getElementById('c6'));, it's working.

Any idea where this letter c in the idea is coming from ?

[chupins]

Another complementary info : It's working when I add a c letter, but only if I start by inspecting the page on the browser.
It look like the element are not completly load if I don't inspect the page ?

[falkoschindler]

Because HTML doesn't like numbers as element IDs, NiceGUI adds a "c" (for "component") in front of it. The utility functions getElement and getHtmlElement can be used to access such elements by their integer ID. But the latter, getHtmlElement, has just been added in NiceGUI 2.9.0, so you're probably using an older version.
Alternatively you can use getElement(...).$el:

splitter.on_value_change(lambda: ui.run_javascript(f'Plotly.Plots.resize(getElement({plot.id}).$el)'))

[chupins]

Thanks again, I updated nicegui and use your last line and it works !