Skip to content

Commit

Permalink
optimize explorer (#1797)
Browse files Browse the repository at this point in the history 
* optimize explorer

* Update mkdocs.yml

* Update 12.query-visually.md
  • Loading branch information
@cooper-lzy
cooper-lzy committed May 13, 2022
1 parent 491d6c8 commit f8bf8af
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 76 deletions.
87 changes: 47 additions & 40 deletions docs-2.0/nebula-explorer/12.query-visually.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 可视化查询

可视化查询帮助用户通过构造查询场景，查询最终想要数据并查看与之匹配的语句。用户只需拖拽和连线即可构造可视化查询语句，系统将查询结果展示在画布上。
可视化查询帮助用户通过构造查询场景，查询目标数据并查看与之匹配的语句。用户只需拖拽和连线即可构造可视化查询语句，系统将查询结果展示在画布上。

!!! compatibility

Expand All @@ -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 的点。

在可视化页面中，其他图标的描述如下表。

Expand All @@ -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. 单击**可视化查询**页面右上角的**查询**，画布中会显示查询结果。

## 示例

Expand All @@ -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 岁的球员。
Expand All @@ -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. 单击**查询**。
17 changes: 8 additions & 9 deletions docs-2.0/nebula-explorer/canvas-operations/canvas-snapshot.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,21 @@ 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)图标进入快照列表页面。用户可切换图空间查看相应图空间的历史快照，还可以导入历史快照至画布，下载历史快照至本地，以及删除快照。

在目标历史快照右侧的**操作**列下：

- 单击![snapshot_import](https://docs-cdn.nebula-graph.com.cn/figures/snapshot-import_cn.png)导入历史快照至新画布中。
- 单击![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 文件中记录的图空间信息将导入的快照自动放置于相应的图空间中。
45 changes: 21 additions & 24 deletions docs-2.0/nebula-explorer/ex-ug-graph-exploration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 颜色一致。<br />`自定义样式`：自定义目标点的显示颜色。 |
| 步数 | `单步`：自定义选中点至目标点的跳数。<br />`范围`：自定义选中点至目标点的范围。 |
| 筛选条件 | 根据筛选条件查询目标点。 |
| 参数 | 描述 |
| -------- | ------------------------------------------------------------ |
| 边类型 | 默认显示并选中图空间中的所有边。 |
| 方向 | 定义所有选中点的边的方向来查询目标点，包括`流出`、`流入`、`双向`三个选项。 |
| 点的样式 | `按标签类型分类`：目标点的显示颜色和相应的 Tag 颜色一致。<br />`自定义样式`：自定义目标点的显示颜色。 |
| 步数 | `单步`：自定义选中点至目标点的跳数。<br />`范围`：自定义选中点至目标点的范围。 |
| 筛选条件 | 根据筛选条件查询目标点。 |

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)图标，打开**路径查询**窗口。在窗口内设置边类型、方向、查询类型等，说明如下。

| 参数 | 描述 |
| -------- | ------------------------------------------------------------ |
| 边类型 | 默认显示并选中图数据库中的所有边。 |
| 方向 | 定义起始点的边的方向来查询和目标点的路径，包括`流出`、`流入`、`双向`三个选项。 |
| 查询类型 | `全路径`：显示从起点至终点所有路径的点和边。<br />`最短路径`：显示从起点至终点的最短路径的点和边。<br />`非循环路径`：显示从起点至终点的非循环路径的点和边。 |
| 选中步骤 | 起始点至终点的路径的条数。 |
| 筛选条件 | 根据筛选条件筛选目标点。 |
| 参数 | 描述 |
| -------- | ------------------------------------------------------------ |
| 边类型 | 默认显示并选中图数据库中的所有边。 |
| 方向 | 定义起始点的边的方向来查询和目标点的路径，包括`流出`、`流入`、`双向`三个选项。 |
| 查询类型 | `全路径`：显示从起点至终点所有路径的点和边。<br />`最短路径`：显示从起点至终点的最短路径的点和边。<br />`非循环路径`：显示从起点至终点的非循环路径的点和边。 |
| 选中步骤 | 起始点至终点的步数限制。 |
| 筛选条件 | 根据筛选条件筛选目标点。 |

2. 按住`Shift`键单击左键选中画布中的两个点，默认第一个点为起点，第二个点为终点。然后在**路径查询**窗口单击**查询路径**。

## 查看属性

Expand All @@ -57,6 +57,3 @@

- 缩放比例大于 90% 时候在画布上才会显示点属性，小于 90% 的时候会自动隐藏。
- 缩放比例大于 100% 时候在画布上才会显示边属性，小于 100% 的时候会自动隐藏。



6 changes: 3 additions & 3 deletions docs-2.0/nebula-explorer/ex-ug-shortcuts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
| ---------------- | ------------------------------------------------------------ |
| 移动画布 | 在画布空白处鼠标左键拖拽移动。 |
| 放大或缩小画布 | 鼠标滚轮向下放大画布，向上缩小画布。 |
| 选中单节点或单边 | 鼠标左键单击节点或边。 |
| 选中多节点或多边 | 同时按住 Shift 和鼠标左键单击点或边。 |
| 选中单个点或单条边 | 鼠标左键单击节点或边。 |
| 选中多个点或多条边 | 同时按住 Shift 和鼠标左键单击点或边。 |
| 批量选中数据 | 按住鼠标右键并框选数据；或者同时按住 Shift 和鼠标左键，并框选数据。 |
| 选中节点移动 | 鼠标左键拖拽选中节点。 |
| 移动单个点 | 选中点按住鼠标左键拖拽。 |


## 快捷键
Expand Down

0 comments on commit f8bf8af

Please sign in to comment.