=**Profile**=
**Name: **Rammanoj Potla
**Email:** rammanojpotla1608@gmail.com
**MediaWiki Username:** [[ https://phabricator.wikimedia.org/p/rammanojpotla/ | Rammanojpotla ]]
**Github:** [[ https://github.com/rammanoj | rammanoj ]]
**Gerrit:** [[ https://gerrit.wikimedia.org/r/#/q/owner:+rammanoj+status:+merged | rammanoj ]]
**IRC Username:** rammanoj__
**Time zone:** UTC + 5:30 (IST)
**Location:** Kerala, India
**Working Hours (in IST):** Weekdays - 17:00 to 23:30 and Weekends- 09:00 to 23:30
=**Summary**=
There are many developDue to a large list of users contributing to MediaWiki (through patches, commits, etc) via different platforms like **Gerrit**iki, **GitHub** and **Phabricator**it is difficult to track an individual’s activities. Currently, the developercontributor’s activity is tracked byusing [[ https://wikimedia.biterg.io/ | Bitergia's analytics ]].
The project is aboutaims to developing a tool (from scratch) to track the activity of developers andies of contributors by the event organizers. The tool uses the API’APIs of **Gerrit** and **Phabricator** and fetches the contributions of the user. The fetched contributions of a developecontributor will be represented by the tooldisplayed in the form of some graphs.
**Mentors:** @srishakatux, @D3r1ck01, @Tuxology, @samuelguebo
=**Deliverables**=
- **Adding the username:**
- As an initial version, the tool allows uploading the Github- User can upload the list of usernames from **Gerrit**, Gerrit**GitHub** and **Phabricator usernames of the list of many users in a CSV filer** (CSV formatted data).
- There will also be an option provided to add usernames of the Gerrit, GitHub and phabricator of a specific user (i.e for a single user) directly from the tool.
- The usernames from the different platforms will be stored in the tooldatabases.
- **Fetch the user contributions:**
- Whenever an event organizer queries about a developercontributor (along with the platform like Gerrit, /Phabricator). The API will be fetched and the informationn and will be displayed on the screen.
- There can be several filters- Personalized filters can be added while fetching the data from the API.API, So that this canto improve usability.
- In the case of Gerrit these filters can be added:
- **Status** -- Indicates the present status of the issue (i.e merged, needs review etc).
- **time frame** -- fetches the contributions of a user the specified timestamp.
- **Project** -- By the project the user worked with (i.e may be the extension).
- **Display the user data (fetched using the API):**
- There can be different formats in which the data can be displayed like:
- List format
- Graphical format, using the h- Histograms
- Graphical format, using the p- Pie charts
- The user to the tool- Users can select one of the above formats so thatto display the fetched data will be displayed in the above formatsd information according to the need.
=**Implementation**=
- **Adding the usernames of different platforms to the tool**
- In this phase, a CSV file of different usernames of the user can be uploaded. There will be some cases where the CSV file size will be around 400mb or greatercontaining the list of the different users can be uploaded. So,There will be some cases where the CSV file size will be 400mb or more. tTo process the upload of CSV files with higher sizesuch huge data, the entire file will be divided into chunks of small packets and will be uploaded (i.e the chunked -upload will be used).
- This is a sample mockup how the upload file UI can look like
{F28591204}
- The above image is sample mockup displaying different phases in uploading a CSV file to the tool.
- **Fetching the usernames when queried:**
- Whenever a search is made for the username of a specific user in a particular platform (i.e Gerrit or Phabricator) is queried. There can be a recommenderation system used to recommend the usernames (i.e as the event organizer type some alphabets of the username, all the matchingthe tool will autocomplete the usernames will be displayed ins/show the possible list of usernames as a dropdown). So that username from the displayed ones can be selected for fetching the API.
- Whenever a user of the tool enters the username of a developerany contributor along with the platform in which thethey contributions of the developer has to be fetched. There will be some filters provided to the userted, that canthere will be used infilters provided to fetching mor some specific datainformation. So, whenever a user fetches the data, a loading symbol is displayed until the API request is completed.
- The basic UI to the above operation can be alike:
**while selecting the platform**:
{F28591207}
**On searching for usernames:**
{F28591209}
- **Display the user data (fetched using the API):**
- Once the user data is fetched from the corresponding API.APIs, Tthe details will be beingbe displayed default in the list view.
- There can be some other graphical views provided for viewing the data. The user can select one of those views to view- Users will be given different options to visualize the data. In the case of graphical views, some of the chart plotting libraries (like CanvasJS) can be used here.
- So, in the case of charts, they can be plotted likeas **no. of contributions** vs **time**.
- In case of a bar graph, each bar can be represented for aas year initiallys. So, if a specific bar is clicked, a new graph is plotted with all the contributions made in that specific year, each bar representing a month. This can even proceed for the days in the month.
- This can be the basic mockup for the design:
**Bar Graph:**
{F28591219}
**Pie Graph:**
{F28591222}
**Tech stack (possibly used):** pPython (Django/Flask), React.JS, CanvasJs
=**Timeline**=
| **Tasks to be completed** | **Time Period** |
| --------------------------------- | ------------------- |
|**Community bonding period:** In this stage, I will discuss with the mentors about the exact technologies used in developing the tool and their suggestions to move forward in the project. I will be occupied with final exams for ten days. I can not work from 7th May to 17th May. Apart from that, I can spend all my time working on the project. | May 17, 2019 to May 27,th - May 27th [7+ hrs per day] [30+ hrs per week] |
| Start with the first phase of the project and focus more on implementing the functionality part of the first task in this phase. 2019 Implement the feature of basic CSV file uploads and storing the information in the database.|May 27th - June 7th [8 hrs per day][35+ hrs per week]|
| Start with the first phase of the project and focus more on implementing the functionality part of the first task in this phase. Implement the feature of basic CSV file uploads and storing the information in the database.| May 27,|Add some other features to the above functionality like uploading multiple files once etc. 2019 to June 7, 2019Implement the complete UI to the above functionality and getting it reviewed from the mentor.|June 8th - June 17th [8 hrs per day][35+ hrs per week]|
|Add some other features to the above functionality like uploading multiple files once etc. Implement the complete UI to the above functionality and getting it reviewed from the mentor.| June 8 Fix all the bugs in the above functionality, 2019 toalong with minor UI changes.| June 17, 2019|8th - June 23rd [8 hrs per day][35+ hrs per week]|
| Fix all the bugs in the above functionality, along with minor UI changes.| June 18|**Phase I Evaluation**, 2019 to June 23, 2019get the suggestions from the mentor about the above functionalities and fix them all.| June 24th - June 28th [8 hrs per day][35+ hrs per week]|
|**Phase I Evaluation**,Implement a feature the second functionality of recommending the usernames on typing the partial text in the search bar (inefficient manner). get the suggestions from the mentor about the above functionalities and fix them all.| June 24Also, 2019 to June 28,work with the UI of the feature. 2019Add the feature to select the platform from which the contributions have to be displayed.| June 29th - July 6th [6 hrs per day][25+ hrs per week]|
|Implement a feature the second functionality of recommending the usernames on typing the partial text in the search bar (inefficient manner) Add some additional filters for getting more precise information. Also,Implement the actual API request and fetch the information. work with the UI of the featureThe API requests will be implemented as asynchronous ones. Add the feature to select the platform from which the contributions have to be displayed.| June 29So, 2019 to July 6if there are a number of requests to be made, 2019|multiple ones can be made simultaneously without any delay.| July 7th - July 13th [7 hrs per day][30+ hrs per week]|
| Add some additional filters for getting more precise information. Implement the actual API request and fetch the information. The API requests will be implemented as asynchronous ones. So, if there are a number of requests to be made, multiple ones can be made simultaneously without any delay.| July 7Finally, 2019 to July 13,test all the above features added. 2019|Update the UI according to the requirements specified| July 14th - July 21st [7 hrs per day][30+ hrs per week]|
|Finally, test all the above features added. Update the UI according to the requirements specified| July 14|**Phase II Evaluation**, 2019 to July 21, 2019get the suggestions from the mentor about all the above-implemented functionalities and UI and fix them all.| July 22nd - July 26th [7 hrs per day][30+ hrs per week]|
|**Phase II Evaluation**|As the final functionality of the project, get the suggestions fromdisplay the mentor about all the above-implemented functionalities and UI and fixfetched information in the form of them all.| July 22, listview. 2019 to July 26Also, 2019|add the better UI to the list view.| July 26th - August 1st [7 hrs per day][30+ hrs per week]|
|As the final functionality of the project, display the fetched information in the form of the listview. Also, add the better UI to the list view.| July 26,The user can select the format in which the data can be viewed. 2019 to August 1,Chart library will be integrated into the project. 2019The user will be provided with the option to specify the data in the form of pie and bar graphs|August 2nd - August 11th [7 hrs per day][30+ hrs per week]|
|The user can select the format in which the data can be viewed. Chart library will be integrated into the project. The user will be provided with the option to specify the data in the form of pie and bar graphs| August 2, 2019 to August 11, 2019Fix all the bugs in UI for the above functionality| August 12th -August 18th [7 hrs per day][30+ hrs per week]|
|Fix all the bugs in UI for the above func| **Phase III evaluationality.** | August 12, 2019 to19th- August 18, 2019|26th |
=**About Me**=
I am a Junior student 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 gitGit, Gerrit and various other OSS tool. I also have hands-on experience of designing and developing full-fledged responsive web-based application from scratch. I also have hands-onWith more than one year of experience with web development and designing.in contributing to MediaWiki, With more than one year of experience in contributing MediaWiki,I have fixed 16 bugs across various extensions and vector skins. I have fixed around 15 to 16 bugs in various extensions and Vector skin.With my past experience of contributing to Mediawiki and curiosity to explore more features of it, I amI’m eagerly looking forward to start contributing to this project as part of GSoC 2019 and more.
=**Previous Experience**=
- **Designed 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.
- **Developed a Medical HealthCare project:** As a part of the SLAC hackathon, We developed a project that implements some ML algorithms and gives out some ofpredicts the top matching diseases for somrom the given scope of symptoms. There can be rating associated with each and every search result. This app is mainly for doctors, each doctor can add experience for the diagnosis he/she performed. Finally, we were second in the hackathon.
- **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 ]]
**Technical Skills**
**Programming Languages:** Python, JavaScript, PHP, Java, C, C++(Beginner)
**Other Languages:** HTML, CSS
**Frameworks:** ReactJS, ReactJS-material, AngularJS(Beginner) JQuery, Bootstrap, Python-Django, Flask(Beginner)
**Databases:** MySQL, SQLite, Postgresql, MongoDB(Beginner)
**Operating systems:** Windows, Linux
**Queries**
**Have you participated in the Google Summer of Code in the past?**
Yes, I have participated in GSoC last year. I applied for MediaWiki.
**Are you applying to any other organizations this year?**
No, I am not applying to any other organisations except MediaWiki
=**Micro Tasks:**=
- **Task-1:** Using the Gerrit API to fetch user contributions in a specific timeframe, [[ https://github.com/rammanoj/Mediawiki_micro_task/blob/master/task1.py | link[0]
]]
- **Task-2:** Using the Phabricator API to fetch all the user subscriptions and display them in the form of a table (weekly) or histogramin a timeframe, [[ https://github.com/rammanoj/Mediawiki_micro_task/blob/master/task2.py | link1]
- **Task-3:** To design some basic mockups to the tool, ]]The mockups are added along with the proposal.
[0] - https://github.com/rammanoj/Mediawiki_micro_task/blob/master/task1.py
- **Task-3:** To design some basic mockups to the tool,[1] - https://github.com/rammanoj/Mediawiki_micro_task/blob/master/task2.py
**Note: All the above images provided are just wireframes. The mockups are added along with the proposal.colour standards may change according to the design requirements.**
=**Mediawiki Merged patches:**=
- Fix HTML table format breakage
- **Extension:** [[ https://query.wikidata.org/ | Wikidata Query UI ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/wikidata/query/gui/+/426756/
- Add an option to download WDQS results in HTML table format
- **Extension:** [[ https://query.wikidata.org/ | Wikidata Query UI ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/wikidata/query/gui/+/423339/
- Fix text and image name truncation in image grid
- **Extension:** [[ https://query.wikidata.org/ | Wikidata Query UI ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/wikidata/query/gui/+/420236/
- Translate "Filter" and "show" buttons dynamically
- **Extension:** [[ https://query.wikidata.org/ | Wikidata Query UI ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/wikidata/query/gui/+/420172/
- Enable "limit" button to translate
- **Extension:** [[ https://query.wikidata.org/ | Wikidata Query UI ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/wikidata/query/gui/+/417825/
- Enable non-ascii letters in expression error
- **Extension:** [[ https://www.mediawiki.org/wiki/Extension:ParserFunctions | Parser functions ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/ParserFunctions/+/407596/
- Improve "Submit" button of Special: ViewData to look better
- **Extension:** [[ https://www.mediawiki.org/wiki/Extension:Cargo | Cargo ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/Cargo/+/410104/
- Enable all categories in Parent category drop-down.
- **Extension:** [[ https://www.mediawiki.org/wiki/Extension:Page_Forms | Page Forms ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/PageForms/+/410098/
- Vector: Flip horizontal nav elements with CSS
- **Skin:** [[ https://www.mediawiki.org/wiki/Skin:Vector | Vector ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/379577/
- Tabs (Read / View Source / Search) collapsed under more in resolution < 700px
- **Skin:** [[ https://www.mediawiki.org/wiki/Skin:Vector | Vector ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/368803/
- Proper indentation applied to horizontal links in the vector skin
- **Skin:** [[ https://www.mediawiki.org/wiki/Skin:Vector | Vector ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/344976/
- Audit/update headers in files
- **Extension:** [[ https://www.mediawiki.org/wiki/Extension:PdfHandler | Pdf Handler ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/PdfHandler/+/352122/
- Audit/update headers in files
- **Extension:** [[ https://www.mediawiki.org/wiki/Extension:PageTriage | Page Triage ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/PageTriage/+/352120/
- Audit/update headers in files
- **Extension:** [[ https://www.mediawiki.org/wiki/Extension:PageTriage | Page Triage ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/selenium/+/348935/
- mediawiki_selenium should document SauceLabs usage
- **Extension:** [[ https://www.mediawiki.org/wiki/Selenium | Selenium ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/PageTriage/+/352120/
- Ruby gem documentation should state license
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/ruby/api/+/348225/
- Audit/update headers in files
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/Wikibase/+/352121/
- Ruby gem documentation should state license
- **Extension:** [[ https://www.mediawiki.org/wiki/Selenium | Selenium ]]
- **Gerrit link:** https://gerrit.wikimedia.org/r/#/c/mediawiki/selenium/+/348222/
=**References:**=
https://www.figma.com/ (for designing some mockups)
https://dribbble.com/ (To view the available ones).