INtegrated timeline

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

@@ -49,9 +49,9 @@
 
     This is a recursive component that builds itself up by creating the same component for sub-spans.
 -->
-<div class="w-full py-0.5 hover:bg-gray-50">
+<div class="h-8 w-full border-t py-0.5 last:border-b hover:bg-gray-50">
 	<button
-		class="h-8 bg-accent-400 py-1 text-right text-xs font-extrabold text-gray-950 shadow outline-none ring-1 ring-gray-950/20 hover:bg-accent-500"
+		class="bg-accent-400 py-1 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
 		)}%;"

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

@@ -1,11 +1,15 @@
 <script context="module" lang="ts">
 	import type { MetaProps } from '@storybook/addon-svelte-csf';
+	import { randomLogger } from '../../log.test_utils';
 	import Timeline from './Timeline.svelte';
 
 	export const meta: MetaProps = {
 		title: 'Timeline/Organisms/Timeline',
 		component: Timeline,
-		tags: ['autodocs']
+		tags: ['autodocs'],
+		args: {
+			log: randomLogger()
+		}
 	};
 </script>
 

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { DebugLog } from '../../log';
+	import LogDurations from './LogDurations.svelte';
+	import SpanTree from './SpanTree.svelte';
+
+	/**
+	 * The Debug Log you want to render
+	 */
+	export let log: DebugLog;
+</script>
+
+<!--
+    @component
+    Timeline and Tree view of the given DebugLog
+-->
+
+<div class="grid grid-cols-3 grid-rows-1">
+	<div class="col-span-1">
+		<SpanTree logs={log.logs} />
+	</div>
+	<div class="col-span-2"><LogDurations logs={log.logs} /></div>
+</div>