Skip to content

Commit

Permalink
feat: update nested petrinet renderer (#1685)
Browse files Browse the repository at this point in the history 
Co-authored-by: mwdchang <mwdchang@gmail.com>
  • Loading branch information
@Jami159 @mwdchang @shawnyama
2 people authored and shawnyama committed Aug 14, 2023
1 parent b89801a commit b0c057a
Show file tree
Hide file tree
Showing 7 changed files with 175 additions and 175 deletions.
40 changes: 6 additions & 34 deletions packages/client/hmi-client/src/components/models/tera-model-diagram.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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;
Expand All @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
33 changes: 5 additions & 28 deletions packages/client/hmi-client/src/components/models/tera-stratify-output-model-diagram.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
48 changes: 5 additions & 43 deletions packages/client/hmi-client/src/components/models/tera-typed-model-diagram.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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({
Expand Down
4 changes: 2 additions & 2 deletions packages/client/hmi-client/src/model-representation/petrinet/catlab-petri.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit b0c057a

Please sign in to comment.