GSoC 2015 : Journal

This is where I will keep a journal of my progress on the project. The coding period has officially begun, and it is time for my first entry here, that is the progress that I have made in the Community Bonding Period. From now on, I'll be updating this post every week!

The Project

My project focus around extending the HPCC Systems Visualization Framework. I will be contributing in forms of bug fixes, and helping in creating a few new widgets. A brief description of my project can be found here.

Community Bonding Period

My initial experience with HPCC Systems has been really awesome, and the community has been great! In the initial weeks of the Community Bonding Period, we figured out a few logistics, and due to my End Semester Exams, we had to shift getting started by a few days.

Once I got done with my exams, I started working on the project with my mentor. The project is pretty interesting, and when I joined in, the release of v1.0 was just round the corner, so there was a lot for me to learn. I had some prior experience with d3.js and HTML5 Canvas, but this project was bigger and more interesting than any other project that I have taken in the past. This is an Open Source framework, and to contribute you can visit here.

My initial days were spent trying to understand the codebase. There was a lot to learn, and getting upto speed, was the top priority. I learnt a few things about RequireJS, JavaScript OOP, some specific Design Patterns and some other things that would be required in the project. Gordon helped me a lot in the process. His help is absolutely indispensable. I was intially assigned a task to add a JavaScript Linter to the project, so amongst the various options available, I found JSHint to be a good fit for us, because it was more extensible and easily customizable than other options like JSLint etc.

I tried playing with it initially, and once Gordon set the standard rules for the project, it was added. I had a very small role in this, but it gave a good opportunity to check out the codebase, and analyze the existing code at a very superficial level.

I then moved on to more hands-on bug, within the project. I was suggested to work on two goals simultaneously by my mentor, a small bug fix (that typically takes a day or two) and a more serious long term goal! My first long term goal was decided to be the addition of Gantt Charts. It is a tough project, and I would require some solid experience and understanding before I can start materializing it.

To get up to speed, and gather enough understanding, I worked on a few bugs, which can be found here.

My first bug was Adding a formal click event to the icon widget, the corresponding Pull Request can be found here. I also worked on Adding playing/looping functionality to the Slider widget. The corresponding PR can be found here. For implementation, I started with the Slider bug, and started to learn how RequireJS was being used to load scripts, the OOP JS Patterns used, and what different components did in the project. Understanding of a few core concepts like Functions v/s Methods was also a great experience.

I also learnt a few other things, like writing commit messages to a guide, squashing multiple commits into one, performing multiple git rebases and following code guidelines set for the project, and how they offered advantage in maintaining the project. Overall, the community bonding period provided me with a lot of opportunity to learn.

Week 1

This week, I started working on the Table widget. My first task was to add the ability to sort the data in the table widget, to sort based on the selected column. This allowed me to play with the data attribute of the widgets. The corresponding PR can be found here. It was a fun way to get started. It was really interesting to add the visual clue, that denotes the sorting order, by using FontAwesome icons. Overall, this was a good experience, and it always feels nice when your code is merged :)

My second task was to add multiple select to the table data. More datails about this can be found here. It was a good experience and it helped me learn the Selection Bag widget. I was able to complete it this week, the corresponding PR can be found here.

Week 2

