Dash-Mantine-Components Accordion Items Question

Dash Python
1

Hey everyone! So I’m currently trying my hand at building out a bit of an advanced charting platform, and below is a screenshot of the input configuration panel as it stands right now - when someone clicks the edit icon, it will pop out a different drawer or modal that will give you the full, advanced configuration options to play around with. However, I would also, ideally, like to present the user with some quick configuration options within the interface that I have here, if possible. Now, all of this being said, I was thinking that shifting over to the new Accordion interface like the one mentioned by @AnnMarieW here in these examples, along with the example in the mantine docs themselves, might be the best way to go about that, but I can’t quite figure out how to implement it in a clean fashion.

My current interface:
image

Thanks for any suggestions in advance!

2

Hi @dash-beginner
This looks cool! Can you give a little more detail about how you would like it to look and what you’ve tried so far?

3

Thanks! So, in my original post, I linked to a section of the accordion docs for the original Mantine package, and I tried to copy those examples verbatim with the Dash components and was having quite a bit of difficulty / I don’t think it quite captures what I’m looking for anymore. Ideally, what would happen, is that the card for a given timeseries might be able to expand downward (kind of like the spoiler component, but couldn’t quite get that to work properly either), exposing one or two dmc.Select dropdowns within the same paper component, if that makes sense? I don’t think I’m doing a great job at explaining this, really.

4

Hello @dash-beginner,

Still struggling with understanding what you are trying.

Can you just put the accordion / spoiler inside the card itself?

5

Hi, what I would offer as input is that you could work with some form of profile setup, in addition to all the accordion setup.

The profile setup would allow for a defined set of predefined settings that are pre-loaded from the server as well as for the user to add some presets.

You could use a drop-down wiith create option and dialog somewhere. This could be on on global level for all accordions or per accordion level (might be overkill)

1 Like
6

So this is what a given card looks like:

color="red.5"
checked=True
name="test_1"
variant="subtle"
size="md"

dmc.Paper(
            [
                dmc.Grid(
                    children=[
                        dmc.Col(
                            dmc.Checkbox(
                                checked=checked,
                                size="sm",
                                color=color,
                            ),
                            xs="content",
                        ),
                        dmc.Col(
                            dmc.Spoiler(
                                children=dmc.Text(name),
                                showLabel="Show more",
                                hideLabel="Hide",
                                maxHeight=50,
                            ),
                            xs="auto",
                        ),
                        dmc.Col(
                            dmc.ActionIcon(
                                DashIconify(
                                    icon="material-symbols:edit",
                                ),
                                variant=variant,
                                size=size,
                                n_clicks=0,
                            ),
                            xs="content",
                        ),
                        dmc.Col(
                            dmc.ActionIcon(
                                DashIconify(
                                    icon="material-symbols:close",
                                ),
                                color="red",
                                variant=variant,
                                size=size,
                                n_clicks=0,
                            ),
                            xs="content",
                        ),
                    ],
                    align="center",
                    gutter="xs",
                    columns=12,
                ),
            ],
            withBorder=True,
            p="xs",
        )

I had initially tried to add a Spoiler where you see it in this example, but it didn’t really seem to change anything as far as I can tell? Am I supposed to instead use the spoiler to wrap around the grid at the top level of the card?

7

Yeah, so I might be biting off a bit more than I can chew on this one, but the goal is to create a pretty advanced charting tool that I can build off of for any data, rather than having a bunch of silo-ed out app pages for each data source. The two primary areas that I’m trying to make dynamic are the ability to create/save views, and for each of those views to have a dynamic number of timeseries / configurations. So my general idea is to have default view configurations that someone could load in when they create a view (I think this is similar to what you were mentioning, if I understand you correctly?).

8

@dash-beginner You should check out @jinnyzor 's Dashboard-helper

It’s a great way to explore different datasets.

3 Likes
9

I’ll tack on, the dashboard-helper already has a couple of the things you are looking for:

Customized view - each chart can be customized and new ones added
Each chart has it’s own edit interface that opens in a “drawer” (dbc.offcanvas)
Each chart created has a pattern-matching id assigned by default.

Things you could alter:

  • provide backend df instead of front-end loaded
  • edit and remove some of the options in the accordion by adding a condition on the elements name
  • add default settings for your use case
  • Change the save layout location to go to a backend database for loading vs different users
10

Oh yeah! Can’t believe that this slipped my mind - I’ll absolutely step through your code to see how you handled all of that! Thank you!! :slight_smile:

3 Likes