[Poc] Implement collapsible container as a custom component #1042

nadijagraca · 2025-02-28T10:01:52Z

Description

This PR is meant to create collapsible container as a custom component.
CollapsibleContainer component (for now) needs to be used within FlexContainer component (component that mimics flex layout).

Discussion points:

should we use background color in the collapsible container
is the "open/close" arrow prominent enough in the layout

Notice

I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":
- I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
- I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
- I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
- I have not referenced individuals, products or companies in any commits, directly or indirectly.
- I have not added data or restricted code in any commits, directly or indirectly.

for more information, see https://pre-commit.ci

…izro into dev/styled-containers

for more information, see https://pre-commit.ci

…izro into dev/styled-containers

for more information, see https://pre-commit.ci

github-actions · 2025-02-28T10:04:21Z

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2025-02-28 13:40:18 UTC
Commit: 9511ce1

Compare the examples using the commit's wheel file vs the latest released version:

for more information, see https://pre-commit.ci

…izro into dev/styled-containers

huong-li-nguyen

I just took a quick look—this works really well inside the FlexLayout! 🚀

I made some refactors in this PR: #1002, which also impacts your PR. It might be worth rebasing your branch on that one instead.

Regarding your question about coloring, I believe this should be controlled by setting theme="XX". However, we could check with J. if we want a different default for collapsible containers compared to regular containers (currently, the default is no styling). However, I agree with you, that collapsible containers should probably come pre-styled (I don't have a preference here whether it should be outlined or filled) as otherwise it's a bit difficult to visually distinguish where the collapsible container starts / ends.

huong-li-nguyen · 2025-03-02T16:04:57Z

vizro-core/examples/scratch_dev/components.py

+        return html.Div(
+            children=[
+                html.Div(
+                    id=f"{self.id}_title",
+                    children=[
+                        html.H3(self.title, className="container-title"),
+                        html.Span("keyboard_arrow_up", className="material-symbols-outlined", id=f"{self.id}_icon"),
+                    ],
+                    className="collapsible-container-header",
+                ),
+                dbc.Collapse(
+                    id=self.id,
+                    children=components_container,
+                    is_open=True,
+                ),
+            ],
+            className="bg-container",
+        )


Might be good to base this PR on this PR first: #1002

I refactored this part so it uses dbc.Container instead of html.Div. Hopefully it will work the same then 🤞

huong-li-nguyen · 2025-03-02T16:06:34Z

vizro-core/examples/scratch_dev/assets/css/custom.css

-#old-line-height p {
-    line-height: 1;
-    margin-bottom: 0.5rem;
+.bg-container {


I've changed some of the CSS here in #1002

huong-li-nguyen · 2025-03-02T16:06:49Z

vizro-core/examples/scratch_dev/assets/css/custom.css

+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-right: 12px;


Suggested change

padding-right: 12px;

Would remove so it's equal space on the left and right

vizro-core/examples/scratch_dev/assets/css/custom.css

huong-li-nguyen · 2025-03-02T16:09:20Z

vizro-core/examples/scratch_dev/app.py

+                    ],
+                    layout=vm.Layout(grid=[[0, 0, 0, 0], [1, 1, 1, 1]]),
+                ),
+            ]
        )
    ],


Could you add the example of how this looks inside a grid? Is it completely unusable? 😄

huong-li-nguyen · 2025-03-02T16:18:27Z

vizro-core/examples/scratch_dev/app.py

