Streamlit: Ability to accept input from Charts, Tables, etc.

[tvst]

What if every output element could also serve as an input widget?

Then you could do things like:

• User clicks on chart datapoint → python script receives the value for that data point and does something with it
• User zooms into a chart → python script receives the new zoom bounds and does something with it
• User clicks on dataframe rows → python script receives row index and does something with it
• User click on two points on an image → python script draws a rectangle touching those points
• User edits a row on a dataframe → python script receives the new dataframe

Related discussions:

• https://discuss.streamlit.io/t/hover-and-click-events/586
• https://discuss.streamlit.io/t/setting-data-from-javascript/965/2

[MarcSkovMadsen]

Eventually you will be building that kind of functionality (is my guess). Very much needed to provide awesome interactivity. :-)

[markopy]

Other issues that depend on having this kind of functionality: #298 #271

[tvst]

Another one: ability to get the time from an audio widget. See forum thread here.

[treuille]

If you want to select rows in a table, you can use this somewhat inelegant workaround, which will scale up to about 1000 rows or so. 👍

[MarcSkovMadsen]

Here is just my few cents.

If we supported the ipywidgets then we would also get access to the awesome qgrid/ slickgrid.

That grid is really great to read, sort and filter. And it's fast. But I guess the looks of it is not very Streamlit like.

[MarcSkovMadsen]

You can see plotly's new FigureWidget in action here and how it plays well with the ipywidgets and supports call backs.

https://plot.ly/python/figurewidget/
https://plot.ly/python/figurewidget-app/

[rmitsch]

That would be a great feature, since it might allow to support brushing & linking between charts in streamlit apps. For reference, dc.js is a cool JS chart framework that focuses on getting exactly this kind of interaction/dependency between multiple charts right (example). That kind of functionality would be awesome in streamlit.

[torwag]

Esp. Tables as inputs or resp. changeable, like a spreadsheet, would allow using streamlit.io as a replacement for a lot of excel-file based solutions, which are floating around in the millions in cooperate settings.
Streamlit.io would enable a programmer to really get the logic right, access databases, transfer data, have sanity checks, etc. using pandas resp. python in a single file, but still allows everyone to contribute or change data of that "online-spreadsheet"-system.

[treuille]

@torwag : I think this is a super valid use case. Can you please tell me a bit more about the setup you envision. Would you want only a single "spreadsheet" (i.e. table), or would you want graphs etc? Do you want widgets / sidebar? Also, what industry are you working in? Thanks!

[torwag]

@treuille My vision would be to have all possibilities, like graphs, buttons, sliders etc. but also have editable tables, thus people can contribute data to it. Possibilities are endless.
From inventory where people type in the stock amount to annotation of medical data.

I am in an university setting, and here we would have both academic and administrative use for such a solution. E.g. staff and lecture dashboards to show all kind of information on a single page. But enable the user to make inputs where necessary.

[hcoohb]

I would love also to have the output from a selection on a graph.
Plotly allows to select certain points, and I wish I could use this as a input for some other graphs displaying more details...

[tvst]

Just a quick update: we're currently brainstorming a few other features that touch on this one, so it would be great to hear some more use cases from you all, to better inform our discussion.

Even better if you provide a tiny toy example with some arbitrary API! For example:

st.write("Pick a user to edit")

# In this example, st.Table (with capital T) returns an object with properties you can use.
# This is not something that exists today. Just one of the many possible APIs for this...
table = st.Table(users_table)

if table.selected_row is not None:
  user = users_table[table.selected_row]
  show_editor(user)

[MarcSkovMadsen]

But if the functionality at its core could be based on being able to subscribe to any event. That would be very powerfull. The core functionality could then be wrapped into a simpler api for tables, charts etc.

With Dash you can add a callback to any kind of event. In Panel you can do reactive programming in Python using Streams. And here is an example of a Stream from the front end http://holoviews.org/reference/streams/bokeh/RangeXY.html. That concept is really powerfull but maybe too much for Streamlit?

[mstump]

I'm interjecting as a hopeful user of streamlit, we're evaluating a transition from Bokeh which uses slick-grid as it's table implementation. If you do decide to introduce an editable datatable can we add ag-grid to the evaluation list? Slickgrid is not very attractive, has a number of bugs related to sortable grouped columns, and has odd editing behavior where cell state for drop-down columns isn't retained until you switch focus away from the cell. There are some working python bindings for ag-grid which may be a good starting point.

