How to Order Filter Options According to Predefined Categorical Sequence in Vizro

[fpeucelle]

Question

Dear Vizro Team,

I hope this message finds you well. I am currently working on a dashboard and have encountered a challenge regarding the ordering of filter options. Specifically, I aim to have a filter display its options according to a predefined categorical order, rather than the default alphabetical arrangement.

Context:

In my dataset, the 'Circunscripción' column is defined as an ordered categorical variable with a specific sequence. However, when implementing a filter for this column in Vizro, the options appear alphabetically instead of following the intended order.

Issue:

Despite defining the 'Circunscripción' column as an ordered categorical variable, the filter options are displayed alphabetically.

Request:

Could you please advise on how to configure the filter in Vizro to display options according to the predefined categorical order? Any guidance or recommendations would be greatly appreciated.

Thank you very much for your assistance.

Best regards, Francisco

Code/Examples

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

# Define the order of the districts directly in the code
orden_circunscripciones = ["Total", "Trelew", "Comodoro Rivadavia", "Esquel", "Puerto Madryn", "Rawson", "Sarmiento"]

# Create example DataFrame
data = {
    "año": [2012, 2012, 2012, 2012],
    "Circunscripción": ["Esquel", "Trelew", "Rawson", "Total"],
    "Casos": [1, 3, 2, 6]
}
df = pd.DataFrame(data)

# Convert "Circunscripción" to an ordered categorical type
df["Circunscripción"] = pd.Categorical(
    df["Circunscripción"],
    categories=orden_circunscripciones,  # Order defined in the code
    ordered=True
)

# Sort the DataFrame respecting the defined order
df = df.sort_values(by="Circunscripción")

# Create the bar chart
figura = px.bar(df, x="Circunscripción", y="Casos", title="Cases by District")

# Create the graph component
grafico = vm.Graph(figure=figura)

# Create the page containing the graph with a filter
pagina = vm.Page(
    title='Bar Chart of Cases by District',
    components=[grafico],
    controls=[
        vm.Filter(column="Circunscripción", selector=vm.RadioItems())
    ],
)

# Create the dashboard with the page
dashboard = vm.Dashboard(pages=[pagina])

# Run the dashboard
Vizro().build(dashboard).run()

Which package?

vizro

Code of Conduct

• I agree to follow the Code of Conduct.

[petar-qb]

Hello @fpeucelle 👋

Based on the Vizro documentation and the vm.RadioItems configuration API, you can specify a custom order for the RadioItems options by passing them in the desired sequence.

Here is an example of how to achieve this:

controls=[
    vm.Filter(column="Circunscripción", selector=vm.RadioItems(options=["Total", "Trelew", "Esquel", "Rawson"])),
]

This will set the custom order for the options. Your example should look like the following:

I will be closing this issue, but if you have any further questions on the same topic or need additional clarification, feel free to reopen it or ask here! 😃

[antonymilne]

Reopening the issue because maybe the current behaviour isn't quite right and this should be a feature request... What Petar said is absolutely right, but I think @fpeucelle's idea that categorical variables with a defined order should have the order maintained by default rather than us re-ordering it alphabetically is a great point, and maybe we should change our behaviour to respect the categorical order if it's defined.

@petar-qb potentially this would mean we change the sorting algorithm used here:

vizro/vizro-core/src/vizro/models/_controls/filter.py

Line 319 in 0d66cd7

return sorted(set(targeted_data) - {ALL_OPTION})

Delegating to the pandas sorting algorithm rather than using sorted sounds like an improvement already because then I guess it could behave as follows:

• sort by categorical order if defined (as for @fpeucelle case here)
• sort by alphabet otherwise (like we do now)

Ideally whatever we do would be compatible when we switch to narwhals (see #286) so that it's not pandas-specific though.

[petar-qb]

Thanks for the clarification, @antonymilne!

Just to confirm: We have to avoid enforcing alphabetical ordering when Filter.column is targeting a pd.Categorical column? Otherwise we do alphabetical ordering?

[antonymilne]

Yes, but I think this would work implicitly if we rely on pandas sort_values or some other pandas sort function rather than sorted. That way we wouldn't need any checks about column type or anything, just rely on pandas sorting algorithm rather than Python's generic sorted. See https://pandas.pydata.org/docs/user_guide/categorical.html#sorting-and-order.

Basically I think our options here are:

1. rely on some built in datataframe sorting, which would respect categorical ordering and, if that's not defined, go to some default like alphabetical
2. expose some option so that people could sort in different ways: alphabetical, data source order, ascending/descending. Or, probably better since it's fully generic, introduce some new sort_column field where a user can specify a column to sort by (defaults to just column as now). This would be more powerful but probably not worth doing given that no one has ever asked for this
3. just keep sorting in one fixed way (currently alphabetical) and users who want to do otherwise need to specify the order manually - this is our current solution and it's ok for static filters but obviously not possible for dynamic ones

It's not hugely important but I think option 1 would be worth checking since it might be easy to do and be generally useful.
The main issue is that ideally we'd have something that works beyond pandas and with narwhals instead, and I'm not sure what that would be - we'd need to check their docs.