Component for bi-directional communication with bokeh

Custom Components
21

Screenshot from 2020-12-24 16-17-26
Screenshot from 2020-12-24 16-17-261920×1080 81.9 KB

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

22

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

1 Like
23

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

24

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,

snippet
snippet1450×627 329 KB

Hope it helps!

25

thanks you ! @ash2shukla

26

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~

1 Like
27

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 ! :slight_smile:

28

thanks! @ash2shukla

29

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

1 Like
30

Hey @erezrot,

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

31

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

32

Hi @erezrot,

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

Regards,
Ashish.

33

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” ?

34

@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 ??

35

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.

36

Never say sorry for asking a question ! :slight_smile:
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.

37

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

38

@ash2shukla, any thoughts about this ?

I acknowledge this is tricky.

39

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!

40

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)

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

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

Fanilo