[OSS101] Task 4: Circle of contributors

[tyn1998]

Description

What is the Circle of Contributors?

Contributors generally refer to project contributors, and Circle of contributors can be understood as the circle of contributors. If you have installed Hypercrx , you can click the Preceptor button on a GitHub project and see the Active Developer Collaboration Network at the bottom, as shown in the image below.

Task Objectives

Develop a new Contributor Circle Chart based on network graph data. The data for the network graph can be obtained from opendigger. A sample diagram is shown below. Replace the avatar area under the contributors section on the repository homepage with the Contributor Circle Chart. Additionally, provide a button that allows users to switch back to the default avatar display.

任务描述

Circle of contributors是什么？

contributors一般指的是项目的贡献者，Circle of contributors可以理解为贡献者圈子。如果你安装了Hypercrx，你可以点击 github 项目上的 Preceptor 按钮，在最下方看到 Active Developer Collaboration Network，如下图所示。

任务目标

基于网络图的数据开发一个新的 Contributor Circle Chart，网络图的数据可以从 [opendigger](X-lab2017/open-digger: Open source analysis tools (github.com)) 获取。示意图如下图所示。将 Contributor Circle Chart 覆盖原先仓库主页中 contributors 下的头像区域。并提供按钮能够让用户切换回原本默认的头像显示。

[Jankeeeeee]

你好，我们找到了Hypercrx源码中关于 Active Developer Collaboration Network的代码，但是不清楚“原先仓库主页中 contributors 下的头像区域”该如何覆盖？请问能否作进一步指导？

[wangyantong2000]

你好，我们找到了Hypercrx源码中关于 Active Developer Collaboration Network的代码，但是不清楚“原先仓库主页中 contributors 下的头像区域”该如何覆盖？请问能否作进一步指导？

Perhaps the examples in this tutorial will help you. https://github.com/hypertrons/hypertrons-crx/wiki/Tutorial:-Adding-a-feature-to-HyperCRX
Firstly, you need to locate the position of the element to be replaced.Like this.

Then you can imitate the code in the example in the link for replacement.

  const container = $('<div></div>');
  const origin = `.list-style-none.d-flex`
  const $elements = $(origin);
  render(
      <View />, 
      container[0]
    );
  $elements.replaceWith(container); 
  };

The effect is as follows.

[MrH233]

助教好，我们参考教程，在features中制作了contributor_button组件，参考developer_networks的view-index形式，利用dom树的class/id索引定位替换，构造了如下的index.tsx文件，同时也在feature的index中绑定了组件。但是在yarn run start和重新加载后，好像没有看到网络图的替换。请教助教😁😁

import React, { useState, useEffect } from 'react';
import { render } from 'react-dom';
import $ from 'jquery';
import View from './view';
import { getDeveloperName } from '../../../../helpers/get-developer-info';
import {getDeveloperNetwork, getRepoNetwork} from "../../../../api/developer";
import features from '../../../../feature-manager';
import * as pageDetect from 'github-url-detection';
import elementReady from "element-ready";
let developerName: string;
let developerNetworks: any;
let repoNetworks: any;

const featureId = features.getFeatureID(import.meta.url);

const getData = async () => {
  developerNetworks = await getDeveloperNetwork(developerName);
  repoNetworks = await getRepoNetwork(developerName);
};

const replaceContributorList = () => {
  const container = $('<div></div>');
  const originSelector = '.list-style-none .d-flex'; // 选择器定位贡献者列表
  const $elements = $(originSelector);

  // 渲染ContributorView组件到container
  render(<View currentRepo={developerName} developerNetwork={developerNetworks} repoNetwork={repoNetworks}/>, container[0]);

  // 使用新的容器替换原有的贡献者列表
  $elements.replaceWith(container);
};

const init = async (): Promise<void> => {
  developerName = getDeveloperName();
  await getData();
  // const container = document.createElement('div');
  // container.id = featureId;
  replaceContributorList();
};

