- API
- KronoGraph
- Handled Events
React
Handled Events
In addition to standard events such as onClick, onKeyDown, and onFocus, the KronoGraph timeline also fires the following set of events.
For information about how to handle these, see Using Event Handlers.
Invoked whenever the timeline triggers a change of state.
Parameters
- event required
objectAn object with details of the event.
- 'auto' - The event was triggered by internal KronoGraph state.
- 'user' - The event was triggered by user action.
{ [id: string]: Annotation }The current set of annotations.
string[]The ids of the selected events.
string[]The ids of the selected entities.
{ mode: 'auto' | 'manual'; expandedRowIds: string[] }The mode and ids of the expanded entity rows.
string[]The ids of the focused entities.
string[]The ids of the highlighted entities.
string | nullThe id of the entity at the center of the lens.
string[]The ids of the pinned entities.
{ start: Date; startNanoseconds: number; end: Date; endNanoseconds: number }An object containing the range of visible times.
why
requiredChangeReasonThe reason this event was fired:
Invoked when the user clicks or taps on the timeline.
Default actions on the item controls :
- Focus control - Focuses or unfocuses the entity row.
- Pin control - Pins or unpins the entity row.
- Annotation delete control - Deletes the annotation.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked whenever the timeline is drawn.
Invoked on a right click or a long press on the timeline.
Default action:
- Suppresses the click event.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked on a double-click or a double-tap on the timeline.
Default actions:
- On the background - Unfocuses any focused entity rows.
- On an entity row - Focuses or unfocuses the entity row.
- On the scale - Sets the timeline range to the
startTimeandendTimeproperties of the selected scale item.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked when the drag is finished and pointer is released, or when the drag is canceled. On touch devices this fires when the finger or pointing device is lifted.
Default action:
- On
MarqueeRangedrag type - the timeline will zoom into the selected range.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
'annotationScrollBar' | 'labelAreaWidth' | 'lensScrollbar' | 'marqueeRange' | 'marqueeSelection' | 'moveAnnotation' | 'pan' | nullThe type of drag.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
The entity range within the dragged area. Only present when dragType is 'marqueeSelection'.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked continuously as the cursor moves during a drag.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
'annotationScrollBar' | 'labelAreaWidth' | 'lensScrollbar' | 'marqueeRange' | 'marqueeSelection' | 'moveAnnotation' | 'pan' | nullThe type of drag.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked when a drag is started. Use setDragOptions to set the dragging behavior.
Default actions:
- On the background - Pans the timeline.
- On the scale - Draws a marquee range. On
drag-end, the default action is to zoom into the selected range. - On the label area border - Adjusts the label area width.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
'annotationScrollBar' | 'labelAreaWidth' | 'lensScrollbar' | 'marqueeRange' | 'marqueeSelection' | 'moveAnnotation' | 'pan' | nullThe type of drag.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
Controls the dragging behavior.
Parameters
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked when the user hovers over an item for a specified time. The delay is defined by the hover option.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked when the user presses a key.
Parameters
- event required
objectAn object with details of the event.
keyCode
requirednumberThe keyCode of the key pressed.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
Invoked when the user releases a key.
Parameters
- event required
objectAn object with details of the event.
keyCode
requirednumberThe keyCode of the key pressed.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
Invoked when a pointer presses down on the timeline.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked continuously as the pointer moves on the timeline, or the timeline moves beneath the pointer.
Default action:
- On an entity row - Highlights the entity row and displays available controls (pin or focus).
- On a time series chart - Highlights the nearest data point.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked when the pointer is released.
Parameters
- event required
objectAn object with details of the event.
button
requirednumberThe index of the button used.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
numberThe number of nanoseconds to add to endTime.
DateThe end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
objectIf the interaction event targets an entity row, a dictionary object containing the entities in the row, indexed by the entity ids.
string[]An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
requiredstring | nullThe id of the targeted item.
stringThe label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
requirednumberThe unique identifier of the pointer.
pointerType
requiredstringThe type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns void
numberThe number of nanoseconds to add to startTime.
DateThe start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
DateThe timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
numberThe number of nanoseconds to add to time.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.
Invoked continuously while the user is vertically or horizontally scrolling.
Default actions:
- Vertical scrolling on the background - Zooms the timeline.
- Vertical scrolling on the lens - Scrolls the lens up or down.
- Horizontal scrolling - Pans the timeline.
Parameters
- event required
objectAn object with details of the event.
deltaMode
requirednumberThe unit of measurement for the delta value.
defaultPrevented
requiredbooleanA read-only value indicating whether the default action was prevented.
deltaX
requirednumberThe number of units that the wheel scrolled in the x direction.
deltaY
requirednumberThe number of units that the wheel scrolled in the y direction.
id
requiredstring | nullThe id of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
targetType
required'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | nullThe type of the targeted item.
x
requirednumberThe distance from the left edge of the Timeline element to the pointer position.
y
requirednumberThe distance from the top edge of the Timeline element to the pointer position.