Page MenuHomePhabricator

GSoC Proposal 2018 : [Analytics] Improvements to Wikistats2 front-end
Closed, ResolvedPublic0 Estimated Story Points

Description

Profile Information

Name : Sahil Khokhar
Email : sahilkhokhar505@gmail.com
Web Profile : http://sahilkhokhar.com/
Github Handle : sahil505
MediaWiki User Page : sahil505
Medium : sahilkhokhar505
IRC nick : sahil505
Location : New Delhi, India (UTC +5:30)
Typical working hours : 12:00 PM to 07:00 PM & 09:00 PM to 03:00 AM (UTC +5:30)


Synopsis

Wikistats is the public statistics website of the Wikimedia Foundation. Its main purpose is to add context and motivate our editor community by providing a set of metrics through which users can see the impact of their contributions in the projects they are a part of. Wikistats 2.0 is a recently released website, developed by the WMF's Analytics team, that will replace Wikistats in the near future. Wikistats 2.0 is intended to:

  • Update the website's (Wikistats) interface.
  • Provide access to data in an analytics-friendly form.
  • Be easier to maintain and improve.

Wikistats 2.0 is currently in production but still in alpha stage. There are some improvements that need to be made in order to consider Wikistats 2.0 a full replacement of its predecessor (Wikistats). The objective of this GSoC project is to improve Wikistats 2.0 front-end, bringing it closer to a finalised product possibly Beta or RC 1.0. T189210 lists subtasks containing small improvements to be implemented. Some of these subtasks might change during the GSoC timeline but the main purpose and size of them will continue to be the same.

Mentor : @mforns


Benefits

  • This project will take Wikistats 2.0 close to a finished product (maybe RC 1.0) meant to replace its predecessor (Wikistats).
  • This project will make the frontend of Wikistats 2.0 more user friendly (aesthetically & functionally).
  • It will fix some of the minor and major bugs in the Wikistats 2.0 interface which includes some of the markup issues and UI features that misleads a user.
  • This project will add some new features to the interface of Wikistats 2.0 that can represent the information in a better way than the current Wikistats 2.0.

Subtask Breakdown

Few of the already listed subtasks and mostly all the new improvements (to be added) for this project will be completed following Object Oriented Analysis and Design principles, broadly in these four stages:

  • Analysis & Design
  • Implementation
  • Testing
  • Deployment

Testing stage can be carried out using Exploration testing as it leads to an optimized final unit/feature which is best for many frontend projects. Since this project only adds small features to various parts of Wikistats 2.0 software therefore testing methods such as Jasmine TDD or Sanity & Regression testing doesn’t make much sense. For features/sub-tasks (can be a newly added improvement) that involve data transformation, or complex functionality like the router unit tests can be written as in here.

Completion of every newly added improvement will be followed by its documentation which will contain the design mockups, explanation of the implementation approach & testing process.
Goal will be to keep an optimized balance between documentation/reports and actual feature implementation & testing, spending too much or too less time on any one can be unhealthy for the project.


New Improvements

