Profile Information

Name: Prssanna Desai
IRC nickname: prssanna
Email: prssud@gmail.com
Github: https://github.com/prssanna
Resume: Link
Phabricator: https://phabricator.wikimedia.org/p/prssanna
Location: Mumbai, India
Time Zone: UTC +5:30 (IST)
Typical Working hours: 5:00 AM to 1:00 PM UTC

Synopsis

Wikidata Query Service (WDQS) is a public service designed to provide a SPARQL endpoint which allows you to query against the Wikidata data set. WQDS allows users to run complex queries and ask intricate questions to Wikidata, a free, open and vast knowledge base. My project involves improvements to the Explorer Dialog and the Graph Explorer of the Wikidata Query Service.

Making the Explorer dialog more interactive and informative is the first goal of the project. This will be achieved by:

• Allowing multiple Explorer Dialogs
• Making the Dialog Resizable
• Making the Dialog Draggable
• Making the Dialog Responsive

Making the Graph Explorer more intuitive and explanatory is the second goal of the project. The main task in this section is to show and expand incoming links in the Graph Explorer. I also plan to identify and make more improvements to the Graph Explorer throughout the course of the summer.

These improvements will benefit WQDS users by enhancing the readability and the usability of the service.

Possible Mentor(s)

@Jonas @Lucas_Werkmeister_WMDE
I have been in contact with Jonas Kress on Phabricator Tasks and Gerrit Code Review while making fixes for query.wikidata.org.

Deliverable & Implementation

Parent Task for the GSoC Project: T188104

Task 1: Improvements to Explorer Dialog for query.wikidata.org

T187874

Multiple Explorer Dialogs
In the current state of the Explorer Dialog, it is only possible to view the results query by query. I will integrate a feature which will make it possible to view and compare the results of more than one query at once. On clicking the explorer dialog button, a new dialog will open at the same position. Dragging and resizing it will allow the user to view the query results side by side.

Resizable Explorer Dialogs
Currently, the explorer dialog is of a fixed size so regardless of the complexity of the query, the size of the Dialog remains the same. This can hinder readability.
I plan to make it possible to resize an explorer dialog. This will also help to accommodate several dialogs on the same page.

Draggable Explorer Dialogs
It is not currently possible to drag the Explorer Dialog around the page.
Enabling this feature will make it convenient for the user as he can then view multiple explorer dialogs side by side and move the Dialog anywhere on the screen as per his/her requirements.

Demo at prssanna.xyz:8080
Please visit the link to see the prototype. After running a query, drag the window by dragging the Explorer Tab bar. Then, you can resize the Window by dragging the bottom right corner.

I’ve built a prototype using JQuery to show everyone what the draggable and resizable dialog will look like. I’ve made the dialog resizable by adding the style “resizable:both” to the dialog explorer so that it can be expanded or made smaller from the bottom right corner.

The draggable feature is implemented by changing the top and left values of the dialog as it is moved, according to the position of the cursor.
This is just a prototype so the content of the dialog is responsive but the dialog itself isn’t. I will fix that in the future and also ensure that the dialog cannot be dragged beyond the current screen width or the height. The final version will also have much smoother dragging.

Responsive Explorer Dialog
The Explorer Dialog will be made responsive and after adding all the above features, I will ensure that the site continues to be responsive and mobile-ready.

Task 2: Improve Graph Explorer for query.wikidata.org

T187876

Allow to Show and Expand Incoming Links
In the existing state of the Graph Explorer, a user can see and expand outgoing links but not incoming links. This is the main feature that has to developed in this task. Adding this feature will make exploration of the query results more intuitive and informative for users.
I will be adding this feature in GraphResultBrowserNodeBrowser.js in the Wikidata Query GUI repository.

Auto-Zoom in the Explorer Dialog
After expanding a node, the resulting graph does not scale it’s size according to the size of the Dialog. This will be a bigger problem when we allow the Dialogs to be resized.
One way of fixing this would be to auto-fit the the graph with a simple animation every time a node is expanded so that users will not have to manually “pull” the nodes back into the Dialog.
An alternative would be to use an on-demand “Fit to Screen” button that will auto-fit the graph whenever the user clicks it.
The fit() function from vis.js can be used to perform an animated fit to an optimal zoom level.
The focusOnNode() function can be used to focus on a particular graph area when a node is expanded.

This feature is already present in the Graph Result browser. I will add it to the Explorer Dialog too.

