update: Support of tags in timeline + UI stylizing

helpers/trendings_helper.py

@@ -162,8 +162,12 @@ class Trendings_helper:
 
     # In contrary of getGenericTrending, it regroups items in the format: {item, start: timestamp1, end: timestamp2}
     # so that it can be displayed easily on the timeline.
-    def getGenericTrendingOvertime(self, dateS, dateE, trendingType=None, topNum=0):
-        trendingType = self.keyEvent
+    def getGenericTrendingOvertime(self, dateS, dateE, choice=None, topNum=0):
+        if choice == 'tags':
+            trendingType = self.keyTag
+        else:
+            trendingType = self.keyEvent
+
         dico_items = {}
         to_format = []
         prev_days = (dateE - dateS).days

server.py

@@ -544,8 +544,9 @@ def getGenericTrendingOvertime():
     except:
         dateS = datetime.datetime.now() - datetime.timedelta(days=7)
         dateE = datetime.datetime.now()
+    choice = request.args.get('choice', 'events')
 
-    data = trendings_helper.getGenericTrendingOvertime(dateS, dateE)
+    data = trendings_helper.getGenericTrendingOvertime(dateS, dateE, choice)
     return jsonify(data)
 
 if __name__ == '__main__':

static/js/trendings.js

@@ -104,7 +104,13 @@ var typeaheadOption_tag = {
         updateLineForLabel(tagLine, tag, undefined, url_getTrendingTag);
     }
 }
-var timeline_option = {groupOrder: 'content'};
+var timeline_option = {
+    groupOrder: 'content',
+    maxHeight: '94vh',
+    verticalScroll: true,
+    horizontalScroll: true,
+    zoomKey: 'ctrlKey',
+};
 
 
 /* FUNCTIONS */
@@ -137,7 +143,18 @@ function getTextColour(rgb) {
         return 'black';
     }
 }
-function legendFormatter(label, series) {
+
+// If json (from tag), only retreive the name> otherwise return the supplied arg.
+function getOnlyName(potentialJson) {
+    try {
+        jsonLabel = JSON.parse(potentialJson);
+        return jsonLabel.name;
+    } catch(err) {
+        return potentialJson;
+    }
+}
+
+function legendFormatter(label) {
     try {
         jsonLabel = JSON.parse(label);
         var backgroundColor = jsonLabel.colour;
@@ -400,7 +417,8 @@ function updateDisc() {
 }
 
 function updateTimeline() {
-    $.getJSON( url_getGenericTrendingOvertime+"?dateS="+parseInt(dateStart.getTime()/1000)+"&dateE="+parseInt(dateEnd.getTime()/1000), function( data ) {
+    var selected = $( "#timeline_selector" ).val();
+    $.getJSON( url_getGenericTrendingOvertime+"?dateS="+parseInt(dateStart.getTime()/1000)+"&dateE="+parseInt(dateEnd.getTime()/1000)+"&choice="+selected, function( data ) {
         var items = [];
         var groups = new vis.DataSet();
         var dico_groups = {};
@@ -409,13 +427,13 @@ function updateTimeline() {
         for (var obj of data) {
             var index = dico_groups[obj.name];
             if (index == undefined) { // new group
-                index = groups.add({id: g, content: obj.name});
+                index = groups.add({id: g, content: legendFormatter(obj.name)});
                 dico_groups[obj.name] = g;
                 g++;
             }
             items.push({
                 id: i,
-                content: obj.name,
+                content: getOnlyName(obj.name),
                 start: obj.start*1000,
                 end: obj.end*1000,
                 group: dico_groups[obj.name]
@@ -471,6 +489,10 @@ $(document).ready(function () {
         window.location.href = url_currentPage+'?maxNum='+maxNum;
     });
 
+    $( "#timeline_selector" ).change(function() {
+        updateTimeline();
+    });
+
     $("<div id='tooltip'></div>").css({
         position: "absolute",
         display: "none",

templates/trendings.html

@@ -212,7 +212,11 @@ small {
                     <div class="col-lg-12">
                         <div class="panel panel-default" style="">
                             <div class="panel-heading" style="font-weight: bold;">
-                                <b>Timeline</b>
+                                <b>Timeline:</b>
+                                <select id="timeline_selector">
+                                        <option value="events" selected="">Events</option>
+                                        <option value="tags">Tags</option>
+                                </select>
                             </div>
                             <div class="panel-body" style="">
                                 <div id="timeline" style="width:100%; height: 100%;"></div>