fix: model edit initialization

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

@@ -36,7 +36,7 @@
 				<template #actions>
 					<slot name="header-actions" />
 					<tera-operator-output-summary
-						v-if="outputSummary"
+						v-if="!isEmpty(outputSummary)"
 						:node="node"
 						@generate-output-summary="
 							(output: WorkflowOutput<any>) => emit('generate-output-summary', output)
@@ -131,6 +131,9 @@ const handleTabChange = (event: TabViewChangeEvent) => {
 	selectedViewIndex.value = event.index;
 };
 
+const selectedTab = computed(() => views.value[selectedViewIndex.value]);
+defineExpose({ selectedTab });
+
 const selectedOutputId = computed(() => {
 	if (props.node.active) {
 		return props.node.active;

packages/client/hmi-client/src/components/model-template/tera-model-template-editor.vue

@@ -508,13 +508,14 @@ onUnmounted(() => {
 <style scoped>
 .template-editor-wrapper {
 	display: flex;
-	flex: 1;
+	height: 100%;
 	overflow: hidden;
 	position: relative;
 }
 
 :deep(.foreground-layer) {
 	pointer-events: none;
+	height: 100%;
 }
 
 .button-container {
@@ -535,7 +536,10 @@ onUnmounted(() => {
 }
 
 .spinner {
-	margin-bottom: 15rem;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
 }
 
 aside {

packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue

@@ -202,7 +202,7 @@ onMounted(() => {
 <style scoped>
 main {
 	width: 100%;
-	height: 100%;
+	min-height: 100%;
 }
 
 main > * {

packages/client/hmi-client/src/components/workflow/ops/model-edit/model-edit-operation.ts

@@ -1,6 +1,5 @@
 import { Operation, WorkflowOperationTypes, BaseState } from '@/types/workflow';
-import { NotebookHistory, createNotebookFromCode } from '@/services/notebook';
-import { getModel } from '@/services/model';
+import { NotebookHistory } from '@/services/notebook';
 
 const DOCUMENTATION_URL =
 	'https://github.com/DARPA-ASKEM/beaker-kernel/blob/main/docs/contexts_mira_model_edit.md';
@@ -27,18 +26,5 @@ export const ModelEditOperation: Operation = {
 			hasCodeRun: false
 		};
 		return init;
-	},
-	createNotebook: async (state: ModelEditOperationState, value?: any[] | null) => {
-		const modelIdToLoad = value?.[0];
-		const outputModel = await getModel(modelIdToLoad);
-		const { code, llmQuery, llmThoughts } = state.notebookHistory?.[0] ?? {};
-		const notebook = createNotebookFromCode(
-			code ?? '',
-			'python3',
-			{ 'application/json': outputModel },
-			llmQuery,
-			llmThoughts
-		);
-		return notebook;
 	}
 };

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

@@ -1,5 +1,6 @@
 <template>
 	<tera-drilldown
+		ref="drilldownRef"
 		:node="node"
 		:menu-items="menuItems"
 		:output-summary="true"
@@ -10,7 +11,7 @@
 		@generate-output-summary="(output: any) => emit('generate-output-summary', output)"
 		v-bind="$attrs"
 	>
-		<div :tabName="ModelEditTabs.Wizard">
+		<div :tabName="DrilldownTabs.Wizard">
 			<tera-model-template-editor
 				v-if="amr"
 				:model="amr"
@@ -21,7 +22,7 @@
 				@reset="resetModel"
 			/>
 		</div>
-		<div :tabName="ModelEditTabs.Notebook">
+		<div :tabName="DrilldownTabs.Notebook">
 			<tera-drilldown-section class="notebook-section">
 				<div class="toolbar">
 					<Suspense>
@@ -57,28 +58,27 @@
 					:options="{ showPrintMargin: false }"
 				/>
 			</tera-drilldown-section>
-			<div class="preview-container">
-				<tera-drilldown-preview
-					title="Preview"
-					v-model:output="selectedOutputId"
-					@update:selection="onSelection"
-					:options="outputs"
-					is-selectable
-					class="h-full"
-				>
-					<tera-notebook-error
-						v-if="executeResponse.status === OperatorStatus.ERROR"
-						:name="executeResponse.name"
-						:value="executeResponse.value"
-						:traceback="executeResponse.traceback"
-					/>
-					<tera-model-diagram v-else-if="amr" :model="amr" :is-editable="true" />
-					<div v-else>
-						<img src="@assets/svg/plants.svg" alt="" draggable="false" />
-					</div>
-				</tera-drilldown-preview>
-			</div>
 		</div>
+		<template #preview v-if="drilldownRef?.selectedTab === DrilldownTabs.Notebook">
+			<tera-drilldown-preview
+				title="Preview"
+				v-model:output="selectedOutputId"
+				@update:selection="onSelection"
+				:options="outputs"
+				is-selectable
+			>
+				<tera-notebook-error
+					v-if="executeResponse.status === OperatorStatus.ERROR"
+					:name="executeResponse.name"
+					:value="executeResponse.value"
+					:traceback="executeResponse.traceback"
+				/>
+				<tera-model-diagram v-else-if="amr" :model="amr" :is-editable="true" />
+				<div v-else>
+					<img src="@assets/svg/plants.svg" alt="" draggable="false" />
+				</div>
+			</tera-drilldown-preview>
+		</template>
 	</tera-drilldown>
 	<tera-save-asset-modal
 		v-if="amr"
@@ -115,6 +115,7 @@ import { KernelSessionManager } from '@/services/jupyter';
 import { getModelIdFromModelConfigurationId } from '@/services/model-configurations';
 import TeraSaveAssetModal from '@/page/project/components/tera-save-asset-modal.vue';
 import { saveCodeToState } from '@/services/notebook';
+import { DrilldownTabs } from '@/types/common';
 import { ModelEditOperationState } from './model-edit-operation';
 
 const props = defineProps<{
@@ -129,11 +130,6 @@ const emit = defineEmits([
 	'update-output-port'
 ]);
 
-enum ModelEditTabs {
-	Wizard = 'Wizard',
-	Notebook = 'Notebook'
-}
-
 const outputs = computed(() => {
 	if (!isEmpty(props.node.outputs)) {
 		return [
@@ -151,6 +147,7 @@ const isReadyToCreateDefaultOutput = computed(
 		isEmpty(outputs.value) || (outputs.value.length === 1 && !outputs.value?.[0]?.items[0].value)
 );
 
+const drilldownRef = ref();
 const selectedOutputId = ref<string>('');
 const activeOutput = ref<WorkflowOutput<ModelEditOperationState> | null>(null);
 
@@ -378,7 +375,7 @@ const onSelection = (id: string) => {
 
 // Updates output selection
 watch(
-	() => props.node.active,
+	() => [props.node.active],
 	async () => {
 		// Update selected output
 		if (props.node.active) {
@@ -435,18 +432,13 @@ onUnmounted(() => {
 	flex-direction: column;
 }
 
-.notebook-section:deep(main) {
-	gap: var(--gap-small);
-	position: relative;
-}
-
 .notebook-section:deep(main .toolbar) {
 	padding-left: var(--gap-medium);
 }
 
-.preview-container {
-	display: flex;
-	flex-direction: column;
+.notebook-section:deep(main) {
+	gap: var(--gap-small);
+	position: relative;
 }
 
 :deep(.diagram-container) {