These improvements are tentative and these might end up changing during the course of GSoC timeline.

  • Improve hover background focus color for ‘All wikis’ & ‘Explore Topics’ dropdown (or any other dropdown) and add a horizontal line separator between each dropdown value for ‘All wikis’ & ‘Explore Topics’. Currently, the pinkish background focus color adds a distinguishing touch to two values. Best would be to add a slightly dark grey background focus color and add a horizontal line separator. Example :
    Screen Shot 2018-03-29 at 12.02.02 PM.png (430×988 px, 64 KB)
  • Display a legend (with the Y axis value) on hover for bar graph in Contributing → New registered users/New pages (or any other bar graph in Wikistats 2.0). Example :
    Screen Shot 2018-03-27 at 11.50.27 AM.png (446×902 px, 42 KB)
  • Improve the solid filled colors in the bar graph. Give them a gradient color look to make them easy to look at. Current color choices blinds you out at times. Might have to think more on what to do if we increase the range which makes the graph more dense. For example refer the above image for gradient color.
  • Make position of the popup-legend dynamic (this has already been included in the subtasks, discussing the implementation here). For line charts as seen here, popup-legend can be made to follow the cursor with its position fixed on the top of the line chart. This implementation can be very effective and efficient in terms of space occupancy and ease of use to the user. Best example of this can be seen when you do a Google search of any Multinational Company’s stock prices, for example a screenshot of facebook inc attached:
    Screen Shot 2018-03-30 at 2.15.41 PM.png (888×1 px, 255 KB)
    Google’s implementation of this is very smooth and efficient, wish to achieve the same for Wikistats 2.0 line charts. Apart from hover popup-legend, a lot of other motivation can be taken from this example, one other being the positioning of the time range etc.
  • Add search, sort-by & show ‘x’ entries functionality to data tables, for example : the table implemented here can have a search input on top (to allow user to search for a particular country or any particular field value) and a dropdown to sort data from increasing to decreasing (views, etc) or vice-versa, this can also be implemented by giving an dynamic arrow along side ‘views’ heading so that when a user clicks on it the order toggles. Examples :
    Screen Shot 2018-03-30 at 3.35.20 AM.png (100×1 px, 18 KB)
    Screen Shot 2018-03-30 at 3.36.44 AM.png (92×208 px, 8 KB)
    Name would be replaced by anything that needs to sorted.
  • Show the alert message regarding ad blocker in a better way. As soon as a user lands on the page, an alert (notification) legend (as shown in the attached image) fades in from top. It will not cover the entire width of the page but just 1/4th of it. The slight UI problem with current one is that there is a lot of unused space in the red ad-blocker div.
    Screen Shot 2018-03-31 at 5.05.15 PM.png (238×936 px, 54 KB)
  • Improve overall color schema of line charts and in place of guideline show a small legend on hover. This improvement will make line graphs easy to grasp, as the lines would be made of just a single color with a contrast color given to corner points and area under the graph colored, the color will fade off as you move towards the x-axis. This improvement will resolve combined T183184 & T187429. Example :
    Screen Shot 2018-04-05 at 10.14.31 AM.png (638×996 px, 103 KB)
  • Currently Wikistats 2.0 footer design seems outdated and it also contains lines/text which are redundant such as "Follow this link to report a bug" which can possibly be replaced with "Report a bug" hyperlink. Space in footer can also be optimised by adding/rearranging content. We can also consider improving the overall interface of the footer.
    Screen Shot 2018-04-13 at 4.46.35 AM.png (426×1 px, 95 KB)

Timeline

A weekly report/blog will be published at the end of every week starting from the community bonding period.

  • [TD 1] Explore Subtasks : Explore all the subtasks listed here. Conduct a premature analysis and prepare design mockups for each subtask. Explore Wikistats 2.0 and suggest other improvements and add these to the subtasks list.
  • [TD 2] Student Projects Announced : Google announces accepted student proposals.
  • [TD 3] Community Bonding : Improvise and finalize the premature analysis and prepare final design mockups. Continue exploring Wikistats 2.0 for new suggestions and improvements. Start interacting with the Wikistats 2.0 team for inputs on analysis, design and newly suggested changes.
  • [TD 4] First Coding Period :
  • [TD 5] First Evaluation : Submit first evaluation.
  • [TD 7] Second Evaluation : Submit second evaluation.
  • [TD 8] Final Coding Period :
    • [TD 8.1] : Work on T192416 + Work on T198867.
    • [TD 8.2] : Continue working on T192416 + Work on T183184.
    • [TD 8.3] : Buffer for newly designed ideas.
  • [TD 9] Buffer : Resolve bugs and backlog (if any).
  • [TD 10] Submit Code + Final Evaluation : Submit final code along with the complete documentation and submit my final evaluation.
  • [TD 11] Mentors Submit Final Evaluations : Document future improvements to Wikistats 2.0 + Achievements of this project.
