From f9e1b0eed8d60e7afa029595136ac25b8194d64c Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Fri, 3 Jan 2025 15:32:01 -0500
Subject: [PATCH] clean up old notebook css (#5945)

Co-authored-by: Daniel Chang <mwdchang@gmail.com>
---
 .../llm/tera-notebook-jupyter-input.vue       |  1 -
 .../tera-model-comparison-drilldown.vue       | 37 ++++++---------
 .../tera-model-config-drilldown.vue           | 43 +++++++----------
 .../model-edit/tera-model-edit-drilldown.vue  | 46 +++++++++----------
 .../tera-simulate-ciemss-drilldown.vue        | 34 +++++---------
 .../stratify-mira/tera-stratify-drilldown.vue | 40 ++++++++--------
 6 files changed, 82 insertions(+), 119 deletions(-)

diff --git a/packages/client/hmi-client/src/components/llm/tera-notebook-jupyter-input.vue b/packages/client/hmi-client/src/components/llm/tera-notebook-jupyter-input.vue
index e5860c38e4..e5309b49f2 100644
--- a/packages/client/hmi-client/src/components/llm/tera-notebook-jupyter-input.vue
+++ b/packages/client/hmi-client/src/components/llm/tera-notebook-jupyter-input.vue
@@ -167,7 +167,6 @@ const onInputChange = async () => {
 .notebook-toolbar {
 	display: flex;
 	flex-direction: row;
-	margin-top: var(--gap-2);
 	gap: var(--gap-3);
 	justify-content: space-between;
 }
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-drilldown.vue
index dae91e7159..106cb5dac2 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-drilldown.vue
@@ -117,21 +117,19 @@
 			<!--TODO: The notebook input and buttons works well here, but it the html/css
 				organization should be refactored here (same for tera-model-edit)-->
 			<tera-drilldown-section class="notebook-section">
-				<div class="toolbar">
-					<tera-notebook-jupyter-input
-						:kernelManager="kernelManager"
-						:defaultOptions="sampleAgentQuestions"
-						@llm-output="appendCode"
-						@llm-thought-output="(data: any) => llmThoughts.push(data)"
-						@question-asked="llmThoughts = []"
-						:context-language="contextLanguage"
-					>
-						<template #toolbar-right-side>
-							<Button label="Reset" outlined severity="secondary" size="small" @click="resetNotebook" />
-							<Button icon="pi pi-play" label="Run" size="small" @click="runCode" :disabled="isEmpty(code)" />
-						</template>
-					</tera-notebook-jupyter-input>
-				</div>
+				<tera-notebook-jupyter-input
+					:kernelManager="kernelManager"
+					:defaultOptions="sampleAgentQuestions"
+					@llm-output="appendCode"
+					@llm-thought-output="(data: any) => llmThoughts.push(data)"
+					@question-asked="llmThoughts = []"
+					:context-language="contextLanguage"
+				>
+					<template #toolbar-right-side>
+						<Button label="Reset" outlined severity="secondary" size="small" @click="resetNotebook" />
+						<Button icon="pi pi-play" label="Run" size="small" @click="runCode" :disabled="isEmpty(code)" />
+					</template>
+				</tera-notebook-jupyter-input>
 				<v-ace-editor
 					v-model:value="code"
 					@init="initializeAceEditor"
@@ -699,15 +697,6 @@ ul {
 	position: relative;
 }
 
-.toolbar-right-side {
-	position: absolute;
-	top: var(--gap-4);
-	right: 0;
-	gap: var(--gap-2);
-	display: flex;
-	align-items: center;
-}
-
 .comparison-overview,
 .comparison-context {
 	border: 1px solid var(--surface-border-light);
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
index d86887d8f0..627b378d9c 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
@@ -167,24 +167,22 @@
 		</tera-drilldown-section>
 		<tera-columnar-panel :tabName="DrilldownTabs.Notebook">
 			<tera-drilldown-section class="notebook-section">
-				<div class="toolbar">
-					<Suspense>
-						<tera-notebook-jupyter-input
-							:kernel-manager="kernelManager"
-							:defaultOptions="sampleAgentQuestions"
-							:maxChars="60"
-							:context-language="contextLanguage"
-							@llm-output="(data: any) => appendCode(data, 'code')"
-							@llm-thought-output="(data: any) => updateThoughts(data)"
-							@question-asked="updateLlmQuery"
-						>
-							<template #toolbar-right-side>
-								<tera-input-text v-model="knobs.transientModelConfig.name" placeholder="Configuration Name" />
-								<Button icon="pi pi-play" label="Run" @click="runFromCode" :disabled="isEmpty(codeText)" />
-							</template>
-						</tera-notebook-jupyter-input>
-					</Suspense>
-				</div>
+				<Suspense>
+					<tera-notebook-jupyter-input
+						:kernel-manager="kernelManager"
+						:defaultOptions="sampleAgentQuestions"
+						:maxChars="60"
+						:context-language="contextLanguage"
+						@llm-output="(data: any) => appendCode(data, 'code')"
+						@llm-thought-output="(data: any) => updateThoughts(data)"
+						@question-asked="updateLlmQuery"
+					>
+						<template #toolbar-right-side>
+							<tera-input-text v-model="knobs.transientModelConfig.name" placeholder="Configuration Name" />
+							<Button icon="pi pi-play" label="Run" @click="runFromCode" :disabled="isEmpty(codeText)" />
+						</template>
+					</tera-notebook-jupyter-input>
+				</Suspense>
 				<v-ace-editor
 					v-model:value="codeText"
 					@init="initializeEditor"
@@ -904,15 +902,6 @@ onUnmounted(() => {
 	position: relative;
 }
 
-.toolbar-right-side {
-	position: absolute;
-	top: var(--gap-4);
-	right: 0;
-	gap: var(--gap-2);
-	display: flex;
-	align-items: center;
-}
-
 #matrix-canvas {
 	position: fixed;
 	top: 0;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue
index 446e23e70b..449ac4f0bc 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue
@@ -9,30 +9,28 @@
 		@update-state="(state: any) => emit('update-state', state)"
 	>
 		<tera-drilldown-section :tabName="DrilldownTabs.Notebook" class="notebook-section">
-			<div class="toolbar">
-				<Suspense>
-					<tera-notebook-jupyter-input
-						:kernel-manager="kernelManager"
-						:default-options="sampleAgentQuestions"
-						:context-language="contextLanguage"
-						@llm-output="(data: any) => appendCode(data, 'code')"
-						@llm-thought-output="(data: any) => llmThoughts.push(data)"
-						@question-asked="updateLlmQuery"
-					>
-						<template #toolbar-right-side>
-							<Button label="Reset" outlined severity="secondary" size="small" @click="resetModel" />
-							<Button
-								icon="pi pi-play"
-								:label="isUpdatingModel ? 'Loading...' : 'Run'"
-								size="small"
-								:loading="isUpdatingModel"
-								@click="runCode"
-								:disabled="isEmpty(codeText)"
-							/>
-						</template>
-					</tera-notebook-jupyter-input>
-				</Suspense>
-			</div>
+			<Suspense>
+				<tera-notebook-jupyter-input
+					:kernel-manager="kernelManager"
+					:default-options="sampleAgentQuestions"
+					:context-language="contextLanguage"
+					@llm-output="(data: any) => appendCode(data, 'code')"
+					@llm-thought-output="(data: any) => llmThoughts.push(data)"
+					@question-asked="updateLlmQuery"
+				>
+					<template #toolbar-right-side>
+						<Button label="Reset" outlined severity="secondary" size="small" @click="resetModel" />
+						<Button
+							icon="pi pi-play"
+							:label="isUpdatingModel ? 'Loading...' : 'Run'"
+							size="small"
+							:loading="isUpdatingModel"
+							@click="runCode"
+							:disabled="isEmpty(codeText)"
+						/>
+					</template>
+				</tera-notebook-jupyter-input>
+			</Suspense>
 			<v-ace-editor
 				v-model:value="codeText"
 				@init="initializeAceEditor"
diff --git a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
index 6d078f9848..b0b205a446 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
@@ -16,7 +16,7 @@
 				content-width="420px"
 			>
 				<template #content>
-					<div class="toolbar">
+					<div class="flex align-items-center justify-content-between px-3">
 						<p>{{ blankMessage }}.</p>
 						<span class="flex gap-2">
 							<tera-pyciemss-cancel-button :simulation-run-id="cancelRunIds" />
@@ -104,19 +104,17 @@
 
 		<!-- Notebook -->
 		<tera-drilldown-section :tabName="DrilldownTabs.Notebook" class="notebook-section">
-			<div class="toolbar">
-				<tera-notebook-jupyter-input
-					:kernel-manager="kernelManager"
-					:context-language="'python3'"
-					@llm-output="(data: any) => processLLMOutput(data)"
-					@llm-thought-output="(data: any) => llmThoughts.push(data)"
-					@question-asked="updateLlmQuery"
-				>
-					<template #toolbar-right-side>
-						<Button label="Run" size="small" icon="pi pi-play" @click="runCode" :disabled="isEmpty(codeText)" />
-					</template>
-				</tera-notebook-jupyter-input>
-			</div>
+			<tera-notebook-jupyter-input
+				:kernel-manager="kernelManager"
+				:context-language="'python3'"
+				@llm-output="(data: any) => processLLMOutput(data)"
+				@llm-thought-output="(data: any) => llmThoughts.push(data)"
+				@question-asked="updateLlmQuery"
+			>
+				<template #toolbar-right-side>
+					<Button label="Run" size="small" icon="pi pi-play" @click="runCode" :disabled="isEmpty(codeText)" />
+				</template>
+			</tera-notebook-jupyter-input>
 			<v-ace-editor
 				v-model:value="codeText"
 				@init="initializeAceEditor"
@@ -851,14 +849,6 @@ onUnmounted(() => kernelManager.shutdown());
 </script>
 
 <style scoped>
-.wizard .toolbar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--gap-1) var(--gap-4);
-	gap: var(--gap-2);
-}
-
 /* Make tera-inputs the same height as the dropdowns */
 .tera-input:deep(main) {
 	padding: 6px;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue
index d01d71da75..80c4d8e26a 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue
@@ -37,27 +37,25 @@
 		</div>
 		<div :tabName="StratifyTabs.Notebook">
 			<tera-drilldown-section class="notebook-section">
-				<div class="toolbar">
-					<tera-notebook-jupyter-input
-						:kernel-manager="kernelManager"
-						:default-options="sampleAgentQuestions"
-						:context-language="'python3'"
-						@llm-output="(data: any) => processLLMOutput(data)"
-						@llm-thought-output="(data: any) => llmThoughts.push(data)"
-						@question-asked="updateLlmQuery"
-					>
-						<template #toolbar-right-side>
-							<Button
-								:loading="isStratifyInProgress"
-								:label="isStratifyInProgress ? 'Loading...' : 'Run'"
-								size="small"
-								icon="pi pi-play"
-								@click="runCodeStratify"
-								:disabled="isEmpty(codeText)"
-							/>
-						</template>
-					</tera-notebook-jupyter-input>
-				</div>
+				<tera-notebook-jupyter-input
+					:kernel-manager="kernelManager"
+					:default-options="sampleAgentQuestions"
+					:context-language="'python3'"
+					@llm-output="(data: any) => processLLMOutput(data)"
+					@llm-thought-output="(data: any) => llmThoughts.push(data)"
+					@question-asked="updateLlmQuery"
+				>
+					<template #toolbar-right-side>
+						<Button
+							:loading="isStratifyInProgress"
+							:label="isStratifyInProgress ? 'Loading...' : 'Run'"
+							size="small"
+							icon="pi pi-play"
+							@click="runCodeStratify"
+							:disabled="isEmpty(codeText)"
+						/>
+					</template>
+				</tera-notebook-jupyter-input>
 				<v-ace-editor
 					v-model:value="codeText"
 					@init="initialize"