--- a/cms/app-client/app/components/visu-chrono.js	Thu Nov 03 11:14:41 2016 +0100
+++ b/cms/app-client/app/components/visu-chrono.js	Fri Nov 04 19:03:25 2016 +0100
@@ -1,24 +1,90 @@
 import Ember from 'ember';
+import _ from 'lodash/lodash';
 
 export default Ember.Component.extend({
 
+    range: [],
+
+    decades: Ember.computed('range', function() {
+        var range = this.get('range');
+        return _.range(Math.floor(range[0]/10)*10, Math.floor(range[1]/10)*10, 10);
+    }),
+
     filter: Ember.inject.service(),
 
-    dateObserver: Ember.observer('filter.date', function() {
+    dateObserver: Ember.observer('date', function() {
         var self = this;
         this.$('li').removeClass('highlighted');
-        this.get('filter').get('date').forEach(function(date) {
+        this.get('date').forEach(function(date) {
             self.$('li#' + date).addClass('highlighted');
         });
     }),
 
+    date: Ember.computed('filter.date', {
+        get: function() {
+            const dates = this.get('filter').get('date');
+            console.log("get DATES", dates);
+            if(dates === null) {
+                return [];
+            }
+            const res = _.reduce(dates, function(res, d) {
+                let m = d.match(/^(\d+)(?:-(\d+))?$/);
+                if(m) {
+                    let start = parseInt(m[1]);
+                    let end = parseInt(m[2]);
+                    if(isNaN(end)) {
+                        res.push(parseInt(m[1]));
+                    } else {
+                        res = res.concat(_.range(start,end+1));
+                    }
+                }
+                return res;
+            }, []).sort();
+            console.log("GET DATE", res);
+            return res;
+        },
+        set: function(key, values) {
+            var srcDateList = _.clone(values).sort();
+            let start = null;
+            let end = null;
+            var pushValues = function(s,e,valuesList) {
+                if(s === e) {
+                    valuesList.push(s.toString());
+                } else {
+                    valuesList.push(s.toString()+"-"+e.toString());
+                }
+            };
+            let dateList = _.reduce(srcDateList, function(res, d, i) {
+                if(start === null) {
+                    start = end = d;
+                }
+                if(d > (end + 1)) {
+                    pushValues(start, end, res);
+                    start = end = d;
+                } else {
+                    end = d;
+                }
+                if(i === (srcDateList.length - 1)) {
+                    pushValues(start, end, res);
+                }
+                return res;
+          }, []);
+          console.log("SET DATE",key, values, dateList);
+          if(dateList.length === 0) {
+              dateList = null;
+          }
+          this.get('filter').set('date', dateList);
+          return srcDateList;
+      }
+    }),
+
     elementId: "chrono-table",
 
     didInsertElement: function(){
         var self = this;
 
-        if (this.get('filter').get('date') !== null){
-            this.highlightQuery(this.get('filter').get('date'));
+        if (this.get('date') !== null){
+            this.highlightQuery(this.get('date'));
         }
 
         var isMouseDown = false,
@@ -29,7 +95,7 @@
         Ember.$("#chrono-table li").mousedown(function (event) {
             // Prevent right click selection.
             if(event.button === 0) {
-                
+
                 isMouseDown = true;
                 var element = parseInt(Ember.$(this).attr('id'));
                 var elements = [element];
@@ -43,9 +109,9 @@
                         } else {
                             break;
                         }
-                    }    
+                    }
                 }
-                var dates = self.get('filter').get('date').toArray();
+                var dates = self.get('date');
                 var index = dates.indexOf(element);
                 if((!event.shiftKey && index === -1) || (event.shiftKey && didHighlight)) {
                     dates = dates.concat(elements);
@@ -54,14 +120,12 @@
                     elements.forEach(function(el) {
                         var id = dates.indexOf(el);
                         if((!event.shiftKey && index !== -1) || (event.shiftKey && id !== -1)) {
-                            dates.splice(id, 1);    
+                            dates.splice(id, 1);
                         }
                     });
                     isHighlighted = false;
                 }
-                // Ascending sorting.
-                dates.sort(function(a, b) { return a - b; });
-                self.get('filter').set('date', dates);
+                self.set('date', dates);
                 didHighlight = isHighlighted;
                 previousElement = element;
                 // Prevent text selection.
@@ -71,14 +135,14 @@
             if (isMouseDown) {
                 var element = parseInt(Ember.$(this).attr('id'));
                 if(Ember.$(this).hasClass("highlighted") !== isHighlighted) {
-                    var dates = self.get('filter').get('date').toArray();
+                    var dates = self.get('date');
                     var index = dates.indexOf(element);
                     if(index === -1) {
                         dates.push(element);
                     } else {
                         dates.splice(index, 1);
                     }
-                    self.get('filter').set('date', dates);
+                    self.set('date', dates);
                 }
                 previousElement = element;
             }
@@ -92,6 +156,10 @@
     },
 
     highlightQuery: function(dates){
+        console.log("highlightQuery", dates);
+        if(dates === null) {
+            return;
+        }
         dates.map(function(date){
             Ember.$("#" + date).toggleClass("highlighted", true);
         });
@@ -102,7 +170,7 @@
         selectDecade: function(decade) {
             var array = [];
             var next = decade + 10;
-            var dates = this.get('filter').get('date');
+            var dates = this.get('date');
             while(decade < next) {
                 array.push(decade);
                 decade ++;
@@ -112,14 +180,12 @@
                     return dates.indexOf(value) === -1;
                 });
                 array = dates.concat(array);
-                // Ascending sorting.
-                array.sort(function(a, b) { return a - b; });
             } else {
                 array = dates.filter(function(value) {
                     return array.indexOf(value) === -1;
                 });
             }
-            this.get('filter').set('date', array);
+            this.set('date', array);
         }
 
     }