Enable the display of file hierarchy metadata on the dataset page

TaniaSchlatter commented 5 years ago

A small chunk of realizing #2249 is to enable the display of the hierarchical structure of files, to help researchers make sense of the structure before download.

Files brought in as a .zip will be unzipped and displayed in the file table on the dataset page. Files can be downloaded in their original structure as per #5498.

Files will be able to be added to a hierarchical structure per #5565.

Successful completion of this issue will be that users can view the hierarchical structure of files, up to a reasonable number of files. Ideally the display will allow users to link directly to file pages, and display an icon indicating the file type.

TaniaSchlatter commented 5 years ago

Access the view through a toggle above the file table: screen shot 2019-02-27 at 1 57 06 pm

On toggle:

View list in a fixed height scrolling panel with folders open if fewer than [some number TBD] files.
If more than [some number TBD] files, show the top folder open, and other folders closed.
File names are links to file pages.
Search would be available on the hierarchy view but would return you to the table view

screen shot 2019-02-27 at 1 58 04 pm

pdurbin commented 5 years ago

I just noticed that our friends at @whole-tale are in the process of adding a JavaScript library called jsTree ( https://www.jstree.com ) to show file hierarchy in a browser.

Here's the animated gif they added to https://github.com/whole-tale/girder_wholetale/pull/249

53615826-ade25280-3b94-11e9-9788-2facd68fd9dc

mheppler commented 5 years ago

Nice find, @pdurbin.

When estimating, we discussed that the hierarchy metadata was available in CSV format. That jsTree jquery plugin requires JSON format. I believe it was suggested reformatting the metadata strings to JSON was doable.

$('#using_json').jstree({ 'core' : {
    'data' : [
       'Simple root node',
       {
         'text' : 'Root node 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' },
           'Child 2'
         ]
      }
    ]
} });

Another display option suggested was the tree PrimeFaces component.

qqmyers commented 5 years ago

FWIW - SEAD also uses a javascript tree widget and uses ajax to read individual folders as you open them. See, for example http://doi.org/10.5967/M02B8W0V with 135K files, >2000 folders up to 10 levels deep. I don't think we've found a stock library that supports a tree with paging, so we've usually created our own in that case, but the asynch load of just what users currently see is key...

landreev commented 5 years ago

So, is it still part of the task here - to pick the javascript library for implementing this? Or have we agreed to try jsTree, and see how it goes?

landreev commented 5 years ago

@qqmyers do you know which javascript widget SEAD uses for this? - I can't quite figure it out.

qqmyers commented 5 years ago

I think its http://ludo.cubicphuse.nl/jquery-treetable/ ...

landreev commented 5 years ago

thank you!

mheppler commented 5 years ago

FILE HIERARCHY UI DID'S + TO-DO'S

[x] add p:selectBooleanButton to filesFragment.xhtml to toggle existing p:dataTable and newly added p:tree files display view components on dataset pg
[x] wire up toggle display logic to backing bean
[ ] customize toggle button icons
[x] customize tree component icons

QUESTIONS

need to determine render logic? do we show tree for only one file? only when there is file path metadata?
is the PrimeFaces p:tree sufficient? customizable? is there a performance hit? is a jquery plugin more appropriate?

landreev commented 5 years ago

@TaniaSchlatter

* View list in a fixed height scrolling panel with 
  folders open if fewer than [some number TBD] files.

At the moment, this number is hard-coded as 10. (folder expanded if 10 or fewer items in it; collapsed otherwise). We'll change it once you decide on the final number. (And do we want to make it configurable, for other installations?)

* If more than [some number TBD] files, show the top 
  folder open, and other folders closed.

In this paragraph, we are talking about the total number of the files in the dataset, correct? (this part is not implemented yet).

landreev commented 5 years ago

@mheppler

* need to determine render logic? do we show tree for 
  only one file? only when there is file path 
  metadata?

