Adding Output Console to drilldowns with notebooks (#5087)

packages/client/hmi-client/src/components/drilldown/tera-notebook-output.vue

@@ -0,0 +1,55 @@
+<template>
+ <tera-resizable-panel v-if="!isHidden" :start-height="100" :resize-from-top="true" class="container">
+ <h6>
+ <span>{{ name }}</span>
+ <Button rounded text icon="pi pi-times" @click="isHidden = true" />
+ </h6>
+ <code class="code-section">{{ props.traceback }}</code>
+ </tera-resizable-panel>
+ <div v-if="isHidden" class="container">
+ <h6>
+ <span>{{ name }}</span>
+ <Button rounded text icon="pi pi-angle-double-up" @click="isHidden = false" />
+ </h6>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Button from 'primevue/button';
+import TeraResizablePanel from '@/components/widgets/tera-resizable-panel.vue';
+
+const props = defineProps<{
+ name?: string;
+ traceback?: string;
+}>();
+
+const name = props.name ?? 'Output Console';
+const isHidden = ref<boolean>(false);
+</script>
+
+<style scoped>
+.container {
+ background-color: var(--surface-100);
+ padding: var(--gap-small);
+ border-radius: var(--border-radius);
+ border: 1px solid var(--surface-border-light);
+ /* Shadow/medium */
+ box-shadow:
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06),
+ 0 4px 6px -1px rgba(0, 0, 0, 0.08);
+}
+
+.code-section {
+ white-space: pre-wrap;
+}
+
+h6 {
+ display: flex;
+ justify-content: space-between;
+}
+
+.hide {
+ display: none;
+}
+</style>

packages/client/hmi-client/src/components/widgets/tera-resizable-panel.vue

@@ -3,7 +3,8 @@
  <main class="content">
  <slot />
  </main>
- <div class="resize-handle" @mousedown="startResize"></div>
+ <div v-if="resizeFromTop === true" class="resize-handle-top" @mousedown="startResize"></div>
+ <div v-else class="resize-handle-bottom" @mousedown="startResize"></div>
  </section>
 </template>
 
@@ -19,7 +20,11 @@ const containerHeight = ref(320);
 const draggedY = ref(0);
 
 const resize = (event: MouseEvent) => {
- containerHeight.value += event.clientY - draggedY.value;
+ if (props?.resizeFromTop) {
+ containerHeight.value += -event.clientY + draggedY.value;
+ } else {
+ containerHeight.value += event.clientY - draggedY.value;
+ }
  draggedY.value = event.clientY;
 };
 
@@ -35,6 +40,7 @@ const startResize = (event: MouseEvent) => {
 };
 const props = defineProps<{
  startHeight?: number;
+ resizeFromTop?: boolean;
 }>();
 
 onMounted(() => {
@@ -71,7 +77,7 @@ main {
  height: 100%;
 }
 
-.resize-handle {
+.resize-handle-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
@@ -84,6 +90,19 @@ main {
  mix-blend-mode: darken;
 }
 
+.resize-handle-top {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 6px;
+ cursor: ns-resize;
+ background: var(--surface-border-light);
+ z-index: 1;
+ border-radius: 0 0 var(--border-radius-big) var(--border-radius-big);
+ mix-blend-mode: darken;
+}
+
 .resize-handle:hover {
  background: var(--primary-color-light);
 }

packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue

@@ -41,6 +41,7 @@
  class="ace-editor"
  :options="{ showPrintMargin: false }"
  />
+ <tera-notebook-output :traceback="executeResponseTraceback" />
  </tera-drilldown-section>
  <template #preview v-if="drilldownRef?.selectedTab === DrilldownTabs.Notebook">
  <tera-drilldown-preview
@@ -51,10 +52,10 @@
  is-selectable
  >
  <tera-notebook-error
- v-if="executeResponse.status === OperatorStatus.ERROR"
- :name="executeResponse.name"
- :value="executeResponse.value"
- :traceback="executeResponse.traceback"
+ v-if="executeErrorResponse.status === OperatorStatus.ERROR"
+ :name="executeErrorResponse.name"
+ :value="executeErrorResponse.value"
+ :traceback="executeErrorResponse.traceback"
  />
  <tera-model v-else-if="amr" is-workflow is-save-for-reuse :assetId="amr.id" @on-save="updateNode" />
  <tera-progress-spinner v-else-if="isUpdatingModel || !amr" is-centered :font-size="2">
@@ -88,6 +89,7 @@ import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraModel from '@/components/model/tera-model.vue';
 import TeraNotebookError from '@/components/drilldown/tera-notebook-error.vue';
+import TeraNotebookOutput from '@/components/drilldown/tera-notebook-output.vue';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import { nodeOutputLabel } from '@/components/workflow/util';
@@ -147,13 +149,15 @@ const llmThoughts = ref<any[]>([]);
 
 const isDraft = ref(false);
 
-const executeResponse = ref({
+const executeErrorResponse = ref({
  status: OperatorStatus.DEFAULT,
  name: '',
  value: '',
  traceback: ''
 });
 
+const executeResponseTraceback = ref('');
+
 const updateLlmQuery = (query: string) => {
  llmThoughts.value = [];
  llmQuery.value = query;
@@ -205,7 +209,9 @@ const runCode = () => {
  executedCode = data.content.code;
  })
  .register('stream', (data) => {
- console.log('stream', data);
+ if (data?.content?.name === 'stderr' || data?.content?.name === 'stdout') {
+ executeResponseTraceback.value = `${executeResponseTraceback.value} ${data.content.text}`;
+ }
  })
  .register('model_preview', (data) => {
  if (!data.content) return;
@@ -219,7 +225,7 @@ const runCode = () => {
  let status = OperatorStatus.DEFAULT;
  if (data.msg.content.status === 'ok') status = OperatorStatus.SUCCESS;
  if (data.msg.content.status === 'error') status = OperatorStatus.ERROR;
- executeResponse.value = {
+ executeErrorResponse.value = {
  status,
  name: data.msg.content.ename ? data.msg.content.ename : '',
  value: data.msg.content.evalue ? data.msg.content.evalue : '',