5139 diagram does not show up automatically when on create output (#5146

)

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<{

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[]>([]);

packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue → 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>

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;
  });

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';

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);

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';

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) {

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';

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';

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) {

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;
 

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);