[WIP] explorer220-updates (#1435)

* explorer220-updates

* updates

* Update mkdocs.yml

* console updates

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

@@ -22,13 +22,15 @@ Nebula Explorer （简称 Explorer）是一款可以通过 Web 访问的可视
 
 - [易于安装](../deploy-connect/ex-ug-deploy.md)：简单步骤即可完成部署。
 
-- [易于使用](../operation-guide/ex-ug-shortcuts.md)：使用简洁的可视化交互方式，无需构思 nGQL 语句，轻松实现图探索。
+- [易于使用](../ex-ug-shortcuts.md)：使用简洁的可视化交互方式，无需构思 nGQL 语句，轻松实现图探索。
 
-- [灵活性强](../operation-guide/ex-ug-query-exploration.md)：支持通过 VID、Tag、Subgraph 等方式查询数据。
+- [灵活性强](../ex-ug-query-exploration.md)：支持通过 VID、Tag、Subgraph 等方式查询数据。
 
-- [探索拓展](../operation-guide/ex-ug-graph-exploration.md)：支持对多个点进行拓展操作、查询多个点的共同邻居、查询起点到终点之间的路径等操作。
+- [探索拓展](../ex-ug-graph-exploration.md)：支持对多个点进行拓展操作、查询多个点的共同邻居、查询起点到终点之间的路径等操作。
 
-- [多样展示](../operation-guide/ex-ug-page-overview.md)：支持修改画布中点的颜色和图标，突出关键节点；也支持使用不同布局模式展示数据。
+- [多样展示](../canvas-operations/canvas-overview.md)：支持修改画布中点的颜色和图标，突出关键节点；也支持使用不同布局模式展示数据。
+
+- [数据存储](../canvas-operations/canvas-snapshot.md)：支持保存和导入画布数据。
 
 <!-- - 便于筛选：支持基于自定义条件灵活筛选需要展示的数据。-->
 

docs-2.0/nebula-explorer/operation-guide/canvas-operations/canvas-overview.md → docs-2.0/nebula-explorer/canvas-operations/canvas-overview.md

@@ -2,23 +2,15 @@
 
 用户可在画布中可视化地探索图数据。本文主要介绍画布的组成及相关功能。
 
-![canvas](../../figs/canvas-overview.png)
+画布概览图如下：
 
-画布的组成如下：
-
-- 顶部页签
-- 可视化模式
-- 数据存储
-- 搜索框
-- 多布局
-- 缩略图
-- 数据概览
+![canvas](../figs/canvas-overview.png)
 
 ## 顶部页签
 
-用户可以通过单击画布顶部加号![canvas_tab](../../figs/list-add.png)图标同时操作多个画布。
+用户可以通过单击画布顶部加号![canvas_tab](../figs/list-add.png)图标同时操作多个画布。
 
-![canvas_overview](../../figs/canvas-graphspace.png)
+![canvas_overview](../figs/canvas-graphspace.png)
 
 - 不同画布上的数据可以来自同一个图空间也可以来自不同的图空间。
 - 除了左边页签的第一个画布外，用户可以自定义画布的名称。
@@ -31,9 +23,12 @@
 
 用户可以通过创建快照，或以图片、CSV 文件的方式导出画布以存储当前画布数据。
 
-在页面右上方单击![PNG](../../figs/topbar-exportPNG.png)以图片形式存储画布数据；单击![CSV](../../figs/topbar-exportCSV.png)以 CSV 文件的方式存储画布数据。
+在页面右上方：
+
+- 单击![snapshot](../figs/graph-snapshot.png)创建快照。更多信息，参见[画布快照](canvas-snapshot.md)。
+- 单击![PNG](../figs/topbar-exportPNG.png)以图片形式存储画布数据。
+- 单击![CSV](../figs/topbar-exportCSV.png)以 CSV 文件的方式存储画布数据。
 
-关于快照的更多信息，参见[画布快照](canvas-snapshot.md)。
 
 ## 搜索框
 
@@ -45,21 +40,21 @@ Explorer 支持 6 中布局方式展示画布上的数据之间的关系。
 
 | 力导向图 | 层次图 | 环形图 | 网格  | 神经网络 | 辐射  |
 | -------- | ------ | ------ | ----- | -------- | ----- |
-| ![graphView](../../figs/Thumbnail-graphView.png)    | ![treeView](../../figs/Thumbnail-treeView.png)  | ![sphereView](../../figs/Thumbnail-sphereView.png)  | ![grid](../../figs/Thumbnail-Grid.png) | ![neural](../../figs/Thumbnail-neuralNetwork.png)    | ![radial](../../figs/Thumbnail-Radial.png) |
+| ![graphView](../figs/Thumbnail-graphView.png)    | ![treeView](../figs/Thumbnail-treeView.png)  | ![sphereView](../figs/Thumbnail-sphereView.png)  | ![grid](../figs/Thumbnail-Grid.png) | ![neural](../figs/Thumbnail-neuralNetwork.png)    | ![radial](../figs/Thumbnail-Radial.png) |
 
-![layouts](../../figs/layout.gif)
+![layouts](../figs/layout.gif)
 
 ## 缩略图
 
 全屏展示画布中的图，收起缩略图，缩小或放大画布中的图等。同时在缩略图的左下角显示了画布中的图占总图的百分比。
 
-![](../../figs/thumbnail.png)
+![](../figs/thumbnail.png)
 
 ## 数据概览
 
-在页面右侧，单击![list-left](../../figs/list-left.png)展开数据概览面板。
+在页面右侧，单击![list-left](../figs/list-left.png)展开数据概览面板。
 
-![dataView](../../figs/dataview.png)
+![dataView](../figs/dataview.png)
 
 - 可以在数据概览面板中看到画布中的 Tag 数、Edge type 数，及对应的点和边的数量。
 - 在数据概览面板，单击 Tag 颜色图标，可自定义 Tag 相同的点的颜色、尺寸、图标。

docs-2.0/nebula-explorer/canvas-operations/canvas-snapshot.md

@@ -0,0 +1,31 @@
+# 管理快照
+
+Explorer 的快照功能可保存图探索得到的可视化结果，以便再次打开浏览器时还原保存的图数据。
+
+## 创建快照
+
+1. 在画布右上角，单击相机![snapshot](../figs/graph-snapshot.png)图标。
+2. 填写快照名称和备注（选填）。
+3. 单击**提交**。
+
+!!! note
+
+    已创建的快照被存放在历史快照中。更多信息，参见下文。
+
+
+## 历史快照
+
+在 Explorer 页面左侧导航栏，单击![snapshot_history](../figs/snapshot-history.png)图标进入历史快照列表页面。用户可切换图空间查看相应图空间的历史快照，还可以导入历史快照至画布，下载历史快照至本地，以及删除快照。
+
+在目标历史快照右侧的**操作**列下：
+
+- 单击![snapshot_import](../figs/snapshot-import.png)导入历史快照至新画布中。
+- 单击![snapshot_export](../figs/snapshot-export.png)以 JSON 的格式下载历史快照至本地。
+- 单击![snapshot_delete](../figs/snapshot-delete.png)删除历史快照。
+
+在历史快照列表左上方，单击**导入快照**可导入之前下载的 JSON 格式文件至快照列表中，以便用户之间离线共享快照数据。系统会根据 JONS 文件中记录的图空间信息将导入的快照自动放置于相应的图空间中。
+
+!!! note
+
+    目前最多存储 50 个历史快照。 
+

docs-2.0/nebula-explorer/operation-guide/canvas-operations/visualization-mode.md → docs-2.0/nebula-explorer/canvas-operations/visualization-mode.md

@@ -1,18 +1,18 @@
 # 可视化模式
 
-Explorer 支持 **2D** 和 **3D** 2 种可视化模式探索数据。2D 模式支持数据查看和图操作；3D 模式通过不同视角对图数据进行探索，适用于数据量级比较高或者需要演示的场合。
+Explorer 支持 **2D** 和 **3D** 两种可视化模式探索数据。2D 模式支持数据查看和图操作；3D 模式通过不同视角对图数据进行探索，适用于数据量级比较高或者需要演示的场合。
 
 !!! note
 
     3D 模式下，不可进行图数据的操作。
 
-![visualizaiton_mode](../../figs/visualization.gif)
+![visualizaiton_mode](../figs/visualization.gif)
 
 ## 2D 模式
 
 2D 模式下可对画布上的数据进行探索操作：
 
-![2D](../../figs/2d-mode.png)
+![2D](../figs/2d-mode.png)
 
 | 参数       | 说明                                                         |
 | ---------- | ------------------------------------------------------------ |
@@ -25,7 +25,7 @@ Explorer 支持 **2D** 和 **3D** 2 种可视化模式探索数据。2D 模式
 
 ## 3D 模式
 
-![2D](../../figs/3d-mode.png)
+![2D](../figs/3d-mode.png)
 
 在页面左上方，单击视图切换开关可切换至 3D 视图模式。3D 视图模式下，可切换回到 2D 图探索模式，并且不会对 2D 的探索产生任何副作用。
 
@@ -37,4 +37,4 @@ Explorer 支持 **2D** 和 **3D** 2 种可视化模式探索数据。2D 模式
 
 !!! compatibility "历史版本兼容性"
 
-    针对 3.0.0 以下版本的 Nebula Graph，需要创建索引后才可以使用鸟瞰功能。更多信息，参见[创建索引](../../../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。
+    针对 3.0.0 以下版本的 Nebula Graph，需要创建索引后才可以使用鸟瞰功能。更多信息，参见[创建索引](../../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。

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

@@ -6,7 +6,7 @@
 
 在连接 Nebula Graph 数据库前，用户需要确认以下信息：
 
-- 已经安装部署了 Explorer。详细信息参考[部署 Explorer](../deploy-connect/ex-ug-connect.md)。
+- 已经安装部署了 Explorer。详细信息，参见[部署 Explorer](../deploy-connect/ex-ug-deploy.md)。
 
 - Nebula Graph 的 Graph 服务本机 IP 地址以及服务所用端口。默认端口为 `9669`。
 
@@ -41,6 +41,6 @@
 
 ## 断开连接
 
-在页面左侧工具栏中，选择设置 ![icon](../figs/nav-setup.png)图标 > 清空连接。
+在页面左侧工具栏中，选择设置![icon](../figs/nav-setup.png)图标 > 清空连接。
 
 如果浏览器上显示**配置数据库**页面，表示 Explorer 已经成功断开了与 Nebula Graph 数据库的连接。

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

@@ -12,7 +12,7 @@
 | --- | --- |
 | 2.5.x | 2.0.0 |
 | 2.6.x | 2.1.0 |
-| 2.5.X ~ 3.0.0| 2.2.0|
+| 2.5.x ~ 3.0.0| 2.2.0|
 
 ## RPM 部署
 
@@ -82,12 +82,14 @@
 ### 启停服务
 
 支持使用 systemctl 服务控制项目启停。
+
 ```bash
 $ systemctl status nebula-explorer #查看服务状态
 $ systemctl stop nebula-explorer #停止服务
 $ systemctl start nebula-explorer #启动服务
 ```
-也可以在安装目录下使用以下命令，手动启动或停止服务：
+也可以在安装目录下使用以下命令，手动启动或停止服务。
+
 ```bash
 $ cd ./scripts/rpm
 $ bash ./start.sh #启动服务
@@ -101,7 +103,7 @@ $ bash ./stop.sh #停止服务
 ```bash
 $ sudo rpm -e nebula-explorer-<version>.x86_64
 ```
-## tar 包部署
+## TAR 包部署
 
 ### 前提条件
 
@@ -129,7 +131,7 @@ $ sudo rpm -e nebula-explorer-<version>.x86_64
 
 ### 安装及部署
 
-1. 根据需要下载 tar 包，建议选择最新版本。
+1. 根据需要下载 TAR 包，建议选择最新版本。
 
   !!! enterpriseonly
 
@@ -152,7 +154,7 @@ $ sudo rpm -e nebula-explorer-<version>.x86_64
    $ cp -r nebula.license /usr/local/nebula-explorer
    ```
 
-4. 进入`nebula-explorer`文件夹，启动 explorer。
+4. 进入`nebula-explorer`文件夹，启动 Explorer。
 
   ```bash
   $ cd nebula-explorer
@@ -173,7 +175,7 @@ $ kill $(lsof -t -i :7002)
 
 在浏览器窗口中看到以下登录界面表示已经成功部署并启动了 Explorer。
 
-![Nebula Explorer 登录页面](../figs/ex-ug-002-1.png)
+![Nebula Explorer 登录页面](../figs/explorer_deploy.png)
 
 !!! note
 

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

@@ -7,14 +7,15 @@
 - 路径查询
 - 查看属性
 
-![query_exploration](../figs/exploration_query.gif)
+![query_exploration](figs/exploration_query.gif)
+
 ## 前提条件
 
 使用**探索拓展**的所有功能前，确保画布中有点数据。具体操作，参见[开始探索](ex-ug-query-exploration.md)。
 
 ## 拓展
 
-在左侧导航栏，单击![expand](../figs/nav-expand.png)图标，打开**拓展**窗口。用户可以双击某一点，对该点进行拓展。也可以右键框选画布中的多个点，在操作栏中修改边类型，选择边的流入流出方向，修改点的颜色，规定拓展步数和自定义过滤条件。
+在左侧导航栏，单击![expand](figs/nav-expand.png)图标，打开**拓展**窗口。用户可以双击某一点，对该点进行拓展。也可以右键框选画布中的多个点，在操作栏中修改边类型，选择边的流入流出方向，修改点的颜色，规定拓展步数和自定义过滤条件。
 
 | 参数     | 描述                                                         |
 | -------- | ------------------------------------------------------------ |
@@ -31,14 +32,14 @@
 
 ## 共同邻居
 
-在左侧导航栏，单击![commonneighbor](../figs/nav-commonNeighbor.png)图标，打开**共同邻居**窗口。用户可以选中画布中的两个点或多个点，查询它们的共同邻居。选中的点无共同邻居时，默认返回**没有相应数据**。
+在左侧导航栏，单击![commonneighbor](figs/nav-commonNeighbor.png)图标，打开**共同邻居**窗口。用户可以选中画布中的两个点或多个点，查询它们的共同邻居。选中的点无共同邻居时，默认返回**没有相应数据**。
 
 关于如何选中两个点或者多个点的操作，参见[常规操作](ex-ug-shortcuts.md)。
 
 
 ## 路径查询
 
-在左侧导航栏，单击![findpath](../figs/nav-findPath.png)图标，打开**路径查询**窗口。**用户可以选中画布中的两个点，默认框选的第一个点为起点，第二个点为终点。**用户可自定义边的类型和方向，规定拓展步数，选择查询路径。
+在左侧导航栏，单击![findpath](figs/nav-findPath.png)图标，打开**路径查询**窗口。**用户可以选中画布中的两个点，默认框选的第一个点为起点，第二个点为终点。**用户可自定义边的类型和方向，规定拓展步数，选择查询路径。
 
 | 参数     | 描述                                                         |
 | -------- | ------------------------------------------------------------ |
@@ -50,7 +51,7 @@
 
 ## 查看属性
 
-在左侧导航栏，单击![propertyview](../figs/nav-propertyView.png)图标，打开**查看属性**窗口。用户可以选择在画布中展示或隐藏点或边的属性。
+在左侧导航栏，单击![propertyview](figs/nav-propertyView.png)图标，打开**查看属性**窗口。用户可以选择在画布中展示或隐藏点或边的属性。
 
 !!! note
 

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

@@ -0,0 +1,49 @@
+# 页面概览
+
+本文介绍 Explorer 的基本组成，帮忙用户了解 Explorer 的各功能。
+
+Explorer 由导航栏和画布两大模块组成。
+
+![explorer-overview](figs/explorer-overview-1.png)
+
+!!! note
+
+    登录 Explorer 后，用户需选择并单击一个目标图空间，才可进入画布页面并解锁左侧导航栏的查询及分析功能。
+
+![explorer-overview-graph_space](figs/explorer-overview-graphspace.png)
+
+## 导航栏
+
+用户可以通过单击 Explorer 页面左侧的图标进行图数据导入、图数据分析与探索等操作。左侧导航栏的图标及描述如下：
+
+| 图标  | 描述 |
+| ----- | ---- |
+| ![query](figs/nav-query2.png) | 输入 VID、Tag 和子图等信息后，匹配的数据会显示到画布上。更多信息，参见[查询方式](ex-ug-query-exploration.md)。     |
+| ![filter](figs/nav-filter.png) | 对画布中显示的点进行过滤。更多信息，参见[节点筛选](node-filtering.md)。     |
+| ![expand](figs/nav-expand.png) | 选择页面上的节点并进行自定义拓展，包括方向、步数、过滤条件等。    |
+| ![commonNeighbor](figs/nav-commonNeighbor.png) | 选择页面上至少两个点并查看它们的共同邻居。     |
+| ![findPath](figs/nav-findPath.png) | 查询起点到终点之间的所有路径、最短路径和非循环路径。     |
+| ![propertyView](figs/nav-propertyView.png) | 选择是否显画布中的点或边的属性值。     |
+| ![hide](figs/nav-miss.png) | 隐藏画布中选中的点边。     |
+| ![hideReverse](figs/nav-missReverse.png) | 隐藏画布中未选择的所有点边。     |
+| ![Revoke](figs/nav-Revoke.png) | 撤销上一步新增或隐藏的操作。     |
+| ![Redo](figs/redo.png) | 恢复上一步撤销的操作。     |
+| ![snapshot](figs/snapshot-history.png) | 查看历史快照信息。更多信息，参见[画布快照](canvas-operations/canvas-snapshot.md)。     |
+| ![graphSpace](figs/nav-graphSpace.png) | 查看所有图空间，单击图空间可创建相应图空间的画布。     |
+| ![Help](figs/nav-help.png) | 查看 Explorer 操作文档、论坛内容等。     |
+| ![Setup](figs/nav-setup.png) | 查看用户名和快捷键、修改语言设置、限制返回结果数量、清除 Explorer 链接等。|
+| ![Console](figs/nav-console.png) | 使用命令行查询，然后将查询结果导入至画布中。更多信息，参见[控制台](explorer-console.md)。   |
+
+## 画布
+
+图数据可视化地展示在画布中。Explorer 的画布由以下部分组成：
+
+- 顶部页签
+- 可视化模式
+- 数据存储
+- 搜索框
+- 多布局
+- 缩略图
+- 数据概览
+
+更多信息，参见[画布操作](canvas-operations/canvas-overview.md)。

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

@@ -6,9 +6,9 @@
 
 !!! compatibility "历史版本兼容性"
 
-    针对 3.0.0 以下版本的 Nebula Graph，需要创建索引后才可以使用查询功能。更多信息，参见[创建索引](../../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。
+    针对 3.0.0 以下版本的 Nebula Graph，需要创建索引后才可以使用查询功能。更多信息，参见[创建索引](../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。
 
-用户进行图数据的探索和分析前，首先需要先单击**开始**图标![query](../figs/nav-query2.png)然后查询目标数据。查询到的数据会显示在画布中。查询方式如下：
+用户进行图数据的探索和分析前，首先需要先单击**开始**图标![query](figs/nav-query2.png)然后查询目标数据。查询到的数据会显示在画布中。查询方式如下：
 
 - VID 查询
 - Tag 查询
@@ -27,21 +27,26 @@
 
 以下以图空间`nba`及相关数据为例演示如何查询数据。
 
-![VID QUERY](../figs/vid_query.gif)
+![VID QUERY](figs/vid_query.gif)
 
 ## Tag 查询
 
 !!! note
 
-使用 **Tag 查询** 方式查询数据，确保对应的图空间中已存在相应的 Tag 和索引。更多信息，参见[创建 Tag](../../3.ngql-guide/10.tag-statements/1.create-tag.md)和[创建索引](../../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。
+使用 **Tag 查询** 方式查询数据，确保对应的图空间中已存在相应的 Tag 和索引。更多信息，参见[创建 Tag](../3.ngql-guide/10.tag-statements/1.create-tag.md) 和[创建索引](../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。
 
-用户可以对输出的结果进行数量上的限制和对结果进行过滤。以下查询 10 个年龄大于 30 岁，且不等于 40 岁的球员。
+用户可以对输出的结果进行数量上的限制和对结果进行过滤。
 
-<!--补充录屏-->
+以下查询 10 个年龄大于 30 岁，且不等于 40 岁的球员。
+
+![tag](figs/query_tag.png)
 
 ## 子图查询
 
 **子图查询**方式的必选值为 VID。用户可以输入一个或多个 VID，指定查询的步数、边类型及流入流出的方向查询子图数据。以下给出 VID 值为 `Kings`和`Suns`，步数为`2` ，边类型为`server`和`like`的入边的示例。
 
+!!! note
+
+    当输入多个 VID 时，VID 之间以`Enter`键隔开。
 
-<!--补充录屏-->
+![tag](figs/query_subgraph.png)