From 43b56c72f8c973a9d6080de7175d237350ac2557 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Wed, 20 Nov 2024 13:57:04 -0500
Subject: [PATCH 1/8] First step.

---
 .../dataset/tera-dataset-jupyter-panel.vue          | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
index 29d6ad2e96..d80334cba8 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -85,6 +85,7 @@
 			</div>
 		</div>
 
+		<Textarea v-model="dataContextDescription" disabled />
 		<!-- Jupyter Chat -->
 		<tera-jupyter-chat
 			ref="chat"
@@ -149,6 +150,7 @@ import { useConfirm } from 'primevue/useconfirm';
 import { useProjects } from '@/composables/project';
 import { programmingLanguageOptions } from '@/types/common';
 import TeraBeakerInput from '@/components/llm/tera-beaker-input.vue';
+import Textarea from 'primevue/textarea';
 
 const openDialog = () => {
 	showSaveInput.value = true;
@@ -161,13 +163,14 @@ const jupyterSession: SessionContext = await newSession('beaker_kernel', 'Beaker
 const selectedKernel = ref();
 const runningSessions = ref<any[]>([]);
 
+// This is used to inform the user what is in the context.
+const dataContextDescription = computed(() =>
+	props.assets.map((asset, index) => `#d${index + 1} = ${asset.name}\n`).join(' ')
+);
+
 const defaultPreview = computed(() => {
 	let code = '';
-	props.assets.forEach((asset, index) => {
-		code += `#d${index + 1} = ${asset.name}\n`;
-	});
-
-	// add first dataset to the code
+	// add first dataset to the code for user
 	code += 'd1';
 	return code;
 });

From 9968b0875f2bdb543bd3abe36dbe34a7161e68e5 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Thu, 21 Nov 2024 10:11:49 -0500
Subject: [PATCH 2/8] update defaultPreview to ref

---
 .../src/components/dataset/tera-dataset-jupyter-panel.vue | 8 +-------
 .../ops/dataset-transformer/tera-dataset-transformer.vue  | 1 -
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
index d80334cba8..adfff856b1 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -168,13 +168,7 @@ const dataContextDescription = computed(() =>
 	props.assets.map((asset, index) => `#d${index + 1} = ${asset.name}\n`).join(' ')
 );
 
-const defaultPreview = computed(() => {
-	let code = '';
-	// add first dataset to the code for user
-	code += 'd1';
-	return code;
-});
-
+const defaultPreview = ref<string>('d1');
 const confirm = useConfirm();
 
 const props = defineProps<{
diff --git a/packages/client/hmi-client/src/components/workflow/ops/dataset-transformer/tera-dataset-transformer.vue b/packages/client/hmi-client/src/components/workflow/ops/dataset-transformer/tera-dataset-transformer.vue
index 047b8c9566..bf3690809e 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/dataset-transformer/tera-dataset-transformer.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/dataset-transformer/tera-dataset-transformer.vue
@@ -49,7 +49,6 @@ import type { NotebookSession } from '@/types/Types';
 import { cloneDeep } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
-
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import { useProjects } from '@/composables/project';

From 1e0511871bea87bd21bdfafd0878bb2303a2c8e5 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Mon, 25 Nov 2024 14:25:12 -0500
Subject: [PATCH 3/8] Thanks Shawn!!

---
 .../dataset/tera-dataset-jupyter-panel.vue    | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
index adfff856b1..3c64f5ecc9 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -85,24 +85,27 @@
 			</div>
 		</div>
 
-		<Textarea v-model="dataContextDescription" disabled />
-		<!-- Jupyter Chat -->
-		<tera-jupyter-chat
-			ref="chat"
-			:show-jupyter-settings="true"
-			:show-chat-thoughts="props.showChatThoughts"
-			:jupyter-session="jupyterSession"
-			:kernel-status="kernelStatus"
-			:language="selectedLanguage"
-			:default-preview="defaultPreview"
-			@update-kernel-state="(e) => emit('update-kernel-state', e)"
-			@update-kernel-status="updateKernelStatus"
-			@new-dataset-saved="onNewDatasetSaved"
-			@download-response="onDownloadResponse"
-			@update-language="(lang) => emit('update-language', lang)"
-			@update-selected-outputs="(outputs) => emit('update-selected-outputs', outputs)"
-			:notebook-session="props.notebookSession"
-		/>
+		<div>
+			<tera-input-text v-model="dataContextDescription" disabled />
+
+			<!-- Jupyter Chat -->
+			<tera-jupyter-chat
+				ref="chat"
+				:show-jupyter-settings="true"
+				:show-chat-thoughts="props.showChatThoughts"
+				:jupyter-session="jupyterSession"
+				:kernel-status="kernelStatus"
+				:language="selectedLanguage"
+				:default-preview="defaultPreview"
+				@update-kernel-state="(e) => emit('update-kernel-state', e)"
+				@update-kernel-status="updateKernelStatus"
+				@new-dataset-saved="onNewDatasetSaved"
+				@download-response="onDownloadResponse"
+				@update-language="(lang) => emit('update-language', lang)"
+				@update-selected-outputs="(outputs) => emit('update-selected-outputs', outputs)"
+				:notebook-session="props.notebookSession"
+			/>
+		</div>
 
 		<!-- Save as dialog -->
 		<tera-modal v-if="showSaveInput" class="w-4">
@@ -150,7 +153,6 @@ import { useConfirm } from 'primevue/useconfirm';
 import { useProjects } from '@/composables/project';
 import { programmingLanguageOptions } from '@/types/common';
 import TeraBeakerInput from '@/components/llm/tera-beaker-input.vue';
-import Textarea from 'primevue/textarea';
 
 const openDialog = () => {
 	showSaveInput.value = true;

From 4e42e457d386afbde21e6f26a9f1e67c7db21e47 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Mon, 25 Nov 2024 15:41:35 -0500
Subject: [PATCH 4/8] with css anything is possible

---
 .../dataset/tera-dataset-jupyter-panel.vue      | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
index 3c64f5ecc9..a5e1dd1653 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -86,8 +86,9 @@
 		</div>
 
 		<div>
-			<tera-input-text v-model="dataContextDescription" disabled />
-
+			<div v-for="(data, indx) in dataContextDescription" :key="indx">
+				<input class="context-description" :value="data" disabled type="text" />
+			</div>
 			<!-- Jupyter Chat -->
 			<tera-jupyter-chat
 				ref="chat"
@@ -166,9 +167,7 @@ const selectedKernel = ref();
 const runningSessions = ref<any[]>([]);
 
 // This is used to inform the user what is in the context.
-const dataContextDescription = computed(() =>
-	props.assets.map((asset, index) => `#d${index + 1} = ${asset.name}\n`).join(' ')
-);
+const dataContextDescription = computed(() => props.assets.map((asset, index) => `#d${index + 1} = ${asset.name}\n`));
 
 const defaultPreview = ref<string>('d1');
 const confirm = useConfirm();
@@ -518,6 +517,14 @@ const onDownloadResponse = (payload) => {
 </script>
 
 <style scoped>
+.context-description {
+	width: inherit;
+	font-family: var(--font-family);
+	font-feature-settings: 'tnum';
+	border: none;
+	margin: 0;
+}
+
 .container {
 	margin-left: 1rem;
 	margin-right: 1rem;

From fecd460248aa8232a41a983c2b21620333948d0b Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Mon, 25 Nov 2024 15:46:12 -0500
Subject: [PATCH 5/8] better width

---
 .../src/components/dataset/tera-dataset-jupyter-panel.vue      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
index a5e1dd1653..2e64e75903 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -518,7 +518,8 @@ const onDownloadResponse = (payload) => {
 
 <style scoped>
 .context-description {
-	width: inherit;
+	width: 100%;
+	width: fill-available;
 	font-family: var(--font-family);
 	font-feature-settings: 'tnum';
 	border: none;

From dd506373ce1829b77f1023fc8e585b9fd06425d9 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 26 Nov 2024 10:53:41 -0500
Subject: [PATCH 6/8] idx > indx

---
 .../src/components/dataset/tera-dataset-jupyter-panel.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
index 2e64e75903..e1ef0e67a5 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -86,7 +86,7 @@
 		</div>
 
 		<div>
-			<div v-for="(data, indx) in dataContextDescription" :key="indx">
+			<div v-for="(data, idx) in dataContextDescription" :key="idx">
 				<input class="context-description" :value="data" disabled type="text" />
 			</div>
 			<!-- Jupyter Chat -->

From 3d7b55c4026f9ffb6bd46a15eb4ff86953ef4bd9 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 26 Nov 2024 11:38:30 -0500
Subject: [PATCH 7/8] Fair point thank you Dan

---
 .../src/components/dataset/tera-dataset-jupyter-panel.vue  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
index e1ef0e67a5..8b073e9f16 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -86,9 +86,9 @@
 		</div>
 
 		<div>
-			<div v-for="(data, idx) in dataContextDescription" :key="idx">
-				<input class="context-description" :value="data" disabled type="text" />
-			</div>
+			<ul v-for="(data, idx) in dataContextDescription" :key="idx">
+				<li class="context-description">{{ data }}</li>
+			</ul>
 			<!-- Jupyter Chat -->
 			<tera-jupyter-chat
 				ref="chat"
@@ -518,6 +518,7 @@ const onDownloadResponse = (payload) => {
 
 <style scoped>
 .context-description {
+	background-color: var(--surface-100);
 	width: 100%;
 	width: fill-available;
 	font-family: var(--font-family);

From 7562886bb7cdedbae1657927bf8602a957315b6d Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 26 Nov 2024 12:59:46 -0500
Subject: [PATCH 8/8] thanks Dan x2

---
 .../src/components/dataset/tera-dataset-jupyter-panel.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
index 8b073e9f16..30ff9f046c 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -86,8 +86,8 @@
 		</div>
 
 		<div>
-			<ul v-for="(data, idx) in dataContextDescription" :key="idx">
-				<li class="context-description">{{ data }}</li>
+			<ul>
+				<li v-for="(data, idx) in dataContextDescription" :key="idx" class="context-description">{{ data }}</li>
 			</ul>
 			<!-- Jupyter Chat -->
 			<tera-jupyter-chat