Component for bi-directional communication with bokeh

[apex_yu]

Hello, i am testing the data_table.py
however it ONly show 2 Row,
i cannot find have keywords in Doc that control the ROWs,
but scollable or frozen row only
can you give me a hints thanks!

df = pd.DataFrame({
        "x": [1, 2, 3, 4, 5, 6, 7],
        "y": [4, 5, 6, 7, 5, 6, 7],
})
p = DataTable(source=cds, columns=columns,selectable="checkbox",scroll_to_selection=True)
result = streamlit_bokeh_events(bokeh_plot=p, events="INDEX_SELECT", key="foo", refresh_on_update=False, debounce_time=0, override_height=100)

and its seem the table is Restricted to the canvas ? for unknow reason
I didnt add any modify code except the DF

Jeff

[apex_yu]

OK. i find the answer myself
keywords = “override_height=100”
thanks!

[apex_yu]

sorry , another questoin ,
as in the above code, the table seems freeze,
without scroll bar, can i have some hints ,
thanks

[ash2shukla]

Hi @apex_yu,

If you aren’t sure about your datatable height I’d recommend leaving the override_height argument.
I am unable to reproduce the table freezing issue at my end but I think if you will override view port height that’s less than the table height it will hide last few rows, which might look like a table freeze. For resolving this pass the same height as of the view port into the DataTable as a argument.
Check this GIF for this explanation in action,

Hope it helps!

[apex_yu]

thanks you ! @ash2shukla

[apex_yu]

one more things is the example you provided did have “Column” name, i thinks its better to provide a complete function thanks~
so that as i newbie like it would help me a lot if you have a complete guide and function
and also the example provide i hope it does match the demo you show in read me~
thanks~

[ash2shukla]

Hey @apex_yu,

You can pass the column name in TableColumn object something like this,

columns = [
TableColumn(field=“x”, title=“this is column name x”)
]

The reason why I haven’t given it in docs thoroughly is because it’s not really a feature of streamlit-bokeh-events it’s more on Bokeh’s side, You can lookup Bokeh DataTables documentation for more options.

Also I love the idea of having already available functions for the common tasks in the library itself but the streamlit-bokeh-events is a little lower level, so that you can create your own utility functions by wrapping these event handlers as event handling varies widely user to user.

Hope it helps !

[apex_yu]

thanks! @ash2shukla

[erezrot]

Hi @ash2shukla

May I ask if you can please add use_container_width parameter support.
without it I’m having an issue to maintain the table aspect ratio on small screens.

Thanks

[ash2shukla]

Hey @erezrot,

Surely will look into it. Thanks for pointing out the issue!

[erezrot]

Thank you @ash2shukla
One more thing I observed.
If I set refresh_on_update to true and give it another input, the table is changed but the selected rows are not initialized and the results are still related to the previous data table.
Do you have any idea how can I handle this scenario?
Thanks

[ash2shukla]

Hi @erezrot,

A little late but check this topic, I tried to create a wrapper that should be able to resolve your queries,

Complete Bokeh DataTable Example using streamlit-bokeh-events

Hi guys, I have seen a couple of questions around DataTable. I feel the user needs to be moderately comfortable with bokeh in order to use the events component easily. As the DataTable comes up quite often I thought it would be nice to have a gist around the same. This gist is an attempt to address the questions asked around DataTables in bokeh. Hope it makes someone’s life a little easier ! [snippet] PS. You need to get the provide_state decorator from state module. you can…

Regards,
Ashish.

[blob123]

Many thanks @ash2shukla for this awesome data table example…
But how could it be possible to display the whole dataframe without the scroll bar (in your example) ?
And how to rename columns … instead of “null” ?

[blob123]

@ash2shukla, sorry for this question, but by any means would it be possible to be able to move manually one dot in the scatter plot and get eventually the dataframe values changed accordingly ??

[ash2shukla]

I have fixed this in the latest datatable example, Complete Bokeh DataTable Example using streamlit-bokeh-events please check this.
In order to show the whole dataframe just adjust the viewport height accordingly.

[ash2shukla]

Never say sorry for asking a question !
Can you elaborate more on it ?
If you mean that selecting one dot in scatter plot and getting the corresponding values then you can definitely get this done by binding the “tap” event in bokeh.

[blob123]

I was rather thinking of moving one dot in the scatter plot in order to change its coordinates (x, y)…

[blob123]

@ash2shukla, any thoughts about this ?

I acknowledge this is tricky.

[ash2shukla]

Hi @blob123 ,

Sorry for late reply.
You can look into PointDrawTool in Bokeh for this. This is one link that I had come across earlier when I was searching for something similar, python - Bokeh - How to Click and Drag? - Stack Overflow. Though finding the x, y for a certain glyph can be a little challenging.
I am not sure what your usecase is but try looking into drawable canvas component of @andfanilo GitHub - andfanilo/streamlit-drawable-canvas: Do you like Quick, Draw? Well what if you could train/predict doodles drawn inside Streamlit? Also draws lines, circles and boxes over background images for annotation., that might do the job for you.

Hope it helps!

[andfanilo]

@blob123

I was rather thinking of moving one dot in the scatter plot in order to change its coordinates (x, y)…

Huh, that’s a really interesting idea! but I think you’ll need to build a proper component for this (I don’t think DrawableCanvas will fit the job either)

• For example using HighCharts drag&drop module
• There’s a D3.js example you can try reimplementing from my D3 Streamlit demo

I don’t have a proper easy high-level solution for this unfortunately whenever there’s interactivity involved it does go into JS territory…

I’ll check later this month if I can do a thing

Fanilo