= **Profile** =
**Name**: Rammanoj Potla
**Email**: rammanojpotla1608@gmail.com
**Mediawiki Username**: [[ https://phabricator.wikimedia.org/p/rammanojpotla/ | Rammanojpotla ]]
**Github**: [[ https://github.com/rammanoj/ | Github_rammanoj ]]
**Gerrit**: [[ https://gerrit.wikimedia.org/r/#/q/rammanoj | 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 [[ https://www.wikidata.org/wiki/Wikidata:Main_Page | 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:**
{F16017091}
**After:**
{F16017100}
**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
{F16017114}
**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:**
{F16017131}
**After:**
{F16017140}
- 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**
| **Tasks to be completed** | **Time Period** |
| --------------------------------- | ------------------- |
|**Community bonding period:** Understanding the Wikidata codebase in a better manner through bug fixes, discuss the project with mentors and take their suggestions to move forward with the project. | 25 April to 13 May |
| Implement the feature of dragging the Explorer Dialog. | 14 May to 22 May |
| Allow display of multiple Explorer Dialogs once. | 23 May to 2 June |
| Prevent simultaneous opening of multiple explorers for a single query result. Test the updated and newly added features. | 3 June to 10 June |
|** Phase- I evaluation** | 11 June to 15 June
| Make the Explorer Dialog resizable. | 16 June to 20 June |
| Improving the responsiveness of the Explorer Dialog. One of the ways of doing it is to resize the content inside Explorer according to the size of the Explorer at every instant. | 21 June to 30 June |
| Implementing the feature of displaying and expanding the incoming links in Graph Explorer. Test the proper working of newly added features and ensure that no issues arose. | 1 July to 8 July |
| **Phase- II evaluation** | 9 July to 13 July |
| Set a minimum zoom level to prevent the disappearance of graph. Also set a limit to maximum zoom level to prevent disappearance of labels on nodes and edges. | 14 July to 19 July |
| Allow expansion of multiple nodes side by side at same time | 20 July to 26 July |
| Testing the newly added features and also implement some other features to improve the graph UI if required. | 27 July to 2 August |
| Updating Documentation of the newly added features and perform final tests for new features | 3 August to 6 August |
| **Final evaluation** | 6 August to 14 August |
##**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: [[ https://github.com/rammanoj/Shopping-cart | 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