From 265ef4ad0322644cc6b55436e403873c11112ca3 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Tue, 15 Oct 2024 09:25:24 -0400
Subject: [PATCH] 5139 diagram does not show up automatically when on create
 output (#5146)

---
 .../model-template/tera-model-template.vue    |   2 +-
 .../model/petrinet/tera-model-description.vue |   5 +-
 .../tera-model-diagram.vue                    | 124 ++++++++----------
 .../src/components/model/tera-model-parts.vue |   1 +
 .../operator/tera-operator-model-preview.vue  |   2 +-
 .../ops/funman/tera-funman-output.vue         |   8 +-
 .../tera-model-comparison.vue                 |   2 +-
 .../tera-model-config-drilldown.vue           |   8 +-
 .../workflow/ops/model/tera-model-node.vue    |   2 +-
 .../ops/stratify-mira/tera-stratify-node.vue  |   2 +-
 .../client/hmi-client/src/services/model.ts   |  13 +-
 .../hmi-client/src/temp/AMRPetriTest.vue      |   1 +
 .../client/hmi-client/src/temp/Clipboard.vue  |   8 +-
 .../client/hmi-client/src/utils/observer.ts   |  17 +++
 14 files changed, 106 insertions(+), 89 deletions(-)
 rename packages/client/hmi-client/src/components/model/petrinet/{model-diagrams => }/tera-model-diagram.vue (86%)
 create mode 100644 packages/client/hmi-client/src/utils/observer.ts

diff --git a/packages/client/hmi-client/src/components/model-template/tera-model-template.vue b/packages/client/hmi-client/src/components/model-template/tera-model-template.vue
index d54acac92b..f03f7ad7e8 100644
--- a/packages/client/hmi-client/src/components/model-template/tera-model-template.vue
+++ b/packages/client/hmi-client/src/components/model-template/tera-model-template.vue
@@ -44,7 +44,7 @@
 import { ref, computed, nextTick } from 'vue';
 import Button from 'primevue/button';
 import Textarea from 'primevue/textarea';
-import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
+import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
 import Menu from 'primevue/menu';
 
 const props = defineProps<{
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-model-description.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-model-description.vue
index b6ace60312..b6a2e1ba28 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-model-description.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-model-description.vue
@@ -6,7 +6,7 @@
 				<Editor v-else v-model="editorContent" />
 			</AccordionTab>
 			<AccordionTab header="Diagram">
-				<tera-model-diagram ref="teraModelDiagramRef" :model="model" :feature-config="featureConfig" />
+				<tera-model-diagram :model="model" :feature-config="featureConfig" />
 			</AccordionTab>
 			<AccordionTab header="Model equations">
 				<tera-model-equation :model="model" :is-editable="false" @model-updated="emit('update-model')" />
@@ -33,7 +33,7 @@ import DataTable from 'primevue/datatable';
 import Editor from 'primevue/editor';
 import { FeatureConfig } from '@/types/common';
 import type { Dataset, Model } from '@/types/Types';
-import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
+import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
 import TeraModelEquation from '@/components/model/petrinet/tera-model-equation.vue';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import { isDataset, isModel, type Asset } from '@/utils/asset';
@@ -46,7 +46,6 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits(['update-model']);
-const teraModelDiagramRef = ref();
 
 const currentActiveIndexes = ref([1, 2, 3]);
 const relatedTerariumArtifacts = ref<Asset[]>([]);
diff --git a/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-model-diagram.vue
similarity index 86%
rename from packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
rename to packages/client/hmi-client/src/components/model/petrinet/tera-model-diagram.vue
index 269adbd391..ff398e4a36 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-model-diagram.vue
@@ -65,26 +65,26 @@
 
 <script setup lang="ts">
 import { isEmpty, isEqual } from 'lodash';
-import { ref, watch, computed, nextTick } from 'vue';
-import Toolbar from 'primevue/toolbar';
+import { ref, watch, computed, nextTick, onMounted, onUnmounted } from 'vue';
 import Button from 'primevue/button';
 import SelectButton from 'primevue/selectbutton';
-import { PetrinetRenderer } from '@/model-representation/petrinet/petrinet-renderer';
-import { getModelType, getMMT } from '@/services/model';
-import type { Model } from '@/types/Types';
+import Toolbar from 'primevue/toolbar';
+import TeraStratifiedMatrixModal from '@/components/model/petrinet/model-configurations/tera-stratified-matrix-modal.vue';
+import TeraStratifiedMatrixPreview from '@/components/model/petrinet/model-configurations/tera-stratified-matrix-preview.vue';
+import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import TeraResizablePanel from '@/components/widgets/tera-resizable-panel.vue';
 import TeraTooltip from '@/components/widgets/tera-tooltip.vue';
-import { NestedPetrinetRenderer } from '@/model-representation/petrinet/nested-petrinet-renderer';
-import { StratifiedMatrix } from '@/types/Model';
-import { AMRSchemaNames } from '@/types/common';
-import { MiraModel, MiraTemplateParams, ObservableSummary } from '@/model-representation/mira/mira-common';
 import { isStratifiedModel, emptyMiraModel, convertToIGraph } from '@/model-representation/mira/mira';
+import { MiraModel, MiraTemplateParams, ObservableSummary } from '@/model-representation/mira/mira-common';
+import { NestedPetrinetRenderer } from '@/model-representation/petrinet/nested-petrinet-renderer';
+import { PetrinetRenderer } from '@/model-representation/petrinet/petrinet-renderer';
 import { getModelRenderer } from '@/model-representation/service';
 import { NodeType } from '@/services/graph';
-import type { FeatureConfig } from '@/types/common';
-import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
-import TeraStratifiedMatrixModal from '../model-configurations/tera-stratified-matrix-modal.vue';
-import TeraStratifiedMatrixPreview from '../model-configurations/tera-stratified-matrix-preview.vue';
+import { getModelType, getMMT } from '@/services/model';
+import { AMRSchemaNames, type FeatureConfig } from '@/types/common';
+import { StratifiedMatrix } from '@/types/Model';
+import type { Model } from '@/types/Types';
+import { observeElementSizeChange } from '@/utils/observer';
 
 const props = defineProps<{
 	model: Model;
@@ -111,7 +111,6 @@ enum StratifiedView {
 
 const stratifiedView = ref(StratifiedView.Collapsed);
 const stratifiedViewOptions = ref([{ value: StratifiedView.Expanded }, { value: StratifiedView.Collapsed }]);
-
 const isStratified = computed(() => isStratifiedModel(mmt.value));
 
 let renderer: PetrinetRenderer | NestedPetrinetRenderer | null = null;
@@ -195,26 +194,37 @@ async function toggleCollapsedView(view: StratifiedView) {
 
 watch(
 	() => [props.model.model, props.model?.semantics, graphElement.value],
-	async (newValue, oldValue) => {
-		if (isEqual(newValue, oldValue)) return;
-		if (modelType.value === AMRSchemaNames.DECAPODES || graphElement.value === null) return;
-		const response: any = await getMMT(props.model);
-		mmt.value = response.mmt;
-		mmtParams.value = response.template_params;
-		observableSummary = response.observable_summary;
-		await renderGraph();
+	(newValue, oldValue) => {
+		if (isEqual(newValue, oldValue) || modelType.value === AMRSchemaNames.DECAPODES || graphElement.value === null)
+			return;
+
+		getMMT(props.model).then((response) => {
+			if (response) {
+				mmt.value = response.mmt;
+				mmtParams.value = response.template_params;
+				observableSummary = response.observable_summary;
+				renderGraph();
+			}
+		});
 	},
 	{ immediate: true, deep: true }
 );
+
+// Create an observer to re-render the graph when it resizes
+let graphResizeObserver: ResizeObserver;
+onMounted(() => {
+	if (graphElement.value) {
+		graphResizeObserver = observeElementSizeChange(graphElement.value, renderGraph);
+	}
+});
+onUnmounted(() => {
+	if (graphResizeObserver) {
+		graphResizeObserver.disconnect();
+	}
+});
 </script>
 
 <style scoped>
-.p-accordion {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
 .diagram-container {
 	border: 1px solid var(--surface-border-light);
 	border-radius: var(--border-radius);
@@ -232,32 +242,32 @@ watch(
 	background-color: var(--surface-secondary);
 	overflow: hidden;
 	border: none;
-	position: relative;
 	pointer-events: none;
+	position: relative;
 }
 
 .p-toolbar {
+	background: transparent;
+	isolation: isolate;
+	padding: var(--gap-2);
+	pointer-events: none;
 	position: absolute;
 	width: 100%;
 	z-index: 1;
-	isolation: isolate;
-	background: transparent;
-	padding: 0.5rem;
-	pointer-events: none;
 }
 
 .p-toolbar:deep(> div > span) {
-	gap: 0.25rem;
+	gap: var(--gap-1);
 	display: flex;
 	pointer-events: all;
 }
 
 /* Let svg dynamically resize when the sidebar opens/closes or page resizes */
 :deep(.graph-element svg) {
-	width: 100%;
-	height: 100%;
 	background: var(--gray-50) !important;
 	border: none !important;
+	height: 100%;
+	width: 100%;
 }
 
 .graph-element {
@@ -290,57 +300,37 @@ watch(
 	font-size: var(--font-caption);
 	background-color: var(--surface-transparent);
 	backdrop-filter: blur(4px);
-	padding: 0 var(--gap-small);
+	padding: 0 var(--gap-2);
 	border-radius: var(--border-radius);
 	pointer-events: none;
 	user-select: none;
 }
 
 ul.legend {
-	background-color: var(--surface-transparent);
 	backdrop-filter: blur(4px);
-	padding: var(--gap-xsmall) var(--gap-small);
+	background-color: var(--surface-transparent);
 	border-radius: var(--border-radius);
-	position: absolute;
 	bottom: 0;
-	left: 0;
 	display: flex;
-	margin: var(--gap-small);
-	margin-bottom: var(--gap);
-	gap: var(--gap);
+	gap: var(--gap-4);
+	left: 0;
+	margin: var(--gap-2);
+	margin-bottom: var(--gap-4);
+	padding: var(--gap-1) var(--gap-2);
 	pointer-events: none;
+	position: absolute;
 
 	& > li {
-		display: flex;
 		align-items: center;
-		gap: var(--gap-xsmall);
+		display: flex;
+		gap: var(--gap-1);
 	}
 }
 
 .legend-circle {
+	border-radius: 50%;
 	display: inline-block;
 	height: 1rem;
 	width: 1rem;
-	border-radius: 50%;
-}
-
-.modal-input-container {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-}
-
-.modal-input {
-	height: 25px;
-	padding-left: 5px;
-	margin: 5px;
-	align-items: baseline;
-}
-
-.modal-input-label {
-	margin-left: 5px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-	align-items: baseline;
 }
 </style>
diff --git a/packages/client/hmi-client/src/components/model/tera-model-parts.vue b/packages/client/hmi-client/src/components/model/tera-model-parts.vue
index 5e168c71e1..6bafd1ca36 100644
--- a/packages/client/hmi-client/src/components/model/tera-model-parts.vue
+++ b/packages/client/hmi-client/src/components/model/tera-model-parts.vue
@@ -91,6 +91,7 @@ function onUpdate(property: string, event: any) {
 
 function updateMMT() {
 	getMMT(props.model).then((response) => {
+		if (!response) return;
 		mmt.value = response.mmt;
 		mmtParams.value = response.template_params;
 	});
diff --git a/packages/client/hmi-client/src/components/operator/tera-operator-model-preview.vue b/packages/client/hmi-client/src/components/operator/tera-operator-model-preview.vue
index 946f704bfd..9a20fcffdd 100644
--- a/packages/client/hmi-client/src/components/operator/tera-operator-model-preview.vue
+++ b/packages/client/hmi-client/src/components/operator/tera-operator-model-preview.vue
@@ -7,7 +7,7 @@
 </template>
 <script setup lang="ts">
 import TeraModelEquation from '@/components/model/petrinet/tera-model-equation.vue';
-import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
+import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
 import SelectButton from 'primevue/selectbutton';
 import { ref } from 'vue';
 import { Model } from '@/types/Types';
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-output.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-output.vue
index 172a8d55cb..6921e93578 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-output.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-output.vue
@@ -76,7 +76,7 @@ import Dropdown from 'primevue/dropdown';
 import Button from 'primevue/button';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
-import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue'; // TODO: Once we save the output model properly in the backend we can use this.
+import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue'; // TODO: Once we save the output model properly in the backend we can use this.
 import { logger } from '@/utils/logger';
 import type { Model, ModelConfiguration, Observable } from '@/types/Types';
 import { getModelByModelConfigurationId, getMMT } from '@/services/model';
@@ -139,8 +139,10 @@ const initalize = async () => {
 			return;
 		}
 		const response = await getMMT(model.value);
-		mmt = response.mmt;
-		mmtParams.value = response.template_params;
+		if (response) {
+			mmt = response.mmt;
+			mmtParams.value = response.template_params;
+		}
 	}
 
 	configuredMmt.value = makeConfiguredMMT(mmt, funmanResult.modelConfiguration);
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
index 663e58253f..5ffa0731f0 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
@@ -144,7 +144,7 @@ import AccordionTab from 'primevue/accordiontab';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue';
-import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
+import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
 import { compareModels } from '@/services/goLLM';
 import { KernelSessionManager } from '@/services/jupyter';
 import { getModel } from '@/services/model';
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 536def7d58..5497361bf5 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
@@ -208,7 +208,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 TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
+import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
 import TeraObservables from '@/components/model/model-parts/tera-observables.vue';
 import TeraInitialTable from '@/components/model/petrinet/tera-initial-table.vue';
 import TeraParameterTable from '@/components/model/petrinet/tera-parameter-table.vue';
@@ -559,8 +559,10 @@ const initialize = async (overwriteWithState: boolean = false) => {
 	model.value = await getModel(modelId);
 	if (model.value) {
 		const response = await getMMT(model.value);
-		mmt.value = response.mmt;
-		mmtParams.value = response.template_params;
+		if (response) {
+			mmt.value = response.mmt;
+			mmtParams.value = response.template_params;
+		}
 	}
 
 	if (!state.transientModelConfig.id) {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model/tera-model-node.vue b/packages/client/hmi-client/src/components/workflow/ops/model/tera-model-node.vue
index 06219dc9c6..6d0e1bcada 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model/tera-model-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model/tera-model-node.vue
@@ -42,7 +42,7 @@ import SelectButton from 'primevue/selectbutton';
 import Button from 'primevue/button';
 import { AssetType } from '@/types/Types';
 import type { Model, ProjectAsset } from '@/types/Types';
-import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
+import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
 import TeraModelEquation from '@/components/model/petrinet/tera-model-equation.vue';
 import { WorkflowNode } from '@/types/workflow';
 import TeraOperatorTitle from '@/components/operator/tera-operator-title.vue';
diff --git a/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-node.vue b/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-node.vue
index bcabc92ae7..fc033340d5 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-node.vue
@@ -12,7 +12,7 @@
 import { ref, watch } from 'vue';
 import { WorkflowNode } from '@/types/workflow';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
-import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
+import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
 import Button from 'primevue/button';
 import { getModel } from '@/services/model';
 import { Model } from '@/types/Types';
diff --git a/packages/client/hmi-client/src/services/model.ts b/packages/client/hmi-client/src/services/model.ts
index 5fd3d17301..6a94a38cba 100644
--- a/packages/client/hmi-client/src/services/model.ts
+++ b/packages/client/hmi-client/src/services/model.ts
@@ -73,13 +73,14 @@ export async function getBulkModels(modelIDs: string[]) {
 }
 
 // Note: will not work with decapodes
-export async function getMMT(model: Model) {
+export async function getMMT(model: Model): Promise<MMT | null> {
 	const response = await API.post('/mira/amr-to-mmt', model);
-
-	const miraModel = response?.data?.response;
-	if (!miraModel) throw new Error(`Failed to convert model ${model.id}`);
-
-	return (response?.data?.response as MMT) ?? null;
+	const mmt = response?.data?.response;
+	if (!mmt) {
+		console.error(`Failed to convert model ${model.id}`);
+		return null;
+	}
+	return mmt as MMT;
 }
 
 export async function updateModel(model: Model) {
diff --git a/packages/client/hmi-client/src/temp/AMRPetriTest.vue b/packages/client/hmi-client/src/temp/AMRPetriTest.vue
index 88f889d679..ae10278f80 100644
--- a/packages/client/hmi-client/src/temp/AMRPetriTest.vue
+++ b/packages/client/hmi-client/src/temp/AMRPetriTest.vue
@@ -46,6 +46,7 @@ onMounted(async () => {
 			errors.value = checkPetrinetAMR(jsonData);
 
 			const mmtR = await getMMT(jsonData);
+			if (!mmtR) return;
 			const mmt = mmtR.mmt;
 			const observable_summary = mmtR.observable_summary;
 
diff --git a/packages/client/hmi-client/src/temp/Clipboard.vue b/packages/client/hmi-client/src/temp/Clipboard.vue
index e1cf99fad2..c4fd798005 100644
--- a/packages/client/hmi-client/src/temp/Clipboard.vue
+++ b/packages/client/hmi-client/src/temp/Clipboard.vue
@@ -83,6 +83,7 @@ const csvStringProcessor = async (item: DataTransferItem) => {
 
 		// Update
 		const response = await getMMT(model.value as Model);
+		if (!response) return;
 		mmt.value = response.mmt;
 		mmtParams.value = response.template_params;
 	});
@@ -91,6 +92,7 @@ const csvStringProcessor = async (item: DataTransferItem) => {
 const buttonClick = async () => {
 	updateByMatrixCSV(model.value as Model, 'subjectControllers', clipboardText.value);
 	const response = await getMMT(model.value as Model);
+	if (!response) return;
 	mmt.value = response.mmt;
 	mmtParams.value = response.template_params;
 };
@@ -105,8 +107,10 @@ const processPasteEvent = async (event: ClipboardEvent) => {
 onMounted(async () => {
 	model.value = sirJSON as Model;
 	const response = await getMMT(model.value);
-	mmt.value = response.mmt;
-	mmtParams.value = response.template_params;
+	if (response) {
+		mmt.value = response.mmt;
+		mmtParams.value = response.template_params;
+	}
 	ready.value = true;
 
 	document.addEventListener('paste', processPasteEvent);
diff --git a/packages/client/hmi-client/src/utils/observer.ts b/packages/client/hmi-client/src/utils/observer.ts
new file mode 100644
index 0000000000..a5fe3876c1
--- /dev/null
+++ b/packages/client/hmi-client/src/utils/observer.ts
@@ -0,0 +1,17 @@
+/**
+ * Observe the size change of an element and allow to add a callback
+ *
+ * @param element
+ * @param callback
+ * @returns ResizeObserver
+ */
+export function observeElementSizeChange(element: HTMLElement, callback: any) {
+	// Create a ResizeObserver instance
+	const resizeObserver = new ResizeObserver((entries) => {
+		entries.forEach(callback);
+	});
+
+	// Start observing the target element
+	resizeObserver.observe(element);
+	return resizeObserver;
+}