[MarcSkovMadsen]

Here is a an example use case from a user https://discuss.streamlit.io/t/plotly-click-events-in-streamlit/1419

[treuille]

@mstump : Thanks for putting ag-grid on our radar. It looks pretty sweet!

[treuille]

Thanks for providing that context, @MarcSkovMadsen! My current though (happy to be convinced otherwise) is that @tvst's suggestion above would allow us to integrate this kind of table selection (or point selection, respectively) within Streamlit's event model.

The main advantage of this approach is simpler state handling, since the user doesn't need to think about explicitly mutating program state.

The main disadvantage is performance (for now).

Are there are things I'm missing?

[treuille]

Oh, and happy new year! 🎆

[adamkgoldfarb]

Just chiming in that the geospatial use case is pretty apparent: if one could take the st.Table's selections and then set an opacity/color on a scatter mark or polygon with those selections, that would be immediately useful for visualizing subsets of your geospatial data. Here's to hoping that the API feeds nicely into the emerging pydeck integration!

[katsou55]

Hey guys, my 2 cents: another use case you might consider in the industry is data annotation. I have a webapp made of Jupyter + ipywidgets + qgrid + voila that currently allows not only my stakeholders to navigate and explore the data but most importantly, they can annotate data. Also, I have a section to serve "low confident" predictions and downstream improve my models, i.e. active learning.

Therefore, IMHO considering something like qgrid may add plenty of value to Streamlit (ps: that's why I am still using this stack instead of streamlit 😅)

Recap, 2 great use case for qgrid are:

• data annotation
• active learning (for tabular or text data)

Hope it helps, cheers!

[dansbecker]

Another use case for selection in tables:

I'd like to use rows in a table to control what I graph elsewhere in my app (roughly what you'd get if you could embed an st.checkbox in each row of an st.table.)

Forum post about it here

[erwindassen]

Another tool that could make this feature request easier to implement would be to use d-tale: https://pypi.org/project/dtale/ It uses flask as a back-end and already integrates with jupyter so perhaps with some hacking it could take care of all interface elements with the dataframe inside streamlit? Just throwing ideas here.

[SimonBiggs]

An amazing editable react table/spreadsheet widget is the following:

https://blueprintjs.com/docs/#table/features.editing

Also an example of an editable table in a streamlit like project is the following:

https://mybinder.org/v2/gh/SimonBiggs/scriptedforms-examples/master?urlpath=scriptedforms/use/detailed-example.md (scroll down to the "table variables" heading)

Mentioned these in the following issue, but I'm going to close that one, as here is likely the best place for that.

https://github.com/streamlit/streamlit/issues/1345

[rsheftel]

There has been discussion of aggrid here and I use that in Jupyter Notebooks they are beautiful, and allow a wide range of functionality as well as fast.

There is a package of python bindings to wrap it here:

https://dgothrek.gitlab.io/ipyaggrid/

[Laksh1997]

Keen to see this feature manifest

[coffeewithbeer]

Has anything been developed for this? (even in pre-release). It is really worth noting that PlotLy has a FigureWidget class which would be great to get supported in Streamlit. It essentially makes it easy to click or zoom into / select areas of a plot, and lets you easily get a callback based on that.

I am currently trying to be able to get a Power BI alternative with Python, as Power BI is very limiting, but it would need something like this.

[zad0xlik]

Another tool that could make this feature request easier to implement would be to use d-tale: https://pypi.org/project/dtale/ It uses flask as a back-end and already integrates with jupyter so perhaps with some hacking it could take care of all interface elements with the dataframe inside streamlit? Just throwing ideas here.

I like this idea a lot! Have you tried integrating D-tale into a streamlit app? If so, can you share your method?

[marklkelly]

I'd like to be able to click on a row in a table and display relational child rows in another table. We also have a use case where we need to be able to 'flag' data in a table, and then re-calculate data in the table based on these flags

[jflam]

I would love to see this too. To create master/detail style data explorers, sometimes you want to render the data differently for a selected row. The multiselect workaround is ... clunky.

[profbiyi]

any update on the ability to do a callback, or update a data frame or chart from a database without running the whole code?

This feature is very important to me as I intent to switch completely away from Power BI

[PablocFonseca]

https://github.com/PablocFonseca/streamlit-aggrid

I implemented ag-grid for as a streamlit component. It's usable, but far from producion code.

after editing a value on the grid, it returns an updated dataframe.