file explorer flyout issues

[williamstein]

The new selection using checkboxes is really cool, and it's especially nice how no extra space is used when switching to selection mode. I like the new edit button too.

There were some tiny issues that I noticed. (I realize I'm nitpicking below, and that there are also a bunch of stylistic issues with the old explorer too if one looks closely, but it makes sense to record these in github in all cases.)

1. (now fixed) Stylistic issue: If the filename is long, then the icon on the right side for that file is not visible, e.g., see List_all_files_in_all_su…ctories-2023-06-05-101528.ipynb in this screenshot:

It would make more sense to truncate the filename (ellipsis) or break and scroll around or something else. Look at the old full-page explorer, which has less trouble dealing with this sort of problem:

2. (still broken) Bug: Click to select a file, then shift+click on a checkbox of a another file to do a range selection. This doesn't work, instead selecting the text of the filenames. Try the same in the normal file editor and it works. Also, try shift+clicking on the filename in the flyout panel, and sometimes it works and sometimes it doesn't depending some mysterious selection state. In any case, I think shift+clicking on a second item to select a range is very buggy. I remember John Jeng (I think) figuring out all the subtle edge cases of checkbox selection, e.g., in gmail, then implementing it in cocalc -- the code is probably generic and maybe you can just use it?

3. (now fixed) UX issue/inconsistency: I worry that putting the action panel thing that lets you do something when you select files at the bottom means that people might not find it. It's inconsistent with the main explorer where the action buttons are on the top, which was just copying things like Google Drive/Chromebook File Manager. Were you copying something? Every UI I'm aware of puts these action buttons on the top. Once I know these are on the bottom, I like it... If you really feel it needs to be on the bottom, maybe make it orange or something when files are selected? Also, a way to resolve inconsistency could be to change main file explorer to match this.

[williamstein]

The only thing left in https://github.com/sagemathinc/cocalc/issues/6737 was the same issue as described here (with filenames/buttons being cutoff instead of wrapping, except for the log instead of explorer), so I'm closing that one. But note, the main issue described here is also a problem for the Log.

[mforbes]

Confirmed that the location of the buttons at the bottom can be problematic. I was working with a student today and trying to tell them how to copy a file from the class Shared project to their personal project.

Here are a bunch of random comments about confusing things. I think that the flyout could become very powerful once I figure out how to use it... but with great power comes great initial confusion:-)

1. I told them to click on the "Explorer" in the upper left of their screen. They clicked on the triangle instead, opening the flyout. I as not aware of this, so everything I said after that made no sense!
2. After sharing their screen I saw this, but could not quickly figure out how to close the flyout. As shown below, there are three "x"s and a plus. One must click the middle "x" to close the panel.

   Not exactly sure what to suggest here: each x has a purpose... but it is very confusing, especially if the flyout ends up this size.

3. Okay... I don't know what the purpose of the lower "x" is. It is somehow similar to but different from cancelling the selection? Am I supposed to be able to select things as below, or is that a bug?
4. Sometimes I see this: with no buttons on the bottom, and no clear way how to copy the files to a student's project:

   I stumbled on the idea that I have to click the file icons to get the select boxes which enable the missing action buttons at the bottom... this is very confusing to someone unfamiliar with this interface.

5. Note that for someone looking at this, they might very easily think they are looking at files in the ~/.snapshots folder. I know what that means -- it is grey indicating that I visited from that sub folder -- but still very confusing.
6. Why was I visiting from ~/.snapshots? Because I thought the life-preserver might be context-sensitive help:-) It might be nice to have context sensitive help (more than tool tips) available throughout the UI for students/newcomers. Maybe something that could be turn off, or maybe some way of turning on an mode where the whole screen becomes a help window, and clicking on any element brings up substantial help explaining what that element does. Is this possible/easy?
7. Not quite being sure that the appropriate file was selected, I clicked on the filename again, which then switched the main view to that file, changing the access time, and causing the order of the files in the flyout to change... that was pretty confusing. I recommend default sorting in a way that will be stationary, at least while the flyout is open. (Also, there is no tooltip or "sort by" for the sort buttons... it was not clear to me that they sorted. I thought they were somehow related to the filter... i.e. filter by name, size, time, or type...)
8. In desperation, I had the student go to the "File" menu in the active Jupyter notebook. I was relieved to see 'Make a copy...` but then dismayed to see no way to copy it to their project! Why does this not open the standard copy window?
9. Ah! Found the "Tour" - can that be available in all views in a standard location? (See point 6. above). In principle, the Tour is a really good idea. If it could be made very comprehensive and very easy to access, that would go a long way to helping users. (I have no idea how to start the "Tour" for the flyout for example...)
   • Note that the help for the "Current Directory" mentions "breadcrumbs" but does not specify that this is referring to the greyed out portion (".snapshots" in this case). I don't think the term "breadcrumbs" is universally acknowledged yet (but maybe I am just getting old:-)
   • Not sure if the element being discussed could be circled in the tour... that would help. Especially when describing things like "Hidden files" or "Masked files". At a minimum, the icons should be included in the Tour titles. The order helps, but several buttons are skipped (Jupyter Notebook, VS Code, etc.) maybe because their presence is context sensitive?

