diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts index 7c7479c..a8973f2 100644 --- a/src/stores/mapPathStore.ts +++ b/src/stores/mapPathStore.ts @@ -24,6 +24,93 @@ import ImgCapsule4 from '@/assets/capsule4.svg'; const ImgCapsulesGlow = [ImgCapsuleGlow1, ImgCapsuleGlow2, ImgCapsuleGlow3, ImgCapsuleGlow4]; 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', { state: () => ({ clickedPath: [], @@ -82,45 +169,10 @@ export const useMapPathStore = defineStore('mapPathStore', { .filter(function (elem) { return elem.data('label').toLowerCase() === 'start'; }); - for (let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) { - const curButton = this.insights[INSIGHTS_FIELDS_AND_LABELS[i][0]]; + for (const [, fieldAndLabel] of INSIGHTS_FIELDS_AND_LABELS.entries()) { + const curButton = this.insights[fieldAndLabel[0]]; if (!curButton) continue; - 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; // 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; - } - } + buildInsightPathsForField(fieldAndLabel[0], curButton, this.startNode, this.insightWithPath); } }, async createPaths() { @@ -129,10 +181,10 @@ export const useMapPathStore = defineStore('mapPathStore', { return elem.data('label').toLowerCase() === 'start'; }); // Depth First Search from the starting node - await this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []); + this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []); const { insights } = useAllMapDataStore(); this.insights = { ...insights }; - await this.matchGraphPathWithInsightsPath(); + this.matchGraphPathWithInsightsPath(); }, /** * 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]; if (curPath.length < 2) continue; 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++) { const curButton = this.insights[INSIGHTS_FIELDS_AND_LABELS[i][0]]; if (!curButton) continue; - 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]) { - // 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; + matchPathAgainstButton(curPath, curPathByEdge, curButton, i, this.mapGraphPathToInsight); } } - return false; // Return false when the current node does not match }, highlightClickedPath(clickedActiveTraceIndex: number, clickedPathListIndex: number) { const key = INSIGHTS_FIELDS_AND_LABELS[clickedActiveTraceIndex]?.[0];