Page MenuHomePhabricator

GSoC 2019 Proposal: T213513: Improve the interface of Special:ViewData in the Cargo extension
Closed, DeclinedPublic

Description

Profile

Full Name: Drishya Ramesh
Email: drishyarameshpk@gmail.com
University: Amrita Vishwa Vidyapeetham
IRC Username: drishya8
Gerrit Profile: drishya
MediaWiki Username: DrishyaR
Blog: https://magicalme8.wordpress.com
Time zone: UTC +5:30 (IST - India)
Location: Kerala, India
Typical Working Hours: 5:00pm to 11:00pm (workdays) and 10:00am to 8:00pm (weekends)
Mentors: @Yaron_Koren @Nikhil-nk

Synopsis:

The Cargo Extension in MediaWiki provides a platform for users to store and query the data which is contained within template calls, as and when required. The ViewData Special Page in the Cargo Extension serves the purpose of being a user interface for a user to run queries related to Cargo Extension. This project aims at improving the Special:ViewData Page interface by implementing features like autocompletion, validation and adding format-based inputs, creating a much more user-friendly interface.

Deliverables:

  1. Redesign and rename the current UI of Special:ViewData to Special:CargoQuery.
  2. Support for dropdown and autocompletion in Cargo query fields.
  3. Testing of the new UI through unit testing and E2E testing.
  4. Iterate the UI/UX further through conducting a usability study across the Wikimedia Community.
  5. Document the new features.

Features and Implementation:

1. Enable support for Autocompletion and dropdown for the Cargo query fields

Add support for autocompletion based inputs by implementing select forms for the input fields in Special:ViewData page. This will allow a user to query data with the available options listed (dropdowns) and thus, provide a user-friendly interface. This feature will be implemented using the select2.js library.

<select class="table" name="tables">
  <option value="T1">Table1</option>
    ...
  <option value="T5">Table5</option>
</select>

// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $('.table').select2();
});

Sample code snippet: This is an example of the implementation of autocompletion feature

2. Enable dynamic updation of Special:DataView Page

The Special:DataView Page should dynamically update itself in accordance with the values entered by the user. For example, the “Fields” option in the Special Page should automatically update itself, according to the table selected by the user in the “Table” option, such that it shows only the fields of the selected table. This can be done using Ajax as depicted in the following flowchart :

An API will be implemented on the extension to parse the request and generate appropriate responses.

3. Implement Data Validation

Data Validation is required to ensure that user-entered values are of the right format and type. Currently, the fields in Special:ViewData page accepts any type and format of input from users and does not check for its validity. It should also be implemented dynamically such that the user gets an immediate alert or pop-up messages in case of incorrect entry (before submitting the query). This can be implemented by using step-by-step validation techniques in validators. For example, the only type of input for the field “Limit” in the Special Page is natural numbers and thus the user-entered value can be tested against a set of conditions for the type.
So there are multiple levels of validation:

  1. HTML form validation (simple type validation on HTML form elements).
  2. Frontend validation - validation on the fly before the data gets POSTed to the backend.
  3. Backend validation - sanitation and further validation of the data before the actual query is run on the server infrastructure (database).


Fig 1. Data Validation

4. Redesign the UI to include additional features and implement renaming of the Page

Currently, the Special:ViewData Page contains the bare minimum input fields with corresponding labels. The user-friendliness can be improved. This could be achieved by adding help texts for input fields and labels giving information about the type, format of text which should be entered. Further, tooltips and checkboxes can also be implemented on icons. This will further help in reducing incorrect data entries as well as providing a better user experience. Moreover, the page can also have a help icon redirecting to information on Cargo extension. These changes can be implemented by making the necessary changes to the displayInputForm function under the CargoViewData class.
The page should also be renamed from Special:ViewData to Special:CargoQuery

I plan to do the following:

  1. Add help texts for input fields and labels giving information about the type, format of text which should be entered.
  2. Implement tooltips and checkboxes on icons.
  3. Add a help icon redirecting to information on Cargo extension.


Fig 2. Redesigned UI

Timeline:

