Page MenuHomePhabricator

[Proposal] Create OOUI widget for Index page pagelists {Google Summer of Code 2020}
Open, Needs TriagePublic

Description

Creating a page-list editing widget for the ProofreadPage extension

Phabricator Task: T172953

Name: Sohom Datta

IRC: Sohom_Datta

Web Profile: Linkedin, Github

Timezone: IST (Indian Standard Time) (UTC + 5.30)

Location: India, mainly Manipal

Typical working hours (include your timezone): 6:00 PM to 1:00 AM (IST) ~5 hours on weekdays, 8:00 AM to 8:00 PM ~ 11.5 hours on Sundays

Deliverables

  • Creating a widget in the Proofread_Page extension using the OOUI library that can deliver the following features:
    • An inline non-editable representation of the page-lists as they would appear colour coded in the viewing mode with the links swapped out for buttons.
    • An OOUI dialogue window containing a preferably zoomable thumbnail and a set of options to choose ( such as "Number", "Roman", "Advertisement", "-", "Plate" etc with "Number" selected by default ). There will be a field beside the Number and Roman options where one will be able to specify the specific value if any they want to assign that particular page. (Wireframe of the concept I'm thinking of)
    • A "Switch to Advanced Editing" mode button that replaces the button representation with a <textarea> with a preview button to preview content placed in the text area. This will be done in a way similar to that of the current implementation of the license preview in the UploadWizard.
    • A fallback for no-javascript users which will be the UI currently being used.
  • Adding a feature flag that can be enabled to beta-test the widget while still in development.
  • Write documentation on how to use this OOUI widget on www.mediawiki.org.
  • Provide continued support and fix bugs related to the widget after the end of the program.
  • Write tests (Selenium, QUnit and PHPUnit) for the JavaScript and PHP code (respectively) written during the internship.

Other Implementation Details

  • A helper library will have to be created to poll various parts of the PHP backend/API to retrieve data such as the image, proofread status and the page number of each page.
  • The OOUI widget will make use of the OOjs event based model where information used to generate various parts of the UI will be updated based on events emitted when actions are performed by the user.

Proposed Mockups

Possible Mentor(s)

  • Sam Wilson and Satdeep Gill
  • Have you contacted your mentors already? Yes

Timeline

Community Bonding Period (May 4, 2020 - June 1, 2020):

PeriodWeek NoTimeline
May 4 - May 10Week 1I'll familiarize myself with the general workflow of uploading books and creating Index pages for the same using the current UI. I'll also familiarise myself with the codebase of the ProofreadPage extension and how various components of it work together.
May 10 - May 17Week 2Getting Selenium up and running, doing a deep dive into how selenium tests are written and writing preliminary tests for the proofreadpage Index page to get an intuition of the same.
May 18 - May 24Week 3I’ll study and learn about the ResourceLoader modules and take a look at the general JavaScript packaging architecture of Wikimedia and start working on the basic framework for my project.
May 24 - May 31Week 4I'll take a look at the architecture of some OOUI based widgets currently deployed on Wikimedia such as the TemplateWizard extension, and the RecentChanges Javascript interface to get an intuition of how various components work together.

Coding Period (June 1, 2020 - August 24, 2020):

PeriodWeek NoTimeline
June 1 - June 8Week 1Discuss and iron out any questions I may have regarding the implementation of the OOUI widget with my mentor and start with the helper functions and modules required to interact with the PHP backend.
June 8 - June 15Week 2Finish with work on helper functions and modules under the guidance of my mentor. Write bi-weekly report.
June 15 - June 22Week 3Start working on the implementation of the interface with guidance from my mentors.
June 22 - June 29Week 4Work on the implementation of the interface, code the OOUI non-editable button interface. Write the bi-weekly report.
June 29 - July 3 (July 6)Evaluation IWork on the implementation of the interface, prepare for evaluation, code the OOUI dailog window
July 6 - July 13Week 1Discuss implementation doubts, fix any bugs that may occur, will have exams. Write the bi-weekly report.
July 13 - July 20Week 2Work on the implementation of the interface, code the andvanced mode and the preview feature
July 20 - July 27Week 3Write code to integrate all the OOUI components together, fix any bugs that arise. Write the bi-weekly report.
July 27 - July 31(August 1)Evaluation IIIntegrate OOUI code with PHP backend, test and fix any unexpected bugs. Prepare fore evaluation.
August 1 - August 7Week 1Write documentation of www.mediawiki.org with guidance from community members. Write the bi-weekly report.
August 7 - August 14Week 2[1]
August 14 - August 22Week 3[1]

[1] I want to use the last two weeks as a buffer for unexpected spillages and unforseen delays that may occur during the project. If all goes according to plan, I plan on working on geting the widget accessible on wiki via a url parameter or a preference.

Final Evaluation(August 24, 2020 - August 31, 2020):
Fixing unforeseen bugs, waiting around for final evaluation and working on community feedback.

Participation

  • I'll be committing my progress to the master branch of the Proofread_Page extension via Gerrit.
  • I’ll be active on the #mediawiki IRC channel and will be asking any general queries regarding MediaWiki there. I’ll also consult with my mentor via matrix.org/in the phabricator task/on the wiki talk page if I have questions regarding the architecture or implementation of a particular feature.
  • I'm also there on matrix.org and IRC in the #wikimedia-tech and #wikipedia-en channels (besides #mediawiki) and can be reached via a ping or PM during work hours.
  • I’m reachable at all times (within ~7:00 AM to ~1:00 AM IST) on Phabricator, via my email (sohom.datta@learner.manipal.edu) or any of my talk pages on Wikimedia (thanks to email notifications).
  • I'll post bi-weekly updates regarding my progress on my MediaWiki user page.
  • I'll be using the new MediaWiki-Docker environment for testing and development of the widget.

About Me

Your education (completed or in progress):

I’m a first-year student pursuing a Bachelors Degree in Computer Science and Engineering at Manipal Institute of Technology. I completed my schooling at St James’ School, Kolkata. I have been studying Computer Science for over four years (since my 9th grade) and am fairly proficient in general coding concepts, including preliminary data structures and algorithms.

How did you hear about this program?

I was first introduced to Google Summer of Code at an event in my college by ACM Manipal where seniors who had already participated in the program talked about their experiences. My acquaintance with the Wikimedia part of the program, however, was purely incidental. It was a result of me feeling a resonance with the concept of the Wikimedia movement and a tiny amount of familiarity that I had gained regarding the Wikimedia movement when one of my classmates in high school pushing me towards contributing to Wikipedia as an IP address.

Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?

My college classes will resume from 1st June; however, I'll still be able to contribute upwards of 30 hours a week towards this project and finish it in time. I will also have some exams during the July 6 - July 13 week which may lead to me being engaged during that period. I'll be in touch with my mentors and inform them of my progress.

We advise all candidates eligible for Google Summer of Code and Outreachy to apply for both programs. Are you planning to apply to both programs, and if so, with what organization(s)?

No.

What does making this project happen mean to you?

This project will give me the opportunity to repay back the debt I feel I have incurred from Wikimedia volunteers as a student due to my reliance on Wikipedia for my school projects. Further, working on this project will give me the opportunity to grow and bloom as a developer which inspires me to take up this project.

The fact that this project has the potential of positively impacting millions of Wikimedians who use the feature almost daily and that it will help new users create and maintain Index pages on Wikisource with relative ease spurs me on to complete this project.

Also, I do not intend to leave Wikimedia regardless of whether or not this proposal gets accepted for Google Summer of Code, I intend to stay back and keep on contributing and helping out the Wikimedia community by solving technical tasks.

Past Experience

Wikimedia

I have been a part of the Wikimedia community since November 2019. As of March 29, I’ve made 14 contributions (not counting my contributions to the extension mentioned below) to the Wikimedia codebase, 5 of which are pending review. (Gerrit profile)

Additionally, I’ve submitted patches for two of the microtasks for this project.

I’ve also created (and am the co-maintainer for) a small extension, ProtectionIndicator which adds a small lock icon at the top of each and every protected page and shows a popup giving users an explanation of why and who protected the page. The extension was created by me to gain intuition into the various aspects of ResourceLoader and how each and every component in an extension works with each other.

I am also active on English Wikipedia where I create articles on subjects related to Indian history, contribute to tech-related articles while also fighting vandalism from time to time. (Wikimedia stats)

Personal Experience

I’m a freshman pursuing my Bachelors in Technology in Computer Science at Manipal Institute of Technology. I have four years of experience with programming having taken Computer Science classes (Java) since my 9th grade and am fairly proficient with the preliminary algorithms and data structures. I have quite a bit of experience with HTML, CSS and vanilla JS having taught myself the basics of frontend web-dev in 11th grade. Additionally, over the course of September - October 2019, I also have taught myself the basics of PHP which I feel has helped me greatly while contributing over the course of February and March.

I was selected via a coding challenge for the "task-phase" of Project Manas, a student project in our university that works in areas related to artificial intelligence. This is where I got introduced to open-source technologies such as Git, Linux and Tensorflow and the amazing community surrounding open-source software development.

Besides this, I’ve also implemented Djikstra’s path planning algorithm using ROS, gradient descent on the MNIST dataset and also created a lane detection software using deep learning neural networks trained on the KITTI Road/Lane Detection dataset. I’m also proficient in Python, Java and C and have some knowledge of Bash scripting.

Event Timeline

Soda created this task.Mar 7 2020, 12:24 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 7 2020, 12:24 PM
Kizule added a subscriber: Kizule.Mar 7 2020, 12:30 PM

Hi @Soda. Can you please associate at least one active project with this task (via the Add Action...Change Project Tags dropdown)? This will allow others to get notified, or see this task when searching via projects. Thanks.

Shit, I completely forgot about that. Done :)

