- 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
-
object An 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 | null The 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
required ChangeReason The 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
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The 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
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The 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
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The 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
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
'annotationScrollBar' | 'labelAreaWidth' | 'lensScrollbar' | 'marqueeRange' | 'marqueeSelection' | 'moveAnnotation' | 'pan' | null The type of drag.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The 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
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
'annotationScrollBar' | 'labelAreaWidth' | 'lensScrollbar' | 'marqueeRange' | 'marqueeSelection' | 'moveAnnotation' | 'pan' | null The type of drag.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The 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
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
'annotationScrollBar' | 'labelAreaWidth' | 'lensScrollbar' | 'marqueeRange' | 'marqueeSelection' | 'moveAnnotation' | 'pan' | null The type of drag.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
Controls the dragging behavior.
Parameters
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The 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
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Invoked when the user presses a key.
Parameters
- event required
-
object An object with details of the event.
keyCode
required number The keyCode of the key pressed.
defaultPrevented
required boolean A 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
-
object An object with details of the event.
keyCode
required number The keyCode of the key pressed.
defaultPrevented
required boolean A 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
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The 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
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Invoked when the pointer is released.
Parameters
- event required
-
object An object with details of the event.
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The 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.
object If 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
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The 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' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The 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
-
object An object with details of the event.
deltaMode
required number The unit of measurement for the delta value.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
deltaX
required number The number of units that the wheel scrolled in the x direction.
deltaY
required number The number of units that the wheel scrolled in the y direction.
id
required string | null The 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' | null The type of the targeted item.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.