update explorer

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

@@ -22,6 +22,8 @@ Nebula Explorer （简称 Explorer）是一款可以通过 Web 访问的图形
 
 - 灵活性强：支持通过 VID、Tag、Subgraph 等方式查询数据。
 
+- 多种操作：支持对多个点进行拓展操作、查询多个点的共同邻居、查询起点到终点之间的路径等操作。
+
 - 多样展示：用户可以在层次图（dagre）、力导向图（force）、环形图（circular）中自由选择数据的展示方式。
 
 - 便于筛选：支持基于自定义条件灵活筛选需要展示的数据。

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

@@ -38,6 +38,6 @@
 2. 完成设置后，点击 **连接** 按钮。  
    如果能看到如下图所示的界面，表示已经成功连接到 Nebula Graph 数据库。
 
-    ![Explorer 进入控制台页面，表示成功连接到 Nebula Graph](../figs/ex-ug-003.png "Nebula Graph 连接成功")
+    ![Explorer 进入控制台页面，表示成功连接到 Nebula Graph](../figs/ex-ug-003-1.png "Nebula Graph 连接成功")
 
 一次连接会话持续 30 分钟。如果超过 30 分钟没有操作，会话即断开，用户需要重新登录数据库。

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

@@ -12,7 +12,7 @@
 
   | 端口号 | 说明 |
   | ---- | ---- |
-  | 7000 | Explorer 提供的 web 服务 |
+  | 7002 | Explorer 提供的 web 服务 |
   | 8070 | Nebula-http-gateway 的 HTTP 服务 |
 
 ## 安装
@@ -62,7 +62,7 @@ $ sudo rpm -e nebula-graph-explorer-{{ explorer.base100 }}-1.x86_64.rpm
 
 ## 后续操作
 
-启动成功后，在浏览器地址栏输入 `http://<ip_address>:7000`。
+启动成功后，在浏览器地址栏输入 `http://<ip_address>:7002`。
 
 在浏览器窗口中看到以下登录界面表示已经成功部署并启动了 Explorer。
 

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

@@ -4,20 +4,28 @@
 
 ## 查看点边
 
-移动鼠标到点或边上查看其数据。详细查看点和边的数据。以下展示 VID 为 `103` 的点的详细信息：
-
-![vertex_details](../figs/ex-ug-019.png)
+移动鼠标到点或边上，详细查看点和边的数据。以下展示 VID 为 `107` 的点的详细信息：
+![show](../figs/ex-ug-024-1.png)
 
 ## 批量选中
 
-按住左键拖拽并框选多个点和边，或按住 **Shift** 之后用鼠标单击多个点和边。
+Explorer 支持批量选中多个点边，并查看选中点边的数据，详细数据可以在画布左下角的点边概览打开并查看。同时也支持导出选中点或边的 CSV 文件。
+![review](../figs/ex-ug-027-1.png)
 
-![select](../figs/ex-ug-021.png)
+### 框选操作
 
-## 快速操作
+点击![frameselect](../figs/nav-frameSelect.png) 图标后，按住左键拖拽并框选多个点和边。示例如下：
+![slect](../figs/ex-ug-023-1.png)
+### 点击选择多个节边
+
+点击![singleselect](../figs/nav-singleSelect.png) 图标或按住 Shift 后，用鼠标单击并选中多个点和边，单击空白处取消选择。示例如下：
+![select](../figs/ex-ug-025-1.png)
 
-用户可以选择一个或多个点和边，在空白处点击右键可以进行对点进行扩展、查找两个点之间的路径、查看属性等等的操作。用户选择的点和边数据会影响到执行的操作，具体操作的说明参见[图探索拓展](../operation-guide/ex-ug-garph-exploration.md)。
 
-点击适合选中尺寸可以将选中的数据，移动到画布的中心，方便用户查看。
 
-![quick](../figs/ex-ug-022.png)
+## 快速操作
+
+用户可以选择一个或多个点和边，在空白处点击右键可以进行对点进行扩展、查找两个点之间的路径、在页面中显示或隐藏其属性等操作。用户选择的点和边数据会影响到可以执行的操作，具体操作的说明参见[图探索拓展](../operation-guide/ex-ug-garph-exploration.md)。
+![quick](../figs/ex-ug-026-1.png)
+
+点击 **适合选中尺寸** 可以将选中的数据，移动到画布的中心，方便用户查看。

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

