Extension:Page Forms/Select2 for autocompletion

Switching Semantic Forms Autocompletion to Select2

Public URL: https://www.mediawiki.org/wiki/User:Jatin.me/GSoC14
Bugzilla report: Bug 61974
Announcement: http://lists.wikimedia.org/pipermail/wikitech-l/2014-March/075276.html
Status: https://www.mediawiki.org/wiki/Extension:Semantic_Forms/Select2_for_autocompletion/Progress_Report

Name and contact information

Name: Jatin Mehta
Email: mehtajatin05@gmail.com
IRC: jmehta on freenode , channels: #mediawiki

Web Page / Blog / Microblog / Portfolio: Mediawiki User Profile: Jatin.me; My Blog: https://medium.com/@jatinmehta_; Linkedin: Jatin

Location: Allahabad, India (UTC+05:30)
Typical working hours: 11 am - 5 pm (IST) and 10 pm - 2 am (IST)

Synopsis

Semantic Forms is an extension to MediaWiki that allows users to add, edit and query data using forms. It is heavily tied in with the Semantic MediaWiki extension, and is meant to be used for structured data that has semantic markup.

Autocompletion of fields in Semantic Forms is one of the most important feature which allows users to see what the previously-entered values were for a given field, this greatly helps to avoid issues of naming ambiguity, spelling, etc. The goal of this project is to switch the currently available autocompletion in Semantic Forms from jQuery UI Autocomplete to Select2.

Drawbacks in the current autocompletion

The jQuery UI Autocomplete has a bind method for select but it just seemed a bit messy and the coding is not the easiest to follow.
It does not provide the feature of 'tokenization' for the fields which can hold multiple values.
Inflexible autocompletion for characters with accent.

Although some of these features are now possible with some recent changes in the jQuery-UI Autocomplete library but that will also require changes in the current autocompletion, so why not move on to a rather complete and robust system i.e. Select2 JS autocompletion.

Advantages of Select2 JS autocompletion

It has everything from a solid multi-select feature to AJAX loading, to rich item formatting - very easy to use and powerful. It supports searching, remote data sets, and infinite scrolling of results.

Tagging: ability to add new items on the fly.
Flexible accent folding is also available.
Working with large, remote datasets: ability to partially load a dataset based on the search term.
Templating: support for custom rendering of results and selections.

Browser compatibility: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+.

Mentors

Yaron Koren, Stephan Gambke

Project Details

Switching to Select2 will make significant improvements

It will make ‘Tokenization’ possible for the fields which allow multiple values.

Tokenization In Multi-valued Fields

Flexible autocompletion for characters with accents. (accent-folding has its limitations but it can help make some important yet overlooked user interactions work better. An accent-folding function essentially maps Unicode characters to ASCII equivalents. Anywhere you apply case-folding, you should consider accent-folding, and for exactly the same reasons. With accent-folding, it doesn’t matter whether users search for cafe, café or even çåFé; the results will be the same.)

Autocompletion of characters with accents.
Display of an image associated with each term.

Image associated with values for a field.

Displaying values in a tree structure.

Hierarchical list of values in a field.

Much better support for autocompletion on remote data sets.

Different phases of the project

Phase I: This phase would involve the basic task of introducing Select2 JS autocomplete to the current autocompletion system of Semantic Forms with no or minimal UI changes to get the whole system running fine with this new autocompletion system.

Phase II: In this phase I would integrate the feature for flexible autocompletion of characters with accents and the feature of displaying image associated with each term (which involves designing and improvements in UI ).

Phase III: This phase would involve more of designing part which include designing UI of tree-type structure for displaying values and UI for the autocompletion on remote data sets. Later in this phase I would also work on allowing admins/users to set layouts for the remote data sets.

Phase IV: This is an important phase, which involve introducing new input types for fields in Semantic Forms. For Example, "tokens" may be one such new input type which can be used for fields that can hold multiple values (this will result in depreciation of the existing "text with autocomplete"), etc. Later in this phase I will make combobox which will use Select2, default input type for Page property fields. Also, possibly "combobox" and "tokens" would become the new default input types for enumerated fields holding a single and a list of values, respectively (replacing "dropdown" and "checkboxes").

