Implement edit capability for the [[ https://www.mediawiki.org/wiki/Extension:Graph/Demo | graph extension ]] JSON definition from inside Visual Editor. User should be able not only edit the definition from VE, but also see what it will look like in real time. 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## Profile
**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](https://linkedin.com/in/bolducfrederic) (French alert!) and [GitHub](https://www.github.com/ferdbold)
**Resume (optional):** http://bit.ly/1IkmK2K
**Typical working hours:** 9 to 17, GMT-5
This project aims to develop a module for [[ https://www.mediawiki.org/wiki/Extension:Graph | Extension:Graph ]] which will allow users to edit [[ http://trifacta.github.io/vega/ | Vega ]] specifications (in the form of JSON strings) from a tailored UI inside [[ https://www.mediawiki.org/wiki/Extension:VisualEditor | 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
| **WEEK** | **TASK**
| | **COMMUNITY BONDING** Research on MV extension development, basic prototyping**
| Week 1 - May 25 | Enable basic Vega display on VIsualEditor, integrate basic editor dialog displaying raw JSON
| Week 2 - June 1st | Reload Vega display on change, switch between basic graph types (bar, area and point charts)
| Week 3 - June 8 | Basic UI for bar chart editing
| Week 4 - June 15 | Edit 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
| | **MIDTERM EVALUATION**
| Week 6 - June 29 | Create/delete a graph (from copying an existing Vega spec or from scratch)
| Week 7 - July 6 | Allow stacked bar and area charts
| Week 8 - July 13 | Basic UI to edit a pie chart Vega spec
| Week 9 - July 20 | Basic UI to edit a world map Vega spec
| Week 10 - July 27 | Basic UI to edit a force-directed Vega spec
| Week 11 - August 3 | **Feature freeze**, strengthen unit testing, bug fixing, QA
| Week 12 - August 10 | Bug fixing, QA, strengthen documentation
| | **FINAL EVALUATION**
## Early UI mockups
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 **ferdbold.com**, on which I will post a weekly summary of my work.~~
- I will post all weekly summaries and reports on [[ https://www.mediawiki.org/wiki/User:Ferdbold/GSoC_2015_-_Enable_VisualEditor_support_in_Graph_extension | this MediaWiki page ]].
- Primary mentor: @Mooeypoo## About you
I'm a video game development undergrad in my second year at Université du Québec à Chicoutimi.
- Co-mentor: @MvolzIn 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](http://www.gnterraarcana.com), 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](http://www.pathofexile.com/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 http://www.gnterraarcana.com. 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.
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
### Microtasks submitted
- Estimated time for a senior contributor:https://gerrit.wikimedia.org/r/#/c/200177/
- Suggested microtasks: T92868https://gerrit.wikimedia.org/r/#/c/200319/