> ## Documentation Index > Fetch the complete documentation index at: https://docs.chronicle-labs.com/llms.txt > Use this file to discover all available pages before exploring further. # Timeline > See every request, change, and score. Turn what you find into the next test. export const timelineExplorerAsset = "/assets/timeline-explorer-65a518f0a251.json"; export const ProductExplorer = ({source, variant = "world"}) => { const timeline = variant === "timeline"; const [html, setHtml] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [height, setHeight] = useState(840); const frame = useRef(null); const request = useRef(null); const initialized = useRef(false); const sendContext = useCallback(() => { const target = frame.current?.contentWindow; if (!target) return; target.postMessage({ type: "chronicle-demo-theme", dark: document.documentElement.classList.contains("dark") }, "*"); if (!timeline) { const views = { "#company": "overview", "#overview": "overview", "#timeline": "timeline", "#twins": "twins", "#connected-records": "twins", "#tasks": "tasks", "#agent-task": "task", "#scores": "scores" }; target.postMessage({ type: "chronicle-demo-view", view: views[window.location.hash] || "overview" }, "*"); } }, [timeline]); const open = async () => { if (loading) return; setLoading(true); setError(null); const controller = new AbortController(); request.current = controller; try { const response = await fetch(source, { signal: controller.signal }); if (!response.ok) throw new Error("The example could not be loaded. Try again."); const content = await response.json(); if (!content || typeof content !== "object" || Array.isArray(content) || typeof content.html !== "string" || !content.html.startsWith("")) throw new Error("The example could not be loaded. Try again."); if (!controller.signal.aborted) setHtml(content.html); } catch (reason) { if (!controller.signal.aborted) setError(reason.message || "The example could not be loaded. Try again."); } finally { if (!controller.signal.aborted) setLoading(false); } }; useEffect(() => () => request.current?.abort(), []); useEffect(() => { if (!html) return; const updateTheme = () => frame.current?.contentWindow?.postMessage({ type: "chronicle-demo-theme", dark: document.documentElement.classList.contains("dark") }, "*"); const resize = event => { if (event.source !== frame.current?.contentWindow) return; if (event.data?.type === "chronicle-demo-ready") { sendContext(); return; } if (timeline && event.data?.type === "chronicle-demo-open-world" && event.data.view === "twins") { window.location.assign("/product-explorer#twins"); return; } if (event.data?.type !== "chronicle-demo-size") return; if (Number.isFinite(event.data.height)) setHeight(Math.min(2400, Math.max(400, event.data.height + 2))); if (!initialized.current && event.data.height > 200) { initialized.current = true; sendContext(); } }; window.addEventListener("message", resize); window.addEventListener("hashchange", sendContext); const observer = new MutationObserver(updateTheme); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); frame.current?.focus(); return () => { window.removeEventListener("message", resize); window.removeEventListener("hashchange", sendContext); observer.disconnect(); }; }, [html, sendContext, timeline]); return
{!timeline ? <> : null} {html ?