antvis / g6vp Goto Github PK

G6VP is an online visual analysis tool for graphs and a low-code platform for building graph applications.

Home Page: https://insight.antv.antgroup.com

License: Apache License 2.0

JavaScript 1.10% HTML 0.26% TypeScript 55.29% Less 1.57% CSS 41.63% EJS 0.07% Dockerfile 0.03% Smarty 0.02% Shell 0.02%

graph graph-analysis graph-visualization g6 graphviz knowledge-graph graph-drawing business-intelligence low-code data-visualization

g6vp's Introduction

English | 简体中文

G6VP takes its name from AntV G6 Visualization Platform and was formerly known as AntV/GraphInsight. It is an online visual analysis tool for graphs and a low-code tool for building graph applications.

01 Quick Start

Site: https://insight.antv.antgroup.com
Documentation: https://www.yuque.com/antv/gi

1.1 Create a Dataset

Before analyzing data, we need to create a dataset. The dataset can be a local JSON, CSV, XLSX file, or a graph database, such as TuGraph, GraphScope, HugeGraph, Galaxybase,JanusGraph and Neo4j. It may also be a user-defined service, as shown below, where we choose a TuGraph database as the dataset.

1.2 Create a Workbook

With the data, we can create an analysis canvas. When creating a canvas, we can choose different templates. The template may come from an asset package or it may be manually saved or selected from an asset inventory.

1.3 Configure the Canvas

After entering the canvas, we can use the "Style" and "Layout" in the sidebar to map the visual representation of the canvas. At the same time, the entire canvas application, and the entire graph analysis capability, can be configured in the "Components" navigation panel. Components can be assembled like building blocks.

1.4 Remember to Save Timely

Remember to click the "Save" button in the upper right corner in a timely manner. This way, the configuration information of the canvas will be saved, and it can be analyzed directly next time.

1.5 Export SDK

For friends in need of development, you can click the "Export" button in the upper right corner of the canvas to export the source code of the canvas. Currently, HTML, CDN, and NPM export methods are supported, which facilitates developers to carry out secondary development and independent deployment.

1.6 Explore More Surprises

G6VP contains many amazing functions. You can go to "Open Market/Asset List" to see what other interesting analysis functions are available. For assets that interest you, you can also add them to the shopping cart. The selected asset list can also quickly generate an application template. The G6VP open source version currently contains 79 graph analysis assets, 3 graph element assets, and 9 graph layout assets. Welcome to provide valuable feedback

02. Develop G6VP

G6VP uses pnpm to manage the repository. According to pnpm's official compatibility statement, please use nvm to switch the Node.js version to 14 and above.

2.1 Install Dependencies

pnpm install // Will install all dependencies and run the subpackage products at once.

2.2 Start Insight Site

cd packages/gi-site
npm run start

For more development and build issues, please refer to《CONTRIBUTING》

03 Supported DataSource

TuGraph-DB：TuGraph-family/tugraph-db#246
TuGraph-Analytics：TuGraph-family/tugraph-analytics#2
GraphScope：alibaba/GraphScope#2951
HugeGraph：apache/incubator-hugegraph#2222
Galaxybase：#207
Neo4J：https://github.com/neo4j/neo4j
JanusGraph：#310
More API DataSource： 10+

04 More Reading

05 Open Source Graph Visualization Platform

06 Business Graph Analysis Software

GraphXR：https://www.kineviz.com/
Graphaware：https://graphaware.com/features/

g6vp's People

Contributors

Stargazers

Watchers

Forkers

hohooo guaqiu5 fftsun jackyyangpassion yanhe jerry-rl rockq yangzy0603 trungkien210493 lhzhou180606 taotao-byte quietlychan gouzixing h2k ifihavewings awx-tiffanylin byew starlight24 fashiontai gongdear lidongze0629 caq wubudomain billychou octostarco albcunha gingerhot shunyangli cow-rong quant1-tech gympa hencelahssini tiezhong2004 rubbishquan 10088 afdbillions liononon jikhun letonode saschamcdonald yzq1979 gaecom stand1210 vellengs rackwellizm mysky528 liangjz tyn1998 khauta andyhuang18 wj23027 userjia jkren2023 qqqq-8 ahjdzx x-lab2017 zhanghanwen0111 yikenie sidneysong xcphoenix jhuchuan-chen assaohs evengui dogwars infocz-lucy curtis18 infofacet gpia noneauth frontenddie octan-labs guaifish graphscope pomelo-nwu web-logs2 hakubox hitdavid gemrails gahao nylqd niuhuangcheng jiumikeji jhaiq 404area honor-chen fhchina huoli4844 huxiao193 sailengsi anthonyalanalex

g6vp's Issues

关于GISDK的问题

