Add event back to python

[nathalieguillemain]

It would be great if events could be sent back to python to add some interactions on graphs

events = {"click": "function(params, echarts) {console.log(params);Streamlit.setComponentValue(params)}"}

something = st_pyecharts(b, events=events)
st.text(something)

I understand that Streamlit object is no longer available after component has been rendered.
May be the onclick could be defined as the default behavior of the component ?

Thanks

[andfanilo]

Hey @nathalieguillemain !

I understand that Streamlit object is no longer available after component has been rendered.

You explained the problem perfectly :( what I could eventually try is a st_echarts_clickable maybe with a default behavior of returning the params of any clicked object back to Python. That's interesting.

Could you maybe describe your use case for this so I have a basic idea of what you're trying to accomplish?

Have a nice day?
Fanilo

[nathalieguillemain]

Hello Fanilo,

  b = (
        Bar()
            .add_xaxis(["Microsoft", "Amazon", "IBM", "Oracle", "Google", "Alibaba"])
            .add_yaxis(
            "2017-2018 Revenue in (billion $)", [21.2, 20.4, 10.3, 6.08, 4, 2.2]
        )
            .set_global_opts(
            title_opts=opts.TitleOpts(
                title="Top cloud providers 2018", subtitle="2017-2018 Revenue"
            ),
            toolbox_opts=opts.ToolboxOpts(),
        )
    )

    events = {"click": "function(params, echarts) {console.log(params.name);console.log(params)}"}

    something = st_pyecharts(b, events=events)

In this example, when I click on a bar in the graph the params contains
params.name="Microsoft"
paramvalue=21.2
...
DataIndex=1
...

So I can now update another graph selecting Microsoft (dataIndex is more usefull) in a dataset giving a hability to drilling into the data. Such as I can do in Tableau Software

If "something = st_pyecharts(b, events=events)" would give the param object as a Dict it would be very userfull

Thank you very much

[flunardelli]

Hi, @nathalieguillemain looks like we have the same problem.
I think I found a simple way to do that. It's a small hack but can avoid some headaches while @andfanilo is thinking of a better solution.
Here we go:

1. locate the HTML component template streamlit_echarts are using - index.html
   ex: /.venv/lib/python3.8/site-packages/streamlit_echarts/frontend/build/index.html

2. Put these lines before </body>

<script>      
  function sendMessageToStreamlitClient(type, data) {
    var outData = Object.assign({
      isStreamlitMessage: true,
      type: type,
    }, data);
    window.parent.postMessage(outData, "*");
  }

  // The `data` argument can be any JSON-serializable value.
  function sendDataToPython(data) {
    sendMessageToStreamlitClient("streamlit:setComponentValue", data);
  }
</script>

3. Change your app.py

events = {
   "click": "function(params) { console.log(params); delete params.event; sendDataToPython({value:params});"
}
r = st_pyecharts(c,  width=9000, height=640, events=events, key='chart') 
st.write(json.dumps(r))

• without the 'key' parameter, I'm couldn't return values.
• JS events are tricky for cloning or converting to string, so I removed them from the echart's 'params' return.

Hope this helps.
PS: You can blame that guy ;) ->
https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064

[andfanilo]

That's a nice workaround @flunardelli :) feel free to post it back to the Forum post, will definitely help other users!

Still need to push a fix as this solution I suppose will not work on Streamlit Sharing 🤔

PS: Thiago's Streamlit hidden hacks, it's like manipulating Streamlit internals 😆

[flunardelli]

thx @andfanilo
I just realise that we can use a much simpler approach ...

events = {
   "click": "function(p){console.log(p); delete p.event; window.parent.postMessage({isStreamlitMessage:!0,type:'streamlit:setComponentValue','value':p},'*');}"
} 

and probably it will work on Streamlit cloud/share...

best.

[andfanilo]

Starting 0.4.0, any value returned inside the event method is sent back to Streamlit. If no return values nor events are provided, all works the same.

events = {"click": "function(params) {console.log(params);return params.name}"}

something = st_pyecharts(b, events=events)
st.text(something)

Thanks @brightxml for the contribution 😄