Page MenuHomePhabricator

Graph editing in VisualEditor
Closed, ResolvedPublic0 Estimated Story Points



Name: Frédéric Bolduc
IRC or IM networks/handle(s): ferdbold on freenode
Web Page / Blog / Microblog / Portfolio: Personal portfolio being developed, you can look at some of my work in the meantime on LinkedIn (French alert!) and GitHub
Resume (optional):
Location: Quebec
Typical working hours: 9 to 17, GMT-5


This project aims to develop a module for Extension:Graph which will allow users to edit Vega specifications (in the form of JSON strings) from a tailored UI inside VisualEditor, without having to open up the page source, thus reducing user-error risk. Currently this feature is implemented only in the "edit source" mode in the Graph namespace - after hitting "show preview", graph will auto-update every time the definition is changed.

Mentors: @Mooeypoo and @Mvolz


Right now, Vega specifiations are considered by VE as a alien extension and are not rendered at all in the editor. I will divide this project into 5 core steps, which will need to be completed sequentially, but are all viable on their own (so the project could be shipped as-is at the end of any step):

  1. Enable Vega support into VisualEditor, in order for graphs to be properly rendered inside the edition page
  2. Enable real-time Vega previews in VE during edition, for all supported chart types. (At this point, this will work through raw JSON edition, but will be phased out as the UI develops)
  3. Develop a Vega parser allowing the module to read and edit bar chart specifications
  4. Implement an extensible UI dialog inside VE which can support read and edit operations on Vega specifications
  5. Extend progressively the module to other chart types (namely area charts, point charts, pie charts, maps and force-directed graphs)

Project timetable

COMMUNITY BONDING Research on MV extension development, basic prototyping**
Week 1 - May 25Enable basic Vega display on VIsualEditor, integrate basic editor dialog displaying raw JSON
Week 2 - June 1stReload Vega display on change, switch between basic graph types (bar, area and point charts)
Week 3 - June 8Basic UI for bar chart editing
Week 4 - June 15Edit a bar chart Vega spec and have its changes applied
Week 5 - June 22(continued) Edit a bar chart Vega spec and have its changes applied
Week 6 - June 29Create/delete a graph (from copying an existing Vega spec or from scratch)
Week 7 - July 6Allow stacked bar and area charts
Week 8 - July 13Basic UI to edit a pie chart Vega spec
Week 9 - July 20Basic UI to edit a world map Vega spec
Week 10 - July 27Basic UI to edit a force-directed Vega spec
Week 11 - August 3Feature freeze, strengthen unit testing, bug fixing, QA
Week 12 - August 10Bug fixing, QA, strengthen documentation