[williamstein]

I told them to click on the "Explorer" in the upper left of their screen. They clicked on the triangle instead, opening the flyout. I as not aware of this, so everything I said after that made no sense!

For new users in the last 2 days, this was the default (there was no triangle). I've disabled that functionality though and it's back to being the same for everybody.

Not exactly sure what to suggest here: each x has a purpose... but it is very confusing, especially if the flyout ends up this size.

We are planning to replace the entire row of project tabs by a single dropdown menu. This will eliminate the first x completely, and also the infamous longstanding problem of two adjacent rows of "draggable tabs" (we would add the ability to pin a tab for power users).

I don't know what the purpose of the lower "x" is.

The bottom x is circled and represent an OPEN FILE TAB. By clicking the x you can close that file tab. Personally, I think this functionality was neat when we didn't have the "Active" panel. Now that we do have the "Active" panel, which represents all open file tabs, this functionality is redundant and should be removed.

Sometimes I see this: with no buttons on the bottom, and no clear way how to copy the files to a student's project:

In response to your remarks the file action buttons are now visible on the top whenever anything is selected:

I know what that means -- it is grey indicating that I visited from that sub folder -- but still very confusing.

Nobody has ever complained about this sort of "breadcrumb" listing functionality before. However, I can see how it would potentially be confusing. This is a really useful feature for people who know about it, but totally nonstandard. It would make sense to make it optional and off by default (power users can turn it on). This is now https://github.com/sagemathinc/cocalc/issues/7186

Is this possible/easy?

Possible yes. Easy, definitely NOT. We have some "tour" functionality like this, but each such instance typically takes day(s) of subtle react code refactoring to get it to actually work properly, unfortunately. I'm currently working on redesigning our UI to just use standard menus and get rid of most of the buttons by default (power users can bring them back). This is a better way of addressing this problem, since a menu entry has a nice big label, a tooltip, an icon, and they are listed in an organized browse-able order that matches what people expect from other programs. Needing help like you're asking for is a bug due to cocalc not just adopting standard UI for solving standard problems.

Why does this not open the standard copy window?

Currently the Jupyter menus are supposed as much as possible to do the same thing as in upstream Jupyter. Part of https://github.com/sagemathinc/cocalc/pull/7180 is to merge the jupyter menus with the toolbar / action buttons/menus, and then it would likely make sense to eliminate the Jupyter-specific definition of copy.

The order helps, but several buttons are skipped (Jupyter Notebook, VS Code, etc.) maybe because their presence is context sensitive?

Getting the antd tour functionality to properly highlight buttons is complicated programming, unfortunately. I spent a full week making like 3 or 4 proof of concept tours nearly a year ago. If we had more resources, we would have more tours, but we don't for now (and despite seeming like something an inexperienced programmer could add, it isn't). That said, as mentioned above, the need for tours in some cases is potentially a bug.

[williamstein]

Just a note that point 2 above is still broken, but points 1 and 3 are addressed.

[williamstein]

I told them to click on the "Explorer" in the upper left of their screen. They clicked on the triangle instead,

That's probably not what actually happened. They probably didn't click on the triangle. We had made the flyout panels the deafult for new users. Clearly this was a mistake and it has been reverted.

[williamstein]

REPRODUCE:

1. shift click on checkbox next to file
2. shift click on another checkbox -- should select range but selects second file only.

SECOND:

1. shift click all over on filenames to get ranges, the behavior ends up with multiple discontiguous regions. Should just use the same algorithm as in existing file explorer.