triggering the js_eval resets the page

[derfryday]

hello there,

I've run into an issue with the js_eval where it wouldn't properly render (or perhaps just reset the page?) when using it behind a button. It's the same whether or not I just put the code behind a if button("Button Name"): or when a callback method is used.

Clicking the button multiple times results in the result of js_eval being shown.

Streamlit version: 1.11.1 (I can't go beyond that unfortunately)
streamlit_js_eval version: 0.1.5

example code:

#!/usr/bin/env python

import streamlit as st
import streamlit_js_eval

if st.button("Test!"):
    test_function: str = """
    function return_some_data() {
        return "some data"
    }
    
    return_some_data()
    """

    output = streamlit_js_eval.streamlit_js_eval(
        js_expressions=test_function, key="test0"
    )
    print(f"output length: {len(output)}" if output else "output is None")
    st.write(f"output length: {len(output)}" if output else "output is None")
    st.write(f"output: {output}")

example video of behaviour:

[aghasemi]

Hi. I will work on it as soon as I find some time. I hope we can find a fix :)

[aghasemi]

Hi. Sorry for the delay. I'm failing to get your example to work, and I'm kin of blocked as I'm not an expert (or knowledgeable at all!) of Streamlit internals :(

Is it impossible/unfeasible to call streamlit_js_eval outside the condition branch and then just use the out value output? That "solves" the issue, although not in a good way really.

[derfryday]

No I can't call it outside the condition branch. I went and upvoted the issue you linked here.

[DevDrake]

Hi, I am facing similar problem even outside the callback. The problem is when i do streamlit_js_eval(js_expression='window.innerwidth', key='WIDTH') it causes refresh. streamlit 1.30.0 and js_eval ver 1.5.

[aghasemi]

Hi, I am facing similar problem even outside the callback. The problem is when i do streamlit_js_eval(js_expression='window.innerwidth', key='WIDTH') it causes refresh. streamlit 1.30.0 and js_eval ver 1.5.

Hi. It's js_expressions, not js_expression :) This works "outside a branch":

 x = streamlit_js_eval(js_expressions='window.innerWidth', key='WIDTH',  want_output = True,)                
 st.write(f"Width is {x}")

[aghasemi]

hello there,

I've run into an issue with the js_eval where it wouldn't properly render (or perhaps just reset the page?) when using it behind a button. It's the same whether or not I just put the code behind a if button("Button Name"): or when a callback method is used.

Clicking the button multiple times results in the result of js_eval being shown.

Streamlit version: 1.11.1 (I can't go beyond that unfortunately) streamlit_js_eval version: 0.1.5

example code:

#!/usr/bin/env python

import streamlit as st
import streamlit_js_eval

if st.button("Test!"):
    test_function: str = """
    function return_some_data() {
        return "some data"
    }
    
    return_some_data()
    """

    output = streamlit_js_eval.streamlit_js_eval(
        js_expressions=test_function, key="test0"
    )
    print(f"output length: {len(output)}" if output else "output is None")
    st.write(f"output length: {len(output)}" if output else "output is None")
    st.write(f"output: {output}")

example video of behaviour:

Hi. I just noticed that your code actually works if you replace st.button with st.checkbox :-/

Streamlit 1.31.0, Python 3.10

[aghasemi]

Hi. I just noticed that your code actually works if you replace st.button with st.checkbox :-/

Streamlit 1.31.0, Python 3.10

@derfryday @DevDrake
Hello again.

Even more interestingly, if you create a simple HTML button using SJE itself and not the default Streamlit button, it works!

There is a new version 0.1.7 now, with simple Bootstrap button bootstrapButton(), that does not have this branch issue. You may want to try that.

I know this is really a workaround and not a real solution, but I'm not sure what else I can do without collaboration from the Streamlit team.

[aghasemi]

Closing for now. Re-open if there is some other finding.

[Dev-iL]

Hello! I didn't quite understand how to use bootstrapButton. Could you please provide a minimal example?

[aghasemi]

Just the exact same way you use normal Streamlit `st.button` Dev-iL ***@***.***> schrieb am Mo., 10. Juni 2024, 13:09:

…

Hello! I didn't quite understand how to use bootstrapButton. Could you please provide a minimal example? — Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABYCZ37Y4ULTCU33GA7HR7DZGWCNNAVCNFSM6AAAAABJCCMW3CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJYGA2TANZZGY> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[Dev-iL]

What do you mean? It doesn't look like bootstrapButton supports all the kwargs that st.button does... Specifically on_click.

Did you mean that it can be replaced in the example code above, i.e.

-if st.button("Test!"):
+if bootstrapButton("Test!"):
    test_function: str = """

?

[Dev-iL]

BTW, what I'm trying to do is react to js events in python, by programmatically "pressing" an invisible Streamlit button. It looks like a race condition that's associated with the page refresh is interfering with my solution. Below is a demo of my "almost working" solution for reacting to mouse hover on a Streamlit dataframe:

Some things to note:

• It can be seen in the browser console that the action is either enter or leave.
• The python console is "lagging behind" the browser, it's unable to retrieve the latest object for some reason.