=Profile Information
Name: Prssanna Desai
IRC nickname: prssanna
Email: prssud@gmail.com
Github: https://github.com/prssanna
Resume: [[ https://drive.google.com/file/d/1ra46fLULlnaDLklzaKtN4amYoCF7AMad/view?usp=sharing | Link ]]
Phabricator: [[ https://phabricator.wikimedia.org/p/prssanna/| 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** [[ https://prssanna.xyz:8080 | 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.
{F16202857}//Fig. Inside an Explorer Dialog with Navigation Controls, Zoom Options and Auto-Fit
//[[ http://visjs.org/examples/network/other/navigation.html | 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.
{F16203129} //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
| **Period** | **Task** |
|------------ |-----------|
|April 23 to May 14|**Community bonding period**. Search for resources and existing examples for resizable and draggable dialogs. Become more fluent with the vis.js library. Add and organize the required project tasks in Phabricator. Create a blog for posting weekly updates about my progress and experiences. Discuss UI decisions with mentors and share final mockups wherever possible.|
|May 14 to May 20|Start working on making the Explorer Dialog resizable and draggable. |
|May 21 to May 27| Document and test the above feature as required.|
|May 28 to June 3|Allow multiple Explorer Dialogs to be shown at once. Discuss the implementation with the mentor(s)/community.|
|June 4 to June 10|Test the new features of the Explorer Dialog and ensure that the responsiveness of the website has not been affected by the new features. Make the Explorer Dialog responsive and ensure that the Dialogs remain usable on mobile devices. |
|June 11 to June 15|**Phase I evaluation**|
|June 16 to June 24|Study the feedback from the evaluation and make the necessary changes. Allow to show and expand incoming links on the Graph Explorer. Test this feature extensively for all possible kinds of queries. |
|June 25 to July 8|Integrate vis.js Keyboard and Navigation Controls for Better Accessibility in the Graph Explorer. Take input from the community about the working of this feature.|
|July 9 to July 13|**Phase II evaluation**|
|July 14 to July 22| Study the feedback received from the Phase II evaluation. Perform the requested changes and improvements. Implement the auto-zoom feature for the Graph Explorer.|
|July 23 to July 29| Disallow dragging nodes outside the Explorer Dialog. Fix all issues related to the responsiveness of the website.|
|July 30 to Aug 5| Add a section about the Explorer to the User Manual on the [[ https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Wikidata_Query_Help | Wikidata Help Portal. ]]|
|Aug 6 to Aug 14| **Final evaluation**|
|Aug 14 to Aug 21|**Mentors submit final student evaluations.**|
|Aug 22|**Final results of Google Summer of Code 2017 announced**|
|--------------|-------------------|
==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 [[ https://wikimedia.zulipchat.com | 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 [[ https://drive.google.com/file/d/0B0M0ncbHUUJ6RzhvRmhLX3duZkU/view?usp=sharing | completed ]] the [[ https://in.udacity.com/course/front-end-web-developer-nanodegree--nd001 | 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 [[ https://paintcollar.com | 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: [[ https://www.hotosm.org/ | 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/