Update explorer (#1059)

* [WIP]Update explorer

* update

* Update ex-ug-canvas.md

* update

* Update ex-ug-canvas.md

* fix

* Update ex-ug-connect.md

* Update ex-ug-connect.md

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

@@ -2,6 +2,8 @@
 
 Nebula Explorer （简称 Explorer）是一款可以通过 Web 访问的图探索可视化工具，搭配 Nebula Graph 内核使用，用于与图数据进行可视化交互。即使没有图数据操作经验，用户也可以快速成为图专家。
 
+![Explorer](../figs/explorer.png)
+
 !!! enterpriseonly
 
     Explorer 仅在企业版提供。

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

@@ -33,11 +33,11 @@
      - 如果已启用身份验证，但是未创建账号信息，用户只能以 GOD 角色登录，必须填写 `root` 及对应的密码 `nebula`。
      - 如果已启用身份验证，同时又创建了不同的用户并分配了角色，不同角色的用户使用自己的账号和密码登录。
 
-      ![Nebula Graph Explorer 的登录页面](../figs/ex-ug-002-1.png "配置数据库")
+      ![Nebula Graph Explorer 的登录页面](../figs/ex-ug-002.png)
 
-2. 完成设置后，点击 **连接** 按钮。  
+2. 完成设置后，点击 **登录** 按钮。
    如果能看到如下图所示的界面，表示已经成功连接到 Nebula Graph 数据库。
 
-    ![Explorer 进入控制台页面，表示成功连接到 Nebula Graph](../figs/ex-ug-003-1.png "Nebula Graph 连接成功")
+    ![Explorer 进入控制台页面，表示成功连接到 Nebula Graph](../figs/ex-ug-003.png "Nebula Graph 连接成功")
 
 一次连接会话持续 30 分钟。如果超过 30 分钟没有操作，会话即断开，用户需要重新登录数据库。

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

@@ -135,6 +135,6 @@ $ npm run stop # 停止 nebula-graph-explorer
 
 在浏览器窗口中看到以下登录界面表示已经成功部署并启动了 Explorer。
 
-![Nebula Explorer 登录页面](../figs/ex-ug-001.png)
+![Nebula Explorer 登录页面](../figs/ex-ug-002.png)
 
 进入 Explorer 登录界面后，用户需要连接 Nebula Graph。详细信息，参考[连接数据库](../deploy-connect/ex-ug-connect.md)。

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

@@ -1,7 +1,6 @@
-# 清除连接
+# 清空链接
 
 Explorer 还连接在某个 Nebula Graph 数据库时，在工具栏中，选择 设置 ![icon](../figs/nav-setup.png) > 清空连接，如下图所示：
-![清除链接](../figs/ex-ug-004-1.png)
+![清空链接](../figs/ex-ug-004.png)
 
 之后，如果浏览器上显示 **配置数据库** 页面，表示 Explorer 已经成功断开了与 Nebula Graph 数据库的连接。
-

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

@@ -4,7 +4,7 @@
 
 ## 查看点边
 
-移动鼠标到点或边上，详细查看点和边的数据。以下展示 VID 为 `107` 的点的详细信息：
+移动鼠标到点或边上，详细查看点和边的数据，同一点上的多个 Tag 通过`|`分开。以下展示 VID 为 `107` 的点的详细信息：
 ![show](../figs/ex-ug-024-1.png)
 
 ## 批量选中
@@ -15,17 +15,26 @@ Explorer 支持批量选中多个点边，并查看选中点边的数据，详
 ### 框选操作
 
 点击![frameselect](../figs/nav-frameSelect.png) 图标后，按住左键拖拽并框选多个点和边。示例如下：
-![slect](../figs/ex-ug-023-1.png)
+![select](../figs/ex-ug-023.png)
+
 ### 点击选择多个节边
 
 点击![singleselect](../figs/nav-singleSelect.png) 图标或按住 Shift 后，用鼠标单击并选中多个点和边，单击空白处取消选择。示例如下：
-![select](../figs/ex-ug-025-1.png)
-
-
+![select](../figs/ex-ug-025.png)
 
 ## 快速操作
 
 用户可以选择一个或多个点和边，在空白处点击右键可以进行对点进行扩展、查找两个点之间的路径、在页面中显示或隐藏其属性等操作。用户选择的点和边数据会影响到可以执行的操作，具体操作的说明参见[图探索拓展](../operation-guide/ex-ug-graph-exploration.md)。
 ![quick](../figs/ex-ug-026-1.png)
 
 点击 **适合选中尺寸** 可以将选中的数据，移动到画布的中心，方便用户查看。
+
+## 节点筛选
+
+用户可以对画布中显示的点进行过滤。在该示例中，选择 Tag 为 `player`，`age>=35` 的点，并启动过滤。
+
+!!! note
+
+    每一组筛选条件只针对带此 Tag 的数据，满足条件会被自动添加选中状态，不满足则置灰。其他 Tag 数据状态不受影响。
+
+![filter](../figs/ex-ug-029.png)

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

@@ -4,7 +4,7 @@
 
 ## 概览
 
-![Explorer](../figs/ex-ug-006.png)
+![Explorer](../figs/explorer.png)
 Explorer 的主页面分为五个部分：
 
 - 标签栏
@@ -17,6 +17,8 @@ Explorer 的主页面分为五个部分：
 
 - 导出图形：支持导出当前视图的 CSV 文件或 PNG（图片）文件。
 
+- 新增画布：支持创建多个画布，最多仅能打开10个画布。
+
 ## 侧边栏
 
 侧边栏包括五个部分，用户可以点击按钮对图进行探索、修改画布上点的内容等等。
@@ -40,7 +42,8 @@ Explorer 的主页面分为五个部分：
 - 框选模式：单击![frameSelect](../figs/nav-frameSelect.png) 图标，支持框选画布中的点和边。
 - 选中多条点边：单击![singleSelect](../figs/nav-singleSelect.png) 图标，可以方便的点击画布中的点和边，单击空白处取消选择。
 - 拖动画布：单击![moveCanvas](../figs/nav-moveCanvas.png) 图标，支持拖动画布的位置。
-- 
+- 节点过滤：单击![filter](../figs/nav-filter.png)图标，支持对画布中显示的点进行过滤。
+
 更多详细信息参考 [画布操作](../operation-guide/ex-ug-canvas.md)。
 
 ### 图探索扩展