PeriodTask
Date.now() - April 22[TD1] Explore Subtasks
April 23[TD2] Student Projects Announced
April 24 - May 14[TD3] Community Bonding
May 14 - May 21[TD4] First Coding Period → [TD4.1]
May 22 - May 29[TD4] First Coding Period → [TD4.2]
May 30 - June 05[TD4] First Coding Period → [TD4.3]
June 06 - June 15[TD4] First Coding Period → [TD4.4]
June 11 - June 15[TD5] First Evaluation
June 15 - June 22[TD6] Second Coding Period → [TD6.1]
June 23 - June 30[TD6] Second Coding Period → [TD6.2]
July 01 - July 07[TD6] Second Coding Period → [TD6.3]
July 08 - July 13[TD6] Second Coding Period → [TD6.4]
July 09 - July 13[TD7] Second Evaluation
July 13 - July 18[TD8] Final Coding Period → [TD8.1]
July 19 - July 25[TD8] Final Coding Period → [TD8.2]
July 26 - August 01[TD8] Final Coding Period → [TD8.3]
August 02 - August 06[TD9] Buffer
August 06 - August 14[TD10] Submit Code + Final Evaluation
August 14 - August 21[TD11] Mentors Submit Final Evaluations
August 22Results Announced

Deliverables

Phase I evaluation

Phase II evaluation

  • T192416 T183184 T198867
  • Stage 2 to 4 [OOAD] : Implement, test and deploy new improvements.
  • Three published reports/blogs.

Final evaluation

  • Future improvement to Wikistats 2.0 documentation.
  • Final GSoC project report/blog.

Results Announced

Note → Some of the above subtasks might change during the GSoC timeline but the main purpose and size of them will continue to be the same.


