1<div id="observer-traces" class="h-full">
 2    <div class="px-6 py-4 text-center">
 3        <p>Loading spans...</p>
 4    </div>
 5</div>
 6<script>
 7(function() {
 8    var container = document.getElementById('observer-traces');
 9    var loaded = false;
10    var parent = container.parentNode;
11    var observerMode = "{{ observer.mode() }}";
12
13    // Auto-enable summary mode if no mode is set
14    if (!observerMode || observerMode === "None") {
15        var form = new FormData();
16        form.append('observe_action', 'summary');
17
18        fetch("{{ url('observer:traces') }}", {
19            method: 'POST',
20            body: form,
21            credentials: 'same-origin'
22        });
23    }
24
25    var observer = new IntersectionObserver(function(entries) {
26        entries.forEach(function(entry) {
27            if (entry.isIntersecting && !loaded) {
28                loaded = true;
29                var iframe = document.createElement('iframe');
30                iframe.src = "{{ url('observer:traces') }}";
31                iframe.frameBorder = "0";
32                iframe.style.width = "100%";
33                iframe.style.height = "100%";
34                container.innerHTML = '';
35                container.appendChild(iframe);
36                observer.disconnect();
37            }
38        });
39    }, { root: parent, threshold: 0 });
40    observer.observe(container);
41})();
42</script>