Quickstart - Display with HugeGraph-Studio - 《图数据库 HugeGraph v0.11 使用手册》

图数据的输入
图数据的展示
图数据的分析

有两种方式可以获取HugeGraph-Studio：

下载源码包编译安装
下载二进制tar包

2.1 下载源码编译生成tar包

下载HugeGraph-Studio源码包

编译生成tar包:


$ mvn package -DskipTests

执行结果如下：

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary:
[INFO]
[INFO] hugegraph-studio ................................... SUCCESS [  0.735 s]
[INFO] studio-server: Embed tomcat server ................. SUCCESS [  3.825 s]
[INFO] studio-api: RESTful api for hugegraph-studio ....... SUCCESS [  5.918 s]
[INFO] studio-dist: Tar and Distribute Archives ........... SUCCESS [ 48.349 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] Total time: 59.055 s
[INFO] Finished at: 2017-07-27T17:23:05+08:00
[INFO] Final Memory: 57M/794M
[INFO] ------------------------------------------------------------------------

执行成功后,在hugegraph-studio目录下生成hugegraph-studio-${version}文件夹以及hugegraph-studio-${version}.tar.gz文件，即为编译生成的tar包。

2.2 下载二进制tar包

可以从以下地址下载:

wget https://github.com/hugegraph/hugegraph-studio/releases/download/v${version}/hugegraph-studio-${version}.tar.gz

下载完成后解压缩：

$ tar zxvf hugegraph-studio-${version}.tar.gz

将配置项studio.server.host的值localhost修改成机器名或 IP，这是 HugeGraphStudio 对外提供服务的host，如果只需要本地访问则保持不变即可；
将配置项studio.server.port的值8088修改成想要的端口，这是 HugeGraphStudio 对外提供服务的port；
将配置项graph.server.host的值localhost修改成 HugeGraphServer 的host，HugeGraphStudio 通过此项和graph.server.port与 HugeGraphServer 建立连接；
将配置项graph.server.port的值8080修改成 HugeGraphServer 的port，HugeGraphStudio 通过graph.server.host和此项与 HugeGraphServer 建立连接；
将配置项graph.name的值hugegraph修改成要连接的 HugeGraphServer 的图名，目前只允许连接一个图。

修改完上述配置后，即可启动 HugeGraphStudio:

$ cd hugegraph-studio-${version}
$ bin/hugegraph-studio.sh

启动成功结果如下：

19:05:12.779 [localhost-startStop-1] INFO  org.springframework.web.context.ContextLoader ID:  TS: - Root WebApplicationContext: initialization started
19:05:12.910 [localhost-startStop-1] INFO  org.springframework.web.context.support.XmlWebApplicationContext ID:  TS: - Refreshing Root WebApplicationContext: startup date [Thu Jul 27 19:05:12 CST 2017]; root of context hierarchy
19:05:12.973 [localhost-startStop-1] INFO  org.springframework.beans.factory.xml.XmlBeanDefinitionReader ID:  TS: - Loading XML bean definitions from class path resource [applicationContext.xml]
19:05:13.402 [localhost-startStop-1] INFO  org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor ID:  TS: - JSR-330 'javax.inject.Inject' annotation found and supported for autowiring
19:05:13.710 [localhost-startStop-1] WARN  com.baidu.hugegraph.config.HugeConfig ID:  TS: - The option: 'studio.server.port' is redundant
19:05:13.711 [localhost-startStop-1] WARN  com.baidu.hugegraph.config.HugeConfig ID:  TS: - The option: 'studio.server.host' is redundant
19:05:13.712 [localhost-startStop-1] WARN  com.baidu.hugegraph.config.HugeConfig ID:  TS: - The option: 'studio.server.ui' is redundant
····
19:05:14.873 [main] INFO   com.baidu.hugegraph.studio.HugeGraphStudio ID:  TS: - HugeGraphStudio is now running on: http://localhost:8088

接下来，打开浏览器访问即可使用HugeGraph-Studio，首页如下图：

这里以”一些人与相关软件关系图”为例子，内容包括元数据（Schema）和数据（Vertex/Edge）两部分。

4.1 使用Gremlin语言创建一个图

4.1.1 创建Schema

这个例子涉及的Schema有三类，分别是：PropertyKey，VertexLabel和EdgeLabel。下面依次创建这些Schema。

4.1.1.1 创建属性类型（PropertyKey）

将下面的语句输入到 Studio 的输入框中：