Early UI mockups

  • Participation

    I've been actively using Git (and other VCSes) for a few years now, so I've got the basic code review workflow and collaboration aspect pretty well established.

    While I'll be working on this project, I'll submit my code for review daily to Gerrit. I like to keep things backed up, and doing this daily ensures that other developers will be able to keep track of my work much better.

    Also, these are the additionnal means I plan to use to communicate progress:

    • IRC: I'll stay online on freenode in #mediawiki-visualeditor as ferdbold during my working hours
    • I'll setup up a personal blog on, on which I will post a weekly summary of my work.
    • I will post all weekly summaries and reports on this MediaWiki page.

    About you

    I'm a video game development undergrad in my second year at Université du Québec à Chicoutimi.
    In 2013, I graduated in Multimedia Integration (which is pretty much fancy-talk for front-end web development) at Cégep de Sainte-Foy.

    How did you hear about Google Summer of Code?
    I actually don't remember how I first heard about Google Summer of Code, I just know it was a while ago when I didn't know how to code and it looked like a great experience. Last year though, I went to a local dev meetup where it was mentioned, but it was already past the student application deadline. So here I am this year ;)

    Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the duration of the program?
    I am heavily involved in a personal project of mine named Terra Arcana, a live-action role-playing organization who creates events every summer and supports the local LARP community. This year, our events will be held at the end of May and mid-August, which means I will have to devote some more time to them during these periods. Overall though, this should not hinder significantly the time I intend to devote to GSoC.
    (Psst... I actually made that website!)

    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?
    What initially sparked my interest for this particular project was that I've previously developed a node-based graph editor with MooTools and KineticJS on Terra Arcana's website, fetching . This editor is used as a skill tree that players of a role-playing game can use to customize their characters (inspired by Path of Exile's own web-based passive skill tree). I've really enjoyed doing this, so this task looked like it'd be right up my sleeve!

    (This node-based editor is available at Sadly, it's kind of hard to find right now, since you have to actually make an account on the website and then make a new character and access their Skills ("Compétences" in French) page.)

    As a video game developer, I like to work daily with visual assets and UI is one of the aspects of game dev that I enjoy the most. As such, I really like working with graphs and statistics, as well as design and deploy UI. I have the confidence that I have the dedication and patience needed to make this extension reliable and fun to use.

    Past experience
    Since my Cégep graduation in 2013, I have been working on web design and development with multiple agencies, as well as by myself. I've mainly dabbled in WordPress development, as well as a lot of responsive web design, as I've often been tasked to take the lead in front-end integration. While I haven't worked on any open source projects yet, I'm confident that my prior work experience will serve me well. Having already worked as a freelance designer and developer makes me even more confidence that I am able to give it my all during the entire summer.

    I'm also a big fan of game jams. I've done almost ten of them now, including Global Game Jam, and I'll be adding the Ludum Dare to that list in three weeks. I always have a blast doing jams, and most of my games' source code is available on my GitHub account (since these projects are small, I don't really count them as open source experience).

    I've also participated in various competitions and hackathons, such as Hack Québec, Ubisoft's Academia and the CS Games. These kinds of events helped round out my skills, as I've picked up useful knowledge on domains like VCSes, teamwork (especially with strangers!) and code rigor.

    Other info

    I also have a Bitbucket account, though I'm mostly working with Github now so stuff on there tend to be old. For the curious only ;)

    Microtasks submitted

    Related Objects

    Event Timeline

    There are a very large number of changes, so older changes are hidden. Show Older Changes

    Ooh a general JSON editor would be good but pretty challenging, considering the UI and UX we'd like to have. In this case I think we'll start with something more like TemplateData dialog which is expecting a specific structure of JSON and handles special cases as well as validation for the extension.

    We'll potentially run into Very Hard Problems(tm) with a general JSON editor, but even more importantly, we'll likely have to sacrifice a large chunk of better user experience if it's too generic rather than a dialog that expects Graph data and lets the user edit with specific fields.

    (A general, perhaps abstract and extendible JSON editor might be nice in the future-future, though.)

    We're holding an IRC meeting on March 25, at 1700 UTC for prospective GSoC and Outreachy participants with Wikimedia, on #wikimedia-office channel. Do join us!

    Hello! The IRC meeting tomorrow has been shifted to #wikimedia-ect channel. Looking forward to seeing you there. :)

    FYI, the three blocking tasks I added are potential microtasks for this project:


    T93908 is slightly more relevant to the skills you'll need to use as it is a VisualEditor change. The other two are both in a node service called graphoid which is being added to the graph extension; it's less strictly relevant to the work you'd immediately be doing, but it is in javascript and it could potentially be useful later on in the project when/if the rendering portion is gotten to.

    Also see comments related to the project on the sub-task

    I'd suggest that the visual editing UI focus on presentation rather than raw data, since the latter pertain to Wikidata, not to Wikipedia articles.

    I think this could share some work with T29156/T29157.

    Unfortunately no - those examples use JavaScript, which we cannot expose in Graphs due to privacy and security reasons. Vega is specifically designed as a shield between declarative (JSON) world and javascript. Vega is trying to come up with a interactions model - see here, but that work has just began, and they have not made any of it public yet.

    Heads up: - Vega team has posted a number of great editing tools (alpha/beta quality). We don't want to re-do what they have done. Take a look at Lyra and Polestar (works in Chrome only ATM).

    I've seen Lyra so far, didn't know about Polestar and Voyager. I will definitely check this out, thanks!


    End of GSoC is fast approaching. 17 August is "Suggested pencils down" deadline and 21 August is "Firm pencils down" deadline. It is expected that you don't dive into new features which might take longer than two weeks to complete and instead work on polishing up your project, testing thoroughly and getting your code merged into the main branch. I hope this project is almost complete so you can merge it and make it available to everyone as quickly as possible. :)

    A few questions (for both mentors and student):

    • Are you confident in completing the project on time?
    • By when do you think you can merge the code, if at all?
    • Are there any major blockers or important missing features?

    We are looking for projects which are (nearly) complete to feature on our post on Wikimedia and Google OSPO's blogs (for example: If you're interested in getting yours up there, hurry up and get this finished!

    The hard deadline on getting code merged is September. T101393: Goal: All completed GSoC and Outreachy projects have code merged and deployed by September for details.

    We'll be asking the students to demo their projects towards the end of the program as well.

    Good luck!

    Regarding the questions:

    • We're confident we'll complete the project goals.
    • We're already merging the code (large pieces of it are merged already.) hopefully it will be merged before the end of the program - if not, likely very very close to that date.
    • This is the type of project that "never ends" (there's always more we can do) - but if we stick to the GSoC scope, we are well within the timeline and what we want to achieve.

    I encourage ferdbold to consider working to have this project featured on the blogs. I think this project is perfect for it.

    Thanks for the information, @Mooeypoo! I'm curious if by

    We're already merging the code (large pieces of it are merged already.)

    you meant merging into production? If not, when can we expect this to be possibly merged into production?

    @ferdbold, could you write up a description of the project and a relevant screenshot so I can include it in the blogpost? Thanks!

    The Graph extension is available in production, so by merging the code it's actually in production already.

    See a small test here for instance:

    You can now edit graphs in VisualEditor (yay!) We are still working on the next iteration of it (options for the user rather than just editing a json string) but the work is already partially available in master and production.

    Awesome. This looks pretty cool! :D

    Hi, I have associated two blocked-by tasks with this project.

    For the student:

    1. Please go through the checklist in the end-term evaluation and fill out the fields which require any links. The checkboxes are for the mentor(s) only. Adding information on the past projects page is your task.
    2. Ensure that you have completed all the items listed in the end-term evaluation task. If there's a strong reason about why a particular item was not completed, please comment on the task and we shall look into it.
    3. Wrap-up report is mandatory and so is a demo-able link to the project (either in production or in a demo server).
    4. If you want your project to be featured in the blogpost on the Google OSPO blog, kindly comment back with a short, catchy description of the project along with a screenshot.

    Hi - I take it that this project consisted of changes to the Graph extension ( If so, is that extension's documentation page going to be updated to note these changes?

    @Yaron_Koren Documentation has been added to the page!

    Hi @ferdbold, @Mooeypoo, @Mvolz - is this task good to be resolved now or anything significant remains?

    Jdforrester-WMF subscribed.

    Awesome work, thanks @ferdbold et al.