From f8bf8af2660ca37ddccddcaeb55736b0c7129b19 Mon Sep 17 00:00:00 2001 From: cooper-lzy <78672629+cooper-lzy@users.noreply.github.com> Date: Fri, 13 May 2022 12:43:00 +0800 Subject: [PATCH] optimize explorer (#1797) * optimize explorer * Update mkdocs.yml * Update 12.query-visually.md --- docs-2.0/nebula-explorer/12.query-visually.md | 87 ++++++++++--------- .../canvas-operations/canvas-snapshot.md | 17 ++-- .../ex-ug-graph-exploration.md | 45 +++++----- docs-2.0/nebula-explorer/ex-ug-shortcuts.md | 6 +- 4 files changed, 79 insertions(+), 76 deletions(-) diff --git a/docs-2.0/nebula-explorer/12.query-visually.md b/docs-2.0/nebula-explorer/12.query-visually.md index c9cfb837a5..7ef3294bb1 100644 --- a/docs-2.0/nebula-explorer/12.query-visually.md +++ b/docs-2.0/nebula-explorer/12.query-visually.md @@ -1,6 +1,6 @@ # 可视化查询 -可视化查询帮助用户通过构造查询场景，查询最终想要数据并查看与之匹配的语句。用户只需拖拽和连线即可构造可视化查询语句，系统将查询结果展示在画布上。 +可视化查询帮助用户通过构造查询场景，查询目标数据并查看与之匹配的语句。用户只需拖拽和连线即可构造可视化查询语句，系统将查询结果展示在画布上。 !!! compatibility @@ -13,17 +13,17 @@ ## 前提条件 - 已选择图空间。具体操作，参见[选择图空间](13.choose-graphspace.md)。 -- 部分查询需先创建索引。详情参见[注意事项](../3.ngql-guide/7.general-query-statements/2.match.md)和[创建索引](../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。 - -## 操作步骤 - -在 Explorer 页面顶部，单击 **Visual Query** 进入可视化查询页面。 +- 部分查询需先创建索引。详情参见[MATCH语句注意事项](../3.ngql-guide/7.general-query-statements/2.match.md)和[创建索引](../3.ngql-guide/14.native-index-statements/1.create-native-index.md)。 ## 页面元素 ![visual_overview](https://docs-cdn.nebula-graph.com.cn/figures/visual-query-beta_2022-04-15_15-40-07_cn.png) -打开可视化查询页面时，用户会在**可视化查询**页面左侧看到图空间对应的所有 Tag (如 player 和 team) 和名为**任意标签** Tag。用户也可通过名为**任意标签**的 Tag 查询无 Tag 的点。 +在 Explorer 页面顶部，单击 **Visual Query** 进入可视化查询页面。在**可视化查询**页面左侧可以看到图空间对应的所有 Tag (如 player 和 team) 和名为**任意标签** Tag。 + +!!! note + + **任意标签**的 Tag 也可以用于查询无 Tag 的点。 在可视化页面中，其他图标的描述如下表。 @@ -37,49 +37,57 @@ | nGQL | 单击 **nGQL** 为构图显示查询语句。 | | 查询 | 单击**查询**将查询结果可视化地显示在画布中。 | -## 配置项说明 +## 操作步骤 + +1. 在**可视化查询**页面左侧拖动若干个目标 Tag 到右侧创建对应 Tag 的点。 + +2. 单击点，在点边缘的锚点上按住鼠标左键拖动至另一个点，创建对应的边。 -### 点的配置项 +3. 单击点配置过滤条件。说明如下。 -![vertex_confi](https://docs-cdn.nebula-graph.com.cn/figures/vertex-config_cn.png) + ![vertex_confi](https://docs-cdn.nebula-graph.com.cn/figures/vertex-config_cn.png) -- **标签名**：设置零、一个或多个 Tag。 + - **标签名**：设置零、一个或多个 Tag。 !!! note 一个点可以有 0 到多个 Tag： - - 设置 0 个 Tag 时，表示查询无 Tag 的点。 - - 设置一个 Tag 时，表示查询该 Tag 的点。 - - 设置多个 Tag 时，表示查询同时包含所有设置的 Tag 的点。 + - 设置 0 个 Tag 时，表示查询无 Tag 的点。 + - 设置一个 Tag 时，表示查询该 Tag 的点。 + - 设置多个 Tag 时，表示查询同时包含所有设置的 Tag 的点。 -- **筛选条件**：设置一组或多组针对点的过滤条件，包括点的属性、运算符、属性值。 + - **筛选条件**：设置一组或多组针对点的过滤条件，包括点的属性、运算符、属性值。 -!!! enterpriseonly + !!! enterpriseonly - 当配置多 Tag 的点时，仅 Nebula Graph 企业版支持设置**筛选条件**查询数据。 + 当配置多 Tag 的点时，仅 Nebula Graph 企业版支持设置**筛选条件**查询数据。 -### 边的配置项 +4. 单击边配置过滤条件。说明如下。 -![vertex_confi](https://docs-cdn.nebula-graph.com.cn/figures/edge-config_cn.png) + ![vertex_confi](https://docs-cdn.nebula-graph.com.cn/figures/edge-config_cn.png) -- **边类型**：设置一个或多个 Edge Type。 + - **边类型**：设置一个或多个 Edge Type。 !!! note 一条边有且仅有一个 Edge Type： - - 设置一个 Edge Type 时，表示查询该 Edge Type 的边。 - - 设置多个 Edge Type 时，表示查询包含任一 Edge Type 的边。 + - 设置一个 Edge Type 时，表示查询该 Edge Type 的边。 + - 设置多个 Edge Type 时，表示查询包含任一 Edge Type 的边。 -- **方向**：设置边的方向，包括流出、流入、双向。 -- **单步**：设置定长路径。 -- **范围**：设置变长路径。 -- **筛选条件**：设置一组或多组针对边的过滤条件，包括边的属性、运算符、属性值。 + - **方向**：设置边的方向，包括流出、流入、双向。 + - **单步**：设置定长路径。 + - **范围**：设置变长路径。 + - **筛选条件**：设置一组或多组针对边的过滤条件，包括边的属性、运算符、属性值。 -!!! enterpriseonly + !!! enterpriseonly - 当配置多个 Edge Type 查询数据时，仅 Nebula Graph 企业版支持设置**筛选条件**查询数据。 + 当配置多个 Edge Type 查询数据时，仅 Nebula Graph 企业版支持设置**筛选条件**查询数据。 + +5. 查询场景(即模式)构建完成后，单击![Output](https://docs-cdn.nebula-graph.com.cn/figures/visual-nav-output.png)并框选需要返回（RETURN）的结果。 + +6. 单击**可视化查询**页面右上角的**查询**，画布中会显示查询结果。 ## 示例 @@ -93,16 +101,15 @@ 2. 配置过滤条件。 - 1. 设置第一个 player 的过滤条件为 player.name == Yao Ming。 - 2. 设置两个 player 之间边的边类型为 follow、双向、步数为 1。 - 3. 设置第二个 player 的过滤条件为 player.age > 35。 - 4. 设置第二个 player 和 team 之间边的边类型为 serve，方向为流出，步数为 1。 - 5. 单击![Output](https://docs-cdn.nebula-graph.com.cn/figures/visual-nav-output.png)选中第二个 player、team、及它们之间的 serve 边。 + 1. 设置第一个球员的过滤条件为 player.name == Yao Ming。 + 2. 设置两个球员之间边的边类型为 follow、双向、步数为 1。 + 3. 设置第二个球员的过滤条件为 player.age > 35。 + 4. 设置第二个球员和球队之间边的边类型为 serve，方向为流出，步数为 1。 + 5. 单击![Output](https://docs-cdn.nebula-graph.com.cn/figures/visual-nav-output.png)选中第二个球员、球队及它们之间的 serve 边。 6. 单击**模式查询**框，然后设置**结果数量限制**为 6。 3. 单击**查询**。系统将 6 条查询关系结果显示至画布中。 - ### 示例 2 查询两个相互关注的球员共同效忠什么球队，并且查询此球队所有年龄大于 30 岁的球员。 @@ -112,11 +119,11 @@ 1. 构造查询模式，拖拽 Tag 至面板中（3 个 player 和 1 个 team）。 2. 配置过滤条件。 - 1. 设置第一个和第二个 player 之间边的边类型为 follow、双向、步数为 1。 - 2. 设置第一个 player 和 team 之间的边的边类型为 serve、方向为流出、步数为 1。 - 3. 设置第二个 player 和 team 之间的边的边类型为 serve、方向为流出、步数为 1。 - 4. 设置第三个 player 的过滤条件为 player.age > 30。 - 5. 设置第三个 player 和 team 之间的边的边类型为 serve、方向为流出、步数为 1。 - 6. 单击![Output](https://docs-cdn.nebula-graph.com.cn/figures/visual-nav-output.png)选中第三个 player、team、及它们之间的 serve 边。 + 1. 设置第一个和第二个球员之间边的边类型为 follow、双向、步数为 1。 + 2. 设置第一个球员和球队之间的边的边类型为 serve、方向为流出、步数为 1。 + 3. 设置第二个球员和球队之间的边的边类型为 serve、方向为流出、步数为 1。 + 4. 设置第三个球员的过滤条件为 player.age > 30。 + 5. 设置第三个球员和球队之间的边的边类型为 serve、方向为流出、步数为 1。 + 6. 单击![Output](https://docs-cdn.nebula-graph.com.cn/figures/visual-nav-output.png)选中第三个球员、球队及它们之间的 serve 边。 3. 单击**查询**。 diff --git a/docs-2.0/nebula-explorer/canvas-operations/canvas-snapshot.md b/docs-2.0/nebula-explorer/canvas-operations/canvas-snapshot.md index a448972fbc..0c892cb36b 100644 --- a/docs-2.0/nebula-explorer/canvas-operations/canvas-snapshot.md +++ b/docs-2.0/nebula-explorer/canvas-operations/canvas-snapshot.md @@ -10,12 +10,16 @@ Explorer 的快照功能可保存图探索得到的可视化结果，以便再 !!! note - 已创建的快照被存放在历史快照中。更多信息，参见下文。 + 已创建的快照被存放在快照历史中。更多信息，参见下文。 +## 快照历史 -## 历史快照 +!!! note + + - 目前最多存储 50 个历史快照。 + - 历史快照存储在浏览器本地，清理浏览器可能造成快照数据丢失。 -在 Explorer 页面左侧导航栏，单击![snapshot_history](https://docs-cdn.nebula-graph.com.cn/figures/snapshot-history.png)图标进入历史快照列表页面。用户可切换图空间查看相应图空间的历史快照，还可以导入历史快照至画布，下载历史快照至本地，以及删除快照。 +在 Explorer 页面左侧导航栏，单击![snapshot_history](https://docs-cdn.nebula-graph.com.cn/figures/snapshot-history.png)图标进入快照列表页面。用户可切换图空间查看相应图空间的历史快照，还可以导入历史快照至画布，下载历史快照至本地，以及删除快照。 在目标历史快照右侧的**操作**列下： @@ -23,9 +27,4 @@ Explorer 的快照功能可保存图探索得到的可视化结果，以便再 - 单击![snapshot_export](https://docs-cdn.nebula-graph.com.cn/figures/snapshot-export_cn.png)以 JSON 的格式下载历史快照至本地。 - 单击![snapshot_delete](https://docs-cdn.nebula-graph.com.cn/figures/snapshot-delete_cn.png)删除历史快照。 -在历史快照列表左上方，单击**导入快照**可导入之前下载的 JSON 格式文件至快照列表中，以便用户之间离线共享快照数据。系统会根据 JSON 文件中记录的图空间信息将导入的快照自动放置于相应的图空间中。 - -!!! note - - 目前最多存储 50 个历史快照。 - +在快照列表左上方，单击**导入快照**可导入之前下载的 JSON 格式快照文件至快照列表中，以便用户之间离线共享快照数据。系统会根据 JSON 文件中记录的图空间信息将导入的快照自动放置于相应的图空间中。 \ No newline at end of file diff --git a/docs-2.0/nebula-explorer/ex-ug-graph-exploration.md b/docs-2.0/nebula-explorer/ex-ug-graph-exploration.md index e84f4e6b8c..e6ee88d2ef 100644 --- a/docs-2.0/nebula-explorer/ex-ug-graph-exploration.md +++ b/docs-2.0/nebula-explorer/ex-ug-graph-exploration.md @@ -15,39 +15,39 @@ ## 拓展 -在左侧导航栏，单击![expand](https://docs-cdn.nebula-graph.com.cn/figures/nav-expand_cn.png)图标，打开**拓展**窗口。用户可以双击某一点，对该点进行拓展。也可以右键框选画布中的多个点，在操作栏中修改边类型，选择边的流入流出方向，修改点的颜色，规定拓展步数和自定义过滤条件。 +1. 在左侧导航栏，单击![expand](https://docs-cdn.nebula-graph.com.cn/figures/nav-expand_cn.png)图标，打开**拓展**窗口。在窗口内设置拓展条件，包括边类型、方向、点样式、步数或更精确的条件，说明如下。 -| 参数 | 描述 | -| -------- | ------------------------------------------------------------ | -| 边类型 | 默认显示并选中图空间中的所有边。 | -| 方向 | 定义所有选中点的边的方向来查询目标点，包括`流出`、`流入`、`双向`三个选项。 | -| 点的样式 | `按标签类型分类`：目标点的显示颜色和相应的 Tag 颜色一致。
`自定义样式`：自定义目标点的显示颜色。 | -| 步数 | `单步`：自定义选中点至目标点的跳数。
`范围`：自定义选中点至目标点的范围。 | -| 筛选条件 | 根据筛选条件查询目标点。 | + | 参数 | 描述 | + | -------- | ------------------------------------------------------------ | + | 边类型 | 默认显示并选中图空间中的所有边。 | + | 方向 | 定义所有选中点的边的方向来查询目标点，包括`流出`、`流入`、`双向`三个选项。 | + | 点的样式 | `按标签类型分类`：目标点的显示颜色和相应的 Tag 颜色一致。
`自定义样式`：自定义目标点的显示颜色。 | + | 步数 | `单步`：自定义选中点至目标点的跳数。
`范围`：自定义选中点至目标点的范围。 | + | 筛选条件 | 根据筛选条件查询目标点。 | + +2. 选择需要进行拓展的点，可以按住右键框选或按住`Shift`键单击左键选择画布中的多个点，然后在**拓展**窗口单击**拓展**。对于单个点，可以直接在点上双击左键拓展。 !!! Note 系统会在面板内的配置被修改后保存当前配置，当双击点或者右键对点快捷拓展时候会以当前配置进行拓展。 - ## 共同邻居 -在左侧导航栏，单击![commonneighbor](https://docs-cdn.nebula-graph.com.cn/figures/nav-commonNeighbor_cn.png)图标，打开**共同邻居**窗口。用户可以选中画布中的两个点或多个点，查询它们的共同邻居。选中的点无共同邻居时，默认返回**没有相应数据**。 - -关于如何选中两个点或者多个点的操作，参见[常规操作](ex-ug-shortcuts.md)。 - +在左侧导航栏，单击![commonneighbor](https://docs-cdn.nebula-graph.com.cn/figures/nav-commonNeighbor_cn.png)图标，打开**共同邻居**窗口。用户可以按住右键框选或按住`Shift`键单击左键选择画布中的两个点或多个点，查询它们的共同邻居。选中的点无共同邻居时，默认返回**没有相应数据**。 ## 路径查询 -在左侧导航栏，单击![findpath](https://docs-cdn.nebula-graph.com.cn/figures/nav-findPath_cn.png)图标，打开**路径查询**窗口。**用户可以选中画布中的两个点，默认框选的第一个点为起点，第二个点为终点。**用户可自定义边的类型和方向，规定拓展步数，选择查询路径。 +1. 在左侧导航栏，单击![findpath](https://docs-cdn.nebula-graph.com.cn/figures/nav-findPath_cn.png)图标，打开**路径查询**窗口。在窗口内设置边类型、方向、查询类型等，说明如下。 -| 参数 | 描述 | -| -------- | ------------------------------------------------------------ | -| 边类型 | 默认显示并选中图数据库中的所有边。 | -| 方向 | 定义起始点的边的方向来查询和目标点的路径，包括`流出`、`流入`、`双向`三个选项。 | -| 查询类型 | `全路径`：显示从起点至终点所有路径的点和边。
`最短路径`：显示从起点至终点的最短路径的点和边。
`非循环路径`：显示从起点至终点的非循环路径的点和边。 | -| 选中步骤 | 起始点至终点的路径的条数。 | -| 筛选条件 | 根据筛选条件筛选目标点。 | + | 参数 | 描述 | + | -------- | ------------------------------------------------------------ | + | 边类型 | 默认显示并选中图数据库中的所有边。 | + | 方向 | 定义起始点的边的方向来查询和目标点的路径，包括`流出`、`流入`、`双向`三个选项。 | + | 查询类型 | `全路径`：显示从起点至终点所有路径的点和边。
`最短路径`：显示从起点至终点的最短路径的点和边。
`非循环路径`：显示从起点至终点的非循环路径的点和边。 | + | 选中步骤 | 起始点至终点的步数限制。 | + | 筛选条件 | 根据筛选条件筛选目标点。 | + +2. 按住`Shift`键单击左键选中画布中的两个点，默认第一个点为起点，第二个点为终点。然后在**路径查询**窗口单击**查询路径**。 ## 查看属性 @@ -57,6 +57,3 @@ - 缩放比例大于 90% 时候在画布上才会显示点属性，小于 90% 的时候会自动隐藏。 - 缩放比例大于 100% 时候在画布上才会显示边属性，小于 100% 的时候会自动隐藏。 - - - diff --git a/docs-2.0/nebula-explorer/ex-ug-shortcuts.md b/docs-2.0/nebula-explorer/ex-ug-shortcuts.md index cee74d2397..532bd4a3f8 100644 --- a/docs-2.0/nebula-explorer/ex-ug-shortcuts.md +++ b/docs-2.0/nebula-explorer/ex-ug-shortcuts.md @@ -8,10 +8,10 @@ | ---------------- | ------------------------------------------------------------ | | 移动画布 | 在画布空白处鼠标左键拖拽移动。 | | 放大或缩小画布 | 鼠标滚轮向下放大画布，向上缩小画布。 | -| 选中单节点或单边 | 鼠标左键单击节点或边。 | -| 选中多节点或多边 | 同时按住 Shift 和鼠标左键单击点或边。 | +| 选中单个点或单条边 | 鼠标左键单击节点或边。 | +| 选中多个点或多条边 | 同时按住 Shift 和鼠标左键单击点或边。 | | 批量选中数据 | 按住鼠标右键并框选数据；或者同时按住 Shift 和鼠标左键，并框选数据。 | -| 选中节点移动 | 鼠标左键拖拽选中节点。 | +| 移动单个点 | 选中点按住鼠标左键拖拽。 | ## 快捷键