Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

optimize explorer #1797

Merged
merged 3 commits into from
May 13, 2022
Merged

optimize explorer #1797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2884104
optimize explorer
cooper-lzy May 12, 2022
d005fcd
Update mkdocs.yml
cooper-lzy May 12, 2022
b64cb1b
Update 12.query-visually.md
cooper-lzy May 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 47 additions & 40 deletions docs-2.0/nebula-explorer/12.query-visually.md
View file
Open in desktop
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
Open in desktop
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 文件中记录的图空间信息将导入的快照自动放置于相应的图空间中。
cooper-lzy marked this conversation as resolved.
Show resolved Hide resolved
45 changes: 21 additions & 24 deletions docs-2.0/nebula-explorer/ex-ug-graph-exploration.md
View file
Open in desktop
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`键单击左键选择画布中的两个点或多个点，查询它们的共同邻居。选中的点无共同邻居时，默认返回**没有相应数据**。
cooper-lzy marked this conversation as resolved.
Show resolved Hide resolved

## 路径查询

在左侧导航栏，单击![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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
| ---------------- | ------------------------------------------------------------ |
| 移动画布 | 在画布空白处鼠标左键拖拽移动。 |
| 放大或缩小画布 | 鼠标滚轮向下放大画布，向上缩小画布。 |
| 选中单节点或单边 | 鼠标左键单击节点或边。 |
| 选中多节点或多边 | 同时按住 Shift 和鼠标左键单击点或边。 |
| 选中单个点或单条边 | 鼠标左键单击节点或边。 |
| 选中多个点或多条边 | 同时按住 Shift 和鼠标左键单击点或边。 |
| 批量选中数据 | 按住鼠标右键并框选数据；或者同时按住 Shift 和鼠标左键，并框选数据。 |
| 选中节点移动 | 鼠标左键拖拽选中节点。 |
| 移动单个点 | 选中点按住鼠标左键拖拽。 |


## 快捷键
Expand Down