From eb030607872a15145950638b86354778e255e68c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iva=CC=81n=20Raskovsky?= <raskovsky+git@gmail.com>
Date: Wed, 13 Nov 2024 11:21:40 -0300
Subject: [PATCH] show related experiment in playground

Add custom icon to Alert
---
 flou/flou/engine/router.py                    |  9 ++++++++
 studio/src/global.scss                        |  4 ++++
 studio/src/lib/UI/Alert.svelte                | 13 ++++--------
 .../routes/(app)/playground/[id]/+page.svelte | 10 +++++++--
 .../src/routes/(app)/playground/[id]/+page.ts | 21 ++++++++++++++++++-
 5 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/flou/flou/engine/router.py b/flou/flou/engine/router.py
index 4cdd832..0542e1c 100644
--- a/flou/flou/engine/router.py
+++ b/flou/flou/engine/router.py
@@ -19,6 +19,7 @@
     RollbackIndex,
     ErrorList,
 )
+from flou.experiments.models import Trial
 
 from flou.engine.models import Error
 from flou.registry import registry
@@ -98,6 +99,14 @@ async def get_ltm(
     data["errors"] = session.scalars(
         select(Error).where(Error.ltm_id == ltm_id)
     ).all()
+
+    # Check if any trials reference this LTM and get experiment ID
+    trial = session.scalar(
+        select(Trial).where(Trial.ltm_id == ltm_id).limit(1)
+    )
+    if trial:
+        data["experiment_id"] = trial.experiment_id
+
     return data
 
 
diff --git a/studio/src/global.scss b/studio/src/global.scss
index dd64a61..255e22b 100644
--- a/studio/src/global.scss
+++ b/studio/src/global.scss
@@ -143,6 +143,10 @@ a {
   color: var(--black-100, #fff);
 }
 
+b {
+  font-weight: 600;
+}
+
 /* tables */
 table {
   border-spacing: 0;
diff --git a/studio/src/lib/UI/Alert.svelte b/studio/src/lib/UI/Alert.svelte
index 74a51dd..00aa55a 100644
--- a/studio/src/lib/UI/Alert.svelte
+++ b/studio/src/lib/UI/Alert.svelte
@@ -1,19 +1,14 @@
 <script lang="ts">
 	export let level: 'info' | 'success' | 'warning' | 'danger' = 'info';
+	export let icon: any = null;
 	import { CheckCircle, Info, Warning, XCircle } from 'phosphor-svelte';
+
+	$: icon = icon ?? (level === 'info' ? Info : level === 'warning' ? Warning : level === 'danger' ? XCircle : CheckCircle);
 </script>
 
 <div class={'alert ' + level}>
 	<div class="icon">
-		{#if level === 'info'}
-			<Info size="1.5rem" />
-		{:else if level === 'warning'}
-			<Warning size="1.5rem" />
-		{:else if level === 'danger'}
-			<XCircle size="1.5rem" />
-		{:else if level === 'success'}
-			<CheckCircle size="1.5rem" />
-		{/if}
+		<svelte:component this={icon} size="1.5rem" />
 	</div>
 	<div>
 		<slot></slot>
diff --git a/studio/src/routes/(app)/playground/[id]/+page.svelte b/studio/src/routes/(app)/playground/[id]/+page.svelte
index ed1bc5b..55a28ae 100644
--- a/studio/src/routes/(app)/playground/[id]/+page.svelte
+++ b/studio/src/routes/(app)/playground/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { invalidateAll } from '$app/navigation';
+	import Alert from '$lib/UI/Alert.svelte';
     import Block from '$lib/UI/Block.svelte';
     import LTMGraph from '$lib/UI/Graph/LTMGraph.svelte';
     import TransitionForm from '$lib/Components/TransitionForm.svelte';
@@ -10,12 +11,12 @@
     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 { TreeStructure, Flask } from 'phosphor-svelte';
 
     import type { PageData } from './$types';
     export let data: PageData;
 
-    $: ({ ltm, params } = data);
+    $: ({ ltm, experiment, params } = data);
     $: console.log(ltm);
 
     const ltmUrl = `${PUBLIC_API_BASE_URL}ltm/${data.params.id}`;
@@ -63,6 +64,11 @@
 </script>
 
 <WebSocket ltmID={params.id} on:update={updateLtm} />
+{#if experiment }
+<Alert level="info" icon={Flask}>
+	This LTM is part of the experiment <b>#{experiment.index} {experiment.name}</b>. To view the experiment, click <a href="/experiments/{ltm.experiment_id}">here</a>.
+</Alert>
+{/if}
 <div class="container">
     {#if ltm}
         <div id="title">
diff --git a/studio/src/routes/(app)/playground/[id]/+page.ts b/studio/src/routes/(app)/playground/[id]/+page.ts
index df8da10..44907eb 100644
--- a/studio/src/routes/(app)/playground/[id]/+page.ts
+++ b/studio/src/routes/(app)/playground/[id]/+page.ts
@@ -16,7 +16,26 @@ export const load: PageLoad = async ({ fetch, params }) => {
             return [];
         });
 
+    const experiment = ltm.then(ltmData => {
+        if (ltmData.experiment_id) {
+            return fetch(`${PUBLIC_API_BASE_URL}experiments/${ltmData.experiment_id}`)
+                .then((response) => response.json())
+                .then((data) => {
+                    return data;
+                })
+                .catch((error) => {
+                    console.log(error);
+                    return null;
+                });
+        }
+        return null;
+    });
+
+    return {
+        params,
+        ltm: await ltm,
+        experiment: await experiment
+    }
 
-    return { params, ltm: await ltm }
 };
 export const ssr = false;
\ No newline at end of file