mckinsey / vizro

Vizro is a toolkit for creating modular data visualization applications.
https://vizro.readthedocs.io/en/stable/
Apache License 2.0
2.72k stars 142 forks source link

[Docs] Remove redundant provision of `id` in docs examples #713

Open huong-li-nguyen opened 2 months ago

huong-li-nguyen commented 2 months ago

We still have some examples where an id is provided to a component even though it is not required.

  1. Look through the code examples in our docs e.g. vizro-core/docs and vizro-ai/docs
  2. Remove the id from vm.Graph, vm.Table, vm.AgGrid or vm.Card if it is not required

When is it not required?

The id is normally not required if that component is not the target of any kind of action e.g. filter_interaction, export, filters or parameters. A good rule of thumb is, if the id appears only once in the entire app configuration, it's probably not required.

Example of a redundant id provision (and the first example where you can remove it from the docs):

In the first example the id="scatter_chart" is not required, because the Graph is not being targeted by any action. Also the id only appears once in the entire app configuration. In the second example it is required though, because it is now the target of the Filter.

from vizro import Vizro
import vizro.plotly.express as px
import vizro.models as vm

iris = px.data.iris()

page = vm.Page(
    title="My first page",
    components=[
        vm.Graph(id="scatter_chart", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()

Example where the id is required:

from vizro import Vizro
import vizro.plotly.express as px
import vizro.models as vm

iris = px.data.iris()

page = vm.Page(
    title="My first page",
    components=[
        vm.Graph(id="scatter_chart", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
        vm.Graph(id="scatter_chart2", figure=px.scatter(iris, x="petal_length", y="sepal_width", color="species")),
    ],
    controls=[
        vm.Filter(column="petal_length",targets=["scatter_chart"],selector=vm.RangeSlider(step=1)),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
bhavanaeh commented 1 month ago

Hi, I'd like to help here :)

huong-li-nguyen commented 1 month ago

Perfect - thank you! 👍

antonymilne commented 1 month ago

@bhavanaeh Did this issue make any progress? No worries if not, but it would be great to know so we can figure out if there's still something to be done here.