From 01289c16ec282d52ef1fa4bc76c6eb0d887f9df8 Mon Sep 17 00:00:00 2001
From: Ben Brandt <benjamin.j.brandt@gmail.com>
Date: Fri, 27 Oct 2023 16:02:14 +0200
Subject: [PATCH] INtegrated timeline

---
 .../components/timeline/SpanDuration.svelte   |  4 ++--
 .../timeline/Timeline.stories.svelte          |  6 ++++-
 .../lib/components/timeline/Timeline.svelte   | 22 +++++++++++++++++++
 log-viewer/{tests => src/lib}/qa_example.json |  0
 4 files changed, 29 insertions(+), 3 deletions(-)
 rename log-viewer/{tests => src/lib}/qa_example.json (100%)

diff --git a/log-viewer/src/lib/components/timeline/SpanDuration.svelte b/log-viewer/src/lib/components/timeline/SpanDuration.svelte
index 147122f4f..c18c54874 100644
--- a/log-viewer/src/lib/components/timeline/SpanDuration.svelte
+++ b/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
 		)}%;"
diff --git a/log-viewer/src/lib/components/timeline/Timeline.stories.svelte b/log-viewer/src/lib/components/timeline/Timeline.stories.svelte
index 124639536..8f5289a03 100644
--- a/log-viewer/src/lib/components/timeline/Timeline.stories.svelte
+++ b/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>
 
diff --git a/log-viewer/src/lib/components/timeline/Timeline.svelte b/log-viewer/src/lib/components/timeline/Timeline.svelte
index e69de29bb..471630e10 100644
--- a/log-viewer/src/lib/components/timeline/Timeline.svelte
+++ b/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>
diff --git a/log-viewer/tests/qa_example.json b/log-viewer/src/lib/qa_example.json
similarity index 100%
rename from log-viewer/tests/qa_example.json
rename to log-viewer/src/lib/qa_example.json