Enable the display of file hierarchy metadata on the dataset page

[TaniaSchlatter]

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]

Access the view through a toggle above the file table:

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

[pdurbin]

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 whole-tale/girder_wholetale#249

[mheppler]

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]

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]

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]

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

[qqmyers]

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

[landreev]

thank you!

[mheppler]

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

• add p:selectBooleanButton to filesFragment.xhtml to toggle existing p:dataTable and newly added p:tree files display view components on dataset pg
• wire up toggle display logic to backing bean
• customize toggle button icons
• 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]

@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]

@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.

[landreev]

@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]

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]

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

[mheppler]

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.

                <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]

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]

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]

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]

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]

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

[mheppler]

@pdurbin Merge conflicts resolved.

[kcondon]

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