🚀 G6VP - A Graph Visualization Platform, has supported services from GraphScope !

[Yanyan-Wang]

🙋‍♀️ Hi，亲爱的 GraphScope 团队与用户：
🙋‍♀️ Hi, Dear GraphScope team and users:

首先，非常感谢 GraphScope 团队为社区贡献了如此美好的产品！
First of all, we are so appreciate that GraphScope Team has created such a great product to the community!

我们是蚂蚁集团 AntV 图可视化小组。我们在去年开源了一款基于 AntV G6 （G6 官网）的图可视化与分析平台 G6VP。用户可以在 G6VP 中连接自己的数据，包括本地文件上传，或多种图数据库，并组装 G6VP 提供的丰富图可视化与分析资产，进行数据分析。或设计和开发出自己的图可视分析产品，嵌入到自己的系统当中。

We are members of AntV Graph Visualization team of Ant Group. We have opened source a graph vis platform based on AntV G6 (G6's website)named G6VP, where users could connect to their own datasource with uploaded files or several graph databases, and then analyze the graph data with powerful graph visualization and analysis assets provided by G6VP. What's more, users could interactively integrate the analysis assets / components provided by G6VP to create their own graph applications and output SDK or HTML for embedding into their systems.

现在，G6VP 支持了 GraphScope 作为一个重要的服务！非常感谢 GraphScope 团队的支持！

Now, we have supported GraphScope as one important service on G6VP! Thanks for the supports from GraphScope team!

下面是在 G6VP 上使用 GraphScope (后文简称 GS ) 作为服务的步骤：

Here goes the steps to connect GraphScope (GS for short) on G6VP:

由于 G6VP 没有可用的在线服务器，因此与引擎和服务相关的我们都提供了 Docker 镜像，需要该服务的业务或用户就可以通过 Docker 镜像部署对应的引擎及服务。

Since G6VP does not have an available online server, we have provided Docker images related to engines and services. Users who need this service can deploy corresponding engines and services through Docker images.

当前 G6VP 仅支持 GraphScope 中持久化图存储(Groot)和交互式查询引擎(GIE)的联合部署模式，后续会持续完成 GraphScope 中分析式计算引擎(GAE)等的对接，提供一站式高效的解决方案。

Currently G6VP only supports Persistent Graph Storage (Groot) and Interactive Query Engine (GIE) joint deployment mode, and will continue to complete the docking of Analytic Computing Engine (GAE) in GraphScope, Provide one-stop efficient solutions.

Step 1 镜像部署 / Image Deployment

这一步和第二步，我们需要通过 docker 部署 GraphScope 服务，并启动 G6VP Http 服务，需要注意的是，两个服务所在的机器网络需要相通。

In this step, we need to deploy the GraphScope service and G6VP HTTP service through docker. It should be noted that the machine networks where the two services are located can be connected.

拉取并启动镜像 / Pull and Start the Image：

# 拉取镜像 / Pull the image
docker pull registry.cn-hongkong.aliyuncs.com/graphscope/graphscope-store:httpserver
#  启动镜像，过程中需要映射端口以保证后续的查询服务可用
# 12312: gremlin 查询端口
# 9527: http 服务端口
# Start the Image, the port should be mapped in this procedure to ensure the availability of the service
# 12312 is the gremlin's query port 
# 9527 is the server port
docker run -d -p 12312:12312 -p 9527:9527 registry.cn-hongkong.aliyuncs.com/graphscope/graphscope-store:httpserver

GraphScope 持久化存储容器启动成功后，会载入默认的数据集，schema 信息如下，如果你想导入自己的数据集，可参考 Groot 文档。

After the GraphScope persistent storage container is successfully started, the default dataset will be loaded. The schema information is as follows. If you want to import your own dataset, please refer to the Groot documentation.

可以执行如下命令，检测容器是否正常运行:
You can execute the following command to check whether the container is running normally:

// 注意服务器运行容器是，替换 localhost 地址为服务器 IP
// Note that when the server is running the container, replace the localhost address with the server IP
curl http://localhost:9527/api/v1/graph

部署成功后，得到引擎地址为 http://localhost:9527，在后面的「G6VP 接入 GS 服务」步骤中将使用到。

Step 2 启动 G6VP 代理服务 / Start G6VP HTTP service

有两种方式来启动 G6VP 的代理服务：

There are two ways to start G6VP HTTP service:

1. 下载 gi-httpservices.tgz 文件 / Download gi-httpservices.tgz file

访问 G6VP 开源仓库，下载 gi-httpservices.tgz 文件：https://github.com/antvis/G6VP/raw/master/release/gi-httpservice.tgz

Download gi-httpservices.tgz file at: https://github.com/antvis/G6VP/raw/master/release/gi-httpservice.tgz

解压 gi-httpservice.tgz，进入文件启动服务，在此之前请先确保本机电脑有 NodeJS 环境。

Unzip gi-httpservice.tgz and enter the file to start the service. Before doing that, make sure the NodeJS environment is available on your computer.

mkdir gi-httpservice && cd gi-httpservice
curl -LO https://github.com/antvis/G6VP/raw/master/release/gi-httpservice.tgz
tar xzf gi-httpservice.tgz

# make sure port 7001 is available
# lsof -i:7001
npm run start

2. 克隆 G6VP 源码启动 / Clone G6VP Source Code

克隆 G6VP 代码：

Clone the code of G6VP from GitHub by the running command in your terminal:

git clone https://github.com/antvis/G6VP.git

终端进入 G6VP/packages/gi-httpservice 文件夹：

Enter the folder 'G6VP/packages/gi-httpservice' in your terminal:

cd {The path where the cloned G6VP source code at}/G6VP/packages/gi-httpservice

安装依赖：
Install the dependencies:

npm install

启动 httpservice：

Start the service:

npm run dev

此时，G6VP HTTP 服务启动完成，访问 http://localhost:7001/ ，(默认端口 7001)，可以在控制台看到下面提示：

Now, G6VP http service is running, visit http://localhost:7001/, (7001 is the default port), you will see the tips in the console of browser:

Step 3 G6VP 接入 GS 服务 / Image Deployment

连接 GS 服务 / Connect GS service

打开 https://insight.antv.antgroup.com/

Open https://insight.antv.antgroup.com/

填写上面步骤中得到的平台地址和引擎地址：

Fill the address of services from previous steps：

• 平台地址：G6VP HTTP 服务地址，上文为 http://localhost:7001

• 引擎地址：GS 服务地址，上文为 http://localhost:9527

• Platform address: The address of G6VP HTTP service, it 'http://localhost:7001' was from previous step

• Engine address: The address of GS service, it 'http://localhost:9527' was from previous step

点击「开始连接」，若成功连接，右上方将出现下图提示，下方将出现「选择子图」 panel：

Click 「开始连接」(Connect) button and you will see the tip if it is success, and the subgraph select panel will be shown at below:

「选择子图」的下拉框中列举了该 GS 服务中的所有子图名称，选择其中一个，然后在「数据名称」中为当前创建的 G6VP 数据集起一个名字，例子中起名为“crew_graph”。

Select a subgraph from 「Select Subgraph」 . This select dropdown has listed all the graphs in the GS service you started. If there is no option, please checkout if the data importing step is failed. Name the dataset.

再点击「进入分析」，即可创建数据集成功，页面将跳转到「数据集」模块，您将在数据集列表中看到刚刚创建的名为“crew_graph” G6VP 数据集：

Click 「进入分析」(Analyze), the page will jump to the list of the datasets, and you will find the dataset you just created:

点击对应数据集右侧的电脑 icon，即使用该数据集创建工作簿，此时，页面跳转到新建工作簿页面，数据集和模版已为您填充好，在「工作簿名称」输入框为该该工作簿起一个名称，然后点击「创建画布」，即可进入工作簿。

Click the blue computer icon on the right of the dataset record in the list to create a workbook with the dataset. You will see the page below and the dataset field is already filled and please name the workbook and then click 「Create Canvas」.

点击「创建画布」后，您将看到一个空白的画布，以及左侧的配置面板：

After that, a workbook is successfully created and you will see an empty canvas with configuration panel like this:

Step 4 分析数据 / Analyze the Data

此时，您已经完成了 GS 数据库的连接和数据、工作簿的创建，可以在刚刚新建的工作簿中进行数据分析了。在工作簿中配置 Gremlin 查询资产，输入 gremlin 查询语句，例如下图中的 g.V().limit(10)，即可成功查询数据：

Now, you have completed the database connecting and workbook creating. Here goes the Graph Visualization and Analysis! Enter the Gremlin code and query:

如果目前节点和边的样式不符合您的要求，可以在「样式」中进行配置：

If you are not satisfy with the nodes and edges' styles, configuring it on the style panel on the left:

选择一个或多个节点，在节点的右键菜单中，选择「一度扩展」，进行该节点的邻居查询：

Select one or brush multiple nodes and right click to expand the neighbors:

扩展结果：

The result after expanding:

如果这个邻居扩散资产不符合需求，可以在左侧面板进行配置：

Configure the neighbor querying asset on the left if it does not meet the requirement:

使用过滤取来分析统计数据，我们提供了过滤器的智能推荐：

Use the filter to analyze the statistical info, and there will be an intelligent recommend:

上面仅仅介绍了最为基础的功能。还有大量超酷的图分析资产可以在资产中心找到。

The introduction above is only about the basic functions. Plenty of fancy graph analysis assets will be found at the assets center.

集成这些资产到不同的容器中，来设计和建设您的图应用：

Integrate them into different containers to build up your own applications:

使用它们进行分析！

Use them to analyze!

最后，别忘了保存刚刚配置完成的工作簿：

Last but not least, do not forget to save your workbook after the above operations:

次进入 G6VP，就可以在工作簿列表中找到这个工作簿了。别担心，所有的数据信息、工作簿配置信息都存储在您的电脑本地缓存，G6VP 不会获取任何用户数据信息。

Next time you visit G6VP, you will found your workbook at the workbook list. Don't be worry, the datasets info, workbooks are all cached at your computer. G6VP will not record any user information!

如果您想将这个工作簿嵌入到您的系统当中，可以点击右上角的「开放」，有三种方式可以导出：

If you want to embed the workbook into your system, export it at the right top 「Open」. There will be 3 ways to export:

更多的用法和文档可以访问：https://www.yuque.com/antv/gi

More usage and docs can be referred to: https://www.yuque.com/antv/gi

如果您有任何问题，都可以到我们的 GitHub 仓库中提 issue： http://github.com/antvis/g6vp

If you have any questions, create issues at our GitHub Repo: http://github.com/antvis/g6vp

您的 Star 就是给我们开源最大的鼓励：

We will be appreciate if you star our repo for encouragement:

AntV G6: http://github.com/antvis/g6
AntV G6VP: http://github.com/antvis/g6vp
祝您开心～

Have a nice day~

[welcome]

Thanks for opening your first issue here! Be sure to follow the issue template! And a maintainer will get back to you shortly!
Please feel free to contact us on DingTalk, WeChat account(graphscope) or Slack. We are happy to answer your questions responsively.