From 1369303e22980fec3ae6c12344567b473becbb5e Mon Sep 17 00:00:00 2001 From: Liza Shkirando Date: Mon, 22 Feb 2021 10:45:14 +0100 Subject: [PATCH 1/5] Updated :play intro with new screenshots and text. --- src/browser/documentation/guides/intro.tsx | 157 ++++++++++++++------- src/browser/images/Favorites.gif | Bin 0 -> 6113055 bytes src/browser/images/Keystrokes.gif | Bin 0 -> 7643685 bytes src/browser/images/ProjectFiles.gif | Bin 0 -> 5786756 bytes src/browser/images/ReusableFrame.gif | Bin 0 -> 1053209 bytes src/browser/images/SidebarDB_Iinfo.png | Bin 0 -> 162483 bytes src/browser/images/Stream.png | Bin 0 -> 256871 bytes src/browser/modules/Carousel/style.less | 2 + 8 files changed, 107 insertions(+), 52 deletions(-) create mode 100644 src/browser/images/Favorites.gif create mode 100644 src/browser/images/Keystrokes.gif create mode 100644 src/browser/images/ProjectFiles.gif create mode 100644 src/browser/images/ReusableFrame.gif create mode 100644 src/browser/images/SidebarDB_Iinfo.png create mode 100644 src/browser/images/Stream.png diff --git a/src/browser/documentation/guides/intro.tsx b/src/browser/documentation/guides/intro.tsx index 1c42215ea09..413792e858a 100644 --- a/src/browser/documentation/guides/intro.tsx +++ b/src/browser/documentation/guides/intro.tsx @@ -27,7 +27,7 @@ const slides = [

Introduction

-

Getting started with Neo4j Browser

+

Neo4j Browser User Interface

@@ -55,26 +55,45 @@ const slides = [

- The editor is the primary interface for entering and running commands. - Enter Cypher queries to work with graph data. Use client-side commands - like - :help for other operations. + Editor pane is used to edit and run for Cypher statements and Browser + commands. Browser commands begin with :, for example{' '} + :help +

+ + + + + + + + + + + + + +
Execute current command + {' '} + Cmd-Return +
Previous command in history + Cmd-Up-Arrow +
Next command in history + Cmd-Down-Arrow +
+

+

+ You can view the complete list of keybinding anytime by running{' '} + :help keys

-
    -
  • Single line editing for brief queries or commands
    • -
  • Switch to multi-line editing with {''}
    • -
  • Run a query with {''}
    • -
  • History is kept for easily retrieving previous commands
    • -
- +
,
-

Stream

-

Scrolling series of result frames

+

Result frame

+

Most recently executed command or Cypher query.

@@ -83,76 +102,110 @@ const slides = [ order.

    -
  • Special frames like data visualization
    • -
  • Expand a frame to full screen
    • -
  • Remove a specific frame from the stream
    • +
  • If a frame is pinned it will always stay in the same position.
    • +
  • + You can clear the stream of result frames running :clear{' '} + command. +
  • - Clear the stream with the :clear command + There are maximum 30 result frames displayed in the stream. You can + change this number in the Settings sidebar.{' '} +
    • +
  • + You can bring up the history of the executed commands and queries by + running :history command. +
    • +
  • + Clear the stream with the :clear command.
- +
,
-

Frame code view

-

Viewing requests and responses

+

Reusable frame

+

Instead of the stream

- The code tab displays everything sent to and received from the Neo4j - server, including: + You can also iterate in the same frame instead of generating a + scrollable stream of frames.

-
    -
  • Request URI, HTTP method and headers
    • -
  • Response HTTP response code and headers
    • -
  • Raw request and response content in JSON format
    • -
+

Adjust your preferences in the Settings sidebar tab.

- +
,
-

Sidebar

-

Convenient clickable access

+

Sidebar: Database information

+

Databasse metadata

-

- The sidebar expands to reveal different functional panels for common - queries and information. -

-
    -
  • Database metadata and basic information
    • -
  • Saved scripts organized into folders
    • -
  • Information links for docs and reference
    • -
  • Credits and licensing information
    • -
+ When Neo4j is installed, it is initiated with two databases - a{' '} + system database and a default neo4j database. + Launching Neo4j Browser will automatically point us to the{' '} + neo4j default database, shown by the + neo4j$ prompt in the editor.
, + -
-

Next steps

-

- Neo4j is like a mashup of a REPL + lightweight IDE + graph - visualization. +

+

Sidebar: Favorites

+

Quick way to save your queries

+
+
+

+ Favorite queries or commands can be saved in the local storage and + displayed in the sidebar.{' '} +

+

+ Favorites are global and independent of project or database which means + that you can access your Favorites from Neo4j Browser with different + databases, hosting platforms, and data sets.

- Play start - Back to getting started
-

Keep getting started

+ +
+ , + + +
+

Sidebar: Project files

+

Save cypher files to share with your colleagues

+
+
+ Queries and commands can also be saved as Project files. Project + folder can be reached through Neo4j Desktop and your hard disk. +
+
+ +
+ , + + +
+
+ {' '} + 🏠 + Play start - Back to getting started +
+
+ +
+

Next steps

@@ -137,13 +145,16 @@ const slides = [

Adjust your preferences in the Settings sidebar tab.

- +
,

Sidebar: Database information

-

Databasse metadata

+

Database metadata

When Neo4j is installed, it is initiated with two databases - a{' '} @@ -177,7 +188,7 @@ const slides = [

- +
, @@ -191,7 +202,7 @@ const slides = [ folder can be reached through Neo4j Desktop and your hard disk.
- +
, diff --git a/src/browser/documentation/help/keys.tsx b/src/browser/documentation/help/keys.tsx index f905d844c90..4d8960e7cd9 100644 --- a/src/browser/documentation/help/keys.tsx +++ b/src/browser/documentation/help/keys.tsx @@ -31,80 +31,201 @@ const category = 'browserUiCommands' const content = ( <> - + - - - + + - - - + + + + + + + +
Editor actionAny modeSingle-line modeGlobal actions +
Execute current commandChange focus to editor -
- {isMac ? '' : ''} -
+
{printShortcut(FOCUS_SHORTCUT)}
Toggle fullscreen editor -
{''}
+
{printShortcut(FULLSCREEN_SHORTCUT)}
+
+ + + + + + + + + + + + + + + + - - + + + - - + + + - - + + + - + + - - + + - - + + + - - + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Editor action + + Windows / Linux + + Mac +
Execute current commandCtrl + EnterCmd + Return
Previous command in history -
- {isMac ? '' : ''} -
- 		-
{''}
- 		Ctrl + Up ArrowCmd + Up Arrow
Next command in history -
- {isMac ? '' : ''} -
- 		-
{''}
- 		Ctrl + Up DownCmd + Up Down
Switch to multi-line editing - -
{''}
- 		SearchCtrl + FCommand + F
+ Increase IndentTabTab
Global actions - + Decrease IndentShift + TabShift + Tab
Change focus to editor -
{printShortcut(FOCUS_SHORTCUT)}
- 		Comment OutCtrl + /Command + /
Toggle fullscreen editor -
{printShortcut(FULLSCREEN_SHORTCUT)}
- 		Comment InCtrl + /Command + /
+ UndoCtrl + ZCommand + Z
RedoCtrl + YShift + Command + Z or Command + Y
Increase font sizeCtrl + .Command + .
Decrease font sizeCtrl + ,Command + ,
Decrease IndentCtrl + [Command + [
Increase IndentCtrl + ]Command + ]
Move the line downAlt + DownOption + Down
Move the line upAlt + UpOption + Up
ReplaceCtrl + FCommand + Alt + F
Select allCtrl + ACommand + A
Select downwardShift + DownShift + Down
Select rightShift + RightShift + Right
Select leftShift + LeftShift + Left
Select upwardShift + UpShift + Up
Select to the endAlt + Shift + RightCommand + Shift + Right
Select to the startAlt + Shift + LeftCommand + Shift + Left
Align text rightCtrl + Shift + RightOption + Right
Align text leftCtrl + Shift + LeftOption + Left
Add multi-cursor aboveCtrl + Alt + UpCommand + Alt + Up
Add multi-cursor belowCtrl + Alt + DownCommand + Alt + Down
Add multi-cursor aboveCtrl + Alt + Shift + UpCommand + Alt + Shift + Up
Move multi-cursor from current line to the line belowCtrl + Alt + Shift + DownCommand + Alt + Shift + Down
-
+

Next steps