From b0c057a4e93496354e2d73f4b805ca9d96343242 Mon Sep 17 00:00:00 2001
From: Al-Jami Ismail <aljami1379@gmail.com>
Date: Fri, 11 Aug 2023 14:26:14 -0400
Subject: [PATCH] feat: update nested petrinet renderer (#1685)

Co-authored-by: mwdchang <mwdchang@gmail.com>
---
 .../components/models/tera-model-diagram.vue  | 40 ++-------
 .../tera-stratify-output-model-diagram.vue    | 33 ++-----
 .../models/tera-typed-model-diagram.vue       | 48 ++--------
 .../petrinet/catlab-petri.ts                  |  4 +-
 .../petrinet/nested-petrinet-renderer.ts      | 87 ++++++++++++++-----
 .../petrinet/petri-util.ts                    | 87 +++++++++++++++++++
 .../hmi-client/src/temp/AMRPetriTest.vue      | 51 ++---------
 7 files changed, 175 insertions(+), 175 deletions(-)
 create mode 100644 packages/client/hmi-client/src/model-representation/petrinet/petri-util.ts

diff --git a/packages/client/hmi-client/src/components/models/tera-model-diagram.vue b/packages/client/hmi-client/src/components/models/tera-model-diagram.vue
index 1d841ed996..5f5255c239 100644
--- a/packages/client/hmi-client/src/components/models/tera-model-diagram.vue
+++ b/packages/client/hmi-client/src/components/models/tera-model-diagram.vue
@@ -201,21 +201,17 @@
 <script setup lang="ts">
 import { IGraph } from '@graph-scaffolder/index';
 import { watch, ref, computed, onMounted, onUnmounted, onUpdated } from 'vue';
-import { runDagreLayout } from '@/services/graph';
 import {
 	PetrinetRenderer,
 	NodeData,
 	EdgeData,
 	NodeType
 } from '@/model-representation/petrinet/petrinet-renderer';
-import { NestedPetrinetRenderer } from '@/model-representation/petrinet/nested-petrinet-renderer';
-import { extractNestedMap } from '@/model-representation/petrinet/catlab-petri';
 
 import { petriToLatex } from '@/petrinet/petrinet-service';
 import {
 	getStratificationType,
 	convertAMRToACSet,
-	convertToIGraph,
 	updateExistingModelContent
 } from '@/model-representation/petrinet/petrinet-service';
 import { latexToAMR } from '@/services/models/extractions';
@@ -230,6 +226,7 @@ import Toolbar from 'primevue/toolbar';
 import { Model, Observable } from '@/types/Types';
 import TeraModal from '@/components/widgets/tera-modal.vue';
 import InputText from 'primevue/inputtext';
+import { getGraphData, getPetrinetRenderer } from '@/model-representation/petrinet/petri-util';
 import TeraResizablePanel from '../widgets/tera-resizable-panel.vue';
 import TeraModelTypeLegend from './tera-model-type-legend.vue';
 
@@ -467,7 +464,7 @@ const isCollapsed = ref(true);
 async function toggleCollapsedView() {
 	isCollapsed.value = !isCollapsed.value;
 	if (props.model) {
-		const graphData: IGraph<NodeData, EdgeData> = convertToIGraphHelper(props.model);
+		const graphData: IGraph<NodeData, EdgeData> = getGraphData(props.model, isCollapsed.value);
 		// Render graph
 		if (renderer) {
 			renderer.isGraphDirty = true;
@@ -477,41 +474,16 @@ async function toggleCollapsedView() {
 	}
 }
 
-const convertToIGraphHelper = (amr: Model) => {
-	if (getStratificationType(amr) && isCollapsed.value) {
-		// FIXME: wont' work for MIRA
-		return convertToIGraph(props.model?.semantics?.span?.[0].system);
-	}
-	return convertToIGraph(amr);
-};
-
 // Render graph whenever a new model is fetched or whenever the HTML element
 //	that we render the graph to changes.
 watch(
 	[() => props.model, graphElement],
 	async () => {
 		if (props.model === null || graphElement.value === null) return;
-		const graphData: IGraph<NodeData, EdgeData> = convertToIGraphHelper(props.model);
+		const graphData: IGraph<NodeData, EdgeData> = getGraphData(props.model, isCollapsed.value);
 
 		// Create renderer
-		if (getStratificationType(props.model)) {
-			renderer = new NestedPetrinetRenderer({
-				el: graphElement.value as HTMLDivElement,
-				useAStarRouting: false,
-				useStableZoomPan: true,
-				runLayout: runDagreLayout,
-				dragSelector: 'no-drag',
-				nestedMap: extractNestedMap(props.model)
-			});
-		} else {
-			renderer = new PetrinetRenderer({
-				el: graphElement.value as HTMLDivElement,
-				useAStarRouting: false,
-				useStableZoomPan: true,
-				runLayout: runDagreLayout,
-				dragSelector: 'no-drag'
-			});
-		}
+		renderer = getPetrinetRenderer(props.model, graphElement.value as HTMLDivElement);
 
 		renderer.on('node-dbl-click', (_eventName, _event, selection, thisRenderer) => {
 			if (isEditing.value === true) {
@@ -566,7 +538,7 @@ watch(
 
 const updatePetriNet = async (model: Model) => {
 	// Convert PetriNet into a graph
-	const graphData = convertToIGraphHelper(model);
+	const graphData = getGraphData(model, isCollapsed.value);
 
 	if (renderer) {
 		await renderer.setData(graphData);
@@ -612,7 +584,7 @@ const cancelEdit = async () => {
 	if (!props.model) return;
 
 	// Convert petri net into a graph with raw input data
-	const graphData: IGraph<NodeData, EdgeData> = convertToIGraphHelper(props.model);
+	const graphData: IGraph<NodeData, EdgeData> = getGraphData(props.model, isCollapsed.value);
 
 	if (renderer) {
 		renderer.setEditMode(false);
diff --git a/packages/client/hmi-client/src/components/models/tera-stratify-output-model-diagram.vue b/packages/client/hmi-client/src/components/models/tera-stratify-output-model-diagram.vue
index d8232e0852..dc912ff51b 100644
--- a/packages/client/hmi-client/src/components/models/tera-stratify-output-model-diagram.vue
+++ b/packages/client/hmi-client/src/components/models/tera-stratify-output-model-diagram.vue
@@ -37,18 +37,16 @@
 <script setup lang="ts">
 import { IGraph } from '@graph-scaffolder/index';
 import { ref, computed, onMounted } from 'vue';
-import { runDagreLayout } from '@/services/graph';
 import {
 	NodeData,
 	EdgeData,
 	PetrinetRenderer
 } from '@/model-representation/petrinet/petrinet-renderer';
-import { NestedPetrinetRenderer } from '@/model-representation/petrinet/nested-petrinet-renderer';
-import { convertToIGraph } from '@/model-representation/petrinet/petrinet-service';
 import { Model } from '@/types/Types';
 import { useNodeTypeColorPalette } from '@/utils/petrinet-color-palette';
 import Button from 'primevue/button';
 import Toolbar from 'primevue/toolbar';
+import { getGraphData, getPetrinetRenderer } from '@/model-representation/petrinet/petri-util';
 import TeraResizablePanel from '../widgets/tera-resizable-panel.vue';
 
 const props = defineProps<{
@@ -82,9 +80,7 @@ function getLegendKeyStyle(id: string) {
 }
 async function toggleCollapsedView() {
 	isCollapsed.value = !isCollapsed.value;
-	const graphData: IGraph<NodeData, EdgeData> = convertToIGraph(
-		isCollapsed.value ? props.model.semantics?.span?.[0].system : props.model
-	);
+	const graphData: IGraph<NodeData, EdgeData> = getGraphData(props.model, isCollapsed.value);
 	// Render graph
 	if (renderer) {
 		renderer.isGraphDirty = true;
@@ -97,30 +93,11 @@ async function toggleCollapsedView() {
 //	that we render the graph to changes.
 onMounted(async () => {
 	if (props.model === null || graphElement.value === null) return;
-	const graphData: IGraph<NodeData, EdgeData> = convertToIGraph(
-		isCollapsed.value ? props.model.semantics?.span?.[0].system : props.model
-	);
-
-	const nestedMap = props.model.semantics?.span?.[0].map.reduce(
-		(childMap, [stratNode, baseNode]) => {
-			if (!childMap[baseNode]) {
-				childMap[baseNode] = [];
-			}
-			childMap[baseNode].push(stratNode);
-			return childMap;
-		},
-		{}
-	);
+	const graphData: IGraph<NodeData, EdgeData> = getGraphData(props.model, isCollapsed.value);
+
 	// Create renderer
 	if (!renderer) {
-		renderer = new NestedPetrinetRenderer({
-			el: graphElement.value as HTMLDivElement,
-			useAStarRouting: false,
-			useStableZoomPan: true,
-			runLayout: runDagreLayout,
-			dragSelector: 'no-drag',
-			nestedMap
-		});
+		renderer = getPetrinetRenderer(props.model, graphElement.value as HTMLDivElement);
 	} else {
 		renderer.isGraphDirty = true;
 	}
diff --git a/packages/client/hmi-client/src/components/models/tera-typed-model-diagram.vue b/packages/client/hmi-client/src/components/models/tera-typed-model-diagram.vue
index 415c78a91f..fdf85928de 100644
--- a/packages/client/hmi-client/src/components/models/tera-typed-model-diagram.vue
+++ b/packages/client/hmi-client/src/components/models/tera-typed-model-diagram.vue
@@ -92,17 +92,12 @@
 <script setup lang="ts">
 import { IGraph } from '@graph-scaffolder/index';
 import { watch, ref, computed } from 'vue';
-import { runDagreLayout } from '@/services/graph';
 import {
 	PetrinetRenderer,
 	NodeData,
 	EdgeData
 } from '@/model-representation/petrinet/petrinet-renderer';
-import {
-	convertToIGraph,
-	addTyping,
-	getStratificationType
-} from '@/model-representation/petrinet/petrinet-service';
+import { addTyping, getStratificationType } from '@/model-representation/petrinet/petrinet-service';
 import Button from 'primevue/button';
 import { Model, State, Transition, TypeSystem, TypingSemantics } from '@/types/Types';
 import { useNodeTypeColorPalette } from '@/utils/petrinet-color-palette';
@@ -113,8 +108,8 @@ import {
 	generateTypeTransition,
 	generateTypeState
 } from '@/services/models/stratification-service';
-import { NestedPetrinetRenderer } from '@/model-representation/petrinet/nested-petrinet-renderer';
 import Toolbar from 'primevue/toolbar';
+import { getGraphData, getPetrinetRenderer } from '@/model-representation/petrinet/petri-util';
 import TeraResizablePanel from '../widgets/tera-resizable-panel.vue';
 import TeraReflexivesToolbar from './tera-reflexives-toolbar.vue';
 import TeraModelTypeLegend from './tera-model-type-legend.vue';
@@ -214,9 +209,7 @@ function setNodeColors() {
 const isCollapsed = ref(true);
 async function toggleCollapsedView() {
 	isCollapsed.value = !isCollapsed.value;
-	const graphData: IGraph<NodeData, EdgeData> = convertToIGraph(
-		isCollapsed.value ? props.model.semantics?.span?.[0].system : typedModel.value
-	);
+	const graphData: IGraph<NodeData, EdgeData> = getGraphData(props.model, isCollapsed.value);
 	// Render graph
 	if (renderer) {
 		renderer.isGraphDirty = true;
@@ -418,42 +411,11 @@ watch(
 	[() => typedModel, graphElement],
 	async () => {
 		if (typedModel.value === null || graphElement.value === null) return;
-		const graphData: IGraph<NodeData, EdgeData> = convertToIGraph(
-			isCollapsed.value && getStratificationType(props.model)
-				? props.model.semantics?.span?.[0].system
-				: typedModel.value
-		);
-		const nestedMap = props.model.semantics?.span?.[0].map.reduce(
-			(childMap, [stratNode, baseNode]) => {
-				if (!childMap[baseNode]) {
-					childMap[baseNode] = [];
-				}
-				childMap[baseNode].push(stratNode);
-				return childMap;
-			},
-			{}
-		);
+		const graphData: IGraph<NodeData, EdgeData> = getGraphData(props.model, isCollapsed.value);
 
 		// Create renderer
 		if (!renderer) {
-			if (getStratificationType(props.model)) {
-				renderer = new NestedPetrinetRenderer({
-					el: graphElement.value as HTMLDivElement,
-					useAStarRouting: false,
-					useStableZoomPan: true,
-					runLayout: runDagreLayout,
-					dragSelector: 'no-drag',
-					nestedMap
-				});
-			} else {
-				renderer = new PetrinetRenderer({
-					el: graphElement.value as HTMLDivElement,
-					useAStarRouting: false,
-					useStableZoomPan: true,
-					runLayout: runDagreLayout,
-					dragSelector: 'no-drag'
-				});
-			}
+			renderer = getPetrinetRenderer(props.model, graphElement.value as HTMLDivElement);
 		} else {
 			if (!stratificationType.value && renderer instanceof NestedPetrinetRenderer) {
 				renderer = new PetrinetRenderer({
diff --git a/packages/client/hmi-client/src/model-representation/petrinet/catlab-petri.ts b/packages/client/hmi-client/src/model-representation/petrinet/catlab-petri.ts
index 8456ae80ce..e8e0d77577 100644
--- a/packages/client/hmi-client/src/model-representation/petrinet/catlab-petri.ts
+++ b/packages/client/hmi-client/src/model-representation/petrinet/catlab-petri.ts
@@ -105,9 +105,9 @@ export const getCatlabTransitionsMatrixData = (amr: Model) => {
 export const extractNestedMap = (amr: Model) => {
 	const nestedMap = amr.semantics?.span?.[0].map.reduce((childMap: any, [stratNode, baseNode]) => {
 		if (!childMap[baseNode]) {
-			childMap[baseNode] = [];
+			childMap[baseNode] = {};
 		}
-		childMap[baseNode].push(stratNode);
+		childMap[baseNode][stratNode] = {};
 		return childMap;
 	}, {});
 	return nestedMap;
diff --git a/packages/client/hmi-client/src/model-representation/petrinet/nested-petrinet-renderer.ts b/packages/client/hmi-client/src/model-representation/petrinet/nested-petrinet-renderer.ts
index 4d5cc0cb7f..5c14e53e42 100644
--- a/packages/client/hmi-client/src/model-representation/petrinet/nested-petrinet-renderer.ts
+++ b/packages/client/hmi-client/src/model-representation/petrinet/nested-petrinet-renderer.ts
@@ -10,19 +10,23 @@ import CIRCLE_PACKING_CHILD_NORMALIZED_VECTORS from '@/model-representation/petr
 import CIRCLE_PACKING_CHILD_NORMALIZED_RADII from '@/model-representation/petrinet/circle-packing-radii.json';
 
 export interface NestedPetrinetOptions extends Options {
-	nestedMap?: { [baseNodeId: string]: string[] };
+	nestedMap?: { [baseNodeId: string]: any };
+	transitionMatrices?: { [baseTransitionId: string]: any[] };
 }
 
 const CIRCLE_MARGIN_CONST = 1;
 const { getNodeTypeColor } = useNodeTypeColorPalette();
 
 export class NestedPetrinetRenderer extends PetrinetRenderer {
-	nestedMap: any;
+	nestedMap?: { [baseNodeId: string]: any };
+
+	transitionMatrices?: { [baseTransitionId: string]: any[] };
 
 	// override type of constructor argument
 	constructor(options: NestedPetrinetOptions) {
 		super(options as Options);
 		this.nestedMap = options.nestedMap;
+		this.transitionMatrices = options.transitionMatrices;
 	}
 
 	renderNodes(selection: D3SelectionINode<NodeData>) {
@@ -44,8 +48,8 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
 			.attr('height', (d) => d.height)
 			.attr('y', (d) => -d.height * 0.5)
 			.attr('x', (d) => -d.width * 0.5)
-			.attr('rx', '6')
-			.attr('ry', '6')
+			.attr('rx', 6)
+			.attr('ry', 6)
 			.style('fill', (d) =>
 				d.data.strataType ? getNodeTypeColor(d.data.strataType) : 'var(--petri-nodeFill'
 			)
@@ -65,28 +69,40 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
 			.attr('stroke-width', 1)
 			.style('cursor', 'pointer');
 
-		species.each((d, idx, g) => {
-			const nestedNodes = this.nestedMap[d.id] ?? [];
-			const nestedNodesLen = nestedNodes.length;
-			for (let i = 0; i < nestedNodesLen; i++) {
-				// skip nodes that can't be laid out for now
-				if (nestedNodesLen >= CIRCLE_PACKING_CHILD_NORMALIZED_RADII.length) {
-					continue;
-				}
-				const nodeId = nestedNodes[i];
-				const parentRadius = 0.55 * d.width;
+		const renderNestedNodes = (
+			node: { [baseNodeId: string]: any },
+			parentRadius: number,
+			parentX: number,
+			parentY: number,
+			g: any[] | ArrayLike<any>,
+			idx: number
+		) => {
+			// this function recursively iterates through the nested object representation of the
+			// stratified model states and draws the corresponding circles in post-order
+
+			if (Object.keys(node).length === 0) {
+				return;
+			}
+
+			const nestedNodesLen = Object.keys(node).length;
+
+			Object.entries(node).forEach(([key, value], i) => {
 				const childRadius =
 					CIRCLE_PACKING_CHILD_NORMALIZED_RADII[nestedNodesLen] *
 					CIRCLE_MARGIN_CONST *
 					parentRadius;
 
-				const xPos = parentRadius * CIRCLE_PACKING_CHILD_NORMALIZED_VECTORS[nestedNodesLen][i][0];
-				const yPos = parentRadius * CIRCLE_PACKING_CHILD_NORMALIZED_VECTORS[nestedNodesLen][i][1];
+				const xPos =
+					parentRadius * CIRCLE_PACKING_CHILD_NORMALIZED_VECTORS[nestedNodesLen][i][0] + parentX;
+				const yPos =
+					parentRadius * CIRCLE_PACKING_CHILD_NORMALIZED_VECTORS[nestedNodesLen][i][1] + parentY;
+
+				renderNestedNodes(value, childRadius, xPos, yPos, g, idx);
 
 				select(g[idx])
 					.append('circle')
 					.classed('shape', true)
-					.attr('r', () => childRadius) // FIXME: need to adjust edge from sqaure mapping to circle
+					.attr('r', () => childRadius)
 					.attr('cx', xPos)
 					.attr('cy', yPos)
 					.attr('fill', () => '#ffffffaa')
@@ -100,17 +116,23 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
 					.style('paint-order', 'stroke')
 					.style('fill', 'var(--text-color-subdued')
 					.style('pointer-events', 'none')
-					.html(() => nodeId ?? '');
-			}
+					.html(() => key ?? '');
+			});
+		};
+
+		species.each((d, idx, g) => {
+			const nestedMap = this.nestedMap?.[d.id] ?? {};
+			const parentRadius = 0.55 * d.width;
+			renderNestedNodes(nestedMap, parentRadius, 0, 0, g, idx);
 		});
 
 		transitions.each((d, idx, g) => {
-			const nestedNodes = this.nestedMap[d.id] ?? [];
-			const nestedNodesLen = nestedNodes.length;
+			const transitionMatrix = this.transitionMatrices?.[d.id] ?? [];
+			const transitionMatrixLen = transitionMatrix.length;
 			const transitionNode = select(g[idx]);
 
-			for (let i = 1; i < nestedNodesLen; i++) {
-				const position = (d.width / nestedNodesLen) * i;
+			for (let i = 1; i < transitionMatrixLen; i++) {
+				const position = (d.width / transitionMatrixLen) * i;
 
 				transitionNode
 					.append('line')
@@ -129,6 +151,25 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
 					.attr('x2', -d.width * 0.5 + position)
 					.attr('stroke', '#ffffffcf');
 			}
+
+			transitionMatrix.forEach((row) => {
+				row.forEach((col) => {
+					if (col.value) {
+						transitionNode
+							.append('rect')
+							.attr('width', d.width / transitionMatrixLen)
+							.attr('height', d.width / transitionMatrixLen)
+							.attr('x', -d.width * 0.5 + (d.width / transitionMatrixLen) * col.row)
+							.attr('y', -d.width * 0.5 + (d.width / transitionMatrixLen) * col.col)
+							.attr('rx', 2)
+							.attr('ry', 2)
+							.style('fill', d.data.strataType ? getNodeTypeColor(d.data.strataType) : '#7fffd4')
+							.style('cursor', 'pointer')
+							.attr('stroke', '#ffffff')
+							.attr('stroke-width', 1);
+					}
+				});
+			});
 		});
 
 		// transitions label text
diff --git a/packages/client/hmi-client/src/model-representation/petrinet/petri-util.ts b/packages/client/hmi-client/src/model-representation/petrinet/petri-util.ts
new file mode 100644
index 0000000000..b487e9b475
--- /dev/null
+++ b/packages/client/hmi-client/src/model-representation/petrinet/petri-util.ts
@@ -0,0 +1,87 @@
+import _ from 'lodash';
+import { IGraph } from '@graph-scaffolder/index';
+import {
+	EdgeData,
+	NodeData,
+	PetrinetRenderer
+} from '@/model-representation/petrinet/petrinet-renderer';
+import { runDagreLayout } from '@/services/graph';
+import { NestedPetrinetRenderer } from '@/model-representation/petrinet/nested-petrinet-renderer';
+import {
+	convertToIGraph,
+	getStratificationType
+} from '@/model-representation/petrinet/petrinet-service';
+import { extractNestedMap } from '@/model-representation/petrinet/catlab-petri';
+import {
+	getAMRPresentationData,
+	extractNestedStratas
+} from '@/model-representation/petrinet/mira-petri';
+import { createMatrix2D } from '@/utils/pivot';
+import { Model } from '@/types/Types';
+
+export const getPetrinetRenderer = (
+	model: Model,
+	graphElement: HTMLDivElement
+): PetrinetRenderer => {
+	const strataType = getStratificationType(model);
+	if (strataType === 'catlab') {
+		return new NestedPetrinetRenderer({
+			el: graphElement,
+			useAStarRouting: false,
+			useStableZoomPan: true,
+			runLayout: runDagreLayout,
+			dragSelector: 'no-drag',
+			nestedMap: extractNestedMap(model)
+		});
+	}
+	if (strataType === 'mira') {
+		const presentationData = getAMRPresentationData(model);
+
+		const stateMatrixData = presentationData.stateMatrixData.map((d) => {
+			const temp: any = _.cloneDeep(d);
+			delete temp.id;
+			delete temp.base;
+			return Object.keys(temp);
+		});
+		const dims = _.uniq(_.flatten(stateMatrixData));
+		dims.unshift('base');
+		const nestedMap = extractNestedStratas(presentationData.stateMatrixData, dims);
+
+		const groupedTransitions = _.groupBy(presentationData.transitionMatrixData, 'base');
+		const transitionMatrixMap = {};
+		Object.entries(groupedTransitions).forEach(([key, value]) => {
+			const dimensions = Object.keys(value[0]).filter((k) => !['id', 'base'].includes(k));
+			const matrixAttributes = createMatrix2D(value, dimensions, dimensions);
+			transitionMatrixMap[key] = matrixAttributes.matrix;
+		});
+
+		return new NestedPetrinetRenderer({
+			el: graphElement,
+			useAStarRouting: false,
+			useStableZoomPan: true,
+			runLayout: runDagreLayout,
+			dragSelector: 'no-drag',
+			nestedMap,
+			transitionMatrices: transitionMatrixMap
+		});
+	}
+	return new PetrinetRenderer({
+		el: graphElement,
+		useAStarRouting: false,
+		useStableZoomPan: true,
+		runLayout: runDagreLayout,
+		dragSelector: 'no-drag'
+	});
+};
+
+export const getGraphData = (model: Model, isCollapsed: boolean): IGraph<NodeData, EdgeData> => {
+	const strataType = getStratificationType(model);
+	if (strataType && isCollapsed) {
+		if (strataType === 'mira') {
+			const presentationData = getAMRPresentationData(model);
+			return convertToIGraph(presentationData.compactModel as any);
+		}
+		return convertToIGraph(model.semantics?.span?.[0].system);
+	}
+	return convertToIGraph(model);
+};
diff --git a/packages/client/hmi-client/src/temp/AMRPetriTest.vue b/packages/client/hmi-client/src/temp/AMRPetriTest.vue
index b696b9e25f..d76eb46508 100644
--- a/packages/client/hmi-client/src/temp/AMRPetriTest.vue
+++ b/packages/client/hmi-client/src/temp/AMRPetriTest.vue
@@ -21,22 +21,13 @@
 </template>
 
 <script setup lang="ts">
-import _ from 'lodash';
 import { onMounted, ref, watch } from 'vue';
 import BasicRenderer from 'graph-scaffolder/src/core/basic-renderer';
 import { runDagreLayout } from '@/services/graph';
-import { NestedPetrinetRenderer } from '@/model-representation/petrinet/nested-petrinet-renderer';
 import { PetrinetRenderer } from '@/model-representation/petrinet/petrinet-renderer';
-import {
-	convertToIGraph,
-	getStratificationType
-} from '@/model-representation/petrinet/petrinet-service';
+import { getStratificationType } from '@/model-representation/petrinet/petrinet-service';
 import { amr as amrExample } from './sir';
-import { extractNestedMap } from '@/model-representation/petrinet/catlab-petri';
-import {
-	getAMRPresentationData,
-	extractNestedStratas
-} from '@/model-representation/petrinet/mira-petri';
+import { getGraphData, getPetrinetRenderer } from '@/model-representation/petrinet/petri-util';
 
 const graphElement = ref<HTMLDivElement | null>(null);
 const jsonStr = ref('');
@@ -55,47 +46,17 @@ onMounted(async () => {
 			const amr = JSON.parse(jsonStr.value);
 			strataType.value = getStratificationType(amr);
 
-			if (strataType.value === null || isCollapse.value === false) {
-				console.log('hihihhi');
+			data = getGraphData(amr, isCollapse.value);
+
+			if (isCollapse.value === false) {
 				renderer = new PetrinetRenderer({
 					el: graphElement.value as HTMLDivElement,
 					useAStarRouting: false,
 					useStableZoomPan: true,
 					runLayout: runDagreLayout
 				});
-				data = convertToIGraph(amr);
-			} else if (strataType.value === 'catlab') {
-				const nestedMap = extractNestedMap(amr);
-				renderer = new NestedPetrinetRenderer({
-					el: graphElement.value as HTMLDivElement,
-					useAStarRouting: false,
-					useStableZoomPan: true,
-					runLayout: runDagreLayout,
-					nestedMap: nestedMap
-				});
-				data = convertToIGraph(amr);
 			} else {
-				const presentationData = getAMRPresentationData(amr);
-
-				// 1. Find what are the strata dimensions
-				const stateMatrixData = presentationData.stateMatrixData.map((d) => {
-					const temp: any = _.cloneDeep(d);
-					delete temp.id;
-					delete temp.base;
-					return Object.keys(temp);
-				});
-				const dims = _.uniq(_.flatten(stateMatrixData));
-				dims.unshift('base');
-				const nestedMap = extractNestedStratas(presentationData.stateMatrixData, dims);
-
-				renderer = new NestedPetrinetRenderer({
-					el: graphElement.value as HTMLDivElement,
-					useAStarRouting: false,
-					useStableZoomPan: true,
-					runLayout: runDagreLayout,
-					nestedMap: nestedMap
-				});
-				data = convertToIGraph(presentationData.compactModel as any);
+				renderer = getPetrinetRenderer(amr, graphElement.value as HTMLDivElement);
 			}
 
 			await renderer.setData(data);