Only show it if there's at least 1 folder, and at least 2 files - something like that?

This still leaves a weird edge case, where there's 1000 files in the dataset, with only 1 of them in a folder... So we end up showing a "tree" that's essentially a vertical list of 999 files + 1 folder... But it is a very edge case; and that by itself would encourage the owner to finish adding folders to their dataset, once they have started.

Otherwise, please let me know if you have any questions about its current state and/or if it's not working on your build, etc.

TaniaSchlatter commented 5 years ago

Thanks @landreev. Let's have the rule for display be: always open the first folder in the hierarchy (regardless of the number of files it contains), and leave the other folders closed. I think that will make the functionality reasonably clear in the UI, and simplify the rule.

landreev commented 5 years ago

@TaniaSchlatter OK, that makes a lot of sense (and simplifies things). I'll make a change to the branch.

landreev commented 5 years ago

ok, done.

mheppler commented 5 years ago

Icons look good. Here is an updated list of remaining items to do.

[x] render logic for the Change View label and toggle buttons so they only display if any files have File Path metadata
[x] "active" state style class not working, shows no active state for table view, and both buttons are styled active for tree view
[ ] was not able to add icons to the Change View toggle buttons, so we might have to go with text labels, or find another component that allows icons

landreev commented 5 years ago

@mheppler I pushed in the changes for the items 1. and 2. on your checklist. Let me know if there's anything I can do to help figuring out 3. (but I don't think I know much about it).

Question: we are not showing the "Upload Files" button when in the tree view. Is that on purpose?

landreev commented 5 years ago

I may also be able to simplify the code a little further on the inside; that should not affect how the UI looks and functions.

TaniaSchlatter commented 5 years ago

@landreev We were going forward with simply viewing the hierarchy. We could think about adding upload later.

mheppler commented 5 years ago

I think I have a potential jQuery ~hack~ workaround that will put icons and tooltips into the PrimeFaces selectOneButton component. Will need to refine it of course, so that we don't have two tree icons like you see in the screenshot. Will have to discuss our icon options with @TaniaSchlatter as the mockup provided above includes a custom icon.

Screen Shot 2019-04-08 at 3 54 02 PM

                <script>
                    $(document).ready(function () {
                        $('div[id$="displayValue"] div.ui-button').attr({'data-toggle': 'tooltip', 'data-original-title': 'Tree'});
                        $('div[id$="displayValue"] div.ui-button span').text('').attr('class', 'ui-button-text ui-c glyphicon glyphicon-tree-conifer');
                    });
                </script>

landreev commented 5 years ago

OK, great. I'm done with it on my part. Just checked in the change I promised - was able to get rid of some custom code on the inside, without any loss of efficiency.

landreev commented 5 years ago

Made a PR; in anticipation of this being ready shortly. (I was going to take myself off this issue; but I want to check first if this is documented in the guide)

pdurbin commented 5 years ago

I deployed it to http://ec2-54-173-227-55.compute-1.amazonaws.com:8080/dataset.xhtml?persistentId=doi:10.5072/FK2/2XDEJB if anyone would like to take a look. Here are some screenshots. I'm a little confused, I guess, of why by default I only see one "file.txt" in the tree view. Have we considered having all the folders open? Also, we should probably add something to the User Guide.

mheppler commented 5 years ago

Confirmed with @TaniaSchlatter that we are OK with omitting the icon only look of the view toggle btns, and going with the "Table" and "Tree" btn text.

Pushed latest changes with minor layout/spacing clean up, and moved label and btn text to the bundle.

Moving to code review.

pdurbin commented 5 years ago

Pull request #5745 looks fine but there are merge conflicts.

mheppler commented 5 years ago

@pdurbin Merge conflicts resolved.

kcondon commented 5 years ago

OK this appears to function as designed. Just awaiting some feedback before merging.

IQSS / dataverse

Enable the display of file hierarchy metadata on the dataset page #5572