fix: react ui Timeline view may show large negative durations

This can happen when the trace prematurely exits, leaving `end_nanos: 0` for some blocks

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/timeline/Timeline.tsx

@@ -10,16 +10,16 @@ type Props = {
 }
 
 export default function Timeline({ block }: Props) {
-  const [model, min, max] = useMemo(() => {
+  const [model, minStart, maxEnd] = useMemo(() => {
     const model = computeModel(block)
-    const [min, max] = model.reduce(
-      ([min, max], row) => [
-        Math.min(min, row.block.start_nanos),
-        Math.max(max, row.block.end_nanos),
+    const [minStart, maxEnd] = model.reduce(
+      ([minStart, maxEnd], row) => [
+        Math.min(minStart, row.block.start_nanos),
+        Math.max(maxEnd, row.block.end_nanos),
       ],
       [Number.MAX_VALUE, Number.MIN_VALUE],
     )
-    return [model, min, max]
+    return [model, minStart, maxEnd]
   }, [block])
 
   const pushPops = useMemo(() => pushPopsFor(model), [model])
@@ -30,8 +30,8 @@ export default function Timeline({ block }: Props) {
         <TimelineRow
           key={idx}
           {...row}
-          min={min}
-          max={max}
+          min={minStart}
+          max={maxEnd}
           {...pushPops[idx]}
         />
       ))}

pdl-live-react/src/view/timeline/TimelineRow.tsx

@@ -21,7 +21,9 @@ export default function TimelineRow(row: Props) {
       </span>
 
       <span className="pdl-timeline-cell pdl-duration" data-cell="duration">
-        {prettyMs((row.block.end_nanos - row.block.start_nanos) / 1000000)}
+        {prettyMs(
+          ((row.block.end_nanos || row.max) - row.block.start_nanos) / 1000000,
+        )}
       </span>
     </div>
   )