Page MenuHomePhabricator

Outreachy and GSoC 2015 Proposal for Graph editing in Visual Editor
Closed, DuplicatePublic


Graph Editing in VisualEditor

Phabricator Report: T89287

Contact Information

Name: Richa Rupela
Channels: #wikimedia-dev,MediaWiki-General,#mediawiki-visualeditor
IRC nick: rits
Microblog (twitter): @RitsyRicha
Location: Bikaner,India (UTC+5:30)
Typical working hours: 10am to 5pm


Graphs are used widely for representing discrete data in the bar charts format and many other formats. The Graph extension allows a <graph> tag or entire page to describe data visualization in a JSON format that renders a Vega-based graph. Visual editor treats graph extension as a alien node hence, user cannot see it in the visual editor nor it can be moved or edited.
The project focuses on enabling the support for editing the graphs in visual editor and the other goal is to support real time rendering of the edits done on the graphs.

Possible mentors

Moriel Schottlender and Marielle Volz


Graphs are rendered in the JSON format through the Parsoid, but visual editor gives it a height and width of 0px because JSON format could not be rendered through VE. Firstly the graph data in the JSON format has to be rendered in VE so that the graph will be visible to the users.
Next support to be added is editing capability of the visible graph, the values changed by the users has to be checked first whether they are valid or not. Editing JSON by hand is fiddly and prone to error, so to use a JSON checker by validating it through VE and then through the Vega and then showing a pop-up if the edited JSON was invalid.
The next milestone for the project which will be done if the time allows is to support the real time rendering of the graph editing.

Development Plan

Phase 1
Parsing the JSON data coming from Parsoid in visual editor, making it a viewable node in the visual editor.
Phase 2
Adding edit,move,delete functionality to the graph. Edits would be done directly into the JSON data initially, which is a very error prone task hence need to be handled by validating the edits done.
Phase 3
Finally editing the graph will then be done through a user interface depicting all the parameters used in the particular graph. Validating the user edits is the most important task, this will be done by rendering the edits of user and checking it through a JSON validator. Giving a popup as if the JSON edited by the user was invalid and then reverting the graph to its initial state.
The optional task will be to add the real time rendering which will be included after completing these 3 phases.


27April-25MayCommunity bonding period.Getting in touch with mentors and read up the coding practices followed in the organisation and get well acquainted with the visual editor community. Discussing about the JSON parsing for visual editor and other features of the project.
25May-20JuneAdding viewing capability of alien graph nodes to visual editor. Graphs should then be visible to the users in visual editor. Testing the code in different environments. Submitting patches to gerrit.
21JuneMid-Term Evaluation: Submission of code for the mid-term evaluation.
22June-3JulySolving the issues if occurs any, related to the display of the graphs as every type of the graph should be visible to the user. Start adding edit capability to graphs, Submitting patches on gerrit and pushing code to github.
4July-30JulyCompleting the edit support of graphs to visual editor. Documenting the work done.
30July-20AugustValidating the edits done by user and showing a popup if the edit done was invalid. Optimizing the code and completing the documentation work.
20August-28AugustPencil down state, final testing of the code. Final documentation of the project and final tweaks.


I will be active on irc in my working hours as well as on the other times of the day if their comes a issue in the project. Communicating with mentors and organization members about the project and updating about all the progress done. I will prefer git for keeping my work and submit patch sets to gerrit. I will update all the work done during the coding phase through blogs and be in continuous touch with mentors through mails and Skype.

About me

  • Education: I am final year student student pursuing bachelor of engineering and technology in Information and Technology stream at Govt. Engineering College Bikaner, Rajasthan Technical University, India.
  • How did you hear about this program?: I heard about outreachy from my senior who shared this information through social media and i was aware of GSoC through the FOSS events happening in my college.
  • Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the duration of the program?: I have no prior commitments between 28April-28August. My exams will end on 30April and after that i have no other commitments. I will be working around 35-40 hours every week on the project.
  • We advise all candidates eligible to Google Summer of Code and FOSS Outreach Program for Women to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?: Yes, I am applying for GSoC and Outreachy both.
  • We don't just care about your project -- you are a person, and that matters to us! What drives you? What makes you want to make this the most awesomest wiki enhancement ever?: As the project intend to add a feature which will definitely enhance the user experience of working on visual editor. Graphs tend to represent all the discrete data and are used in almost all fields, hence giving users a experience of editing through visual editor will be awesomest wiki enhancement for me ever.

Past experience

Please describe your experience with any other FOSS projects as a user and as a contributor:
This is my first effort to contribution to a FOSS project as I am a newbie to Open source community. As a user, I have been working Ubuntu as my OS and have been using open source tools for my works. I have just started making contributions. Here is the link to my initial contribution: Rits

Please describe any relevant projects that you have worked on previously and what knowledge you gained from working on them (include links):
I have created a web site using the php framework codeIgniter, it is a blog site in which the user can comment on the blogs. It deploys real time rendering through ajax, JavaScript and Jquery has been used as the front-end and php in the backend. The database is handled through MySQL.Through this project I have learned about how to use a framework, and I have learned ajax through this project.
Link to the project: BlogSite

Other project I have worked on is a Educational Android application name GRE Wordlist, the app deploys many featurs as the database of 3000 frequent words asked in GRE, categorization of words and wikitionary search using mediawiki API.
Link of the project: GRE Wordlist

Do you have any past experience working in open source projects (MediaWiki or otherwise)? If so, tell us about it! If you have already written a feature or bugfix in a Wikimedia technology such as MediaWiki, link to it here; we will give strong preference to candidates who have done so.
As my early contribution, some of the patches I have submitted are: rits

Other info

GitHub profile: Ritsyy
Patch Merged: rits

Microstask Submitted:

Bug: T92868

Event Timeline

Rits claimed this task.
Rits raised the priority of this task from to Medium.
Rits updated the task description. (Show Details)
Rits added subscribers: ferdbold, Rits, Ankita-ks and 11 others.

Hey @Rits could you fill up the description for the proposal please? This is the application template.

The sooner you complete it, the better. Thanks!

Rits set Security to None.