No bubbles displayed if only start date exist.

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}`);

public/kibi_timeline.js

@@ -235,18 +235,35 @@ define(function (require) {
                   const startValue = value;
                   const startRawValue = startRawFieldValue[i];
 
-                  const 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;';
+                  const itemDict = {
+                    indexId: indexId,
+                    startField: params.startField,
+                    endField: params.endField,
+                    labelValue: labelValue,
+                    useHighlight: params.useHighlight,
+                    highlight: timelineHelper.pluckHighlights(hit, highlightTags),
+                    groupColor: groupColor,
+                    startValue: startValue,
+                    endFieldValue: endFieldValue ? endFieldValue[i] : null
+                  };
+
+                  const content = timelineHelper.createItemTemplate(itemDict);
+
+                  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}; border-color: ${groupColor}`;
+                  }
+
                   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}; border-color: ${groupColor}`;
+                    } else {
+                      style = `background-color: #fff; color: ${groupColor};`;
+                    }
                     uniqueLabels.push(labelValue.toLowerCase().trim());
                   }
 
@@ -265,25 +282,16 @@ 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';
-                    } else {
-                      const endValue = endFieldValue[i];
-                      const endRawValue = endRawFieldValue[i];
-                      if (startValue === endValue) {
-                        // also force it to be a point
-                        e.type = 'point';
-                      } else {
-                        e.type = 'range';
-                        e.end =  new Date(endRawValue);
-                        e.endField = {
-                          name: params.endField,
-                          value: endValue
-                        };
-                      }
+                  if (endFieldValue && startValue !== endFieldValue[i]) {
+                    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
+                      };
                     }
                   }
 

public/kibi_timeline_vis.less

@@ -62,3 +62,20 @@
 .vis-panel .vis-shadow {
   box-shadow: none!important; /* disable the shadow */
 }
+
+.kibi-tl-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;
+}
+
+.kibi-tl-label-item {
+  margin-left: 15px;
+}
+

public/kibi_timeline_vis_controller.js

@@ -184,6 +184,5 @@ define(function (require) {
           removeVisStateChangedHandler();
         });
       }
-
     });
 });

public/lib/helpers/timeline_helper.js

@@ -7,6 +7,31 @@ define(function (require) {
     function TimelineHelper() {
     }
 
+    TimelineHelper.prototype.noEndOrEqual = function (startValue, endValue) {
+      return !endValue || startValue === endValue ? true : false;
+    };
+
+    TimelineHelper.prototype.createItemTemplate = function (itemDict) {
+      let endfield = '';
+      let dot = '';
+      let hilit = '';
+      let label = itemDict.labelValue;
+
+      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) {
       if (timezone !== 'Browser') {
         return moment().tz(timezone).format('Z');