-            ),
+        FlexContainer(
+            components=[
+                CollapsibleContainer(


Did you try to control the scroll bar? e.g. is it possible that it expands to the available space only such that no scroll bar appears? 🤔 I think this can eventually get a bit tricky, but there should be a way how users could eventually control it

vizro-core/examples/scratch_dev/assets/css/custom.css

antonymilne · 2025-03-03T09:53:38Z

This is looking great, nice work @nadijagraca!

Just a few questions for now, for @huong-li-nguyen and/or @nadijagraca:

What is the plan for this component compared to vm.Container? Will every single vm.Container now be inside a dbc.Collapse? Or is there a new argument collapsible=True/False to turn on/off this behaviour? Do we want to make it possible for users to specify whether the container should be open or closed by default?
How is this approach better/worse/different from dbc.Accordion? At a glance I guess:

dbc.Collapse is better than dbc.Accordion because an accordion really expects multiple items whereas we just want to apply this to a single container
dbc.Accordion comes with the rotating arrow built in, while here you needed to provide the clientside callback to do that

Should our nav/controls side panel collapse in the same way as we do here? This would mean we don't need extra custom code for rotating the arrow like I think we have now.

[pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci more clientside callback to component build

huong-li-nguyen · 2025-03-04T14:12:43Z

What is the plan for this component compared to vm.Container? Will every single vm.Container now be inside a dbc.Collapse? Or is there a new argument collapsible=True/False to turn on/off this behaviour? Do we want to make it possible for users to specify whether the container should be open or closed by default?

We can go into more detail later, but for now, my understanding is that this should remain a custom component. It doesn't work well within a grid and only functions properly inside a FlexContainer. To incorporate this into vizro-core, we would need to:

Properly enable FlexLayout first.
Either set the default to FlexLayout (which you and I previously discussed and decided against) or find a way for it to programmatically switch to FlexLayout if a collapsible container is detected. This part is still unclear.

However, I don't think we need to wait for publishing this custom component as it's ready to use as long as you put it inside a FlexLayout or you have the grid and no other component on screen 😄 And in the meantime we can work on the missing points above.

How is this approach better/worse/different from dbc.Accordion? At a glance I guess:

dbc.Collapse is better than dbc.Accordion because an accordion really expects multiple items whereas we just want to apply this to a single container

dbc.Accordion comes with the rotating arrow built in, while here you needed to provide the clientside callback to do that

Everything you mentioned above and:

With dbc.Collapse, we have more flexibility in terms of collapse behavior. dbc.Accordion only collapses vertically, while dbc.Collapse can collapse both vertically and horizontally: https://dash-bootstrap-components.opensource.faculty.ai/docs/components/collapse/
dbc.Accordion comes pre-styled, so you'd need to disable styles for hover, focus, and normal modes. On the other hand, dbc.Collapse comes unstyled, which is easier to work with if you just want to wrap components inside.

Should our nav/controls side panel collapse in the same way as we do here? This would mean we don't need extra custom code for rotating the arrow like I think we have now.

The side panel collapse is actually similarly implemented (@nadijagraca did that one as well, and there is custom JS code that also rotates the icons - correct me here if I am wrong @nadijagraca ). Our side panel however collapses side ways, so the starting position is different. But I think both need to rotate 180 degrees, so if we can consolidate code there, then that sounds great, but I'll leave that to @nadijagraca who knows best 👍

Found it: https://github.com/mckinsey/vizro/blob/main/vizro-core/src/vizro/static/js/models/dashboard.js#L32-L66

huong-li-nguyen and others added 30 commits February 10, 2025 10:20

Add rough POC on how styling can be done

4f90d82

Style modebar and change position

07caeb4

Make charts transparent in app only for now

8d8b7d0

[pre-commit.ci] auto fixes from pre-commit.com hooks

5cd10fe

for more information, see https://pre-commit.ci

Merge branch 'main' into dev/styled-containers

5652dac

Tidy

38343ec

[pre-commit.ci] auto fixes from pre-commit.com hooks

6179c2a

for more information, see https://pre-commit.ci

Merge branch 'main' into dev/styled-containers

352be9a

Update custom.css

74e9baa

Add card to check compatibility

33f028f

[pre-commit.ci] auto fixes from pre-commit.com hooks

7c8085b

for more information, see https://pre-commit.ci

Fix re-sizing

71942ac

Merge branch 'dev/styled-containers' of https://github.com/mckinsey/v…

1637d5f

…izro into dev/styled-containers

[pre-commit.ci] auto fixes from pre-commit.com hooks

869cde9

for more information, see https://pre-commit.ci

Use dbc.Container and update CSS

46db73f

Add unstyled container to example

0e5b6d7

[pre-commit.ci] auto fixes from pre-commit.com hooks

8a41c26

for more information, see https://pre-commit.ci

Update docs

dcfdaec

Lint

e494abb

Merge branch 'dev/styled-containers' of https://github.com/mckinsey/v…

855bc95

…izro into dev/styled-containers

Update 20250217_105619_huong_li_nguyen_styled_containers.md

001c51f

Merge branch 'main' into dev/styled-containers

ad08fd5

Remove non-existing docs section

e5925fa

Update docs

dd2d3d8

Merge branch 'main' into dev/styled-containers

68cbf35

[pre-commit.ci] auto fixes from pre-commit.com hooks

e8071b0

for more information, see https://pre-commit.ci

Add cross-reference link to custom css

a8bb0a7

[pre-commit.ci] auto fixes from pre-commit.com hooks

67c7bb4

for more information, see https://pre-commit.ci

Merge branch 'main' into dev/styled-containers

6e78d22

Quick POC on theme

2b16ead

nadijagraca requested review from Joseph-Perkins, antonymilne, maxschulz-COL and lingyielia as code owners February 28, 2025 10:01

petar-qb changed the title ~~[Po] Implement collapsible container as a custom component~~ [Poc] Implement collapsible container as a custom component Feb 28, 2025

huong-li-nguyen and others added 10 commits March 1, 2025 21:22

Merge branch 'main' into dev/styled-containers

f8aaef9

Lint

963113d

Update docs and examples

9d20fef

Tidy code implementation of theme

8a6b993

Refactor code and docs

4e0b0ca

Update docs

98bf10c

[pre-commit.ci] auto fixes from pre-commit.com hooks

9e3749b

for more information, see https://pre-commit.ci

Revert change in hatch.toml

755472a

Merge branch 'dev/styled-containers' of https://github.com/mckinsey/v…

010688f

…izro into dev/styled-containers

Lint

5788c35

huong-li-nguyen reviewed Mar 2, 2025

View reviewed changes

vizro-core/examples/scratch_dev/assets/css/custom.css Outdated Show resolved Hide resolved

huong-li-nguyen reviewed Mar 2, 2025

View reviewed changes

vizro-core/examples/scratch_dev/assets/css/custom.css Outdated Show resolved Hide resolved

huong-li-nguyen reviewed Mar 2, 2025

View reviewed changes

vizro-core/examples/scratch_dev/assets/css/custom.css Outdated Show resolved Hide resolved

huong-li-nguyen reviewed Mar 2, 2025

View reviewed changes

vizro-core/examples/scratch_dev/assets/css/custom.css Outdated Show resolved Hide resolved

nadijagraca added 3 commits March 3, 2025 13:12

poc collapsible container

232d4cd

[pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci more clientside callback to component build

address pr comments and add argument to custom component

7f6a439

adjust callback

66aefb6

nadijagraca self-assigned this Mar 4, 2025

nadijagraca force-pushed the poc/collapsible-container-component branch from c2c6995 to 66aefb6 Compare March 5, 2025 13:05

nadijagraca requested a review from stichbury as a code owner March 5, 2025 13:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Poc] Implement collapsible container as a custom component #1042

[Poc] Implement collapsible container as a custom component #1042

nadijagraca commented Feb 28, 2025

github-actions bot commented Feb 28, 2025 •

edited

Loading

huong-li-nguyen left a comment

huong-li-nguyen Mar 2, 2025

huong-li-nguyen Mar 2, 2025

huong-li-nguyen Mar 2, 2025

huong-li-nguyen Mar 2, 2025

huong-li-nguyen Mar 2, 2025

antonymilne commented Mar 3, 2025 •

edited

Loading

huong-li-nguyen commented Mar 4, 2025 •

edited

Loading

[Poc] Implement collapsible container as a custom component #1042

Are you sure you want to change the base?

[Poc] Implement collapsible container as a custom component #1042

Conversation

nadijagraca commented Feb 28, 2025

Description

Notice

github-actions bot commented Feb 28, 2025 • edited Loading

View the example dashboards of the current commit live on PyCafe ☕ 🚀

vizro-core/examples/scratch_dev

vizro-core/examples/dev/

vizro-core/examples/visual-vocabulary/

vizro-ai/examples/dashboard_ui/

huong-li-nguyen left a comment

Choose a reason for hiding this comment

huong-li-nguyen Mar 2, 2025

Choose a reason for hiding this comment

huong-li-nguyen Mar 2, 2025

Choose a reason for hiding this comment

huong-li-nguyen Mar 2, 2025

Choose a reason for hiding this comment

huong-li-nguyen Mar 2, 2025

Choose a reason for hiding this comment

huong-li-nguyen Mar 2, 2025

Choose a reason for hiding this comment

antonymilne commented Mar 3, 2025 • edited Loading

huong-li-nguyen commented Mar 4, 2025 • edited Loading

github-actions bot commented Feb 28, 2025 •

edited

Loading

antonymilne commented Mar 3, 2025 •

edited

Loading

huong-li-nguyen commented Mar 4, 2025 •

edited

Loading