Rescale’s New User Interface: Managing Large File Sets

file-selection-ui

In the new user interface (UI), we faced a common UI challenge of letting users select a large set of files and perform a group action on those items. The first thing that jumped to our minds was to show all files with a checkbox next to each one. That proved to be problematic for three reasons: 1) loading data for 100,000+ items up front can take a long time, 2) rendering out the DOM for 100,000+ items can potentially crash a browser, and 3) toggling “Select/Deselect All” or ordering a list of 100,000+ items can be a painfully slow experience.

First, we looked for an existing solution in a frequently used application, and found that Gmail has a similar problem except with emails. In the Gmail app, you cannot “Select All” from your inbox, but once you’ve narrowed down the list of emails using a filter and selected all conversations on the page, you get this notification:

gmail

Clicking “Select all conversations that match this search” would select every email that is filtered by the search keyword, but if you tried deselecting an email in the list, the select all toggle would get deactivated. In other words, performing an action on all items that match the filter except a few is not possible in Gmail’s UI. In such cases, you would have to set up your filter carefully to include only the emails that you’re interested in performing a group action.

What Gmail did was definitely better than potentially crashing a browser, but it would not work for our users’ needs. On Rescale’s platform, people actually wanted to delete or download all of their files with the exception of a few. So we came up with what we call an inclusion/exclusion rule, and here’s how it works.

Screen Shot 2014-09-24 at 12.34.20 PM

When a user first visits the results page, he/she only sees first 10 files (unless specified otherwise). The list is paginated from the server side, so the browser is only aware of the 10 files at once.

Screen Shot 2014-09-24 at 12.35.44 PM

If the user starts selecting files using a checkbox, the files that get selected will go into the inclusion set.

Screen Shot 2014-09-24 at 12.35.56 PM

But what’s different here is the “Select all N files”. If the user clicks on this button, the inclusion set gets emptied out and the flag for selecting all files gets set to true. And from that point, the files that the user deselects will go into an exclusion set.

Screen Shot 2014-09-24 at 12.37.49 PM

Finally, when the user performs a group action, Rescale send the server either an inclusion set or an exclusion set to be used for the action.

As users in the past have requested a better way of managing their output files, we worked to make the new UI more helpful–especially for those who run simulations that generate a large set of files.

This article was written by Rescale.