[Summer2022] Let's brainstorm tasks(projects) to be submitted!

[tyn1998]

So we have two levels of tasks this year (3 levels last year):

According to the difficulty of the project, the amount of project funding can be divided into 12000 RMB, and 8000 RMB

link: https://summer-ospp.ac.cn/help/en/

Guys let's put some ideas here!

[tyn1998]

My ideas:

• DynamicBar implemented with Echarts (hard level)
• More compact layout for Perceptor Tab (basic level)
• Features requested in Issues...

Any new chart feature heavily relys on data provided by open-digger. Will open-digger community takes part in Summer 2022? Maybe we can have some connects! @frank-zsy

[zhuxiangning]

I think the new developers are also users.

After we define the data structure and the general community goals of hypercrx, can we expect users to come up with their own requirements and implement it themselves?

We welcome any possible ideas, but the final implementation needs to be determined through community discussion.

[wxharry]

My suggestion is to "re-furnish" hypercrx to make its style and layout to be more similar to Github's. For example, in PerceptorTab:

• The period select button
• The navigator on the left
• Header and context font style
• ...

[tyn1998]

中文

通用任务：中选者无论中选以下哪个项目，在Summer2022开始后需要每两周在指定issue中对自己的学习情况和项目进度做个简短的描述。

【难】任务一：两个图表组件

一、基于Echarts的动态滚榜图
功能点：

• 初始状态显示最后一帧
• 有播放按钮，可多次播放
• 如果可能的话，增加暂停/继续功能
• 可选择播放速度（最好能在播放中也能实时调整）
• GitHub用户头像需要与柱子放在一起
• 封装组件时支持传入参数改变显示的bar数、长宽等
• 调色盘中的颜色要尽量有区分度
• 支持light & dark

参考：series-bar.markPoint、bar-race-coumtry example、our old version
二、横幅滚动条
功能点：

• 就像电视里播报紧急情况时的滚动横幅（例子）
• 显示的内容从.github/hypertrons.json中读取
• 嵌入位置如图

• 鼠标悬停暂停滚动
• 滚动内容中可以有链接
• 可以在插件options中将该功能关闭

【中】任务二：更好的Perceptor Tab布局与样式

目前，Perceptor Tab的布局与样式不够精致。例如，两个网络图以两个大卡片的形式放置于页面中，其中，对网络图的描述文字又占去了大量空间。

此任务希望中选者为Perceptor Tab设计一套全新的布局与样式并进行实现。使这套布局与样式不仅能处理已有的几个组件，还具有良好的扩展性，使未来新加入到Perceptor Tab中的组件也能很容易得摆放。

对于布局与样式的具体要求，hypercrx社区会在中选名单公布后与中选者沟通。

【中】任务三：建立一套“注入”机制

目前，当想在GitHub页面中注入新组件时，开发者需要自己分析GitHub页面结构，找到插入位置的DOM，然后利用jquery进行注入。也就是说，除了开发组件外，开发者还要做这种琐碎的分析GitHub页面结构的工作。

因此，希望能设计一套机制，使组件开发者不需要关注与GitHub页面结构相关的细节。当他们想插入一个组件到页面时，只需要调用一个譬如inject(locationName, yourComponent)的函数即可。需要注意的是，不仅要保证注入位置正确，还要观察注入点的样式属性，以确保被注入的组件能自然得摆放在页面中，即看上去就像是GitHub官方组件一样。

在完成这套“注入”机制的设计后，中选者需要重构hypercrx中已有的组件注入代码块。并且，中选者还需要适当探索更多潜在的注入点，供未来的组件使用。

[tyn1998]

Hi guys! I just post a draft for our project candidates (in Chinese). We have not been informed the number of projects we can submmit yet, so if there are only two or one we should merge some tasks or just dismiss them.

Please give your advice.

[wxharry]

Is the difficulty for each task decided? ospp suggests that

• Advanced Level：
• The advanced level is to optimize the class work, improve the time, reduce the memory occupation, provide performance and so on.
• Normal Level：
• Functional tasks, such as adding one or several important features to the community open source project, etc.

Based on the description only, it seems like task 1 could be Normal level and task 2 could be Advanced level.

Also, it could be better if we could add the estimated time for each task latter on just like GsoC is doing this year to show a better workload measurement for both the mentors and the students.

[tyn1998]

No, the post is a propose. There are 6 days left to us to decide which tasks should be submitted.

I do notice the different requirements between the two levels and agree that task 1 might not meet the requirement of the hard level. However, task 2 is not an advanced level project, neither, in my opinion. To the contray, I think it is possibly the easiest one here, because it requires less understanding of the whole system of hypercrx compared with the other two.

