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源码包

  1. $ git clone https://github.com/hugegraph/hugegraph-studio.git

编译生成tar包:

  1. $ cd hugegraph-studio
  2. $ mvn package -DskipTests

执行结果如下:

  1. [INFO] ------------------------------------------------------------------------
  2. [INFO] Reactor Summary:
  3. [INFO]
  4. [INFO] hugegraph-studio ................................... SUCCESS [ 0.735 s]
  5. [INFO] studio-server: Embed tomcat server ................. SUCCESS [ 3.825 s]
  6. [INFO] studio-api: RESTful api for hugegraph-studio ....... SUCCESS [ 5.918 s]
  7. [INFO] studio-dist: Tar and Distribute Archives ........... SUCCESS [ 48.349 s]
  8. [INFO] ------------------------------------------------------------------------
  9. [INFO] BUILD SUCCESS
  10. [INFO] ------------------------------------------------------------------------
  11. [INFO] Total time: 59.055 s
  12. [INFO] Finished at: 2017-07-27T17:23:05+08:00
  13. [INFO] Final Memory: 57M/794M
  14. [INFO] ------------------------------------------------------------------------

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

2.2 下载二进制tar包

可以从以下地址下载:

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

下载完成后解压缩:

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

3 启动HugeGraph-Studio

修改配置文件:

  1. $ cd hugegraph-studio-${version}
  2. $ 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:

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

启动成功结果如下:

  1. 19:05:12.779 [localhost-startStop-1] INFO org.springframework.web.context.ContextLoader ID: TS: - Root WebApplicationContext: initialization started
  2. 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
  3. 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]
  4. 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
  5. 19:05:13.710 [localhost-startStop-1] WARN com.baidu.hugegraph.config.HugeConfig ID: TS: - The option: 'studio.server.port' is redundant
  6. 19:05:13.711 [localhost-startStop-1] WARN com.baidu.hugegraph.config.HugeConfig ID: TS: - The option: 'studio.server.host' is redundant
  7. 19:05:13.712 [localhost-startStop-1] WARN com.baidu.hugegraph.config.HugeConfig ID: TS: - The option: 'studio.server.ui' is redundant
  8. 19:05:13.712 [localhost-startStop-1] WARN com.baidu.hugegraph.config.HugeConfig ID: TS: - The option: 'studio.server.api.war' is redundant
  9. ····
  10. 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,首页如下图:

image

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

4 HugeGraph-Studio 操作指南

4.1 使用Gremlin语言创建一个图

4.1.1 创建Schema

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

4.1.1.1 创建属性类型(PropertyKey)

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

  1. graph.schema().propertyKey("name").asText().ifNotExist().create()
  2. graph.schema().propertyKey("age").asInt().ifNotExist().create()
  3. graph.schema().propertyKey("city").asText().ifNotExist().create()
  4. graph.schema().propertyKey("lang").asText().ifNotExist().create()
  5. graph.schema().propertyKey("date").asText().ifNotExist().create()
  6. graph.schema().propertyKey("price").asInt().ifNotExist().create()

在这里有几点需要说明

1、上述语句是groovy语言形式(类似但不是java)的gremlin语句,这些gremlin语句会被发送到HugeGraphServer上执行。 关于gremlin本身可以参考Gremlin Query LanguageTinkerpop官网

2、上述语句是通过graph.schema()获取到SchemaManager对象后操作元数据,通过gremlin语句操作Schema可参考文档HugeGraph-Client, 需要注意的是HugeGraph-Clientjava语法,大体上与gremlin风格是一致的,具体的差异见文档HugeGraph-Client中的说明。

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

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

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

image
4.1.1.2 创建顶点类型(VertexLabel)
  1. person = graph.schema().vertexLabel("person").properties("name", "age", "city").primaryKeys("name").ifNotExist().create()
  2. software = graph.schema().vertexLabel("software").properties("name", "lang", "price").primaryKeys("name").ifNotExist().create()
4.1.1.2 创建边类型(EdgeLabel)
  1. knows = graph.schema().edgeLabel("knows").sourceLabel("person").targetLabel("person").properties("date").ifNotExist().create()
  2. 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:

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

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

image
4.1.3 添加更多数据到图中
  1. marko = graph.addVertex(T.label, "person", "name", "marko", "age", 29, "city", "Beijing")
  2. vadas = graph.addVertex(T.label, "person", "name", "vadas", "age", 27, "city", "Hongkong")
  3. lop = graph.addVertex(T.label, "software", "name", "lop", "lang", "java", "price", 328)
  4. josh = graph.addVertex(T.label, "person", "name", "josh", "age", 32, "city", "Beijing")
  5. ripple = graph.addVertex(T.label, "software", "name", "ripple", "lang", "java", "price", 199)
  6. peter = graph.addVertex(T.label, "person","name", "peter", "age", 29, "city", "Shanghai")
  7. marko.addEdge("knows", vadas, "date", "20160110")
  8. marko.addEdge("knows", josh, "date", "20130220")
  9. marko.addEdge("created", lop, "date", "20171210", "city", "Shanghai")
  10. josh.addEdge("created", ripple, "date", "20151010", "city", "Beijing")
  11. josh.addEdge("created", lop, "date", "20171210", "city", "Beijing")
  12. peter.addEdge("created", lop, "date", "20171210", "city", "Beijing")
4.1.4 展示图
  1. g.V()

如下图所示

image

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

表格展示形式

image

Json展示形式

image

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高

示例:

  1. graph.schema().vertexLabel("software")
  2. .userdata("vis.size",25)
  3. .userdata("vis.scaling.min",1)
  4. .userdata("vis.scaling.max",10)
  5. .userdata("vis.shape","icon")
  6. .userdata("vis.border","#66ff33")
  7. .userdata("vis.background","#3366ff")
  8. .userdata("vis.hover.background","#FFB90F")
  9. .userdata("vis.hover.border","#00EE00")
  10. .userdata("vis.highlight.background","#7A67EE")
  11. .userdata("vis.highlight.border","#4F4F4F")
  12. .userdata("vis.font.color","#1C86EE")
  13. .userdata("vis.font.size",12)
  14. .userdata("vis.icon.code","\uf1b9")
  15. .userdata("vis.icon.color","#8EE5EE")
  16. .userdata("vis.icon.size",25)
  17. .append()
颜色代码示例:
#ffffff #ffffcc #cccccc #999999 #000000 #fc363b #fb157e #fec96e #b80711#e981f2
#fb6120 #9b9dfa #98c2f9 #3e71ef #fecec8 #77d46f #fefc38 #7ede4d #c3f9be#f95c79