--- a/cms/app-client/app/components/discourses-component.js	Sun Sep 25 20:05:56 2016 +0200
+++ b/cms/app-client/app/components/discourses-component.js	Sun Sep 25 22:35:12 2016 +0200
@@ -11,6 +11,11 @@
     constants: Ember.inject.service(),
     filter: Ember.inject.service(),
 
+    discourseObserver: Ember.observer('filter.discourse', function() {
+        Ember.$('.item').removeClass("selected");
+        Ember.$('.item[data-id="' + this.get('filter').get('discourse') + '"]').addClass("selected");
+    }).on('init'),
+
     didRender: function() {
         var self = this;
         var baseURL = ENV.rootURL.replace(/\/$/,"")+'/api/v1';
@@ -39,53 +44,30 @@
 
             var bubbles = bubble.nodes(self.createNodes(discourses));
 
-            var caption = element.append("div")
-                .attr("class", "caption");
-            var caption_nodes = caption.selectAll(".node")
+            var nodes = element
+                .selectAll()
                 .data(bubbles);
 
-            caption_nodes.enter().append("div")
-                .attr("class", function(d) { return d.children ? " category": " item"; });
+            nodes.enter().append("div")
+                .attr("class", function(d) { return ( d.children ? "category": "item" ) + ( self.get('filter').get('discourse') === d.id ? " selected" : "" ) ; });
 
-            var item = caption.selectAll(".item")
-                .style("width", function(d) { return (d.r * 2) + 'px'; })
-                .style("height", function(d) { return (d.r * 2) + 'px'; })
-                .style("left", function(d) { return d.x - d.r + 'px'; })
-                .style("top", function(d) { return d.y - d.r + 'px'; })
-                .style("font-size", function(d) {
-                    return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px';
-                })
-                .on('click', function(d) {
-                    self.get('filter').set('discourse', d.id);
-                });
-            item.append("span")
-                .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; })
-                .style("display", function(d) { return d.children ? 'none' : 'inline-block'; })
-                .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; })
-                .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
-                .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
-
-            var svg = element.append("svg")
-                .style("width", width + "px")
-                .style("height", height + "px")
-                .attr("class", "bubble");
-
-            var svg_nodes = svg.selectAll(".node")
-                .data(bubbles);
-            svg_nodes.enter().append("g")
-                .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); })
-                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
-
-            var leaf = svg.selectAll(".leaf")
+            var item = element.selectAll(".item")
+                .attr("data-id", function(d) { return d.id; })
+                .style("left", function(d) { return ( d.x - d.r)  + "px"; })
+                .style("top", function(d) { return ( d.y - d.r)  + "px"; })
+                .style("width", function(d) { return (d.r * 2) + "px"; })
+                .style("height", function(d) { return (d.r * 2) + "px"; })
+                .style("background-color", function(d) { return d.fill; })
+                .style("border-color", function(d) { return d.stroke; })
+                .style("font-size", function(d) { return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px'; })
                 .on('click', function(d) {
                     self.get('filter').set('discourse', d.id);
                 });
 
-            leaf.append("circle")
-                .attr("r", function(d) { return d.r; })
-                .attr("fill", function(d) { return d.fill; })
-                .attr("stroke", function(d) { return d.stroke; });
-            element.style("height", height + "px");
+            item.append("span")
+                .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; })
+                .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
+                .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
         });
 
         this._super(...arguments);