Adding estimated time is a great idea and we will try our best to provide it.

Thanks for your advice!

[tyn1998]

Hey Harry, I walked through several organizations on GSoC and found they just simply give two sizes of expected time for tasks, which are 350h for hard and 175h for medium. So no one-size-fits-all. But OSPP does not set different deadlines for diffrent levels of projects as GSoC does this year, so I wonder the time expectation may not be needed.

Refs:

• https://wiki.linuxfoundation.org/gsoc/google-summer-code-2022
• https://joplinapp.org/gsoc2022/ideas/
• https://github.com/homebrew/gsoc#2022-ideas
• ...

[wxharry]

Yes. You are right. GSoC does have different deadlines this time.

As for the advice, I made a mistake

Based on the description only, it seems like task 1 could be Normal level and task 2 could be Advanced level.
For "task 2", actually l meant "task 3". Since task 3 is about building a new injecting method and may involve code refactoring to some extent, it could be challenging.

[tyn1998]

We can publish 2 projects:

[TieWay59]

Are they published or still in progress?

[tyn1998]

in progress.

[tyn1998]

项目1

项目名称：实现两个React组件并注入到GitHub页面中

项目主导师：朱香宁

项目描述：
Hypercrx有两大职能，其一是作为Hypertrons的前端，其二是可视化X-lab开放实验室提供的基于GitHub全域日志分析得到的数据。此项目同时涉及到这两个职能。
任务1。Hypercrx在Repo页面运行时会尝试获取该Repo的.github/hypertrons.json中的部分信息，从而调整相关配置。现在我们希望实现一个功能：当Repo维护者在hypertrons.json中添加一个名为“repo_banner_text”的键值对后，安装了Hypercrx的用户就能在Repo页面看到一个横幅，横幅中滚动播放着“repo_banner_text”中的文字。
任务2。我们曾经基于Anichart.js实现了动态柱状图（见#221），用于展示项目贡献者的活跃度变化情况。但在实际应用中，我们发现Anichart.js存在诸多缺陷，并且数据来源也存在不足之处，所以我们暂时下架了该功能。经过调研，我们认为Echarts具备实现动态柱状图的能力，希望你能利用Echarts使动态柱状图重出江湖。
任务3。该任务与项目2有关联。我们希望在项目2的中选者完成“AVC机制”的设计后，你能用此机制将两个React组件注入到GitHub页面中。在此之前，你可以模仿现有的旧方式将组件注入到页面中预览效果。
3个任务的具体要求之后会在相应的issue中给出。另外，当Summer2022开发阶段开始后，为了更好地了解中选者的项目进度，我们希望你能在指定issue中，以每两周一次的频率更新你的进展。
最后，欢迎前往项目仓库的Discussions栏与我们交流！

项目备注：（无）

难度：进阶

涉及技术领域标签：React,Chrome Extension

编程语言标签：HTML,CSS,JavaScript,TypeScript

项目产出要求：

• 设计并实现React组件ScrollingBannerText
• 设计并实现React组件DynamicBar
• 遵循“AVC机制”将两个组件注入到GitHub页面中

项目技术要求：

• 了解Chrome Extension的开发方式
• 了解Hypercrx的工作机制
• 熟悉HTML、CSS、JavaScript、TypeScript
• 熟悉Echarts
• 熟悉Git和GitHub

项目成果仓库：
https://github.com/hypertrons/hypertrons-crx

项目2

项目名称：设计AVC机制并用此机制重构已有文件结构和代码

项目主导师：唐烨男

项目描述：
目前，开发者若想让Hypercrx在GitHub页面中一个新的位置上添加一个新图表，Ta需要：实现图表组件，在视图中引入图表组件，分析GitHub页面的DOM结构后在锚点处注入视图。观察已有的文件和代码，发现这3步常常杂糅在一起，欠缺一致性，这对后续的维护和开发都是不友好的。因此，我们希望你能设计一套机制来解决这个问题，并在机制设计完成后，利用该机制重构已有文件结构和代码。
任务1。设计“锚点-视图-组件”机制（Anchor-View-Component机制），使图表组件的开发和维护更加友好。
任务2。根据设计好的AVC机制，重构已有文件和代码。
2个任务的具体要求之后会在相应的issue中给出。另外，当Summer2022开发阶段开始后，为了更好地了解中选者的项目进度，我们希望你能在指定issue中，以每两周一次的频率更新你的进展。
最后，欢迎前往项目仓库的Discussions栏与我们交流！

项目备注：（无）

难度：进阶

涉及技术领域标签：React,Chrome Extension

编程语言标签：HTML,CSS,JavaScript,TypeScript

