add explorer

docs-2.0/nebula-explorer/about-explorer/ex-ug-what-is-explorer.md

@@ -0,0 +1,32 @@
+# What is Nebula Graph Explorer
+
+Nebula Graph Explorer (Explorer in short) is a browser-based visualization tool. It is used with the Nebula Graph kernel to visualize interaction with graph data. Even if there is no experience in graph database, you can quickly become a graph exploration expert.
+
+!!! enterpriseonly
+
+    Explorer is only available in the enterprise version.
+
+## Scenarios
+
+You can use Explorer in one of these scenarios:
+
+- You need to quickly find neighbor relationships from complex relationships, analyze suspicious targets, and display graph data in a visual manner.
+- For large-scale data sets, the data needs to be filtered, analyzed, and explored in a visual manner.
+
+## Features
+
+Explorer has these features:
+
+- Easy to use and user-friendly: Explorer can be deployed in simple steps. And use simple visual interaction, no need to conceive nGQL sentences, easy to realize graph exploration.
+
+- Flexible: Explorer supports querying data through VID, Tag, Subgraph.
+
+- Multiple operations: Explorer supports operations such as expanding operations on multiple vertexes, querying the common neighbors of multiple vertexes, and querying the path between the start vertex and the end vertex.
+
+- Various display: Explorer supports modifying the color and icon of the vertex in the canvas to highlight key nodes. You can also freely choose the data display mode in `dagre`, `force`, and `circular`.
+
+## Authentication
+
+Authentication is not enabled in Nebula Graph by default. Users can log into Studio with the `root` account and any password.
+
+When Nebula Graph enables authentication, users can only sign into Studio with the specified account. For more information, see [Authentication](../../7.data-security/1.authentication/1.authentication.md).

docs-2.0/nebula-explorer/deploy-connect/ex-ug-connect.md

