Add header to timeline

log-viewer/src/lib/components/timeline/SpanDuration.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { differenceInMilliseconds } from 'date-fns';
-	import { type SpanEntry, type TimeRange, isSpan } from '../../log';
+	import { type SpanEntry, type TimeRange, renderDuration } from '../../log';
 
 	/**
 	 * A Span or TaskSpan to show the duration of
@@ -15,28 +15,6 @@
 	$: spanOffset = differenceInMilliseconds(spanStart, range.from);
 	$: spanLength = differenceInMilliseconds(new Date(span.end_timestamp), spanStart);
 	$: runLength = differenceInMilliseconds(range.to, range.from);
-
-	// Filter out LogEntry's, only show the Span/TaskSpan in the tree
-	$: childSpans = span.logs.filter(isSpan);
-
-	function renderDuration(spanLength: number): string {
-		let unit = 'ms';
-		let length = spanLength;
-		if (length > 1000) {
-			length /= 1000;
-			unit = 's';
-			if (length > 60) {
-				length /= 60;
-				unit = 'min';
-				if (length > 60) {
-					length /= 60;
-					unit = 'h';
-				}
-			}
-		}
-
-		return `${length.toLocaleString('en-US')}${unit}`;
-	}
 </script>
 
 <!--
@@ -45,13 +23,11 @@
 
     This is a recursive component that builds itself up by creating the same component for sub-spans.
 -->
-<div class="w-full pb-1">
-	<button
-		class="bg-accent-400 py-0.5 text-right text-xs font-extrabold text-gray-950 shadow outline-none ring-1 ring-gray-950/20 hover:bg-accent-500"
-		style="margin-left: {Math.round((spanOffset / runLength) * 100)}%; width:{Math.round(
-			(spanLength / runLength) * 100
-		)}%;"
-	>
-		<span class="px-1">{renderDuration(spanLength)}</span>
-	</button>
-</div>
+<button
+	class="bg-accent-400 py-0.5 text-right text-xs font-extrabold text-gray-950 shadow outline-none ring-1 ring-gray-950/20 hover:bg-accent-500"
+	style="margin-left: {Math.round((spanOffset / runLength) * 100)}%; width:{Math.round(
+		(spanLength / runLength) * 100
+	)}%;"
+>
+	<span class="px-1">{renderDuration(spanLength)}</span>
+</button>

log-viewer/src/lib/components/timeline/SpanRow.svelte

@@ -23,17 +23,17 @@
     This is a recursive component that builds itself up by creating sub-trees.
 -->
 
-<div class="group grid grid-cols-3 grid-rows-1 items-stretch border-b bg-gray-50">
-	<div class="col-span-1 grid items-stretch">
+<div class="group grid grid-cols-3 grid-rows-1 items-stretch border-b border-r">
+	<div class="col-span-1 grid items-stretch bg-gray-50">
 		<button class="group grid w-full items-stretch text-left" style="padding-left: {level}em">
 			<span
-				class="grid items-center border-l border-r border-gray-300 bg-white px-2 text-sm group-hover:bg-gray-100"
+				class="grid items-center border-l border-r bg-white px-2 text-sm group-hover:bg-gray-100"
 			>
 				<span>{span.name}</span>
 			</span>
 		</button>
 	</div>
-	<div class="col-span-2 bg-white px-2 group-hover:bg-gray-100">
+	<div class="col-span-2 bg-white px-1.5 pb-1.5 pt-0.5 group-hover:bg-gray-100">
 		<SpanDuration {span} {range} />
 	</div>
 </div>

log-viewer/src/lib/components/timeline/SpanTree.svelte

@@ -34,6 +34,4 @@
 			</li>
 		{/each}
 	</ul>
-{:else if level === 0}
-	<p class="text-sm">No spans available</p>
 {/if}

log-viewer/src/lib/components/timeline/Timeline.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { type DebugLog, logRange } from '../../log';
+	import { differenceInMilliseconds } from 'date-fns';
+	import { type DebugLog, logRange, renderDuration } from '../../log';
 	import SpanTree from './SpanTree.svelte';
 
 	/**
@@ -15,4 +16,17 @@
     Timeline and Tree view of the given DebugLog
 -->
 
-<SpanTree logs={log.logs} {range} />
+{#if range}
+	<div class="grid grid-cols-3 grid-rows-1 bg-gray-950 text-sm font-extrabold text-white">
+		<div class="col-span-1 border-r border-white px-2 py-1">
+			{log.name}
+		</div>
+		<div class="col-span-2 flex items-center justify-between px-2 py-1 text-xs">
+			<span>0</span><span>{renderDuration(differenceInMilliseconds(range.to, range.from))}</span>
+		</div>
+	</div>
+
+	<SpanTree logs={log.logs} {range} />
+{:else}
+	<p class="text-sm">No logs available</p>
+{/if}

log-viewer/src/lib/log.ts

@@ -62,3 +62,22 @@ export function logRange(log: DebugLog): TimeRange | null {
 	const to = logTimes.at(-1);
 	return from && to ? { from, to } : null;
 }
+
+export function renderDuration(spanLength: number): string {
+	let unit = 'ms';
+	let length = spanLength;
+	if (length > 1000) {
+		length /= 1000;
+		unit = 's';
+		if (length > 60) {
+			length /= 60;
+			unit = 'min';
+			if (length > 60) {
+				length /= 60;
+				unit = 'h';
+			}
+		}
+	}
+
+	return `${length.toLocaleString('en-US')}${unit}`;
+}