您好，请问如何将CodeSandBox中导出的代码引入到react项目中
目前npm包还没有上线？
我在react项目中引入了cdn，但是报错找不到GISDK

Is there an i18n option for english

Hi,
I would like to use this application for a project, but i dont see any i18n configurations

I want to make this app available in english if that is possible.

增加算法分析面板后页面白板

资产里选择算法分析面板后，在组件-操作栏中增加算法分析面板后，整个项目页面消失，是一个白板。这是BUG，还是哪里没操作对？现在导致原先项目也无法查看了。

辐射布局多type类型节点渲染慢问题

面对多种type节点的渲染，节点数量在400，使用的辐射布局，渲染图很慢，而且渲染出来节点还会出现重叠的情况，这个该怎么去优化

集成圣杯布局，收起导航栏的时候，画布没有AutoSize

点击前
点击后

FilterPanel 筛选面板

支持字段搜索查询

圣杯布局容器增加默认展开收起配置

提供默认展开收起配置项，由用户选择在初始化时容器是否展开

Feedback on G6VP

Dear staffs,

I am writing to express my gratitude for the fantastic product you have created. It has been a great help to me, and I appreciate all the hard work and effort that went into it.

However, I do have one question regarding the product. I was wondering if it supports undirected edges. If so, please let me know how to utilize this feature; if not, any plans for future updates?

Thank you again for your time and for creating such a wonderful product.

Best regards,
Charles

G6VP 私有化部署，资源需要全部本地化

现有的G6VP打包后，分析资产都在CDN上，部署在孤岛服务器上，会遇到资源无法加载问题。

导出sdk包不能连接neo4j数据库

我本地运行项目连接neo4j 可以连接成功也可以查出来数据然后导出sdk本地运行不能查出来数据

导出sdk包没有配置连接图数据库的地方

图标库支持用户自定义地址

https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.22&manage_type=myprojects&projectId=3381398

千辛万险走到npm run start ,再次遇到js failed to compile

js小白又遇到大问题了。

官方是不是考虑一下，在windows安装的各种依赖，可以有个列表。或者可以把node_models包压缩一下，window安装1周了，整整一周了，还没有搞定，o(╥﹏╥)o

Please specify licence

Hello all,
great project, love to collaborate. But what is the licence?
I see some packages with "MIT" but others say nothing can you please put general licence specification on the github project page. Happy to contribute

布局/节点位置固定（加急）

在每一次打开页面之后，节点的位置都会改变。如果节点较多的时候，每一次打开页面时节点的位置都会变化，看着会很乱，光找节点就需要花费很长的时间。
所以希望能实现一个功能：用户可以自定义的设置每一个节点、布局，能固定节点位置，每一次打开的时候都是自己提前规划好的页面。
非常感谢各位大佬。

Where can i find the documentation for the application

Hi,
I remember there was a website that had documentation on how to use this application and develop components for it.

I cant find that site anymore, it was similar to wiki page.

regards,

导出的离线html中，保存分享资产不可用

您好。
graphInsight的线上页面端，保存分享资产会正常跳转新页面。

但是在导出SDK-导出HTML生成的离线html页面，点保存分享没反应。

pnpm install 报错

pnpm install 一直报这个错误，不知道该怎么解决。

布局方法抽象为交互组件

目前布局方法依赖左侧的布局切换方法。

希望将布局方法切换抽象为一个组件
这样可以在某个容器（例如“操作栏”）中加入这个组件，从而让构建的项目可以进行基本的布局切换。
建议
1、如果不在项目中暴露布局算法参数的话可以直接给出简单的切换交互组件

2、如果在项目中暴露布局算法参数的话可以参照图计算在侧边栏的方式

Cypher查询模版和语句模版查询协同出现问题

两个资产加进去的时候，会发生报错 @baizn 跟进下哈

表格模式的分屏按钮提供配置选择是否展示

以 SDK 的方式集成到项目中去时，表格模式的分屏页面需要集成方自己集成实现，期望分屏按钮可以由用户自己控制是否展示，在确认集成了分屏页面后再透出分屏按钮

镜像与依赖库版本问题（如antvis/gi-httpservice @alipay/gi-assets-advance）

README里的Neo4j使用文档，版本写的是1.1.0
但我去hub 还没看到1.1.0，只有1.0.0

以及我本地配置的是阿里的镜像加速，好像拉取不到的样子...

以及关于GraphInsight部署方式我想问下，

Docker镜像里是所有资产都有了吗，我看文档里

antvis/gi-httpservice：依赖 gshttpservice，提供连接 GS 引擎、Gremlin 查询、邻居扩展等图分析能力.

我也看了下01. 导出 GISDK，看了下【下载项目】导出的.txt，（【导出SDK】CodeSandbox选项，公司网不咋地访问不到）

