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

refactor create paths method and highlight path method

Browse Source
This commit is contained in:
Cindy Chang
2024-08-28 11:46:54 +08:00
parent 5164313082
commit f3b9f7cd41
4 changed files with 65 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/stores/mapPathStore.ts
View File

@@ -17,6 +17,7 @@ export default defineStore('useMapPathStore', {
state: () => ({
clickedPath: [],
insights: {},
insightWithPath: {},
cytoscape: null,
allPaths: [],
allPathsByEdge: [],
@@ -31,6 +32,48 @@ export default defineStore('useMapPathStore', {
setCytoscape(cytoscape) {
this.cytoscape = cytoscape;
},
async createInsightWithPath() {
const { insights } = AllMapData();
this.insights = {...insights};
this.startNode = this.cytoscape?.nodes().filter(function(elem) {
return elem.data('label').toLocaleLowerCase() === 'start';
});
for(let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
const curButton = this.insights[INSIGHTS_FIELDS_AND_LABELS[i][0]];
this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]] = {}; // first layer index
for(let listIndex = 0; listIndex < curButton.length; listIndex++) {
this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex] = {
edges: [],
nodes: [],
}; // second layer index
let curGraphNode, prevGraphNode, curEdge; // 配對 curGraphNode 與 nodeIndex 指向的 node
for(let nodeIndex = 0; nodeIndex < curButton[listIndex].length; nodeIndex++){
if(nodeIndex === 0) { // special case, initialize curGraphNode
curGraphNode = this.startNode.outgoers('node').filter(neighborOfStart =>
neighborOfStart.data('label') === curButton[listIndex][nodeIndex]
);
curEdge = this.startNode.edgesTo(curGraphNode);
} else {
if(prevGraphNode){
curGraphNode = prevGraphNode.outgoers('node').filter(neighbor =>
neighbor.data('label') === curButton[listIndex][nodeIndex]
);
if(!curGraphNode) {
// curGraphNode = prevGraphNode.outgoers('node').filter(node =>
// node.data('label').toLocaleLowerCase() === 'end');
}
curEdge = prevGraphNode.edgesWith(curGraphNode);
}
}
this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].nodes.push(curGraphNode);
this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].edges.push(curEdge);
prevGraphNode = curGraphNode;
}
}
}
},
async createPaths() {
this.startNode = this.cytoscape?.nodes().filter(function(elem) {
return elem.data('label').toLocaleLowerCase() === 'start';
@@ -134,7 +177,15 @@ export default defineStore('useMapPathStore', {
}
return false; // 當前節點不匹配時返回 false
},
highlightClickedPath(clickedActiveTraceIndex: number, clickedPathListIndex: number) {
highlightClickedPath(clickedActiveTraceIndex: number, clickedPathListIndex: number){
this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[clickedActiveTraceIndex][0]][clickedPathListIndex].edges.forEach(edgeToHighlight => {
edgeToHighlight.addClass('highlight-edge');
});
this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[clickedActiveTraceIndex][0]][clickedPathListIndex].nodes.forEach(nodeToHighlight => {
nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
});
},
highlightClickedPathUnused(clickedActiveTraceIndex: number, clickedPathListIndex: number) {
this.activeTrace = clickedActiveTraceIndex;
this.activeListIndex = clickedPathListIndex;
this.mapGraphPathToInsight[clickedActiveTraceIndex][clickedPathListIndex].pathByEdge
@@ -176,6 +227,14 @@ export default defineStore('useMapPathStore', {
clickedEdge.addClass('highlight-edge');
},
async highlightMostFrequentPath() {
const LIST_INDEX = 0;
this.insightWithPath['most_freq_traces'][LIST_INDEX].nodes.map(nodeToHighlight => {
nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
});
this.insightWithPath['most_freq_traces'][LIST_INDEX].edges.map(edgeToHighlight =>
edgeToHighlight.addClass('highlight-edge'));
},
async highlightMostFrequentPathUnused() {
for(let buttonIter = 0; buttonIter < INSIGHTS_FIELDS_AND_LABELS.length; buttonIter++) {
// 有可能遇到兩個以上的most frequent paths，然而我們只取一個path點亮
if (this.mapGraphPathToInsight[buttonIter]) {