[Feature] Replace HyperCRX networks component with OSGraph networks

[frank-zsy]

Description

Currently, we have 4 networks (2 for repos and 2 for developers) in HyperCRX, but since OpenDigger no longer maintains a graph database infra, the data of the 4 networks are not updated for months.

After OSGraph 2.0 launched, we could use OSGraph networks to replace the old components.

OSGraph has 6 types of network (3 for repos and 3 for developers), so we could just put them into HyperCRX and replace the old ones. OSGraph provides sharing URL to access the networks, so I think we just need to embed them with iframe.

[frank-zsy]

In development stage, we could just use the network URL of microsoft/vscode repo and tison to test. The networks are:

• Repo contribution graph: https://osgraph.com/result?shareId=1&shareParams=41881900,1405669423,1721288623,10&isShare=true
• Repo ecosystem graph: https://osgraph.com/result?shareId=2&shareParams=41881900,10&isShare=true
• Repo community graph: https://osgraph.com/result?shareId=3&shareParams=41881900,5,5,3&isShare=true
• Developer activity graph: https://osgraph.com/result?shareId=4&shareParams=18818196,10&isShare=true
• Developer partners graph: https://osgraph.com/result?shareId=5&shareParams=18818196,10&isShare=true
• Developer interests graph: https://osgraph.com/result?shareId=6&shareParams=18818196,5,3&isShare=true

In the future, the sharing URL of OSGraph will update to something like https://osgraph.com/github/microsoft/vscode/xxgraph then we can replace the URL with current repo name and developer login.

[wangyantong2000]

Is it possible for the style to look like this in the future

[frank-zsy]

@HalloMelon Could you provide the detailed title and description of the networks which will be used in this feature according to the information in https://github.com/TuGraph-family/OSGraph readme? We will need both Chinese and English version.

[HalloMelon]

Yeah, let me do it~

[wangyantong2000]

Currently, HyperCRX has 4 networks. In the future, will we embed all 6 networks from OSGraph into HyperCRX, or will we only embed 4 of them?

[HalloMelon]

English Version

• Project Contribution Network Description: Discover the core contributors of a project by analyzing various development activities such as Issues, Pull Requests (PRs), Commits, and Code Reviews (CRs). This network identifies the key individuals who significantly contribute to the project's progress and success. It provides insights into who is actively writing code, submitting fixes, reviewing others' work, and engaging with the project's repository.

• Project Ecosystem Network Description: Gain a comprehensive understanding of a project's ecosystem by examining the interconnections between different projects, organizations, and their development activities. This network reveals the core relationships within the ecosystem, highlighting the collaborative efforts and partnerships that drive the project's development and growth. It showcases how various projects and organizations interact, share resources, and contribute to the larger ecosystem.

• Project Community Network Description: Analyze the distribution and composition of a project's community based on development activities and organizational affiliations. This network identifies the core developer communities and provides insights into their geographical distribution, organizational participation, and overall community dynamics. It helps understand the project's reach, influence, and the key players involved in its development.

• Development Activity Network Description: Showcase the contributions of individual developers to various open-source projects by analyzing their development activities such as Issues, PRs, Commits, and CRs. This network highlights the core projects a developer is involved in, providing a detailed view of their participation and contributions. It offers insights into the developer's expertise, interests, and the projects they are passionate about.

• Open Source Partners Network Description: Identify and find open-source partners by examining the collaborative relationships between developers. This network reveals the developers who closely work together, share similar interests, and frequently collaborate on open-source projects. It helps discover potential partners, expand one's network, and build stronger collaborative relationships within the open-source community.

• Open Source Interests Network Description: Discover the interests and technical fields of individual developers by analyzing the themes, tags, and topics of the projects they participate in. The graph provides labels for technologies and related projects that developers are passionate about. And it highlights language-related projects of interest to developers, helping to understand their expertise and interests

中文介绍

• 项目贡献图谱 描述: 通过分析各种开发活动（如Issue、Pull Request、Commit和Code Review），发现项目的核心贡献者。该图谱识别出对项目进展和成功做出显著贡献的关键个人，并且提供了关于谁在积极编写代码、提交修复、审查他人工作和参与项目库的相关信息。

• 项目生态图谱 描述: 通过审查不同项目、组织及其开发活动之间的相互联系，全面了解项目的生态系统。该图谱揭示了生态系统内的核心关系，突出了驱动项目开发和增长的协作努力和合作伙伴关系。同时，也展示了各种项目和组织如何互动、共享资源，并为更大的生态系统做出贡献。

• 项目社区图谱 描述: 基于开发活动和组织归属，分析项目社区的分布和组成。该图谱识别出核心开发者社区，并提供他们的地理分布、组织参与和总体社区动态的见解。这有助于我们了解项目的覆盖范围、影响力以及参与其开发的关键角色。

• 开发活动图谱 描述: 通过分析开发者在各种开源项目中的开发活动（如Issue、Pull Request、Commit和Code Review），展示个人的开源贡献。该图谱突出了开发者参与的核心项目，详细展示了他们的参与和贡献情况。提供了关于开发者的专业知识、兴趣和他们热衷的项目的详细信息。

• 开源伙伴图谱 描述: 通过审查开发者之间的合作关系，识别并寻找开源伙伴。该图谱揭示了密切合作、兴趣相似并频繁在开源项目中协作的开发者。这有助于使用者发现潜在的合作伙伴，扩展网络，并在开源社区内建立更强的合作关系。

• 开源兴趣图谱 描述: 通过分析开发者参与项目的主题、标签和话题，发现他们的兴趣和技术领域。该图谱提供了开发者所热衷的技术和相关项目的标签。它突出了开发者感兴趣的语言相关项目，有助于了解他们的专业知识和兴趣。

[frank-zsy]

I think we will embed all 6 networks in OSGraph if it is not too much trouble.

[wangyantong2000]

The last time OSGraph personnel raised the following questions:

1. Caves height issue
2. Refreshing the page graph will result in a scaling process
3. Click on the percetor, refresh, and the tab activates insights
4. The OSGraph link in the upper right corner of the graph only leads to the homepage and cannot directly reach the corresponding canvas of the project.
5. All repositories and accounts have these 6 graphs.

https://github.com/user-attachments/assets/9c77b2c3-ffa8-4950-9f65-f64e5d4f3ccd

https://github.com/user-attachments/assets/28601c07-6004-4cff-97c9-9c149364eac5

Several issues have been resolved at present. As shown above. And for questions 1 and 2, regarding height and refresh scaling, I think it is due to issues with the OSGraph webpage itself. As shown in the video below.

https://github.com/user-attachments/assets/8680db51-2556-4eb3-918f-e445bf52f815

[frank-zsy]

It looks really good already~