:description: This chapter presents a visual overview of the UI of Neo4j Browser.


[[visual-tour]]
= Visual tour

This section walks you through the UI of Neo4j Browser.

[[overview]]
== Overview

image:overview1.png[]

[[sidebar]]
== Sidebar

The sidebar contains a set of drawers to set up the environment for graph management and explore your data.

[[database-info]]
=== Database Information

The Database Information drawer provides information about the currently used database, the current user's roles, the Neo4j DBMS version, and some helpful DBMS administrative commands.

image:database-information.png[width=40%]

* *Use database* -- A dropdown menu, where you can select the database you want to work with.
* *Node Labels*, *Relationship Types*, and *Property keys* --  List the Node Labels, Relationship Types, and Property keys contained in that database, presented in an alphabetized order and displayed in groupings of 50.
Clicking any one of those options runs a quick query to show you a sample of the graph with those elements.
* *Node Counts* and *Relationship counts*  --  Displayed in parentheses after the *. 
+
Note that the counts stop updating automatically on big graphs for users who don't have access to all data, see xref::/operations/browser-rbac-count.adoc[].

* *Connected as* -- Shows the current user and their roles and the Cypher command to disconnect from the server.
If the current user has an administrative role, two more options are available: `:server user add` and `:server user list`.
For more information about user's built-in roles and the default privileges, see link:https://neo4j.com/docs/operations-manual/current/authentication-authorization/built-in-roles/[Operations Manual -> Built-in roles^].
* *DBMS* -- Provides information about the Neo4j version and edition, and some helpful DBMS administrative commands:
** `:dbs` -- List all databases available for the current user.
** `:sysinfo` -- Display data about the Neo4j system, such as store size, ID allocation, page cache, transactions, and databases (name, address, role, status, default database, and errors).
** `:queries` -- List all currently running queries on the server.

[[favorites]]
=== Favorites

The *Favorites* drawer is where you keep your bookmarked queries and commands.

image:favorites1.png[]

==== Save a query as a favorite

You can save Cypher queries and commands as favorites by "starring" them.
Use the *Add empty favorite* option to open an empty script in the Cypher editor, then write the query that you want to bookmark.
Clicking the *Save as Favorite* icon to the right of the editor adds the query to your *Favorites* list in the left-side menu.
All favorites are stored in your local browser storage and are centric to the user/browser who has recorded those favorites.
Clearing your Browser cache removes all your local favorites.

[NOTE]
====
You can save your favorites, settings, and styles in the cloud with Neo4j Browser Sync.
====

==== Run a favorite

To run one of your favorites, click the left-side menu *Favorites*, choose the query, and run it.

==== Add a title to a favorite

The first line of the Cypher query or command is used to name your favorite.
To provide a title or helpful info to your favorite, you can use a comment `//comment` above your query.
The *Favorites* menu uses this comment to name the saved query.

.Favorite: Hello Cypher
====
[source, cypher]
----
//Hello Cypher
MATCH (n)
RETURN n
LIMIT 100
----
====

==== Organize your favorites

Creating folders can help organize your favorites.
You can rearrange them by dragging and delete them if they are no longer useful.

==== Sample Scripts

There are several built-in favorites, which can help you manage and explore your data.

image:sample-scripts.png[width=40%]

* *Basic Queries* contains simple queries to get you started with Neo4j.
For example, clicking and running the *Get Some Data* query executes the statement `MATCH (n) RETURN n LIMIT 100`, which fetches some nodes.
* *Example Graphs* contains queries that run the built-in guides The Movie Graph and The Northwind Database.
For more information on the Neo4j Browser built-in guides, see <<guides>>.
* *Data Profiling* contains queries that you can use to collect statistics and produce informative summaries about the underlying data.
For example, clicking and running the *What is related, and how* query executes the procedure `CALL db.schema.visualization()`, which shows the graph data model (graph schema).
* *Common Procedures* contains a few Neo4j procedures, two of which list all available Neo4j functions and procedures.

[[saved-files]]
=== Project Files

[NOTE]
====
The *Project files* tab is **Neo4j Desktop** specific.
====

Project files allow you to save queries, guides, and other scripts, as Cypher files.
Unlike favorites, which are saved in your local browser storage, project files are project-specific and are actual files stored in the project directory on your hard drive.
All save files are listed under the project they refer to.
For more information, see link:https://neo4j.com/docs/desktop-manual/current/visual-tour/#files[Neo4j Desktop Manual -> Files^].

