From 0d3fcd4d7d5a68242bd57764b7decb23ab8caa05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iva=CC=81n=20Raskovsky?= <raskovsky+git@gmail.com>
Date: Wed, 13 Nov 2024 10:44:20 -0300
Subject: [PATCH] add experimental tree view to snapshots

Also show snapshots backwards from newest first.
---
 .../src/lib/Components/SnapshotsTable.svelte  | 605 +++++++++---------
 .../src/lib/Components/SnapshotsTree.svelte   | 138 ++++
 .../routes/(app)/playground/[id]/+page.svelte | 405 ++++++------
 .../src/routes/(app)/playground/[id]/+page.ts |  20 +-
 4 files changed, 665 insertions(+), 503 deletions(-)
 create mode 100644 studio/src/lib/Components/SnapshotsTree.svelte

diff --git a/studio/src/lib/Components/SnapshotsTable.svelte b/studio/src/lib/Components/SnapshotsTable.svelte
index 5d2c9fa..f91ccc2 100644
--- a/studio/src/lib/Components/SnapshotsTable.svelte
+++ b/studio/src/lib/Components/SnapshotsTable.svelte
@@ -1,319 +1,338 @@
 <script lang="ts">
-	import { Play, ClockClockwise, ArrowArcLeft, Plus, Minus, Queue } from 'phosphor-svelte';
-	import * as jsonpatch from 'fast-json-patch';
-	import { createEventDispatcher } from 'svelte';
-	import { isEqual } from 'lodash';
-	import Tabs from '../UI/Tabs.svelte';
-	import Tab from '../UI/Tab.svelte';
+    import { Play, ClockClockwise, ArrowArcLeft, Plus, Minus, Queue } from 'phosphor-svelte';
+    import * as jsonpatch from 'fast-json-patch';
+    import { createEventDispatcher } from 'svelte';
+    import { isEqual } from 'lodash';
+    import Tabs from '../UI/Tabs.svelte';
+    import Tab from '../UI/Tab.svelte';
+    import SnapshotsTree from '$lib/Components/SnapshotsTree.svelte';
 
-	import { PUBLIC_API_BASE_URL } from '$env/static/public';
-	import Paginator from '$lib/UI/Paginator.svelte';
-	import SnapshotItem from './SnapshotItem.svelte';
+    import { PUBLIC_API_BASE_URL } from '$env/static/public';
+    import Paginator from '$lib/UI/Paginator.svelte';
+    import SnapshotItem from './SnapshotItem.svelte';
 
-	export let ltm: any = {};
-	export let ltmId: string | null = null;
-	export let snapshotIndex = 0;
-	export let snapshot: any = {};
-	export let controls = false;
+    export let ltm: any = {};
+    export let ltmId: string | null = null;
+    export let snapshotIndex = 0;
+    export let snapshot: any = {};
+    export let controls = false;
 
-	const ltmUrl = `${PUBLIC_API_BASE_URL}ltm/${ltmId}`;
+    const ltmUrl = `${PUBLIC_API_BASE_URL}ltm/${ltmId}`;
 
-	let dispatch = createEventDispatcher();
+    let dispatch = createEventDispatcher();
 
-	let showErrorDetails: any = {};
+    let showErrorDetails: any = {};
 
-	$: {
-		if (ltm && ltm.snapshots.length > 0) snapshot = getSnapshotFromIndex(snapshotIndex);
-	}
+    $: {
+        if (ltm && ltm.snapshots.length > 0) snapshot = getSnapshotFromIndex(snapshotIndex);
+    }
 
