What is a simple way to let a user select a folder from a tree?

Question

I have a Python-Flask app in which users can place files into a folder. As of now the directory structure is something like:

/app
    /storage
    /templates
    .
    .
    .
    server.py

The user can create directories and subdirectories within storage to organize files.

So far I am making AJAX calls to the server to get details of folders etc. and populate a dropdown list from which users can traverse the tree. It works, but it just doesn't feel right. What other approach could I take?

The major issue that I'm hoping to address (and what I'm doing right now):

There is a lag between when the user selects a folder to when it's contents are shown. Of course I don't expect it to be as fast as opening directories on a local file system but it'd be nice to improve UX there.

Current solution: I'm loading information about the contents of all the subdirectories as soon as a directory is selected. I can then show contents of the subdirectory as soon as it is selected.

Suppose the directory structure is:

/foo
    /bar
        /sub
        hello.py
        world.py
    /car
        hello.c
        world.c

I'm fetching information about files/subdirectories within bar and car as soon as foo is opened. This helps in showing them contents as soon as bar or car is selected.

Advantage: UX is good

Disadvantage: Transfers too much unnecessary data from the server. And as I'm actually accessing the disk to open each subdirectory this may become slow if many subdirectories are present!

Also, I'm not sure how well this will scale, if it is ever necessary.

Answer 1

Clearly, you have to make server requests at some point to get the user's stuff. For optimal UX, assuming it's impractical to load everything upfront, it'd be silly not to use some kind of AJAX request. So the real question is: What should the granularity of your requests be?

The correct answer has more to do with UX than code quality, and will depend very heavily on how your audience tends to use your app. But, since you asked in the first place, you almost certainly want to get more in each request than just the contents of the file/folder the user clicked on. Some prefetching rules you may wish to consider when the user opens a folder:

• Track when the user last accessed each file, so you can prefetch the contents of the most recently accessed ones.
• Track how many times the user has opened each file, so you can prefetch the contents of the most frequently accessed ones.
• Track the creation times for each file/folder, so you can prefetch the most recently created stuff.
• Unconditionally prefetch any super-tiny files in the current folder.
• If any of the files are "shared" with other users, those might be considered a high priority for prefetching.
• In reality, you'll probably end up with a weighted average of several of these rules.

Of course, the first thing to do is talk to your users/testers to see if there's any super low-hanging fruit that everyone but you knows about. It's likely that one or two of these rules will immediately strike them as an obvious quick win.

Finally, once you have some prefetching, set up some kind of logging that tells you every time a user accesses something you did not prefetch. That's the most reliable way to find out where your current ruleset could be improved, without the users having to figure it out for you.