graph.schema().propertyKey("name").asText().ifNotExist().create()
graph.schema().propertyKey("age").asInt().ifNotExist().create()
graph.schema().propertyKey("city").asText().ifNotExist().create()
graph.schema().propertyKey("lang").asText().ifNotExist().create()
graph.schema().propertyKey("date").asText().ifNotExist().create()
graph.schema().propertyKey("price").asInt().ifNotExist().create()

在这里有几点需要说明

1、上述语句是groovy语言形式（类似但不是java）的gremlin语句，这些gremlin语句会被发送到HugeGraphServer上执行。关于gremlin本身可以参考或Tinkerpop官网；

3、在HugeGraph-Studio的输入框中，用户可以直接使用两个变量graph和g，其中graph就是当前连接的图对象，可使用该对象对图做各种增删改查操作; g是用于遍历图的一个对象，其本质就是graph.traversal()，用户可以使用该对象做各种遍历操作；

4、HugeGraph-Studio作为一个展示图的工具，主要用于做查询或遍历，而不宜做太多增删改的操作。

执行完成后，可以得到返回的数据，表明执行成功。如图所示

4.1.1.2 创建顶点类型（VertexLabel）

person = graph.schema().vertexLabel("person").properties("name", "age", "city").primaryKeys("name").ifNotExist().create()
software = graph.schema().vertexLabel("software").properties("name", "lang", "price").primaryKeys("name").ifNotExist().create()

4.1.1.2 创建边类型（EdgeLabel）

4.1.2 创建顶点（Vertex）和边（Edge）

有了Schema后，就可以根据Schema创建特定的顶点和边了，这里我们定义两个person类型的顶点实例：marko 和 vadas，再定义两者之间的关系knows：

marko = graph.addVertex(T.label, "person", "name", "marko", "age", 29, "city", "Beijing")
marko.addEdge("knows", vadas, "date", "20160110")

在页面中输入语句，这样我们就创建了两个顶点一条边，点击执行，结果如下图所示

4.1.3 添加更多数据到图中

marko = graph.addVertex(T.label, "person", "name", "marko", "age", 29, "city", "Beijing")
vadas = graph.addVertex(T.label, "person", "name", "vadas", "age", 27, "city", "Hongkong")
lop = graph.addVertex(T.label, "software", "name", "lop", "lang", "java", "price", 328)
josh = graph.addVertex(T.label, "person", "name", "josh", "age", 32, "city", "Beijing")
ripple = graph.addVertex(T.label, "software", "name", "ripple", "lang", "java", "price", 199)
peter = graph.addVertex(T.label, "person","name", "peter", "age", 29, "city", "Shanghai")
marko.addEdge("knows", vadas, "date", "20160110")
marko.addEdge("knows", josh, "date", "20130220")
josh.addEdge("created", ripple, "date", "20151010", "city", "Beijing")
josh.addEdge("created", lop, "date", "20171210", "city", "Beijing")
peter.addEdge("created", lop, "date", "20171210", "city", "Beijing")

4.1.4 展示图

g.V()

如下图所示

HugeGraph-Studio不仅支持通过graph的方式展示数据，还支持表格和Json两种数据展示形式

表格展示形式

4.4 HugeGraph-Studio 样式自定义

4.4.1 自定义VertexLabel 样式

示例：

graph.schema().vertexLabel("software")
     .userdata("vis.size",25)
     .userdata("vis.scaling.min",1)
     .userdata("vis.scaling.max",10)
     .userdata("vis.shape","icon")
     .userdata("vis.border","#66ff33")
     .userdata("vis.background","#3366ff")
     .userdata("vis.hover.background","#FFB90F")
     .userdata("vis.hover.border","#00EE00")
     .userdata("vis.highlight.background","#7A67EE")
     .userdata("vis.highlight.border","#4F4F4F")
     .userdata("vis.font.color","#1C86EE")
     .userdata("vis.font.size",12)
     .userdata("vis.icon.code","\uf1b9")
     .userdata("vis.icon.color","#8EE5EE")
     .userdata("vis.icon.size",25)
     .append()

颜色代码示例：

#ffffff	#ffffcc	#cccccc	#999999	#000000	#fc363b	#fb157e	#fec96e	#b80711	#e981f2
#fb6120	#9b9dfa	#98c2f9	#3e71ef	#fecec8	#77d46f	#fefc38	#7ede4d	#c3f9be	#f95c79