[[guides]]
=== Guides

The Neo4j Browser Guides drawer provides many interactive guides for learning concepts and tools with Neo4j.
Some of them come with Neo4j Browser out-of-the-box, no matter what system or installation you are using.

image:guides.png[width=60%]

.Built-in guides and commands
[cols="1,3",options="header"]
|===
| Guide command
| Description

| `:guide intro`
| Neo4j Browser User Interface.

| `:guide concepts`
| Basic property-graph concepts to get you going.

| `:guide cypher`
| Cypher basics - create, match, patterns.

| `:guide movie-graph`
| The Movie Graph, a mini graph model of connections between actors and movies.

| `:guide northwind-graph`
| The Northwind Database, a classic use case of RDBMS to graph with import instructions and queries.
|===

[NOTE]
====
There are also other Neo4j Browser guides created by Neo4j staff and community members to help others learn Neo4j or how to use the tools in its ecosystem.
One of them is `:guide graph-data-science`, a remote guide also featured on Browser.
You can check out the currently published list on the link:https://portal.graphgist.org/graph_guides[GraphGist Portal (Graph Guides section)^]. +
For more information on how to create a custom Browser guide, see link:https://neo4j.com/developer/guide-create-neo4j-browser-guide/[creating a custom Browser guide^].
====

// Links to the guides' source:
//======
// guided experience - https://github.com/neo4j/neo4j-browser/tree/master/src/browser/documentation/guides
//
// Getting started with Neo4j Browser (Neo4j Browser user interface guide) - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/start.tsx
// Basic concepts to get you going - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/concepts.tsx
// Cypher - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/cypher.tsx
// Icons (A mostly UI-focused subset of Streamline icons.) - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/iconography.tsx
// Intro( Neo4j Browser User Interface) - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/intro.tsx
// Learn (Graph database fundamentals.) - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/learn.tsx
// Typography (The typography is pleasantly minimal. Just enough to make for easy reading of brief content.) - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/typography.tsx
// Write code (Jump right into coding with example data graphs) - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/write-code.tsx
// Fabric - https://github.com/neo-technology/neo4j-manual-modeling/blob/4.3/operationsManual/asciidoc/tutorial/fabric-browser-guide.adoc
// Graph Examples:
// Movie Graph - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/movie-graph.tsx
// Northwind Graph - https://github.com/neo4j/neo4j-browser/blob/master/src/browser/documentation/guides/northwind-graph.tsx
//

[[help-learn]]
=== Help & Learn

The *Help & Learn* drawer contains useful commands, links to documentation, notifications, and a send feedback button.

image:help.png[width=40%]

[[useful-commands]]
==== Useful commands

Most of the commands in the *Useful commands* tab work as an entry point to a help page, where you can find a lot of handy commands and keyboard shortcuts you can use in Neo4j Browser.

.Useful commands
[cols="1,3",options="header"]
|===
| Command
| Description

| `:help`
| Help System

| `:help cypher`
| Provide a list of the most useful Cypher commands, with an overview and a quick way to find help.

| `:help commands`
| List all available `:help` commands.

| `:help keys`
| List some of the Cypher editor keyboard shortcuts. +
To access the list of all available editor keybindings, press F1 in the Cypher editor.

| `:history`
| Display the most recently executed statements and commands.
You can click a block shown in the history result to bring it into the editor.
The command history is persisted across Browser restarts.

| `CALL db.schema.visualization()`
| Show database schema.

| `:sysinfo`
| Display data about the Neo4j system, such as store size, ID allocation, page cache, transactions, and databases (name, address, role, status, default database, and errors).
|===

For the complete list of all Neo4j Browser commands, see xref:reference-commands.adoc[Command reference].

[[settings]]
=== Browser Settings

The *Browser Settings* drawer contains configurations related to the UI, result frames, and graph visualization.
You can adjust some of them in place, for example, _Enable multi statement query editor_, _Initial command to execute_, graph limits, result limits, or by using the `:config` command.
For the full list of the Neo4j Browser settings and how to adjust them in the Browser and globally, see xref:operations/browser-settings.adoc[].

image:settings.png[width=40%]

[[editor]]
== Cypher editor

The Cypher editor is the primary interface for entering and running Cypher queries and commands.

image:screen_editor.png[]