@Zoranzoki21: The task summary tells you which project this is about. :)

@Soda Hi! Thanks for your proposal. I hope that you are already in touch with potential mentors of this project as it would be nice if you could get early feedback from them. If for some reason you are not able to reach out to them, please let me know!

Soda updated the task description. (Show Details)EditedMar 14 2020, 2:14 PM

@srishakatux, I'll get in touch with the mentors ASAP

Soda updated the task description. (Show Details)Mar 14 2020, 2:16 PM

@Samwilson @SGill Need your feedback on @Soda's proposal :)

All up, sounds terrific! A few comments:

An OOUI dialogue window containing a preferably zoomable thumbnail and a set of options to choose ( such as "Number", "Roman", "Advertisement", "-", "Plate" etc with "Number" selected by default ).

Could you expand a bit on this? Because this part is quite crucial. Basically this UI is a front-end for the pagelist tag, and so for each page it has to be able to say (most importantly) what page number it is and in what style. There's a distinction between 'style' (normal, roman, etc.) and value (the page number, or 'title' etc.).

A "Switch to Advanced Editing" mode button that replaces the button representation with a <textarea> with a preview button to preview content placed in the text area.

This sounds good. Keep in mind that the widget appears in the context of a larger form, which already has preview functionality. I'm not saying previewing here isn't also good, but it should be done in a way that is clear (e.g. maybe similar to how the custom license preview works in UploadWizard, within a dialog?).

