Ability to create control headers with horizontal rulers

[huong-li-nguyen]

What's the problem this feature will solve?

@maxchristlmck raised that he would like to have the ability to create grouping headers for the controls with a horizontal ruler in place, see this draft PR: #81

Describe the solution you'd like

Ability to add control headers and horizontal rulers

Alternative Solutions

Additional context

Code of Conduct

• I agree to follow the Code of Conduct.

[huong-li-nguyen]

@maxchristlmck, first of all thanks for raising this draft PR and trying to solve above yourself - much appreciated! 🚀
I've looked into your draft PR and created an issue to discuss alternative solutions. :)

The above behavior can be achieved without creating two new models as in your current draft PR but by leveraging the existing Card component. It wasn't clear, as CSS was missing for horizontal rulers on our side! In general you can create horizontal rulers with markdown as well, using either ---, ___ or ***. I created a quick commit here to show how it can look like: main...demo/extend_card.

@maxchristlmck - would that potentially work for you? The only thing you would have to add as a user on top would be a custom CSS file where you overwrite some of the default properties of the Card.

@antonymilne - The above change would require adding the Card component to the ControlType. What do you think? Both the Card and Button models seem to be quite useful as a ControlType so they can live on the left-side.

[maxchristlmck]

Hi Li, your suggestion also works perfectly for me! Happy to go forward with this one :)

[antonymilne]

Thank you for very much for the idea and drafting a PR @maxchristlmck!

I completely understand why this would be useful but do have some qualms about adding Card as a ControlType @huong-li-nguyen. Probably best to discuss over Zoom since it's quite a complex topic 🙂

Just to understand @maxchristlmck, could you see yourself wanting to put anything else in the control panel beyond just the title of the group and a horizontal line? e.g. writing a whole paragraph of text in markdown?

[huong-li-nguyen]

Hey @maxchristlmck !

We had some internal technical discussions on what could solve the above issue in a clean and declarative way. In the end, we decided that the currently best route would be via a custom component as you already had it, but maybe a cleaner way of writing a custom component would be the example below. The ControlGroup is a custom component that lets you easily group controls together and add a title to it:

To make it look nicer, you can add some custom CSS into a .css file and add it to the assets folder, e.g., to style the control_group_container class:

my_css.css

.control_group_container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

app.py

from typing import List, Literal

from dash import html

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

df_gapminder = px.data.gapminder()


class ControlGroup(vm.VizroBaseModel):
    """Container to group controls."""

    type: Literal["control_group"] = "control_group"
    title: str
    controls: List[ControlType] = []

    def build(self):
        return html.Div(
            [html.H4(self.title), html.Hr()] + [control.build() for control in self.controls],
            className="control_group_container",
        )
vm.Page.add_type("controls", ControlGroup)

page1 = vm.Page(
    title="Relationship Analysis",
    components=[vm.Graph(id="scatter", figure=px.scatter(df_gapminder, x="gdpPercap", y="lifeExp", size="pop")),],
    controls=[
        ControlGroup(
            title="Group A",
            controls=[
                vm.Parameter(
                    targets=["scatter.x"],
                    selector=vm.Dropdown(
                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose x-axis"
                    ),
                ),
                vm.Parameter(
                    targets=["scatter.y"],
                    selector=vm.Dropdown(
                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="lifeExp", title="Choose y-axis"
                    ),
                ),
            ],
        ),
        ControlGroup(
            title="Group B",
            controls=[
                vm.Parameter(
                    targets=["scatter.size"],
                    selector=vm.Dropdown(
                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="pop", title="Choose bubble size"
                    ),
                )
            ],
        ),
    ],
)

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

Result

Thanks again for raising the issue and creating a PR! 🚀 Without it, we wouldn't have found CSS missing for horizontal rulers. Hopefully above helps :) I'll leave this issue open in case it's helpful for other users and if many people up-vote it, we might also add the ControlGroup or something similar as a component to our source code 👍

Hope that helped!
Li

[antonymilne]

We had another request for this. The above solution isn't working but should do so again after #903 is merged.