(CHRIS UI - P1 - DESIGN) Redesign of the feed details layout

[mairin]

This was discussed at the UI meeting @BSS in late June.

There is some confusion about how the data in the blue column next to the graph vs. the data in the header bar and the white content area below the graph relate to each other in the feed details page.

Shania's pipeline design uses the header and white content area below only for pipeline-wide details, and only node-specific content (related to the highlighted node) appear in the blue column next to the graph.

The feed design needs to be cleaned up to follow this pattern because the lower white content area is more mixed up than this. One wishlist item we discussed was an embedded output viewer in the content area!

[mairin]

So this was the first redesign attempted a while back. It makes the lower content area solely focused on node details which I think now is the wrong way, but posting here for historical context.

[mairin]

Okay here's a refresh of the refresh design. :-) Some features to look for:

• Rather than listing out all the parameters for individual plugins in the bottom display, there is a dropdown not unlike github's clone button in the selected node area up on the right hand side of the graph that provides a copy/paste-able text readout of the command run to use the plugin in the feed.
• I've added a UI-visible "ID" field to plugin instances in the feed. (I believe the API docs has an ID per plugin instance so this value could be used.) This is to help make it clear which specific plugin's output / attributes you're looking at in case the same plugin+version is used multiple times in the same feed.
• The bottom content area is now both genericized (applies to all nodes but has a dropdown selector for selecting the output of a specific node) and also is basically an output viewer for the nodes above. I would like the output pane here mapped to the selected node in the graph, so if the user selects another node, the output viewer will update to show the output of the newly-selected node.
• The output viewer is expected to behave the same as the current file explorer in the ChRIS UI. So clicking on a filename will popup a preview window with a prompt to view in the full viewer.

[mairin]

Here's an update based on @jcaianirh 's feedback this morning. Changelog:

• There's potential confusion with the tree selection driving both the graph area right sidebar as well as the below content area (where the file output viewer is), and I would like to keep the below content area feed-wide so it matches the details model used elsewhere (eg pipeline details page). So, I dropped the dropdown to switch the file output viewer between plugins, and instead the file output viewer is now global to the entire feed. The tree on the left allows you to browse the output folders of all of the plugins in the feed.
• Instead of using an infinite tree structure for the file viewer (this is what the current one in the codebase uses), this follows the model the nautilus file manager (GNOME) uses for browsing a file tree - the top level directories are on the left side (the output folders of the various plugins), and once you click on one you can infinitely click deeper and deeper into the structure under that top level directory. As you go along, you have a horiz scrolling breadcrumb button trail you can use to come back up to an arbitrary point. It's a bit less clunky than navigating a traditional infinite tree widget, and helps manage the horizontal space here which is at quite a premium.

[mairin]

Two pending changes based on discussion in Slack just now:

• drop the 'feed' entry in the breadcrumb trail. Treat each plugin output dir as a separate root, so there's no confusion that the user copying a file path for use in a plugin command will get a global / feed-wide path which will not work when used with a command
• figure out how to display a copy/paste interface for copying the path to any given file or directory inside of a plugin output dir. TBD shortly

[mairin]

OK here is a design I think that's in good shape to start working on implementing (have a little thumb of the selected node details panel to the right to show what it looks like under the popup):

The idea with the copy/paste paste popup, is you could shift+click the filename to access it. On mobile, these lists degrade into cards, right? In which case, for mobile sizes only, the copy/paste text area could be displayed along the bottom of each card.

[mairin]

One stupid issue - this design doesn't display the feed description. 🤦 I wouldn't consider this an MVP blocker. I'd simply add it as another field in the top header. I can update the mockup accordingly, just a head's up!

[mairin]

At the UI standup yesterday afternoon, we agreed on some changes to this design:

• To make sure the hierarchy of the content area below the graph is consistent, the title of the selected folder + its ID, as well as the "download all" button and metadata will be moved below the divider line under the "Output Browser" header, and to the left of the left hand side folder listing.

• We will defer the "Download all" button with the text displaying # of files and download size, because obtaining the download size / # of files is an intensive operation that takes too long at the moment.