-	let addItemsToQueue = (queue: any[], newItems: any[]) => {
-		// Remove the isNew flag from the items
-		queue = queue.map((item: any) => {
-			delete item['isNew'];
-			return item;
-		});
+    let reversedSnapshots: any[] = [];
+    $: {
+        if (ltm && ltm.snapshots) {
+            reversedSnapshots = ltm?.snapshots.entries().toArray().reverse();
+        } else {
+            reversedSnapshots = [];
+        }
+    }
 
-		// add new items with the isNew flag
-		if (newItems) {
-			queue.push(...newItems.map((item) => ({ ...item, isNew: true })));
-		}
+    let addItemsToQueue = (queue: any[], newItems: any[]) => {
+        // Remove the isNew flag from the items
+        queue = queue.map((item: any) => {
+            delete item['isNew'];
+            return item;
+        });
 
-		return queue;
-	};
-	let getSnapshotFromIndex: any = (index: number) => {
-		let full_snapshot: any = {
-			state: {},
-			executeQueue: [],
-			transitionsQueue: []
-		};
-		for (let i = 0; i <= index; i++) {
-			jsonpatch.applyPatch(full_snapshot['state'], jsonpatch.deepClone(ltm.snapshots[i]['patch']));
-			full_snapshot.executeQueue = addItemsToQueue(
-				full_snapshot.executeQueue,
-				ltm.snapshots[i]['execute_queue']
-			);
-			full_snapshot.transitionsQueue = addItemsToQueue(
-				full_snapshot.transitionsQueue,
-				ltm.snapshots[i]['transitions_queue']
-			);
+        // add new items with the isNew flag
+        if (newItems) {
+            queue.push(...newItems.map((item) => ({ ...item, isNew: true })));
+        }
 
-			// Remove the current snapshot item from the queues
-			const currentItem = ltm.snapshots[i]['item'];
-			if (ltm.snapshots[i]['reason'] === 'transition') {
-				full_snapshot.transitionsQueue = full_snapshot.transitionsQueue.filter(
-					(item: any) => !isEqual(item, currentItem)
-				);
-			} else if (ltm.snapshots[i]['reason'] === 'execute') {
-				full_snapshot.executeQueue = full_snapshot.executeQueue.filter(
-					(item: any) => !isEqual(item, currentItem)
-				);
-			}
-		}
-		if (ltm.snapshots.length > 0 && index >= 1) {
-			full_snapshot['time'] = ltm.snapshots[index]['time'];
-			full_snapshot['reason'] = ltm.snapshots[index]['reason'];
-			full_snapshot['item'] = ltm.snapshots[index]['item'];
-		}
-		return full_snapshot;
-	};
+        return queue;
+    };
+    let getSnapshotFromIndex: any = (index: number) => {
+        let full_snapshot: any = {
+            state: {},
+            executeQueue: [],
+            transitionsQueue: []
+        };
+        for (let i = 0; i <= index; i++) {
+            jsonpatch.applyPatch(full_snapshot['state'], jsonpatch.deepClone(ltm.snapshots[i]['patch']));
+            full_snapshot.executeQueue = addItemsToQueue(
+                full_snapshot.executeQueue,
+                ltm.snapshots[i]['execute_queue']
+            );
+            full_snapshot.transitionsQueue = addItemsToQueue(
+                full_snapshot.transitionsQueue,
+                ltm.snapshots[i]['transitions_queue']
+            );
 
-	let rollback = async (snapshot_index: number) => {
-		let postData = {
-			index: snapshot_index
-		};
-		await fetch(`${ltmUrl}/rollback`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify(postData)
-		})
-			.then((response) => {
-				ltm = { ...ltm, snapshots: ltm.snapshots.slice(0, snapshot_index + 1) };
-				dispatch('reloadLtm');
-				return response.json();
-			})
-			.then((data) => {})
-			.catch((error) => {
-				console.log(error);
-			});
-	};
+            // Remove the current snapshot item from the queues
+            const currentItem = ltm.snapshots[i]['item'];
+            if (ltm.snapshots[i]['reason'] === 'transition') {
+                full_snapshot.transitionsQueue = full_snapshot.transitionsQueue.filter(
+                    (item: any) => !isEqual(item, currentItem)
+                );
+            } else if (ltm.snapshots[i]['reason'] === 'execute') {
+                full_snapshot.executeQueue = full_snapshot.executeQueue.filter(
+                    (item: any) => !isEqual(item, currentItem)
+                );
+            }
+        }
+        if (ltm.snapshots.length > 0 && index >= 1) {
+            full_snapshot['time'] = ltm.snapshots[index]['time'];
+            full_snapshot['reason'] = ltm.snapshots[index]['reason'];
+            full_snapshot['item'] = ltm.snapshots[index]['item'];
+        }
+        return full_snapshot;
+    };
 
-	let replay = async (snapshot_index: number) => {
-		let postData = {
-			index: snapshot_index
-		};
-		await fetch(`${ltmUrl}/replay`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify(postData)
-		})
-			.then((response) => {
-				snapshotIndex--;
-				ltm = { ...ltm, snapshots: ltm.snapshots.slice(0, snapshot_index) };
-				return response.json();
-			})
-			.then((data) => {
-				dispatch('reloadLtm');
-			})
-			.catch((error) => {
-				console.log(error);
-			});
-	};
+    let rollback = async (snapshot_index: number) => {
+        let postData = {
+            index: snapshot_index
+        };
+        await fetch(`${ltmUrl}/rollback`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(postData)
+        })
+            .then((response) => {
+                ltm = { ...ltm, snapshots: ltm.snapshots.slice(0, snapshot_index + 1) };
+                dispatch('reloadLtm');
+                return response.json();
+            })
+            .then((data) => {})
+            .catch((error) => {
+                console.log(error);
+            });
+    };
 