Participation

  • Use Gerrit to create changes for each of the sub-tasks individually and submit the code for review.
  • Will stay in regular touch with @mforns over Hangouts and IRC (#wikimedia-analytics) for any required guidance and updates. Will try to keep our conversations and discussion as public as possible over Phabricator (in comments).
  • Will share my progress and useful information on Phabricator subtasks in comments.
  • Weekly reports will be published on my meta wiki user page and regular blogs regarding my progress and learning from the project on Medium.
  • Will be available on Zulip, Email, Phabricator & IRC in working hours and on Email in non-working hours.

About Me

Currently a Junior at the Indian Institute of Technology Delhi (IIT Delhi) where I’m learning how to produce & manufacture products from scratch & deal with the management challenges related to production. My major is Production & Industrial Engineering. I’m a code fanatic and have been one since my freshman semester. Technology excites me in many ways. I love developing softwares & applications that create an impact and are built for people. I have a strong passion for open source projects and have developed various software applications on campus in collaboration with my friends and professors. I strongly believe in the fact that no matter what you are creating or working on there is always a scope of improvement.

I heard about Google Summer of Code from Google’s open source blog, which I follow frequently. I won’t be having any other commitments besides GSoC this coming summer, therefore I would be very comfortable working around 40 to 50 hours a week. As far as this project is concerned I’m really excited to see the efforts of the analytics team in upgrading Wikistats to Wikistats 2.0 and I would be extremely honored to see it through to the end with significant contributions that can make Wikistats 2.0 a finished product.


Past Experience

Developed a Sales Rep Tracking Software during my freshman summer internship (June - July, 2016) at Groupon South Africa to monitor sales team whereabouts (location & time) and fuel spend when out selling. Used Object Oriented Analysis and Design (OOAD) for modelling along with AngularJS to layout the structural framework and Jasmine for Test Driven Development. This was my first time working in a proper development workflow so learnt a lot about different development cycles and how to model and analyse your ideas before beginning to code.

Led a team of 6 developers to develop the website and application for IIT Delhi’s cultural festival, Rendezvous. This was my first experience with a CRUD based application. Used AWS, Node.js, Vue.js, DynamoDB, and PHP to develop a robust and scalable platform that handled a traffic to 10k DAUs.

Have developed various students oriented web-portals for IIT Delhi such as Substance Abuse Helpline Portal and the Academics website of IIT Delhi using Kerberos based authentication and authorization using IIT Delhi LDAP Server and OAuth 2 Server.

Also, I regularly participate in various campus wide hackathons (Microsoft - Code.fun.do, IBM etc.). One thing that I love the most about these hackathons is the collaboration and the team effort required to develop a MVP within 24 hours.


Tasks Completed

Tasks In-Progress

  • T192416 : Improvements to Wikistats2 chart popups

Tasks Paused

  • T190915 : Improve scoping of CSS
  • T198630 : Broken down data with different time ranges for each line (or column set) breaks the chart

Bugs Reported & Tasks Created

  • T191121 : Page views and Country name table columns overlapping in the Page Views By Country metric on Dashboard.
  • T191567 : Updating Wikistats 2.0 Readme
  • T191672 : Upgrading Wikistats 2.0 footer UI/design
  • T192028 : Change 'NaN' to something more helpful in metrics % change over the selected time range
  • T192407 : Hide "Load more rows..." once all the data is visible in Table Chart
  • T196983 : Correct Metric value CSS on Dashboard
  • T197103 : Correct mixed case naming of metrics WIkistats 2.0
  • T196982 : Improve UI for ‘All wikis’ & ‘Explore Topics’ dropdown
  • T197482 : Shortcut icon is not showing
  • T198122 : Correct spelling mistake in description meta tag of wikistats 2
  • T198168 : Correct order of metric types on Dashboard navbar/menu
  • T198183 : Disable filter & split radio switches for metrics & reduce the height of wiki div in sidebar of detail page
  • T200498 : Provide metric area headings in the 'Explore Topics' dropdown
  • T200497 : Bug in time-range selector on detail page

UI Mockups for Cargo Special:Drilldown page


Other Info

I prefer mac OS for development but sometimes switch to debian as well. My native languages are English & Hindi. I'm not applying to any other organization/project in this years GSoC. I’m comfortable in working with a mentor who is several time zones away.

Related Objects

Mentioned In
T189210: [Analytics] Improvements to Wikistats2 front-end
Mentioned Here
T200497: [Wikistats 2] Bug in time-range selector on detail page
T200498: [Wikistats 2] Provide metric area headings in the 'Explore Topics' dropdown
T198867: Improve Wikistats2 map zoom
T198510: [Wikistats2] Negative numbers in chart axis are not abbreviated
T198630: [Wikistats2] Broken down data with different time ranges for each line (or column set) breaks the chart
T198122: Correct spelling mistake in description meta tag of wikistats 2
T198168: Correct order of metric types on Dashboard navbar/menu
T198183: Disable filter & split radio switches for metrics & reduce the height of wiki div in sidebar of detail page
T196982: Improve UI for ‘All wikis’ & ‘Explore Topics’ dropdown
T197103: Correct mixed case naming of metrics WIkistats 2.0
T197482: Shortcut icon is not showing
T196983: Correct Net Bytes Difference Metric value on Dashboard
T189619: Add wikistats metric about "pagecounts"
T190915: Improve scoping of CSS
T192416: Improvements to Wikistats2 chart popups
T192407: Hide "Load more rows..." once all the data is visible in Table Chart
T192028: Change 'NaN' & 'Infinite' to something more helpful in metrics % change over the selected time range
T191567: Updating Wikistats 2.0 github Readme
T191672: Upgrading Wikistats 2.0 footer UI/design
T188268: Some metrics don't work in the topic selector
T191121: Page views and Country name table columns overlapping in the Page Views By Country metric on Dashboard
T189210: [Analytics] Improvements to Wikistats2 front-end
T178018: Consider adding breadcrumbs to Wikistats 2
T182109: Present a page view metric description to the user that they are likely to understand
T182990: [Wikistats2] The detail page for tops and maps metrics does not indicate time range
T183184: Make the colors used the line charts in Wikistats 2 more easy to recognize.
T183185: Display of radio buttons in Wikistats 2 is somewhat confusing
T185533: Wikistats Beta: Fix accessibility/markup issues of Wikistats 2.0
T186335: Wikistat Beta: expand topic explorer by default
T187427: Change '--' to something more helpful in Wikistats page views by country table view
T187429: Beta: Y-axis units and rounding issues
T188208: The alert message about adblocker is not fully shown on smaller screens
T188221: Cargo API should display error if field alias starts with "_"
T189195: Limit pan in Wikistats2 maps
T189197: Wikistats2 line chart and map displacement bugs in Chrome+Ubuntu

Event Timeline

Hi @sahil505!
Thanks a lot for your proposal!
Here's some feedback, I hope it helps.

Profile, synopsis and benefits
Looks great :-]

