Double-click entities on the timeline to focus them.
By listening to the onTimelineChange event, an app can track updates to the timeline's state caused by the user's actions and incorporate these into its own state.
Here, the app is controlling which entities are focused by using the focus prop. If the user double-clicks to focus an entity, an onTimelineChange event is fired to notify the app, which then replaces its list of focused entities with the new list and passes this to the focus prop.
The app can also make its own changes to the focus state - try pressing the "Clear Focus" button.
See Also
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data from "./data";
const { events, entities } = data;
export const Demo = () => {
const [focused, setFocused] = useState([]);
return (
<div className="story">
<Timeline
className="story__timeline"
entities={entities}
events={events}
focus={focused}
onTimelineChange={(change) => {
if (change.focus) {
setFocused(change.focus);
}
}}
/>
<div
id="timeline-controls"
className="story__controls story__controls--row"
style={{ justifyContent: "center" }}
>
<div className="stack" style={{ alignItems: "center" }}>
<span>
{focused.length
? `The focused entity is ${entities[focused[0]].label}`
: "No entity focused"}
</span>
<button className="button button--neutral" onClick={() => setFocused([])}>
Clear Focus
</button>
</div>
</div>
</div>
);
};
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);const data = {
entities: {
"smith-johnathan-151": {
label: "John Smith",
},
"west-josephine-126": {
label: "Josephine West",
},
"roberts-nathaniel-023": {
label: "Nathan Roberts",
},
"baxter-eleanor-004": {
label: "Ella Baxter",
},
},
events: {
"email 1": {
entityIds: ["smith-johnathan-151", "roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 8, 49),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 2": {
entityIds: ["smith-johnathan-151", "baxter-eleanor-004"],
time: new Date(2025, 7, 14, 8, 56),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 3": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 9, 2),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 4": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 9, 27),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 5": {
entityIds: ["baxter-eleanor-004", "roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 10, 20),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 6": {
entityIds: ["roberts-nathaniel-023", "smith-johnathan-151"],
time: new Date(2025, 7, 14, 10, 30),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 7": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 10, 34),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 8": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: new Date(2025, 7, 14, 10, 40),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 9": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 10, 51),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 10": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: new Date(2025, 7, 14, 12, 5),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 11": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: new Date(2025, 7, 14, 14, 37),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 12": {
entityIds: ["baxter-eleanor-004", "west-josephine-126"],
time: new Date(2025, 7, 14, 16, 7),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
"email 13": {
entityIds: ["west-josephine-126", "roberts-nathaniel-023"],
time: new Date(2025, 7, 14, 17, 42),
data: {
from: "[email protected]",
to: "[email protected]",
},
},
},
};
export default data;<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div id="my-timeline" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>