Visual Tour

This chapter presents a visual overview of the UI of Neo4j Bloom.

1. Overview

visual tour

1.1. Sidebar

The sidebar contains a set of drawers where you can set up the environment for graph exploration.

  • Perspective Drawer - defines the business context depicted in the scene.

  • Settings Drawer - provides application settings.

  • About Drawer - shows notifications and license information.

1.2. Scene

Neo4j Bloom’s main workspace is a graph scene, where you’ll see the classic circles and lines of a graph visualization. The scene contains just the parts of the graph which you’ve found through search or exploration.

Click directly on nodes to move them manually into place. Right-click on nodes, relationships, or the background to bring up context menus to perform actions.

1.3. Overlays

Overlays provide supplemental views for working with the graph scene.

  • Legend Panel - shows all the business entities (categories and relationship types) available in the current Perspective. This panel also lets you define the style for categories and relationship types using default or rule-based styles.

  • Search Bar - accepts a near-natural language search query input and offers suggestions on graph patterns that match the input.

  • Card List - shows details about the nodes and relationships in the scene.

2. Perspective drawer

perspective drawer intro

The Perspective is the business view, or the context, of the graph to which Bloom connects. The Perspective drawer is used to select or define this business view or context, before graph exploration can begin. The business context set in the Perspective controls everything available in the Bloom application, e.g. what nodes and relationships that should be accessible, how they get categorized and styled, and what details about them can be seen or changed. Perspectives are discussed in detail in Perspectives.

3. Settings drawer

bloom settings drawer

The Settings drawer contains various options for the application. The following can be controlled from this drawer:

  • Node query limit - can be adjusted within a range of 100-10000.

  • Search timeout - controls the duration of a search query.

  • Experimental features - to show features that are available on an experimental basis.

  • Show restore scene dialog - allows you to restore the scene from your previous session.

  • Graph layout compatibility mode - can solve compatibility issues between GPU and WebGL. See here for more information.

  • Case insensitive search and suggestions - enables case insensitive use of both search and in suggestions.

4. Legend panel

legend panel intro

The legend panel shows a list of all categories and relationship types available in the current Perspective, along with the style used to render their nodes and relationships respectively. When the list contains many elements, you can use a filter to limit the legend to show only elements present in the scene, or find those not present in the scene, or search for an element of interest. Click on a category or relationship type in the legend to select all nodes or relationships of that type. A count shows the number of items of a type that are currently visible somewhere in the scene. Styles applied to nodes and relationships can also be changed from this legend panel. You have the flexibility to define the style for an entire category or relationship type, or use data-driven rules to apply styles to specific nodes or relationships.

4.1. Rule-based styling

rule based styling

Rule availability and application varies by the type of a graph element and its available properties. For example, as shown above, a rule defined on a unitPrice integer property of a Product category will only apply to Product nodes that have an unitPrice integer value that is greater than 4. You can use rules to change the color and size attributes of nodes, and the color and thickness attributes of relationships.

Rule-based styling is supported for string, numeric and boolean properties.

Rules override the default style setting such that if no rule is satisfied, the default style is applied. If multiple rules affecting the same attribute (e.g. node color) are specified, the rule that appears first in the list will be applied to that attribute. Subsequent rules may still be applied if they affect other attributes (e.g. node size).

Bloom is a search-first environment for you to explore your graph. To provide this experience, the search bar supports several types of search input. When you enter a term or phrase in the search bar, Bloom provides a list of suggestions for queries you can run, based on matches in the following input types:

  • Graph pattern

  • Search phrase

  • Full-text search

  • Actions

search bar 5
search bar 6
search bar 7

You can press TAB or click on a suggestion in the list to select it, or scroll to the suggestion and press ENTER to run it.

5.1. Graph pattern

Graph patterns are a relaxed, near-natural language grammar based on a vocabulary drawn from node labels, relationship types and property keys and indexed property values, enriched by categories or other configuration as defined in the applied Perspective (see Perspectives for more detail). Terms that Bloom detects are used to create potential pattern matches, are added to the suggestions list, from which you can pick the one you wish to query. See Graph Pattern Search in Bloom for tips on graph pattern searching.

5.2. Search phrase

A Search phrase is essentially an alias for a pre-defined graph query, which is saved within a Perspective. Search phrases allow for user-friendly access to queries that need to be run frequently, or can’t be conveniently expressed as a search pattern. Search phrases also allow for highly customized domain-specific questions to be asked, and can:

  • be paired with a parameterized Cypher query.

  • call algorithms, or anything else that can be called using procedures.

  • modify the graph (requires write access).

See Search Phrases for Advanced Queries tutorial topic for tips on using Search phrases.

When Bloom can’t find an appropriate suggestion for the entered search term, you have the ability to run a full-text search against the Neo4j database. Bloom uses the native full-text indexes in the database for this feature. You will need to set up a full-text index to enable full-text search in Bloom. Without any full-text index configured, Bloom will fall back to searching in all available indexed string properties.

See Full-text Searching in Bloom tutorial topic for tips on using the full-text search option.

5.4. Actions

