show related experiment in playground

Add custom icon to Alert

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
 
 

studio/src/global.scss

@@ -143,6 +143,10 @@ a {
   color: var(--black-100, #fff);
 }
 
+b {
+  font-weight: 600;
+}
+
 /* tables */
 table {
   border-spacing: 0;

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>

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">

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;