Phase V: This is the final phase of the project which involve cleaning up of the codebase, making proper documentation of the codes written and reviewing all the functionalities and fixing any bugs whatsoever.

Deliverables

After successful completion of this project following features will be added to Semantic Forms:

Autocomplete in SF using Select2 JS library.
Tokenization of the values in the fields which support multiple values.
Autocompletion for characters with accents.
Image display for each term (if some image is associated with it).
Tree-type structure for values.

Timeline

Period	Task
April 22 - May 18	Community bonding, reading documentation and getting familiar with all the codes.
May 19	Official GSoC coding period begins.
May 19 - June 8 (3 weeks)	This time would be utilized for Phase I of the project which involve switching autocompletion to Select2.
June 9 - June 20 (1.5 weeks)	Working on Phase II of the project.
June 21 - June 23	Begin working on Phase III.
June 24 - June 27	Mid term evaluation period.
June 28 - July 14 (3 weeks)	Continue Phase III which involve UI design of tree-type structures for values and improvements in remote data set autocompletion.
July 15 - August 4 (3 weeks)	Working on Phase IV which involves introduction of new input types and other additional features.
August 5 - August 12 (1 week)	Final phase of the project i.e. cleaning codes, documenting everything, reviewing all the functionalities and fixing bugs.
August 12 - August 18	Pencils down period. Submitting the project for final evaluation.

Participation

This section describes on how I plan to work during the internship period.

Communication of progress

Email - I will keep mentor updated about the progress.
IRC Channel - I will go on the #semantic-mediawiki channel during the working hours.
Mailing list - semediawiki-user mailing list will be used to communicate progress.
Blog - I will post helpful articles and updated about the project on my personal blog.

Publishing source code

Gerrit: Wikimedia Code Review

How and where you plan to ask for help?

Try Solving on my own: Go through documentation, search online, etc.
Seek helps from the community: Ask questions on IRC, mailing list and mentors.
Seek help from outside the community: skilled friends, my teachers, etc.

About me

I am currently a 3rd year Computer Science undergrad at Indian Institute of Information Technology, Allahabad, India.
I have coding experience with C, C++, Java and I am very much comfortable with PHP, Javascript, HTML and CSS for doing tasks related to web development. I have also used Knockout.js ( based on MVVM design pattern) with MVC frameworks like Ruby on Rails to build web applications.
My interests lie in web development, UX Design, Data Science, Artificial Intelligence and contributing to open source organizations.
I am new to open source community and enjoying to be a part of it. I love the idea of free and open knowledge for all and this is what drives me towards Wikimedia and its projects. It feels good to do something through which everyone is benefited.

How did you hear about this program?

I got to know about the GSoC program from a friend of mine. I then started to look into various mentoring organizations that participate in the program based on my skills which include PHP, Javascript and CSS and I found wikimedia as the organization I could work in.

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

In early May our summer vacation of college will start and ends by late of July; I can give my full time commitment to this project,. I assure dedication of at least 40 hours per week to the work and that I do not have any other obligations from early May till mid August.

Past experience

I have been involved with Mozilla Foundations as a Firefox Student Ambassador at my institute. I believe in the concept of open and free web and thus I organized events in my community to spread awareness about Mozilla Foundation products which support this cause, their projects and mission of open web for all.

In fact, in general I tried to encourage people about open source. Through these sort of events, at least I was able to get some people involved into open source communities. I have also encouraged people with programming skills to collaborate on various open source projects.

This gave me an immense pleasure and a feeling of satisfaction that I am doing my part and giving contribution to open source.

Other Involvements and Projects I have done:

IIIT-Allahabad Technical Society-

Lead Web Developer for institute's website.
Developed a registration system for cultural-tech festival Effervescence.
Developed softwares to facilitate management of services and provide online presence to college services. (github).

IIIT-Allahabad Network Engineering Society- Campus Consultant. Club lead. Involved in management and security of the institute's network along with server side administration. (Reference)