Actions are phrases that trigger user-interface commands, e.g. Clear Scene will empty the canvas of the currently shown nodes and relationships. This lists some of the available Actions:

  • Invert selection - selects every unselected node and deselects any selected node/s.

  • Fit to selection - zooms in on the selection and centers it on the canvas.

  • Expand selection - option to see everything directly connected to the selected node/s.

  • Clear Scene - empty the canvas.

  • Dismiss - removes everything selected.

  • Dismiss others - removes everything not selected.

  • Refresh Data - refreshes the data on the canvas.

  • Redo - repeat the latest action.

  • Undo - undo the latest action.

See Default actions and shortcuts for the complete list and associated keyboard shortcuts.

6. Card List

The Card list, when expanded, shows details about the currently shown nodes on the canvas. You can choose between viewing all or only the selected nodes (if any). Each node appears as a little card which shows a few of the available properties on the node.

card list

Cards in the list can be used to interact with nodes on the canvas. Select one or more cards in the list to select them on canvas or vice versa. Interact with the selected cards using shortcut actions like Expand or Dismiss that appear on the bottom of the list, or use the right-click context menu.

Double-click on a card to see the Node Inspector, which shows its properties in detail. Properties can be edited, if you have write access to the graph.

node inspector

The Node Inspector also shows a node’s relationships and neighbors as cards, which in turn, can be used to navigate to, interact with, or see detail about these relationships and neighbors.

relationships of a node

7. Scene interactions

Several interactions are available from the canvas to help you explore your graph visualization. Some of the commonly expected ones are:

  • Zoom in and out using your mouse or touchpad scroll functions, or use the buttons at the bottom right of the canvas.

  • Left-click on a single node or relationship to select or deselect it. Multiple objects can be selected by holding the appropriate keyboard modifier key (Cmd or Ctrl key) before selecting.

  • Double-click on a node or relationship to open the Inspector to inspect the element’s details.

  • Left-click in an empty spot on the canvas and drag immediately to pan the visualization.

  • Left-click and hold and then drag to bring up a lasso tool to select multiple nodes and relationships.

    lasso tool
  • Right-click anywhere on the canvas to bring up context-sensitive menus for the object clicked on. Following sections describe some of the notable graph interactions available in these context menus.

canvas and node context menus

7.1. Expand nodes

With a single or group of nodes selected for context, you can expand the nodes to visualize their immediate neighbors. Then, select from the result and expand further to navigate local areas of the graph. Expansion can be done from the right-click context menu of a node or from the Inspector when viewing a node’s relationships or neighbors.

selective expansion

The right-click context menu provides additional options to expand selectively along a specific relationship type and direction, or to open the Advanced Expansion dialog and choose to expand along several specific paths, or to specific neighboring node types, or a combination. You can also choose to limit the number of nodes that should be returned in the result.

advanced expansion

7.2. Shortest path

A powerful feature of Neo4j graphs is to see how two entities may be connected without knowing the exact path of relationships between them. To do so in Bloom, you can run a shortest path command between two nodes. Select the two nodes of interest, right-click on one of the nodes to bring up the context menu and select the Shortest Path option.

shortest path
Bloom searches for shortest paths within 20 hops and shows the first shortest path found by the database.

7.3. Hierarchical layout

In instances where you are interested in knowing more about how various nodes are related in comparison to each other, in an organizational chart for example, Bloom allows you to change the layout of your scene. By default, the nodes and relationships in a scene are presented in a force-directed layout. By clicking the hierarchical-layout button in the bottom right-hand corner of the scene, the nodes in the scene will be presented in an hierarchical order instead. The nodes are thus arranged by the directionality of their relationships, determined by the way relationship directions are set up in the database. When the hierarchical layout is activated, you can change the orientation by rotating the layout using the button directly to the left of the layout button. The orientation rotates by 90 degrees each time the button is clicked. If you want to go back to the force-directed layout, just click the layout button again.

layouts hierarchy

7.4. Editing in Bloom

If you have the required write permissions to your graph database, you can edit your graph data in Bloom.

  • Editing labels - You can add or remove labels from a node when you inspect its properties in the Inspector. Only labels available in the database can be added.

edit label
  • Editing or adding properties - You can add, edit or delete properties on a node when you inspect its properties in the Inspector. Only property keys enabled for viewing in Bloom (as defined in the Perspective) will be visible and editable. Relationship properties can also be edited in its respective Inspector.

edit properties
  • Creating new relationships - New relationships can be created from the canvas directly. To create a new relationship, select the source and destination nodes taking care to select the source node first. The right-click context menu will show the Create relationship enabled with a sub-menu showing the available relationship types. Only relationship types available in the database can be added.

create relationship
  • Creating new nodes - New nodes can also be created from the canvas. To create an empty new node, use the canvas context menu and choose an existing category to which the node should be assigned. Another option is to duplicate an existing node from its context menu.

create node
  • Database constraints (if they exist) will affect the ability to edit data in Bloom depending on what constraints have been placed.

  • Deleting graph elements like nodes, labels, relationships, or relationship types is not supported in Bloom currently. Use Neo4j Browser if you want to delete graph elements.