Story #2753

Improve Workbench "show collection" page

Added by Tom Clegg over 7 years ago. Updated over 7 years ago.

Status:
Resolved
Priority:
Normal
Assigned To:
Brett Smith
Category:
-
Start date:
05/15/2014
Due date:
% Done:

100%

Estimated time:
(Total: 19.00 h)
Story points:
2.0

Description

  • Hierarchy of directories and files, like Windows Explorer (OK if it's always in "expand all" state)
  • Show additional information from the API server that immediately pertains to this collection: name, folders that contain this, where this came from (e.g., Job output, Job log)

Subtasks

Task #2777: Present Collection files in a tree viewResolvedBrett Smith

Task #2837: Review 2753-collection-metadata-wipResolvedBrett Smith

Task #2780: Present a Collection's immediate relations on the indexResolvedBrett Smith

Task #2828: Review 2753-collection-tree-view-2-wipResolvedTom Clegg

Associated revisions

Revision dc47da9f (diff)
Added by Brett Smith over 7 years ago

2753: Replace Workbench file tree backgrounds with hover effect.

Based on feedback from Tom in refs #2753. I'm still concerned about
users being able to line up buttons with filenames, so the highlight
on :hover is intended to help with that.

Revision 8cc0ba26 (diff)
Added by Brett Smith over 7 years ago

2753: Replace Workbench file tree backgrounds with hover effect.

Based on feedback from Tom in refs #2753. I'm still concerned about
users being able to line up buttons with filenames, so the highlight
on :hover is intended to help with that.

Revision e1d71c83
Added by Brett Smith over 7 years ago

Merge branch '2753-collection-tree-view'

Closes #2777, #2828, #2753.

History

#1 Updated by Tom Clegg over 7 years ago

  • Description updated (diff)

#2 Updated by Tom Clegg over 7 years ago

  • Story points set to 2.0

#3 Updated by Brett Smith over 7 years ago

  • Assigned To set to Brett Smith

#4 Updated by Brett Smith over 7 years ago

  • Description updated (diff)

#5 Updated by Brett Smith over 7 years ago

Branch 2753-collection-tree-view-wip could use some review at this point. After discussion on IRC, it implements a classic two-pane view when browsing Collection files. The left pane shows the tree of files, with collapsing folders and limited file type icons (different for images vs. everythign else). The right pane shows details about the currently selected file, with widgets to view/download/add to selections/image preview.

Now that I've implemented this, I'm not 100% sold on this. I'm starting to wonder if something more like the previous version might've been better, just with added indentation and collapsing to make the hierarchy clearer, and pop-up image previews. That would take some custom JavaScript writing, though, since the jstree plug-in I used likes to completely own the HTML in your <ul>. But it would probably make better use of space, since the right pane in the current version is kind of empty if you're not looking at an image.

If we decide we want to go ahead with this approach, two small things I want to fix:

  • Anchor the file details pane to the top of the window, so file details stay handy if you scroll down a very long list of collection files.
  • Make the View and Download buttons take up the whole width of the pane together.

#6 Updated by Tom Clegg over 7 years ago

Notes @ 036b3b0
  • Don't like the setup where we can only see one "select this file" checkbox at a time: selecting a bunch of files from a collection is no longer reasonable. (Is this the sort of thing made difficult by "jstree likes to completely own the HTML"?)
  • Similarly, don't like losing the "see all the file sizes" feature.
  • Possible to close/hide the details pane until I click a file (and put a "close" box on it)? With a collection like d4eb5e5a71c8b93cc5c785c8b7382b0f+36720 filenames get hidden behind the mysterious white area).
Smaller things, if do stick with this:
  • Icons on the tree view rows don't show properly until I add "fa" class. ("fa-file"→rectangle "fa fa-file"→file icon)
  • When I click a folder on the left, I see details for some file on the right (should show me stuff about this folder - perhaps total size and #files? but even blank would be better than detail of something that's not currently selected)
  • Path in detail pane should not be a huge font (ideally: could it be presented in a more breadcrumby format, but still clipboardable? Perhaps present it first as a heading with just the filename, then "Full path: foo/bar/baz"?)

So I, too, am less than 100% sold.

Aspects I would like to keep, whichever way we proceed:
  • The hierarchy view is a huge improvement. Ability to collapse is nice, but not essential.
  • Like the detail pane (assuming it can be hidden when it's not wanted or there's nothing to say).

#7 Updated by Brett Smith over 7 years ago

Tom Clegg wrote:

So I, too, am less than 100% sold.

Pushed a new attempt to branch 2753-collection-tree-view-2-wip, 1562310. It uses all the same infrastructure, down to building the list in the view, but the contents of that list are much more like our old table. No collapsing, but no JavaScript either, just some cute CSS. This is ready for review.

#9 Updated by Ward Vandewege over 7 years ago

Reviewing 2753-collection-metadata-wip

0a042839b9341ce41d4451e1bf648b2e4ce0f3e3 introduces a tab

I see some broken formatting in the source page (see attached image)

Otherwise, I think this is good to merge!

Thanks,
Ward.

#10 Updated by Tom Clegg over 7 years ago

Looking at 2753-collection-tree-view-2-wip 1562310

  • Definitely a huge improvement, seeing the structure.
  • Not keen on the stripes. They help line up the filenames and sizes, but they also highlight a meaningless distinction. I also don't like the way the highlighting doesn't extend all the way across. #f8f8f8 looks less bad but I'm sure it depends on the display. I tried tweaking and the best version IMO is with no striping, just a white background. (If we want to highlight the whole row I'm guessing we have to abandon ul+li in favor of table rows with offset=depth?)
  • Get rid of the initial indent with something like
div > ul.collection_files {
    margin-left: 0;
    padding-left: 0;
}

Other minor stuff

  • Could clean up css a bit by wrapping this whole thing in a <div class="collection-files"> and then using ".collection-files li.odd"
  • Use bootstrap .pull-right to float right, instead of making .collection_files_buttons
  • I think .fa-fw ("fixed width") does what you want in .collection_files_name i.fa
  • Move css to collections.css
  • Add a little bit of white space between the view/download buttons and the v-scrollbar

#12 Updated by Brett Smith over 7 years ago

Tom Clegg wrote:

  • Not keen on the stripes.

As we discussed on IRC, my main concern was helping people line up the filenames with their buttons. I replaced all this with a :hover effect, using the same colors we do in the header.

Everything else I implemented as requested. Thanks especially for the pointers about classes available from our CSS libraries. Please review 3e1d74d.

#13 Updated by Tom Clegg over 7 years ago

Looks great, please merge!

#14 Updated by Brett Smith over 7 years ago

  • Status changed from New to Resolved

Applied in changeset arvados|commit:e1d71c83e17ba6d06e2442ed775f7efd4ea32d84.

Also available in: Atom PDF