Profile

Name: Rammanoj Potla
Email: rammanojpotla1608@gmail.com
Mediawiki Username: Rammanojpotla
Github: Github_rammanoj
Gerrit: Gerrit_rammanoj
Github username: rammanoj
IRC username: rammanoj___
Time zone: UTC + 5:30 (IST)
Location: Kerala, India
Working Hours (in IST): Weekdays - 17:00 to 22:30 and Weekends- 09:00 to 22:30

Synopsis

Wikidata Query Service (WDQS) allows to query against the Wikidata data set using SPARQL queries. This project aims to improve the user interface of Wikidata Query Service by enhancing the Explorer Dialog and Graph Explorer.

Existing Features:

1. Explorer Dialog uses a bootstrap panel to display queried result. The panel gets updated every time when a result is chosen from the list of displayed results.

2. Graph Explorer displays a network to a queried result along with outgoing links and also allows the expansion of outgoing links.

I propose to improve both the explorers. In Explorer Dialog, multiple Explorer Dialogs will be utilized to display any queried results. There could also be some features annexed such as, making the Explorer Dialog draggable and resizable. In the case of Graphical Explorer, the incoming links to the nodes would be enabled. Whenever clicked, these incoming links would be expanded. There are also be some other feature implementations which improve the responsiveness of the design. Implementing these features enrich the UX and ease of access to the Wikidata Query Service.

Mentors: @Jonas , @Lucas_Werkmeister_WMDE .

Deliverables and Core Objectives

1. Allow Multiple Explorer Dialogs

• Initially, a draggable feature which facilitates drag or movement of an Explorer Dialog across the screen will be implemented.

• Later, a feature to display multiple Explorer Dialogs would be added. Adding it allows to have multiple explorers and displays the results with various Explorer Dialogs. It increases the user's accessibility.

• Displaying multiple Explorer Dialogs simultaneously for a single query result has to be disabled. Therefore whenever a query result is clicked, instead of opening a new Explorer Dialog, an already executing Explorer Dialog would be displayed.

2. Increase the Responsiveness of Explorer Dialog

• The Explorer Dialog will be made resizable. A JQuery resizable event could be used for this task. This facilitates the use of various explorers simultaneously with varying sizes.

• Receptivity of the Explorer Dialogs would be improved by resizing the content inside the Explorer Dialog whenever the Explorer Dialog is resized. This improves the usability of the application.

3. Enable incoming links to Query results

• In the Graphical representation of queried data, the display of the incoming links would be enabled. These incoming links should also be expandable like the present outgoing links.

• Performing zoom-out operation multiple times lead to the disappearance of the network. Sometimes it doesn’t appears till the page is reloaded. So there could be a limit set to the zoom-out operation of the network.

• Performing zoom-in operation is fine to a certain extent. But after a certain zoom levels, the network loses the labels on the nodes and edges. It simply displays empty nodes and edges with the directions from one node to another. So there would be a limit set to zoom-in operation.

• Existing code supports the expansion of single node, once. This has to be modified by enabling expansion of multiple nodes at the same time. This advances the usability of GUI of the application.

4. Update User Documentation

• The documentation of the enhanced and newly annexed features will be updated to Wikidata Query Service documentation.

Implementation

Allow Multiple Explorer Dialogs

• Enabling draggable property to the Explorer Dialog will be done. Explorer Dialog is designed using a bootstrap panel. Whenever a user attempts to drag Explorer Dialog from it’s head, the explorer moves on the screen. To accomplish this feature the 'top' and 'left' stylings are added. These two properties get dynamically updated whenever the Explorer Dialog is dragged.

• Creation of multiple explorers will be allowed. This can be done by creating an Explorer Dialog dynamically and appending it to index page whenever needed. In the same way, these explorers are dynamically removed whenever the close event occurs. To distinguish one Explorer Dialog from another an id would be added to each Explorer Dialog. A list of ids of all the currently executing Explorer Dialogs is maintained. Whenever a new Explorer Dialog is displayed, it's id is added to the list and whenever an Explorer Dialog is closed, it's id is removed from the list.

