Enabling in-depth user interaction through input widgets

[inigohidalgo]

Question

Hello!

Long time kedro user, first time vizro user :)

I'm testing out vizro for an app we want to build and I wanted to get your thoughts on whether this can be achieved within vizro, or whether there's a different way to approach this problem:

We have a kedro project which runs train-predict pipelines for many different targets and models, and we want to build one central web app to enable visualizing performance metrics. The kedro project is very structured in its config, all the different signals we predict have certain catalog entries matching a certain pattern. This same pattern is also represented in the kedro parameters, where we have

# parameters.yml
signals:
   signal_a:
     primary_key: ...
   signal_b:
      ...

# catalog.yml
signal_a_target:
  type: ...
signal_b_target:
  type: ...

From this structure I would like to enable this workflow:

1. The user is first presented with a dropdown of all the available signals which we are generating predictions from
2. Once the user has selected their desired signal, we load the target and the predictions from the kedro catalog
3. We perform the necessary joins, aggregations and performance metrics and display them in various tables and charts
4. bonus: In the parameters we have certain metadata about our signals, such as the primary key, the name of a datetime column etc. I would like to offer further configuration options to roll up the performance metrics at these different aggregation levels for slicing and dicing.

My question is whether this "flow" is available in vizro, where I expect an initial user interaction in order to actually load the data. I am coming from streamlit where this interactivity is available by default, as it is simply a python script, but I am not super sure about how to fit this flow into the build -> run structure in vizro, as I wouldn't actually have the data available until the user inputs something.

I've already solved the DataCatalog and ConfigLoader side of things, I am able to access them from within a script, and I have a list of these signal names, I am only asking about the vizro interactivity side of things.

Thanks! :)

Code/Examples

No response

Other information

No response

Which package?

vizro

Package version

No response

Python version

No response

OS

No response

Code of Conduct

• [X] I agree to follow the Code of Conduct.

[petar-qb]

Hi @inigohidalgo, and thanks for the great question. (Good to hear that you are using Kedro and Vizro together. ⭐)

Loading certan data based on user input is a very handy feature. The Vizro team also found it valuable and put it as a ticket on the roadmap. We will start working on this feature next week, and we'll let you know here when it's released.

Other things like applying joins, aggregations, performance metrics and displaying them in tables and charts are already something that is possible in Vizro. You can find more about customising charts in the Vizro documentation.

[SarthakNikhal]

@petar-qb Let me know if you need help with this

[inigohidalgo]

Thanks @petar-qb for your prompt response.

I was also looking for some thoughts from the vizro creators about whether this is the "right" way to work with vizro.

I am heavily influenced/biased by my experience with streamlit, and I realize it is not the most correct way of building applications, as it is simply a script which gets rerun over and over. So I wanted to know whether this execution flow is also the way you expect things to be done in vizro.

In streamlit I make heavy use of form submissions and st.stop to avoid unnecessary I/O, but I only need to use that in order to work around streamlit's simplistic execution flow.

[Joseph-Perkins]

Thanks for the context @inigohidalgo, I think I understand now!

Yes indeed, I can confirm that your intuition for the execution flow in Vizro is correct. Although that functionality is not currently available, in future it will be possible to allow a user to effectively initiate from the front-end a process to pass values to, and dynamically trigger a data refresh from, an external data connection (while the app is running)

This functionality is intended to enable users to do things such as pass values from vm.Parameter() selections to external parameterised data queries, in order to return only the relevant sub-set of data from the external data source to the relevant components in the running application (partly making use of the dynamic data functionality). This functionality is also intended to efficiently allow re-loading only the relevant data and components, so it seems that this may enable the user/execution flow you describe

(If there is no initial data returned to the front-end when the app first loads, then the relevant components can be set to handle empty dataframes without causing run time breakages - for example vm.Graphs() will already handle empty dataframes automatically, and custom charts or custom components can be written to handle empty dataframes in bespoke ways)

The development for this functionality will be under way next week, so I hope it will be OK if we get in touch to discuss the initial implementation and whether it solves the exact execution flows you have in mind with your Kedro pipeline(s)?

[inigohidalgo]

That sounds like a much saner approach, particularly the part about behavior when no data is returned. Thanks for the further detail Joseph.

I hope it will be OK if we get in touch to discuss the initial implementation and whether it solves the exact execution flows you have in mind with your Kedro pipeline(s)?

I look forward to it :)

[inigohidalgo]

I assume you all are in communication about this but @astrojuanlu @datajoely @deepyaman seems like a great usecase for the new ibis dataset

[datajoely]

Yes we we're literally just singing your praises @inigohidalgo 💪

[sumitmehta1025]

Hi Team, I am not sure if there is another thread that updates on the user input functionality in Vizro but I found this post relevant to what I am looking for (functionality mentioned in a post above by [Joseph-Perkins]). Can anyone confirm if this is now available in Vizro. Thanks a lot!

[petar-qb]

Hi @sumitmehta1025 👋

The feature for parameterised data loading is now available, allowing users to dynamically select which data source will be loaded into charts based on their input from the UI. You can find more information about it -> Parametrize data loading.

Also, more about Vizro data handling in general, you can find -> here.

[sumitmehta1025]

Hello @petar-qb and thank you for your response! Vizro is one of the best lirbary I have used thus far for dashboard :) It looks like parameterize data loading allows to randomly select from the dataframe, which is great! I am looking for what [antony.milne] has explained here https://community.plotly.com/t/vizro-a-high-level-framework-built-on-top-of-dash/81018/16. I found how to make selector as a component and used this in my code: vm.Page.add_type("components", vm.Dropdown).

I plan on using this and see how it goes, in case the "input" is already part of Vizro components or there is another way pls do let me know. Thanks again!