@@ -0,0 +1,32 @@
+# 图探索拓展
+
+图探索拓展分为以下四类：
+
+- 拓展
+- 共同邻居
+- 路径查询
+- 查看属性
+
+## 拓展
+
+在菜单栏，点击 ![expand](../figs/rightclickmenu-expand.png) 图标，打开 **拓展** 窗口。用户可以双击某一点，对该点进行拓展。也可以框选画布中的多个点，在如下操作栏中修改边类型，选择边的流入流出方向，修改点的颜色，规定拓展步数和自定义过滤条件。
+
+![expand](../figs/ex-ug-013-1.png)
+
+## 共同邻居
+
+在菜单栏，点击 ![commonneighbor](../figs/rightclickmenu-commonNeighbor.png) 图标，打开 **共同邻居** 窗口。用户可以选中画布中的两个点或多个点，查询它们的共同邻居。选中的点无共同邻居时，默认返回 **没有相应数据** 。
+
+![common_neighbor](../figs/ex-ug-014-1.png)
+
+## 路径查询
+
+在菜单栏，点击 ![findpath](../figs/rightclickmenu-findPath.png) 图标，打开 **路径查询** 窗口。用户可以选中画布中的两个点，默认框选的第一个点为起点，第二个点为终点。用户可自定义边的类型和方向，规定拓展步数，选择查询以下三种路径： `All path`，`Shortest path` 和 `Noloop path`。
+
+![find_path](../figs/ex-ug-015-1.png)
+
+## 查看属性
+
+在菜单栏，点击 ![propertyview](../figs/nav-propertyView.png) 图标，打开 **查看属性** 窗口。用户可以选择在画布中展示或隐藏点或边的属性。点击确认后，缩放比例大于 110% 时候才会显示属性在画布上，小于 110% 的时候会自动隐藏。
+
+![show_property](../figs/ex-ug-016-1.png)

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

@@ -4,7 +4,7 @@
 
 ## 概览
 
-![Explorer](../figs/ex-ug-006-1.png)
+![Explorer](../figs/ex-ug-006.png)
 Explorer 的主页面分为五个部分：
 
 - 标签栏
@@ -15,14 +15,16 @@ Explorer 的主页面分为五个部分：
 
 ## 标签栏
 
-- 导出图形：支持导出当前视图的 CSV 文件或图片（SVG）文件。
+- 导出图形：支持导出当前视图的 CSV 文件或 SVG（图片）文件。
 
 ## 侧边栏
 
 侧边栏包括四个部分，用户可以点击按钮对图进行探索、修改画布上点的内容等等。
 
 - 查询探索：在进行探索之前，用户需要在查询数据并显示在画布中。
 
+- 画布操作：包括框选画布中的点、拖动画布、选中多条点边功能。
+
 - 图探索拓展：包括对点的拓展、查找两个点的共同邻居、查找两个点的路径、显示属性切换等功能。
 
 - 删除及撤销：对画布中显示的数据删除、撤回上一步操作。
@@ -33,6 +35,14 @@ Explorer 的主页面分为五个部分：
 
 - 开始：单击 ![query](../figs/nav-query.png)图标，通过VID、Tag和子图，查询数据并显示到页面上。
 
+### 画布操作
+
+- 框选模式：单击![frameSelect](../figs/nav-frameSelect.png) 图标，支持框选画布中的点和边。
+
+- 拖动画布：单击![moveCanvas](../figs/nav-moveCanvas.png) 图标，支持拖动画布的位置。
+
+- 选中多条点边：单击![singleSelect](../figs/nav-singleSelect.png) 图标，可以方便的点击画布中的点和边，单击空白处取消选择。
+
 ### 图探索扩展
 
 - 拓展：单击 ![expand](../figs/rightclickmenu-expand.png)图标，选择页面上的节点并进行自定义拓展，包括拓展方向、拓展步数、过滤条件等。
@@ -42,8 +52,8 @@ Explorer 的主页面分为五个部分：
 
 ### 删除及撤销
 
-- 删除：单击 ![delete](../figs/nav-delete.png)图标，可以删除画板中选中的点。
-- 反向删除：单击 ![deleteReverse](../figs/nav-deleteReverse.png)图标，可以删除画布中未选择的所有点。
+- 隐藏：单击![miss](../figs/nav-miss.png) 图标，可以隐藏画板中选中的点。
+- 隐藏其他：单击![missreverse](../figs/nav-missReverse.png) 图标，可以隐藏画布中未选择的所有点。
 - 撤销：单击 ![Revoke](../figs/nav-Revoke.png)图标，撤销上一步操作。
 
 ### 设置及帮助
@@ -57,17 +67,21 @@ Explorer 的主页面分为五个部分：
 
 - 图：显示通过VID、Tag或子图查询的数据。
 
