How to create a collapsible sidebar with tree structure of uploaded files

[kirk77]

I am newbie and looking for a collapsible sidebar with the list of uploaded files.
I am able to get a basic one but navigation is not good and also it is not collapsible. I see some bootstrap ones(e.g https://bootsnipp.com/snippets/DV41) but not sure how to use them?

Do I download them and store for the app to access? Any details on how-to is appreciated. The documentation says download and store the css and js files, but how about HTML to display the equivalent UI(here it is sidebar). Should I put the corresponding HTML into my layout? But the syntax is different from the DASH syntax(e.g it has div class).

[andrew-hossack]

Hey @kirk77 did you find a solution to this?

[jinnyzor]

@andrew-hossack,

Yes, you should be able to display a sort of navigation based upon uploaded files.

Yes, the files would need to be saved, I believe you are doing this already. Are you saving the filepath somewhere?

How do you want the nav to look?

[andrew-hossack]

I have a list of fully qualified filepaths which I would like to display as a file tree, something like this:

I’ve found some css examples that are a bit useful but nothing plotly specific. Without having to do any heavy lifting I’m hoping to find an elegant solution here.

Edit: Viewing file contents is out of scope. I’m only concerned with a user being able to view a directory structure.

[AnnMarieW]

Hi @andrew-hossack

You can do something like that with an Accordion component. Here’s and example using dash-mantine-components:

from dash import Dash
import dash_mantine_components as dmc
from dash_iconify import DashIconify

app = Dash(__name__)

pages = ["home.py", "page1.py", "page2.py"]
assets = ["mycss.css", "app.png", "page1.png"]


def make_file(file_name):
    return dmc.Text(
        [DashIconify(icon="akar-icons:file"), " ", file_name], style={"paddingTop": 10}
    )


def make_folder(folder_name):
    return [DashIconify(icon="akar-icons:folder"), " ", folder_name]


file_dir = dmc.Accordion(
    [
        dmc.AccordionItem([make_file(f) for f in assets], label=make_folder("assets")),
        dmc.AccordionItem([make_file(f) for f in pages], label=make_folder("pages")),
    ],
    multiple=True,
)

app.layout = dmc.Container([file_dir, make_file("app.py")])

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

[andrew-hossack]

@AnnMarieW This is awesome and just what I am looking for, thank you! This is one of the reasons why I love this community so much, folks are willing to help out so readily to share information.

If you’re interested in knowing the motivation, I’m building a simple UI to allow users to upload their apps to Heroku / whatever. Baking this into dashtools.

[AnnMarieW]

Glad I could help!
Sounds like an awesome addition to dashtools! Looking forward to checking out the next release

[andrew-hossack]

I was able to build out a fairly easy class to generate trees given a filepath:

class FileTree:

    def __init__(self, filepath: os.PathLike):
        self.filepath = filepath

    def render(self) -> dmc.Accordion:
        return dmc.Accordion(
            self.build_tree(self.filepath, isRoot=True),
            multiple=True)

    def flatten(self, l):
        return [item for sublist in l for item in sublist]

    def make_file(self, file_name):
        return dmc.Text(
            [DashIconify(icon="akar-icons:file"), " ", file_name], style={"paddingTop": '5px'}
        )

    def make_folder(self, folder_name):
        return [DashIconify(icon="akar-icons:folder"), " ", folder_name]

    def build_tree(self, path, isRoot=False):
        d = []
        if os.path.isdir(path):
            children = self.flatten([self.build_tree(os.path.join(path, x))
                                    for x in os.listdir(path)])
            if isRoot:
                d.append(
                    dmc.AccordionItem(
                        children=children,
                        label=self.make_folder(os.path.basename(path)))
                )
            else:
                d.append(
                    dmc.Accordion(children=[
                        dmc.AccordionItem(
                            children=children,
                            label=self.make_folder(os.path.basename(path)))
                    ],
                        multiple=True)
                )
        else:
            d.append(self.make_file(os.path.basename(path)))
        return d

# Usage

import dash_mantine_components as dmc
import os
from dash import Dash
from dash_iconify import DashIconify

app = Dash()

filepath = 'Users/andrew'  # Any filepath here

app.layout = FileTree(filepath).render()

app.run_server()

[andrew-hossack]

I’m not sure how to make components but I feel that this could be useful to people. Might move this conversation to a new #show-and-tell thread if there is enough interest.

[AnnMarieW]

This is awesome! It’s definitely worth it’s own show-and-tell post

[andrew-hossack]

Moved to File Explorer Tree Generator

[ray26]

hi @andrew-hossack @AnnMarieW awesome work! Do you know how we can add a search bar at the top of the file tree and match the search string with any of the tree nodes as shown in the image below:

[jinnyzor]

For this you could use an input event on a search bar, where it auto expands all and hides based upon matches. Or adds a class to the element.

[ray26]

@jinnyzor I am not sure how to match the search string with the Accordion items. Any hints on how to do so?

[jinnyzor]

Sure, here you go, this is a generic example and based off of dmc:

from dash import Dash, dcc, Input, Output
import dash_mantine_components as dmc
from dash_iconify import DashIconify

app = Dash(__name__, external_scripts=[
        "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    ],)

pages = ["home.py", "page1.py", "page2.py"]
assets = ["mycss.css", "app.png", "page1.png"]


def make_file(file_name):
    return dmc.Text(
        [DashIconify(icon="akar-icons:file"), " ", file_name], style={"paddingTop": 10}
    )


def make_folder(folder_name):
    return [DashIconify(icon="akar-icons:folder"), " ", folder_name]


file_dir = dmc.Accordion(
    [
        dmc.AccordionItem([make_file(f) for f in assets], label=make_folder("assets")),
        dmc.AccordionItem([make_file(f) for f in pages], label=make_folder("pages")),
    ],
    multiple=True,
)

app.layout = dmc.Container([dcc.Input(id='search', placeholder='search directory'), file_dir, make_file("app.py")])

app.clientside_callback(
    """
        function search(v) {
            if (v) {
                $(".mantine-Accordion-item").addClass("mantine-Accordion-itemOpened").addClass("mantine-1xa9lqx")
                $(".mantine-Accordion-item .mantine-1avyp1d").attr("style", "box-sizing: border-box;")
                $(".mantine-Accordion-item .mantine-1avyp1d > div").attr("style", "opacity: 1; transition: opacity 200ms ease 0s;")
                $(".mantine-Accordion-item .mantine-1avyp1d").attr("aria-hidden", false)
                $(".mantine-Accordion-item").each( function() {
                    if ($(this).text().includes(v)) {
                        $(this).removeClass("hidden")
                    } else {
                        $(this).addClass("hidden")
                    }
                    }
                )
                $(".mantine-Accordion-item .mantine-Text-root").each( function () {
                    if ($(this).text().includes(v)) {
                        $(this).removeClass("hidden")
                    } else {
                        $(this).addClass("hidden")
                    }
                    })
            } else {
                $(".mantine-Accordion-item").removeClass("mantine-Accordion-itemOpened")
                $(".mantine-Accordion-item").removeClass("mantine-1xa9lqx")
                $(".mantine-Accordion-item").removeClass("hidden")
                $(".mantine-Accordion-item .mantine-Text-root").removeClass("hidden")
                $(".mantine-Accordion-item .mantine-1avyp1d").attr("style", "box-sizing: border-box; height: 0px; overflow: hidden; display: none;")
                $(".mantine-Accordion-item .mantine-1avyp1d").attr("aria-hidden", true)
                $(".mantine-Accordion-item .mantine-1avyp1d > div").attr("style", "opacity: 0; transition: opacity 200ms ease 0s;")
            }
            
            return window.dash_clientside.no_update
        }
    """,
    Output('search', 'id'),
    Input('search','value'),
    prevent_intial_call=True
)

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

It uses jquery in order to be able to navigate quickly, imo. If you are using this for navigation, be sure to empty out the string on navigation click.

[ray26]

@jinnyzor Thanks for the code! I’m not very strong on JavaScript but the code you shared seems to expand every Accordion item regardless of whether the search string matches the item, as shown in the shared video. Ideally I would like to expand only the items that contain the search string. For example, if the search string is mycss then only the folder assets should be expanded and not both the assets and pages folders. If there is no match, no item should be expanded. Any help would be much appreciated!

[jinnyzor]

Hmm. Weird. I thought it was working for me…

It’s based upon the class names.

[ray26]

@jinnyzor is there anything I need to change before running the code? I simply copied and pasted and ran the code with no changes.

[jinnyzor]

You shouldn’t have to, it is expanding… So part of the code is working…

What are your versions?

[ray26]

@jinnyzor these are my versions:

dash                    2.6.2
dash-core-components    2.0.0
dash-extensions         0.1.6
dash-html-components    2.0.0
dash-mantine-components 0.10.2