From 2a7093aae17d4ee153fc9cd9b0a4e7c1b142ed16 Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:10:24 +0100
Subject: [PATCH] feat: playground navigate to container

---
 packages/backend/src/studio-api-impl.ts       |  4 ++
 .../frontend/src/lib/button/Button.svelte     |  2 +-
 .../src/lib/images/ContainerIcon.svelte       | 45 +++++++++++++++++++
 .../frontend/src/pages/ModelPlayground.svelte | 15 +++++++
 packages/shared/src/StudioAPI.ts              |  2 +
 5 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend/src/lib/images/ContainerIcon.svelte

diff --git a/packages/backend/src/studio-api-impl.ts b/packages/backend/src/studio-api-impl.ts
index d1521db75..7702c0ea1 100644
--- a/packages/backend/src/studio-api-impl.ts
+++ b/packages/backend/src/studio-api-impl.ts
@@ -118,4 +118,8 @@ export class StudioApiImpl implements StudioAPI {
   async deleteLocalModel(modelId: string): Promise<void> {
     await this.modelsManager.deleteLocalModel(modelId);
   }
+
+  navigateToContainer(containerId: string): Promise<void> {
+    return podmanDesktopApi.navigation.navigateToContainer(containerId);
+  }
 }
diff --git a/packages/frontend/src/lib/button/Button.svelte b/packages/frontend/src/lib/button/Button.svelte
index 6aafe58fe..b88d18bcf 100644
--- a/packages/frontend/src/lib/button/Button.svelte
+++ b/packages/frontend/src/lib/button/Button.svelte
@@ -73,7 +73,7 @@ $: {
       {:else if iconType === 'fa'}
         <Fa icon="{icon}" />
       {:else if iconType === 'unknown'}
-        <svelte:component this="{icon}" />
+        <svelte:component size="1em" this="{icon}" />
       {/if}
       {#if $$slots.default}
         <span><slot /></span>
diff --git a/packages/frontend/src/lib/images/ContainerIcon.svelte b/packages/frontend/src/lib/images/ContainerIcon.svelte
new file mode 100644
index 000000000..7b4bbce47
--- /dev/null
+++ b/packages/frontend/src/lib/images/ContainerIcon.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+export let size = '40';
+export let solid = false;
+</script>
+
+<svg
+  width="{size}"
+  height="{size}"
+  class="{$$props.class}"
+  style="{$$props.style}"
+  viewBox="0.926 0.926 4.498 4.498"
+  version="1.1"
+  xml:space="preserve"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  {#if solid}
+    <defs>
+      <mask id="containermask">
+        <rect x="-15" y="-15" width="100" height="100" fill="white"></rect>
+        <path
+          style="fill-rule:evenodd;stroke-width:0.264583;stroke-linejoin:round;stroke-miterlimit:10"
+          d="m -10.666282,15.93309 a 0.13230489,0.13230489 0 0 0 -0.02584,0.0052 l -2.116667,0.661458 a 0.13230489,0.13230489 0 0 0 -0.08888,0.151412 0.13230489,0.13230489 0 0 0 -0.0041,0.03256 v 2.390552 a 0.13230489,0.13230489 0 0 0 0.07028,0.116789 l 2.106332,1.123445 a 0.13230489,0.13230489 0 0 0 0.07235,0.01447 0.13230489,0.13230489 0 0 0 0.07235,-0.01447 l 2.1063312,-1.123445 a 0.13230489,0.13230489 0 0 0 0.07028,-0.116789 V 16.78372 a 0.13230489,0.13230489 0 0 0 -0.00362,-0.03152 0.13230489,0.13230489 0 0 0 -0.0894,-0.152445 l -2.1166662,-0.661458 a 0.13230489,0.13230489 0 0 0 -0.05271,-0.0052 z m 0.01344,0.269751 1.6737994,0.522965 -1.6737994,0.522966 -1.6738,-0.522966 z m -1.984375,0.762227 1.851566,0.595313 -0.0088,2.517159 -1.842781,-0.982886 z m 3.9687498,0 v 2.129586 l -1.8427818,0.982886 -0.0088,-2.517159 z"
+        ></path>
+      </mask>
+    </defs>
+    <g transform="translate(21.210601,-15.062965)">
+      <g transform="translate(-7.3827548,0.05695021)">
+        <path
+          style="fill:currentColor;fill-rule:nonzero;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none"
+          mask="url(#containermask)"
+          d="m -10.652846,16.077316 -2.091065,0.619106 -0.0063,2.463792 2.065795,1.105548 2.1479213,-1.111865 0.012635,-2.369031 z"
+        ></path>
+      </g>
+    </g>
+  {:else}
+    <g transform="translate(21.210601,-15.062965)">
+      <g transform="translate(-7.3827548,0.05695021)">
+        <path
+          style="fill:currentColor;fill-rule:evenodd;stroke-width:0.264583;stroke-linejoin:round;stroke-miterlimit:10"
+          d="m -10.666282,15.93309 a 0.13230489,0.13230489 0 0 0 -0.02584,0.0052 l -2.116667,0.661458 a 0.13230489,0.13230489 0 0 0 -0.08888,0.151412 0.13230489,0.13230489 0 0 0 -0.0041,0.03256 v 2.390552 a 0.13230489,0.13230489 0 0 0 0.07028,0.116789 l 2.106332,1.123445 a 0.13230489,0.13230489 0 0 0 0.07235,0.01447 0.13230489,0.13230489 0 0 0 0.07235,-0.01447 l 2.1063312,-1.123445 a 0.13230489,0.13230489 0 0 0 0.07028,-0.116789 V 16.78372 a 0.13230489,0.13230489 0 0 0 -0.00362,-0.03152 0.13230489,0.13230489 0 0 0 -0.0894,-0.152445 l -2.1166662,-0.661458 a 0.13230489,0.13230489 0 0 0 -0.05271,-0.0052 z m 0.01344,0.269751 1.6737994,0.522965 -1.6737994,0.522966 -1.6738,-0.522966 z m -1.984375,0.762227 1.851566,0.595313 -0.0088,2.517159 -1.842781,-0.982886 z m 3.9687498,0 v 2.129586 l -1.8427818,0.982886 -0.0088,-2.517159 z"
+        ></path>
+      </g>
+    </g>
+  {/if}
+</svg>
diff --git a/packages/frontend/src/pages/ModelPlayground.svelte b/packages/frontend/src/pages/ModelPlayground.svelte
index 7394256b9..2fd78c661 100644
--- a/packages/frontend/src/pages/ModelPlayground.svelte
+++ b/packages/frontend/src/pages/ModelPlayground.svelte
@@ -12,6 +12,7 @@
   export let model: ModelInfo | undefined;
   import Fa from 'svelte-fa';
   import { faPlay, faStop, faInfo, faWarning } from '@fortawesome/free-solid-svg-icons';
+  import ContainerIcon from '/@/lib/images/ContainerIcon.svelte';
 
   let prompt = '';
   let queryId: number;
@@ -147,6 +148,17 @@
         return true;
     }
   }
+
+  const navigateToContainer = () => {
+    if(playgroundState?.container?.containerId === undefined)
+      return;
+
+    try {
+      studioClient.navigateToContainer(playgroundState?.container?.containerId);
+    } catch(err) {
+      console.error(err);
+    }
+  }
 </script>
 
 <div class="m-4 w-full flew flex-col">
@@ -155,6 +167,9 @@
       {#key playgroundState?.status}
         <span class="flex-grow">Playground {playgroundState?.status}</span>
         <Button title="playground-action" inProgress={isLoading()} on:click={onAction} icon="{getActionIcon()}"/>
+        {#if playgroundState?.container}
+          <Button class="ml-2" on:click={navigateToContainer} title="navigate-to-container" icon="{ContainerIcon}"/>
+        {/if}
       {/key}
     </div>
   </Card>
diff --git a/packages/shared/src/StudioAPI.ts b/packages/shared/src/StudioAPI.ts
index 7e406b63a..c15e47af1 100644
--- a/packages/shared/src/StudioAPI.ts
+++ b/packages/shared/src/StudioAPI.ts
@@ -25,4 +25,6 @@ export abstract class StudioAPI {
   abstract askPlayground(modelId: string, prompt: string): Promise<number>;
   abstract getPlaygroundQueriesState(): Promise<QueryState[]>;
   abstract getPlaygroundsState(): Promise<PlaygroundState[]>;
+
+  abstract navigateToContainer(containerId: string): Promise<void>;
 }