[OSPP] Task: Development of the Community OpenRank Leaderboard Page

[frank-zsy]

This issue will be used to track the OSPP task: Development of the Community OpenRank Leaderboard Page.

The Developer OpenRank Leaderboard involves design and development of an independent web page on OpenDigger website.

The page will be used to show the contribution and collaboration data in visualization form for all the repos exported by OpenDigger in monthly export task.

The data used in this page relies on this issue.

The page should be displayed with a granularity of months and should support switching between months. The design could draw inspiration from two implementations:

1. The Alibaba Open Source Contribution Leaderboard, which presents developers' contributions in each month in the form of a leaderboard.
2. The CodePen Demo of Community OpenRank, where the collaboration network within repositories for each month can be visualized. This network serves both as a visualization of collaboration and as the basis for OpenRank calculations.

So to implement this task, the developer should:

• Have a basic design of the page, includes options and visualization elements as well as layout.
• Collaborate with @frank-zsy to finish the data generation issue in OpenDigger main repo.
• Implementation of the web page.

[frank-zsy]

Developers who are interested in this task should also take a detailed look into the paper we published in ICSE 2024: https://www.researchgate.net/publication/376686121_OpenRank_Leaderboard_Motivating_Open_Source_Collaborations_Through_Social_Network_Evaluation_in_Alibaba .
This paper elaborates on the design details of the OpenRank algorithm in evaluating open source contributions, as well as our implementation practices at Alibaba. Understanding the OpenRank algorithm through this paper will greatly aid you in subsequent design and implementation tasks.

[Neilblaze]

@frank-zsy I'm on it! Will drop comments on Slack as I make progress on this. Thanks!

[frank-zsy]

@Neilblaze There are 2 OSPP tasks available. In your issue #7 I think you are interested in the documentation improvement task. However since you are familiar with React and Docusaurus, you can pick up this task too, but you can not apply these 2 tasks in the same time~

[Neilblaze]

@frank-zsy Oh I see, thanks for the heads up. I'll do one thing, since there are two OSPP tasks, I'll try to stay inclined towards #7 as of now, and if I see that the issue is still up for grabs (i.e. if no one picks it up) say after a few weeks, then I'll ask you if I can take it up and contribute to both (if required)

[frank-zsy]

@Neilblaze For documentation improvement task, you can start with #11

[Neilblaze]

Gotcha, I'm on it!

[Bruce-Jay]

I'll do this task.

[frank-zsy]

@Bruce-Jay Here are first edition design of the page, I think you can start to work on the basic logic of the page now.

The basic layout is just like this and the logic you can find in https://codepen.io/frank-zsy/pen/abjMXBV .

• Users can choose a platform (GitHub/Gitee) and input a repo name to get the data.
• Once the data is retrieved, we can know which months are valid to show.
• By default we can show the latest month data. There will be date picker in the leaderboard to change the month to show.
• The leaderboard in the left part is the OpenRank of all the developers active in this repo for the month.
• If a specific month is chosen, the collaboration network will be shown.
• If a specific node is chosen in the network, the details table should show the OpenRank detail of the node.

If you have any question about the page, feel free to ask.

[Bruce-Jay]

Codepen 里面的 Details 部分似乎显示不出来，可能是数据方面的问题还是处理方法的问题呢，我开发的时候好像一直都没有这些数据显示的

[frank-zsy]

Detail 表格是某个具体节点的详情数据，需要双击某个节点时才会显示被点击节点的详情数据，并不会自动展示。

[Bruce-Jay]

好，我试下

[Bruce-Jay]

开发时如果遇到一个数据量比较大的仓库，比如odoo/odoo的时候，不仅加载比较慢，而且生成的图也会非常密集，可读性比较差。像这种情况可以怎么优化呢？我对ECharts的协作网络图不太熟悉。

[frank-zsy]

这里可以设计一下过滤规则，数据的话还是全量加载，但渲染时可以设置例如最多渲染 100 个节点，则按照 OpenRank 排序后截断前 100 个节点，此时需要注意边的置入也需要做相应的筛选，以防止渲染异常。

如果是更符合产品设计的话，可能可以加一个显示节点数量的拖动条，默认最多到 100，在拖动时可以随时更改渲染数量。