# 可视化操作手册（旧版）

> 此文档主要介绍 TuGraph Browser 的使用

## 定义

TuGraph Browser 是 TuGraph 提供的可视化开发工具。

## 作用

TuGraph Browser 的主要功能是为使用图数据库的开发人员，提供可视化的图数据开发，图数据管理和维护等功能。

## 操作详情

### 1.连接数据库

当用户完成图数据库的安装后，可以通过浏览器进行访问，TuGraph Browser 工具。用户只需要在浏览器地址栏输入：TuGraph 所在服务器的 IP:Port。默认的端口使用的是 7090。

### 2.登录数据库

![alt 登录](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/1.tugraph-browser-lpgin.png)

- 页面打开成功会，首先进图的是登录页面，用户需要填写账号和密码进行登录。
- 默认账号：admin
- 默认密码：73@TuGraph
- 建议用户登录后，及时修改初始化的密码

### 3.工作台

#### 3.1 快速上手

- 首次登录，系统会默认创建 default 空图

  ![alt 快速上手](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/2.tugraph-browser-quickstart-01.png)

- 用户点击帮助选项，并选择快速上手

  ![alt 帮助](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/3.tugraph-browser-quickstart-02.png)

- 然后点击“一键创建模型”——>"一键创建数据"，就可以完成内置的 Movie 数据图谱的构建

#### 3.2 创建子图和示例

##### 3.2.1 创建子图

- 点击新建子图
  ![alt 创建子图](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/4.tugraph-browser-create-subgraph-01.png)
- 填写表单信息
  ![alt 填写表单](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/5.tugraph-browser-create-subgraph-02.png)
  - 子图名称
  - 子图描述
  - 配置信息
  - 点击确认，提示创建成功
- 切换子图
  ![alt 切换子图](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/6.tugraph-browser-use-graph-01.png)

- 点击新建示例
  ![alt 创建子图](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/3.3.0-image/create-scene-01.png)
- 选择示例并点击创建
  ![alt 创建子图](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/3.3.0-image/select-scene.png)

#### 3.3 查询

![alt 查询](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/7.tugraph-browser-query-01.png)

##### 3.3.1 页面组成

- cypher 输入框
- 结果集展示区域

##### 3.3.2 结果集展示区域功能详情

- 结果集标签展示及功能
  ![alt 结果集标签](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/3.3.0-image/tugraph-browser-result.png)
  - 这里展示了结果集的所有类型统计
  - 点击不同的“label（标签）”，可以进行以下修改操作
    - 修改展示颜色
    - 修改节点大小或边的粗细
    - 修改默认展示属性或系统属性
    - 布局修改
      - 力导布局
      - 网格布局
      - 树形布局
      - 环境布局
    - 边聚合
      - 相同类型，方向的边可以进行合并
    - 创建节点
      - 点击创建节点按钮
      - 选择节点类型
      - 添写节点内容
    - 创建关系
      - 在画布中选择起点和终点
      - 选择可以匹配的类型
      - 填写节点信息
    - 停止布局
      - 当数据量过大，导致浏览器页面卡顿时候，可以点击这个停止布局的按钮，能够提高体验的流畅度
    - 鼠标悬停
      - 开启此功能，可以高亮显示鼠标悬停节点的一度邻居节点
    - 结果集导出
      - 可以将结果集导出为 png，json，csv 三种不同的文件形式
    - 刷新
      - 点击刷新按钮，会重新执行当前页面的初始 cypher 语句，并刷新结果集
    - 最大化
      - 点击最大化，结果集展示区域将全屏展示
    - 结果集展示形式切换
      - 支持图谱、表格、文本三种形式

##### 3.3.3 建模

- 点边模型
  ![alt 建模](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/3.3.0-image/create-schema.png)
- 点边模型支持实时的、增、删、改、查

- 点边模型支持导入和导出

##### 3.3.4 数据导入

- 本地数据导入

  ![alt 查询](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/14.tugraph-browser-import-data-01.png)

  - 选择文件编码格式
  - 选择本地 CSV 文件
  - 选择对应的节点或边的模型
  - 进行数据映射
  - 完成数据导入
  - 单个文件最大支持2GB

##### 3.3.5 插件

- 存储过程的使用

  ![alt 查询](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/15.tugraph-browser-plugin.png)

  - 用户可以上传本地编写的 Plugin 程序，并在可视化页面进行执行，并查看执行结果
  - 用户可以在可视化对插件进行、卸载、执行、下载等操作

##### 3.3.6 帮助

- 其中记录了 TuGraph-browser 的使用方式
  ![alt 查询](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/16.TuGraph-browser-help.png)

#### 3.4 控制台

##### 3.4.1 数据库基础信息

- 展示数据库相关的基础配置信息
  ![alt 查询](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/17.tugraph-browser-config.png)

##### 3.4.2 权限管理

- 用来创建用户和角色的功能模块，用户可以在这里进行权限的管理操作
  ![alt 查询](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/18.tugraph-browser-auth.png)

##### 3.4.3 实时状态

- 这里展示了数据库实时状态，包括：CPU 使用率、内存用率、磁盘使用率、数据请求次数、磁盘 IO
  ![alt 查询](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/19.tugraph-browser-status.png)

##### 3.4.4 任务管理

- 在这里用户可以看到在正在执行中的任务，可以在此进行停止任务的操作
  ![alt 查询](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/20.tugraph-browser-task.png)

##### 3.4.5 审计日志

- 这里记录的数据库相关的审计日志，用来排查使用遇到的问题
  ![alt 查询](https://tugraph-web-static.oss-cn-beijing.aliyuncs.com/%E6%96%87%E6%A1%A3/2.Operating/21.tugraph-browser-log.png)