-	let retryAll = async () => {
-		const ids = ltm.errors
-			.filter((e: any) => e.success === false && e.retrying === false)
-			.map((e: any) => e.id);
-		retry(ids);
-	};
+    let replay = async (snapshot_index: number) => {
+        let postData = {
+            index: snapshot_index
+        };
+        await fetch(`${ltmUrl}/replay`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(postData)
+        })
+            .then((response) => {
+                snapshotIndex--;
+                ltm = { ...ltm, snapshots: ltm.snapshots.slice(0, snapshot_index) };
+                return response.json();
+            })
+            .then((data) => {
+                dispatch('reloadLtm');
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+    };
 
-	let retry = async (errorIds: string[]) => {
-		let postData = { ids: errorIds };
-		await fetch(`${ltmUrl}/retry`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify(postData)
-		})
-			.then((response) => {
-				return response.json();
-			})
-			.then((data) => {
-				// dispatch('reloadLtm');
-			})
-			.catch((error) => {
-				console.log(error);
-			});
-	};
+    let retryAll = async () => {
+        const ids = ltm.errors
+            .filter((e: any) => e.success === false && e.retrying === false)
+            .map((e: any) => e.id);
+        retry(ids);
+    };
 
-	let errorsCount: number;
-	$: {
-		ltm;
-		errorsCount = ltm.errors.filter((e: any) => e.retrying === false && e.success === false).length;
-	}
+    let retry = async (errorIds: string[]) => {
+        let postData = { ids: errorIds };
+        await fetch(`${ltmUrl}/retry`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(postData)
+        })
+            .then((response) => {
+                return response.json();
+            })
+            .then((data) => {
+                // dispatch('reloadLtm');
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+    };
+
+    let errorsCount: number;
+    $: {
+        ltm;
+        errorsCount = ltm.errors.filter((e: any) => e.retrying === false && e.success === false).length;
+    }
 </script>
 
 <h3><ClockClockwise size="1.25rem" /> Execution History</h3>
 <Tabs>
-	<Tab title="Snapshots">
-		<div class="controls">
-			<table>
-				<tr>
-					<th>Reason</th>
-					<th>Item</th>
-					<th>Time</th>
-					{#if controls}
-						<th></th>
-					{/if}
-				</tr>
-				{#each ltm.snapshots as snapshot, i}
-					<tr
-						class:current={i === snapshotIndex}
-						on:click={() => (snapshotIndex = i)}
-						on:keydown={() => (snapshotIndex = i)}
-						role="button"
-					>
-						<td title={snapshot.reason}>{snapshot.reason}</td>
-						<td title={JSON.stringify(snapshot.item)}>
-							<SnapshotItem item={snapshot.item}></SnapshotItem>
-						</td>
-						<td title={snapshot.time}>{snapshot.time}</td>
-						{#if controls}
-							<td>
-								<div class="snapshot-controls">
-									<button
-										on:click={() => {
-											rollback(i);
-										}}
-										title="Rollback"
-									>
-										<ArrowArcLeft size="1.25rem" />
-									</button>
-									{#if snapshot.reason === 'transition' || snapshot.reason === 'start'}
-										<button
-											on:click={() => {
-												replay(i);
-											}}
-											title="Replay"
-										>
-											<Play size="1.25rem" />
-										</button>
-									{/if}
-								</div>
-							</td>
-						{/if}
-					</tr>{/each}
-			</table>
-			<Paginator bind:index={snapshotIndex} collection={ltm.snapshots} />
-		</div>
-	</Tab>
-	<Tab title={'Errors (' + errorsCount + ')'}>
-		<div class="controls">
-			<button on:click={retryAll} title="Retry All">
-				<Queue size="1.25rem" /> Retry All
-			</button>
-			<table>
-				<tr>
-					<th>Reason</th>
-					<th>Item</th>
-					<th>Time</th>
-					<th>Status</th>
-					<th>Retries</th>
-					{#if controls}
-						<th></th>
-					{/if}
-				</tr>
-				{#each ltm.errors as error, i}
-					{@const lastRetry = error.retries.at(-1)}
-					{@const status = error.success ? 'success' : error.retrying ? 'retrying' : 'error'}
-					<tr>
-						<td title={error.reason}>{error.reason}</td>
-						<td title={JSON.stringify(error.item)}>
-							<SnapshotItem item={error.item}></SnapshotItem>
-						</td>
-						<td title={lastRetry.time}>{lastRetry.time}</td>
-						<td title={status}>{status}</td>
-						<td title={error.retries.length}>{error.retries.length}</td>
-						{#if controls}
-							<td>
-								<div class="snapshot-controls">
-									{#if !showErrorDetails[error.id]}
-										<button
-											on:click={() => {
-												showErrorDetails[error.id] = true;
-											}}
-											title="Show details"
-										>
-											<Plus size="1.25rem" />
-										</button>
-									{:else}
-										<button
-											on:click={() => {
-												showErrorDetails[error.id] = false;
-											}}
-											title="Hide details"
-										>
-											<Minus size="1.25rem" />
-										</button>
-									{/if}
-									{#if status === 'error'}
-										<button
-											on:click={() => {
-												retry([error.id]);
-											}}
-											title="Retry"
-										>
-											<Play size="1.25rem" />
-										</button>
-									{/if}
-								</div>
-							</td>
-						{/if}
-					</tr>
-					{#if showErrorDetails[error.id] === true}
-						<tr>
-							<td colspan="5" class="error-detail">
-								{lastRetry.type}:
-								{lastRetry.description}
-								<pre>
-									{lastRetry.details}
-								</pre>
-							</td>
-						</tr>
-					{/if}
-				{/each}
-			</table>
-		</div>
-	</Tab>
+    <Tab title="Snapshots">
+        <div class="controls">
+            <table>
+                <tr>
+                    <th>Reason</th>
+                    <th>Item</th>
+                    <th>Time</th>
+                    {#if controls}
+                        <th></th>
+                    {/if}
+                </tr>
+                {#each reversedSnapshots as [i, snapshot]}
+                    <tr
+                        class:current={i === snapshotIndex}
+                        on:click={() => (snapshotIndex = i)}
+                        on:keydown={() => (snapshotIndex = i)}
+                        role="button"
+                    >
+                        <td title={snapshot.reason}>{snapshot.reason}</td>
+                        <td title={JSON.stringify(snapshot.item)}>
+                            <SnapshotItem item={snapshot.item}></SnapshotItem>
+                        </td>
+                        <td title={snapshot.time}>{snapshot.time}</td>
+                        {#if controls}
+                            <td>
+                                <div class="snapshot-controls">
+                                    <button
+                                        on:click={() => {
+                                            rollback(i);
+                                        }}
+                                        title="Rollback"
+                                    >
+                                        <ArrowArcLeft size="1.25rem" />
+                                    </button>
+                                    {#if snapshot.reason === 'transition' || snapshot.reason === 'start'}
+                                        <button
+                                            on:click={() => {
+                                                replay(i);
+                                            }}
+                                            title="Replay"
+                                        >
+                                            <Play size="1.25rem" />
+                                        </button>
+                                    {/if}
+                                </div>
+                            </td>
+                        {/if}
+                    </tr>{/each}
+            </table>
+            <Paginator bind:index={snapshotIndex} collection={ltm.snapshots} />
+        </div>
+    </Tab>
+    <Tab title="Tree view*">
+        <p>* Experimental</p>
+        <ul>
+            <SnapshotsTree
+                indexes={[0, ...ltm.rollbacks.keys().map((i) => i + 1)]}
+                snapshots={[ltm.snapshots, ...ltm.rollbacks.map((r) => r.snapshots)]}
+            />
+        </ul>
+    </Tab>
+    <Tab title={'Errors (' + errorsCount + ')'}>
+        <div class="controls">
+            <button on:click={retryAll} title="Retry All">
+                <Queue size="1.25rem" /> Retry All
+            </button>
+            <table>
+                <tr>
+                    <th>Reason</th>
+                    <th>Item</th>
+                    <th>Time</th>
+                    <th>Status</th>
+                    <th>Retries</th>
+                    {#if controls}
+                        <th></th>
+                    {/if}
+                </tr>
+                {#each ltm.errors as error, i}
+                    {@const lastRetry = error.retries.at(-1)}
+                    {@const status = error.success ? 'success' : error.retrying ? 'retrying' : 'error'}
+                    <tr>
+                        <td title={error.reason}>{error.reason}</td>
+                        <td title={JSON.stringify(error.item)}>
+                            <SnapshotItem item={error.item}></SnapshotItem>
+                        </td>
+                        <td title={lastRetry.time}>{lastRetry.time}</td>
+                        <td title={status}>{status}</td>
+                        <td title={error.retries.length}>{error.retries.length}</td>
+                        {#if controls}
+                            <td>
+                                <div class="snapshot-controls">
+                                    {#if !showErrorDetails[error.id]}
+                                        <button
+                                            on:click={() => {
+                                                showErrorDetails[error.id] = true;
+                                            }}
+                                            title="Show details"
+                                        >
+                                            <Plus size="1.25rem" />
+                                        </button>
+                                    {:else}
+                                        <button
+                                            on:click={() => {
+                                                showErrorDetails[error.id] = false;
+                                            }}
+                                            title="Hide details"
+                                        >
+                                            <Minus size="1.25rem" />
+                                        </button>
+                                    {/if}
+                                    {#if status === 'error'}
+                                        <button
+                                            on:click={() => {
+                                                retry([error.id]);
+                                            }}
+                                            title="Retry"
+                                        >
+                                            <Play size="1.25rem" />
+                                        </button>
+                                    {/if}
+                                </div>
+                            </td>
+                        {/if}
+                    </tr>
+                    {#if showErrorDetails[error.id] === true}
+                        <tr>
+                            <td colspan="5" class="error-detail">
+                                {lastRetry.type}:
+                                {lastRetry.description}
+                                <pre>
+                                    {lastRetry.details}
+                                </pre>
+                            </td>
+                        </tr>
+                    {/if}
+                {/each}
+            </table>
+        </div>
+    </Tab>
 </Tabs>
 
 <style lang="scss">
-	.controls {
-		display: flex;
-		flex-direction: column;
-		align-self: stretch;
-		align-items: flex-end;
-	}
+    .controls {
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+        align-items: flex-end;
+    }
 
-	.snapshot-controls {
-		display: flex;
-	}
+    .snapshot-controls {
+        display: flex;
+    }
 
-	.current td {
-		background-color: var(--black-20);
-	}
-	.error-detail {
-		text-align: left;
-		padding: 0rem 1rem 1rem 1rem;
-	}
-	pre {
-		font-size: 0.75rem;
-		font-weight: 400;
-		line-height: 1.125rem;
-		font-family: monospace;
-	}
+    .current td {
+        background-color: var(--black-20);
+    }
+    .error-detail {
+        text-align: left;
+        padding: 0rem 1rem 1rem 1rem;
+    }
+    pre {
+        font-size: 0.75rem;
+        font-weight: 400;
+        line-height: 1.125rem;
+        font-family: monospace;
+    }
 </style>
diff --git a/studio/src/lib/Components/SnapshotsTree.svelte b/studio/src/lib/Components/SnapshotsTree.svelte
new file mode 100644
index 0000000..fc9572b
--- /dev/null
+++ b/studio/src/lib/Components/SnapshotsTree.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import SnapshotItem from './SnapshotItem.svelte';
+    export let step = 0;
+    export let indexes: any = [];
+    export let snapshots: any = [];
+
+    // const zipLongest = (placeholder: any = undefined, ...arrays: any) => {
+    //  const length = Math.max(...arrays.map((arr: any) => arr.length));
+    //  return Array.from({ length }, (value, index) =>
+    //      arrays.map((array: any) => (array.length - 1 >= index ? array[index] : placeholder))
+    //  );
+    // };
+    // $: zippedSnapshots = zipLongest(undefined, [ltm.snapshots, ...ltm.rollbacks.map((r: any) => r.snapshots)]);
+    let groups: any = {};
+    let ended: any = [];
+
+    onMount(async () => {
+        ended = [];
+        indexes.forEach((i: number) => {
+            if (step < snapshots[i].length) {
+                if (!(snapshots[i][step].item.item_id in groups)) {
+                    groups[snapshots[i][step].item.item_id] = [];
+                }
+                groups[snapshots[i][step].item.item_id].push(i);
+            } else if (step === snapshots[i].length) {
+                console.log('im inside');
+                ended.push(i);
+            }
+        });
+        console.log(ended, groups);
+    });
+</script>
+
+{#if Object.keys(groups).length > 0}
+    {#if Object.keys(groups).length < 2}
+        {#each Object.entries(groups) as [id, groupIndexes]}
+            <li>
+                reason: {snapshots[groupIndexes[0]][step].reason}
+                <SnapshotItem item={snapshots[groupIndexes[0]][step]?.item} />
+                indexes: {JSON.stringify(groupIndexes)}
+                {#if ended.length > 0}
+                    ended: {JSON.stringify(ended)}
+                {/if}
+            </li>
+            <svelte:self step={step + 1} indexes={groupIndexes} {snapshots} />
+        {/each}
+    {:else}
+        {#if ended.length > 0}
+            ended: {JSON.stringify(ended)}
+        {/if}
+        <li>
+            {#each Object.entries(groups) as [id, groupIndexes]}
+                <ul>
+                    <li>
+                        reason: {snapshots[groupIndexes[0]][step].reason}
+                        <SnapshotItem item={snapshots[groupIndexes[0]][step].item} />
+                        indexes: {JSON.stringify(groupIndexes)}
+                    </li>
+                    <svelte:self step={step + 1} indexes={groupIndexes} {snapshots} />
+                </ul>
+            {/each}
+        </li>
+    {/if}
+{:else if ended.length > 0}
+    <li>
+        ended: {JSON.stringify(ended)}
+    </li>
+{/if}
+
+<style lang="scss">
+    * {
+        font-size: 0.75rem;
+        line-height: 1.125rem;
+    }
+    li {
+        position: relative;
+        list-style: none;
+        padding-left: 20px;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0.7em;
+            height: 1px;
+            width: 10px;
+            background: #666;
+        }
+        &:first-child::before {
+            left: -20px;
+            width: 30px;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background: #666;
+        }
+
+        &:first-child::after {
+            top: 0.7em;
+        }
+
+        &:last-child::after {
+            height: 0.7em;
+        }
+    }
+
+    ul {
+        position: relative;
+        padding-left: 0;
+        // margin-left: 10px;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: -20px;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background: #666;
+        }
+        &:last-child::before {
+            content: '';
+            position: absolute;
+            left: -20px;
+            top: 0;
+            height: 0.7em;
+            width: 1px;
+            background: #666;
+        }
+    }
+</style>
diff --git a/studio/src/routes/(app)/playground/[id]/+page.svelte b/studio/src/routes/(app)/playground/[id]/+page.svelte
index 394b828..ed1bc5b 100644
--- a/studio/src/routes/(app)/playground/[id]/+page.svelte
+++ b/studio/src/routes/(app)/playground/[id]/+page.svelte
@@ -1,227 +1,216 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import Block from '$lib/UI/Block.svelte';
-	import LTMGraph from '$lib/UI/Graph/LTMGraph.svelte';
-	import TransitionForm from '$lib/Components/TransitionForm.svelte';
-	import SnapshotsTable from '$lib/Components/SnapshotsTable.svelte';
-	import SnapshotNav from '$lib/Components/SnapshotNav.svelte';
-	import Rollabacks from '$lib/Components/Rollbacks.svelte';
-	import WebSocket from '$lib/WebSocket.svelte';
-	import State from '$lib/Components/State.svelte';
-	import { PUBLIC_API_BASE_URL } from '$env/static/public';
-	import { TreeStructure } from 'phosphor-svelte';
+    import { onMount } from 'svelte';
+    import { invalidateAll } from '$app/navigation';
+    import Block from '$lib/UI/Block.svelte';
+    import LTMGraph from '$lib/UI/Graph/LTMGraph.svelte';
+    import TransitionForm from '$lib/Components/TransitionForm.svelte';
+    import SnapshotsTable from '$lib/Components/SnapshotsTable.svelte';
+    import SnapshotNav from '$lib/Components/SnapshotNav.svelte';
+    import Rollabacks from '$lib/Components/Rollbacks.svelte';
+    import WebSocket from '$lib/WebSocket.svelte';
+    import State from '$lib/Components/State.svelte';
+    import { PUBLIC_API_BASE_URL } from '$env/static/public';
+    import { TreeStructure } from 'phosphor-svelte';
 
-	import type { PageData } from './$types';
-	export let data: PageData;
+    import type { PageData } from './$types';
+    export let data: PageData;
 
-	const ltmUrl = `${PUBLIC_API_BASE_URL}ltm/${data.id}`;
-	let ltm: any;
-	let cy: any;
+    $: ({ ltm, params } = data);
+    $: console.log(ltm);
 
-	onMount(async () => {
-		await getLtm();
-	});
+    const ltmUrl = `${PUBLIC_API_BASE_URL}ltm/${data.params.id}`;
+    let cy: any;
 
-	// Get the snapshots from the API
-	let getLtm = async () => {
-		await fetch(`${ltmUrl}?rollbacks=true`)
-			.then((response) => response.json())
-			.then((data) => {
-				ltm = data;
-				snapshotIndex = ltm.snapshots.length - 1;
-			})
-			.catch((error) => {
-				console.log(error);
-				return [];
-			});
-	};
+    ///// Snapshots management //////
 
-	///// Snapshots management //////
+    let snapshotIndex = 0;
+    let snapshot: any = {};
 
-	let snapshotIndex = 0;
-	let snapshot: any = {};
+    onMount(async () => {
+        snapshotIndex = ltm.snapshots.length - 1;
+    });
 
-	let updateLtm = (event: CustomEvent) => {
-		const data: any = event.detail;
-		if ('snapshot' in data) {
-			const snapshot = data.snapshot;
-			ltm = { ...ltm, snapshots: [...ltm.snapshots, snapshot] };
-			if (snapshotIndex === ltm.snapshots.length - 2) {
-				snapshotIndex = ltm.snapshots.length - 1;
-			}
-		}
-		if ('error' in data) {
-			const error = data.error;
-			const i = ltm.errors.findIndex((e: any) => e.id === error.id);
-			let errors;
-			if (i > -1) {
-				errors = ltm.errors.toSpliced(i, 1, error);
-			} else {
-				errors = [...ltm.errors, error];
-			}
-			ltm = { ...ltm, errors: errors };
-		}
-	};
+    let updateLtm = (event: CustomEvent) => {
+        const data: any = event.detail;
+        if ('snapshot' in data) {
+            const snapshot = data.snapshot;
+            ltm = { ...ltm, snapshots: [...ltm.snapshots, snapshot] };
+            if (snapshotIndex === ltm.snapshots.length - 2) {
+                snapshotIndex = ltm.snapshots.length - 1;
+            }
+        }
+        if ('error' in data) {
+            const error = data.error;
+            const i = ltm.errors.findIndex((e: any) => e.id === error.id);
+            let errors;
+            if (i > -1) {
+                errors = ltm.errors.toSpliced(i, 1, error);
+            } else {
+                errors = [...ltm.errors, error];
+            }
+            ltm = { ...ltm, errors: errors };
+        }
+    };
 
-	let currentSnapshot: any = {};
-	$: {
-		if (ltm?.snapshots) {
-			currentSnapshot = ltm.snapshots[snapshotIndex];
-		} else {
-			currentSnapshot = {};
-		}
-	}
+    let currentSnapshot: any = {};
+    $: {
+        if (ltm?.snapshots) {
+            currentSnapshot = ltm.snapshots[snapshotIndex];
+        } else {
+            currentSnapshot = {};
+        }
+    }
 </script>
 
-<WebSocket ltmID={data.id} on:update={updateLtm} />
+<WebSocket ltmID={params.id} on:update={updateLtm} />
 <div class="container">
-	{#if ltm}
-		<div id="title">
-			<Block>
-				<div class="info">
-					<h2><TreeStructure size="1.25rem" /> {ltm.name}</h2>
-					<dl class="details">
-						<dt>ID</dt>
-						<dd>{data.id}</dd>
-						<dt>Fqn</dt>
-						<dd>{ltm.fqn}</dd>
-						<dt>Kwargs</dt>
-						<dd>{JSON.stringify(ltm.kwargs)}</dd>
-					</dl>
-					<hr />
-					<dl class="details">
-						<dt>Created At</dt>
-						<dd>{ltm.created_at}</dd>
-						<dt>Updated At</dt>
-						<dd>{ltm.updated_at}</dd>
-					</dl>
-					<hr />
-					<TransitionForm
-						ltmId={data.id}
-						disabled={snapshotIndex !== ltm.snapshots.length - 1}
-						state={snapshot}
-						{cy}
-					/>
-				</div>
-			</Block>
-		</div>
-		<div id="snapshots">
-			<Block>
-				<div>
-					<SnapshotsTable
-						{ltm}
-						ltmId={data.id}
-						bind:snapshot
-						bind:snapshotIndex
-						controls={true}
-						on:reloadLtm={getLtm}
-					/>
-				</div>
-			</Block>
-		</div>
-		<div id="snapshot">
-			<Block>
-				<div>
-					<State fullSnapshot={snapshot} {currentSnapshot} />
-				</div>
-			</Block>
-		</div>
-		<div id="graph">
-			<Block>
-				<div class="flex-column">
-					<h3><TreeStructure size="1.25rem" />Visual representation</h3>
-					<SnapshotNav {ltm} bind:snapshotIndex />
-					<LTMGraph
-						ltm={ltm.structure}
-						state={snapshot}
-						{currentSnapshot}
-						concurrent={ltm.concurrent_instances}
-						bind:cy
-					/>
-				</div>
-			</Block>
-		</div>
-		<div id="rollbacks">
-			<Block>
-				<Rollabacks {ltm} ltmId={data.id} on:reloadLtm={getLtm} />
-			</Block>
-		</div>
-	{:else}
-		<p>Loading...</p>
-	{/if}
+    {#if ltm}
+        <div id="title">
+            <Block>
+                <div class="info">
+                    <h2><TreeStructure size="1.25rem" /> {ltm.name}</h2>
+                    <dl class="details">
+                        <dt>ID</dt>
+                        <dd>{params.id}</dd>
+                        <dt>Fqn</dt>
+                        <dd>{ltm.fqn}</dd>
+                        <dt>Kwargs</dt>
+                        <dd>{JSON.stringify(ltm.kwargs)}</dd>
+                    </dl>
+                    <hr />
+                    <dl class="details">
+                        <dt>Created At</dt>
+                        <dd>{ltm.created_at}</dd>
+                        <dt>Updated At</dt>
+                        <dd>{ltm.updated_at}</dd>
+                    </dl>
+                    <hr />
+                    <TransitionForm
+                        ltmId={params.id}
+                        disabled={snapshotIndex !== ltm.snapshots.length - 1}
+                        state={snapshot}
+                        {cy}
+                    />
+                </div>
+            </Block>
+        </div>
+        <div id="snapshots">
+            <Block>
+                <div>
+                    <SnapshotsTable
+                        {ltm}
+                        ltmId={params.id}
+                        bind:snapshot
+                        bind:snapshotIndex
+                        controls={true}
+                        on:reloadLtm={invalidateAll}
+                    />
+                </div>
+            </Block>
+        </div>
+        <div id="snapshot">
+            <Block>
+                <div>
+                    <State fullSnapshot={snapshot} {currentSnapshot} />
+                </div>
+            </Block>
+        </div>
+        <div id="graph">
+            <Block>
+                <div class="flex-column">
+                    <h3><TreeStructure size="1.25rem" />Visual representation</h3>
+                    <SnapshotNav {ltm} bind:snapshotIndex />
+                    <LTMGraph
+                        ltm={ltm.structure}
+                        state={snapshot}
+                        {currentSnapshot}
+                        concurrent={ltm.concurrent_instances}
+                        bind:cy
+                    />
+                </div>
+            </Block>
+        </div>
+        <div id="rollbacks">
+            <Block>
+                <Rollabacks {ltm} ltmId={params.id} on:reloadLtm={invalidateAll} />
+            </Block>
+        </div>
+    {:else}
+        <p>Loading...</p>
+    {/if}
 </div>
 
 <style lang="scss">
-	.container {
-		display: grid;
-		gap: var(--20, 1.25rem);
-		// grid-template-areas: 'graph graph' 'snapshot title';
-		grid-template-areas: 'title graph' 'snapshot snapshots' 'rollbacks rollbacks';
-		grid-template-columns: auto auto;
-	}
-	.container > div {
-		display: flex;
-		flex-direction: column;
-	}
-	#title {
-		grid-area: title;
-	}
-	#snapshots {
-		grid-area: snapshots;
-	}
-	#snapshot {
-		grid-area: snapshot;
-	}
-	#graph {
-		grid-area: graph;
-	}
-	#rollbacks {
-		grid-area: rollbacks;
-	}
-	.details {
-		display: grid;
-		grid-auto-flow: column;
-		grid-template-rows: repeat(50, min-content); /* doesn't assume 3 defs but M<50 */
-		position: relative;
-		--horizontal-gap: var(--28, 1.75rem);
-		gap: 0 var(--horizontal-gap);
-	}
-	dt {
-		grid-row-start: 1; /* reset, next column */
+    .container {
+        display: grid;
+        gap: var(--20, 1.25rem);
+        // grid-template-areas: 'graph graph' 'snapshot title';
+        grid-template-areas: 'title graph' 'snapshot snapshots' 'rollbacks rollbacks';
+        grid-template-columns: auto auto;
+    }
+    .container > div {
+        display: flex;
+        flex-direction: column;
+    }
+    #title {
+        grid-area: title;
+    }
+    #snapshots {
+        grid-area: snapshots;
+    }
+    #snapshot {
+        grid-area: snapshot;
+    }
+    #graph {
+        grid-area: graph;
+    }
+    #rollbacks {
+        grid-area: rollbacks;
+    }
+    .details {
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(50, min-content); /* doesn't assume 3 defs but M<50 */
+        position: relative;
+        --horizontal-gap: var(--28, 1.75rem);
+        gap: 0 var(--horizontal-gap);
+    }
+    dt {
+        grid-row-start: 1; /* reset, next column */
 
-		/* 14 Regular */
-		font-size: 0.875rem;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 1.25rem; /* 142.857% */
-		margin-bottom: var(--4, 0.25rem);
-	}
-	dd {
-		margin: 0;
+        /* 14 Regular */
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1.25rem; /* 142.857% */
+        margin-bottom: var(--4, 0.25rem);
+    }
+    dd {
+        margin: 0;
 
-		/* 18 Semibold */
-		font-size: 1.125rem;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 1.5rem; /* 133.333% */
-	}
+        /* 18 Semibold */
+        font-size: 1.125rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.5rem; /* 133.333% */
+    }
 
-	dt:not(:first-child)::before {
-		content: '';
-		border-right: 1px solid var(--black-10, rgba(28, 28, 28, 0.1));
-		position: absolute;
-		height: 100%;
-		transform: translateX(calc(-1 * var(--horizontal-gap) / 2));
-	}
-	.info {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-	.flex-column {
-		flex-grow: 1;
-		align-self: stretch;
-		display: flex;
-		flex-direction: column;
-	}
+    dt:not(:first-child)::before {
+        content: '';
+        border-right: 1px solid var(--black-10, rgba(28, 28, 28, 0.1));
+        position: absolute;
+        height: 100%;
+        transform: translateX(calc(-1 * var(--horizontal-gap) / 2));
+    }
+    .info {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    .flex-column {
+        flex-grow: 1;
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+    }
 </style>
diff --git a/studio/src/routes/(app)/playground/[id]/+page.ts b/studio/src/routes/(app)/playground/[id]/+page.ts
index 732b4e3..df8da10 100644
--- a/studio/src/routes/(app)/playground/[id]/+page.ts
+++ b/studio/src/routes/(app)/playground/[id]/+page.ts
@@ -1,6 +1,22 @@
 import type { PageLoad } from './$types';
+import { PUBLIC_API_BASE_URL } from '$env/static/public';
 
-export const load: PageLoad = ({ params }) => {
-    return params
+export const load: PageLoad = async ({ fetch, params }) => {
+
+    let ltmUrl = `${PUBLIC_API_BASE_URL}ltm/${params.id}?rollbacks=True`;
+
+    const ltm = fetch(ltmUrl)
+        .then((response) => response.json())
+        .then((data) => {
+            console.log(ltm);
+            return data;
+        })
+        .catch((error) => {
+            console.log(error);
+            return [];
+        });
+
+
+    return { params, ltm: await ltm }
 };
 export const ssr = false;
\ No newline at end of file