Pattern: Canvas interaction (aka Minimap)

[marion-bruells]

Designers: Jess Vergara (Main contact), Sammy Schuckert, Marion Bruells (Watson Knowledge Catalog)

Sketchfile: Mini-Map.sketch.zip

Overview

Tables are great for listing huge amounts of artifacts and their metadata, but not the best choice for showing artifact relationships or complex visualisations. Therefore, many of our products use a graphical visualization made out of nodes and connections (relationship graph) to equip the user with the capability to explore artifact relationships. For those cases we need provide the user an ability to interact with the data on the canvas (e.g. navigating in a canvas, zooming in and out of a graph, allow filtering of content, apply settings,...).

Anatomy

The interaction elements for the canvas are located on the right of the screen sitting on top of the graph. These elements are pushed to the left in case there is a RHS panel. This positioning and behavior leaves the right area completely for the graph.  The interaction elements are grouped into two areas 

(1) the filter/export/graph settings and  (2) the zoom/navigation area (Minimap)

When to use

For example, use this pattern:

• to explore artifact relationships visually as a graph with nodes and connections on a canvas to derive new insights from the exploration
• to filter artifacts to reduce the amount of nodes shown in the graph, so the graph's complexity is reduced and insights can be derived.
• to export a visualization of artifact relationships in various file formats, so a user can download and save the visualization for reporting etc. 
• to zoom in and out of a visualization of artifact relationships, so a user can see more details or see the bigger picture.
• to move on the canvas or navigate graph without interacting with the nodes and connections, so a user can focus on reading the graph as-is.
• to center the viewport in on the currently focused element (node), to get a detailed picture of the nodes relationships with other nodes.
• to recenter and fit the whole graph to the viewport, to get a complete picture of the visualization.
• to see the users position (viewport size) in relationship to the graph canvas, and get an understanding of the amount of nodes inside the current viewport and outside. 

The solution

Behaviors, structure, and functionality

(1) Filter/Export/Graph settings

Filters Filter settings opens a dropdown that lets the user “reset” and “apply” multiple filters. This pattern is chosen because we probably have a lot of different filters to apply and processing theses filters can take a while because of the graphical representation. Hence, applying a selection of filters in a batch seems to be the best suitable pattern to work with here.  

Export Export content opens a dropdown that lets the user “export” the current graph (everything beyond view port) in different file format supported by the system. If the export takes long ( > more than 3 seconds) an information notification is shown that informs the user that s/he receives an email with a download link. 

Settings Graph settings opens a dropdown that lets the user “set” various settings which reduce the complexity of the graphical representation of the graph. These settings are different from filters. Changes to these settings are usually applied immediately on clicking the toggle. 

(2) Zoom/navigation area The zoom/navigation area is made out of three main parts: (2.1) Zoom controls (2.2) Movement controls (2.3) Mini-map

In the following section we will go through each of them individually.

The zoom/navigation area by default is at 50% opacity to not interfere with the canvas content. When the user hovers with the cursor on the area, the area fades to 100% opacity.

(2.1) Zoom controls There are two different ways of interacting with the mini-map’s zoom controls: click + drag the node along the plus (+), minus (-) axis

• clicking anywhere along the axis will also achieve the same zoom affect clicking either the plus (+) or minus (-) magnifier icon

(2.2) Movement controls

2.2a) Move mode (optional feature) lets the user move the canvas behind the viewport without accidentally interacting with a node or connection. A notification is shown that reads "You're in move mode." The notification automatically disappears after 5 seconds. While in move mode the cursor is the grab hand (open). Clicking, holding, and moving the cursor anywhere on the canvas drags the canvas around behind the viewport.  When trying to interact with the canvas content (e.g, nodes) by clicking multiple items the notification "You're in move mode." fades in again. The move mode can be turned off my clicking  the move mode button again after activating the move mode. 

Additionally, move mode enables navigation functionality of the screen by canvas edge. Hovering over an edge (left, top, right, bottom) moves the viewable area of the screen in that direction.

Even without the move mode feature, holding down the space bar on the keyboard also enables move mode for as long as the key is pushed. When holding down the space bar the notification ("You're in move mode.") is not shown. On release of the space bar move mode is disabled. This is a mandatory keyboard and mouse interaction.

2.2b) Center selection (optional feature) lets the user center the canvas on selected content. The map automatically adjusts the zoom appropriately to fit.

2.2c) Fit to screen (mandatory feature) zooms the canvas out to the point where all elements of the graph are viewable within the screen at once.

(2.3) Mini-map navigation The highlighted section of the mini-map can be click + dragged or “jumped” by clicking an unselected area of the map. As a result, the canvas will adjust accordingly to show the contents of the selected area as the focal point of the screen.

Layout

Sketch file

Best practices

in progress

• Do's
• Dont's

Other use cases

Some products don’t require all elements, require more compact sizes or need additions based on their use case.

Therefore we list a couple of possible variations:

• Include a legend for graph elements
• Canvas controls without minimap
• Light zoom settings (no slider)
• Default and compact sizes

Related

Batch filtering: https://www.carbondesignsystem.com/patterns/filtering#batch-filter Export pattern: https://www.carbondesignsystem.com/experimental/export-pattern