Improving UX when handling large lists or trees in ParaView

Lists and trees are handy UI elements to show tabular or hierarchical data. In ParaView, we use these in several places such as variable and block selection widgets in the Properties panel, Multiblock Inspector, Information panel, and others. When dealing with datasets with large number of arrays or blocks, however, such widgets can easily become unwieldy and cumbersome to use. Simple tasks like selecting multiple items to toggle check state can become tedious. For ParaView 5.6, we decided to address some of these usability issues.

Figure 1: Examples of list and tree widgets in Properties panel. Here, these are used to select variables and blocks to read from an Exodus data file.

Figure 2: Mutliblock inspector showing a tree widget with ability to edit check state as well as display parameters such as as color and opacity.

In this post, I will cover some of the important aspects of using these widgets, including some of the old and new features. For simplicity, let’s focus on editable widgets i.e. widgets that allow you to edit some parameters as against those on the Information panel.

Highlighting items

As is typical with most applications, highlighting items is as simple as clicking on an item in the widget. We enable what Qt refers to as ExtendedSelection: click an item to highlight it, clearing any existing highlighting. However, using modifier keys like Ctrl, Shift, or ⌘ keys, you can extend existing highlight.

Did you know? to highlight all items, you can click on the widget (to make it get the focus) and then type Ctrl+A (or ⌘+A).

Toggling check-state of multiple items

To toggle the check-state of all items in the widget, you can click on the checkbox in the header.

You can also toggle the check state of the highlighted items alone. For that, first highlight the items of interest using the left-click together with modifiers keys are described in previous section. Then, you can change the check state of all the highlighted items by clicking on the checkbox for one of the highlighted items.

For those who prefer, a context menu is also available. Simply right-click after highlighting items to toggle. The context menu has options to check/uncheck highlighted elements.

You can also show the context menu by clicking on the  icon in the header.

Filtering

Sometimes these widgets are so populated that it becomes hard to find to highlight the items of interest. In that case, filtering may help. To filter the widget, bring up the context menu (either by right-clicking or by using the  icon in the header) and then start typing text in the Filter items input box.

As you type, the widget will update to show items matching the text entered. You can clear the filtering by clearing the filter text or by clicking the  button in the header. The  button will show up in the header whenever any filtering is being used. Thus, making it clear that the widget is not showing all available items, but only those matching the chosen filter. Once filtered, you can highlight elements of interest (use Ctrl+A or ⌘+A to highlight all) and then check/uncheck (filtered and) highlighted elements.

Note: currently, filtering is only available for lists and not for trees; trees will supported once ParaView’s minimum supported Qt version is updated to 5.10.

Sorting

The context menu also allows you to sort in ascending (or descending) order. When sorted, the header will show an icon indicating the sort order. To clear sorting and return to original order, you can use the Clear sorting option in the context menu.

Changing color/opacity for multiple items

In the Multiblock Inspector, besides the toggling check-boxes (which control visibility) you can also change color and opacity for individual blocks. Similar to highlighting and toggling check states, you can highlight and then double-click on the color or opacity swatches to change color and opacity of all the highlighted items.

As noted earlier, filtering support will be added to the multiblock inspector in the future.

Acknowledgements

The work was funded by Sandia National Laboratories. For design discussion that led to this implementation, please see the feature request here.

Sandia National Laboratories is a multimission laboratory managed and operated by National Technology and Engineering Solutions of Sandia, LLC., a wholly owned subsidiary of Honeywell International, Inc., for the U.S. Department of Energy’s National Nuclear Security Administration under contract DE-NA0003525.