From 7f87b0765717ba5f5ecd90bec2e23d398220c30b Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Mon, 19 Dec 2016 12:20:00 +0100
Subject: [PATCH 01/13] Add point to timeline by manually manipulating DOM and
 style.

---
 public/kibi_timeline.js | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index ca17a2e..c525b32 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -238,8 +238,7 @@ define(function (require) {
                   const content =
                       '<div title="index: ' + indexId +
                       ', startField: ' + params.startField +
-                      (params.endField ? ', endField: ' + params.endField : '') +
-                      '">' + labelValue +
+                      (params.endField ? ', endField: ' + params.endField : '') + '">' + labelValue +
                       (params.useHighlight ? '<p class="tiny-txt">' + timelineHelper.pluckHighlights(hit, highlightTags) +
                       '</p>' : '') + '</div>';
 
@@ -265,11 +264,28 @@ define(function (require) {
                     groupId: groupId
                   };
 
-                  if (params.endField) {
-                    if (!endFieldValue) {
-                      // here the end field value missing but expected
-                      // force the event to be of type point
-                      e.type = 'point';
+                  //debugger;
+                  //if (params.endField) {
+                  if (!endFieldValue) {
+                    // here the end field value missing but expected
+                    // force the event to be of type point
+                    e.style = 'border-style: none; background-color: #fff; color: #000;';
+                    let divregex = /(<div.*>)(.*)(<\/div>)/g;
+                    let contentParts = divregex.exec(e.content);
+                    let dot = '<div class="vis-item vis-dot vis-readonly" style="top: 10px; left: 4px;"></div>';
+                    let newContent = '<div style="margin-left: 15px">' + contentParts[2]  + '</div>';
+                    e.content = contentParts[1] + dot + newContent + contentParts[3];
+                  } else {
+                    let endValue = endFieldValue[i];
+                    let endRawValue = endRawFieldValue[i];
+                    if (startValue === endValue) {
+                      // also force it to be a point
+                      e.style = 'border-style: none; background-color: #fff; color: #000;';
+                      let divregex = /(<div.*>)(.*)(<\/div>)/g;
+                      let contentParts = divregex.exec(e.content);
+                      let dot = '<div class="vis-item vis-dot vis-readonly" style="top: 10px; left: 4px;"></div>';
+                      let newContent = '<div style="margin-left: 15px">' + contentParts[2]  + '</div>';
+                      e.content = contentParts[1] + dot + newContent + contentParts[3];
                     } else {
                       const endValue = endFieldValue[i];
                       const endRawValue = endRawFieldValue[i];
@@ -286,6 +302,7 @@ define(function (require) {
                       }
                     }
                   }
+                  //}
 
                   events.push(e);
 

From aa514d651c497ae3948d7d73d045c25b2062f03b Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Wed, 28 Dec 2016 10:29:41 +0100
Subject: [PATCH 02/13] Remove unneeded code. Define vars as const.

---
 public/kibi_timeline.js | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index c525b32..fa43a0a 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -264,35 +264,30 @@ define(function (require) {
                     groupId: groupId
                   };
 
-                  //debugger;
-                  //if (params.endField) {
                   if (!endFieldValue) {
                     // here the end field value missing but expected
                     // force the event to be of type point
                     e.style = 'border-style: none; background-color: #fff; color: #000;';
-                    let divregex = /(<div.*>)(.*)(<\/div>)/g;
-                    let contentParts = divregex.exec(e.content);
-                    let dot = '<div class="vis-item vis-dot vis-readonly" style="top: 10px; left: 4px;"></div>';
-                    let newContent = '<div style="margin-left: 15px">' + contentParts[2]  + '</div>';
+                    const divregex = /(<div.*>)(.*)(<\/div>)/g;
+                    const contentParts = divregex.exec(e.content);
+                    const dot = '<div class="vis-item vis-dot vis-readonly" style="top: 10px; left: 4px;"></div>';
+                    const newContent = '<div style="margin-left: 15px">' + contentParts[2]  + '</div>';
                     e.content = contentParts[1] + dot + newContent + contentParts[3];
                   } else {
-                    let endValue = endFieldValue[i];
-                    let endRawValue = endRawFieldValue[i];
+                    const endValue = endFieldValue[i];
+                    const endRawValue = endRawFieldValue[i];
                     if (startValue === endValue) {
                       // also force it to be a point
                       e.style = 'border-style: none; background-color: #fff; color: #000;';
-                      let divregex = /(<div.*>)(.*)(<\/div>)/g;
-                      let contentParts = divregex.exec(e.content);
-                      let dot = '<div class="vis-item vis-dot vis-readonly" style="top: 10px; left: 4px;"></div>';
-                      let newContent = '<div style="margin-left: 15px">' + contentParts[2]  + '</div>';
+                      const divregex = /(<div.*>)(.*)(<\/div>)/g;
+                      const contentParts = divregex.exec(e.content);
+                      const dot = '<div class="vis-item vis-dot vis-readonly" style="top: 10px; left: 4px;"></div>';
+                      const newContent = '<div style="margin-left: 15px">' + contentParts[2]  + '</div>';
                       e.content = contentParts[1] + dot + newContent + contentParts[3];
                     } else {
                       const endValue = endFieldValue[i];
                       const endRawValue = endRawFieldValue[i];
-                      if (startValue === endValue) {
-                        // also force it to be a point
-                        e.type = 'point';
-                      } else {
+                      if (startValue !== endValue) {
                         e.type = 'range';
                         e.end =  new Date(endRawValue);
                         e.endField = {
@@ -302,7 +297,6 @@ define(function (require) {
                       }
                     }
                   }
-                  //}
 
                   events.push(e);
 

From 9759d3bca39a5d71d057449c1637e69f5f19a950 Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Wed, 28 Dec 2016 12:54:18 +0100
Subject: [PATCH 03/13] Fix "Emphasize first label instance" feature. In order
 to be able to change color add custom styled dot instead of vis-dot. Refactor
 code.

---
 public/kibi_timeline.js | 60 +++++++++++++++++++----------------------
 1 file changed, 28 insertions(+), 32 deletions(-)

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index fa43a0a..cc287c4 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -235,17 +235,34 @@ define(function (require) {
                   const startValue = value;
                   const startRawValue = startRawFieldValue[i];
 
-                  const content =
+                  let content =
                       '<div title="index: ' + indexId +
                       ', startField: ' + params.startField +
                       (params.endField ? ', endField: ' + params.endField : '') + '">' + labelValue +
                       (params.useHighlight ? '<p class="tiny-txt">' + timelineHelper.pluckHighlights(hit, highlightTags) +
                       '</p>' : '') + '</div>';
 
-                  let style = 'background-color: ' + groupColor + '; color: #fff;';
+                  let style = `background-color: ${groupColor}; color: #fff;`;
+                  if (!endFieldValue || startValue === endFieldValue[i]) {
+                    // here the end field value missing but expected
+                    // or start field value === end field value
+                    // force vis box look like vis point
+                    style = `border-style: none; background-color: #fff; color: ${groupColor};`;
+                    const divregex = /(<div.*>)(.*)(<\/div>)/g;
+                    const contentDivParts = divregex.exec(content);
+                    const pointDot = '<div style="position:relative;padding:0;border-width:4px;border-style:solid;' +
+                    'border-radius:4px;float:left;margin-top:6px;margin-right:4px;border-color:' + groupColor + '"></div>';
+                    const labelDiv = '<div style="margin-left: 15px">' + contentDivParts[2]  + '</div>';
+                    content = contentDivParts[1] + pointDot + labelDiv + contentDivParts[3];
+                  }
+
                   if (params.invertFirstLabelInstance &&
                     !_.includes(uniqueLabels, labelValue.toLowerCase().trim())) {
-                    style = 'background-color: #fff; color: ' + groupColor + ';';
+                    if (!endFieldValue || startValue === endFieldValue[i]) {
+                      style = `border-style: solid; background-color: #fff; color: ${groupColor};`;
+                    } else {
+                      style = `background-color: #fff; color: ${groupColor};`;
+                    }
                     uniqueLabels.push(labelValue.toLowerCase().trim());
                   }
 
@@ -264,37 +281,16 @@ define(function (require) {
                     groupId: groupId
                   };
 
-                  if (!endFieldValue) {
-                    // here the end field value missing but expected
-                    // force the event to be of type point
-                    e.style = 'border-style: none; background-color: #fff; color: #000;';
-                    const divregex = /(<div.*>)(.*)(<\/div>)/g;
-                    const contentParts = divregex.exec(e.content);
-                    const dot = '<div class="vis-item vis-dot vis-readonly" style="top: 10px; left: 4px;"></div>';
-                    const newContent = '<div style="margin-left: 15px">' + contentParts[2]  + '</div>';
-                    e.content = contentParts[1] + dot + newContent + contentParts[3];
-                  } else {
+                  if (endFieldValue && startValue !== endFieldValue[i]) {
                     const endValue = endFieldValue[i];
                     const endRawValue = endRawFieldValue[i];
-                    if (startValue === endValue) {
-                      // also force it to be a point
-                      e.style = 'border-style: none; background-color: #fff; color: #000;';
-                      const divregex = /(<div.*>)(.*)(<\/div>)/g;
-                      const contentParts = divregex.exec(e.content);
-                      const dot = '<div class="vis-item vis-dot vis-readonly" style="top: 10px; left: 4px;"></div>';
-                      const newContent = '<div style="margin-left: 15px">' + contentParts[2]  + '</div>';
-                      e.content = contentParts[1] + dot + newContent + contentParts[3];
-                    } else {
-                      const endValue = endFieldValue[i];
-                      const endRawValue = endRawFieldValue[i];
-                      if (startValue !== endValue) {
-                        e.type = 'range';
-                        e.end =  new Date(endRawValue);
-                        e.endField = {
-                          name: params.endField,
-                          value: endValue
-                        };
-                      }
+                    if (startValue !== endValue) {
+                      e.type = 'range';
+                      e.end =  new Date(endRawValue);
+                      e.endField = {
+                        name: params.endField,
+                        value: endValue
+                      };
                     }
                   }
 

From a431e2a2883574c9633da384693504d5087dd27b Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Wed, 28 Dec 2016 12:56:49 +0100
Subject: [PATCH 04/13] Fix test.

---
 public/__tests__/kibi_timeline.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/public/__tests__/kibi_timeline.js b/public/__tests__/kibi_timeline.js
index 01a49da..3dbd32d 100644
--- a/public/__tests__/kibi_timeline.js
+++ b/public/__tests__/kibi_timeline.js
@@ -381,23 +381,23 @@ describe('KibiTimeline Directive', function () {
         case 0:
           expect(data.value).to.be('linux');
           expect(data.start.valueOf()).to.be(date1Obj.valueOf());
-          // color is inverted
+          // emphasized, border style is solid
           expect(data.style).to.match(/color: #ff0000/);
-          expect(data.style).to.match(/background-color: #fff/);
+          expect(data.style).to.match(/border-style: solid/);
           break;
         case 1:
           expect(data.value).to.be('mac');
           expect(data.start.valueOf()).to.be(date2Obj.valueOf());
-          // color is inverted
+          // emphasized, border style is solid
           expect(data.style).to.match(/color: #ff0000/);
-          expect(data.style).to.match(/background-color: #fff/);
+          expect(data.style).to.match(/border-style: solid/);
           break;
         case 2:
           expect(data.value).to.be('linux');
           expect(data.start.valueOf()).to.be(date3Obj.valueOf());
-          // color is normal
-          expect(data.style).to.match(/color: #fff/);
-          expect(data.style).to.match(/background-color: #ff0000/);
+          // border style is none
+          expect(data.style).to.match(/color: #ff0000/);
+          expect(data.style).to.match(/border-style: none/);
           break;
         default:
           expect().fail(`Should not have the case itemIndex=${itemIndex}`);

From 47ed29ec290935e6e40f832d12d09046c70cdcac Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Wed, 28 Dec 2016 13:14:42 +0100
Subject: [PATCH 05/13] Change emphasized item border color to the group color.

---
 public/kibi_timeline.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index cc287c4..817f23d 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -247,7 +247,7 @@ define(function (require) {
                     // here the end field value missing but expected
                     // or start field value === end field value
                     // force vis box look like vis point
-                    style = `border-style: none; background-color: #fff; color: ${groupColor};`;
+                    style = `border-style: none; background-color: #fff; color: ${groupColor}; border-color: ${groupColor}`;
                     const divregex = /(<div.*>)(.*)(<\/div>)/g;
                     const contentDivParts = divregex.exec(content);
                     const pointDot = '<div style="position:relative;padding:0;border-width:4px;border-style:solid;' +
@@ -259,7 +259,7 @@ define(function (require) {
                   if (params.invertFirstLabelInstance &&
                     !_.includes(uniqueLabels, labelValue.toLowerCase().trim())) {
                     if (!endFieldValue || startValue === endFieldValue[i]) {
-                      style = `border-style: solid; background-color: #fff; color: ${groupColor};`;
+                      style = `border-style: solid; background-color: #fff; color: ${groupColor}; border-color: ${groupColor}`;
                     } else {
                       style = `background-color: #fff; color: ${groupColor};`;
                     }

From a1ef2ee98ace3524b622a4d1f4baf20beac181a0 Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Fri, 20 Jan 2017 15:43:57 +0100
Subject: [PATCH 06/13] Move styles to the css file.

---
 public/kibi_timeline.js       |  5 ++---
 public/kibi_timeline_vis.less | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index 817f23d..0bf128b 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -250,9 +250,8 @@ define(function (require) {
                     style = `border-style: none; background-color: #fff; color: ${groupColor}; border-color: ${groupColor}`;
                     const divregex = /(<div.*>)(.*)(<\/div>)/g;
                     const contentDivParts = divregex.exec(content);
-                    const pointDot = '<div style="position:relative;padding:0;border-width:4px;border-style:solid;' +
-                    'border-radius:4px;float:left;margin-top:6px;margin-right:4px;border-color:' + groupColor + '"></div>';
-                    const labelDiv = '<div style="margin-left: 15px">' + contentDivParts[2]  + '</div>';
+                    const pointDot = `<div class="dot-item" style="border-color:${groupColor}"></div>`;
+                    const labelDiv = `<div class="label-item">${contentDivParts[2]}</div>`;
                     content = contentDivParts[1] + pointDot + labelDiv + contentDivParts[3];
                   }
 
diff --git a/public/kibi_timeline_vis.less b/public/kibi_timeline_vis.less
index 829c397..c0520db 100644
--- a/public/kibi_timeline_vis.less
+++ b/public/kibi_timeline_vis.less
@@ -62,3 +62,19 @@
 .vis-panel .vis-shadow {
   box-shadow: none!important; /* disable the shadow */
 }
+
+.dot-item {
+  position: relative;
+  padding: 0;
+  border-width: 4px;
+  border-style: solid;
+  border-radius: 4px;
+  float: left;
+  margin-top: 6px;
+  margin-right: 4px;
+  border-color: red;
+}
+
+.label-item {
+  margin-left: 15px;
+}

From 07fcb0e0f42ed5704f4cbf34ceacb81533688af1 Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Mon, 23 Jan 2017 19:27:05 +0100
Subject: [PATCH 07/13] I'm unsuccessfully trying to import and compile the
 content template for each item

---
 public/kibi_timeline.js                | 28 +++++++++++++++++++-------
 public/kibi_timeline_item.html         |  8 ++++++++
 public/kibi_timeline_vis_controller.js | 11 +++++++++-
 3 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 public/kibi_timeline_item.html

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index 0bf128b..eee63c5 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -1,11 +1,13 @@
+/* global angular */
 define(function (require) {
   require('ui/highlight/highlight_tags');
+  const itemTemplate = require('./kibi_timeline_item.html');
   const _ = require('lodash');
   const vis = require('vis');
   const buildRangeFilter = require('ui/filter_manager/lib/range');
 
   require('ui/modules').get('kibana').directive('kibiTimeline',
-  function (Private, createNotifier, courier, indexPatterns, config, highlightTags, timefilter) {
+  function (Private, createNotifier, courier, indexPatterns, config, highlightTags, timefilter, $compile, $interpolate) {
     const kibiUtils = require('kibiutils');
     const NUM_FRAGS_CONFIG = 'kibi:timeline:highlight:number_of_fragments';
     const DEFAULT_NUM_FRAGS = 25;
@@ -235,12 +237,24 @@ define(function (require) {
                   const startValue = value;
                   const startRawValue = startRawFieldValue[i];
 
-                  let content =
-                      '<div title="index: ' + indexId +
-                      ', startField: ' + params.startField +
-                      (params.endField ? ', endField: ' + params.endField : '') + '">' + labelValue +
-                      (params.useHighlight ? '<p class="tiny-txt">' + timelineHelper.pluckHighlights(hit, highlightTags) +
-                      '</p>' : '') + '</div>';
+                  //let content =
+                  //    '<div title="index: ' + indexId +
+                  //    ', startField: ' + params.startField +
+                  //    (params.endField ? ', endField: ' + params.endField : '') + '">' + labelValue +
+                  //    (params.useHighlight ? '<p class="tiny-txt">' + timelineHelper.pluckHighlights(hit, highlightTags) +
+                  //    '</p>' : '') + '</div>';
+                  const $itemscope = $scope.$new();
+                  $itemscope.contentDict = {
+                    indexId: indexId,
+                    startField: params.startField,
+                    endField: params.endField,
+                    labelValue: labelValue,
+                    useHighlight: params.useHighlight,
+                    highlight: timelineHelper.pluckHighlights(hit, highlightTags)
+                  };
+                  let content = $compile(itemTemplate)($itemscope)[0].innerHTML;
+                  console.log('INNER HTML:');
+                  console.log(content);
 
                   let style = `background-color: ${groupColor}; color: #fff;`;
                   if (!endFieldValue || startValue === endFieldValue[i]) {
diff --git a/public/kibi_timeline_item.html b/public/kibi_timeline_item.html
new file mode 100644
index 0000000..1b47223
--- /dev/null
+++ b/public/kibi_timeline_item.html
@@ -0,0 +1,8 @@
+<div>
+<div ng-if="startField" title="index: {{indexId}}, startField: {{startField}} {{endField ? ', endField: endField' : ''}}">
+{{labelValue}}
+<p ng-if="useHighlight" class="tiny-txt">{{highlight}}</p>
+</div>
+<div ng-show="contentDict.labelValue == 'Fuselage'">Fuselage</div>
+<div ng-show="contentDict.labelValue != 'Fuselage'">Without Fuselage</div>
+</div>
diff --git a/public/kibi_timeline_vis_controller.js b/public/kibi_timeline_vis_controller.js
index 15e5500..06e5863 100644
--- a/public/kibi_timeline_vis_controller.js
+++ b/public/kibi_timeline_vis_controller.js
@@ -184,6 +184,15 @@ define(function (require) {
           removeVisStateChangedHandler();
         });
       }
-
+    })
+    .directive('kibiTimelineItem', function () {
+      return {
+        template: '<div>{{contentDict.labelValue}} {{contentDict.indexId}}</div>'
+        //link: function (scope, element) {
+        //  console.log('LINK:');
+        //  console.log(scope);
+        //  //element.append($compile('<div>{{contentDict.labelValue}} {{contentDict.indexId}}</div>')(scope));
+        //}
+      };
     });
 });

From fdf90776c142c3f5e83982bd1369a5c88b5e7ab5 Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Tue, 24 Jan 2017 15:49:15 +0100
Subject: [PATCH 08/13] Move item template building to a separate
 timelineHelper method.

---
 public/kibi_timeline.js                | 26 ++++++++------------------
 public/kibi_timeline_item.html         |  8 --------
 public/kibi_timeline_vis.less          |  5 +++--
 public/kibi_timeline_vis_controller.js | 10 ----------
 public/lib/helpers/timeline_helper.js  | 10 ++++++++++
 5 files changed, 21 insertions(+), 38 deletions(-)
 delete mode 100644 public/kibi_timeline_item.html

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index eee63c5..7c50aaf 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -1,13 +1,12 @@
 /* global angular */
 define(function (require) {
   require('ui/highlight/highlight_tags');
-  const itemTemplate = require('./kibi_timeline_item.html');
   const _ = require('lodash');
   const vis = require('vis');
   const buildRangeFilter = require('ui/filter_manager/lib/range');
 
   require('ui/modules').get('kibana').directive('kibiTimeline',
-  function (Private, createNotifier, courier, indexPatterns, config, highlightTags, timefilter, $compile, $interpolate) {
+  function (Private, createNotifier, courier, indexPatterns, config, highlightTags, timefilter) {
     const kibiUtils = require('kibiutils');
     const NUM_FRAGS_CONFIG = 'kibi:timeline:highlight:number_of_fragments';
     const DEFAULT_NUM_FRAGS = 25;
@@ -237,23 +236,19 @@ define(function (require) {
                   const startValue = value;
                   const startRawValue = startRawFieldValue[i];
 
-                  //let content =
-                  //    '<div title="index: ' + indexId +
-                  //    ', startField: ' + params.startField +
-                  //    (params.endField ? ', endField: ' + params.endField : '') + '">' + labelValue +
-                  //    (params.useHighlight ? '<p class="tiny-txt">' + timelineHelper.pluckHighlights(hit, highlightTags) +
-                  //    '</p>' : '') + '</div>';
-                  const $itemscope = $scope.$new();
-                  $itemscope.contentDict = {
+                  const itemDict = {
                     indexId: indexId,
                     startField: params.startField,
                     endField: params.endField,
                     labelValue: labelValue,
                     useHighlight: params.useHighlight,
-                    highlight: timelineHelper.pluckHighlights(hit, highlightTags)
+                    highlight: timelineHelper.pluckHighlights(hit, highlightTags),
+                    groupColor: groupColor,
+                    startValue: startValue,
+                    endFieldValue: endFieldValue
                   };
-                  let content = $compile(itemTemplate)($itemscope)[0].innerHTML;
-                  console.log('INNER HTML:');
+
+                  const content = timelineHelper.createItemTemplate(i, itemDict);
                   console.log(content);
 
                   let style = `background-color: ${groupColor}; color: #fff;`;
@@ -262,11 +257,6 @@ define(function (require) {
                     // or start field value === end field value
                     // force vis box look like vis point
                     style = `border-style: none; background-color: #fff; color: ${groupColor}; border-color: ${groupColor}`;
-                    const divregex = /(<div.*>)(.*)(<\/div>)/g;
-                    const contentDivParts = divregex.exec(content);
-                    const pointDot = `<div class="dot-item" style="border-color:${groupColor}"></div>`;
-                    const labelDiv = `<div class="label-item">${contentDivParts[2]}</div>`;
-                    content = contentDivParts[1] + pointDot + labelDiv + contentDivParts[3];
                   }
 
                   if (params.invertFirstLabelInstance &&
diff --git a/public/kibi_timeline_item.html b/public/kibi_timeline_item.html
deleted file mode 100644
index 1b47223..0000000
--- a/public/kibi_timeline_item.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div>
-<div ng-if="startField" title="index: {{indexId}}, startField: {{startField}} {{endField ? ', endField: endField' : ''}}">
-{{labelValue}}
-<p ng-if="useHighlight" class="tiny-txt">{{highlight}}</p>
-</div>
-<div ng-show="contentDict.labelValue == 'Fuselage'">Fuselage</div>
-<div ng-show="contentDict.labelValue != 'Fuselage'">Without Fuselage</div>
-</div>
diff --git a/public/kibi_timeline_vis.less b/public/kibi_timeline_vis.less
index c0520db..48201ef 100644
--- a/public/kibi_timeline_vis.less
+++ b/public/kibi_timeline_vis.less
@@ -63,7 +63,7 @@
   box-shadow: none!important; /* disable the shadow */
 }
 
-.dot-item {
+.kibi-tl-dot-item {
   position: relative;
   padding: 0;
   border-width: 4px;
@@ -75,6 +75,7 @@
   border-color: red;
 }
 
-.label-item {
+.kibi-tl-label-item {
   margin-left: 15px;
 }
+
diff --git a/public/kibi_timeline_vis_controller.js b/public/kibi_timeline_vis_controller.js
index 06e5863..6ad1440 100644
--- a/public/kibi_timeline_vis_controller.js
+++ b/public/kibi_timeline_vis_controller.js
@@ -184,15 +184,5 @@ define(function (require) {
           removeVisStateChangedHandler();
         });
       }
-    })
-    .directive('kibiTimelineItem', function () {
-      return {
-        template: '<div>{{contentDict.labelValue}} {{contentDict.indexId}}</div>'
-        //link: function (scope, element) {
-        //  console.log('LINK:');
-        //  console.log(scope);
-        //  //element.append($compile('<div>{{contentDict.labelValue}} {{contentDict.indexId}}</div>')(scope));
-        //}
-      };
     });
 });
diff --git a/public/lib/helpers/timeline_helper.js b/public/lib/helpers/timeline_helper.js
index 32649fe..4e1d55c 100644
--- a/public/lib/helpers/timeline_helper.js
+++ b/public/lib/helpers/timeline_helper.js
@@ -7,6 +7,16 @@ define(function (require) {
     function TimelineHelper() {
     }
 
+    TimelineHelper.prototype.createItemTemplate = function (i, itemDict) {
+      return '<div title="index: ' + itemDict.indexId + ', startField: ' + itemDict.startField +
+        (itemDict.endField ? ', endField: ' + itemDict.endField : '') + '">' +
+        (!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue[i]
+          ? '<div class="kibi-tl-dot-item" style="border-color:' + itemDict.groupColor + '"></div>' : '') +
+        (!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue[i]
+          ? '<div class="kibi-tl-label-item">' + itemDict.labelValue + '</div>' : itemDict.labelValue) +
+        (itemDict.useHighlight ? '<p class="tiny-txt">' + itemDict.highlight + '</p>' : '') + '</div>';
+    };
+
     TimelineHelper.prototype.changeTimezone  = function (timezone) {
       if (timezone !== 'Browser') {
         return moment().tz(timezone).format('Z');

From 7e8ee67376e271743e25f90794c879051f774a9a Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Tue, 24 Jan 2017 15:52:30 +0100
Subject: [PATCH 09/13] Delete console.log.

---
 public/kibi_timeline.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index 7c50aaf..606ce07 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -249,7 +249,6 @@ define(function (require) {
                   };
 
                   const content = timelineHelper.createItemTemplate(i, itemDict);
-                  console.log(content);
 
                   let style = `background-color: ${groupColor}; color: #fff;`;
                   if (!endFieldValue || startValue === endFieldValue[i]) {

From 81db318cc673c66b0c9f558bc08b5ab45d9826bf Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Tue, 24 Jan 2017 16:15:40 +0100
Subject: [PATCH 10/13] Get rid off the i varibale in the item template
 building method.

---
 public/kibi_timeline.js               | 4 ++--
 public/lib/helpers/timeline_helper.js | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index 606ce07..f2821fe 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -245,10 +245,10 @@ define(function (require) {
                     highlight: timelineHelper.pluckHighlights(hit, highlightTags),
                     groupColor: groupColor,
                     startValue: startValue,
-                    endFieldValue: endFieldValue
+                    endFieldValue: endFieldValue ? endFieldValue[i] : null
                   };
 
-                  const content = timelineHelper.createItemTemplate(i, itemDict);
+                  const content = timelineHelper.createItemTemplate(itemDict);
 
                   let style = `background-color: ${groupColor}; color: #fff;`;
                   if (!endFieldValue || startValue === endFieldValue[i]) {
diff --git a/public/lib/helpers/timeline_helper.js b/public/lib/helpers/timeline_helper.js
index 4e1d55c..14ee504 100644
--- a/public/lib/helpers/timeline_helper.js
+++ b/public/lib/helpers/timeline_helper.js
@@ -7,12 +7,12 @@ define(function (require) {
     function TimelineHelper() {
     }
 
-    TimelineHelper.prototype.createItemTemplate = function (i, itemDict) {
+    TimelineHelper.prototype.createItemTemplate = function (itemDict) {
       return '<div title="index: ' + itemDict.indexId + ', startField: ' + itemDict.startField +
         (itemDict.endField ? ', endField: ' + itemDict.endField : '') + '">' +
-        (!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue[i]
+        (!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue
           ? '<div class="kibi-tl-dot-item" style="border-color:' + itemDict.groupColor + '"></div>' : '') +
-        (!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue[i]
+        (!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue
           ? '<div class="kibi-tl-label-item">' + itemDict.labelValue + '</div>' : itemDict.labelValue) +
         (itemDict.useHighlight ? '<p class="tiny-txt">' + itemDict.highlight + '</p>' : '') + '</div>';
     };

From 49dc7713e1f731a8ba522f3dd15b9679b6b7bf2b Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Tue, 24 Jan 2017 17:00:37 +0100
Subject: [PATCH 11/13] Delete unused lint directive.

---
 public/kibi_timeline.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/kibi_timeline.js b/public/kibi_timeline.js
index f2821fe..4ff54a1 100644
--- a/public/kibi_timeline.js
+++ b/public/kibi_timeline.js
@@ -1,4 +1,3 @@
-/* global angular */
 define(function (require) {
   require('ui/highlight/highlight_tags');
   const _ = require('lodash');

From 3154b41129f27c129cdf83b3b14c577fd6d4fd26 Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Tue, 24 Jan 2017 18:10:48 +0100
Subject: [PATCH 12/13] Refactor the item template creation method.

---
 public/lib/helpers/timeline_helper.js | 29 ++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/public/lib/helpers/timeline_helper.js b/public/lib/helpers/timeline_helper.js
index 14ee504..6432413 100644
--- a/public/lib/helpers/timeline_helper.js
+++ b/public/lib/helpers/timeline_helper.js
@@ -7,14 +7,29 @@ define(function (require) {
     function TimelineHelper() {
     }
 
+    TimelineHelper.prototype.noEndOrEqual = function (startValue, endValue) {
+      return !endValue || startValue === endValue ? true : false;
+    };
+
     TimelineHelper.prototype.createItemTemplate = function (itemDict) {
-      return '<div title="index: ' + itemDict.indexId + ', startField: ' + itemDict.startField +
-        (itemDict.endField ? ', endField: ' + itemDict.endField : '') + '">' +
-        (!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue
-          ? '<div class="kibi-tl-dot-item" style="border-color:' + itemDict.groupColor + '"></div>' : '') +
-        (!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue
-          ? '<div class="kibi-tl-label-item">' + itemDict.labelValue + '</div>' : itemDict.labelValue) +
-        (itemDict.useHighlight ? '<p class="tiny-txt">' + itemDict.highlight + '</p>' : '') + '</div>';
+      let endfield = '';
+      let dot = '';
+      let label = '';
+      let hilit = '';
+
+      if (itemDict.endField) {
+        endfield = `, endField: ${itemDict.endField}`;
+      }
+      if (this.noEndOrEqual(itemDict.startValue, itemDict.endValue)) {
+        dot = `<div class="kibi-tl-dot-item" style="border-color:${itemDict.groupColor}"></div>`;
+        label = `<div class="kibi-tl-label-item">${itemDict.labelValue}</div>`;
+      }
+      if (itemDict.useHighlight) {
+        hilit = `<p class="tiny-txt">${itemDict.highlight}</p>`;
+      }
+
+      return `<div title="index: ${itemDict.indexId}, startField: ${itemDict.startField} ${endfield}">` +
+          `${dot}${label}${hilit}</div>`;
     };
 
     TimelineHelper.prototype.changeTimezone  = function (timezone) {

From 54c811d8414e3407f8e365e12133e6193aca5d95 Mon Sep 17 00:00:00 2001
From: SergeyBondarenko <sergibondarenko@gmail.com>
Date: Tue, 24 Jan 2017 18:37:13 +0100
Subject: [PATCH 13/13] Init label with correct value inside the item template
 creating method.

---
 public/lib/helpers/timeline_helper.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/lib/helpers/timeline_helper.js b/public/lib/helpers/timeline_helper.js
index 6432413..fb8ec9b 100644
--- a/public/lib/helpers/timeline_helper.js
+++ b/public/lib/helpers/timeline_helper.js
@@ -14,8 +14,8 @@ define(function (require) {
     TimelineHelper.prototype.createItemTemplate = function (itemDict) {
       let endfield = '';
       let dot = '';
-      let label = '';
       let hilit = '';
+      let label = itemDict.labelValue;
 
       if (itemDict.endField) {
         endfield = `, endField: ${itemDict.endField}`;
@@ -28,7 +28,7 @@ define(function (require) {
         hilit = `<p class="tiny-txt">${itemDict.highlight}</p>`;
       }
 
-      return `<div title="index: ${itemDict.indexId}, startField: ${itemDict.startField} ${endfield}">` +
+      return `<div title="index: ${itemDict.indexId}, startField: ${itemDict.startField}${endfield}">` +
           `${dot}${label}${hilit}</div>`;
     };