Hacktoberfest: Week 2
Introduction
This week I worked on my second issue for Hacktoberfest! Last week I worked on redditdota/subredditcss (and was a bit late with posting my blog for it..), and this week I was ready to keep moving forward with contributing and learning.
As I continued on my journey to earn a free t-shirt, I ended up once again on working with something related to my favourite game: Dota. This week I worked on OpenDota, an open-source, React-based web app providing detailed profile and match stats for players. For example, here is my profile. This project takes a huge amount of pride in being a open source, evidenced by the “Open” in the name. On their homepage the user is also greeted with the text “ Open source Dota 2 data platform,” and their GitHub link is displayed in their footer on every page within the site. They also promoted Hacktoberfest in their release notes.
Their homepage also lists all of their sponsors, one of which includes OpenAI, founded by Elon Musk. OpenAI has also created an AI bot to play the game, which they hope can stand against and defeat professional teams (not yet however).
OpenDota
OpenDota operates under odota on Github, and have 2 big projects they offer:
1. core: an API that other developers can use to make their own tools.
2. web: a React web app that uses their API to offer profile and match statistics for players.
Their core API also uses a replay parser, that downloads and parses replay files of games. It then presents that parsed info in the API. This offers much more detailed information than what is provided by Valve’s API.
The Issue
The issue I ended up working on was one that I actually encountered myself during my normal usage of this site. So when it came time to find my second issue to work on, I decided to report this issue and ask to work on it.
One of the many features that this site provides is graphs that show data throughout the match (example). They plot out values for each player such as gold and XP. Mousing over the graphs provides a tooltip showing the exact value.
The issue itself: the tooltips should be sorted by value, but were not being sorted at all.
As seen above, the ordering of elements in the tooltip stayed the same for the entire graph. They were shown in the default order (blue = player 1, teal = player 2, etc) for the entire game.
Initially I reported the issue in core, which I later realized was wrong, and realized it should be filed under web. I joined their Discord and told them it should be closed. I then filed my issue correctly under web, and asked to have it assigned to me.
Getting Started
As I began to get ready, I realized that even building the project was going to be an issue. I was getting an install error in npm, and had to do some searching on Google. I found the solution, and after clearing npm cache I was able to build the project successfully!
Next: I had to find out where in the code the issue was located. This ended up being easier than I expected. I used GitHub’s file finder and searched for graph and it was narrowed down to about 15 files. A few were image assets and I was able to ignore those. There were also some files with names like StackedBarGraph.jsx and HistogramGraph.jsx which were obviously not what I needed. After looking through the remaining few files I was able to narrow it down to MatchGraph.jsx and Styled.jsx.
Opening these files up in my editor, I skimmed through them both. I was able to figure out some important things:
1. MatchGraph.jsx: contained code for the entire Graphs page of a match (a Controller).
2. Styled.jsx: described visual components, including tooltip popups, used in graphs (a View).
I began playing around with the code by changing values and refreshing the webpage. Stuff like increasing px count for borders and other things in the View. As I did this I noticed stuff changing on the webpage, so I knew I was on the right track. I then started changing values in the Controller, such as where to draw colour values from — colours are not bound to the View because colours are tied to players, so the Controller calls them so it is able to bind them to the correct player. This also affected the part of the page my bug was on: the tooltip values. At this point I knew my bug was in this area of the code.
In this block that I had been tinkering with, I saw a sort(...) method on line 43. It read.sort((a, b) => a.props.value < b.props.value)
I looked through older commits in this file and found that the props was only recently added. I decided to undo that, but it didn’t affect anything.
Now I was feeling a bit lost. I didn’t know what else the issue could be caused by if changing the sort method’s parameters did nothing.
I decided to search up react sort props on Google in hopes of finding an answer. Most of the solutions offered had very different syntax. Since I knew React was a JavaScript library, and that I was working with JavaScript here, I decided to search javascript sort instead. I found the w3schools page for JavaScript’s sort method, which also offered a way to sort in a descending order: points.sort(function(a, b){return b-a});
I decided to use this logic in my code. It ended up working! It was a strange feeling to know that I had spent all this time researching a solution to find out it was only 1 line of code that needed to be changed, and I wasn’t sure how to feel.
I ran tests and they all passed, so I submitted my pull request. I received a comment from the project’s co-founder saying he couldn’t recreate the issue. My experience from working as QA during my summer co-op kicked in, and my first thought was “is it because of the browser?” I had been running exclusively Chrome up to this point. I opened the site on Firefox and tried hovering over graphs, and the issue was not occurring. I then replied to his comment saying I can only recreate the issue on Chrome, and that Firefox seems fine, and a few minutes later my pull request was approved and merged! I found this a bit funny that the project maintainers had perhaps forgot to test across different browsers, and might not have even noticed it until this point.
Conclusion
After solving this issue I felt very proud. Not only did I contribute to a project I cared about, I was able to tackle an issue that I had almost no knowledge of going in, and was able to solve it without giving up. I had never worked with React before, and was scared that I would not be able to understand anything. In actuality it was mostly similar to JavaScript and I could follow along pretty well. I also think I did a good job of quickly finding the issue in the codebase and isolating the part of code where the issue was located.
Also, as a nice bonus, the developers recently added a feature where any contributor can add their user ID to a json file in the project, which will give them a special contributor badge on the OpenDota site, so that’s nice.
Next week I will continue on my Hacktoberfest journey as I have 3 more pull requests to make this month. Until next time.