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.

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

Update explorer #1059

Merged
merged 8 commits into from
Oct 15, 2021
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

Nebula Explorer (简称 Explorer)是一款可以通过 Web 访问的图探索可视化工具,搭配 Nebula Graph 内核使用,用于与图数据进行可视化交互。即使没有图数据操作经验,用户也可以快速成为图专家。

![Explorer](../figs/explorer.png)

!!! enterpriseonly

Explorer 仅在企业版提供。
Expand Down
4 changes: 2 additions & 2 deletions docs-2.0/nebula-explorer/deploy-connect/ex-ug-connect.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@
- 如果已启用身份验证,但是未创建账号信息,用户只能以 GOD 角色登录,必须填写 `root` 及对应的密码 `nebula`。
- 如果已启用身份验证,同时又创建了不同的用户并分配了角色,不同角色的用户使用自己的账号和密码登录。

![Nebula Graph Explorer 的登录页面](../figs/ex-ug-002-1.png "配置数据库")
![Nebula Graph Explorer 的登录页面](../figs/ex-ug-002.png "配置数据库")

2. 完成设置后,点击 **连接** 按钮。
foesa-yang marked this conversation as resolved.
Show resolved Hide resolved
如果能看到如下图所示的界面,表示已经成功连接到 Nebula Graph 数据库。

![Explorer 进入控制台页面,表示成功连接到 Nebula Graph](../figs/ex-ug-003-1.png "Nebula Graph 连接成功")
![Explorer 进入控制台页面,表示成功连接到 Nebula Graph](../figs/ex-ug-003.png "Nebula Graph 连接成功")

一次连接会话持续 30 分钟。如果超过 30 分钟没有操作,会话即断开,用户需要重新登录数据库。
2 changes: 1 addition & 1 deletion docs-2.0/nebula-explorer/deploy-connect/ex-ug-deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,6 @@ $ npm run stop # 停止 nebula-graph-explorer

在浏览器窗口中看到以下登录界面表示已经成功部署并启动了 Explorer。

![Nebula Explorer 登录页面](../figs/ex-ug-001.png)
![Nebula Explorer 登录页面](../figs/ex-ug-002.png)

进入 Explorer 登录界面后,用户需要连接 Nebula Graph。详细信息,参考[连接数据库](../deploy-connect/ex-ug-connect.md)。
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# 清除连接
foesa-yang marked this conversation as resolved.
Show resolved Hide resolved

Explorer 还连接在某个 Nebula Graph 数据库时,在工具栏中,选择 设置 ![icon](../figs/nav-setup.png) > 清空连接,如下图所示:
![清除链接](../figs/ex-ug-004-1.png)
![清除链接](../figs/ex-ug-004.png)

之后,如果浏览器上显示 **配置数据库** 页面,表示 Explorer 已经成功断开了与 Nebula Graph 数据库的连接。

Binary file modified docs-2.0/nebula-explorer/figs/ex-ug-002.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs-2.0/nebula-explorer/figs/ex-ug-003-1.png
Binary file not shown.
Binary file added docs-2.0/nebula-explorer/figs/ex-ug-003.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs-2.0/nebula-explorer/figs/ex-ug-004.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs-2.0/nebula-explorer/figs/ex-ug-023.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs-2.0/nebula-explorer/figs/ex-ug-025.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs-2.0/nebula-explorer/figs/ex-ug-028.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs-2.0/nebula-explorer/figs/ex-ug-029.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs-2.0/nebula-explorer/figs/explorer.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs-2.0/nebula-explorer/figs/nav-filter.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 13 additions & 5 deletions docs-2.0/nebula-explorer/operation-guide/ex-ug-canvas.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## 查看点边

移动鼠标到点或边上,详细查看点和边的数据。以下展示 VID 为 `107` 的点的详细信息:
移动鼠标到点或边上,详细查看点和边的数据,同一点上的多个 Tag 通过`|`分开。以下展示 VID 为 `107` 的点的详细信息:
![show](../figs/ex-ug-024-1.png)

## 批量选中
Expand All @@ -15,17 +15,25 @@ Explorer 支持批量选中多个点边,并查看选中点边的数据,详
### 框选操作

点击![frameselect](../figs/nav-frameSelect.png) 图标后,按住左键拖拽并框选多个点和边。示例如下:
![slect](../figs/ex-ug-023-1.png)
![slect](../figs/ex-ug-023.png)
foesa-yang marked this conversation as resolved.
Show resolved Hide resolved
### 点击选择多个节边

点击![singleselect](../figs/nav-singleSelect.png) 图标或按住 Shift 后,用鼠标单击并选中多个点和边,单击空白处取消选择。示例如下:
![select](../figs/ex-ug-025-1.png)


![select](../figs/ex-ug-025.png)

## 快速操作

用户可以选择一个或多个点和边,在空白处点击右键可以进行对点进行扩展、查找两个点之间的路径、在页面中显示或隐藏其属性等操作。用户选择的点和边数据会影响到可以执行的操作,具体操作的说明参见[图探索拓展](../operation-guide/ex-ug-graph-exploration.md)。
![quick](../figs/ex-ug-026-1.png)

点击 **适合选中尺寸** 可以将选中的数据,移动到画布的中心,方便用户查看。

## 节点筛选

用户可以对画布中显示的点进行过滤。在该示例中,选择 Tag 为 `player`,`age>=35`的点,并启动过滤。
foesa-yang marked this conversation as resolved.
Show resolved Hide resolved

!!! note

每一组筛选条件只针对带此 Tag 的数据,满足条件会被自动添加选中状态,不满足则置灰。其他 Tag 数据状态不受影响。

![filter](../figs/ex-ug-029.png)
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## 概览

![Explorer](../figs/ex-ug-006.png)
![Explorer](../figs/explorer.png)
Explorer 的主页面分为五个部分:

- 标签栏
Expand All @@ -17,6 +17,8 @@ Explorer 的主页面分为五个部分:

- 导出图形:支持导出当前视图的 CSV 文件或 PNG(图片)文件。

- 新增画布:支持创建多个画布,最多仅能打开10个画布。

## 侧边栏

侧边栏包括五个部分,用户可以点击按钮对图进行探索、修改画布上点的内容等等。
Expand All @@ -40,7 +42,8 @@ Explorer 的主页面分为五个部分:
- 框选模式:单击![frameSelect](../figs/nav-frameSelect.png) 图标,支持框选画布中的点和边。
- 选中多条点边:单击![singleSelect](../figs/nav-singleSelect.png) 图标,可以方便的点击画布中的点和边,单击空白处取消选择。
- 拖动画布:单击![moveCanvas](../figs/nav-moveCanvas.png) 图标,支持拖动画布的位置。
-
- 节点过滤:单击![filter](../figs/nav-filter.png)图标,支持对画布中显示的点进行过滤。

更多详细信息参考 [画布操作](../operation-guide/ex-ug-canvas.md)。

### 图探索扩展
Expand Down