Refactor mapPathStore: extract helpers, use for-of, remove unnecessary await, collapse else-if (S3776, S4138, S4123, S6660)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -24,6 +24,93 @@ import ImgCapsule4 from '@/assets/capsule4.svg';
|
|||||||
const ImgCapsulesGlow = [ImgCapsuleGlow1, ImgCapsuleGlow2, ImgCapsuleGlow3, ImgCapsuleGlow4];
|
const ImgCapsulesGlow = [ImgCapsuleGlow1, ImgCapsuleGlow2, ImgCapsuleGlow3, ImgCapsuleGlow4];
|
||||||
const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
|
const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Builds insight paths for a single field by linking graph nodes/edges
|
||||||
|
* to the insight data entries.
|
||||||
|
*/
|
||||||
|
function buildInsightPathsForField(fieldKey, curButton, startNode, insightWithPath) {
|
||||||
|
insightWithPath[fieldKey] = {};
|
||||||
|
for (let listIndex = 0; listIndex < curButton.length; listIndex++) {
|
||||||
|
insightWithPath[fieldKey][listIndex] = { edges: [], nodes: [] };
|
||||||
|
let curGraphNode, prevGraphNode, curEdge;
|
||||||
|
for (let nodeIndex = 0; nodeIndex < curButton[listIndex].length; nodeIndex++) {
|
||||||
|
if (nodeIndex === 0) {
|
||||||
|
curGraphNode = startNode.outgoers('node').filter(neighborOfStart =>
|
||||||
|
neighborOfStart.data('label') === curButton[listIndex][nodeIndex]
|
||||||
|
);
|
||||||
|
curEdge = startNode.edgesTo(curGraphNode);
|
||||||
|
} else if (prevGraphNode) {
|
||||||
|
curGraphNode = prevGraphNode.outgoers('node').filter(neighbor =>
|
||||||
|
neighbor.data('label') === curButton[listIndex][nodeIndex]
|
||||||
|
);
|
||||||
|
curEdge = prevGraphNode.edgesWith(curGraphNode);
|
||||||
|
}
|
||||||
|
insightWithPath[fieldKey][listIndex].nodes.push(curGraphNode);
|
||||||
|
insightWithPath[fieldKey][listIndex].edges.push(curEdge);
|
||||||
|
if (nodeIndex === curButton[listIndex].length - 1) {
|
||||||
|
const endNode = curGraphNode.outgoers('node').filter(neighbor =>
|
||||||
|
neighbor.data('label').toLowerCase() === 'end'
|
||||||
|
);
|
||||||
|
const lastEdge = curGraphNode.edgesWith(endNode);
|
||||||
|
insightWithPath[fieldKey][listIndex].edges.push(lastEdge);
|
||||||
|
}
|
||||||
|
prevGraphNode = curGraphNode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Matches a single graph path against all insight button entries
|
||||||
|
* for a specific field.
|
||||||
|
*/
|
||||||
|
function matchPathAgainstButton(curPath, curPathByEdge, curButton, fieldIndex, mapGraphPathToInsight) {
|
||||||
|
for (let listIndex = 0; listIndex < curButton.length; listIndex++) {
|
||||||
|
for (let nodeIndex = 0; nodeIndex < curButton[listIndex].length; nodeIndex++) {
|
||||||
|
if (curPath[1].data('label') === curButton[listIndex][nodeIndex]) {
|
||||||
|
const matchResult = depthFirstSearchMatchTwoPaths(curPath, 1, curButton, listIndex, nodeIndex);
|
||||||
|
if (matchResult) {
|
||||||
|
mapGraphPathToInsight[fieldIndex] = {
|
||||||
|
[listIndex]: {
|
||||||
|
pathByNode: [...curPath],
|
||||||
|
pathByEdge: [...curPathByEdge],
|
||||||
|
pathType: INSIGHTS_FIELDS_AND_LABELS[fieldIndex][0],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Recursively checks whether two paths match by comparing node labels
|
||||||
|
* along both paths using depth-first search.
|
||||||
|
*/
|
||||||
|
function depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex) {
|
||||||
|
if (listIndex >= curButton.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (nodeIndex >= curButton[listIndex].length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (curPathIndex === curPath.length || nodeIndex === curButton[listIndex].length) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (curPathIndex >= curPath.length || nodeIndex >= curButton[listIndex].length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nodeLabel = curPath[curPathIndex].data('label');
|
||||||
|
if (nodeLabel !== curButton[listIndex][nodeIndex]) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (nodeIndex === curButton[listIndex].length - 1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex + 1, nodeIndex)
|
||||||
|
|| depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex, nodeIndex + 1);
|
||||||
|
}
|
||||||
|
|
||||||
export const useMapPathStore = defineStore('mapPathStore', {
|
export const useMapPathStore = defineStore('mapPathStore', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
clickedPath: [],
|
clickedPath: [],
|
||||||
@@ -82,45 +169,10 @@ export const useMapPathStore = defineStore('mapPathStore', {
|
|||||||
.filter(function (elem) {
|
.filter(function (elem) {
|
||||||
return elem.data('label').toLowerCase() === 'start';
|
return elem.data('label').toLowerCase() === 'start';
|
||||||
});
|
});
|
||||||
for (let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
|
for (const [, fieldAndLabel] of INSIGHTS_FIELDS_AND_LABELS.entries()) {
|
||||||
const curButton = this.insights[INSIGHTS_FIELDS_AND_LABELS[i][0]];
|
const curButton = this.insights[fieldAndLabel[0]];
|
||||||
if (!curButton) continue;
|
if (!curButton) continue;
|
||||||
this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]] = {}; // first layer index
|
buildInsightPathsForField(fieldAndLabel[0], curButton, this.startNode, this.insightWithPath);
|
||||||
|
|
||||||
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; // Match curGraphNode with the node at nodeIndex
|
|
||||||
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]
|
|
||||||
);
|
|
||||||
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);
|
|
||||||
// Special case: append the last edge segment outside the loop
|
|
||||||
if (nodeIndex === curButton[listIndex].length - 1) {
|
|
||||||
const endNode = curGraphNode.outgoers('node').filter(neighbor =>
|
|
||||||
neighbor.data('label').toLowerCase() === 'end'
|
|
||||||
);
|
|
||||||
const lastEdge = curGraphNode.edgesWith(endNode);
|
|
||||||
this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].edges.push(lastEdge);
|
|
||||||
}
|
|
||||||
prevGraphNode = curGraphNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async createPaths() {
|
async createPaths() {
|
||||||
@@ -129,10 +181,10 @@ export const useMapPathStore = defineStore('mapPathStore', {
|
|||||||
return elem.data('label').toLowerCase() === 'start';
|
return elem.data('label').toLowerCase() === 'start';
|
||||||
});
|
});
|
||||||
// Depth First Search from the starting node
|
// Depth First Search from the starting node
|
||||||
await this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []);
|
this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []);
|
||||||
const { insights } = useAllMapDataStore();
|
const { insights } = useAllMapDataStore();
|
||||||
this.insights = { ...insights };
|
this.insights = { ...insights };
|
||||||
await this.matchGraphPathWithInsightsPath();
|
this.matchGraphPathWithInsightsPath();
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Builds all paths from the start node using depth-first search.
|
* Builds all paths from the start node using depth-first search.
|
||||||
@@ -167,64 +219,12 @@ export const useMapPathStore = defineStore('mapPathStore', {
|
|||||||
const curPath = this.allPaths[whichPath];
|
const curPath = this.allPaths[whichPath];
|
||||||
if (curPath.length < 2) continue;
|
if (curPath.length < 2) continue;
|
||||||
const curPathByEdge = this.allPathsByEdge[whichPath];
|
const curPathByEdge = this.allPathsByEdge[whichPath];
|
||||||
// For the first node in this path, find which insights starting point it corresponds to
|
|
||||||
for (let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
|
for (let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
|
||||||
const curButton = this.insights[INSIGHTS_FIELDS_AND_LABELS[i][0]];
|
const curButton = this.insights[INSIGHTS_FIELDS_AND_LABELS[i][0]];
|
||||||
if (!curButton) continue;
|
if (!curButton) continue;
|
||||||
for (let listIndex = 0; listIndex < curButton.length; listIndex++) {
|
matchPathAgainstButton(curPath, curPathByEdge, curButton, i, this.mapGraphPathToInsight);
|
||||||
for (let nodeIndex = 0; nodeIndex < curButton[listIndex].length; nodeIndex++) {
|
|
||||||
if (curPath[1].data('label') === curButton[listIndex][nodeIndex]) {
|
|
||||||
// Start from index 1 instead of 0 because index 0 is the "start" label
|
|
||||||
const matchResult = this.depthFirstSearchMatchTwoPaths(curPath, 1, curButton, listIndex, nodeIndex)
|
|
||||||
if (matchResult) {
|
|
||||||
this.mapGraphPathToInsight[i] = {
|
|
||||||
[listIndex]: {
|
|
||||||
pathByNode: [...curPath],
|
|
||||||
pathByEdge: [...curPathByEdge],
|
|
||||||
pathType: INSIGHTS_FIELDS_AND_LABELS[i][0],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} // end if
|
|
||||||
}
|
|
||||||
} // end fourth for
|
|
||||||
} // end third for
|
|
||||||
} // end second for
|
|
||||||
} // end first for
|
|
||||||
},
|
|
||||||
depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex) {
|
|
||||||
if (listIndex >= curButton.length) { // Bounds check to prevent out-of-range access
|
|
||||||
return false; // nodeIndex is the path index in the list after selecting one of the five buttons
|
|
||||||
}
|
|
||||||
if (nodeIndex >= curButton[listIndex].length) { // Bounds check to prevent out-of-range access
|
|
||||||
return false; // The node index within this path in the list
|
|
||||||
}
|
|
||||||
// If `curPath` and `curButton[listIndex]` fully match
|
|
||||||
if (curPathIndex === curPath.length || nodeIndex === curButton[listIndex].length) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bounds check to prevent out-of-range access
|
|
||||||
if (curPathIndex >= curPath.length || nodeIndex >= curButton[listIndex].length) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nodeLabel = curPath[curPathIndex].data('label');
|
|
||||||
// If the current node matches
|
|
||||||
if (nodeLabel === curButton[listIndex][nodeIndex]) {
|
|
||||||
if (nodeIndex === curButton[listIndex].length - 1) {
|
|
||||||
return true; // Reach
|
|
||||||
}
|
|
||||||
// Pick the option that may return true from the two below; both could be false.
|
|
||||||
// Option 1: increment the insights first-level index; must also increment the path index.
|
|
||||||
if (this.depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex + 1, nodeIndex)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
// Option 2: increment the insights second-level index; must also increment the path index.
|
|
||||||
if (this.depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex, nodeIndex + 1)) {
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return false; // Return false when the current node does not match
|
|
||||||
},
|
},
|
||||||
highlightClickedPath(clickedActiveTraceIndex: number, clickedPathListIndex: number) {
|
highlightClickedPath(clickedActiveTraceIndex: number, clickedPathListIndex: number) {
|
||||||
const key = INSIGHTS_FIELDS_AND_LABELS[clickedActiveTraceIndex]?.[0];
|
const key = INSIGHTS_FIELDS_AND_LABELS[clickedActiveTraceIndex]?.[0];
|
||||||
|
|||||||
Reference in New Issue
Block a user