correct time

lmnr-ai · Feb 1, 2025 · f5cfcfb · f5cfcfb
1 parent 184d662
commit f5cfcfb
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 25 deletions.
diff --git a/frontend/components/traces/session-player.tsx b/frontend/components/traces/session-player.tsx
@@ -28,7 +28,11 @@ export interface SessionPlayerHandle {
 }
 
 const SessionPlayer = forwardRef<SessionPlayerHandle, SessionPlayerProps>(
-  ({ hasBrowserSession, traceId, onTimelineChange }, ref) => {
+  ({
+    hasBrowserSession,
+    traceId,
+    onTimelineChange
+  }, ref) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const playerContainerRef = useRef<HTMLDivElement | null>(null);
     const playerRef = useRef<any>(null);
@@ -38,6 +42,7 @@ const SessionPlayer = forwardRef<SessionPlayerHandle, SessionPlayerProps>(
     const [totalDuration, setTotalDuration] = useState(0);
     const [speed, setSpeed] = useState(1);
     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const [startTime, setStartTime] = useState(0);
     const { projectId } = useProjectContext();
 
     // Add resize observer effect
@@ -125,6 +130,8 @@ const SessionPlayer = forwardRef<SessionPlayerHandle, SessionPlayerProps>(
             speed
           }
         });
+        const startTime = events[0].timestamp;
+        setStartTime(startTime);
 
         // Set total duration and add player listeners
         const duration = (events[events.length - 1].timestamp - events[0].timestamp) / 1000;
@@ -140,7 +147,7 @@ const SessionPlayer = forwardRef<SessionPlayerHandle, SessionPlayerProps>(
 
         playerRef.current.addEventListener('ui-update-current-time', (event: any) => {
           setCurrentTime(event.payload / 1000);
-          onTimelineChange(event.payload);
+          onTimelineChange(startTime + event.payload);
         });
       } catch (e) {
         console.error('Error initializing player:', e);

diff --git a/frontend/components/traces/timeline.tsx b/frontend/components/traces/timeline.tsx
@@ -35,7 +35,9 @@ export default function Timeline({
 }: TimelineProps) {
   const [segments, setSegments] = useState<Segment[]>([]);
   const [timeIntervals, setTimeIntervals] = useState<string[]>([]);
-  const [maxTime, setMaxTime] = useState<number>(0);
+  const [startTime, setStartTime] = useState<number>(0);
+  const [endTime, setEndTime] = useState<number>(0);
+
   const ref = useRef<HTMLDivElement>(null);
 
   const traverse = useCallback(
@@ -104,7 +106,8 @@ export default function Timeline({
       return;
     }
 
-    setMaxTime(endTime.getTime() - startTime.getTime());
+    setStartTime(startTime.getTime());
+    setEndTime(endTime.getTime());
 
     const totalDuration = endTime.getTime() - startTime.getTime();
 
@@ -120,22 +123,22 @@ export default function Timeline({
     const segments: Segment[] = [];
 
     for (const span of orderedSpans) {
-      const duration = getDuration(span.startTime, span.endTime) / 1000;
+      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 = (duration / upperInterval) * 100;
-      const left =
-        (getDuration(startTime.toISOString(), span.startTime) /
-          1000 /
-          upperInterval) *
-        100;
+      console.log("spanDuration", spanDuration, "span offset", left, span.startTime, new Date(span.startTime).getTime());
 
       const segmentEvents = [] as SegmentEvent[];
+
       for (const event of span.events) {
         const eventLeft =
           ((new Date(event.timestamp).getTime() -
             new Date(span.startTime).getTime()) /
             1000 /
-            duration) *
+            spanDuration) *
           100;
 
         segmentEvents.push({
@@ -158,13 +161,6 @@ export default function Timeline({
 
   return (
     <div className="flex flex-col h-full w-full relative" ref={ref}>
-      {browserSessionTime && (
-        <div className="absolute top-0 left-32 w-[1px] h-full bg-primary z-50"
-          style={{
-            left: (browserSessionTime / maxTime) * 100 + '%'
-          }}
-        />
-      )}
       <div className="bg-background flex text-xs w-full border-b z-40 sticky top-0 h-12 px-4">
         {timeIntervals.map((interval, index) => (
           <div
@@ -178,7 +174,14 @@ export default function Timeline({
         <div className="border-r" />
       </div>
       <div className="px-4">
-        <div className="flex flex-col space-y-1 w-full pt-[6px] relative">
+        <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 + '%'
+              }}
+            />
+          )}
           {segments.map((segment, index) => (
             <div
               key={index}

diff --git a/frontend/components/traces/trace-view.tsx b/frontend/components/traces/trace-view.tsx
@@ -346,15 +346,13 @@ export default function TraceView({ traceId, onClose }: TraceViewProps) {
                 traceId={traceId}
                 onTimelineChange={(time) => {
                   setBrowserSessionTime(time);
+
                   const activeSpans = spans.filter(
                     (span: Span) => {
-                      const traceStartTime = new Date(trace.startTime).getTime();
                       const spanStartTime = new Date(span.startTime).getTime();
                       const spanEndTime = new Date(span.endTime).getTime();
 
-                      const startTime = spanStartTime - traceStartTime;
-                      const endTime = spanEndTime - traceStartTime;
-                      return startTime <= time && endTime >= time && span.parentSpanId !== null;
+                      return spanStartTime <= time && spanEndTime >= time && span.parentSpanId !== null;
                     }
                   );
 

diff --git a/frontend/components/ui/header.tsx b/frontend/components/ui/header.tsx
@@ -52,7 +52,7 @@ export default function Header({ path, children, className, showSidebarTrigger =
       </div>
       <div className="flex pr-4 space-x-2">
         <Button variant='outline'>
-          <a href="https://cal.com/skull8888888/30min" target="_blank">
+          <a href="https://cal.com/robert-lmnr/demo" target="_blank">
             Book a demo
           </a>
         </Button>