Integrate vis.js Keyboard and Navigation Controls for Better Accessibility
On query.wikidata.org, zooming in and out of the Graph Explorer often stutters and experiences glitches and using only a mouse/trackpad for navigation in the Graph Explorer can become tedious and restrictive. I will enable navigation inside the Explorer using arrow keys. The Page Up and Page Down buttons can be used for zooming in and out.
This will provide greater flexibility to the user.

Fig. Inside an Explorer Dialog with Navigation Controls, Zoom Options and Auto-Fit
vis.js example

Disallow dragging nodes outside the window.
On dragging a node outside the Graph Explorer window, the node sometimes does not return to the Window and remains outside the window. Then, it is impossible to continue exploring the graph.

Fig. An example with Nodes staying outside the Dialog

Prevent Overlapping in the Graph Explorer
If there are many nodes and some movement occurs, nodes start to overlap each other.
Preventing this kind of overlapping will make it easier to read the labels.

Task 3: Writing Documentation for the WDQS User Manual

https://www.mediawiki.org/wiki/Wikidata_query_service/User_Manual

Adding a page to the User Manual that describes:
Features of the Graph Explorer Dialog

• How to conveniently use and navigate inside the Graph Explorer
• Brief implementation details
• The documentation will be added in the final stages of the project.

Task 4: Fixing as many tasks as possible from the Query UI Board

https://phabricator.wikimedia.org/tag/wikidata_query_ui/

Whenever my weekly tasks will be complete, I’ll try to work on fixing bugs from the Backlog and Bugs section on the Wikidata Query UI Board if that would we helpful. I will take input from my mentors about which tasks can be taken up and discuss the implementation on Phabricator before submitting code.

Timeline

Participation

I plan to communicate and with my mentors mostly through Phabricator Tasks and Gerrit Code Review. I will also use #wikimedia-devrel on IRC (Freenode) and the Zulip group to ask for help or converse with the community.

My source code will be published directly to Gerrit Code Review. I will only do this after creating appropriate Phabricator Tasks so that every Gerrit changeset is associated with a Phabricator Task.
I will also make and maintain a blog on which I will post weekly updates about my experiences and progress.

About Me

I’m currently enrolled in the Computer Engineering program at NMIMS University, Mumbai.
I’ll be graduating just when the coding period begins so I will be able to treat this position like a full-time job.

To me, the benefits of this project are two-fold.
The first one is the significance of contributing to MediaWiki and the Wikimedia Foundation.
Making a significant contribution to an open source organization of this stature will be a great step forward for me.
The second one is more personal, it will test the skills I have accumulated over the last few years and I am confident I can finish this project successfully.

My interest in the Open Source movement began around summer last year. I heard about GSoC from a colleague and this is the first time I’m applying for the program. I am eligible for Outreachy as well, but this project is available only with GSoC and I’m keen to work on it. So, I am only planning to apply to MediaWiki for Google Summer of Code.

Past Experience

I have used JavaScript, Java, Python, CSS and HTML extensively for my projects, internships and university coursework.

In the summer of 2016, I completed the Udacity Frontend Web Development Nanodegree.
I completed the 350+ hour course and finished numerous front-end projects. This project, being primarily a frontend project is a perfect opportunity for me to apply the skills that I’ve acquired from the Nanodegree.

In the summer of 2017 I was at Paintcollar as a MEAN Stack Development Intern. I worked on their core e-commerce product and built a Progressive Web App for the product by adding features like background sync, push notifications and caching using Service Workers. I added Social Logins using passport.js for paintcollar.com and pushed many bug fixes related to site responsiveness and performance.

I believe I’m a good candidate for this project because I’ve familiarized myself with the Wikidata Query UI codebase by pushing fixes to it. I’ve used JavaScript extensively when I was at Paintcollar and working in such a fast-paced environment has been instrumental for my growth.

Open Source Contributions

Organization: Humanitarian OpenStreetMap Team
Added Dynamic Markdown to HTML conversion for Documentation using Javascript and ShowdownJS
https://github.com/hotosm/field-campaigner/pull/414

Bug/fixes/Features for MediaWiki

I’ve started to familiarise myself with the query.wikidata.org codebase by making a few bugfixes.

GUI allows to run empty query
T178112
Fix: https://gerrit.wikimedia.org/r/#/c/418723/

Next and previous buttons overflow outside the image modal when the image is too small
T184971
Fix: https://gerrit.wikimedia.org/r/#/c/416227/