const restore = async () => {
  // Clicking another repo link in one repo will trigger a turbo:visit,
  // so in a restoration visit we should be careful of the current repo.
  if (developerName !== getDeveloperName()) {
    developerName = getDeveloperName();
    await getData();
  }
  // elements of ReactModal are appended to the body each time `renderTo` is called,
  // if we don't clean up the old elements, there will be many useless tags.
  $('div.ReactModalPortal').remove();
  // rerender the chart or it will be empty
  replaceContributorList();
};

// // 调用函数以执行替换操作
// replaceContributorList();

features.add(featureId, {
  asLongAs: [pageDetect.isUserProfile],
  awaitDomReady: false,
    init,
  restore,
})

[wangyantong2000]

助教好，我们参考教程，在features中制作了contributor_button组件，参考developer_networks的view-index形式，利用dom树的class/id索引定位替换，构造了如下的index.tsx文件，同时也在feature的index中绑定了组件。但是在yarn run start和重新加载后，好像没有看到网络图的替换。请教助教😁😁

import React, { useState, useEffect } from 'react';
import { render } from 'react-dom';
import $ from 'jquery';
import View from './view';
import { getDeveloperName } from '../../../../helpers/get-developer-info';
import {getDeveloperNetwork, getRepoNetwork} from "../../../../api/developer";
import features from '../../../../feature-manager';
import * as pageDetect from 'github-url-detection';
import elementReady from "element-ready";
let developerName: string;
let developerNetworks: any;
let repoNetworks: any;

const featureId = features.getFeatureID(import.meta.url);

const getData = async () => {
  developerNetworks = await getDeveloperNetwork(developerName);
  repoNetworks = await getRepoNetwork(developerName);
};

const replaceContributorList = () => {
  const container = $('<div></div>');
  const originSelector = '.list-style-none .d-flex'; // 选择器定位贡献者列表
  const $elements = $(originSelector);

  // 渲染ContributorView组件到container
  render(<View currentRepo={developerName} developerNetwork={developerNetworks} repoNetwork={repoNetworks}/>, container[0]);

  // 使用新的容器替换原有的贡献者列表
  $elements.replaceWith(container);
};

const init = async (): Promise<void> => {
  developerName = getDeveloperName();
  await getData();
  // const container = document.createElement('div');
  // container.id = featureId;
  replaceContributorList();
};

const restore = async () => {
  // Clicking another repo link in one repo will trigger a turbo:visit,
  // so in a restoration visit we should be careful of the current repo.
  if (developerName !== getDeveloperName()) {
    developerName = getDeveloperName();
    await getData();
  }
  // elements of ReactModal are appended to the body each time `renderTo` is called,
  // if we don't clean up the old elements, there will be many useless tags.
  $('div.ReactModalPortal').remove();
  // rerender the chart or it will be empty
  replaceContributorList();
};

// // 调用函数以执行替换操作
// replaceContributorList();

features.add(featureId, {
  asLongAs: [pageDetect.isUserProfile],
  awaitDomReady: false,
    init,
  restore,
})

You need to remove the sentence asLongAs: [pageDetect. isUserProfile] from the code. The purpose of this sentence is to determine whether it is a personal profile page. Although it is mentioned in the tutorial, it is not applicable to this task and is not related to this task.

[MrH233]

助教好，我们组完成了本次808任务。仓库fork链接：https://github.com/MrH233/hypertrons-crx
本次开发增加了contributor组件，具体内容详见README_808.md和feature中的contributor_button组件

[Tenth-crew]

助教好，我们组完成了本次808任务。仓库fork链接：https://github.com/MrH233/hypertrons-crx 本次开发增加了contributor组件，具体内容详见README_808.md和feature中的contributor_button组件

After switching back, the contributors arrangement should be consistent with GitHub's native style. In addition, please submit your work in the form of PR.

[MrH233]

Hello, we have adjusted the final code and upload a new feature issue, please check.