Page MenuHomePhabricator

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

Description

Profile Information

Name: Amit A Joki
Email: amitjoki@hotmail.com | amitjoki@gmail.com
IRC: amitjoki
Github: AmitJoki
StackOverflow: Amit Joki
Location: Madurai, Tamil Nadu, India.
Typical working hours: Up to mid-May - 6.30PM to 12.30AM in the UTC +5:30 on weekdays, 9 AM to 5 PM on Sundays (and on Saturdays if it is an holiday).
After mid-May, I'll be having summer vacation for 3-4 weeks and I would work from 9AM to 5PM in the UTC +5:30. If need be, I could change my working time to be in accordance with my mentors timezone.

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. With Wikisats 2.0 gearing up for a stable release with a revamped UI, this project aims to accelerate the process by fixing the small anomalies.
  • The main objective of this project will be to
    • Update the website's interface.
    • Provide access to data in an analytics-friendly form.
    • Be easier to maintain and improve.
  • Wikistats2 is currently in production but still in alpha stage. There are some improvements that need to be made in order to consider Wikistats2 a full replacement of its predecessor. The objective of this GSoC project is to improve Wikistats2 front-end, bringing it closer to a finalized product. This task lists around 12 subtasks containing small improvements to be implemented. And I am confident of completing 90% (a conservative figure) of the tasks through this project.
  • I have been in touch with core collaborators and have been corresponding on IRC and occasionally by Mail. The suggestions given by them have been helpful for getting my micro tasks done.
  • Mentors : @mforns

Final Summary

  • At least 8 of the 12 tasks listed on https://phabricator.wikimedia.org/T189210 will be completed and tested thoroughly..
  • The website at the end of coding period will be fully compliant with accessibility standards set by W3C accessibility standards.
  • The website will have a pragmatic UI and will be easy to maintain as far as developers are concerned.
  • [Extra] Discuss, implement, test and document any new ideas that the student may have to improve Wikistats2 front-end. I have already formulated some ideas that could be implemented upon further discussion.
  • The subtask implementation would involve:
    • Implementation - This involves writing the code to finish the task. Points will be discussed with the members of the project as to how one could go about implementing the given subtask.
    • Testing - Write Jasmine Unit Tests for new implementations. However this doesn’t mean every subtask will be tested. Only those that require testing will be tested as many small subtasks don’t need testing.
    • Documentation - I’ll add documentation to each of the tasks I’ve completed for further reference.

Tasks Plan

CBP (Community Bonding Period. )

Master Vue.js I am familiar with React and since they both are similar in some ways, it wouldn't be much of a task. Get more acquainted with the codebase, interact with the mentors and know more about how the statistics are rendered.

Phase 1 (referred to as P1 from hereon)

  1. T187427 Change '--' to something more helpful in Wikistats page views by country table view Analyze if possible the reason for why the country doesn't get logged in. Is it because of VPNs? If there's a particular reason as to why the source of a page view can't be discerned, put 'Unknown' with a link to the page citing the reason of discrepancy. If no concrete reasons could be found, then a generic 'Unknown' could be put.
  2. T188208 The alert message about adblocker is not fully shown on smaller screens This could be done with word-wrap property of CSS and specifying a uniform padding on either side of the screen.
  3. T182109 Present a page view metric description to the user that they are likely to understand I have started the discussion regarding this. The tooltips are a bit redundant now and they could be used to house a paragraph of what the tool does in layman’s terms, with a link to a detailed explanation within the tooltip.
  4. T186335 Wikistat Beta: expand topic explorer by default Implement this by triggering click event onto the Explore Topics button on page load event.
  5. T185533 Wikistats Beta: Fix accessibility/markup issues of Wikistats 2.0 The contrast issue can be discussed and the work of Cynthia Brewer whose tool Color Brewer is de-facto standard for such issues can be looked into and if the consensus is reached, the same can be implemented. For accessibility issues, there’s a fine tool at http://khan.github.io/tota11y/ which picks out the accessibility issues on each page. I plan to run this through all the pages in the wikistats2 in development environment and remedy the accessibilities issues in each page. Complete the microtasks given in the task T185533
  6. T183184 Make the colors used the line charts in Wikistats 2 more easy to recognize. Try to incorporate the suggestions in the link - “Best” series of colors to use for differentiating series in publication-quality plots It involves using the Color Brewer tool as well, so this could be implemented upon the outcome of the discussion with the mentor and other contributors.
  7. T182990 The detail page for tops and maps metrics does not indicate time range This could be implemented by including the timespan on the popover of maps on hover for PCs and upon the touch events on the mobile version. For tops metrics, a timespan column could be added to the existing table.

