# Toolbar

The toolbar is inconspicuously hidden on the top of the Canvas. It will appear when the user mouse over the top 36 pixels of the visualization. This is one of the gateways to all the user interfaces. The icons in the toolbar from left to right have the following click events:


  1. Camera: Saves the image as a PNG. The data can be saved in other formats including SVG and JSON when done through File menu in the 'Context Menus' interface.
  2. Move: Moves the Canvas
  3. Table: Toggle switch to change between table and graph views.
  4. Funnel: Opens the Data Filters and Data Table at the same time. (See those user interfaces below).
  5. Lasso: Switch to select data points in Scatter plots. If not select and mouse is dragged, selection rectangle will be used. This icon is only available in scatter plot graphs.
  6. Tools: Opens the Data Explorer. (Described below).
  7. Resize: Maximize or Restore the size of the visualization to occupay the complete window size of the browser.

Menus appear as the user 'right-click' on any white space of the graph. The content for the menus varies according to the type of graph. In the examples below the menus in the left correspond to Bar graphs while the menus in the right correspond to Scatter plots. Some menus can have many layers making them difficult to navigate to change parameters in the graph. There are two approaches to mitigate this challenge which are described below.


Moving Menus


The menus can be moved and reposition.


  1. Right-click to open the context menu.
  2. Grab the menu by left-click any non-terminal node in the menu item.
  3. Drag menu to desired position.
  4. Continue selecting the desired parameter.

Pining Menus


The menus can be pinned to the main tool bar.


  1. Right-click to open the context menu and move your mouse to the desired sub menu.
  2. Left-click in the submenu so a pop-up will appear to pin that level to the toolbar.
  3. Mouse over the top of the canvas to show your custom items to facilitate accesing the desired parameters.
  4. Right-click on any custom menu to remove from the toolbar.

# Configurator

The configurator appears by double-click in any white space in the graph. It is designed to search for the configuration as you type. You can search by categories if you click in the magnifier icon or you can just type. The available parameters will populate the configurator as you start typing. You can then select the desired parameter and change change its current value.


# Data Explorer

Designed to configure the visualization by drag'n drop but it only offers a limited number of customizations. The data explorer has three sections, the top one are either clickable icons to change parameters or dropable icons that accept inputs from the bottom two sections. The middle section contain the variables and their metadata (if availble) and the bottom section contains the samples and their metadata (if available).


# Data Filters

The filters in this user interface will be automatically configured depending on the nature of the metadata included in the visualization. It could be numeric (continuous) or discrete (categorical). Depending on the number of the category the filter will appear as either a check box or a searchable multiple selection drop down. The numerical filters can also be toggle between log and normal space. The crossed icon on top of the filter is used to reset all filters.


# Data Table

Data table to view the data and metadata included in the visualization