• To prevent opening of same Explorer Dialog multiple times the list that consists of ids of all currently running Explorer Dialogs is used. Before opening a new Explorer Dialog, the list is traversed and checked if the id of newly opening Explorer Dialog is already in the list. If there is no such id in the list then a new Explorer Dialog would be opened, else the same Explorer Dialog would be displayed again.

• Ultimately, the UI resembles in the following manner

Before:

After:

Increase the Responsiveness of Explorer Dialogs

• A resizable event could be added to the Explorer Dialog. This can be done by adding a JQuery resizable event to the Explorer Dialog.

• Content inside the Explorer Dialog has to be resized according to the size of the Explorer Dialog. This can be accomplished by obtaining the size of the Explorer whenever a resize event is occurred, then it resizes the content inside the Explorer accordingly.

• Finally, after above changes, the UI would be updated in the following manner

Enable incoming links to Query results

• The graph to the queried results is designed using Vis.js which renders the network to the canvas. The two files GraphResultBrowser.js and GraphResultBrowserNodeBrowser.js are used in creating a graphical network. This can be done by creating a new Vis Network and maintaining the network(i.e handling the events occurred). Similar to the outgoing links the incoming links will have similar properties in almost all aspects except the direction.The direction would be reversed by updating the ‘arrows’ property in Vis network and some other code changes. After this change, the network looks in the following manner.

Before:

After:

• Existing code does not limit the zoom-out property. This result in the disappearance of the network on performing multiple zoom-out operations. This can be resolved by setting a minimum limit to the zoomable level through which the graph doesn’t zoom-out beyond that level. This can be done by getting the current zoom level by getScale() method of Vis.js and changing the zoom level if it is less than a specified number.

• The network built using Vis.js has a native property of losing the labels on the nodes and edges after a certain zoom level. To prevent this a maximum limit to the zoom-in level would be set. Whenever a user tries to zoom-in above the maximum zoom-in level, the network resets itself to the maximum zoom level. There is an inbuilt function provided by Vis.js named moveTo(), used to control the zoom and animations of the network. So whenever a user tries to zoom-in above the maximum zoom level moveTo() function resets it.

• Existing code only permits expansion of a single node once, this has be updated by facilitating the expansion of multiple nodes at the same time.

Timeline

About Me

I am a sophomore in Computer Science and Engineering at Amrita University, Amritapuri, India. Apart from academics, I contribute to Free and Open Source Softwares. I am a member of the FOSS club of our university, FOSS@Amrita. I have solid experience with git, Gerrit and various other OSS tool. I also have hands-on experience with web development and designing. With more than one year of experience in contributing MediaWiki, I have fixed about 11 bugs in various extensions and Vector skin. I am eagerly looking forward to start contributing to the Wikidata project as part of GSoC 2018 and more.

Previous Experience

Designed a school management software:

Designed a web application for schools. This includes an admin panel where marks, attendance of students along with current activities and announcements, can be hosted. This also contains a parent portal through which parents can get access to their wards marks and attendance. Apart from HTML and CSS, I mainly used JavaScript, JQuery, Bootstrap for the front-end design of the site. For the back-end PHP and MySQL were used.

Designed a Shopping cart:

Designed a simple shopping cart application where the users can view, cart and buy items. There is a simple login panel where the users have to log in to access the above features. This login page validation is done using AngularJS. I mainly used HTML, CSS, javascript and AngularJS in this application. Github: repo link

Technical Skills

Programming Languages: JavaScript, PHP, Java, C, Python
Other Languages: HTML, CSS
Frameworks: JQuery, Bootstrap, Python-Django
Databases: MySQL, SQLite
Operating systems: Windows, Linux

Queries

Have you participated in Google Summer of Code in the past?
No.

Have you applied to GSoC in the past?
No.

Are you applying to any other organizations this year?
No.

References:

http://visjs.org/docs/network/

https://api.jquery.com/

https://getbootstrap.com/docs/3.3/components/#panels

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