Subtask Breakdown
OOAD sounds good, but note the following:

  • Some subtasks are too small for a full OOAD cycle. Some of them are just bugs. Adapt the process to the tasks needs, not the opposite :-]
  • Same with mockups. Some tasks will need that, others won't.
  • Regarding detailed explanations of the implementation: Good code speaks for itself, and if necessary there's code comments. Usually there's no big need of additional detailed explanation ;-)

Testing approach looks good, indeed, for wikistats2 we usually don't write unit tests (or any other kind) for mere visual elements. We do write unit tests for modules that do data transformation, or complex functionality like the router, see: https://github.com/wikimedia/analytics-wikistats2/tree/master/test.

Timeline
One can see that you own the GSoC process, kudos!

Maybe, I would suggest you tackle the subtasks in the order they are listed in the parent task. We arranged them from simplest to more complex, so as to give the student the opportunity to get an overall feel of the codebase first and then deepen into it for the bigger tasks. But that is totally optional, if you think that order is better for you, no problem at all!

Another suggestion would be to dedicate more time to subtasks in the first and second coding periods, and more time to your own improvements on second and third coding periods. Like for example:

  • First coding period: Finish the easiest 5-7 subtasks and spend some time thinking of / designing your own improvements.
  • Second coding period: Finish the next 3-5 subtasks and spend some time discussing/planning your own improvements with me and the WMF Analytics community.
  • Third coding period: Finish any leftover subtask (if any) and dedicate all time to implementing/testing your own improvements.

Participation

Use git to create pull requests for the commits created to the forked repository after appropriate testing. Separate branch will be created for each of the subtasks.

For wikistats2 that is not possible, the Github repo is just a mirror to the Gerrit one. You should create Gerrit changes instead, like you did for T188208.

Will stay in regular touch with @mforns over Zulip or Email for any required guidance and updates.

Sure! Or we can talk in IRC, I'm always in #wikimedia-analytics :-] Also, another convenient option for discussions is Google Hangouts, we use it a lot for videoconference. It doesn't matter if the internet connection is not perfect, or you don't have a formal environment, I myself work from home.

Will share my progress and useful information on Phabricator subtasks in comments.

Awesome.

Microtasks Completed
You can add T188208 now to that :-)
Also, consider finishing T187427 soon (it's an easy one) and you will be able to add it as well.

Extra
Do you have any preliminary ideas about Wikistats2 improvements of your own you want to work on? They do not need to be a developed idea, rather just a one-sentence idea. It's OK also, if you prefer to leave that for the coding period.

Cheers!

@mforns Thanks a lot for reviewing this. I'll make the suggested changes as soon as I can :)

@mforns I have made the suggested changes. If there is anything else that can improve this proposal please let me know. I'll share my ideas on new improvements as soon as I can, really soon though. Cheers!

sahil505 renamed this task from Proposal : [Analytics] Improvements to Wikistats2 front-end to GSoC Proposal 2018 : [Analytics] Improvements to Wikistats2 front-end.Mar 26 2018, 2:55 AM
Nuria set the point value for this task to 0.

@mforns : Updated the timeline & deliverables based on the new tasks added. Have kept the unassigned tasks for the end, by that time we can merge them with my suggested new improvements.

@sahil505
The new timeline looks great.
I wish you an awesome coding period :]