[WIP] explorer 220 - canvas

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

@@ -22,7 +22,7 @@ Nebula Explorer （简称 Explorer）是一款可以通过 Web 访问的可视
 
 - [易于安装](../deploy-connect/ex-ug-deploy.md)：简单步骤即可完成部署。
 
-- [易于使用](../operation-guide/ex-ug-canvas.md)：使用简洁的可视化交互方式，无需构思 nGQL 语句，轻松实现图探索。
+- [易于使用](../operation-guide/ex-ug-shortcuts.md)：使用简洁的可视化交互方式，无需构思 nGQL 语句，轻松实现图探索。
 
 - [灵活性强](../operation-guide/ex-ug-query-exploration.md)：支持通过 VID、Tag、Subgraph 等方式查询数据。
 

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

@@ -1,6 +1,6 @@
 # 部署 Explorer
 
-本文介绍如何在本地通过 RPM 和 tar 包部署 Explorer。
+本文介绍如何在本地通过 RPM 和 TAR 包部署 Explorer。
 
 ## Nebula Graph 版本支持
 
@@ -12,6 +12,7 @@
 | --- | --- |
 | 2.5.x | 2.0.0 |
 | 2.6.x | 2.1.0 |
+| 2.5.X ~ 3.0.0| 2.2.0|
 
 ## RPM 部署
 

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

@@ -0,0 +1,68 @@
+# 画布概览
+
+用户可在画布中可视化地探索图数据。本文主要介绍画布的组成及相关功能。
+
+![canvas](../../figs/canvas-overview.png)
+
+画布的组成如下：
+
+- 顶部页签
+- 可视化模式
+- 数据存储
+- 搜索框
+- 多布局
+- 缩略图
+- 数据概览
+
+## 顶部页签
+
+用户可以通过单击画布顶部加号![canvas_tab](../../figs/list-add.png)图标同时操作多个画布。
+
+![canvas_overview](../../figs/canvas-graphspace.png)
+
+- 不同画布上的数据可以来自同一个图空间也可以来自不同的图空间。
+- 除了左边页签的第一个画布外，用户可以自定义画布的名称。
+
+## 可视化模式
+
+用户可以选择 **2D 模式**和 **3D 模式**可视化地在画布上探索图数据。更多信息，参见[可视化模式](visualization-mode.md)。
+
+## 数据存储
+
+用户可以通过创建快照，或以图片、CSV 文件的方式导出画布以存储当前画布数据。
+
+在页面右上方单击![PNG](../../figs/topbar-exportPNG.png)以图片形式存储画布数据；单击![CSV](../../figs/topbar-exportCSV.png)以 CSV 文件的方式存储画布数据。
+
+关于快照的更多信息，参见[画布快照](canvas-snapshot.md)。
+
+## 搜索框
+
+在页面左上方的搜索框中，输入 VID 或者 Tag 的属性值定位目标点。
+
+## 多布局
+
+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) |
+
+![layouts](../../figs/layout.gif)
+
+## 缩略图
+
+全屏展示画布中的图，收起缩略图，缩小或放大画布中的图等。同时在缩略图的左下角显示了画布中的图占总图的百分比。
+
+![](../../figs/thumbnail.png)
+
+## 数据概览
+
+在页面右侧，单击![list-left](../../figs/list-left.png)展开数据概览面板。
+
+![dataView](../../figs/dataview.png)
+
+- 可以在数据概览面板中看到画布中的 Tag 数、Edge type 数，及对应的点和边的数量。
+- 在数据概览面板，单击 Tag 颜色图标，可自定义 Tag 相同的点的颜色、尺寸、图标。
+
+  !!! note
+        Tag 完全相同的 VID 点的颜色相同。在画布中右键单击单个点可手动修改一个点的样式。

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

@@ -0,0 +1,29 @@
+# 管理快照
+
+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)导出历史快照至本地。
+- 单击![snapshot_delete](../../figs/snapshot-delete.png)删除历史快照。
+
+!!! note
+
+    目前最多存储 50 个历史快照。
+

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

