[Feature] G6VP - A Graph Visualization Platform, is able to collaborate with Tugraph Analytics🎉

🌈 G6VP 现在支持与 Tugraph 协作实现流图作业可视化了！ G6VP now supports visualization of flow graph jobs in collaboration with Tugraph!

仅需 5 步，即可呈现 🎊 / Just 5 steps to present

1. 启动 Tugraph Analytics 服务 / Start the Tugraph Analytics service

⚠️ 注意在 启动SocketServer 步骤使用下列命令代替 ⚠️ Note that in the 'start SocketServer' step use the following command instead

bin/socket.sh 9003 GI

输出下列内容时，即表示 Tugraph Analytics 准备好建立连接 When the terminal outputs the following, Tugraph Analytics is ready to establish a connection.

如启动服务过程中遇到问题，可见 https://github.com/TuGraph-family/tugraph-analytics/issues/1 If any problem occurs during service startup, see https://github.com/TuGraph-family/tugraph-analytics/issues/1

2. 创建 G6VP 项目 / Create a G6VP project

进入新建画布，输入工作簿名称。我们会在后面手动添加点边数据，所以这里随便选择一个案例数据集即可，模版使用极简模版 Enter New Canvas, enter a workbook name. We will manually add the dot edge data later, so choose a case data set here, and use the minimalist template

3. 添加组件 / Add Components

我们需要添加两个组件，在工具栏中添加 清空画布；然后在默认布局的侧边容器中添加环路检测 Demo We need to add two components, in the toolbar add Clean canvas; Then add Loop Detection Demo to the side container of the default layout

此时项目画布应该如下所示/ The project canvas should look like this

点击工具栏中的🧹清除选项来清空画布节点 Click the '🧹 Clear' option in the toolbar to clear the canvas node

默认情况下，添加完环路检测Demo组件后，会自动建立连接。 By default, a connection is automatically established after the Loop Detection Demo component is added.

Tugraph Analytics 端建立连接后同样会输出以下内容： Tugraph Analytics will also output the following after the connection is established:

4. 演示 / Demostration

环路检测 Demo 提供了两种方式来进行交互 / Loop detection Demo provides two ways to interact

方式一在输入框中输入点边信息 / Method 1 Enter the dot information in the input box
方式二使用内置数据进行演示 / Method 2 Demonstrate using built-in data

两种方式本质都是调用 Tugraph Analytics 进行实时计算，不过方式二省略了手动输入过程。 Both methods essentially call Tugraph Analytics for real-time calculations, but Method 2 omits the manual input process.

这里我们使用内置数据进行快速演示，点击【选项】，选择添加点，画布中出现了 7 个点信息；接着选择添加边。我们可以在上方对话框中看到添加记录。 Here we use the built-in data for a quick demonstration, click [Options], select 'Add Points', 7 points of information appear in the canvas; Then select 'Add Edges'. We can see the add record in the above dialog.

同样的，Tugraph Analytics 终端也会实时输出操作信息，并自动启动计算任务。 Similarly, the Tugraph Analytics terminal outputs operational information in real time and automatically starts computation tasks.

5. 结果展示 / Result presentation

Tugraph Analytics 完成环路检测计算任务后，会自动返回检测结果。 After the loop detection calculation task is completed, Tugraph Analytics automatically returns the detection results.

右侧画布中会动态显示出本次环路检测结果信息： The loop detection results are dynamically displayed on the right canvas:

Jun-12-2023 19-53-35

TuGraph-family / tugraph-analytics