Adapting the PHP backend to load the widget at the appropriate time and receive input via the widget.

I'm not sure how much backend work there will be. The widget should result in no change to the text that's actually submitted when saving an Index page. Maybe new convenience API methods may be required for previewing or partial parsing of pagelists, but you should be sure that the same goals can't be achieved with existing endpoints before introducing anything new.

One crucial backend part will be the addition of a feature flag (e.g. $wgProofreadPagePagelistWidget) so that this new widget can be optionally turned on for beta testing.

Write QUnit and PHPUnit tests for the JavaScript and PHP code (respectively) written during the internship.

Probably more important that PHPUnit tests will be the addition of Selenium tests, because almost all of this project involves front-end code.

Week 1 (April 27 - May 3): I’ll devote this time to understanding and figuring out and trying to get an intuition of how the ProofreadPage extension works and ironing out any doubts I may have regarding the implementation of the widget.

I'm not sure how familiar you are with setting up Wikisource Index pages, but before anything you should get a handle on that process so you know where this widget is going to fit in the users' workflows. I'd recommend uploading a couple of books and setting up their Index pages.

You'll also need to get ProofreadPage running locally in your dev environment. This can be a bit more complicated than other extensions, so I recommend getting it sorted as early as possible in case you have any issues.

Week 3 (May 10 - May 18): I’ll study and learn about the ResourceLoader modules and take a look at the general JavaScript packaging architecture of Wikimedia and start working on the basic framework for my project.