项目产出要求：

• AVC机制及相应文档（以仓库Wiki的形式）
• 用AVC机制重构已有文件结构和代码

项目技术要求：

• 了解Chrome Extension的开发方式
• 熟悉Hypercrx的工作机制
• 熟悉TypeScript
• 熟悉Git和GitHub

项目成果仓库：
https://github.com/hypertrons/hypertrons-crx

[tyn1998]

Guys, I redesigned the two projects and here are their chinese versions. English versions are on the way. Please feel free to give any advice!

[tyn1998]

Project 1

Project Name: Implementation and Injection of Two React Components

Project Mentor: 朱香宁

Project Description:
There are two main functions that Hypercrx offers. One is as a front-end of Hypertrons and the other is to visualize datas generated from analysed GitHub logs provided by X-lab. This project has something to do with both the functions.
Task 1. When running on GitHub repo pages, Hypercrx will try to fetch the file .github/hypertrons.json of that repo and then put part of info of the file as one of the configuration sources. Now we want a feature: if maintainers of one repo put a pair of key-value named as "repo_banner_text" into hypertrons.json, then users of Hypercrx can see a horizontal banner with text smoothly and infinitely scrolling on that repo page.
Taks 2. Based on Anichart.js, we ever implemented DynamicBar(see #221) to present changes of contributors' activity value of a given repo. However, in practice, we found Anichart.js just had too many shortcomings and failed to earn our confidence. In the same time, the data source of contributors' activity value also had some problems so we finally removed the DynamicBar from our charts list, badly. Recently, through examination of Echarts, we think it is equipped with the power to implement the DynamicBar that we want! So, we hope you can help us bring the DynamicBar back, will you?
Task 3. This task has connection with Project 2. In short, we ask you, after the AVC strategy being worked out by the chosen guy for Project 2, to inject the two components into the pages of GitHub, using the AVC way. Before that guy's success, you may try the old way to inject components as we did to check and adjust your developing components.
Details of the 3 taks will be put on corresponding issues later. There is another thing, which is, we courage you to document any of your progress every two weeks in specified issues, once the development phase of Summer 2022 starts.
At last, if you are interested, just go straight to the Discussions Tab of our repo and keep touch with us!

Project Notes: (None)

Difficulty: Advanced

Labels of Technical Fields: React,Chrome Extension

Labels of Programming Language: HTML,CSS,JavaScript,TypeScript

Project Output Requirements:

• Design and implement the ScrollingBannerText React component
• Design and implement the DynamicBar React component
• Inject the two components into GitHub in the AVC way

Project Technical Requirements:

• Know how Chrome extension works
• Know how Hypercrx works
• Familiar with HTML, CSS, JavaScript and TypeScript
• Familiar with Echarts
• Familiar with Git and GitHub

Project Repository:
https://github.com/hypertrons/hypertrons-crx

[tyn1998]

Project 2

Project Name: Design AVC Strategy and Refactor Code in AVC way

Project Mentor: 唐烨男

Project Description:
Implement a chart component, and introduce the component into a view, then inject the view at the point which you successfully anchored to after analysing DOM structures of pages of GitHub. That are steps you should follow if you want to develop a brand new chart component and inject it into a never touched place on pages of GitHub. However, after observing files and code of Hypercrx, we find these 3 steps are often mixed up, leading to inconsistence of code structures and file arrangements for different charts, and that will confuse both maintainers and developers in the future. Hence, we hope you can work out a strategy to solve the problem and once you have successfully done the designing work, you are asked to employ the strategy to carry out the code refactoring work.
Task 1. Design "Anchor-View-Component" strategy.
Task 2. Rearrange the files and refactor the code in the AVC way.
Details of the 2 taks will be put on corresponding issues later. There is another thing, which is, we courage you to document any of your progress every two weeks in specified issues, once the development phase of Summer 2022 starts.
At last, if you are interested, just go straight to the Discussions Tab of our repo and keep touch with us!

Project Notes: (None)

Difficulty: Advanced

Labels of Technical Fields: React,Chrome Extension

Labels of Programming Language: HTML,CSS,JavaScript,TypeScript

Project Output Requirements:

• The AVC strategy and relating documents(in form of repo Wiki pages)
• Rearrange the files and refactor the code in the AVC way

Project Technical Requirements:

• Know how Chrome extension works
• Familiar with how Hypercrx works
• Familiar with TypeScript
• Familiar with Git and GitHub

Project Repository:
https://github.com/hypertrons/hypertrons-crx

[tyn1998]

[tyn1998]

We can edit them before 10th, May.

[tyn1998]

Published！
中文：

English：