Phase 2 (referred to as P2 from hereon)

  1. T189195 **Limit pan in Wikistats2 maps Implement a small + / - buttons at any one of the corners of the map to zoom in/out. This provide an explicit option to zoom out (instead of Shift + Click which took me sometime to find). Instead of limiting the panning limits, implement a “Reset Map” button to center the map again. This is more pragmatic without restricting the user. If he gets lost, he can always find his way back home by clicking “Reset Map” and start exploring again.
  2. T189197 Wikistats2 line chart and map displacement bugs in Chrome+Ubuntu I am primary Ubuntu user and I am not able to reproduce the bug in my Ubuntu 16.0.4 LTS and Chrome Version 65.0.3325.162 (Official Build) (64-bit). I guess the Chrome bug that was causing this bug must have been patched. If the bug reappears, I’ll look into Chrome’s issues as it is probable that others might have raised it already and try to fix the problem.
  3. T183185 Display of radio buttons in Wikistats 2 is somewhat confusing The current implementation is indeed confusing. Instead of toggling the children elements, make them disabled and toggle their disabled status to enabled status using the radio buttons. This will make sure the user is not caught off guard by elements springing up from nowhere, also the user will know why he has to choose a certain radio button. This is widely prevalent solution and can be seen in numerous Windows UI and Installation Wizards. Screenshots [1] are added at the end of the proposal.
  4. T178018 Consider adding breadcrumbs to Wikistats 2 Breadcrumbs are nice add on for sites with man links. However it becomes especially important for SPAs so the users know where they are with respect to the current view. This will be implemented by studying the routes.
  5. T187429 Beta: Y-axis units and rounding issues I for an instance upon viewing the graph without the context thought that it was depicting meters. For clearing the ambiguity it would be better if we use MN, BN as it explicitly spells out what the intention. This has to undergo some discussions before implementing.

Extra Tasks (referred to as ET from hereon)

  1. Convert all the tooltips that start with “Click this to get through” to relevant tooltips as the current tooltips aren’t that helpful and are redundant.
  2. Create a help page with a small explanation to what the tools used are, and how they work. This could be a Wiki page. Also include a detailed link to the wiki-page for curious users. Provide the link to these in the tooltips.
  3. Currently, the data can be downloaded in CSV format. But JSON is the norm and it would save developers time if they could get the same data in a JSON format. Therefore provide option to download the data in JSON format.
  4. There’s no localization currently. Use i18n for providing the onscreen text. Add documentations for the i18n strings used for https://translatewiki.net from which we could import the translations.

Timeline

PeriodTask
April 23 to May 14CBP
May 14 to May 21P1.1 & P1.2
May 21 to May 28P1.3 & P1.4
May 28 to June 10P1.5 & P1.6 & P1.7
June 11 to June 15Phase I Evaluation
June 15 to June 22P2.1 & P2.2
June 22 to June 29P2.3 & P2.4 & P2.5
June 29 to July 4Test and Document all the changes
July 4 to July 9ET.1
July 9 to July 13Phase II Evaluation
July 13 to July 20ET.2
July 20 to July 27ET.3
July 27 to August 3ET.4
August 3 to August 14Buffer Period. Code cleanup. Bug fixes.
August 14 to August 21Mentors submit the code for final evaluation.
August 22Result of GSoC 18 announced

Further Breakdown

  • For each task completed, I’ll add tests for changes that can be tested. For example, color contrast changes cannot be reliably tested but the default expansion of Topic Explorer can be.
  • Maintain a CHANGELOG of the tasks completed with documentation of what’s been changed and why.
  • I will be working on other sub tasks that get created on the Phabricator during each week as soon as I am able to complete my said tasks in the timeline.

