Notebook output scrollable (#6490)

Co-authored-by: Yohann Paris <[email protected]>
DARPA-ASKEM · Feb 18, 2025 · 1d3368c · 1d3368c
1 parent 8944cc0
commit 1d3368c
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 5 deletions.
diff --git a/packages/client/hmi-client/src/components/drilldown/tera-notebook-output.vue b/packages/client/hmi-client/src/components/drilldown/tera-notebook-output.vue
@@ -2,9 +2,12 @@
 	<tera-resizable-panel v-if="!isHidden" :start-height="100" :resize-from-top="true" class="container output-panel">
 		<h6 class="pt-1">
 			<span>{{ name }}</span>
-			<Button rounded text icon="pi pi-times" @click="isHidden = true" />
+			<span>
+				<Button rounded text label="Clear" @click="clearConsole" />
+				<Button rounded text icon="pi pi-times" @click="isHidden = true" />
+			</span>
 		</h6>
-		<code class="code-section">{{ props.traceback }}</code>
+		<code class="code-section">{{ localTraceback }}</code>
 	</tera-resizable-panel>
 	<div v-if="isHidden" class="container output-panel-closed">
 		<h6>
@@ -15,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { watch, ref } from 'vue';
 import Button from 'primevue/button';
 import TeraResizablePanel from '@/components/widgets/tera-resizable-panel.vue';
 
@@ -26,6 +29,18 @@ const props = defineProps<{
 
 const name = props.name ?? 'Output console';
 const isHidden = ref<boolean>(false);
+const localTraceback = ref<string>(props.traceback ?? '');
+
+function clearConsole() {
+	localTraceback.value = '';
+}
+
+watch(
+	() => props.traceback,
+	() => {
+		localTraceback.value = props.traceback ?? '';
+	}
+);
 </script>
 
 <style scoped>
@@ -41,6 +56,7 @@ const isHidden = ref<boolean>(false);
 }
 
 .output-panel {
+	overflow-y: auto;
 	background: var(--surface-50);
 }
 .output-panel-closed {

diff --git a/...i-client/src/components/workflow/ops/model-comparison/tera-model-comparison-drilldown.vue b/...i-client/src/components/workflow/ops/model-comparison/tera-model-comparison-drilldown.vue
@@ -144,6 +144,7 @@
 					class="ace-editor"
 					:options="{ showPrintMargin: false }"
 				/>
+				<tera-notebook-output :traceback="executeResponseTraceback" />
 			</tera-drilldown-section>
 			<tera-drilldown-preview :is-loading="isLoadingStructuralComparisons && isEmpty(structuralComparisons)">
 				<ul>
@@ -200,6 +201,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
+import teraNotebookOutput from '@/components/drilldown/tera-notebook-output.vue';
 import Image from 'primevue/image';
 import { saveCodeToState } from '@/services/notebook';
 import { addImage, deleteImages, getImages } from '@/services/image';
@@ -249,6 +251,7 @@ const overview = ref<string | null>(null);
 const structuralComparisons = ref<string[]>([]);
 const code = ref(props.node.state.notebookHistory?.[0]?.code ?? '');
 const llmThoughts = ref<any[]>([]);
+const executeResponseTraceback = ref('');
 const isKernelReady = ref(false);
 const contextLanguage = ref<string>('python3');
 const comparisonPairs = ref(props.node.state.comparisonPairs);
@@ -346,6 +349,11 @@ function runCode() {
 		.register('error', (data) => {
 			logger.error(`${data.content.ename}: ${data.content.evalue}`);
 			isLoadingStructuralComparisons.value = false;
+		})
+		.register('stream', (data) => {
+			if ((data?.content?.name === 'stderr' || data?.content?.name === 'stdout') && data.content.text) {
+				executeResponseTraceback.value = `${executeResponseTraceback.value} ${data.content.text}`;
+			}
 		});
 }
 

diff --git a/...lient/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue b/...lient/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
@@ -187,6 +187,7 @@
 					style="flex-grow: 1; width: 100%"
 					class="ace-editor"
 				/>
+				<tera-notebook-output :traceback="executeResponseTraceback" />
 			</tera-drilldown-section>
 			<tera-drilldown-preview title="Output Preview">
 				<tera-notebook-error
@@ -230,6 +231,7 @@ import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraNotebookError from '@/components/drilldown/tera-notebook-error.vue';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
+import teraNotebookOutput from '@/components/drilldown/tera-notebook-output.vue';
 import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
 import TeraInitialTable from '@/components/model/petrinet/tera-initial-table.vue';
 import TeraParameterTable from '@/components/model/petrinet/tera-parameter-table.vue';
@@ -352,6 +354,7 @@ const buildJupyterContext = () => {
 const codeText = ref('# This environment contains the variable "model_config" to be read and updated');
 const llmQuery = ref('');
 const llmThoughts = ref<any[]>([]);
+const executeResponseTraceback = ref('');
 const notebookResponse = ref();
 const executeResponse = ref({
 	status: OperatorStatus.DEFAULT,
@@ -405,6 +408,9 @@ const runFromCode = () => {
 		})
 		.register('stream', (data) => {
 			notebookResponse.value = data.content.text;
+			if ((data?.content?.name === 'stderr' || data?.content?.name === 'stdout') && data.content.text) {
+				executeResponseTraceback.value = `${executeResponseTraceback.value} ${data.content.text}`;
+			}
 		})
 		.register('model_configuration_preview', (data) => {
 			if (!data.content) return;

diff --git a/...es/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue b/...es/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue
@@ -216,7 +216,7 @@ const runCode = () => {
 				executedCode = data.content.code;
 			})
 			.register('stream', (data) => {
-				if (data?.content?.name === 'stderr' || data?.content?.name === 'stdout') {
+				if ((data?.content?.name === 'stderr' || data?.content?.name === 'stdout') && data.content.text) {
 					executeResponseTraceback.value = `${executeResponseTraceback.value} ${data.content.text}`;
 				}
 			})

diff --git a/...s/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue b/...s/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue
@@ -64,6 +64,7 @@
 					class="ace-editor"
 					:options="{ showPrintMargin: false }"
 				/>
+				<tera-notebook-output :traceback="executeResponseTraceback" />
 			</tera-drilldown-section>
 		</div>
 		<template #preview>
@@ -148,6 +149,7 @@ let editor: VAceEditorInstance['_editor'] | null;
 const codeText = ref('');
 const llmQuery = ref('');
 const llmThoughts = ref<any[]>([]);
+const executeResponseTraceback = ref('');
 
 const sampleAgentQuestions = [
 	'Stratify my model by the ages young and old',
@@ -373,7 +375,9 @@ const runCodeStratify = () => {
 				executedCode = data.content.code;
 			})
 			.register('stream', (data) => {
-				console.log('stream', data);
+				if ((data?.content?.name === 'stderr' || data?.content?.name === 'stdout') && data.content.text) {
+					executeResponseTraceback.value = `${executeResponseTraceback.value} ${data.content.text}`;
+				}
 			})
 			.register('model_preview', (data) => {
 				// TODO: https://github.com/DARPA-ASKEM/terarium/issues/2305