@@ -0,0 +1,47 @@
+# Connect to Nebula Graph
+
+After successfully launching Explorer, you need to configure to connect to Nebula Graph. This topic describes how Explorer connects to the Nebula Graph database.
+
+## Prerequisites
+
+Before connecting to the Nebula Graph database, you need to confirm the following information:
+
+- The Nebula Graph services and Explorer are started. For more information, see [Deploy Explorer](../deploy-connect/ex-ug-connect.md).
+
+- You have the local IP address and the port used by the Graph service of Nebula Graph. The default port is `9669`.
+
+- You have a Nebula Graph account and its password.
+
+  !!! note
+
+        If authentication is enabled in Nebula Graph and different role-based accounts are created, you must use the assigned account to connect to Nebula Graph. If authentication is disabled, you can use the `root` and any password to connect to Nebula Graph. For more information, see [Nebula Graph Database Manual](https://docs.nebula-graph.io/).
+
+## Procedure
+
+To connect Explorer to Nebula Graph, follow these steps:
+
+1. On the **Config Server** page of Explorer, configure these fields:
+
+   - **Host**: Enter the IP address and the port of the Graph service of Nebula Graph. The valid format is `IP:port`. The default port is `9669`.  
+
+    !!! note
+
+        When Nebula Graph and Explorer are deployed on the same machine, you must enter the IP address of the machine, but not `127.0.0.1` or `localhost`, in the **Host** field.
+
+   - **Username** and **Password**: Fill in the log in account according to the authentication settings of Nebula Graph.
+
+      - If authentication is not enabled, you can use `root` and any password as the username and its password.
+
+      - If authentication is enabled and no account information has been created, you can only log in as GOD role and use `root` and `nebula` as the username and its password.
+
+      - If authentication is enabled and different users are created and assigned roles, users in different roles log in with their accounts and passwords.
+
+   ![The Config Server page shows the fields to be configured for connection](../figs/ex-ug-050.png "Config Server")
+
+2. After the configuration, click the **Connect** button.
+
+   If you can see the interface as shown in the below, it means you have successfully connected to the Nebula Graph database.
+
+   ![The Console page shows that the connection is successful](../figs/st-ug-051.png "Nebula Graph is connected")
+
+One session continues for up to 30 minutes. If you do not operate Explorer within 30 minutes, the active session will time out and you must connect to Nebula Graph again.

docs-2.0/nebula-explorer/deploy-connect/ex-ug-deploy.md

@@ -0,0 +1,128 @@
+# Deploy Explorer
+
+This topic describes how to deploy Explorer locally by RPM, and tar package.
+
+## RPM-based Explorer
+
+### Prerequisites
+
+Before you deploy Explorer, you must do a check of these:
+
+- The Nebula Graph services are deployed and started. For more information, see [Nebula Graph Database Manual](../../2.quick-start/1.quick-start-workflow.md).
+
+- Before the installation starts, the following ports are not occupied.
+
+   | Port | Description |
+   | ---- | ---- |
+   | 7002 | Web service provided by Explorer |
+   | 8080 | Nebula-http-gateway service |
+
+- The Linux distribution is CentOS, installed `lsof` and [Node.js](https://nodejs.org/en/) of version above v10.16.0+.
+
+### Install
+
+1. Select and download the RPM package according to your needs. It is recommended to select the latest version. Common links are as follows:
+
+  !!! enterpriseonly
+
+        Explorer is only available in the enterprise version. Click [Pricing](https://nebula-graph.io/pricing/) to see more.
+
+2. Use `sudo rpm -i <rpm>` to install RPM package.
+
+   For example, install Explorer, use the following command:
+   ```bash
+   $ sudo rpm -i nebula-graph-explorer-<version>.x86_64.rpm
+   ```
+### Uninstall
+
+Users can uninstall Explorer using the following command:
+
+```bash
+$ sudo rpm -e nebula-graph-explorer-<version>.x86_64
+```
+
+### Exception handling
+
+If the automatic start fails during the installation process or you want to manually start or stop the service, use the following command:
+
+- Start the service manually.
+
+   ```bash
+   $ sudo sh ./scripts/start.sh
+   ```
+
+- Stop the service manually
+
+   ```bash
+   $ sudo sh ./scripts/stop.sh
+   ```
+
+## tar-based Explorer
+
+### Prerequisites
+
+Before you deploy Explorer, you must do a check of these:
+
+- The Nebula Graph services are deployed and started. For more information, see [Nebula Graph Database Manual](../../2.quick-start/1.quick-start-workflow.md).
+
+- Before the installation starts, the following ports are not occupied.
+
+   | Port | Description |
+   | ---- | ---- |
+   | 7002 | Web service provided by Explorer |
+   | 8080 | Nebula-http-gateway service |
+
+- The Linux distribution is CentOS, installed `lsof` and [Node.js](https://nodejs.org/en/) of version above v10.16.0+.
+
+### Install
+
+1. Select and download the tar package according to your needs. It is recommended to select the latest version. Common links are as follows:
+
+  !!! enterpriseonly
+
+        Explorer is only available in the enterprise version. Click [Pricing](https://nebula-graph.io/pricing/) to see more.
+
+2. Use `tar -xvf` to decompress the tar package.
+
+   ```bash
+   tar -xvf nebula-graph-explorer-<version>.tar.gz
+   ```
+
+### Procedure
+
+!!! Note
+
+    The root directory `nebula-graph-explorer` has two installation packages: nebula-graph-explorer and nebula-http-gateway. You need to deploy and start the services separately on the same machine to complete the deployment of Explorer.'
+
+1. Deploy and start nebula-http-gateway.
+
+   ```bash
+   $ cd nebula-http-gateway
+   $ nohup ./nebula-httpd &
+   ```
+
+2. Deploy and start nebula-graph-explorer.
+
+   ```bash
+   $ cd nebula-graph-explorer
+   $ npm run start
+   ```
+
+### Stop Service
+
+You can use `kill pid` to stop the service:
+```bash
+$ kill $(lsof -t -i :8070) # stop nebula-http-gateway
+$ cd nebula-graph-explorer
+$ npm run stop # stop nebula-graph-explorer
+```
+
+## Next to do
+
+When Explorer is started, use `http://ip address:7002` to get access to Explorer.
+
+Seeing the following login interface, Explorer is successfully connected to Nebula Graph.
+
+![Nebula Graph Explorer](../figs/ex-ug-001.png)
+
+After entering the Explorer login interface, you need to connect to Nebula Graph. For more information, refer to [Connecting to the Nebula Graph](../deploy-connect/ex-ug-connect.md).

docs-2.0/nebula-explorer/deploy-connect/ex-ug-reset-connection.md

@@ -0,0 +1,7 @@
+# Reset connection
+
+When Explorer is still connected to a Nebula Graph database, in the toolbar, select Settings ![icon](../figs/nav-setup.png) > clear connect, as shown in the below:
+
+![clean](../figs/ex-ug-004.png)
+
+After that, if the **configuration database** page is displayed on the browser, it means that Explorer has successfully disconnected from the Nebula Graph.

docs-2.0/nebula-explorer/operation-guide/ex-ug-canvas.md

@@ -0,0 +1,30 @@
+# Canvas operation
+
+This topic describes operation in canvas.
+
+## Display vertexes and edges
+
+Move the mouse to the vertex or edge to view in detail. The following shows the detailed information of the vertex with `VID 107`:
+![show](../figs/ex-ug-024-1.png)
+
+## Batch selection
+
+Explorer supports batch selection and views the data of multiple vertexes and edges. The detailed data can be opened and viewed in the vertexes and edges overview at the lower-left corner of the canvas. It also supports exporting CSV files of selected vertexes or edges.
+![review](../figs/ex-ug-027.png)
+
+### Frame selection
+
+After clicking the ![frameselect](../figs/nav-frameSelect.png) icon, hold down the left button to drag and select multiple vertexes and edges. Examples are as follows:
+![slect](../figs/ex-ug-023-1.png)
+
+### Click to select multiple vertexes and edges
+
+Click the ![singleselect](../figs/nav-singleSelect.png) icon or hold down Shift, click and select multiple vertexes and edges with the mouse, and click the blank space to cancel the selection. Examples are as follows:
+![select](../figs/ex-ug-025.png)
+
+## Quick operation
+
+You can select one or more vertexes and edges, and right-click in the blank area to expand the vertexes, search the path between two vertexes, and show or hide their property on the canvas. The number of vertexes and edges you choose will affect the operations that can be performed. For more information, see [Graph Exploration Expansion](../operation-guide/ex-ug-graph-exploration.md).
+![quick](../figs/ex-ug-026.png)
+
+Click **Fit Selection** to move the selected data to the center of the canvas for users to view.

docs-2.0/nebula-explorer/operation-guide/ex-ug-graph-exploration.md

@@ -0,0 +1,36 @@
+# Graph exploration and expansion
+
+Graph exploration and expansion is divided into the following four parts:
+
+- Expand
+- Common neighbor
+- Search path
+- Inspect property
+
+## Expand
+
+In the sidebar, click the ![expand](../figs/rightclickmenu-expand.png) icon to open the **Expand** window. You can double-click a vertex to expand directly. You can also select multiple vertexes in the canvas, modify the edge type in the operation bar, select the inflow and outflow of the edge, modify the color of the vertex, specify the number of expansion steps and custom filter conditions.
+
+!!! Note
+
+    After the configuration in the panel is modified, the current configuration will be saved, and the current configuration will be expanded when double-clicking or right-clicking to quickly expand.
+
+![expand](../figs/ex-ug-013.png)
+
+## Common neighbor
+
+In the sidebar, click the ![commonneighbor](../figs/rightclickmenu-commonNeighbor.png) icon to open the **Common Neighbor** window. You can select two or more vertexes on the canvas and query their common neighbors. When the selected vertexes have no common neighbor, the default returns **There is no data**.
+
+![common_neighbor](../figs/ex-ug-014.png)
+
+## Search path
+
+In the sidebar, click the [findpath](../figs/rightclickmenu-findPath.png) icon to open the **Search path** window. You can select two vertexes in the canvas. By default, the first vertex selected is the starting point, and the second vertex is the ending point. You can customize the type and direction of the edge, specify the number of expansion steps, and choose to query the following three paths: `All path`, `Shortest path` and `Noloop path`.
+
+![find_path](../figs/ex-ug-015.png)
+
+## Inspect property
+
+In the sidebar, click the ![propertyview](../figs/nav-propertyView.png) icon to open the **Inspect property** window. You can choose to show or hide the property of vertexes or edges in the canvas. After clicking confirm, the property will be displayed on the canvas only when the zoom ratio is greater than 100%, and automatically hidden when the zoom ratio is less than 100%.
+
+![show_property](../figs/ex-ug-016.png)

docs-2.0/nebula-explorer/operation-guide/ex-ug-page-overview.md

@@ -0,0 +1,89 @@
+# Page Overview
+
+This topic describes Explorer main page.
+
+## Overview
+
+![Explorer](../figs/ex-ug-006.png)
+The main page of Explorer is divided into five parts:
+
+- Tab bar
+- Sidebar
+- Canvas
+- Minimap
+- Relationship list
+
+## Tab bar
+
+- Export: Export a CSV or SVG file of the current view.
+
+## Sidebar
+
+The sidebar consists of five parts. You can click the buttons to explore the graph, modify the content of the vertexes on the canvas, etc.
+
+- Start query: Before exploring, the user needs to query the vertexes and display them in the canvas.
+
+- Canvas operation: Including frame selection of vertexes in the canvas, dragging the canvas, and selecting multiple vertexes and edges.
+
+- Graph exploration and expansion: Including functions such as vertexes expansion, finding common neighbors of multiple vertexes, finding the path of two vertexes, and inspecting the property.
+
+- Hide and undo: Hide the data displayed in the canvas and undo the previous operation.
+
+- Settings and help: Switch graph space, find help, modify settings, etc.
+
+### Start query
+
+- Start: Click the ![query](../figs/nav-query.png) icon to query the data and display it on the page through VID, Tag and sub-graph.
+
+### Canvas operation
+
+- Frame selection mode: Click the ![frameSelect](../figs/nav-frameSelect.png) icon to support frame selection of vertexes and edges in the canvas.
+- Click to select multiple vertexes and edges: Click the ![singleSelect](../figs/nav-singleSelect.png) icon, you can easily click the vertexes and edges in the canvas, and click the blank space to cancel the selection.
+- Move the canvas: Click the ![moveCanvas](../figs/nav-moveCanvas.png) icon to drag the position of the canvas.
+For more information, see [Canvas Operation](../operation-guide/ex-ug-canvas.md).
+
+### Graph exploration and expansion
+
+- Expand: Click the ![expand](../figs/rightclickmenu-expand.png) icon, select the vertexes on the page and perform custom expansion, including direction, steps, filter conditions, etc.
+- Common neighbor: Click the ![commonNeighbor](../figs/rightclickmenu-commonNeighbor.png) icon, select at least two vertexes on the page and view their common neighbors.
+- Search path: Click the ![findPath](../figs/rightclickmenu-findPath.png) icon to query the path of `all paths`, `Shortest path` or `Noloop path` between the start vertex and the end vertex.
+- Inspect property: Click the ![propertyView](../figs/nav-propertyView.png) icon to choose whether to display the property values of vertexes or edges in the canvas.
+For more information, see [Graph exploration and expansion](../operation-guide/ex-ug-graph-exploration.md).
+
+### Hide and undo
+
+- Dismiss: Click the ![miss](../figs/nav-miss.png) icon to hide the selected vertexes and edges in the canvas.
+- Dismiss others: Click the ![missreverse](../figs/nav-missReverse.png) icon to hide all unselected vertexes and edges in the canvas.
+- Undo: Click the ![Revoke](../figs/nav-Revoke.png) icon to undo the operation in the previous step.
+
+### Settings and help
+
+- Switch graph space: Click the ![graphSpace](../figs/nav-graphSpace.png) icon to switch the current graph space.
+- Help: Click the ![help](../figs/nav-help.png) icon to see more information.
+- Setting: Click the ![setup](../figs/nav-setup.png) icon to view usernames and shortcut keys, modify language settings, clear Explorer connect, etc.
+
+## Canvas
+
+The canvas is mainly divided into:
+
+- canvas: Display the data queried by VID, Tag or subgraph.
+
+- Vertexes and Edges overview: It is hidden by default and only displayed when the vertex and edge are selected on the current canvas. Click on the icon in the following, and the user can open the menu to view the detailed data of the selected vertexes and edges in the current canvas.
+
+  ![review](../figs/ex-ug-027.png)
+
+For more information, see [canvas operation](../operation-guide/ex-ug-canvas.md).
+
+## Minimap
+
+You can use the button on the minimap to switch the graph mode, display the vertexes in the canvas in full screen, collapse the minimap, zoom in or zoom out the canvass, etc. At the same time, the percentage of the graph in the canvas to the total graph is displayed in the lower-left corner of the minimap.
+
+- Switch mode: You can switch the display mode of the graph in the canvas.
+
+  | icon | ![force](../figs/Thumbnail-graphView.png) | ![dagre](../figs/Thumbnail-treeView.png) | ![circular](../figs/Thumbnail-sphereView.png) | 
+  | ---- | ---- |----| ----|
+  | mode | force | dagre | circular |
+
+  ## Relationship list
+
+  Click the ![unfold](../figs/sidebar-unfold.png) icon on the right, you can open the menu, view the number of tags and edges in the canvas, search for tags and edges, and also support modifying the color and icon of the vertex.