odd behavior between ui.plotly(fig), buttons, and ui.input

[vickorian]

Question

def update_value(new_value):
    global ii
    if new_value > max_val or new_value < 0:
        ui.notify("outside bounds", color="red")
    else:
        ii = new_value
        value_input.set_value(ii)
        update_figure(ii)
        plotly_figure.update_figure(fig)
        print(f"Updated value: {ii}, Graph updated.")

async def update_date(dte):
    dte_ = datetime.strptime(dte, "%Y-%m-%d").date()
    ind_ = date.index(dte_)
    update_value(ind_)
    print(f"Date selected: {dte}, Index: {ind_}")

async def increment():
    global ii
    if ii < max_val:
        value_input.value = value_input.value +1

async def decrement():
    global ii
    if ii > 0:
        value_input.value = value_input.value -1

def on_ticker_change():
    ticker = tick_.value.upper()
    fetch_and_calculate_data(ticker)
    update_value(0)  # Reset to initial value after fetching new data
    print(f"Ticker changed: {ticker}")
    ui.notify("Calc completed. Refresh page if needed.")

with ui.row().classes("w-full no-wrap"):  # Ensure the row does not wrap
    with ui.column().classes("w-1/2 p-0"):  # Left side with inputs, buttons, and date selection
        with ui.row().classes("w-full"):
            tick_ = ui.input(label="Ticker Symbol")
            ui.button("Submit New Ticker", on_click=on_ticker_change)
            value_input = ui.input(label="Input value", on_change=lambda e: update_value(int(e.value)))
            ui.button('Decrement', on_click= lambda: update_value(ii-1))
            ui.button('Increment', on_click= lambda: update_value(ii+1))
        with ui.row().classes("w-full mt-4"):  # Date selection below the buttons and inputs
            ui.date(on_change=lambda e: update_date(e.value))

    with ui.column().classes("w-1/2 p-0"):  # Right side with the graph taking the full height
        plotly_figure = ui.plotly(px.line()).classes("h-full w-full")  # Initialize with an empty plot and ensure it takes full height

ui.run()

I can't really create a workable minimum example without some difficulty, but the visualization is pretty easy. There are buttons which move an index up or down. That index controls the data currently being plotted. Also there is an input field where i can manually update the value. Here's the issue.

If I create the chart and then use the increment or decrement buttons, the graph will resize itself to the "autosized" values, but if i directly input the number to the input parameter, it will not resize itself and will stay at the user specified zoom. I've got the settings correct and it shouldn't be moving, so that's not my concern. It's more so i think there's an interaction going on between the nicegui UI and the refresh of the graph panel. Maybe it's calling a redraw every time a button is pressed on the page?

I even tried it with ui.number. If i modify the ui.number by typing it in, nothing happens, but if i press the button to increment the values, the graph resizes itself. I'm working on a javascript workaround for this, but as that's not my main world, it's a bit tedious. Any suggestions would be greatly appreciated.

i've tried every possible orientation and method to change the variables, setting the global directly, setting value_input directly, calling the increment and decrement functions, calling update_value directly via lambda functions. I've tried .on_click(), all of it leads to the same place.

Best.

[vickorian]

js_code2 = """
    var plot = document.getElementsByClassName('js-plotly-plot')[0];
    plot.on('plotly_relayout', function(eventdata) {
        console.log('Zoomed to: X-axis', eventdata['xaxis.range[0]'], 'to', eventdata['xaxis.range[1]'], 
                    'and Y-axis', eventdata['yaxis.range[0]'], 'to', eventdata['yaxis.range[1]']);
        
        emitEvent('plotlyZoom2', eventdata);
    });
    """
    zoom_args = None  # Initialize the variable to store the zoom arguments

    def handle_zoom(e):
        global zoom_args
        zoom_args = e.args

    ui.on('plotlyZoom2', handle_zoom)

this is the workaround to grab the zoom bounds. Might be beneficial to add an advanced example to emitEvent usage to include payload usage. Only thought to try it because the node.jsdocs had an event emitter section where you can pass the eventdata in the custom event.

[falkoschindler]

Hi @vickorian,

If you still need help with this problem, it would be really great if you could provide a minimum reproducible example. (Do we really need the date element? And the ticker? And what exactly does update_figure do?)

I boiled it down to the following snippet, which seems to be working just fine:

import plotly.graph_objects as go
from nicegui import ui

def update_value(new_value: int) -> None:
    number.value = new_value
    fig.update_traces(x=[1, 2, 3, 4], y=[number.value, number.value, number.value, number.value])
    plot.update_figure(fig)

with ui.row(wrap=False).classes('w-full'):
    with ui.column():
        number = ui.number(value=0, on_change=lambda e: update_value(e.value))
        ui.button('Decrement', on_click=lambda: update_value(number.value - 1))
        ui.button('Increment', on_click=lambda: update_value(number.value + 1))
    with ui.column():
        fig = go.Figure(go.Scatter(x=[], y=[]))
        plot = ui.plotly(fig).classes('h-full w-full')

ui.run()