TimeLine MileStones
May 6th - May 27thCommunity Bonding period: Install all the requirements and get familiarised with the codebase by solving issues and bugs related to the Cargo extension. Remain active on IRC and Gerrit, contact and communicate regularly with mentors and the Wikimedia community.
May 28th - June 6thAdd support for Autocompletion feature: Develop the necessary code to implement the autocompletion feature such that the input fields in the Special Page automatically completes the query.
June 7th - June 13thImplement Dropdown menus: Develop the necessary code to add the dropdown feature to the input fields in the Special:ViewData Page such that it compliments the auto-completion feature.
June 14th - June 23rdExecute Dynamic Updation of the Page: Develop the necessary code which uses Ajax to dynamically update the page so that the fields can change its attributes in accordance with the values entered by the user.
June 24th - June 28thPHASE I EVALUATION
June 29th - July 3rdProvide refinements to Phase 1 implementations: Check for the expandability of the Phase 1 implementations. Ensure its working for larger set of data patterns without failures.
July 4th - July 14thImplement Data Validation: Write a code for checking different sets of data; to ensure whether it has a valid format and type.
July 15th - July 21stRedesign the UI: Start developing the code for improvising changes within the interface: to add more user-friendly features like icons and tooltips.
July 22nd - July 26thPHASE II EVALUATION
July 27th - July 31stImprovise Phase 2 Implementations : Check for the expandability of Phase 2 implementations and add features and fix bugs such that it satisfies all conditions.
Aug 1st - Aug 15thContinue Redesigning the UI of Special:ViewData: Add other features like help text for the input fields and also perform renaming of the page to Special:CargoQuery.
Aug 16th - Aug 22thBuffer Time: Test rigorously for bugs and issues using unit testing (in xUnit) and/or E2E testing in the interface and fix them. Provide extensive documentation for all the implementation and make sure it is done thoroughly for the code.
Aug 23rd - Aug 25th Final Report and Project Summary Submission
Aug 26th - Sept 2ndPHASE III / FINAL EVALUATIONS

About Me:

I am a freshman Computer Science Engineering student from Amrita Vishwa Vidyapeetham, Kerala, India. I am part of an Open Source community in my University - FOSS@Amrita and was introduced to MediaWiki via the club through a Wikimedia Contribution Drive conducted in August 2018 [1]. I have been contributing to MediaWiki since the last few months and have got a few patch sets merged into the code base. I love contributing to Open Source projects and enjoy working on web development .

[1] https://www.mediawiki.org/wiki/Wikimedia_Contribution_Drive_amFOSS

Contributions to MediaWiki:

Other Successful Contributions :

Skills:

Web Development : PHP, JS, HTML/CSS, MySQL
Operating Systems: Linux, Windows
Version Control System: Git, Gerrit

GSoC Information

Any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?

I will be attending my end-semester exams for approx. 2 weeks, from 6th May to 21st May, which will be during the community bonding period. Hence, I will not be able to remain active during this period. However, I do not have any other commitments for the remaining duration of the program and will be able to work for 40+ hours per week.

Applying to any other organisation this year?

No, I’m planning to apply for GSoC’19 through Wikimedia only.

Applying for both Outreachy and GSoC this year?

No, I’m planning to apply for GSoC’19 only.

What does making this project happen mean to you?

As a novice to Open Source, I’m thrilled to be part of the Wikimedia Foundation this year. I am excited to work on this project as it would be a great opportunity to contribute to the movement and work on programs used by numerous people on a daily basis. I feel it would be an amazing learning experience as well as one which is utilitarian.

Event Timeline

DrishyaR created this task.Apr 9 2019, 2:56 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 9 2019, 2:56 PM
DrishyaR updated the task description. (Show Details)Apr 9 2019, 3:00 PM
DrishyaR renamed this task from T213513: Improve the interface of Special:ViewData in the Cargo extension to GSoC 2019 Proposal: T213513: Improve the interface of Special:ViewData in the Cargo extension.Apr 9 2019, 3:09 PM
DrishyaR updated the task description. (Show Details)Apr 9 2019, 4:46 PM

(look for next steps in the email you'll receive shortly with an option to request for a debrief on why your proposal was not accepted)

srishakatux closed this task as Declined.May 7 2019, 12:23 AM