@oracle/oraclejet 11.0.6 → 11.1.1

package/dist/js/libs/oj/debug_esm/ojtimeline-toolkit.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-import { Obj, Agent, KeyboardEvent, ResourceUtils, HtmlTooltipManager, MouseEvent, Displayable, Automation, BaseComponentDefaults, Timer, SimpleMarker, ColorUtils, SolidFill, CSSStyle, LinearGradientFill, Stroke, Rect, EventFactory, ClipPath, Container, Matrix, TransientButton, OutputText, TextUtils, Rectangle, SimpleScrollbar, LayoutUtils, Dimension, Polygon, ToolkitUtils, Animator, Image, Line, Easing, SelectionEffectUtils, BaseComponent, ParallelPlayable, AnimFadeOut, Playable, AnimFadeIn, AriaUtils, SelectionHandler, JsonUtils } from 'ojs/ojdvt-toolkit';
+import { Obj, KeyboardEvent, EventManager, Agent, ResourceUtils, HtmlTooltipManager, MouseEvent, Displayable, Automation, BaseComponentDefaults, SimpleMarker, ColorUtils, SolidFill, CSSStyle, LinearGradientFill, Stroke, Rect, EventFactory, IconButton, ClipPath, Container, Matrix, TransientButton, OutputText, TextUtils, ToolkitUtils, Rectangle, SimpleScrollbar, LayoutUtils, Dimension, Timer, Polygon, Animator, Image, Line, Easing, SelectionEffectUtils, BaseComponent, ParallelPlayable, AnimFadeOut, Playable, AnimFadeIn, AriaUtils, SelectionHandler, JsonUtils } from 'ojs/ojdvt-toolkit';
 import { TimeComponentKeyboardHandler, TimeComponent, TimeComponentEventManager } from 'ojs/ojdvt-timecomponent';
 import { TimeAxisUtils, TimeAxis } from 'ojs/ojtimeaxis-toolkit';
 import { OverviewParser, Overview, OverviewUtils } from 'ojs/ojdvt-overview';
@@ -24,6 +24,30 @@ var DvtTimelineKeyboardHandler = function(manager)
 
 Obj.createSubclass(DvtTimelineKeyboardHandler, TimeComponentKeyboardHandler);
 
+/**
+ * @override
+ */
+DvtTimelineKeyboardHandler.prototype.processKeyDown = function(event)
+{
+  if (this._eventManager._component.isDiscreteNavigationMode()) {
+    if (event.keyCode && (event.keyCode == KeyboardEvent.SPACE) || (event.keyCode == KeyboardEvent.ENTER)){
+      return this._eventManager.handleArrowPress(event);
+    } else if (KeyboardEvent.isPlus(event) || KeyboardEvent.isEquals(event) ||
+                KeyboardEvent.isMinus(event) || KeyboardEvent.isUnderscore(event)) {
+      // block zooming and horizontal panning.
+      EventManager.consumeEvent(event);
+    } else if (event.keyCode === KeyboardEvent.PAGE_UP && event.shiftKey)  {
+      this._eventManager.prevPage();
+    } else if (event.keyCode === KeyboardEvent.PAGE_DOWN && event.shiftKey) {
+      this._eventManager.nextPage();
+    } else {
+      return DvtTimelineKeyboardHandler.superclass.processKeyDown.call(this, event);
+    }
+  } else {
+    return DvtTimelineKeyboardHandler.superclass.processKeyDown.call(this, event);
+  }
+};
+
 /**
  * Finds the next navigable item based on direction.
  * @param {DvtTimelineSeriesNode} currentNavigable The item with current focus.
@@ -81,10 +105,16 @@ DvtTimelineKeyboardHandler.getNextNavigable = function(currentNavigable, event,
 DvtTimelineKeyboardHandler.getNextItem = function(item, navigableItems, isNext)
 {
   var nextIndex = navigableItems.indexOf(item) + (isNext ? 1 : -1);
-  if (nextIndex >= 0 && nextIndex < navigableItems.length)
+  if (nextIndex >= 0 && nextIndex < navigableItems.length) {
     return navigableItems[nextIndex];
-  else
+  /* Remove keyboard nav arrow navigation
+  } else if (nextIndex === -1 && item._timeline.isDiscreteNavigationMode()){
+    // go back to next arrow if already at first item before
+    return item._timeline._nextArrow;
+  */
+  } else {
     return null;
+  }
 };
 
 /**
@@ -359,6 +389,11 @@ var DvtTimelineSeriesNode = function(timeline, series, props)
 
 Obj.createSubclass(DvtTimelineSeriesNode, Obj);
 
+// item-type defs
+DvtTimelineSeriesNode.DURATION_EVENT = 'duration-event';
+DvtTimelineSeriesNode.DURATION_BAR = 'duration-bar';
+DvtTimelineSeriesNode.EVENT = 'event';
+DvtTimelineSeriesNode.AUTO = 'auto';
 
 /**
  * @param {object} props The properties for the node.
@@ -491,6 +526,16 @@ DvtTimelineSeriesNode.prototype.setBubble = function(displayable)
   this._displayable = displayable;
 };
 
+DvtTimelineSeriesNode.prototype.getContentBubble = function()
+{
+  return this._displayableContent;
+};
+
+DvtTimelineSeriesNode.prototype.setContentBubble = function(displayableContent)
+{
+  this._displayableContent = displayableContent;
+};
+
 DvtTimelineSeriesNode.prototype.getFeeler = function()
 {
   return this._feeler;
@@ -531,6 +576,16 @@ DvtTimelineSeriesNode.prototype.setSpacing = function(spacing)
   this._spacing = spacing;
 };
 
+DvtTimelineSeriesNode.prototype.getEndViewportCollision = function()
+{
+  return this._endViewportCollision;
+};
+
+DvtTimelineSeriesNode.prototype.setEndViewportCollision = function(endViewportCollision)
+{
+  this._endViewportCollision = endViewportCollision;
+};
+
 DvtTimelineSeriesNode.prototype.getDurationLevel = function()
 {
   return this._durationLevel;
@@ -595,6 +650,26 @@ DvtTimelineSeriesNode.prototype.setWidth = function(w)
   this._w = w;
 };
 
+DvtTimelineSeriesNode.prototype.getContentWidth = function()
+{
+  return this._cw;
+};
+
+DvtTimelineSeriesNode.prototype.setContentWidth = function(cw)
+{
+  this._cw = cw;
+};
+
+DvtTimelineSeriesNode.prototype.getDurationWidth = function()
+{
+  return this._dw;
+};
+
+DvtTimelineSeriesNode.prototype.setDurationWidth = function(dw)
+{
+  this._dw = dw;
+};
+
 DvtTimelineSeriesNode.prototype.getHeight = function()
 {
   return this._h;
@@ -781,6 +856,41 @@ DvtTimelineSeriesNode.prototype.getData = function(isPublic)
   return this._data;
 };
 
+/**
+ * Gets the item type associated with this series node
+ * event: item bubble using only the start date
+ * duration-bar: item bubble with a bar on the time-axis that matches the duration of the event using the start/end dates
+ * duration-event: item bubble with width equal to the duration and edges of the event matching the start/end date (only available on horizontal timeline)
+ * auto (default behavior): event item-type if end date not specified, duration-bar if end date specified.
+ *
+ * @return {string} The string value of the item type
+ */
+DvtTimelineSeriesNode.prototype.getItemType = function()
+{
+  var itemType = this._data.itemType;
+
+  // Default to auto if not specified
+  if (!itemType || itemType === DvtTimelineSeriesNode.AUTO) {
+    if (!this._endTime) {
+      // no end time so use event
+      return DvtTimelineSeriesNode.EVENT;
+    } else {
+      return DvtTimelineSeriesNode.DURATION_BAR;
+    }
+  } else {
+    if (!this._endTime) {
+      // if no end time, just use event
+      return DvtTimelineSeriesNode.EVENT;
+    }
+    if (itemType !== DvtTimelineSeriesNode.EVENT && (this._series.isVertical() || this._timeline.getCtx().getThemeBehavior() === 'alta')) {
+      // duration-event not supported in vertical mode or alta
+      return DvtTimelineSeriesNode.DURATION_BAR;
+    } else {
+      return itemType;
+    }
+  }
+};
+
 /**
  * Gets the context to be passed into custom renderer callbacks
  * @return {object} The renderer context
@@ -808,6 +918,7 @@ DvtTimelineSeriesNode.prototype.getDataContext = function()
   var data = this.getData();
   var itemData = data['_itemData'];
   return {
+    'itemType': this.getItemType(),
     'data': this.getData(true),
     'seriesData': this._series.getData(true),
     'itemData': itemData ? itemData : null,
@@ -1076,207 +1187,6 @@ DvtTimelineDefaults.VERSION_1 = {};
   };
 };
 
-/**
- * Timeline event manager.
- * @param {Timeline} timeline The owning Timeline.
- * @extends {TimeComponentEventManager}
- * @constructor
- */
-var DvtTimelineEventManager = function(timeline)
-{
-  DvtTimelineEventManager.superclass.constructor.call(this, timeline);
-};
-
-Obj.createSubclass(DvtTimelineEventManager, TimeComponentEventManager);
-
-/**
- * @override
- */
-DvtTimelineEventManager.prototype.addListeners = function(displayable)
-{
-  DvtTimelineEventManager.superclass.addListeners.call(this, displayable);
-  if (!Agent.isTouchDevice())
-  {
-    // IE does not always fire the appropriate mouseover and mouseout events, so use mouseenter instead
-    if ((Agent.browser === 'ie' || Agent.browser === 'edge'))
-    {
-      var stage = this.getCtx().getStage();
-      stage.addEvtListener('mouseenter', this.OnMouseEnter, false, this);
-      stage.addEvtListener('mouseleave', this.OnMouseLeave, false, this);
-    }
-  }
-};
-
-/**
- * @override
- */
-DvtTimelineEventManager.prototype.RemoveListeners = function(displayable)
-{
-  DvtTimelineEventManager.superclass.RemoveListeners.call(this, displayable);
-  if (!Agent.isTouchDevice())
-  {
-    // IE does not always fire the appropriate mouseover and mouseout events, so use mouseenter instead
-    if ((Agent.browser === 'ie' || Agent.browser === 'edge'))
-    {
-      var stage = this.getCtx().getStage();
-      stage.removeEvtListener('mouseenter', this.OnMouseEnter, false, this);
-      stage.removeEvtListener('mouseleave', this.OnMouseLeave, false, this);
-    }
-  }
-};
-
-/**
- * @override
- */
-DvtTimelineEventManager.prototype.PreOnMouseOver = function(event)
-{
-  if (this._mouseOutTimer && this._mouseOutTimer.isRunning())
-    this._mouseOutTimer.stop();
-  DvtTimelineEventManager.superclass.PreOnMouseOver.call(this, event);
-
-  if (Agent.browser !== 'ie' && Agent.browser !== 'edge' && !this.isMouseOver)
-    this.isMouseOver = true;
-};
-
-/**
- * Handler for the mouseenter event.
- * @param {dvt.MouseEvent} event The mouseenter event.
- */
-DvtTimelineEventManager.prototype.OnMouseEnter = function(event)
-{
-  if (this._mouseOutTimer && this._mouseOutTimer.isRunning())
-    this._mouseOutTimer.stop();
-
-  if (!this.isMouseOver)
-    this.isMouseOver = true;
-};
-
-/**
- * Handler for the mouseleave event.
- * @param {dvt.MouseEvent} event The mouseleave event.
- */
-DvtTimelineEventManager.prototype.OnMouseLeave = function(event)
-{
-  if (!this._mouseOutTimer)
-    this._mouseOutTimer = new Timer(this.getCtx(), 10, this._onMouseOutTimerEnd, this, 1);
-
-  this._mouseOutTimer.reset();
-  this._mouseOutTimer.start();
-};
-
-/**
- * @override
- */
-DvtTimelineEventManager.prototype.PreOnMouseOut = function(event)
-{
-  DvtTimelineEventManager.superclass.PreOnMouseOut.call(this, event);
-  if (Agent.browser !== 'ie' && Agent.browser !== 'edge')
-  {
-    if (!this._mouseOutTimer)
-      this._mouseOutTimer = new Timer(this.getCtx(), 10, this._onMouseOutTimerEnd, this, 1);
-
-    this._mouseOutTimer.reset();
-    this._mouseOutTimer.start();
-  }
-};
-
-/**
- * Mouse out timer callback function.
- * @private
- */
-DvtTimelineEventManager.prototype._onMouseOutTimerEnd = function()
-{
-  this.isMouseOver = false;
-};
-
-/**
- * Pans by the specified amount.
- * @param {number} dx A number from specifying the pan ratio in the x direction, e.g. dx = 0.5 means pan end by 50%..
- * @param {number} dy A number from specifying the pan ratio in the y direction, e.g. dy = 0.5 means pan down by 50%.
- */
-DvtTimelineEventManager.prototype.panBy = function(dx, dy)
-{
-  var focusObj = this.getFocus();
-  if (focusObj)
-    this._comp._dragPanSeries = focusObj._series;
-
-  DvtTimelineEventManager.superclass.panBy.call(this, dx, dy);
-};
-
-/**
- * Timeline JSON Parser
- * @class
- * @constructor
- * @extends {dvt.Obj}
- */
-var DvtTimelineParser = function() {
-
-};
-
-Obj.createSubclass(DvtTimelineParser, Obj);
-
-/**
- * Parses the specified data options and returns the root node of the timeline
- * @param {object} options The data options describing the component.
- * @return {object} An object containing the parsed properties
- */
-DvtTimelineParser.prototype.parse = function(options)
-{
-  var ret = new Object();
-  ret.start = new Date(options['start']).getTime();
-  ret.end = new Date(options['end']).getTime();
-
-  if (options['viewportStart'])
-    ret.viewStart = new Date(options['viewportStart']).getTime();
-  if (options['viewportEnd'])
-    ret.viewEnd = new Date(options['viewportEnd']).getTime();
-  if (options['selectionMode'])
-    ret.selectionMode = options['selectionMode'];
-  else
-    ret.selectionMode = 'none';
-  ret.inlineStyle = options['style'];
-  if (options['svgStyle'])
-    ret.inlineStyle = options['svgStyle'];
-
-  var minorAxis = options['minorAxis'];
-  if (minorAxis)
-  {
-    var scale = minorAxis['scale'];
-    ret.scale = scale;
-    ret.customFormatScales = minorAxis['_cfs'];
-  }
-  var majorAxis = options['majorAxis'];
-  if (majorAxis)
-  {
-    ret.seriesScale = majorAxis['scale'];
-    ret.seriesConverter = majorAxis['converter'];
-    ret.seriesCustomFormatScales = majorAxis['_cfs'];
-  }
-  ret.shortDesc = options['shortDesc'];
-  ret.orientation = options['orientation'];
-  var referenceObjects = options['referenceObjects'];
-  if (referenceObjects && referenceObjects.length > 0)
-  {
-    var referenceObjectsValueArray = [];
-    for (var i = 0; i < referenceObjects.length; i++)
-    {
-      referenceObjectsValueArray.push(new Date(referenceObjects[i]['value']));
-    }
-    ret.referenceObjects = referenceObjectsValueArray;
-  }
-
-  var overview = options['overview'];
-  if (overview != null && overview['rendered'] === 'on')
-    ret.hasOverview = true;
-  else
-    ret.hasOverview = false;
-
-  ret.itemPosition = options['_ip'];
-  ret.customTimeScales = options['_cts'];
-
-  return ret;
-};
-
 /**
  * Default values and utility functions for component versioning.
  * @class
@@ -2963,18 +2873,39 @@ DvtTimelineStyleUtils._DEFAULT_SERIES_AXIS_LABEL_BACKGROUND_OPACITY = 0.8;
 DvtTimelineStyleUtils._DEFAULT_SERIES_AXIS_LABEL_PADDING = 1;
 
 /**
- * The default Overview width.
+ * The default duration event width
  * @const
  * @private
  */