该变量，记录的是用户在 GI 上使用的资产包信息（按需加载）GISDK会根据这些信息，动态请求 JS 和对应的 CSS 资源，每个资产包的信息如下

我想问假如项目里嵌入GISDK，资产包里的js，打包的时候加载的进来吗，因为最终环境是断网的

React doesn't build projects

even though i upgraded nodejs ram (--max_old_space_size=15192)
When I run npm run build I get an error

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF7D8547C4F v8::internal::CodeObjectRegistry::~CodeObjectRegistry+114207
 2: 00007FF7D84D5EC6 DSA_meth_get_flags+65542
 3: 00007FF7D84D6D7D node::OnFatalError+301
 4: 00007FF7D8E0B6CE v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF7D8DF5CAD v8::SharedArrayBuffer::Externalize+781
 6: 00007FF7D8C9907C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
 7: 00007FF7D8CA5D29 v8::internal::Heap::PublishPendingAllocations+1129
 8: 00007FF7D8CA2CFA v8::internal::Heap::PageFlagsAreConsistent+2842
 9: 00007FF7D8C95959 v8::internal::Heap::CollectGarbage+2137
10: 00007FF7D8C93B10 v8::internal::Heap::AllocateExternalBackingStore+2000
11: 00007FF7D8CB8696 v8::internal::Factory::NewFillerObject+214
12: 00007FF7D89EAB65 v8::internal::DateCache::Weekday+1797
13: 00007FF7D8E993C1 v8::internal::SetupIsolateDelegate::SetupHeap+494417
14: 0000012D483A82AF

There is no problem when I close the component that uses the G6VP in my project. I think there is a ram leak during the compilation phase or the capacity is too high, although I allocated 16GB of space, it did not compile.

导出 HTML 和 sandbox 中graphin的css丢失

请教一下，G6VP是否可用在windows使用? pnpm install时很多库无法安装，请问如何设置镜像仓？

GET https://mirrors.xx/npm/js-tokens/download/js-tokens-4.0.0.tgz error (ERR_PNPM_FETCH_404). Will retry in 1 minute. 1 retries left.
WARN GET https://mirrors.xx/npm/loose-envify/download/loose-envify-1.4.0.tgz error (ERR_PNPM_FETCH_404). Will retry in 1 minute. 1 retries left.
WARN GET https://mirrors.xx/npm/@antv/algorithm/download/@antv/algorithm-0.1.25.tgz error (ERR_PNPM_FETCH_404). Will retry in 1 minute.
1 retries left.
WARN GET https://mirrors.xx/npm/scheduler/download/scheduler-0.20.2.tgz error (ERR_PNPM_FETCH_404). Will retry in 1 minute. 1 retries left.
WARN GET https://mirrors.xx/npm/@antv/g6/download/@antv/g6-4.7.14.tgz error (ERR_PNPM_FETCH_404). Will retry in 1 minute. 1 retries left.

G6VP Context Menu Editing

I want to add edits on the Context Menu and remove the existing context menu when right clicking on the G6VP nodes and edges. Can you give some advice for this?

点击选择边后，边的状态和预期不符

实现自定义的点边统计组件，获取选择的边时，无法通过获取 selected 状态获取到被选择的边信息，实际被选择的边状态为 active ，与预期不符。

这个项目有计划开源吗？

这个想法理念太棒了，期待开放源代码

graphinsight可以兼容在微信中展示吗或是非电脑端展示吗？

gi-panel-div bug

Hello; While exporting GraphInsight SDK, I extract it as npm package from 提供 NPM 包，支持 Tree Shaking，原生集成到 React 项目中. After making the necessary additions to my project, on the right when first opened 属性面板
(gi-panel-div)
part stays open all the time and does not close. I checked the version differences, I was using antd 15 from the beginning, then even though I downgraded to 14, the same problem persisted. All other packages are same as sample code in codesandbox including graphin. I would be very happy if you could help me with the problem.

Table Fullscreen Chrome Tab Won't Open

We Are Working On The Full Screen Display Feature In The New Tab The Table Mode. Our project is React project and we are using the react-router-dom library for routing operations. When it tries to open http://localhost:3000/#/tabs/table the table is not displayed. Can you help us figure out how to proceed in this regard?

NodeLegend 节点图例

支持主题色自动切换

链接neo4j时，显示衔接成功却没有下一步

导出选择“提供 NPM 包，支持 Tree Shaking，原生集成到 React 项目中”页面css错乱

导出sdk本地可以运行

但是得把这个
的light 变成字符串源码导出是个变量但是又找不到这个变量不知道是不是这个主题的原因导致页面css错乱

请求中暂时没有发现未请求到的css

