From 9fe5ee096ff4b1870eca6d4b31c61aa7abc9d13c Mon Sep 17 00:00:00 2001
From: Alex Cabrera <alex.cabrera@gmail.com>
Date: Fri, 29 Sep 2023 12:15:48 -0400
Subject: [PATCH] feat: add space-separated-values (#246)

---
 backend/zeno_backend/routers/sdk.py           |  3 +-
 .../instance-views/views/viewMap.ts           |  6 +-
 .../views/views/SpaceSeparatedValues.svelte   | 74 +++++++++++++++++++
 3 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/lib/components/instance-views/views/views/SpaceSeparatedValues.svelte

diff --git a/backend/zeno_backend/routers/sdk.py b/backend/zeno_backend/routers/sdk.py
index fba09acb..ce2365d8 100644
--- a/backend/zeno_backend/routers/sdk.py
+++ b/backend/zeno_backend/routers/sdk.py
@@ -28,9 +28,10 @@
     "code-generation",
     "image-classification",
     "image-segmentation",
+    "openai-chat-markdown",
     "openai-chat",
+    "space-separated-values",
     "text-classification",
-    "openai-chat-markdown",
 ]
 
 
diff --git a/frontend/src/lib/components/instance-views/views/viewMap.ts b/frontend/src/lib/components/instance-views/views/viewMap.ts
index 9fef223b..8815c237 100644
--- a/frontend/src/lib/components/instance-views/views/viewMap.ts
+++ b/frontend/src/lib/components/instance-views/views/viewMap.ts
@@ -7,18 +7,20 @@ import ImageClassification from './views/ImageClassification.svelte';
 import ImageSegmentation from './views/ImageSegmentation.svelte';
 import OpenAiChat from './views/OpenAIChat.svelte';
 import OpenAiChatMarkdown from './views/OpenAIChatMarkdown.svelte';
+import SpaceSeparatedValues from './views/SpaceSeparatedValues.svelte';
 import TextClassification from './views/TextClassification.svelte';
 
 // MUST update /backend/zeno_backend/routers/sdk.py when adding new views
 export const viewMap: Record<string, ComponentType> = {
 	'audio-transcription': AudioTranscription,
-	chatbot: Chatbot,
 	'code-generation': Codegen,
 	'image-classification': ImageClassification,
 	'image-segmentation': ImageSegmentation,
+	'openai-chat-markdown': OpenAiChatMarkdown,
 	'openai-chat': OpenAiChat,
+	'space-separated-values': SpaceSeparatedValues,
 	'text-classification': TextClassification,
-	'openai-chat-markdown': OpenAiChatMarkdown
+	chatbot: Chatbot
 };
 
 export const optionsMap: Record<string, ComponentType> = {
diff --git a/frontend/src/lib/components/instance-views/views/views/SpaceSeparatedValues.svelte b/frontend/src/lib/components/instance-views/views/views/SpaceSeparatedValues.svelte
new file mode 100644
index 00000000..fe8174b5
--- /dev/null
+++ b/frontend/src/lib/components/instance-views/views/views/SpaceSeparatedValues.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { resolveDataPoint } from '$lib/util/util';
+	import CircularProgress from '@smui/circular-progress';
+
+	export let entry: Record<string, number | string | boolean | { role: string; content: string }[]>;
+	export let modelColumn: string;
+
+	// Split each column by newlines then spaces.
+	$: fetchData = (async () => {
+		let response = await resolveDataPoint(entry);
+		if (response instanceof Response) {
+			response = await response.text();
+		}
+		return response.split('\n').map((x) => x.split(' '));
+	})();
+	$: labelEntries = (entry['label'] + '').split('\n').map((x) => x.split(' '));
+	$: modelEntries = (entry[modelColumn] + '').split('\n').map((x) => x.split(' '));
+</script>
+
+{#await fetchData}
+	<CircularProgress style="height: 32px; width: 32px; margin-right:20px" indeterminate />
+{:then data}
+	<table id="example_table">
+		<tbody>
+			{#each data as entry}
+				<tr>
+					<th>Data: </th>
+					{#each entry as cell}
+						<td>{cell}</td>
+					{/each}
+				</tr>
+			{/each}
+			{#each labelEntries as entry}
+				<tr class="label">
+					<th>Label: </th>
+					{#each entry as cell}
+						<td>{cell}</td>
+					{/each}
+				</tr>
+			{/each}
+			{#if modelColumn}
+				{#each modelEntries as entry}
+					<tr>
+						<th>Output: </th>
+						{#each entry as cell}
+							<td>{cell}</td>
+						{/each}
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+{/await}
+
+<style>
+	#example_table {
+		margin: 2.5px;
+		border: 1px solid rgb(224, 224, 224);
+		min-width: 350px;
+		font-family: Arial, Helvetica, sans-serif;
+		border-collapse: collapse;
+		width: 100%;
+	}
+
+	#example_table td,
+	#example_table th {
+		border: 1px solid #ddd;
+		padding: 8px;
+	}
+
+	#example_table tr.label {
+		background-color: #f2f2f2;
+	}
+</style>