-DvtTimelineStyleUtils._DEFAULT_OVERVIEW_WIDTH = 60;
+DvtTimelineStyleUtils._DEFAULT_DURATION_EVENT_WIDTH = 8;
 
 /**
- * The default Overview height.
+ * The default Overview width.
  * @const
  * @private
  */
-DvtTimelineStyleUtils._DEFAULT_OVERVIEW_HEIGHT = 100;
+DvtTimelineStyleUtils._DEFAULT_OVERVIEW_WIDTH = 60;
+
+/**
+ * The default nav button background width.
+ * @const
+ * @private
+ */
+ DvtTimelineStyleUtils._DEFAULT_NAV_BUTTON_BACKGROUND_WIDTH = 60;
+
+/**
+ * The default nav button width.
+ * @const
+ * @private
+ */
+ DvtTimelineStyleUtils._DEFAULT_NAV_BUTTON_WIDTH = 36;
+
+/**
+ * The default Overview height.
+ * @const
+ * @private
+ */
+DvtTimelineStyleUtils._DEFAULT_OVERVIEW_HEIGHT = 100;
 
 /**
  * The default Item enabled stroke width.
@@ -3032,6 +2963,20 @@ DvtTimelineStyleUtils._DEFAULT_ITEM_INNER_STROKE_WIDTH = 2;
  */
 DvtTimelineStyleUtils._DEFAULT_BUBBLE_OFFSET = 20;
 
+/**
+ * The default content bubble arrow size.
+ * @const
+ * @private
+ */
+DvtTimelineStyleUtils._DEFAULT_CONTENT_BUBBLE_ARROW = 7.5;
+
+/**
+ * The default content bubble arrow size.
+ * @const
+ * @private
+ */
+DvtTimelineStyleUtils._DEFAULT_CONTENT_BUBBLE_SPACING = 15.5;
+
 /**
  * The default Item bubble spacing.
  * @const
@@ -3088,6 +3033,20 @@ DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_PADDING = 10.5;
  */
 DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_SPACING = 9;
 
+/**
+ * The default navigation arrow width.
+ * @const
+ * @private
+ */
+ DvtTimelineStyleUtils._DEFAULT_NAVIGATION_ARROW_WIDTH = 32;
+
+/**
+ * The default navigation arrow padding.
+ * @const
+ * @private
+ */
+DvtTimelineStyleUtils._DEFAULT_NAVIGATION_ARROW_PADDING = 8;
+
 /**
  * Gets the item description style.
  * @param {DvtTimelineSeriesNode} item The item to be styled.
@@ -3210,6 +3169,26 @@ DvtTimelineStyleUtils.getBubbleSpacing = function()
   return DvtTimelineStyleUtils._DEFAULT_BUBBLE_SPACING;
 };
 
+/**
+ * Gets the item bubble padding.
+ * @param {object} options The object containing data and specifications for the component.
+ * @return {number} The bubble padding.
+ */
+DvtTimelineStyleUtils.getBubblePadding = function(options)
+{
+  return DvtTimelineStyleUtils.getNumberFromString(options['styleDefaults']['item']['padding']);
+};
+
+/**
+ * Gets the item bubble margin.
+ * @param {object} options The object containing data and specifications for the component.
+ * @return {number} The bubble margin.
+ */
+DvtTimelineStyleUtils.getBubbleRadius = function(options)
+{
+  return DvtTimelineStyleUtils.getNumberFromString(options['styleDefaults']['item']['borderRadius']);
+};
+
 /**
  * Gets the item content spacing.
  * @return {number} The item content spacing.
@@ -3298,11 +3277,12 @@ DvtTimelineStyleUtils.getItemHoverStrokeColor = function(item)
 
 /**
  * Gets the item hover stroke width.
+ * @param {object} options The object containing data and specifications for the component.
  * @return {number} The item hover stroke width.
  */
-DvtTimelineStyleUtils.getItemHoverStrokeWidth = function()
+DvtTimelineStyleUtils.getItemHoverStrokeWidth = function(options)
 {
-  return DvtTimelineStyleUtils._DEFAULT_ITEM_HOVER_STROKE_WIDTH;
+  return DvtTimelineStyleUtils.getNumberFromString(options['styleDefaults']['item']['hoverStrokeWidth']);
 };
 
 /**
@@ -3463,6 +3443,24 @@ DvtTimelineStyleUtils.getOverviewHeight = function()
   return DvtTimelineStyleUtils._DEFAULT_OVERVIEW_HEIGHT;
 };
 
+/**
+ * Gets the fixed viewport navigation arrow width.
+ * @return {number} The overview height.
+ */
+DvtTimelineStyleUtils.getNavigationArrowWidth = function()
+{
+  return DvtTimelineStyleUtils._DEFAULT_NAVIGATION_ARROW_WIDTH;
+};
+
+/**
+ * Gets the fixed viewport navigation arrow padding.
+ * @return {number} The overview height.
+ */
+DvtTimelineStyleUtils.getNavigationArrowPadding = function()
+{
+  return DvtTimelineStyleUtils._DEFAULT_NAVIGATION_ARROW_PADDING;
+};
+
 /**
  * Gets the overview window background color.
  * @param {object} options The object containing data and specifications for the component.
@@ -3574,6 +3572,199 @@ DvtTimelineStyleUtils.convertToCSSStyle = function(style)
   return style;
 };
 
+/**
+ * Returns a number parsed from the string css value
+ * @param {string} cssString
+ * @return {number} The parsed css number value or null if no string provided
+ */
+DvtTimelineStyleUtils.getNumberFromString = function(cssString)
+{
+  if (cssString) {
+    var numVal =  cssString.match(/(\d+)/)[0];
+    return numVal;
+  }
+  return null;
+};
+
+/**
+ * Returns min width for duration event bubble
+ * @return {number} The minimum width of the duration event bubble
+ */
+DvtTimelineStyleUtils.getMinDurationEvent = function()
+{
+  return DvtTimelineStyleUtils._DEFAULT_DURATION_EVENT_WIDTH;
+};
+
+/**
+ * Returns size for content bubble arrow
+ * @return {number} The size of the content bubble arrow
+ */
+DvtTimelineStyleUtils.getContentBubbleArrow = function()
+{
+  return DvtTimelineStyleUtils._DEFAULT_CONTENT_BUBBLE_ARROW;
+};
+
+/**
+ * Returns size for content bubble spacing
+ * @return {number} The size of the content bubble space
+ */
+DvtTimelineStyleUtils.getContentBubbleSpacing = function()
+{
+  return DvtTimelineStyleUtils._DEFAULT_CONTENT_BUBBLE_SPACING;
+};
+
+/**
+ * Returns width/height for the nav arrow button background
+ * @return {number} The width/height of the nav arrow button background
+ */
+DvtTimelineStyleUtils.getNavButtonBackgroundWidth = function()
+{
+  return DvtTimelineStyleUtils._DEFAULT_NAV_BUTTON_BACKGROUND_WIDTH;
+};
+
+/**
+ * Returns width/height for the nav arrow button
+ * @return {number} The width/height of the nav arrow button
+ */
+DvtTimelineStyleUtils.getNavButtonWidth = function()
+{
+  return DvtTimelineStyleUtils._DEFAULT_NAV_BUTTON_WIDTH;
+};
+
+/**
+ * Returns bgcolor for content bubble
+ * @return {string} The bgcolor of the content bubble
+ */
+DvtTimelineStyleUtils.getContentBubbleBackgroundColor = function(options)
+{
+  return options['styleDefaults']['durationEventOverflow']['backgroundColor'];
+};
+
+/**
+ * DvtTimelineNavigationButton subclass of IconButton
+ * @param {Timeline} timeline The parent timeline.
+ * @param {dvt.Context} context
+ * @param {'outlined'|'borderless'} chroming
+ * @param {object} iconOptions supports keys style, size, pos
+ * @param {dvt.Shape} background (optional)
+ * @param {string} id
+ * @param {object=} callback
+ * @param {object=} callbackObj
+ * @extends {dvt.Path}
+ * @constructor
+ *
+ */
+ const DvtTimelineNavigationButton = function (
+  timeline,
+  context,
+  chroming,
+  iconOptions,
+  background,
+  id,
+  callback,
+  callbackObj
+) {
+  this.Init(timeline, context, chroming, iconOptions, background, id, callback, callbackObj);
+};
+Obj.createSubclass(DvtTimelineNavigationButton, IconButton);
+DvtTimelineNavigationButton.prototype.Init = function(
+  timeline,
+  context,
+  chroming,
+  iconOptions,
+  background,
+  id,
+  callback,
+  callbackObj
+) {
+  this._id = id;
+  this._timeline = timeline;
+  this._enabledState = true;
+  DvtTimelineNavigationButton.superclass.Init.call(this, context, chroming, iconOptions, background, id, callback, callbackObj);
+  this.setAriaRole('button');
+};
+DvtTimelineNavigationButton.prototype.getNextNavigable = function (event) {
+  var keyboardHandler = this._timeline.EventManager.getKeyboardHandler();
+  var isRTL = Agent.isRightToLeft(this._timeline.getCtx());
+
+  if (event.type === MouseEvent.CLICK || keyboardHandler.isMultiSelectEvent(event)) {
+    return this;
+  }
+  else if (keyboardHandler.isNavigationEvent(event)) {
+    if ((!isRTL && KeyboardEvent.RIGHT_ARROW === event.keyCode) || (isRTL && KeyboardEvent.LEFT_ARROW === event.keyCode)) {
+      // go forward
+      if (this._id === 'prevNavArrow') {
+        return this._timeline._nextArrow;
+      } else {
+        for (var i = 0; i < this._timeline._series.length; i++)
+        {
+          var series = this._timeline._series[i];
+          if (series._items && series._items.length > 0)
+          {
+            return series._items[0];
+          }
+        }
+      }
+    } else if ((!isRTL && KeyboardEvent.LEFT_ARROW === event.keyCode) || (isRTL && KeyboardEvent.RIGHT_ARROW === event.keyCode)) {
+      // go backwards
+      if (this._id === 'nextNavArrow') {
+        return this._timeline._prevArrow;
+      } else {
+        // don't do anything since you can only go forwards if already prevArrow
+        return this;
+      }
+    }
+  }
+  else {
+    return null;
+  }
+};
+DvtTimelineNavigationButton.prototype.getAriaLabel = function ()
+{
+  var translations = this._timeline.getOptions().translations;
+  var states = !this._enabledState ? [translations['navArrowDisabledState']] : [];
+  var label = Displayable.generateAriaLabel(this.getAriaString(), states);
+  return label;
+};
+
+DvtTimelineNavigationButton.prototype.getAriaString = function()
+{
+  var translations = this._timeline.getOptions().translations;
+  if (this._id === 'prevNavArrow')
+    return translations['labelAccNavPreviousPage'];
+  else if (this._id === 'nextNavArrow')
+    return translations['labelAccNavNextPage'];
+};
+
+/**
+ * Implemented for DvtKeyboardNavigable
+ * @override
+ */
+ DvtTimelineNavigationButton.prototype.getKeyboardBoundingBox = function(targetCoordinateSpace)
+{
+  return this.getDimensions(targetCoordinateSpace);
+};
+
+/**
+ * Catch the state
+ * @override
+ */
+DvtTimelineNavigationButton.prototype.setEnabled = function(enabledState)
+{
+  this._enabledState = enabledState;
+  this.setAriaProperty('label', this.getAriaLabel());
+  DvtTimelineNavigationButton.superclass.setEnabled.call(this, enabledState);
+};
+
+/**
+ * Implemented for DvtKeyboardNavigable
+ * @override
+ */
+DvtTimelineNavigationButton.prototype.getTargetElem = function()
+{
+  return this.getElem();
+};
+
 /**
  * Renderer for Timeline.
  * @class
@@ -3599,6 +3790,10 @@ DvtTimelineRenderer.renderTimeline = function(timeline)
     DvtTimelineRenderer._renderSeries(timeline, timeZoomCanvas);
     DvtTimelineRenderer._renderSeriesLabels(timeline);
     DvtTimelineRenderer._renderAxis(timeline, timeZoomCanvas);
+    if (timeline.isDiscreteNavigationMode())
+      DvtTimelineRenderer._renderNavigationArrows(timeline, timeZoomCanvas);
+    else
+      DvtTimelineRenderer._hideNavigationArrows(timeline, timeZoomCanvas);
 
     if (timeline._hasOverview)
       DvtTimelineRenderer._renderOverview(timeline);
@@ -3608,6 +3803,12 @@ DvtTimelineRenderer.renderTimeline = function(timeline)
     // just use the first object as the focus
     if (timeline._keyboardHandler)
     {
+      // if navigation mode set focus to prev arrow (removed for now)
+      /*
+      if (timeline.isDiscreteNavigationMode()) {
+        timeline.EventManager.setFocusObj(timeline._prevArrow);
+      }
+      */
       for (var i = 0; i < timeline._series.length; i++)
       {
         series = timeline._series[i];
@@ -3617,6 +3818,7 @@ DvtTimelineRenderer.renderTimeline = function(timeline)
           break;
         }
       }