[NOTE]
====
From Neo4j Browser 4.2.4, the Cypher editor is based on link:https://microsoft.github.io/monaco-editor/[Monaco Editor^], the code editor that powers link:https://github.com/Microsoft/vscode[Visual Studio Code (VS Code)^].
Even though it is the same text editor as VS Code, it is not the entire VS Code package.
For example, plugins are not included and are not possible to implement.
====

Some of the Cypher editor features include:

* Cypher queries to work with graph data.
* The editor can be instantiated several times, which allows you to edit the query inside the result frame and re-run it.
* Single-line editing for brief queries or commands.
* Multi-line editing for long queries or commands.
* REST request commands (`:GET`, `:POST`, `:PUT`, and `:DELETE`).
* Syntax highlighting:
** A smart highlight of matching pairs around the current position of the cursor, for example, matching brackets, braces, and parenthesis.
** Matching pairs are auto-closed.
** A smart highlight of identical words on a word click.
** Words, such as attributes, anon name, and values, are highlighted in different colors.
** Any punctuation, such as parenthesis and comma, has a slightly different color than text.
* Quick comment/uncomment.
* Indentation and folding. +
You can fold an indented code snippet.
This way, you can hide lots of code.
* Search and replace. +
For example, you can search for a particular label (e.g., `: Actor`) and replace all its occurrences (with `: Person`).
* Autocomplete for browser commands can autocomplete several words.
* Warnings are displayed with a squiggly line that you hover, and you get a pop-up.
* Client-side commands like `:help` for other operations.
* Command palette (F1) with all of the available commands with their shortcuts.
The currently available commands can be turned on and off.

image:command-palette.png[]

.Useful shortcuts
[cols="3,2,2",options="header"]
|===
| Description
| Keyboard shortcut (Mac OS)
| Keyboard shortcut (Windows and Linux)

| Select highlighted identical words one by one.
| *command + D*
| *Ctrl + D*

| Select all highlighted identical words.
| *command + shift + L*
| *Ctrl + shift + L*

| Move a query line up and down.
| *ALT + arrow*
| *ALT + arrow*

| Delete a query line.
| *command + shift + K*
| *Ctrl + shift + K*

| Add multiple cursors, if you want to add several lines at the same time.
| *command + ALT + arrow*
| *Ctrl + ALT + arrow*

| Toggle comment on the currently selected row(s).
| *command + /*
| *Ctrl + /*

| Search and replace.
| *command + F*
| *Ctrl + F*

| Run a query.
| *command + enter*
| *Ctrl + Enter*

| Switch to multi-line editing.
| *Shift + enter*
| *Shift + Enter*

| Move focus to the Cypher editor.
| */*
| */*

| Toggle the Cypher editor to full screen.
| *ESC*
| *ESC*
|===

[TIP]
====
For more information about keyboard shortcuts, use the command `:help keys`.
====

[[reusable-frames]]
== Reusable result frames

Neo4j Browser reusable result frames allow you to edit the query of an existing result directly in the result frame and re-run it to update the result in situ.

image:inline-result-editor.gif[]

You can also use _Cmd/Ctrl + click_ to send it back to the main editor and re-run it from there.

image:reusable-frame.png[]

Each reusable frame maintains its own local history of commands and updates the main one in the Cypher editor, should you need to instantiate a new result frame from there.

[[frame-views]]
=== Result frame views

Neo4j Browser supports different result frame views to suit your needs:

* Graph -- Display the result as nodes and relationships and allow xref:operations/browser-styling.adoc[styling] to be configured.
* Table -- Display the result as JSON formatted rows.
* Text -- Display the result as a plain text table.
* Code -- Display the submitted request, the Neo4j Server version and address, and the response.

For more details on the different ways of viewing data in Neo4j Browser, see xref:operations/result-frames.adoc[].

[[stream]]
=== Stream

A stream is a scrolling series of result frames.

image:screen_stream.png[]

A reusable result frame is created for each command execution, added to the top of the stream to create a scrollable collection in reverse chronological order.
You can expand and collapse the result frames using the *Collapse* icon. +
To remove all the frames from the stream, use the `:clear` command.

Browser settings that maybe useful for you are the maximum number of result frames to display (`maxFrames`) and the size of the command and statement history (`maxHistory`).
When reached, old frames and history entries get retired.
For more information on how to adjust Browser Settings, see xref:operations/browser-settings.adoc[].