@@ -0,0 +1,40 @@
+# 可视化模式
+
+Explorer 支持 **2D** 和 **3D** 2 种可视化模式探索数据。2D 模式支持数据查看和图操作；3D 模式通过不同视角对图数据进行探索，适用于数据量级比较高或者需要演示的场合。
+
+!!! note
+
+    3D 模式下，不可进行图数据的操作。
+
+![visualizaiton_mode](../../figs/visualization.gif)
+
+## 2D 模式
+
+2D 模式下可对画布上的数据进行探索操作：
+
+![2D](../../figs/2d-mode.png)
+
+| 参数       | 说明                                                         |
+| ---------- | ------------------------------------------------------------ |
+| 出入度权重 | 根据画布中所有点的出边和入边的条数，自动调整点的大小。       |
+| 重置出入度 | 重置画布中的点至原始大小。                                   |
+| 信息检测   | 孤立点：检测画布中所有的无边点。<br />悬挂边：检测画布中只有一条无向边的点。<br />环检测：检测由边和点连接在一起形成循环的路径。 |
+
+有关更多的 2D 模式下可进行的操作，参见[画布功能](canvas-overview.md)。
+
+
+## 3D 模式
+
+![2D](../../figs/3d-mode.png)
+
+在页面左上方，单击视图切换开关可切换至 3D 视图模式。3D 视图模式下，可切换回到 2D 图探索模式，并且不会对 2D 的探索产生任何副作用。
+
+| 参数     | 说明                                                         |
+| -------- | ------------------------------------------------------------ |
+| 鸟瞰     | 以鸟瞰的方式展示当前图空间的所有数据（以最少 2 万点和 2 千边进行采样）。                           |
+| 画质     | 高：节点以球的形式展示，光影效果更好。<br />低：节点以圆的形式展示，可以支持更大数据量。 |
+| 重新受力 | 当不同的点重叠时，可单击**重新受力**分散点与点之间的距离。 |
+
+!!! compatibility "历史版本兼容性"
+
+    针对 3.0.0 以下版本的 Nebula Graph，需要创建索引后才可以使用鸟瞰功能。更多信息，参见[创建索引](../../../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。

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

@@ -45,4 +45,4 @@ Explorer 由导航栏和画布两大模块组成。
 - 缩略图
 - 数据概览
 
-更多详细信息参考[画布操作](../operation-guide/ex-ug-canvas.md)。
+更多信息，参见[画布操作](canvas-operations/canvas-overview.md)。

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

@@ -4,6 +4,10 @@
 
     使用查询功能前，需要选中并单击目标图空间。
 
+!!! compatibility "历史版本兼容性"
+
+    针对 3.0.0 以下版本的 Nebula Graph，需要创建索引后才可以使用查询功能。更多信息，参见[创建索引](../../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。
+
 用户进行图数据的探索和分析前，首先需要先单击**开始**图标![query](../figs/nav-query2.png)然后查询目标数据。查询到的数据会显示在画布中。查询方式如下：
 
 - VID 查询

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

@@ -1,12 +1,28 @@
-# 快捷键
+# 基本操作和快捷键
 
-本文列出了 Explorer 支持的快捷键。
+本文列出了 Explorer 的基本操作及快捷键。
+
+## 基本操作
+
+| 操作             | 说明                                                         |
+| ---------------- | ------------------------------------------------------------ |
+| 移动画布         | 在画布空白处鼠标左键拖拽移动。                               |
+| 放大或缩小画布    | 鼠标滚轮向下放大画布，向上缩小画布。  |
+| 选中单节点或单边 | 鼠标左键单击节点或边。                                       |
+| 选中多节点或多边 | 同时按住 Shift 和鼠标左键单击点或边。                        |
+| 批量选中数据     | 按住鼠标右键并框选数据；或者同时按住 Shift 和鼠标左键，并框选数据。 |
+| 选中节点移动     | 鼠标左键拖拽选中节点。                                       |
+
+
+## 快捷键
 
 | 操作  |  说明 |
 | :-- | :--|
-| Shift + 'Enter' | 拓展 |
+| Enter | 拓展 |
 | Shift + '-' |	缩小 |
 | Shift + '+' | 放大 |
 | Shift + 'l' | 显示 |
-| Shift + 'z' | 撤销 |
-| 选中 + Shift + 'del' | 删除 |
+| Ctrl/Cmd + 'z' | 撤销 |
+| Ctrl/Cmd + Shift + 'z' | 回退 |
+| 选中 + 'del'| 隐藏 |
+| 选中 + Shift + 'del' | 隐藏其他 |

mkdocs.yml

@@ -441,9 +441,11 @@ nav:
         - 开始探索: nebula-explorer/operation-guide/ex-ug-query-exploration.md
         - 节点筛选: nebula-explorer/operation-guide/node-filtering.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-explorer/operation-guide/canvas-operations/canvas-overview.md
+          - 可视化模式: nebula-explorer/operation-guide/canvas-operations/visualization-mode.md
+          - 画布快照: nebula-explorer/operation-guide/canvas-operations/canvas-snapshot.md
+        - 基本操作和快捷键: nebula-explorer/operation-guide/ex-ug-shortcuts.md
 
   - Nebula Importer:
     - 使用 Nebula Importer: nebula-importer/use-importer.md