+
     }
     if (timeline.isTimeDirScrollbarOn() || timeline.isContentDirScrollbarOn())
       DvtTimelineRenderer._renderScrollbars(timeline);
@@ -3867,6 +4069,130 @@ DvtTimelineRenderer._renderSeriesLabels = function(timeline)
   }
 };
 
+/**
+ * Renders the navigation arrows of the timeline
+ * @param {Timeline} timeline The timeline being rendered.
+ * @param {dvt.Container} container The container to render into.
+ * @private
+ */
+DvtTimelineRenderer._renderNavigationArrows = function(timeline, container)
+{
+  var context = timeline.getCtx();
+  var isRTL = Agent.isRightToLeft(context);
+  var length = timeline.getContentLength() * timeline._timeAxisRatio;
+  var seriesCount = timeline._series.length;
+  var axisVisibleSize = timeline.getTimeAxisVisibleSize(seriesCount);
+  var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+  var navButtonWidth = DvtTimelineStyleUtils.getNavButtonWidth();
+  var axisStart = seriesCount === 1 ? (timeline._canvasSize - axisVisibleSize) : (timeline._canvasSize / seriesCount - (axisVisibleSize / 2));
+  var timeAxisOffset = TimeAxisUtils.getDatePosition(timeline._start, timeline._end, timeline._viewStartTime, length) + timeline._discreteOffset - navButtonBackgroundWidth;
+  var nextTimeAxisOffset = timeline._backgroundWidth + timeAxisOffset - navButtonBackgroundWidth;
+  if (isRTL) {
+    nextTimeAxisOffset = length - nextTimeAxisOffset - navButtonBackgroundWidth - timeline.getScrollbarPadding() + timeline._discreteOffset * 2;
+    timeAxisOffset = length - timeAxisOffset - navButtonBackgroundWidth + timeline._discreteOffset * 2;
+  }
+  var buttonBorderColor = timeline.Options['styleDefaults']['item']['borderColor'];
+  var buttonStroke = new Stroke(buttonBorderColor, 1, 1);
+  var arrowContainerBackFillColor = timeline.Options['styleDefaults']['series']['backgroundColor'];
+  var translations = timeline.getOptions().translations;
+
+  if (timeline._prevArrowContainer == null) {
+    var prevArrowContainer = new Container(context);
+    var prevContainerBackground = new Rect(context, 0, 0, navButtonBackgroundWidth, navButtonBackgroundWidth, 'prevNavContainer');
+    var prevArrowButton = new Rect(context, 0, 0, navButtonWidth, navButtonWidth, 'prevNavContainer_i');
+    prevArrowButton.setCornerRadius(4);
+    prevArrowButton.setTranslate(8, 8);
+    prevContainerBackground.addChild(prevArrowButton);
+    prevArrowContainer.addChild(prevContainerBackground);
+    prevArrowContainer.setTranslate(timeAxisOffset, axisStart - navButtonWidth);
+    prevArrowContainer.setClassName('oj-timeline-nav-arrow oj-timeline-nav-arrow-previous');
+    prevArrowButton.setStroke(buttonStroke);
+    prevArrowContainer.setSolidFill(arrowContainerBackFillColor);
+    var iconStyle = ToolkitUtils.getIconStyle(context, timeline._resources.prev);
+    var prevButtonIcon = new DvtTimelineNavigationButton(timeline, context, 'outlined', {style: iconStyle, size: 28}, null, 'prevNavArrow', timeline.EventManager.prevPage, timeline.EventManager);
+    prevButtonIcon.setTranslate(4, 4);
+    prevArrowButton.addChild(prevButtonIcon);
+    container.addChild(prevArrowContainer);
+    timeline._prevArrowContainer = prevArrowContainer;
+    timeline._prevArrow = prevButtonIcon;
+  } else {
+    timeline._prevArrowContainer.setVisible('visible');
+    timeline._prevArrowContainer.setTranslate(timeAxisOffset, axisStart - navButtonWidth);
+    container.removeChild(timeline._prevArrowContainer);
+    container.addChild(timeline._prevArrowContainer);
+  }
+
+  if (timeline._nextArrowContainer == null) {
+    var nextArrowContainer = new Container(context);
+    var nextContainerBackground = new Rect(context, 0, 0, navButtonBackgroundWidth, navButtonBackgroundWidth, 'nextNavContainer');
+    var nextArrowButton = new Rect(context, 0, 0, navButtonWidth, navButtonWidth, 'nextNavContainer_i');
+    nextArrowButton.setCornerRadius(4);
+    nextArrowButton.setTranslate(16, 8);
+    nextContainerBackground.addChild(nextArrowButton);
+    nextArrowContainer.addChild(nextContainerBackground);
+    nextArrowContainer.setTranslate(nextTimeAxisOffset, axisStart - navButtonWidth);
+    nextArrowContainer.setClassName('oj-timeline-nav-arrow oj-timeline-nav-arrow-next');
+    nextArrowButton.setStroke(buttonStroke);
+    nextArrowContainer.setSolidFill(arrowContainerBackFillColor);
+    var iconStyle = ToolkitUtils.getIconStyle(context, timeline._resources.next);
+    var nextButtonIcon = new DvtTimelineNavigationButton(timeline, context, 'outlined', {style: iconStyle, size: 28}, null, 'nextNavArrow', timeline.EventManager.nextPage, timeline.EventManager);
+    nextButtonIcon.setTranslate(4, 4);
+    nextArrowButton.addChild(nextButtonIcon);
+    container.addChild(nextArrowContainer);
+    timeline._nextArrowContainer = nextArrowContainer;
+    timeline._nextArrow = nextButtonIcon;
+  } else {
+    timeline._nextArrowContainer.setVisible('visible');
+    timeline._nextArrowContainer.setTranslate(nextTimeAxisOffset, axisStart - navButtonWidth);
+    container.removeChild(timeline._nextArrowContainer);
+    container.addChild(timeline._nextArrowContainer);
+  }
+
+  DvtTimelineRenderer._checkDisabledArrows(timeline);
+};
+
+/**
+ * Hides the navigation arrows of the timeline if they exist
+ * @param {Timeline} timeline The timeline being rendered.
+ * @private
+ */
+DvtTimelineRenderer._hideNavigationArrows = function(timeline)
+{
+  if (timeline._prevArrowContainer != null) {
+    timeline._prevArrowContainer.setVisible();
+  }
+  if (timeline._nextArrowContainer != null) {
+    timeline._nextArrowContainer.setVisible();
+  }
+
+};
+
+/**
+ * Adds disabled state to the arrows if they are at the end of the available range.
+ * @param {Timeline} timeline The timeline being rendered.
+ * @private
+ */
+DvtTimelineRenderer._checkDisabledArrows = function(timeline)
+{
+  var earlierDates = timeline.getDiscreteViewportDatePosition(timeline._discreteViewportCurrentIndexOffset - 1);
+  var laterDates = timeline.getDiscreteViewportDatePosition(timeline._discreteViewportCurrentIndexOffset + 1);
+  if (earlierDates.startDate < timeline._start) {
+    timeline._prevArrowContainer.addClassName('oj-timeline-nav-arrow-disabled');
+    timeline._prevArrow.setEnabled(false);
+  } else {
+    timeline._prevArrowContainer.removeClassName('oj-timeline-nav-arrow-disabled');
+    timeline._prevArrow.setEnabled(true);
+  }
+
+  if (laterDates.endDate > timeline._end) {
+    timeline._nextArrowContainer.addClassName('oj-timeline-nav-arrow-disabled');
+    timeline._nextArrow.setEnabled(false);
+  } else {
+    timeline._nextArrowContainer.removeClassName('oj-timeline-nav-arrow-disabled');
+    timeline._nextArrow.setEnabled(true);
+  }
+};
+
 /**
  * Renders the minor time axis of a timeline.
  * @param {Timeline} timeline The timeline being rendered.
@@ -3885,6 +4211,7 @@ DvtTimelineRenderer._renderAxis = function(timeline, container, throttle)
   var axisSize = timeline.getTimeAxisSize();
   var axisVisibleSize = timeline.getTimeAxisVisibleSize(seriesCount);
   var axisStart = seriesCount === 1 ? (timeline._canvasSize - axisVisibleSize) : (timeline._canvasSize / seriesCount - (axisVisibleSize / 2));
+  var length = timeline.getContentLength();
   if (isRTL && timeline.isVertical() && timeline._series.length === 1)
     axisStart = 0;
 
@@ -3898,21 +4225,34 @@ DvtTimelineRenderer._renderAxis = function(timeline, container, throttle)
       _viewStartTime: timeline._viewStartTime,
       _viewEndTime: timeline._viewEndTime,
       _throttle: throttle
-    }, axisSize, timeline.getContentLength());
+    }, axisSize, length);
   }
   else
   {
-    posMatrix = new Matrix(1, 0, 0, 1, 0, axisStart);
+    var isDiscreteNavMode = timeline.isDiscreteNavigationMode();
+    var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+
+    length = isDiscreteNavMode ? length * timeline._timeAxisRatio : length;
+
+    // in navigation mode, grab +/- 60 px extra for beginning and end.
+    var startDatePos = TimeAxisUtils.getDatePosition(timeline._start, timeline._end, timeline._viewStartTime, length);
+    var startDate = Math.max(TimeAxisUtils.getPositionDate(timeline._start, timeline._end, startDatePos - navButtonBackgroundWidth, length), timeline._start);
+    var endDatePos = TimeAxisUtils.getDatePosition(timeline._start, timeline._end, timeline._viewEndTime, length);
+    var endDate = Math.min(TimeAxisUtils.getPositionDate(timeline._start, timeline._end, endDatePos + navButtonBackgroundWidth, length), timeline._end);
+
+    var startTime = isDiscreteNavMode ? startDate : timeline._viewStartTime;
+    var endTime = isDiscreteNavMode ? endDate : timeline._viewEndTime;
+    posMatrix = new Matrix(1, 0, 0, 1, timeline._discreteOffset, axisStart);
     timeAxis.render({
-      _viewStartTime: timeline._viewStartTime,
-      _viewEndTime: timeline._viewEndTime,
+      _viewStartTime: startTime,
+      _viewEndTime: endTime,
       _throttle: throttle
-    }, timeline.getContentLength(), axisSize);
+    }, length, axisSize);
   }
 
   timeAxis.setMatrix(posMatrix);
 
-  DvtTimelineRenderer._renderSeriesTimeAxis(timeline, timeline._fetchStartPos, timeline._fetchEndPos, timeline.getTimeZoomCanvas(), timeline.getContentLength());
+  DvtTimelineRenderer._renderSeriesTimeAxis(timeline, timeline._fetchStartPos, timeline._fetchEndPos, timeline.getTimeZoomCanvas(), length);
 };
 
 /**
@@ -3928,6 +4268,7 @@ DvtTimelineRenderer._renderSeriesTimeAxis = function(timeline, startPos, endPos,
 {
   var context = timeline.getCtx();
   var isRTL = Agent.isRightToLeft(context);
+  var offset = (timeline.isDiscreteNavigationMode() ? timeline._discreteOffset : 0) * (isRTL ? -1 : 1);
 
   if (timeline._majorAxisLabels)
   {
@@ -3989,9 +4330,9 @@ DvtTimelineRenderer._renderSeriesTimeAxis = function(timeline, startPos, endPos,
     {
       var label = labels[i];
       var currentTime = dates[i];
-      currentPos = TimeAxisUtils.getDatePosition(start, end, currentTime, length);
+      currentPos = TimeAxisUtils.getDatePosition(start, end, currentTime, length) + offset;
 
-      var next_time_pos = TimeAxisUtils.getDatePosition(start, end, dates[i + 1], length);
+      var next_time_pos = TimeAxisUtils.getDatePosition(start, end, dates[i + 1], length) + offset;
       var maxLength = next_time_pos - currentPos;
 
       if (!isRTL)
@@ -4072,6 +4413,14 @@ DvtTimelineRenderer._renderOverview = function(timeline)
 
   var overviewObject = timeline._getOverviewObject();
   timeline._overview.render(overviewObject, width, height);
+
+  // turn off overview dragging when in discrete viewport navigation mode
+  // turn off handle affordances;
+  if (timeline.isDiscreteNavigationMode()) {
+    timeline._overview.setMouseEnabled(false);
+    timeline._overview._windowLeftGrippy.setVisible();
+    timeline._overview._windowRightGrippy.setVisible();
+  }
 };
 
 /**
@@ -4296,38 +4645,50 @@ DvtTimelineRenderer._renderZoomControls = function(timeline)
   var resources = timeline._resources;
   var isRTL = Agent.isRightToLeft(context);
 
-  var zoomControlProperties = {
-    'zoomInProps': {
-      'imageSize': 16,
-      'class': resources['zoomIn']
-    },
-    'zoomOutProps': {
-      'imageSize': 16,
-      'class': resources['zoomOut']
-    }
-  };
+  if (!timeline.isDiscreteNavigationMode()) {
+    var zoomControlProperties = {
+      'zoomInProps': {
+        'imageSize': 16,
+        'class': resources['zoomIn']
+      },
+      'zoomOutProps': {
+        'imageSize': 16,
+        'class': resources['zoomOut']
+      }
+    };
 
-  var xOffset = timeline.getStartXOffset() + DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_PADDING;
-  if (isRTL)
-  {
-    // startXOffset includes the overview size when vertical, and the scrollbar region when not
-    if (timeline._isVertical && timeline._hasOverview)
-      xOffset = xOffset - timeline._overviewSize;
-    else
-      xOffset = xOffset - timeline.getBackgroundXOffset();
+    var xOffset = timeline.getStartXOffset() + DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_PADDING;
+    if (isRTL)
+    {
+      // startXOffset includes the overview size when vertical, and the scrollbar region when not
+      if (timeline._isVertical && timeline._hasOverview)
+        xOffset = xOffset - timeline._overviewSize;
+      else
+        xOffset = xOffset - timeline.getBackgroundXOffset();
 
-    xOffset = timeline._backgroundWidth - xOffset - DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_DIAMETER;
-  }
+      xOffset = timeline._backgroundWidth - xOffset - DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_DIAMETER;
+    }
+
+    zoomControlProperties['zoomInProps']['posX'] = xOffset;
+    zoomControlProperties['zoomOutProps']['posX'] = xOffset;
 
-  zoomControlProperties['zoomInProps']['posX'] = xOffset;
-  zoomControlProperties['zoomOutProps']['posX'] = xOffset;
+    var yOffset = timeline._startY + DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_PADDING;
 
-  var yOffset = timeline._startY + DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_PADDING;
+    zoomControlProperties['zoomInProps']['posY'] = yOffset;
+    zoomControlProperties['zoomOutProps']['posY'] = yOffset + DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_DIAMETER + DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_SPACING;
 
-  zoomControlProperties['zoomInProps']['posY'] = yOffset;
-  zoomControlProperties['zoomOutProps']['posY'] = yOffset + DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_DIAMETER + DvtTimelineStyleUtils._DEFAULT_ZOOM_CONTROL_SPACING;
+    timeline.renderZoomControls(zoomControlProperties);
 
-  timeline.renderZoomControls(zoomControlProperties);
+    // turn them visible if they may be hidden
+    timeline.zoomin.setVisible('visible');
+    timeline.zoomout.setVisible('visible');
+  } else {
+    // hide zoom controls if changing from different mode that uses zoom controls.
+    if (timeline.zoomin) {
+      timeline.zoomin.setVisible();
+      timeline.zoomout.setVisible();
+    }
+  }
 };
 
 /**
@@ -4350,7 +4711,7 @@ DvtTimelineRenderer._renderEmptyText = function(timeline)
 };
 
 /**
- * Adds a time inverval label.
+ * Adds a time interval label.
  * @param {type} context
  * @param {type} container
  * @param {type} pos
@@ -4403,6 +4764,252 @@ DvtTimelineRenderer._addLabel = function(context, container, pos, text, maxLengt
   return label;
 };
 
+/**
+ * Timeline event manager.
+ * @param {Timeline} timeline The owning Timeline.
+ * @extends {TimeComponentEventManager}
+ * @constructor
+ */
+var DvtTimelineEventManager = function(timeline)
+{
+  DvtTimelineEventManager.superclass.constructor.call(this, timeline);
+};
+
+Obj.createSubclass(DvtTimelineEventManager, TimeComponentEventManager);
+
+/**
+ * @override
+ */
+DvtTimelineEventManager.prototype.addListeners = function(displayable)
+{
+  DvtTimelineEventManager.superclass.addListeners.call(this, displayable);
+  if (!Agent.isTouchDevice())
+  {
+    // IE does not always fire the appropriate mouseover and mouseout events, so use mouseenter instead
+    if ((Agent.browser === 'ie' || Agent.browser === 'edge'))
+    {
+      var stage = this.getCtx().getStage();
+      stage.addEvtListener('mouseenter', this.OnMouseEnter, false, this);
+      stage.addEvtListener('mouseleave', this.OnMouseLeave, false, this);
+    }
+  }
+};
+
+/**
+ * @override
+ */
+DvtTimelineEventManager.prototype.RemoveListeners = function(displayable)
+{
+  DvtTimelineEventManager.superclass.RemoveListeners.call(this, displayable);
+  if (!Agent.isTouchDevice())
+  {
+    // IE does not always fire the appropriate mouseover and mouseout events, so use mouseenter instead
+    if ((Agent.browser === 'ie' || Agent.browser === 'edge'))
+    {
+      var stage = this.getCtx().getStage();
+      stage.removeEvtListener('mouseenter', this.OnMouseEnter, false, this);
+      stage.removeEvtListener('mouseleave', this.OnMouseLeave, false, this);
+    }
+  }
+};
+
+/**
+ * @override
+ */
+DvtTimelineEventManager.prototype.PreOnMouseOver = function(event)
+{
+  if (this._mouseOutTimer && this._mouseOutTimer.isRunning())
+    this._mouseOutTimer.stop();
+  DvtTimelineEventManager.superclass.PreOnMouseOver.call(this, event);
+
+  if (Agent.browser !== 'ie' && Agent.browser !== 'edge' && !this.isMouseOver)
+    this.isMouseOver = true;
+};
+
+/**
+ * Handler for the mouseenter event.
+ * @param {dvt.MouseEvent} event The mouseenter event.
+ */
+DvtTimelineEventManager.prototype.OnMouseEnter = function(event)
+{
+  if (this._mouseOutTimer && this._mouseOutTimer.isRunning())
+    this._mouseOutTimer.stop();
+
+  if (!this.isMouseOver)
+    this.isMouseOver = true;
+};
+
+/**
+ * Handler for the mouseleave event.
+ * @param {dvt.MouseEvent} event The mouseleave event.
+ */
+DvtTimelineEventManager.prototype.OnMouseLeave = function(event)
+{
+  if (!this._mouseOutTimer)
+    this._mouseOutTimer = new Timer(this.getCtx(), 10, this._onMouseOutTimerEnd, this, 1);
+
+  this._mouseOutTimer.reset();
+  this._mouseOutTimer.start();
+};
+
+/**
+ * @override
+ */
+DvtTimelineEventManager.prototype.PreOnMouseOut = function(event)
+{
+  DvtTimelineEventManager.superclass.PreOnMouseOut.call(this, event);
+  if (Agent.browser !== 'ie' && Agent.browser !== 'edge')
+  {
+    if (!this._mouseOutTimer)
+      this._mouseOutTimer = new Timer(this.getCtx(), 10, this._onMouseOutTimerEnd, this, 1);
+
+    this._mouseOutTimer.reset();
+    this._mouseOutTimer.start();
+  }
+};
+
+/**
+ * Mouse out timer callback function.
+ * @private
+ */
+DvtTimelineEventManager.prototype._onMouseOutTimerEnd = function()
+{
+  this.isMouseOver = false;
+};
+
+/**
+ * Discrete viewport navigation mode previous page callback
+ * @private
+ */
+DvtTimelineEventManager.prototype.prevPage = function()
+{
+  var timeline = this._component;
+  var elClass = timeline._prevArrowContainer.getClassName();
+
+  if (elClass.indexOf('oj-timeline-nav-arrow-disabled') === -1) {
+    timeline._discreteViewportCurrentIndexOffset --;
+    timeline.handlePageChangeDiscreteViewport();
+  }
+};
+
+/**
+ * Discrete viewport navigation mode next page callback
+ * @private
+ */
+DvtTimelineEventManager.prototype.nextPage = function()
+{
+  var timeline = this._component;
+  var elClass = timeline._nextArrowContainer.getClassName();
+
+  if (elClass.indexOf('oj-timeline-nav-arrow-disabled') === -1) {
+    timeline._discreteViewportCurrentIndexOffset ++;
+    timeline.handlePageChangeDiscreteViewport();
+  }
+};
+
+/**
+ * Discrete viewport navigation mode next/prev page event handle callback
+ * @private
+ */
+DvtTimelineEventManager.prototype.handleArrowPress = function(event)
+{
+  var focusObj = this.getFocus();
+  if (focusObj._id === 'prevNavArrow') {
+    this.prevPage();
+  } else if (focusObj._id === 'nextNavArrow') {
+    this.nextPage();
+  }
+  return focusObj;
+};
+
+/**
+ * Pans by the specified amount.
+ * @param {number} dx A number from specifying the pan ratio in the x direction, e.g. dx = 0.5 means pan end by 50%..
+ * @param {number} dy A number from specifying the pan ratio in the y direction, e.g. dy = 0.5 means pan down by 50%.
+ */
+DvtTimelineEventManager.prototype.panBy = function(dx, dy)
+{
+  var focusObj = this.getFocus();
+  if (focusObj)
+    this._comp._dragPanSeries = focusObj._series;
+
+  DvtTimelineEventManager.superclass.panBy.call(this, dx, dy);
+};
+
+/**
+ * Timeline JSON Parser
+ * @class
+ * @constructor
+ * @extends {dvt.Obj}
+ */
+var DvtTimelineParser = function() {
+
+};
+
+Obj.createSubclass(DvtTimelineParser, Obj);
+
+/**
+ * Parses the specified data options and returns the root node of the timeline
+ * @param {object} options The data options describing the component.
+ * @return {object} An object containing the parsed properties
+ */
+DvtTimelineParser.prototype.parse = function(options)
+{
+  var ret = new Object();
+  ret.start = new Date(options['start']).getTime();
+  ret.end = new Date(options['end']).getTime();
+
+  if (options['viewportStart'])
+    ret.viewStart = new Date(options['viewportStart']).getTime();
+  if (options['viewportEnd'])
+    ret.viewEnd = new Date(options['viewportEnd']).getTime();
+  if (options['selectionMode'])
+    ret.selectionMode = options['selectionMode'];
+  else
+    ret.selectionMode = 'none';
+  ret.inlineStyle = options['style'];
+  if (options['svgStyle'])
+    ret.inlineStyle = options['svgStyle'];
+
+  var minorAxis = options['minorAxis'];
+  if (minorAxis)
+  {
+    var scale = minorAxis['scale'];
+    ret.scale = scale;
+    ret.customFormatScales = minorAxis['_cfs'];
+  }
+  var majorAxis = options['majorAxis'];
+  if (majorAxis)
+  {
+    ret.seriesScale = majorAxis['scale'];
+    ret.seriesConverter = majorAxis['converter'];
+    ret.seriesCustomFormatScales = majorAxis['_cfs'];
+  }
+  ret.shortDesc = options['shortDesc'];
+  ret.orientation = options['orientation'];
+  var referenceObjects = options['referenceObjects'];
+  if (referenceObjects && referenceObjects.length > 0)
+  {
+    var referenceObjectsValueArray = [];
+    for (var i = 0; i < referenceObjects.length; i++)
+    {
+      referenceObjectsValueArray.push(new Date(referenceObjects[i]['value']));
+    }
+    ret.referenceObjects = referenceObjectsValueArray;
+  }
+
+  var overview = options['overview'];
+  if (overview != null && overview['rendered'] === 'on')
+    ret.hasOverview = true;
+  else
+    ret.hasOverview = false;
+
+  ret.itemPosition = options['_ip'];
+  ret.customTimeScales = options['_cts'];
+
+  return ret;
+};
+
 /**
  * Creates an instance of DvtTimelineSeriesItem which extends dvt.Container with hover and selection feedback.
  * @extends {dvt.Container}
@@ -4518,7 +5125,7 @@ DvtTimelineSeriesItem.prototype.applyState = function(state)
   {
     bubbleFillColor = DvtTimelineStyleUtils.getItemHoverFillColor(item);
     bubbleStrokeColor = DvtTimelineStyleUtils.getItemHoverStrokeColor(item);
-    bubbleStrokeWidth = DvtTimelineStyleUtils.getItemHoverStrokeWidth();
+    bubbleStrokeWidth = DvtTimelineStyleUtils.getItemHoverStrokeWidth(item._timeline.Options);
     bubbleInnerStrokeColor = DvtTimelineStyleUtils.getItemInnerActiveStrokeColor();
   }
   else
@@ -4533,10 +5140,18 @@ DvtTimelineSeriesItem.prototype.applyState = function(state)
   var bubbleStroke = new Stroke(bubbleStrokeColor, 1, bubbleStrokeWidth);
   var bubbleInnerStroke = new Stroke(bubbleInnerStrokeColor, 1, bubbleInnerStrokeWidth);
 
-  bubble.setSolidFill(bubbleFillColor);
   bubble.setStroke(bubbleStroke);
   bubbleInner.setStroke(bubbleInnerStroke);
 
+  if (state === DvtTimelineSeriesItem.HOVER_STATE_KEY) {
+    var bubbleBackFillColor = item._timeline.Options['styleDefaults']['series']['backgroundColor'];
+    bubble.setSolidFill(bubbleBackFillColor);
+    bubbleInner.setSolidFill(bubbleFillColor);
+  } else {
+    bubble.setSolidFill(bubbleFillColor);
+    bubbleInner.setSolidFill(DvtTimelineStyleUtils.getItemInnerFillColor());
+  }
+
   var feeler = item.getFeeler();
   if (feeler)
     feeler.setStroke(bubbleStroke);
@@ -4608,25 +5223,52 @@ DvtTimelineSeriesItemRenderer.initializeItem = function(item, series, index)
  */
 DvtTimelineSeriesItemRenderer._createBubble = function(item, series, index)
 {
-  var width, height;
-  var marginTop = 5;
-  var marginStart = 5;
-  var content = DvtTimelineSeriesItemRenderer._getBubbleContent(item, series);
+  var width, height, durationWidth, renderEnd;
+  var context = series.getCtx();
+  var isRTL = Agent.isRightToLeft(context);
 
-  // TODO: Review this later...
+  // if padding is specified, use that value. otherwise default to 5.
+  var padding = Number(DvtTimelineStyleUtils.getBubblePadding(item._timeline.Options));
+  var content = DvtTimelineSeriesItemRenderer._getBubbleContent(item, series);
   var customRenderer = item._timeline.getOptions().itemBubbleContentRenderer;
 
   if (customRenderer) {
     // Ensure width is positive
-    width = Math.max(0, content._w + content._x + marginStart * 2);
-    height = content._h + content._y + marginTop * 2;
+    width = Math.max(0, content._w + content._x + padding * 2);
+    height = content._h + content._y + padding * 2;
   } else {
-    width = content._w + marginStart * 2;
-    height = content._h + marginTop * 2;
+    width = content._w + padding * 2;
+    height = content._h + padding * 2;
   }
 
+  item.setContentWidth(width);
+
+  var startTime = item.getStartTime();
+  var endTime = item.getEndTime();
+  var loc = TimeAxisUtils.getDatePosition(series._start, series._end, startTime, series._length);
+  var endLoc = TimeAxisUtils.getDatePosition(series._start, series._end, endTime, series._length);
+
+  if (item.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT) {
+    // special duration-event bubble width matches the duration length with min width applied
+    durationWidth = Math.max(endLoc - loc, DvtTimelineStyleUtils.getMinDurationEvent());
+
+    if (durationWidth < width) {
+      width = durationWidth + width + DvtTimelineStyleUtils.getContentBubbleSpacing();
+    } else {
+      width = durationWidth;
+    }
+  }
+
+  // check viewport collision
+  DvtTimelineSeriesItemRenderer.checkEndViewportCollision(item, series, isRTL, width);
+
+  // for collision, need the start position to be -contentWidth
+  if (item.getEndViewportCollision() && durationWidth === null) {
+    width = 2 * width + DvtTimelineStyleUtils.getContentBubbleSpacing();
+  }
   item.setWidth(width);
   item.setHeight(height);
+  item.setDurationWidth(durationWidth);
   item._content = content;
 
   var spacing = series.calculateSpacing(item, index);
@@ -4643,103 +5285,137 @@ DvtTimelineSeriesItemRenderer._createBubble = function(item, series, index)
  */
 DvtTimelineSeriesItemRenderer._renderBubble = function(item, series, container, animationElems)
 {
+  var bubble, innerBubble, contentBubble, endViewportCollision, flipContentBubble;
+  var bubbleArray, innerBubbleArray, contentBubbleArray;
   var context = series.getCtx();
   var isRTL = Agent.isRightToLeft(context);
 
   var id = item.getId();
-  var marginTop = 5;
-  var marginStart = 5;
+
+  // if padding is specified, use that value. otherwise default to 5.
+  var padding = Number(DvtTimelineStyleUtils.getBubblePadding(item._timeline.Options));
+  var borderRadius = Number(DvtTimelineStyleUtils.getBubbleRadius(item._timeline.Options));
   var content = item._content;
+
+  var overflowContent = DvtTimelineSeriesItemRenderer._isOverflow(item);
   item._content = null;
 
   var nodeWidth = item.getWidth();
+  var nodeContentWidth = item.getContentWidth();
+  var nodeDurationWidth = item.getDurationWidth();
   var nodeHeight = item.getHeight();
 
   // draw the bubble
   var bubbleId = '_bubble_' + id;
-  if (series.isVertical())
-  {
-    var offset = nodeHeight / 2;
-    var startOffset = offset - 6;
-    var endOffset = offset + 6;
-    if (!isRTL && series.isInverted() || isRTL && !series.isInverted())
-    {
-      var bubbleArray = [0, 0, 0, startOffset, -6, offset, 0, endOffset, 0, nodeHeight, nodeWidth, nodeHeight, nodeWidth, 0, 0, 0];
-      var innerBubbleArray = [2, 2, 2, startOffset, -4, offset, 2, endOffset,
-         2, nodeHeight - 2, nodeWidth - 2, nodeHeight - 2, nodeWidth - 2, 2, 2, 2];
-    }
-    else
-    {
-      bubbleArray = [0, 0, 0, nodeHeight, nodeWidth, nodeHeight, nodeWidth, endOffset, nodeWidth + 6, offset, nodeWidth, startOffset, nodeWidth, 0, 0, 0];
-      innerBubbleArray = [2, 2, 2, nodeHeight - 2, nodeWidth - 2, nodeHeight - 2, nodeWidth - 2, endOffset,
-         nodeWidth + 4, offset, nodeWidth - 2, startOffset, nodeWidth - 2, 2, 2, 2];
-    }
-  }
-  else
-  {
-    if (!isRTL) {
-      offset = DvtTimelineStyleUtils.getBubbleOffset();
-    }
-    else {
-      offset = nodeWidth - DvtTimelineStyleUtils.getBubbleOffset();
-    }
-    startOffset = offset - 6;
-    endOffset = offset + 6;
-    if (series.isInverted())
-    {
-      bubbleArray = [0, 0, startOffset, 0, offset, -6, endOffset, 0, nodeWidth, 0, nodeWidth, nodeHeight, 0, nodeHeight, 0, 0];
-      innerBubbleArray = [2, 2, startOffset, 2, offset, -4, endOffset,
-         2, nodeWidth - 2, 2, nodeWidth - 2, nodeHeight - 2, 2, nodeHeight - 2, 2, 2];
+  if (item._timeline.getCtx().getThemeBehavior() === 'alta') {
+    // Keep the Alta bubble behavior until we can remove
+    if (series.isVertical()) {
+      var offset = nodeHeight / 2;
+      var startOffset = offset - 6;
+      var endOffset = offset + 6;
+      if (!isRTL && series.isInverted() || isRTL && !series.isInverted()) {
+        bubbleArray = [0, 0, 0, startOffset, -6, offset, 0, endOffset, 0, nodeHeight, nodeWidth, nodeHeight, nodeWidth, 0, 0, 0];
+        innerBubbleArray = [2, 2, 2, startOffset, -4, offset, 2, endOffset,
+          2, nodeHeight - 2, nodeWidth - 2, nodeHeight - 2, nodeWidth - 2, 2, 2, 2];
+      } else {
+        bubbleArray = [0, 0, 0, nodeHeight, nodeWidth, nodeHeight, nodeWidth, endOffset, nodeWidth + 6, offset, nodeWidth, startOffset, nodeWidth, 0, 0, 0];
+        innerBubbleArray = [2, 2, 2, nodeHeight - 2, nodeWidth - 2, nodeHeight - 2, nodeWidth - 2, endOffset,
+          nodeWidth + 4, offset, nodeWidth - 2, startOffset, nodeWidth - 2, 2, 2, 2];
+      }
+    } else {
+      if (!isRTL) {
+        offset = DvtTimelineStyleUtils.getBubbleOffset();
+      } else {
+        offset = nodeWidth - DvtTimelineStyleUtils.getBubbleOffset();
+      }
+      startOffset = offset - 6;
+      endOffset = offset + 6;
+      if (series.isInverted()) {
+        bubbleArray = [0, 0, startOffset, 0, offset, -6, endOffset, 0, nodeWidth, 0, nodeWidth, nodeHeight, 0, nodeHeight, 0, 0];
+        innerBubbleArray = [2, 2, startOffset, 2, offset, -4, endOffset,
+          2, nodeWidth - 2, 2, nodeWidth - 2, nodeHeight - 2, 2, nodeHeight - 2, 2, 2];
+      } else {
+        bubbleArray = [0, 0, 0, nodeHeight, startOffset, nodeHeight, offset, nodeHeight + 6, endOffset, nodeHeight, nodeWidth, nodeHeight, nodeWidth, 0, 0, 0];
+        innerBubbleArray = [2, 2, 2, nodeHeight - 2, startOffset, nodeHeight - 2, offset, nodeHeight + 4, endOffset,
+          nodeHeight - 2, nodeWidth - 2, nodeHeight - 2, nodeWidth - 2, 2, 2, 2];
+      }
     }
-    else
-    {
-      bubbleArray = [0, 0, 0, nodeHeight, startOffset, nodeHeight, offset, nodeHeight + 6, endOffset, nodeHeight, nodeWidth, nodeHeight, nodeWidth, 0, 0, 0];
-      innerBubbleArray = [2, 2, 2, nodeHeight - 2, startOffset, nodeHeight - 2, offset, nodeHeight + 4, endOffset,
-         nodeHeight - 2, nodeWidth - 2, nodeHeight - 2, nodeWidth - 2, 2, 2, 2];
+    bubble = new Polygon(context, bubbleArray, bubbleId);
+    innerBubble = new Polygon(context, innerBubbleArray, bubbleId + '_i');
+  } else {
+    var triangleIconSize = DvtTimelineStyleUtils.getContentBubbleArrow();
+    endViewportCollision = item.getEndViewportCollision();
+    flipContentBubble = (isRTL && !endViewportCollision) || (!isRTL && endViewportCollision);
+    // Invert not required as top vs bottom priority stacking does not affect bubble point array
+    if (flipContentBubble) {
+      contentBubbleArray = [0, 0, nodeContentWidth, 0, nodeContentWidth, nodeHeight/2 - triangleIconSize, nodeContentWidth + triangleIconSize, nodeHeight/2, nodeContentWidth, nodeHeight/2 + triangleIconSize, nodeContentWidth, nodeHeight, 0, nodeHeight, 0, 0];
+    } else {
+      contentBubbleArray = [0, 0, 0, nodeHeight/2 - triangleIconSize, -triangleIconSize, nodeHeight/2, 0, nodeHeight/2 + triangleIconSize, 0, nodeHeight, nodeContentWidth, nodeHeight, nodeContentWidth, 0, 0, 0];
     }
-  }
-  var bubble = new Polygon(context, bubbleArray, bubbleId);
-  var innerBubble = new Polygon(context, innerBubbleArray, bubbleId + '_i');
-
-  innerBubble.setSolidFill(DvtTimelineStyleUtils.getItemInnerFillColor());
 
-  // margin around content
-  if (!isRTL) {
-    content.setTranslate(marginStart, marginTop);
-  } else {
-    var customRenderer = item._timeline.getOptions().itemBubbleContentRenderer;
+    contentBubble = new Polygon(context, contentBubbleArray, bubbleId + '_ct');
+    contentBubble.setSolidFill(DvtTimelineStyleUtils.getContentBubbleBackgroundColor(item._timeline.getOptions()));
 
-    if (customRenderer) {
-      content.setTranslate(nodeWidth - marginStart - 2 * content._x, marginTop);
-    } else {
-      content.setTranslate(marginStart, marginTop);
+    if (nodeDurationWidth) {
+      nodeWidth = nodeDurationWidth;
     }
+    bubble = new Rect(context, 0, 0, nodeWidth, nodeHeight, bubbleId);
+    innerBubble = new Rect(context, 2, 2, nodeWidth - 4, nodeHeight - 4, bubbleId + '_i');
+    bubble.setCornerRadius(borderRadius);
+    innerBubble.setCornerRadius(borderRadius);
   }
+
+  innerBubble.setSolidFill(DvtTimelineStyleUtils.getItemInnerFillColor());
   bubble.addChild(innerBubble);
-  bubble.addChild(content);
 
+  // set up bubbleContainer
   var bubbleContainerId = '_bt_' + id;
   var bubbleContainer = new DvtTimelineSeriesItem(context, bubbleContainerId);
+
+  // associate the node with the marker
+  bubbleContainer._node = item;
+
+  // associate the displayable with the node
+  item.setBubble(bubbleContainer);
+  item.setContentBubble(contentBubble);
+
   if (animationElems)
   {
     bubbleContainer.setAlpha(0);
     animationElems.push(bubbleContainer);
   }
-  bubbleContainer.addChild(bubble);
+
+  // set up padding around content and add to container
+  var contentPadding = DvtTimelineSeriesItemRenderer.calcPadding(item, isRTL, padding, nodeWidth, overflowContent, content);
+  if (overflowContent && (item.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT || item._timeline.isDiscreteNavigationMode())) {
+    endViewportCollision = item.getEndViewportCollision();
+    flipContentBubble = (isRTL && !endViewportCollision) || (!isRTL && endViewportCollision);
+
+    var contentBubbleAdjust = (contentPadding + 15.5) * (flipContentBubble ? -1 : 1);
+    // if overflow, use the contentBubble to hold content. Otherwise, use the bubble
+    contentBubble.setTranslateX(contentBubbleAdjust);
+    contentBubble.addChild(content);
+    content.setTranslate(padding, padding);
+    bubbleContainer.addChild(bubble);
+    bubbleContainer.addChild(contentBubble);
+  } else {
+    // if not in viewport and in navMode using duration event, hide content to prevent overflowing into viewport
+    var notInViewport = item._timeline._viewStartTime > item.getEndTime() || item._timeline._viewEndTime < item.getStartTime();
+    if (item._timeline.isDiscreteNavigationMode() && notInViewport && item.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT) {
+      content.setVisible();
+    }
+    content.setTranslate(contentPadding, padding);
+    bubble.addChild(content);
+    bubbleContainer.addChild(bubble);
+  }
   if (TimeAxisUtils.supportsTouch())
     ToolkitUtils.setAttrNullNS(bubbleContainer._elem, 'id', bubbleContainer._id);
 
-  // associate the node with the marker
-  bubbleContainer._node = item;
-
-  // associate the displayable with the node
-  item.setBubble(bubbleContainer);
   bubbleContainer.applyState(DvtTimelineSeriesItem.ENABLED_STATE_KEY);
   bubbleContainer.setClassName('oj-timeline-item-bubble');
 
   if (item.getLoc() >= 0)
     container.addChild(bubbleContainer);
-
   bubbleContainer.setAriaRole('img');
   series._callbackObj.EventManager.associate(bubbleContainer, item);
 };
@@ -4781,10 +5457,15 @@ DvtTimelineSeriesItemRenderer._displayBubble = function(item, series, overflowOf
   }
   else
   {
-    if (!isRTL)
-      transX = loc - DvtTimelineStyleUtils.getBubbleOffset();
-    else
-      transX = series._length - loc - nodeWidth + DvtTimelineStyleUtils.getBubbleOffset();
+    var bubbleOffsetVal = item.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT ? 0 : DvtTimelineStyleUtils.getBubbleOffset();
+    if (!isRTL){
+      transX = loc - bubbleOffsetVal;
+    } else {
+      transX = series._length - loc - nodeWidth + bubbleOffsetVal;
+      if (DvtTimelineSeriesItemRenderer._isOverflow(item)) {
+        transX += item.getContentWidth();
+      }
+    }
     if (!series.isInverted())
     {
       if (!series.isTopToBottom())
@@ -4977,6 +5658,11 @@ DvtTimelineSeriesItemRenderer._getBubbleContent = function(item, series)
  */
 DvtTimelineSeriesItemRenderer._updateBubble = function(item, series, index)
 {
+  // Need to update the bubble widths before spacing if applicable
+  if (item.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT) {
+    DvtTimelineSeriesItemRenderer._updateDurationEvent(item, series);
+  }
+
   var spacing = series.calculateSpacing(item, index);
   item.setSpacing(spacing);
 };
@@ -4999,11 +5685,18 @@ DvtTimelineSeriesItemRenderer._renderFeeler = function(item, series, container,
   var loc = item.getLoc();
   var spacing = item.getSpacing();
 
+  // clear feeler if duration-event
+  if (item.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT) {
+    item.setFeeler(null);
+    return;
+  }
+
   // draw the feeler
   var feelerId = '_feeler_' + id;
+  var durationSize = item.getItemType() === DvtTimelineSeriesNode.DURATION_BAR ? item.getDurationSize() : 0;
   if (!series.isInverted())
   {
-    var feelerY = series.Height + overflowOffset - item.getDurationSize();
+    var feelerY = series.Height + overflowOffset - durationSize;
     if (!series.isTopToBottom())
       var feelerHeight = series.Height - spacing + overflowOffset;
     else
@@ -5011,7 +5704,8 @@ DvtTimelineSeriesItemRenderer._renderFeeler = function(item, series, container,
   }
   else
   {
-    feelerY = item.getDurationSize();
+    // only shorten feelerY if duration bar
+    feelerY = durationSize;
     if (series.isTopToBottom())
       feelerHeight = spacing;
     else
@@ -5048,7 +5742,7 @@ DvtTimelineSeriesItemRenderer._renderFeeler = function(item, series, container,
  */
 DvtTimelineSeriesItemRenderer._updateFeeler = function(item, series, overflowOffset, animator)
 {
-  if (series.isVertical())
+  if (series.isVertical() || item.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT)
   {
     item.setFeeler(null);
     return;
@@ -5058,9 +5752,10 @@ DvtTimelineSeriesItemRenderer._updateFeeler = function(item, series, overflowOff
   var isRTL = Agent.isRightToLeft(context);
 
   var feeler = item.getFeeler();
+  var durationSize = item.getItemType() === DvtTimelineSeriesNode.DURATION_BAR ? item.getDurationSize() : 0;
   if (!series.isInverted())
   {
-    var feelerY = series.Height + overflowOffset - item.getDurationSize();
+    var feelerY = series.Height + overflowOffset - durationSize;
     if (!series.isTopToBottom())
       var feelerHeight = series.Height - item.getSpacing() + overflowOffset;
     else
@@ -5068,7 +5763,7 @@ DvtTimelineSeriesItemRenderer._updateFeeler = function(item, series, overflowOff
   }
   else
   {
-    feelerY = item.getDurationSize();
+    feelerY = durationSize;
     if (series.isTopToBottom())
       feelerHeight = item.getSpacing();
     else
@@ -5197,15 +5892,16 @@ DvtTimelineSeriesItemRenderer._renderDuration = function(item, series, container
  */
 DvtTimelineSeriesItemRenderer._updateDuration = function(item, series, overflowOffset, animator)
 {
+  var loc, endLoc;
   var context = series.getCtx();
   var isRTL = Agent.isRightToLeft(context);
 
   var duration = item.getDurationBar();
   if (duration != null)
   {
-    var loc = TimeAxisUtils.getDatePosition(series._start, series._end, item.getStartTime(), series._length);
+    loc = TimeAxisUtils.getDatePosition(series._start, series._end, item.getStartTime(), series._length);
     var durationSize = 22 + 10 * item.getDurationLevel();
-    var endLoc = TimeAxisUtils.getDatePosition(series._start, series._end, item.getEndTime(), series._length);
+    endLoc = TimeAxisUtils.getDatePosition(series._start, series._end, item.getEndTime(), series._length);
     if (series.isVertical())
     {
       var durationTransY = 0;
@@ -5270,6 +5966,253 @@ DvtTimelineSeriesItemRenderer._updateDuration = function(item, series, overflowO
   }
 };
 
+
+/**
+ * Updates the rendering of a timeline series item duration event.
+ * @param {DvtTimelineSeriesItem} item The item being updated.
+ * @param {DvtTimelineSeries} series The series containing this item.
+ * @private
+ */
+DvtTimelineSeriesItemRenderer._updateDurationEvent = function(item, series)
+{
+  var nodeWidth, content, contentBubbleArray;
+  var context = series.getCtx();
+  var isRTL = Agent.isRightToLeft(context);
+  var loc = TimeAxisUtils.getDatePosition(series._start, series._end, item.getStartTime(), series._length);
+  var endLoc = TimeAxisUtils.getDatePosition(series._start, series._end, item.getEndTime(), series._length);
+  var bubble = item.getBubble();
+  var durationBubble = bubble.getChildAt(0);
+  var durationInnerBubble = durationBubble.getChildAt(0);
+  var contentBubble = item.getContentBubble();
+  var contentWidth = item.getContentWidth();
+  var nodeHeight = item.getHeight();
+  var durationWidth = Math.max(endLoc - loc, DvtTimelineStyleUtils.getMinDurationEvent());
+  var contentWidth = item.getContentWidth();
+  var triangleIconSize = DvtTimelineStyleUtils.getContentBubbleArrow();
+  var navMode = item._timeline.isDiscreteNavigationMode();
+
+  // resize the bubble and address overflow content if needed
+  durationBubble.setWidth(durationWidth);
+  durationInnerBubble.setWidth(durationWidth - 4);
+
+  // Check viewport collision
+  var previousCollision = item.getEndViewportCollision();
+
+  // check to use durationWidth or overflow width
+  var checkWidth = contentWidth < durationWidth ? durationWidth : durationWidth + contentWidth;
+  DvtTimelineSeriesItemRenderer.checkEndViewportCollision(item, series, isRTL, checkWidth);
+  var endViewportCollision = item.getEndViewportCollision();
+  var flipContentBubble = (isRTL && !endViewportCollision) || (!isRTL && endViewportCollision);
+
+  if (previousCollision !== endViewportCollision) {
+    // if collision state changed, need to flip the item bubble
+    if (flipContentBubble) {
+      contentBubbleArray = [0, 0, contentWidth, 0, contentWidth, nodeHeight/2 - triangleIconSize, contentWidth + triangleIconSize, nodeHeight/2, contentWidth, nodeHeight/2 + triangleIconSize, contentWidth, nodeHeight, 0, nodeHeight, 0, 0];
+    } else {
+      contentBubbleArray = [0, 0, 0, nodeHeight/2 - triangleIconSize, -triangleIconSize, nodeHeight/2, 0, nodeHeight/2 + triangleIconSize, 0, nodeHeight, contentWidth, nodeHeight, contentWidth, 0, 0, 0];
+    }
+    contentBubble.setPoints(contentBubbleArray);
+  }
+
+  // Check overflow is true.
+  // If overflow false, then this is discrete viewport navigation mode and we need to avoid showing
+  // overflow to prevent it from layering into the current viewport.
+  if (DvtTimelineSeriesItemRenderer._isOverflow(item)) {
+    nodeWidth = durationWidth + contentWidth + DvtTimelineStyleUtils.getContentBubbleSpacing();
+
+    // need to enable overflow if content is still in durationEventBubble
+    if (durationBubble.getNumChildren() > 1) {
+      content = durationBubble.getChildAt(1);
+      contentBubble.addChild(content);
+      bubble.addChild(contentBubble);
+    }
+    var padding = Number(DvtTimelineStyleUtils.getBubblePadding(item._timeline.Options));
+    var contentPadding = DvtTimelineSeriesItemRenderer.calcPadding(item, isRTL, padding, durationWidth, true, content);
+
+    var contentBubbleAdjust = (contentPadding + 15.5) * (flipContentBubble ? -1 : 1);
+    contentBubble.setTranslateX(contentBubbleAdjust);
+
+    // set content to visible if in discrete viewport navigation mode since it may have been hidden outside of viewport
+    if (navMode) {
+      if (!content) {
+        content = contentBubble.getChildAt(0);
+      }
+      content.setVisible('visible');
+    }
+} else {
+    nodeWidth = durationWidth;
+
+    // need to disable overflow if content is still in contentBubble
+    if (contentBubble.getNumChildren() > 0) {
+      content = contentBubble.getChildAt(0);
+      durationBubble.addChild(content);
+      bubble.removeChild(contentBubble);
+    }
+    var padding = Number(DvtTimelineStyleUtils.getBubblePadding(item._timeline.Options));
+    var contentPadding = DvtTimelineSeriesItemRenderer.calcPadding(item, isRTL, padding, durationWidth, false, content);
+
+    // hide content if it's not in viewport for discrete viewport navigation mode to prevent layering into current viewport
+    if (!content) {
+      content = durationBubble.getChildAt(1);
+    }
+    var notInViewport = item._timeline._viewStartTime > item.getEndTime() || item._timeline._viewEndTime < item.getStartTime();
+    if (navMode && notInViewport) {
+      content.setVisible();
+    } else {
+      content.setVisible('visible');
+      content.setTranslateX(contentPadding);
+    }
+  }
+
+  // update the item with the new widths;
+  item.setWidth(nodeWidth);
+  item.setDurationWidth(Math.max(durationWidth, DvtTimelineStyleUtils.getMinDurationEvent()));
+};
+
+/**
+ * Checks if the content is in overflow mode
+ * @param {DvtTimelineSeriesItem} item The item being updated.
+ * @return {boolean} true if overflow, false otherwise
+ * @private
+ */
+DvtTimelineSeriesItemRenderer._isOverflow = function (item)
+{
+  var contentWidth = item.getContentWidth();
+  var durationWidth = item.getDurationWidth();
+  var endViewportCollision = item.getEndViewportCollision();
+  var navMode = item._timeline.isDiscreteNavigationMode();
+  // no overflow behavior if not duration-event right now
+  if (item.getItemType() !== DvtTimelineSeriesNode.DURATION_EVENT) {
+    return false;
+  }
+
+  // ignore items not in current viewport
+  var notInViewport = item._timeline._viewStartTime > item.getEndTime() || item._timeline._viewEndTime < item.getStartTime();
+  if (navMode && notInViewport) {
+    return false;
+  }
+
+  // edge case in nav mode where the item bubble breaks start viewport edge
+  if (navMode && DvtTimelineSeriesItemRenderer.checkStartViewportCollision(item)) {
+    var loc = TimeAxisUtils.getDatePosition(item._timeline._start, item._timeline._end, item._timeline._viewStartTime, item._timeline.getContentLength());
+    var endLoc = TimeAxisUtils.getDatePosition(item._timeline._start, item._timeline._end, item.getEndTime(), item._timeline.getContentLength());
+    durationWidth = endLoc - loc;
+  }
+
+  // if content is larger than the item, use overflow
+  // if item is at viewport edge also use overflow
+  if (durationWidth < contentWidth || endViewportCollision) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Calculate the padding for the content
+ * @param {DvtTimelineSeriesItem} item The item being updated.
+ * @param {boolean} isRTL RTL boolean value
+ * @param {Number} padding default value for the bubble padding from the css
+ * @param {Number} nodeWidth width of the event bubble (either duration or item)
+ * @param {boolean} isOverflow boolean if overflow padding should be calculated
+ * @param {Container} content content to grab x position
+ * @return {Number} padding value for the content
+ * @private
+ */
+DvtTimelineSeriesItemRenderer.calcPadding = function (item, isRTL, padding, nodeWidth, isOverflow, content)
+{
+  var contentPadding = padding;
+  var customRenderer = item._timeline.getOptions().itemBubbleContentRenderer;
+
+  if (isRTL && customRenderer) {
+    contentPadding = nodeWidth - padding - 2 * content._x;
+  }
+
+  var endViewportCollision = item.getEndViewportCollision();
+  // check using isOverflow to determine padding
+  if (isOverflow) {
+    var flipContentPadding = (isRTL && !endViewportCollision) || (!isRTL && endViewportCollision);
+    if (flipContentPadding) {
+      nodeWidth = item.getContentWidth();
+    }
+    contentPadding = contentPadding + (nodeWidth - padding);
+  }
+
+  // if viewport start collision and in discrete nav mode, adjust content to start in the viewport
+  if (item._timeline.isDiscreteNavigationMode() && !isOverflow && item.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT) {
+    var viewStartCollision = DvtTimelineSeriesItemRenderer.checkStartViewportCollision(item);
+    if (viewStartCollision) {
+      var endLoc = TimeAxisUtils.getDatePosition(item._timeline._start, item._timeline._end, item._timeline._viewStartTime, item._timeline.getContentLength());
+      var loc = TimeAxisUtils.getDatePosition(item._timeline._start, item._timeline._end, item.getStartTime(), item._timeline.getContentLength());
+      var paddingAdjustment = endLoc - loc;
+      if (isRTL) {
+        contentPadding += paddingAdjustment;
+      } else {
+        contentPadding -= paddingAdjustment;
+      }
+    }
+  }
+
+  return contentPadding;
+};
+
+/**
+ * Checks the start viewport collision parameter.
+ * @param {DvtTimelineSeriesItem} item The item being updated.
+ * @return {boolean} true if overflow, false otherwise
+ * @private
+ */
+DvtTimelineSeriesItemRenderer.checkStartViewportCollision = function (item)
+{
+  return item._timeline._viewStartTime >= item.getStartTime() && item._timeline._viewStartTime <= item.getEndTime()
+};
+
+/**
+ * Sets the end viewport collision parameter. Will be used to set the flipped overflow container
+ * @param {DvtTimelineSeriesItem} item The item being updated.
+ * @param {DvtTimelineSeries} series The series containing this item.
+ * @param {boolean} isRTL RTL boolean value
+ * @param {Number} width width of the event bubble (either duration or item)
+ * @private
+ */
+DvtTimelineSeriesItemRenderer.checkEndViewportCollision = function (item, series, isRTL, width)
+{
+  var renderEnd;
+  var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+  var startTime = item.getStartTime();
+  var loc = TimeAxisUtils.getDatePosition(series._start, series._end, startTime, series._length);
+  var navMode = item._timeline.isDiscreteNavigationMode();
+  // use viewport end time vs timeline end time if in discrete navigation mode
+  var endViewportPos = navMode ? TimeAxisUtils.getDatePosition(series._start, series._end, item._timeline._viewEndTime, series._length) :
+    item._timeline._contentLength;
+  item.setEndViewportCollision(false);
+
+  // no collision behavior if not duration-event
+  if (item.getItemType() !== DvtTimelineSeriesNode.DURATION_EVENT) {
+    return;
+  }
+
+  // add half the preview wings to make it look more natural if it would be slightly too long
+  var collisionAdjustment = DvtTimelineStyleUtils.getNavButtonBackgroundWidth()/2;
+  if (!isRTL) {
+    renderEnd = loc + DvtTimelineStyleUtils.getContentBubbleSpacing() + width;
+
+    if (renderEnd > endViewportPos + collisionAdjustment) {
+      // need to use overflow
+      item.setEndViewportCollision(true);
+    }
+  } else {
+    renderEnd = series._length - loc - width - DvtTimelineStyleUtils.getContentBubbleSpacing();
+    var startViewportPos = item._timeline._startPos;
+    if (navMode) {
+      var adjustedViewEndTime = TimeAxisUtils.getPositionDate(series._start, series._end, endViewportPos + navButtonBackgroundWidth, series._length);
+      startViewportPos = series._length + item._timeline.getDiscreteViewportPanningLength(series._start, adjustedViewEndTime) + item._timeline._discreteOffset;
+    }
+    if (startViewportPos + collisionAdjustment > renderEnd) {
+      item.setEndViewportCollision(true);
+    }
+  }
+};
+
 /**
  * TimelineSeries JSON Parser
  * @param {DvtTimelineSeries} timelineSeries The owning timelineSeries component.
@@ -5684,11 +6627,12 @@ DvtTimelineSeriesRenderer._renderScrollableCanvas = function(series)
   {
     series._canvasOffsetX = series._canvas.getTranslateX();
     series._canvasOffsetY = series._canvas.getTranslateY();
-    series._canvas.setTranslateX(0);
+    series._canvas.setTranslateX(series._offset);
     series._canvas.setTranslateY(0);
     return;
   }
   series._canvas = new Container(series.getCtx(), 'canvas');
+  series._canvas.setTranslateX(series._offset);
   series.addChild(series._canvas);
 };
 
@@ -5814,7 +6758,8 @@ DvtTimelineSeriesRenderer._renderDurations = function(items, series, container,
       var item = items[j];
       var startTime = item.getStartTime();
       var endTime = item.getEndTime();
-      if (endTime && endTime !== startTime && i === item.getDurationLevel())
+      // Hide duration event if duration-event mode
+      if (endTime && endTime !== startTime && i === item.getDurationLevel() && item.getItemType() === DvtTimelineSeriesNode.DURATION_BAR)
         DvtTimelineSeriesItemRenderer.renderDuration(item, series, durationBlock, overflowOffset, frAnimationElems, mvAnimator);
     }
   }
@@ -6324,12 +7269,21 @@ DvtTimelineSeries.prototype.render = function(options, width, height)
     this._maxOverflowValue = width;
     this._length = height;
     this._size = width;
+    this._offset = 0;
   }
   else
   {
-    this._fetchEndPos = width;
     this._maxOverflowValue = height;
-    this._length = width;
+    // need to adjust for nav arrows
+    if (this._callbackObj.isDiscreteNavigationMode()) {
+      this._offset = this._callbackObj._discreteOffset;
+      this._length = width - 2 * this._offset;
+      this._fetchEndPos = width - 2 * this._offset;
+    } else {
+      this._length = width;
+      this._fetchEndPos = width;
+      this._offset = 0;
+    }
     this._size = height;
   }
 
@@ -6377,8 +7331,9 @@ DvtTimelineSeries.prototype.GetComponentDescription = function()
 DvtTimelineSeries.prototype._handleResize = function(width, height)
 {
   this._canvas.setTranslateY(0);
-  this._canvas.setTranslateX(0);
-
+  if (!this._callbackObj.isDiscreteNavigationMode()) {
+    this._canvas.setTranslateX(0);
+  }
   this.Width = width;
   this.Height = height;
 
@@ -6389,12 +7344,22 @@ DvtTimelineSeries.prototype._handleResize = function(width, height)
     this._maxOverflowValue = width;
     this._length = height;
     this._size = width;
+    this._offset = 0;
   }
   else
   {
-    this._fetchEndPos = width;
     this._maxOverflowValue = height;
-    this._length = width;
+    // need to adjust for nav arrows
+    if (this._callbackObj.isDiscreteNavigationMode()) {
+      this._offset = this._callbackObj._discreteOffset;
+      this._length = width - 2 * this._offset;
+      this._fetchEndPos = width - 2 * this._offset;
+      this._canvas.setTranslateX(this._offset);
+    } else {
+      this._length = width;
+      this._fetchEndPos = width;
+      this._offset = 0;
+    }
     this._size = height;
   }
 
@@ -6521,15 +7486,17 @@ DvtTimelineSeries.prototype.calculateSpacing = function(item, index)
 
   if (!this._isVertical)
   {
-    var x = item.getLoc();
-    var width = item.getWidth() + 10;
+    var endViewportCollisionOffset = item.getEndViewportCollision() ? item.getContentWidth() : 0;
+    var x = item.getLoc() - endViewportCollisionOffset;
+    var width = item.getWidth() + 16;
     var hOffset = DvtTimelineStyleUtils.getBubbleSpacing();
     var overlappingItems = [];
     for (i = 0; i < index; i++)
     {
       currItem = this._items[i];
-      currWidth = currItem.getWidth() + 10;
-      var currX = currItem.getLoc();
+      currWidth = currItem.getWidth() + 16;
+      endViewportCollisionOffset = currItem.getEndViewportCollision() ? currItem.getContentWidth() : 0;
+      var currX = currItem.getLoc() - endViewportCollisionOffset;
 
       if ((x >= currX && x <= currX + currWidth) || (currX >= x && currX <= x + width))
         overlappingItems.push(currItem);
@@ -6583,8 +7550,9 @@ DvtTimelineSeries.prototype.calculateSpacing = function(item, index)
 DvtTimelineSeries.prototype.calculateDurationSize = function(item, index)
 {
   var i, currItem;
-  if (this._items == null || this._items.length === 0)
-    return;
+  // if not in duration-bar, skip this step
+  if (this._items == null || this._items.length === 0 || item.getItemType() !== 'duration-bar')
+    return null;
 
   var initialY = 1;
   var startTime = item.getStartTime();
@@ -6678,7 +7646,10 @@ DvtTimelineSeries.prototype.prepareItems = function(items)
     if (endTime && endTime !== item.getStartTime())
     {
       var span = TimeAxisUtils.getDatePosition(this._start, this._end, endTime, this._length) - loc;
-      loc = loc + Math.min(DvtTimelineStyleUtils.getDurationFeelerOffset(), span / 2);
+      // don't adjust if duration-event
+      if (item.getItemType() !== DvtTimelineSeriesNode.DURATION_EVENT ) {
+        loc = loc + Math.min(DvtTimelineStyleUtils.getDurationFeelerOffset(), span / 2);
+      }
     }
     item.setLoc(loc);
   }
@@ -6772,7 +7743,7 @@ DvtTimelineSeries.prototype.setVScrollPos = function(pos)
 DvtTimelineSeries.prototype.setHScrollPos = function(pos)
 {
   if (this._canvas != null)
-    this._canvas.setTranslateX(0 - pos);
+    this._canvas.setTranslateX(this._offset - pos);
 };
 
 /**
@@ -6843,9 +7814,12 @@ Timeline.prototype._applyParsedProperties = function(props)
   else
     this._isVertical = false;
 
+  this._viewportNavigationMode = this.Options['viewportNavigationMode'];
   this._hasOverview = props.hasOverview;
   this._viewStartTime = props.viewStart;
   this._viewEndTime = props.viewEnd;
+
+  this._initialViewportTimeDuration = this._viewEndTime - this._viewStartTime;
   this._selectionMode = props.selectionMode;
   if (this._selectionMode === 'single')
     this.SelectionHandler = new SelectionHandler(this.getCtx(), SelectionHandler.TYPE_SINGLE);
@@ -6961,7 +7935,51 @@ Timeline.prototype._bundleTimeAxisOptions = function(options)
     var minorAxisOptions = options['minorAxis'];
     this._timeAxisOptions['scale'] = minorAxisOptions['scale'];
     this._timeAxisOptions['converter'] = minorAxisOptions['converter'];
-    this._timeAxisOptions['zoomOrder'] = minorAxisOptions['zoomOrder'];
+    this._timeAxisOptions['zoomOrder'] = minorAxisOptions['zoomOrder'] || [minorAxisOptions['scale']];
+    // Default scales label position
+    this._timeAxisOptions['_scaleLabelPosition'] = {
+      seconds: 'center',
+      minutes: 'center',
+      hours: 'center',
+      days: 'center',
+      weeks: 'center',
+      months: 'center',
+      quarters: 'center',
+      years: 'center',
+    };
+    const isAlta = this.getCtx().getThemeBehavior() === 'alta';
+    // Default scales label position
+    if (isAlta) {
+      this._timeAxisOptions['_scaleLabelPosition'] = {
+        seconds: 'center',
+        minutes: 'center',
+        hours: 'center',
+        days: 'center',
+        weeks: 'center',
+        months: 'center',
+        quarters: 'center',
+        years: 'center',
+      };
+    } else {
+      this._timeAxisOptions['_scaleLabelPosition'] = {
+        seconds: 'start',
+        minutes: 'start',
+        hours: 'start',
+        days: 'center',
+        weeks: 'start',
+        months: 'start',
+        quarters: 'start',
+        years: 'start'
+      };
+    }
+    // Custom scales label position
+    this._timeAxisOptions['zoomOrder'].forEach((scale) => {
+      if (scale && scale.name) {
+        const labelPosition = scale.labelPosition || 'auto';
+        const effectiveLabelPosition = labelPosition === 'auto' ? 'start' : labelPosition;
+        this._timeAxisOptions['_scaleLabelPosition'][scale.name] = effectiveLabelPosition;
+      }
+    });
     this._timeAxisOptions['style'] = minorAxisOptions['style'];
     if (minorAxisOptions['svgStyle'])
       this._timeAxisOptions['style'] = minorAxisOptions['svgStyle'];
@@ -7040,9 +8058,26 @@ Timeline.prototype.render = function(options, width, height)
     if (this._timeAxis.hasValidOptions())
       this.prepareViewportLength();
   }
+
+  // calc discrete offset that we need to shift scrollable Canvas and time axis to align them in discrete
+  // viewport navigation mode.
+  if (this.isDiscreteNavigationMode()) {
+    // Grab initial start and end times.
+    this._discreteViewportDatePositions = [this._viewStartTime, this._viewEndTime];
+    this._discreteViewportStartIndex = 0;
+    this._discreteViewportCurrentIndexOffset= 0;
+    var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+
+    this._timeAxisRatio = (this._canvasLength - (2 * navButtonBackgroundWidth))/this._canvasLength;
+    this._discreteOffset = (this.getContentLength() - this.getContentLength() * this._timeAxisRatio)/2;
+  }
+
   this._populateSeries();
 
   DvtTimelineRenderer.renderTimeline(this);
+  if (this.isDiscreteNavigationMode()) {
+    this.doInitialPan();
+  }
   this.UpdateAriaAttributes();
 
   // Set the timeline as the only keyboard listener
@@ -7070,7 +8105,8 @@ Timeline.prototype.hasValidSeriesItems = function()
       {
         var item = seriesOptions.items[j];
         var start = (new Date(item.start)).getTime();
-        if (!start)
+        // JET-46818 fixing issue where start = 0 (1970 - 1 - 1) also returned false
+        if (start == null || item.start == null)
           return false;
         if (item.hasOwnProperty('end'))
         {
@@ -7254,6 +8290,15 @@ Timeline.prototype._populateSeries = function()
           this._timeZoomCanvas.removeChild(this._series[i]);
         }
         this._series = [];
+      } else {
+        // check each series to make sure the item-type is consistent
+        for (i = 0; i < this._series.length; i++)
+        {
+          if (this._series[i]._items && series[i].items && this._series[i]._items[0]._data.itemType !== series[i].items[0].itemType) {
+            this._timeZoomCanvas.removeChild(this._series[i]);
+            this._series[i] = null;
+          }
+        }
       }
     }
     else
@@ -7297,7 +8342,7 @@ Timeline.prototype._populateSeries = function()
       if (this._series[i] == null)
       {
         var s = new DvtTimelineSeries(this.getCtx(), this.HandleEvent, this);
-        this._series.push(s);
+        this._series[i] = s;
       }
     }
   }
@@ -7479,7 +8524,8 @@ Timeline.prototype._getOverviewMarkerOptions = function()
         {
           itemOption['et'] = endTime;
           var durationFillColor = item.getDurationFillColor();
-          if (durationFillColor)
+          // only set duration fill color if duration bar
+          if (durationFillColor && item.getItemType() === DvtTimelineSeriesNode.DURATION_BAR)
             itemOption['dfc'] = durationFillColor;
         }
         overviewMarkers.push(itemOption);
@@ -7506,12 +8552,15 @@ Timeline.prototype.createViewportChangeEvent = function()
 Timeline.prototype.HandleTouchStart = function(event)
 {
   var touches = event.touches;
-  if (touches.length === 1)
+  var elClass = event.target.getClassName();
+  // block pan event if target element has class (currently just nav arrows)
+  if (touches.length === 1 && !elClass)
     this._dragPanSeries = this._findSeries(event.target);
 };
 
 /**
  * Handles mouse wheel event.
+ * Disabled in discrete viewport navigation mode
  * @param {event} event The mouse wheel event
  * @protected
  * @override
@@ -7519,7 +8568,7 @@ Timeline.prototype.HandleTouchStart = function(event)
 Timeline.prototype.HandleMouseWheel = function(event)
 {
   Timeline.superclass.HandleMouseWheel.call(this, event);
-  if (this.hasValidOptions())
+  if (this.hasValidOptions() && !this.isDiscreteNavigationMode())
   {
     if (event.zoomWheelDelta)
     {
@@ -7676,6 +8725,14 @@ Timeline.prototype._handleResize = function(width, height)
   this.prepareViewportLength();
   DvtTimelineRenderer._renderBackground(this);
 
+  // need to recalculate the discrete offset
+  if (this.isDiscreteNavigationMode()) {
+    var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+
+    this._timeAxisRatio = (this._canvasLength - (2 * navButtonBackgroundWidth))/this._canvasLength;
+    this._discreteOffset = (this.getContentLength() - this.getContentLength() * this._timeAxisRatio)/2;
+  }
+
   if (this.hasValidOptions())
   {
     this.renderTimeZoomCanvas(this._canvas);
@@ -7684,7 +8741,10 @@ Timeline.prototype._handleResize = function(width, height)
     DvtTimelineRenderer._renderAxis(this, this._timeZoomCanvas);
     DvtTimelineRenderer._renderSeriesLabels(this);
     DvtTimelineRenderer._renderZoomControls(this);
-
+    if (this.isDiscreteNavigationMode()){
+      DvtTimelineRenderer._renderNavigationArrows(this, this._timeZoomCanvas);
+      this.doInitialPan();
+    }
     if (this._hasOverview)
     {
       DvtTimelineRenderer._renderOverview(this);
@@ -7722,7 +8782,11 @@ Timeline.prototype.HandleKeyDown = function(event)
 
 Timeline.prototype.HandleMouseDown = function(event)
 {
-  this._dragPanSeries = this._findSeries(event.target);
+  var elClass = event.target.getClassName();
+  // block pan event if target element has class (currently just nav arrows)
+  if (!elClass) {
+    this._dragPanSeries = this._findSeries(event.target);
+  }
 };
 
 Timeline.prototype.endDragPan = function()
@@ -7819,15 +8883,18 @@ Timeline.prototype.panBy = function(deltaX, deltaY)
   }
   else
   {
-    this.panZoomCanvasBy(deltaX);
-    if (this._hasOverview)
-      this._overview.setViewportRange(this._viewStartTime, this._viewEndTime, null, null);
+    // no horizontal pan in nav mode.
+    if (!this.isDiscreteNavigationMode()) {
+      this.panZoomCanvasBy(deltaX);
+      if (this._hasOverview)
+        this._overview.setViewportRange(this._viewStartTime, this._viewEndTime, null, null);
 
-    if (this.isTimeDirScrollbarOn())
-      this.timeDirScrollbar.setViewportRange(this._viewStartTime, this._viewEndTime);
+      if (this.isTimeDirScrollbarOn())
+        this.timeDirScrollbar.setViewportRange(this._viewStartTime, this._viewEndTime);
 
-    // Update time axis due to viewport change
-    DvtTimelineRenderer._renderAxis(this, this._timeZoomCanvas, true);
+      // Update time axis due to viewport change
+      DvtTimelineRenderer._renderAxis(this, this._timeZoomCanvas, true);
+    }
 
     if (this._dragPanSeries)
     {
@@ -8055,8 +9122,25 @@ Timeline.prototype.processScrollbarEvent = function(event, component)
   }
 };
 
+Timeline.prototype.discreteScrollIntoViewport = function(item)
+{
+  if (!this.isDiscreteNavigationMode()) {
+    return;
+  }
+  var itemStartTime = item.getStartTime();
+  var viewportIndexScroll = Math.floor((itemStartTime - this._viewStartTime)/this._initialViewportTimeDuration);
+  if (viewportIndexScroll !== 0) {
+    this._discreteViewportCurrentIndexOffset += viewportIndexScroll;
+    this.handlePageChangeDiscreteViewport();
+  }
+};
+
 Timeline.prototype.updateScrollForItemSelection = function(item)
 {
+  if (this.isDiscreteNavigationMode()) {
+    this.discreteScrollIntoViewport(item);
+    return;
+  }
   var viewSize = this._viewEndTime - this._viewStartTime;
   this._viewStartTime = item.getStartTime() - (viewSize / 2);
   if (this._viewStartTime < this._start)
@@ -8076,8 +9160,17 @@ Timeline.prototype.updateScrollForItemSelection = function(item)
 
 Timeline.prototype.updateScrollForItemNavigation = function(item)
 {
+  if (!(item instanceof DvtTimelineSeriesNode)) {
+    return;
+  }
+
+  if (this.isDiscreteNavigationMode()) {
+    this.discreteScrollIntoViewport(item);
+    return;
+  }
+
   var itemSize = this._isVertical ? item.getHeight() : item.getWidth();
-  var itemHoverStrokeWidth = DvtTimelineStyleUtils.getItemHoverStrokeWidth();
+  var itemHoverStrokeWidth = DvtTimelineStyleUtils.getItemHoverStrokeWidth(item._timeline.Options);
   var itemStart = item.getLoc() - (this._isVertical ? (itemSize / 2) + itemHoverStrokeWidth : DvtTimelineStyleUtils.getBubbleOffset() + itemHoverStrokeWidth);
   var startPos = this.getRelativeStartPos();
   if (this.isRTL() && !this._isVertical)
@@ -8229,7 +9322,7 @@ Timeline.prototype.clearOverview = function()
  */
 Timeline.prototype.isTimeDirScrollbarOn = function()
 {
-  return !this._hasOverview;
+  return !this._hasOverview && !this.isDiscreteNavigationMode();
 };
 
 /**
@@ -8240,6 +9333,14 @@ Timeline.prototype.isContentDirScrollbarOn = function()
   return true;
 };
 
+/**
+ * @override
+ */
+Timeline.prototype.isDiscreteNavigationMode = function()
+{
+  return this._viewportNavigationMode === 'discrete' && this.getCtx().getThemeBehavior() === 'redwood' && !this.isVertical();
+};
+
 /**
  * Returns the background offset value of this component in the x direction.
  * @return {number} The background offset value of this component in the x direction.
@@ -8258,4 +9359,144 @@ Timeline.prototype.setBackgroundXOffset = function(backgroundX)
   this._backgroundX = backgroundX;
 };
 
+/**
+ * Gets the date position for viewport boundary at given offset when using discrete viewport navigation mode.
+ * @param {number} targetOffset The offset to check against
+ * @return {Object} the viewport date positions in Object {startDate: viewportStart, endDate: viewportEnd}
+ */
+Timeline.prototype.getDiscreteViewportDatePosition = function(targetOffset)
+{
+  var startDate, endDate, newStartDate, newEndDate;
+  var newStartIndex = this._discreteViewportStartIndex + targetOffset;
+
+  if (newStartIndex < 0) {
+    startDate = this._discreteViewportDatePositions[0];
+    endDate = this._discreteViewportDatePositions[1];
+    while (newStartIndex < 0) {
+      // the start index is before the earliest currently stored start date.
+      // need to loop to generate previous dates until we have enough
+      var newStartDate = this.getClosestDate(startDate - this._initialViewportTimeDuration);
+      this._discreteViewportDatePositions.unshift(newStartDate);
+      endDate = startDate;
+      startDate = newStartDate;
+
+      // update start index and current offset
+      this._discreteViewportStartIndex ++;
+
+      newStartIndex ++;
+    }
+  } else if (newStartIndex > this._discreteViewportDatePositions.length - 2) {
+    startDate = this._discreteViewportDatePositions[this._discreteViewportDatePositions.length - 2];
+    endDate = this._discreteViewportDatePositions[this._discreteViewportDatePositions.length - 1];
+    while (newStartIndex > this._discreteViewportDatePositions.length - 2) {
+      var newEndDate = this.getClosestDate(endDate + this._initialViewportTimeDuration);
+      this._discreteViewportDatePositions.push(newEndDate);
+      startDate = endDate;
+      endDate = newEndDate;
+    }
+  } else {
+    startDate = this._discreteViewportDatePositions[newStartIndex];
+    endDate = this._discreteViewportDatePositions[newStartIndex + 1];
+  }
+  return {startDate: startDate, endDate: endDate};
+};
+
+/**
+ * Gets closest date to target date given the current time axis scale.
+ * @param {number} date The date to check against
+ */
+Timeline.prototype.getClosestDate = function(date)
+{
+  var getClosestDate = (date, scale) => {
+    var dateBehind = this._timeAxis.adjustDate(date, scale);
+    var dateAhead = this._timeAxis.getNextDate(dateBehind, scale);
+    var closestDate = Date.parse(date - dateBehind > dateAhead - date ? dateAhead : dateBehind);
+    return closestDate;
+  };
+  var closestMinorDate = getClosestDate(date);
+  var closestMajorDate = getClosestDate(date, this.Options['majorAxis']['scale']);
+  if (closestMajorDate != null) {
+    return Math.abs(date - closestMinorDate) > Math.abs(date - closestMajorDate) ? closestMajorDate : closestMinorDate;
+  }
+};
+
+/**
+ * Gets the current viewport panning length when in discrete viewport navigation mode.
+ * This length is shorter than the actual viewport length due to "preview wings"
+ * @param {number} oldStartTime the old startTime
+ * @param {number} newStartTime the new startTime
+ * @return {number} the value: newStartTime - oldStartTime as distance in terms of the viewport
+ */
+Timeline.prototype.getDiscreteViewportPanningLength = function(oldStartTime, newStartTime)
+{
+  var context = this.getCtx();
+  var isRTL = Agent.isRightToLeft(context);
+  var length = this.getContentLength() * this._timeAxisRatio;
+  var startDatePos = TimeAxisUtils.getDatePosition(this._start, this._end, oldStartTime, length);
+  var endDatePos = TimeAxisUtils.getDatePosition(this._start, this._end, newStartTime, length);
+  return (endDatePos - startDatePos) * (isRTL ? -1 : 1)
+};
+
+/**
+ * Update the viewport when in discrete viewport navigation mode.
+ */
+Timeline.prototype.updateDiscreteViewport = function()
+{
+  DvtTimelineRenderer._renderAxis(this, this.getTimeZoomCanvas(), true);
+  DvtTimelineRenderer._renderNavigationArrows(this, this.getTimeZoomCanvas());
+  if (this._hasOverview) {
+    DvtTimelineRenderer._renderOverview(this);
+  }
+  this.updateSeries();
+};
+
+/**
+ * Handles page change event
+ */
+Timeline.prototype.handlePageChangeDiscreteViewport = function()
+{
+  // calculate new start/end times
+  var newDates = this.getDiscreteViewportDatePosition(this._discreteViewportCurrentIndexOffset);
+
+  // calculate panning length amount
+  var timeAxisLength = this.getDiscreteViewportPanningLength(this._viewStartTime, newDates.startDate);
+  this.panZoomCanvasBy(timeAxisLength);
+
+  // fix view start/end times since panZoomCanvasBy messes it up
+  this._viewStartTime = newDates.startDate;
+  this._viewEndTime = newDates.endDate;
+
+  // update timeline with new viewport
+  this.updateDiscreteViewport();
+
+  // fire event
+  this.dispatchEvent(this.createViewportChangeEvent());
+};
+
+/**
+ * Perform initial panning
+ */
+Timeline.prototype.doInitialPan = function()
+{
+  var context = this.getCtx();
+  var isRTL = Agent.isRightToLeft(context);
+  // do initial pan since it's calculated incorrectly using the original width
+  var tempStart = this._viewStartTime;
+  var tempEnd = this._viewEndTime;
+  var length = this.getContentLength() * this._timeAxisRatio;
+  var navButtonWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+  var startDatePos = TimeAxisUtils.getDatePosition(this._start, this._end, this._viewStartTime, length);
+  var adjustedViewStartTime = TimeAxisUtils.getPositionDate(this._start, this._end, startDatePos - navButtonWidth, length);
+  var initialPanOffset = this.getDiscreteViewportPanningLength(this._start, adjustedViewStartTime);
+  if (isRTL) {
+   var endDatePos = TimeAxisUtils.getDatePosition(this._start, this._end, this._viewEndTime, length);
+   var adjustedViewEndTime = TimeAxisUtils.getPositionDate(this._start, this._end, endDatePos + navButtonWidth, length);
+   initialPanOffset = length + this.getDiscreteViewportPanningLength(this._start, adjustedViewEndTime);
+  }
+  var adjustedOffset = initialPanOffset + this._discreteOffset + this._startPos;
+  this.panZoomCanvasBy(adjustedOffset);
+  this._viewStartTime = tempStart;
+  this._viewEndTime = tempEnd;
+};
+
 export { Timeline, TimelineOverview };