This week, I tried moving one step closer to my major goal, of creating the Gantt Chart . The biggest challenge I faced was rendering the charts in an horizontal manner. It dealt with creating a Bar chart from the already existing Column Charts. It was a fun learning experience, and it taught me quite a few things, that will be really helpful in generating the Gantt Chart. The corresponding PR can be found here.
The second thing I am working on, is to refactor the code from the above Pull Request to rename X and Y variable names (because it doesn't make sense to call them X and Y anymore) to Data and Column. The corresponding Pull request is here.

Week 3

This has been a tough week. My first task included fixing margins on the Slider Widget. This taught me the use of BBox with d3 widgets, and helped me in understanding how programmatically, the margins are handled, including some very tricky edge cases. The first part of the week was spending on fixing the Horizontal Padding, and the next part was spent on fixing the Vertical Padding. The final changes were merged into master.

The second bug that I started working on, was Adding support for Axis datatypes, but I have since then moved on to work on creating a Scatter chart from raw d3 widgets. More details can be found here.

Week 4

This week, I created my first widget from Scratch. The Scatter chart required me to work through multiple data, and I learnt a lot in the process. I derived the widget from XYAxis, SVGWidget and testData methods. I learnt how the small components work together, and how an n dimensional data, can be managed with the Scatter Chart. I also learnt a bit of drawing by making use of crosses to represent data on the chart. This exercise, gave me a good understanding of the Enter, Update and Exit method. The most important thing that I learnt while accomplishing the Scatter chart was, how reducing the update method calls can be used to optimize the widget.
The PR can be found here.

Week 5

This week, I added the step 4 to the Tutorial, extending it from what Gordon had built. The Tutorial series is aimed at providing a learning experience as to How to convert any normal HTMLWidget into the Visualization framework widget. It can be used as a good resource to get a beginner to familiarize with the framework. This was a good exercise for me to learn some basics of the framework, familiarizing with the design patterns used inside the framework and demystified what was happening inside a few functions of the Visualization framework, giving me some knowledge of the black-box. The work can be found here.

My second task this week was to add support for N-Dimensional Data to the Column Chart. This was a good experience, of merging parts from INDChart, using some design style from Scatter, and extending the widget to include ND data. The PR can be found here.

Week 6

This week, after some minor tweaking and additions, I got the N Dimensional Data for the Column Chart merged. The new PR can be found here. I am following it up, with addition of range to the Column Chart. The column chart will be able to support range of data. This is directly important for the Gantt Chart, because almost all the data in the Gantt Chart will be ranged. The PR can be found here.

Mid Term Evaluations

This week also marked the submission of my Mid Term Evaluations. The mid term evaluations consisted of a few questions regarding the program, and the work, that had to be submitted on the Melange site. I am very grateful to receive a passing grade, and will resume working on the project, trying to accomplish my main goal, The Gantt Chart.

Week 7

This week, I received my Mid Term Evaluation results, and the second round of Payment. I am continuing this week, to understand some scale operations, by adding pow, log and time on the Y Axis Scale. The work for Pow and Log was separated in a different PR from time, because it was dissimilar in nature, and adding the time scale required a different approach. The work can be found here, and a re-based PR, with removed merge conflicts, can be found here.

Week 8

This week I am travelling to return to my university. I will be having classes with regular GSoC work from next week. I will be starting with the Gantt Chart this week. I am working off of the branch gantt, which can be found here. This week, Gordon is also leaving for holidays, so I will be working on it on my own, with help from Matt and Jaman on Gitter. This is my main task, for my End Term Evaluation for GSoC 2015. I am looking to get this done in this month, so that I can work on polishing, and a few more bug fixes in August, so that there is no rush, when the deadline draws closer towards end of August.

Week 9

This week, I have been working on resolving the parsing issue I am facing with the dates on the Gantt chart. The time scale returns null if a perfect match is not encountered, and unfortunately, I have been trying to get it to work with the timezone offsets (GMT + X.XX). After, an initial hiccup, I am able to parse dates now, and get the dates to be parsed correctly. Since now I have the data, I am a step closer to getting the Gantt chart to work.

Week 10 and Week 11

This week, I have restructured my Gantt chart to work with format of dates, that are supported by the framework already.
Gordon is back from the the summer break, and after his return, I have been able to fix a lot of existing problems in my implementation of the Gantt chart. I can get a working representation of the Gantt chart. I now need to define the borders, and ends more properly, to get a usable and meaningful Gantt chart. Two approaches included adding multiple data elements, each representing one task, or adding one task, with new columns. Taking the second column makes more sense because a similar solution is used in testDataOrdinalRange. The null values are not accepted for Dates as of now, and I have opened an issue and a fix has been merged in.

This week, I am also doing a research for adding test suite to the framework, as my last project for Google Summer of Code 2015. We considered a lot of options like Karma, Intern and Mocha, but our final decision will be based on a few things :

It should work with Travis CI.

It should work with gulp or npm.

Fairly easy and obvious to use.

Easily extensible.

Should work with PhantomJS.

We have for now, settled on using Mocha, along with the package gulp-mocha-phantomjs.

Week 12

So finally, after agreeing on Mocha and PhantomJS I have started working on adding tests for the work that I covered during the Google Summer of Code period. I started writing tests by setting up our infrastructure to become unit-test compatible. The first step was configuring it to run with Travis, by including the desired changes in the Gulpfile. The PR can be found here. Along with unit tests, we also now have some strong code validation setup on the project. It can be found here.

My biggest change came in form of a lint fix, where fixing the inconsistency of quote-marks in the project was my first task. I used a lot of regular expressions, and bash search options to achieve this. The overall changes were massive, and across almost all the source files in the project. This PR can be found here.

Once we had the infrastructure in place, we moved on to writing individual tests for the widgets. A few of the initial common tests that check very basic functionalities of any widget were included here.

Pen-down and Wrapping Up

Google Summer of Code 2015 is almost over! This is our last week before which our final evaluation starts. I am wrapping up by writing additional Anmol Tests for some of the functionalities that I added during my GSoC period. It was a fun filled summer, and I learnt a lot of things working on the Visualization Framework. My mentor Gordon, and our organization admin Lorraine have been very helpful throughout the process, and it was a great experience to be a student at HPCC Systems.