New & Shiny Metric Editor [Hackathon Project]

Petr Volny

As you probably know GoodData hosted The All Data Hackathon event that took place Thursday April 10 to Friday 11. It was 27 hours filled with brainstorming, hacking and fun and I was one of the hackers that took part in it. I was in a team with my colleague and friend Adam Kloboucnik and we decided our hackathon project would be new & shiny metric editor. We knew that metric editor is a bit older part of our UI and that it needed a fresh new approach.

Hacking
Adam Kloboucnik hacking on the new metric editor.

Main Features

We started with identifying pains of current metric editor and a set of features for our new prototype quickly started to take good shape. We ended up with few main goals for our hackathon project and started to code. The desired features were:

  • On-the-fly MAQL validation
  • MAQL code completion of metrics and attributes
  • Live preview of a metric being created sliced by an attribute of choice
  • Switching between simple visualizations (line chart, bar chart) of a computed report from that metric

Metric Editor
Metric editor on the left. Preview of an execution on the right.

Implementation

We wanted to start fresh and create our project as a separate Ember.js application and our new GD Labs environment was identified as the best place for achieving that. We quickly prototyped two panel UI layout (MAQL editor left; report preview right) using Twitter Bootstrap. For the MAQL editor we leveraged great CodeMirror project which is a great all-purpose text editor written in javascript that can be extend with variaty of addons (we used one of them to implement the autocompletion feature). We also had an opportunity to battle test our new gooddata-js javascript library that made using of GD REST API a seamless experience. For the visualization of the computation preview we used ember-table which is an extendable table component with features like lazy loading written in Ember.js.

Autocomplete
Autocompletion feature.

Wrap-up

At the end of the day we ended up with a functional prototype of the metric editor with some powerful features that, in our opinion, brings great user experience to the world of creating metrics in MAQL. Especially, the possibility to have a live preview of data computation based on a metric being created is big plus and the autocompletion feature appeared to save a lot of time during the metric creation process.

For us it was a great experience to have full day of hacking something new on top of the GoodData Platform. Special thanks goes to Petr Prchal who helped us to polish the project to the final desired state and even if we didn’t manage to implement the visualization switching functionality we made it to the 2nd place in the hackathon contest. Yay!


About The Author

Petr Volny Petr Volny is a passionate Front-end SW Engineer at GoodData working with various parts of our code base including visualizations, geo charts, new data discovery capabilities and now the new SDKs. He wrote his first computer program in BASIC when he was five years old.

Twitter @PetrVolny   Email petr.volny@gooddata.com

Dev's Newsletter

Subscribe Now