-- 点边概览：默认隐藏，在当前画布选中点和边时才显示。点击（）图标，用户可以打开菜单，查看当前子图中选中的点和边的详细数据。
+- 点边概览：默认隐藏，在当前画布选中点和边时才显示。点击如图标识，用户可以打开菜单，查看当前子图中选中的点和边的详细数据。
+
+  ![review](../figs/ex-ug-027.png)
+
+更多详细操作参考 [画布操作](../operation-guide/ex-ug-canvas.md)。
 
 ## 缩略图
 
-用户可以通过缩略图上的按钮，完成图模式的切换，全屏展示画布中的图，移动、放大、缩小画布，收起缩略图等。同时在缩略图的左下角显示了画布中的图占总图的百分比。
+用户可以通过缩略图上的按钮，完成图模式的切换，全屏展示画布中的图，收起缩略图，缩小或放大画布中的图等。同时在缩略图的左下角显示了画布中的图占总图的百分比。
 
 - 图模式切换：用户可以切换画布中图的展示模式。
 
-| 图标 | ![force](../figs/Thumbnail-graphView.png) | ![dagre](../figs/Thumbnail-treeView.png) | ![circular](../figs/Thumbnail-sphereView.png) | 
-| ---- | ---- |----| ----|
-| 展示模式 | force（力导向图） | dagre（层次图） | circular（环形图） |
+  | 图标 | ![force](../figs/Thumbnail-graphView.png) | ![dagre](../figs/Thumbnail-treeView.png) | ![circular](../figs/Thumbnail-sphereView.png) | 
+  | ---- | ---- |----| ----|
+  | 展示模式 | force（力导向图） | dagre（层次图） | circular（环形图） |
 ## 关系列表
 
 点击右侧的 ![unfold](../figs/sidebar-unfold.png)图标，用户可以打开菜单，查看画板中 Tag 和 Edge 的数量、搜索 Tag 和 Edge ，同时也支持修改点的颜色和图标。

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

@@ -1,11 +1,11 @@
 # 关系列表
 
-用户可以在关系列表中，选中点和边。选中 Tag 为 `bachelor` 和 `player` 的 6 个点，选中 Edge 为 `serve` 的 5 条边，示例如下：
+用户可以在关系列表中，选中点和边。选中 Tag 为 `player` 和 `team` 的 5 个点，选中 Edge 为 `serve` 的 6 条边，示例如下：
 
-![select](../figs/ex-ug-017.png)
+![select](../figs/ex-ug-017-1.png)
 
 同时，用户可以修改 Tag 的颜色和图标，使得关键节点更为突出。
 
-在默认情况下，Tag 完全相同的 VID 点的颜色相同，并且也支持手动修改一个点或一组 Tag 完全相同的点的颜色。例如标签为 `bachelor` 和 `player`的点，修改其中一个点的颜色，在关系列表中你可以点开查看，示例如下：
+在默认情况下，Tag 完全相同的 VID 点的颜色相同，并且也支持手动修改一个点或一组 Tag 完全相同的点的颜色。例如标签为 `bachelor`, `player`和 `team` 的点，修改其中一个点的颜色，在关系列表中你可以点开查看，示例如下：
 
-![icon](../figs/ex-ug-018.png)
+![icon](../figs/ex-ug-018-1.png)

mkdocs.yml

@@ -349,6 +349,20 @@ nav:
       - Dashboard页面介绍: nebula-dashboard/4.use-dashboard.md
       - 监控指标说明: nebula-dashboard/6.monitor-parameter.md
 
+  - Nebula Graph Explorer:
+      - 什么是Nebula Graph Explorer: nebula-explorer/about-explorer/ex-ug-what-is-explorer.md
+      - 安装与登录:
+        - 部署 Explorer: nebula-explorer/deploy-connect/ex-ug-deploy.md
+        - 连接数据库: nebula-explorer/deploy-connect/ex-ug-connect.md
+        - 清除链接: nebula-explorer/deploy-connect/ex-ug-reset-connection.md
+      - 操作指南:
+        - 页面概览: nebula-explorer/operation-guide/ex-ug-page-overview.md
+        - 查询探索: nebula-explorer/operation-guide/ex-ug-query-exploration.md
+        - 图探索拓展: nebula-explorer/operation-guide/ex-ug-graph-exploration.md
+        - 画布操作: nebula-explorer/operation-guide/ex-ug-canvas.md
+        - 关系列表: nebula-explorer/operation-guide/ex-ug-relationship-list.md
+        - 快捷键: nebula-explorer/operation-guide/ex-ug-shortcuts.md
+
   - 附录:
       - Nebula Graph 常见问题: 20.appendix/0.FAQ.md
       - 生态工具概览: 20.appendix/6.eco-tool-version.md