Deliverables

  1. T187427 Change '--' to something more helpful in Wikistats page views by country table view
  2. T188208 The alert message about adblocker is not fully shown on smaller screens
  3. T182109 Present a page view metric description to the user that they are likely to understand
  4. T186335 Wikistat Beta: expand topic explorer by default
  5. T185533 Wikistats Beta: Fix accessibility/markup issues of Wikistats 2.0
  6. T183184 Make the colors used the line charts in Wikistats 2 more easy to recognize.
  7. T182990 The detail page for tops and maps metrics does not indicate time range

Phase I Evaluation

  1. T189195 Limit pan in Wikistats2 maps
  2. T189197 Wikistats2 line chart and map displacement bugs in Chrome+Ubuntu
  3. T183185 Display of radio buttons in Wikistats 2 is somewhat confusing
  4. T178018 Consider adding breadcrumbs to Wikistats 2
  5. T187429 Beta: Y-axis units and rounding issues

Phase II Evaluation

  1. Convert all the tooltips that start with “Click this to get through” to relevant tooltips as the current tooltips aren’t that helpful and are redundant.
  2. Create a help page with a small explanation to what the tools used are, and how they work. This could be a Wiki page. Also include a detailed link to the wiki-page for curious users. Provide the link to these in the tooltips.
  3. Currently, the data can be downloaded in CSV format. But JSON is the norm and it would save developers time if they could get the same data in a JSON format. Therefore provide option to download the data in JSON format.
  4. There’s no localization currently. Use i18n for providing the onscreen text. Add documentations for the i18n strings used for https://translatewiki.net from which we could import the translations.
  5. Final code clean up and bug fixes.

Final Evaluation

Participation

  • Following the contribution guidelines, I’ll be making changes to the local master branch and push

those with Gerrit. I’ll actively participate and incorporate the reviews by my mentor and other
contributors.

  • Online on Slack, IRC in my working hours.
  • Updating the progress on Phabricator
  • Update the progress after the completion of task each week on my blog

About Me

Education:

I am in my first year of my college. I am a Computer Science student currently undergoing 2nd semester in my 8-semester course.

Where did you hear about GSoC?

I heard about GSoC from my senior who was a GSoC 17 Student with Haiku organisation. Once I knew about GSoC, I went through all the previous year organisations which had their 2018 Project Ideas well before February 12. I found Wikimedia this way. I had been a long time FOSS user, raising issues occasionally but always had the guilt of not contributing via code. I wanted to give back to the FOSS community by contributing substantially and what better way to start than with the parent organisation of Wikipedia?

What other commitments do you have during the course of this program?

I don't have any other commitments in the foreseeable future. The college works usually take an hour or so and I can easily manage that. Even that will be gone when the summer vacation starts; my only priority this summer would be to work on this project, have it completed and tested thoroughly.

What will working on this project mean to you?

Working on this project will mean a lot to me in terms of personal satisfaction. There's pride in knowing that my code will be part of something as amazing as WMF. On technical fronts, working on this project will acclimatise me on the way real-time applications are built, tested and deployed. Also, working on this project where every commit to the master branch will be deployed real-time will give me the confidence to continue working on other FOSS projects in the future.

Past Experience

I have been working on a personal project with Ruby on Rails. I have a gold badge in Stack Overflow in the tag JavaScript. I am active on Stack Overflow and have a decent reputation. I have some 2000+ answers on Stack Overflow over the years and I thought then that I was in some way helping the Open Source community which is false equivalency as I have now come to know. Since I met the minimum age requirement this year, I am applying for the GSoC in the hope of adding "Contributed in a small way to WMF" to the list of my past experiences, in the future.

Finished Microtasks:

https://gerrit.wikimedia.org/r/421708 (Fixed Mixed cases to regular case) (merged)
https://gerrit.wikimedia.org/r/421711 (Expand Topic Explorer by default) (merged)

The below are the merged pull requests I did for WikiEdudDahsboard which is also based on Javascript/HTML/CSS so I hope it would be relevant to this project:

Small fixes:

Performance related:

Enhancements:

Screenshots [1]:

BeforeAfter

Event Timeline

Amitjoki created this task.Mar 28 2018, 5:23 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 28 2018, 5:23 PM
fdans moved this task from Incoming to Mentoring on the Analytics board.Mar 29 2018, 4:55 PM
Nuria moved this task from Next Up to Parent Tasks on the Analytics-Kanban board.Apr 16 2018, 5:10 PM
Nuria set the point value for this task to 0.
srishakatux closed this task as Declined.Jun 5 2018, 6:35 PM