I'd recommend getting Selenium set up and working at this point. Even if it doesn't actually test anything other than 'open index page; confirm ', the configuration etc. will be useful in the next steps.

Week 3 (July 6 - July 13): Start with modifying the PHP backend to load the widget and receive appropriate input from the JavaScript interface. Write bi-weekly report nd prepare for evaluation.

At this point you will have already done everything that's required to load the widget, because that will be one of the first things required when working on its UI. I suspect 'implementation fo the interface' will take more than two weeks (probably more like four).

Week 1 (July 20 - July 27): Write documentation for the feature on www.mediawiki.org with guidance from community members. Write the bi-weekly report.

User documentation would be wonderful!

Week 2 & Week 3 (July 27 - August 10): I want to keep the last two weeks as a buffer to account for spillages and unforeseen delays that may occur during the project. If everything goes according to plan, I intend to use these weeks to implement QUnit and PHPUnit tests for the code I will have written.

All tests should be written when you write the features themselves, and not as an afterthought at the end. If that means it takes longer for each stage of the widget, then that's absolutely fine.

Uploading code to the main repository, fixing unforeseen bugs, waiting around for final evaluation and working on community feedback.

I’ll be creating a public Github repository containing a fork of the ProofreadPage extension, where I will commit my progress.

It would be better to do all development on Gerrit. This should be fine, as one of the first bits of code will be the feature flag which will ensure that the widget will not be activated until it's ready. It also means all the standard CI, code review processes, beta-testing etc. will be available.

Soda updated the task description. (Show Details)Mar 22 2020, 12:46 PM
Soda added a comment.Mar 22 2020, 12:58 PM

@Samwilson and @SGill Sorry for completely dropping the ball for a few days, my college has preponed my holidays due to the current coronavirus situation, it's been pretty hectic for the last 5 days (getting medical supplies, figuring out what my college was doing, and travelling back to my home), I've updated my proposal and will try to get stuff figured out in the next few days.

Soda updated the task description. (Show Details)Mar 23 2020, 4:39 PM
Soda updated the task description. (Show Details)Mar 23 2020, 5:47 PM

Thanks @Soda, looks good.

Soda updated the task description. (Show Details)Mar 26 2020, 6:03 PM
Soda updated the task description. (Show Details)Mar 29 2020, 6:48 PM
Soda updated the task description. (Show Details)Mar 29 2020, 6:52 PM

Updating to bring it in line with the pdf proposal that I'm submitting on the GSOC website, mostly copy-editing and a few bits of extra info here and there :)

Updating to bring it in line with the pdf proposal that I'm submitting on the GSOC website, mostly copy-editing and a few bits of extra info here and there :)

Solid Proposal @Soda. Love it. especially the mockups .

Soda added a comment.Mar 30 2020, 1:15 PM

Updating to bring it in line with the pdf proposal that I'm submitting on the GSOC website, mostly copy-editing and a few bits of extra info here and there :)

Solid Proposal @Soda. Love it. especially the mockups .

Sure, thanks a lot :)

Soda updated the task description. (Show Details)Mar 31 2020, 5:44 PM
Soda updated the task description. (Show Details)Mar 31 2020, 6:03 PM

Change 602275 had a related patch set uploaded (by Samwilson; owner: Samwilson):
[integration/config@master] Add User:Sohom_data GSoC student

https://gerrit.wikimedia.org/r/602275

Change 602275 merged by jenkins-bot:
[integration/config@master] Add User:Sohom_data GSoC student

https://gerrit.wikimedia.org/r/602275

Google-Summer-of-Code (2020) is over! I believe you have already documented your project here https://www.mediawiki.org/wiki/Google_Summer_of_Code/Past_projects#2020. If not, I would encourage you to do so. Also, is there anything else remaining in this task to address? If not, please consider closing this task as resolved.

Soda added a comment.Sep 23 2020, 3:30 PM

@srishakatux Mostly everything is done! :) Whatever is left is tracked in the T253458 subtask and I'm getting the community feedback organised as individual tasks under the ProofreadPage project.