Add tree component

[Godisemo]

Add tree component.

Example app below

import dash_mantine_components as dmc
from dash import Input, Output, callback, Dash, _dash_renderer
import json

_dash_renderer._set_react_version("18.2.0")

app = Dash()

data = [
    {
        "label": "src",
        "value": "src",
        "children": [
            {
                "label": "components",
                "value": "src/components",
                "children": [
                    {"label": "Accordion.tsx", "value": "src/components/Accordion.tsx"},
                    {"label": "Tree.tsx", "value": "src/components/Tree.tsx"},
                    {"label": "Button.tsx", "value": "src/components/Button.tsx"},
                ],
            },
        ],
    },
    {
        "label": "node_modules",
        "value": "node_modules",
        "children": [
            {
                "label": "react",
                "value": "node_modules/react",
                "children": [
                    {"label": "index.d.ts", "value": "node_modules/react/index.d.ts"},
                    {
                        "label": "package.json",
                        "value": "node_modules/react/package.json",
                    },
                ],
            },
            {
                "label": "@mantine",
                "value": "node_modules/@mantine",
                "children": [
                    {
                        "label": "core",
                        "value": "node_modules/@mantine/core",
                        "children": [
                            {
                                "label": "index.d.ts",
                                "value": "node_modules/@mantine/core/index.d.ts",
                            },
                            {
                                "label": "package.json",
                                "value": "node_modules/@mantine/core/package.json",
                            },
                        ],
                    },
                    {
                        "label": "hooks",
                        "value": "node_modules/@mantine/hooks",
                        "children": [
                            {
                                "label": "index.d.ts",
                                "value": "node_modules/@mantine/hooks/index.d.ts",
                            },
                            {
                                "label": "package.json",
                                "value": "node_modules/@mantine/hooks/package.json",
                            },
                        ],
                    },
                    {
                        "label": "form",
                        "value": "node_modules/@mantine/form",
                        "children": [
                            {
                                "label": "index.d.ts",
                                "value": "node_modules/@mantine/form/index.d.ts",
                            },
                            {
                                "label": "package.json",
                                "value": "node_modules/@mantine/form/package.json",
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        "label": "package.json",
        "value": "package.json",
    },
    {
        "label": "tsconfig.json",
        "value": "tsconfig.json",
    },
]

app.layout = dmc.MantineProvider(
    [
        dmc.Group(
            [
                dmc.Tree(
                    id="tree",
                    allowRangeSelection=False,
                    # checkOnSpace=True,
                    clearSelectionOnOutsideClick=True,
                    # expandOnClick=False,
                    # expandOnSpace=False,
                    levelOffset="xl",
                    selectOnClick=True,
                    data=data,
                    checkboxes=True,
                    checked=["node_modules/@mantine/form/index.d.ts"],
                    selected=["node_modules/@mantine/form/index.d.ts"],
                    expanded=[
                        "node_modules",
                        "node_modules/@mantine",
                        "node_modules/@mantine/form",
                        "node_modules/@mantine/form/index.d.ts",
                    ],
                ),
                dmc.CodeHighlight(id="expanded", code="", language="json"),
                dmc.CodeHighlight(id="checked", code="", language="json"),
                dmc.CodeHighlight(id="selected", code="", language="json"),
            ],
            align="flex-start",
            grow=True,
        ),
    ],
    theme={"primaryColor": "pink"},
)


@callback(
    Output("expanded", "code"),
    Output("checked", "code"),
    Output("selected", "code"),
    Input("tree", "expanded"),
    Input("tree", "checked"),
    Input("tree", "selected"),
)
def tree_callback(expanded, checked, selected):
    expanded_code = json.dumps({"expanded": expanded}, indent=4)
    checked_code = json.dumps({"checked": checked}, indent=4)
    selected_code = json.dumps({"selected": selected}, indent=4)
    return expanded_code, checked_code, selected_code


if __name__ == "__main__":
    app.run(debug=True)

[github-actions]

Test Environment for snehilvj/dash-mantine-components-460
Updated on: 2025-01-06 19:51:31 UTC

[AnnMarieW]

Hi @Godisemo

Thanks so much for this PR! 🚀

Nice example app too. Here it is hosted on PyCafe

I'll take a closer look in the next couple days and get back to you with more comments and feedback.

In the meantime, since you obviously know a lot about both Mantine and Dash, I hope you don't mind if I ask you a question about an open item in an unrelated PR. (#458) that I'm working on right now:

• Is it possible to remove the renderDashComponents function from dash-extensions-js? It's used to render components as props in a few components including the Stepper. Is there a better way to do this?
  Here is the function as defined in dash-extensions-js .

[Godisemo]

Thank you @AnnMarieW , unfortunately I don't have experience in the part of dash related to your other PR. I updated this PR with the rest of the upstream mantine component properties as well as updated the example app in the first comment. Let me know if there is anything else that is needed when you have had time to look at it.

[AnnMarieW]

@Godisemo

A Tree component like this has been a popular request and will make a great addition to Dash. 🎉

When adding components to DMC, our goal is to be aligned as closely as possible with the features and prop names of the upstream Mantine component.

It can be a little tricky to get this right. Let's take for example, the expanded feature:

Here, the expanded prop is defined as:

/** Determines expanded nodes as a list of values or `'*'` for all, `[]` by default */
expanded?: string[] | "*";

However the Mantine Tree component. has the following:

  /** `true` if the node is expanded, applicable only for nodes with `children` */
  expanded: boolean;

  /** A record of `node.value` and boolean values that represent nodes expanded state */
  expandedState: TreeExpandedState;

And the following functions:

 /** Expands node with provided value */
  expand: (value: string) => void;

  /** Expands all nodes */
  expandAllNodes: () => void;

  /** Collapses all nodes */
  collapseAllNodes: () => void;

In the example app, if you click on a node with no children it toggles on and off the expanded list, which is confusing. It also might be better to have a separate prop for setting the expanded state. Currently, If you set expanded='*' either initially or in a callback, the expanded prop is updated with a list of values.

There are also similar features for the checked prop and they should be consistent.

It would be great to get some feedback on the API, prop names etc from @alexcjohnson I think it's best to take a little time with the design now so we don't have breaking changes later.

---

Update:
Having a separate prop for setting the expanded state is probably a bad idea. It would be hard to sync with the expanded prop. I've been playing around with the current way and it works well. I added buttons for "expand-all" and "collapse-all" to the example app, and used this callback:

@callback(
    Output("tree", "expanded"),
    Input("expand-all", "n_clicks"),
    Input("collapse-all", "n_clicks")
)
def update(e,c):
    if ctx.triggered_id == "expand-all":
        return "*"
    if ctx.triggered_id =="collapse-all":
        return []
    return dash.no_update

[AnnMarieW]

@Godisemo - quick update. Haven't forgotten about this PR. Just getting caught up after the holidays and will get back to this soon. Thanks for your patience 🙂