Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update nested petrinet renderer #1685

Merged
merged 15 commits into from
Aug 11, 2023
Merged

feat: update nested petrinet renderer #1685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d3fef06
test page for Jami
mwdchang Aug 3, 2023
70ebfcb
test page for Jami
mwdchang Aug 3, 2023
2d1b1ef
updated renderer
Jami159 Aug 10, 2023
3cbe023
fix merge conflict
Jami159 Aug 10, 2023
e72a78d
delete text file
Jami159 Aug 10, 2023
48bf83b
Merge branch 'main' into nested-test
Jami159 Aug 10, 2023
095069a
update AMRPetriTest
Jami159 Aug 10, 2023
d741e05
remove console log
Jami159 Aug 10, 2023
0b0d0d0
update graph data helper function
Jami159 Aug 10, 2023
024850e
Merge branch 'main' into nested-test
Jami159 Aug 10, 2023
6dbc403
Merge branch 'main' into nested-test
Jami159 Aug 11, 2023
31e659c
Merge branch 'main' into nested-test
Jami159 Aug 11, 2023
6b82f8c
address comments
Jami159 Aug 11, 2023
4e0d903
Merge branch 'nested-test' of github.com:DARPA-ASKEM/Terarium into ne…
Jami159 Aug 11, 2023
875ece1
Merge branch 'main' into nested-test
mwdchang Aug 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 6 additions & 34 deletions packages/client/hmi-client/src/components/models/tera-model-diagram.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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