导出选择“提供 NPM 包，支持 Tree Shaking，原生集成到 React 项目中” 放在react项目中报错

pnpm 安装完所有需要的包 npm start 启动报错

「布局切换」资产，当切换资金力导的时候，没办法点击画布停止迭代，导致切换bug

筛选器中关于离散数据的展示

筛选器中目前对于离散数据的统计与展示是饼图

建议
1、直接替换为条形图
饼图在展示类别数据中10个以上就不太友好
条形图可以展示更多类别，并且可以通过展开更多进行加载

2、或者支持可以切换为条形图。
在这里增加切换菜单，可以切换不同图表

嵌入Ant Design Pro ，MFSU阶段报错 Module not found: Error: Can't resolve '@antv/s2'

目标

因为我现在项目是个稍微旧一点的Ant Design Pro版本，我只能新建一个试着搭配一下。目标是Ant Design Pro里打开一个页面，就是GraphInsight的页面。然后通过里面的Neo4j资产，对图数据库进行探索分析。

简要复现步骤

npm i @ant-design/pro-cli -g
pro create myapp （选umi@4）
npm i @antv/gi-theme-antd @antv/g6 @antv/gi-sdk @antv/gi-assets-tugraph @antv/gi-assets-neo4j @antv/gi-assets-graphscope @antv/gi-assets-advance @antv/gi-assets-basic @antv/gi-assets-scene @antv/graphin

我一开始是手动改package.json 再npm install，这一阶段都没遇到啥问题

 "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-components": "^2.3.13",
    "@antv/g6": "^4.7.16",
    "@antv/gi-assets-advance": "^1.1.0",
    "@antv/gi-assets-basic": "^1.1.0",
    "@antv/gi-assets-graphscope": "^1.0.2",
    "@antv/gi-assets-neo4j": "^1.0.2",
    "@antv/gi-assets-scene": "^1.0.0",
    "@antv/gi-assets-tugraph": "^1.0.2",
    "@antv/gi-sdk": "^1.1.0",
    "@antv/gi-theme-antd": "^0.3.0",
    "@antv/graphin": "^2.7.13",
    "@umijs/route-utils": "^2.1.3",
    "antd": "^4.23.3",
    "classnames": "^2.3.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "omit.js": "^2.0.2",
    "rc-menu": "^9.6.4",
    "rc-util": "^5.24.4",
    "react": "^17.0.0",
    "react-dev-inspector": "^1.8.1",
    "react-dom": "^17.0.0",
    "react-helmet-async": "^1.3.0"
  },

配置对应路由和页面，就按CodeSandbox里的组件写法，npm run start

跳转到对应页面的时候，就会提示

MFSU compiled with 6 errors
    at /home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/preset-umi/dist/commands/dev/depBuildWorker/depBuilder.js:58:20
    at finalCallback (/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:61916:32)
    at /home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:61980:17
    at /home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:75765:3
    at Hook.eval [as callAsync] (eval at create (/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:4851)
    at Cache.storeBuildDependencies (/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:51434:37)
    at /home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:61976:19
    at Hook.eval [as callAsync] (eval at create (/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:47:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:4851)
Module not found: Error: Can't resolve '@antv/s2-react' in '/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@antv/gi-assets-advance/es/components/TableMode'
Module not found: Error: Can't resolve '@antv/s2-react/dist/style.min.css' in '/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@antv/gi-assets-advance/es/components/TableMode'
Module not found: Error: Can't resolve '@antv/s2' in '/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@antv/gi-assets-advance/es/components/TableMode/hooks'
Module not found: Error: Can't resolve '@antv/s2' in '/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@antv/gi-assets-advance/es/components/TableMode/hooks'
Module not found: Error: Can't resolve '@antv/s2' in '/home/scarlet/GitHub/antd-gisdk-demo/node_modules/@antv/gi-assets-advance/es/components/TableMode/hooks'

尝试

我尝试过安装 @antv/s2 和 @antv/s2-react，但没有起作用。后面搜了下资料，是不是这两个包应该是 @antv/gi-assets-advance的依赖呢？

Neo4J 引擎的 Schema 解析不正确，properties字段

因为解析不正确，导致其他依赖Schema的资产，没办法正确协同，例如「筛选面板」

Chart div is nested with toolbar bar

First of all, thank you very much for sharing the GraphInsight solution with us and for your efforts. It is a really successful and very useful library.
I am installing the package from GraphInsight SDK export options (提供 NPM 包，支持 Tree Shaking，原生集成到 React 项目中). When I press the (ant-tabs-extra-content) menu button, the toolbar shrinks, but it is nested with the (chart-container) div. It does not provide a responsive appearance. Thanks in advance for your interest and concern.