fixed timeline

frontend/components/traces/timeline.tsx

@@ -36,7 +36,7 @@ export default function Timeline({
   const [segments, setSegments] = useState<Segment[]>([]);
   const [timeIntervals, setTimeIntervals] = useState<string[]>([]);
   const [startTime, setStartTime] = useState<number>(0);
-  const [endTime, setEndTime] = useState<number>(0);
+  const [timelineWidthInMilliseconds, setTimelineWidthInMilliseconds] = useState<number>(0);
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -61,7 +61,7 @@ export default function Timeline({
   );
 
   useEffect(() => {
-    if (!ref.current || childSpans === null) {
+    if (!ref.current || childSpans === null || spans.length === 0) {
       return;
     }
 
@@ -72,73 +72,49 @@ export default function Timeline({
     }
 
     const orderedSpans: Span[] = [];
-    const topLevelSpans = spans.filter((span) => span.parentSpanId === null);
+    const topLevelSpans = spans
+      .filter((span) => span.parentSpanId === null)
+      .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
 
     for (const span of topLevelSpans) {
       traverse(span, childSpans, orderedSpans);
     }
 
-    let startTime = null;
-    let endTime = null;
+    let startTime = new Date(orderedSpans[0].startTime).getTime();
+    let endTime = new Date(orderedSpans[orderedSpans.length - 1].endTime).getTime();
 
-    for (const span of spans) {
-      const spanStartTime = new Date(span.startTime);
-      const spanEndTime = new Date(span.endTime);
+    setStartTime(startTime);
 
-      if (!startTime) {
-        startTime = spanStartTime;
-      }
-
-      if (!endTime) {
-        endTime = spanEndTime;
-      }
-
-      if (spanStartTime < startTime) {
-        startTime = spanStartTime;
-      }
-
-      if (spanEndTime > endTime) {
-        endTime = spanEndTime;
-      }
-    }
-
-    if (!startTime || !endTime) {
-      return;
-    }
-
-    setStartTime(startTime.getTime());
-    setEndTime(endTime.getTime());
-
-    const totalDuration = endTime.getTime() - startTime.getTime();
+    const totalDuration = endTime - startTime;
 
-    const upperInterval = Math.ceil(totalDuration / 1000);
-    const unit = upperInterval / 10;
+    const upperIntervalInSeconds = Math.ceil(totalDuration / 1000);
+    const unit = upperIntervalInSeconds / 10;
 
     const timeIntervals = [];
     for (let i = 0; i < 10; i++) {
       timeIntervals.push((i * unit).toFixed(2) + 's');
     }
     setTimeIntervals(timeIntervals);
 
+    const upperIntervalInMilliseconds = upperIntervalInSeconds * 1000;
+    setTimelineWidthInMilliseconds(upperIntervalInMilliseconds);
+
     const segments: Segment[] = [];
 
     for (const span of orderedSpans) {
       const spanDuration = getDuration(span.startTime, span.endTime);
 
-      const width = (spanDuration / totalDuration) * 100;
-
-      const left = (new Date(span.startTime).getTime() - startTime.getTime()) / totalDuration * 100;
+      const width = (spanDuration / upperIntervalInMilliseconds) * 100;
 
-      console.log("spanDuration", spanDuration, "span offset", left, span.startTime, new Date(span.startTime).getTime());
+      const left = (new Date(span.startTime).getTime() - startTime) / upperIntervalInMilliseconds * 100;
 
       const segmentEvents = [] as SegmentEvent[];
 
       for (const event of span.events) {
         const eventLeft =
           ((new Date(event.timestamp).getTime() -
             new Date(span.startTime).getTime()) /
-            1000 /
-            spanDuration) *
+            upperIntervalInMilliseconds) *
           100;
 
         segmentEvents.push({
@@ -174,14 +150,7 @@ export default function Timeline({
         <div className="border-r" />
       </div>
       <div className="px-4">
-        <div className="flex flex-col space-y-1 w-full pt-[2px] relative">
-          {browserSessionTime && (
-            <div className="absolute -top-32 h-full bg-primary z-50 w-[1px]"
-              style={{
-                left: ((browserSessionTime - startTime) / (endTime - startTime)) * 100 + '%'
-              }}
-            />
-          )}
+        <div className="flex flex-col space-y-1 w-full pt-[6px] relative">
           {segments.map((segment, index) => (
             <div
               key={index}
@@ -213,6 +182,13 @@ export default function Timeline({
               </div>
             </div>
           ))}
+          {browserSessionTime && (
+            <div className="absolute -top-32 h-[calc(100%+142px)] bg-primary z-50 w-[1px]"
+              style={{
+                left: ((browserSessionTime - startTime) / timelineWidthInMilliseconds) * 100 + '%'
+              }}
+            />
+          )}
         </div>
       </div>
     </div>