imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine default highlight for all six views

Browse Source
This commit is contained in:
Cindy Chang
2024-08-30 11:16:03 +08:00
parent 700b701984
commit 725cc76ac2
4 changed files with 69 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/stores/cytoscapeStore.ts
View File

@@ -50,7 +50,6 @@ export default defineStore('useCytoscapeStore', {
this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
localStorage.setItem(SAVE_KEY_NAME, JSON.stringify(this.nodePositions));
}
console.log('', );
this.savePositionsToStorage();
},
/**

51
src/stores/mapPathStore.ts
View File

@@ -18,7 +18,32 @@ export default defineStore('useMapPathStore', {
clickedPath: [],
insights: {},
insightWithPath: {},
cytoscape: null,
cytoscape: {
process:
{
curved:{
horizontal:null,
vertical:null,
},
elbow:{
horizontal:null,
vertical:null,
}
},
bpmn: {
curved:{
horizontal:null,
vertical:null,
},
elbow:{
horizontal:null,
vertical:null,
}
}
},
processOrBPMN: 'process',
curveType: 'curved',
directionType: 'horizontal',
allPaths: [],
allPathsByEdge: [],
startNode: null,
@@ -29,13 +54,21 @@ export default defineStore('useMapPathStore', {
isBPMNOn: false,
}),
actions: {
setCytoscape(cytoscape) {
this.cytoscape = cytoscape;
async setCytoscape(cytoscape, processOrBPMN = 'process', curveType = 'curved', directionType = 'horizontal') {
this.processOrBPMN = processOrBPMN;
this.curveType = curveType;
this.directionType = directionType;
this.cytoscape[processOrBPMN][curveType][directionType] = cytoscape;
await this.createInsightWithPath();
if(processOrBPMN === 'process') {
await this.highlightMostFrequentPath();
}
},
async createInsightWithPath() {
const { insights } = AllMapData();
this.insights = {...insights};
this.startNode = this.cytoscape?.nodes().filter(function(elem) {
this.startNode = this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes()
.filter(function(elem) {
return elem.data('label').toLocaleLowerCase() === 'start';
});
for(let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
@@ -79,7 +112,8 @@ export default defineStore('useMapPathStore', {
}
},
async createPaths() {
this.startNode = this.cytoscape?.nodes().filter(function(elem) {
this.startNode = this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes()
.filter(function(elem) {
return elem.data('label').toLocaleLowerCase() === 'start';
});
// Depth First Search from the starting node
@@ -202,9 +236,9 @@ export default defineStore('useMapPathStore', {
})
},
clearAllHighlight() {
this.cytoscape?.edges().removeClass('highlight-edge');
this.cytoscape?.nodes().removeClass('highlight-node');
this.cytoscape?.nodes().forEach(nodeToReset => {
this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.edges().removeClass('highlight-edge');
this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes().removeClass('highlight-node');
this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes().forEach(nodeToReset => {
nodeToReset.data('nodeImageUrl', ImgCapsules[nodeToReset.data('level')])
});
},
@@ -231,6 +265,7 @@ export default defineStore('useMapPathStore', {
clickedEdge.addClass('highlight-edge');
},
async highlightMostFrequentPath() {
console.log('highlightMostFrequentPath', this.insightWithPath['most_freq_traces'][0]);
const LIST_INDEX = 0;
this.insightWithPath['most_freq_traces'][LIST_INDEX].nodes.map(nodeToHighlight => {
nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);