HugeGraph-Studio Quick Start
1 HugeGraph-Studio概述
HugeGraph-Studio是HugeGraph的前端展示工具,是基于Web的图形化IDE环境。 通过HugeGraph-Studio,用户可以执行Gremlin语句,并及时获得图形化的展示结果。 功能包括:
- 图数据的输入
- 图数据的展示
- 图数据的分析
注意:HugeGraph-Studio需要依赖HugeGraph-Server,在安装和使用HugeGraph-Studio之前,请通过jps命令检查HugeGraphServer服务是否已经启动,如果没有启动,请参考HugeGraph-Server安装配置启动HugeGraphServer。
2 安装和运行HugeGraph-Studio
有两种方式可以获取HugeGraph-Studio:
- 下载源码包编译安装
- 下载二进制tar包
2.1 下载源码编译生成tar包
下载HugeGraph-Studio源码包
$ git clone https://github.com/hugegraph/hugegraph-studio.git
编译生成tar包:
$ cd hugegraph-studio
$ 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] ------------------------------------------------------------------------
[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
3 启动HugeGraph-Studio
修改配置文件:
$ cd hugegraph-studio-${version}
$ vim conf/hugegraph-studio.properties
- 将配置项
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:13.712 [localhost-startStop-1] WARN com.baidu.hugegraph.config.HugeConfig ID: TS: - The option: 'studio.server.api.war' is redundant
····
19:05:14.873 [main] INFO com.baidu.hugegraph.studio.HugeGraphStudio ID: TS: - HugeGraphStudio is now running on: http://localhost:8088
接下来,打开浏览器访问 http://localhost:8088 即可使用HugeGraph-Studio,首页如下图:
这里以”一些人与相关软件关系图”为例子,内容包括元数据(Schema)和数据(Vertex/Edge)两部分。
4 HugeGraph-Studio 操作指南
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
本身可以参考Gremlin Query Language或Tinkerpop官网;
2、上述语句是通过graph.schema()
获取到SchemaManager
对象后操作元数据,通过gremlin
语句操作Schema可参考文档HugeGraph-Client,
需要注意的是HugeGraph-Client
是java
语法,大体上与gremlin
风格是一致的,具体的差异见文档HugeGraph-Client
中的说明。
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)
knows = graph.schema().edgeLabel("knows").sourceLabel("person").targetLabel("person").properties("date").ifNotExist().create()
created = graph.schema().edgeLabel("created").sourceLabel("person").targetLabel("software").properties("date", "city").ifNotExist().create()
4.1.2 创建顶点(Vertex)和边(Edge)
有了Schema后,就可以根据Schema创建特定的顶点和边了,这里我们定义两个person类型的顶点实例:marko 和 vadas,再定义两者之间的关系knows:
marko = graph.addVertex(T.label, "person", "name", "marko", "age", 29, "city", "Beijing")
vadas = graph.addVertex(T.label, "person", "name", "vadas", "age", 27, "city", "Hongkong")
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")
marko.addEdge("created", lop, "date", "20171210", "city", "Shanghai")
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两种数据展示形式
表格展示形式
Json展示形式
4.4 HugeGraph-Studio 样式自定义
4.4.1 自定义VertexLabel 样式
属性 | 默认值 | 类型 | 说明 |
---|---|---|---|
vis.size |
25 |
number | 顶点大小 |
vis.scaling.min |
10 |
number | 根据标签内容调整节点大小,优先级比vis.size高 |
vis.scaling.max |
30 |
number | 根据标签内容调整节点大小,优先级比vis.size高 |
vis.shape |
dot | string | 形状,包括ellipse, circle, database, box, text,diamond, dot, star, triangle, triangleDown, hexagon, square and icon. |
vis.border |
#00ccff | string | 顶点边框颜色 |
vis.background |
#00ccff | string | 顶点背景颜色 |
vis.hover.border |
#00ccff | string | 鼠标悬浮时,顶点边框颜色 |
vis.hover.background |
#ec3112 | string | 鼠标悬浮时,顶点背景颜色 |
vis.highlight.border |
#fb6a02 | string | 选中时,顶点边框颜色 |
vis.highlight.background |
#fb6a02 | string | 选中时,顶点背景颜色 |
vis.font.color |
#343434 | string | 顶点类型字体颜色 |
vis.font.size |
12 |
string | 顶点类型字体大小 |
vis.icon.code |
\uf111 |
string | FontAwesome 图标编码,目前支持4.7.5版本的图标 |
vis.icon.color |
#2B7CE9 |
string | 图标颜色,优先级比vis.background高 |
vis.icon.size |
50 | string | icon大小,优先级比vis.size高 |
示例:
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 |