diff --git a/copy.vue b/copy.vue new file mode 100644 index 0000000..c6a9118 --- /dev/null +++ b/copy.vue @@ -0,0 +1,755 @@ + + + + + + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index e8ac7cb..229223e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -29,6 +29,11 @@ class="btn btn-primary" @click="showPreviousBox"> Parent Box + +
@@ -83,6 +89,7 @@ import 'vue-json-pretty-highlight-row/lib/styles.css'; import { getBoxLayout } from './utils/layout'; import { drawBox } from './utils/drawBox'; import { setGromet } from './utils/global.js'; +import { errorChecking } from './utils/utilities.js'; // import Vue from 'vue'; // Vue.prototype.$gromet = { data: null }; export default { @@ -167,61 +174,65 @@ export default { let currentFN = fn0; console.log(this.routePair) if (this.startingFN !== 0){ - let prefix = "--- Click to visualize this FN --- "; - let numbersString = fnS[this.startingFN-1].hi_there.replace(prefix, "").trim(); - let trimmedNum = numbersString.replace(/^['"]+|['"]+$/g, ''); - let routeNumbers = trimmedNum.split('-').map(Number); - let altRouteNumbers = this.routePair[trimmedNum].split('-').map(Number); - let currentBox = "0"; - const layout = getBoxLayout(currentFN); - drawBox(layout, fnS, 0); - for (let i=0;i${event.target.tagName}#${event.target.id}`; + floatingTag.innerHTML = `${event.target.id}`; + floatingTag.style.boxShadow = "0 0 7px -2px #0000008f"; + floatingTag.style.fontWeight = "bold"; + + // 获取元素的相对视口的位置 + const rect = event.target.getBoundingClientRect(); + + // 计算元素的绝对位置 + const absoluteX = rect.left + window.scrollX; + const absoluteY = rect.top + window.scrollY; + + // 调整floating-tag的位置 + floatingTag.style.left = `${absoluteX}px`; + floatingTag.style.top = `${absoluteY - 36}px`; + } + if (target.id && this.highlightNode && this.highlightNode.length) { + if (this.selectedNode === 0 || this.selectedNode === "0") { + this.highlightNode = ["res.fn"]; + } else { + this.highlightNode = [`res.fn_array[${this.selectedNode - 1}]`]; + } + this.highlightNode = [ + this.highlightNode[0], + `${this.highlightNode[0]}.${target.id.split("-")[0]}[${target.id.split("-")[1]}]` + ]; + } }, jsonClick() { let spanText = event.target.textContent; @@ -638,6 +691,66 @@ export default { downloadLink.click(); document.body.removeChild(downloadLink); }, + runChecking() { + let listOfErrBox = []; + const firstBox = this.gromet.modules[0].fn; + const errInFirstBox = errorChecking(firstBox); + if (errInFirstBox.length!==0){ + listOfErrBox.push( + { + ["fn"]: errInFirstBox + } + ); + } + for (let i=0; i< this.gromet.modules[0].fn_array.length; i++){ + const boxData = this.gromet.modules[0].fn_array[i]; + const currentIndex = i + 1; + const errInBoxData = errorChecking(boxData); + if (errInBoxData.length!==0){ + listOfErrBox.push( + { + ["fn_array-" + String(currentIndex)]: errInBoxData + } + ); + } + } + const errorFrame = document.getElementById("errorFrame"); + listOfErrBox.forEach(item => { + Object.entries(item).forEach(([key, values]) => { + const element = document.createElement('div'); + element.className = 'elementERR'; + + const name = document.createElement('div'); + name.className = 'elementERR-name'; + name.textContent = key; + const self = this; + name.onclick = function() { + if (this.textContent === "fn"){ + self.startingFN = 0; + self.drawMoviz(); + } + else { + self.startingFN = this.textContent.split("-")[1]; + self.drawMoviz(); + } + console.log(this.textContent) + }; + + const valueList = document.createElement('div'); + valueList.className = 'elementERR-values'; + values.forEach(value => { + const valueItem = document.createElement('div'); + valueItem.textContent = value; + valueList.appendChild(valueItem); + }); + + element.appendChild(name); + element.appendChild(valueList); + errorFrame.appendChild(element); + }); + }); + + }, showPreviousBox() { if(this.selectedNode !== null && this.selectedNode !== 0 && this.selectedNode !== 1) { let prefix = "--- Click to visualize this FN --- "; @@ -717,6 +830,7 @@ export default { height: 80vh; /* overflow: hidden; */ overflow: auto; + text-align: left; } .svg-container { border: 5px solid #4b4a4a; @@ -788,4 +902,33 @@ span { pointer-events: none; /* 确保用户可以与下面的元素交互 */ } +.errorFrame { + position: absolute; /* 设置绝对定位，相对于最近的相对定位父容器 */ + margin-left: 80%; + padding: 10px; + background-color: #f4f4f4; + border: 1px solid #ddd; + max-width: 300px; /* 最大宽度，可根据需要调整 */ + max-height: 500px; /* 最大高度，可根据需要调整 */ + overflow-y: auto; /* 如果内容超出高度，自动显示滚动条 */ +} + +.elementERR { + margin-bottom: 10px; + padding: 10px; + background-color: #fff; + border: 1px solid #ddd; + cursor: pointer; +} + +.elementERR-name { + font-weight: bold !important; + color: #fd0000 !important; +} + +.elementERR-values { + margin-top: 5px; + color: #666; +} + diff --git a/src/utils/click.js b/src/utils/click.js index 58431e7..0a05785 100644 --- a/src/utils/click.js +++ b/src/utils/click.js @@ -111,7 +111,16 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc const spaceY = 0; const padding = 90; const newLabel = String(body_num) + '-' + String(body); // new body_num - drawBox(layout, fnS, newLabel, direction); + + // add parent info for moving + const parentNode = d3.select("#boxid" + body_num).select("#" + sourceid); + const parentFrame = d3.select("#boxid" + body_num).select("#frame" + body_num); + const parentNodeCoord = [Number(parentNode.attr("x")) + Number(parentNode.attr('width')) / 2, Number(parentNode.attr("y")) + Number(parentNode.attr('height')) / 2]; + const parentFrameCoord = [Number(parentFrame.attr("x")) + Number(parentFrame.attr('width')) / 2, Number(parentFrame.attr("y")) + Number(parentFrame.attr('height')) / 2]; + // console.log(parentNode, parentFrame) + // console.log(parentNodeCoord, parentFrameCoord); + const parentCoord = [parentNodeCoord[0] - parentFrameCoord[0], parentNodeCoord[1] - parentFrameCoord[1]]; + drawBox(layout, fnS, newLabel, direction, parentCoord); var hierarchies = getHierarchy(spaceY); var treeLayout = {}; treeLayout = getMultiTree(hierarchies); diff --git a/src/utils/drawBox.js b/src/utils/drawBox.js index 9f19383..96d5ab3 100644 --- a/src/utils/drawBox.js +++ b/src/utils/drawBox.js @@ -5,12 +5,12 @@ import { handleClickCond, handleClickLoop } from "./clickCond"; import { computeBoundingRectangle, getOuterBox, relayoutPorts } from "./utilities" import { getGromet } from './global.js'; -export function drawBox(layout, fnS, body_num, directionO = "right") { +export function drawBox(layout, fnS, body_num, directionO = "right", parentCoord = [0, 0]) { // console.log(this.$gromet) // 创建SVG元素 // debugger const svg = d3.select("#mainsvg").select("#sumGroup"); - const g = svg.append("g").attr('id', "boxid" + String(body_num)).attr("class", "drawer").attr("direction", directionO); + const g = svg.append("g").attr('id', "boxid" + String(body_num)).attr("class", "drawer").attr("direction", directionO).attr("parentCoord", parentCoord); const ranksep = 37; const padding = 22.5; // 设置padding的大小 diff --git a/src/utils/flextree.js b/src/utils/flextree.js index f2faacb..d6f4616 100644 --- a/src/utils/flextree.js +++ b/src/utils/flextree.js @@ -52,6 +52,9 @@ export default function flextree(options) { get numChildren() { return this.hasChildren ? this.children.length : 0; } + get childNodes() { + return this.children; + } get hasChildren() { return !this.noChildren; } get noChildren() { return this.children === null; } get firstChild() { @@ -96,6 +99,7 @@ export default function flextree(options) { relX: 0, prelim: 0, shift: 0, change: 0, lExt: this, lExtRelX: 0, lThr: null, rExt: this, rExtRelX: 0, rThr: null, + parentChange: data.data.parentCoordinates, }); } get size() { return nodeSize(this.data); } @@ -105,6 +109,7 @@ export default function flextree(options) { get y() { return this.data.y; } set y(v) { this.data.y = v; } update() { + setPrelimforLeafs(this); layoutChildren(this); resolveX(this); return this; @@ -112,6 +117,18 @@ export default function flextree(options) { }; } + function setPrelimforLeafs(w) { + if (w.hasChildren) { + w.childNodes.forEach(setPrelimforLeafs); + } + if (w.noChildren) { + const prelim = w.parentChange; + Object.assign(w, { + prelim, + }); + } + } + function wrap(FlexClass, treeData, children) { const _wrap = (data, parent) => { const node = new FlexClass(data); @@ -172,9 +189,12 @@ export default function flextree(options) { const layoutChildren = (w, y = 0) => { w.y = y; + // let inumtest = 0; (w.children || []).reduce((acc, kid) => { const [i, lastLows] = acc; layoutChildren(kid, w.y + w.ySize); + // kid.relX += inumtest * 500; + // inumtest++; // The lowest vertical coordinate while extreme nodes still point // in current subtree. const lowY = (i === 0 ? kid.lExt : kid.rExt).bottom; @@ -182,7 +202,8 @@ const layoutChildren = (w, y = 0) => { const lows = updateLows(lowY, i, lastLows); return [i + 1, lows]; }, [0, null]); - shiftChange(w); + // shiftChange(w); + console.log(w); positionRoot(w); return w; }; @@ -227,7 +248,7 @@ const separate = (w, i, lows) => { let rSumMods = lSib.relX; let lContour = curSubtree; let lSumMods = curSubtree.relX; - let isFirst = true; + let isFirst = false; while (rContour && lContour) { if (rContour.bottom > lows.lowY) lows = lows.next; // How far to the left of the right side of rContour is the left side @@ -320,12 +341,28 @@ const setRThr = (w, i, rContour, rSumMods) => { }; // Position root between children, taking into account their modifiers +// const positionRoot = w => { +// if (w.hasChildren) { +// const k0 = w.firstChild; +// const kf = w.lastChild; +// const prelim = (k0.prelim + k0.relX - k0.xSize / 2 + +// kf.relX + kf.prelim + kf.xSize / 2 ) / 2; +// Object.assign(w, { +// prelim, +// lExt: k0.lExt, lExtRelX: k0.lExtRelX, +// rExt: kf.rExt, rExtRelX: kf.rExtRelX, +// }); +// } +// }; + const positionRoot = w => { if (w.hasChildren) { + let prelim = 0; + w.childNodes.forEach(child => { + prelim += (child.relX + child.prelim - child.parentChange) / w.numChildren; + }) const k0 = w.firstChild; const kf = w.lastChild; - const prelim = (k0.prelim + k0.relX - k0.xSize / 2 + - kf.relX + kf.prelim + kf.xSize / 2 ) / 2; Object.assign(w, { prelim, lExt: k0.lExt, lExtRelX: k0.lExtRelX, diff --git a/src/utils/multitree.js b/src/utils/multitree.js index 2655ca9..d0dc459 100644 --- a/src/utils/multitree.js +++ b/src/utils/multitree.js @@ -16,7 +16,7 @@ function processTree(hierarchies) { do { let subtrees = findAllSubtrees(hierarchies); let currentLayout = [...subtrees.right, ...subtrees.down, ...subtrees.mix]; - // console.log(currentLayout, "current"); + console.log(subtrees, "current"); // console.log(treeLayout, "currentT"); let mergedCL = currentLayout.reduce((acc, obj) => ({...acc, ...obj}), {}); if (hasProperties(treeLayout)) { diff --git a/src/utils/utilities.js b/src/utils/utilities.js index 38cd1b7..8d808b3 100644 --- a/src/utils/utilities.js +++ b/src/utils/utilities.js @@ -314,6 +314,12 @@ export function getHierarchy(spaceY) { hierarchies.path = routes; hierarchies.size = [Number(d3.select(this).attr('width')) + spaceY, Number(d3.select(this).attr('height'))]; hierarchies.direction = direction; + if (direction === "right") { + hierarchies.parentCoordinates = d3.select(this).attr('parentCoord').split(',').map(Number)[1]; + } else { + hierarchies.parentCoordinates = d3.select(this).attr('parentCoord').split(',').map(Number)[0]; + } + } else { const temp = {} temp.name = Number(currentID); @@ -321,6 +327,12 @@ export function getHierarchy(spaceY) { temp.path = routes; temp.oName = nodeID; temp.direction = direction; + temp.parentCoordinates = d3.select(this).attr('parentCoord').split(',').map(Number); + if (direction === "right") { + temp.parentCoordinates = d3.select(this).attr('parentCoord').split(',').map(Number)[1]; + } else { + temp.parentCoordinates = d3.select(this).attr('parentCoord').split(',').map(Number)[0]; + } childrens.push(temp); } } @@ -336,4 +348,683 @@ export function getHierarchy(spaceY) { } }); return hierarchies; +} +import * as dagre from 'dagre'; + +export function errorChecking(data) { +let graph = new dagre.graphlib.Graph({ compound: true }); + graph.setGraph({}); + // eslint-disable-next-line + graph.setDefaultEdgeLabel(() => { return {}; }); + // get pif + if ('pif' in data) { + for (let i = 0; i < data.pif.length; i += 1) { + const node = data.pif[i]; + const nodeId = `pif-${i}`; + const label = node.name; + const width = 50; + const height = 50; + const metadata = node.metadata; + graph.setNode(nodeId, { label, width, height, metadata }); + } + } + + // get pof + if ('pof' in data) { + for (let i = 0; i < data.pof.length; i += 1) { + const node = data.pof[i]; + const nodeId = `pof-${i}`; + const label = node.name; + const width = 50; + const height = 50; + const metadata = node.metadata; + graph.setNode(nodeId, { label, width, height, metadata }); + } + } + + // get opo + if ('opo' in data) { + for (let i = 0; i < data.opo.length; i += 1) { + const node = data.opo[i]; + const nodeId = `opo-${i}`; + const label = node.name; + const width = 50; + const height = 50; + const metadata = node.metadata; + graph.setNode(nodeId, { label, width, height, metadata }); + } + } + + // get opi + if ('opi' in data) { + for (let i = 0; i < data.opi.length; i += 1) { + const node = data.opi[i]; + const nodeId = `opi-${i}`; + const label = node.name; + const width = 50; + const height = 50; + const metadata = node.metadata; + graph.setNode(nodeId, { label, width, height, metadata }); + } + } + + // set pic + if ('pic' in data) { + for (let i = 0; i < data.pic.length; i += 1) { + const node = data.pic[i]; + const nodeId = `pic-${i}`; + const label = node.name; + const width = 50; + const height = 50; + const metadata = node.metadata; + graph.setNode(nodeId, { label, width, height, metadata }); + } + } + + // set poc + if ('poc' in data) { + for (let i = 0; i < data.poc.length; i += 1) { + const node = data.poc[i]; + const nodeId = `poc-${i}`; + const label = node.name; + const width = 50; + const height = 50; + const metadata = node.metadata; + graph.setNode(nodeId, { label, width, height, metadata }); + } + } + + // set pil + if ('pil' in data) { + for (let i = 0; i < data.pil.length; i += 1) { + const node = data.pil[i]; + const nodeId = `pil-${i}`; + const label = node.name; + const width = 50; + const height = 50; + const metadata = node.metadata; + graph.setNode(nodeId, { label, width, height, metadata }); + } + } + + // set pol + if ('pol' in data) { + for (let i = 0; i < data.pol.length; i += 1) { + const node = data.pol[i]; + const nodeId = `pol-${i}`; + const label = node.name; + const width = 50; + const height = 50; + const metadata = node.metadata; + graph.setNode(nodeId, { label, width, height, metadata }); + } + } + + + + if ('wff' in data) { + for (let i = 0; i < data.wff.length; i += 1) { + const edge = data.wff[i]; + const srcNodeId = `pif-${edge.src - 1}`; + const tgtNodeId = `pof-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } +// set edges wfopi +if ('wfopi' in data) { + for (let i = 0; i < data.wfopi.length; i += 1) { + const edge = data.wfopi[i]; + const srcNodeId = `pif-${edge.src - 1}`; + const tgtNodeId = `opi-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set edges wfopo + if ('wfopo' in data) { + for (let i = 0; i < data.wfopo.length; i += 1) { + const edge = data.wfopo[i]; + const srcNodeId = `opo-${edge.src - 1}`; + const tgtNodeId = `pof-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set edges wopio + if ('wopio' in data) { + for (let i = 0; i < data.wopio.length; i += 1) { + const edge = data.wopio[i]; + const srcNodeId = `opo-${edge.src - 1}`; + const tgtNodeId = `opi-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set wfc + if ('wfc' in data) { + for (let i = 0; i < data.wfc.length; i += 1) { + const edge = data.wfc[i]; + const srcNodeId = `pic-${edge.src - 1}`; + const tgtNodeId = `pof-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set wcf + if ('wcf' in data) { + for (let i = 0; i < data.wcf.length; i += 1) { + const edge = data.wcf[i]; + const srcNodeId = `pif-${edge.src - 1}`; + const tgtNodeId = `poc-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set wcc + if ('wcc' in data) { + for (let i = 0; i < data.wcc.length; i += 1) { + const edge = data.wcc[i]; + const srcNodeId = `pic-${edge.src - 1}`; + const tgtNodeId = `poc-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set edges wcopi + if ('wcopi' in data) { + for (let i = 0; i < data.wcopi.length; i += 1) { + const edge = data.wcopi[i]; + const srcNodeId = `pic-${edge.src - 1}`; + const tgtNodeId = `opi-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set edges wcopo + if ('wcopo' in data) { + for (let i = 0; i < data.wcopo.length; i += 1) { + const edge = data.wcopo[i]; + const srcNodeId = `opo-${edge.src - 1}`; + const tgtNodeId = `poc-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } +// set wfl +if ('wfl' in data) { + for (let i = 0; i < data.wfl.length; i += 1) { + const edge = data.wfl[i]; + const srcNodeId = `pil-${edge.src - 1}`; + const tgtNodeId = `pof-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set wcl + if ('wcl' in data) { + for (let i = 0; i < data.wcl.length; i += 1) { + const edge = data.wcl[i]; + const srcNodeId = `pil-${edge.src - 1}`; + const tgtNodeId = `poc-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set wlopi + if ('wlopi' in data) { + for (let i = 0; i < data.wlopi.length; i += 1) { + const edge = data.wlopi[i]; + const srcNodeId = `pil-${edge.src - 1}`; + const tgtNodeId = `opi-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set wll + if ('wll' in data) { + for (let i = 0; i < data.wll.length; i += 1) { + const edge = data.wll[i]; + const srcNodeId = `pil-${edge.src - 1}`; + const tgtNodeId = `pol-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set wlf + if ('wlf' in data) { + for (let i = 0; i < data.wlf.length; i += 1) { + const edge = data.wlf[i]; + const srcNodeId = `pif-${edge.src - 1}`; + const tgtNodeId = `pol-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set wlc + if ('wlc' in data) { + for (let i = 0; i < data.wlc.length; i += 1) { + const edge = data.wlc[i]; + const srcNodeId = `pic-${edge.src - 1}`; + const tgtNodeId = `pol-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } + + // set wlopo + if ('wlopo' in data) { + for (let i = 0; i < data.wlopo.length; i += 1) { + const edge = data.wlopo[i]; + const srcNodeId = `opo-${edge.src - 1}`; + const tgtNodeId = `pol-${edge.tgt - 1}`; + if (graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId)) { + graph.setEdge(srcNodeId, tgtNodeId); + } else if (graph.hasNode(srcNodeId) && !graph.hasNode(tgtNodeId)) { + const WnodeId = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else if ((!graph.hasNode(srcNodeId) && graph.hasNode(tgtNodeId))) { + const WnodeId = srcNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } else { + const WnodeId1 = srcNodeId; + const WnodeId2 = tgtNodeId; + const label = "err"; + const width = 50; + const height = 50; + graph.setNode(WnodeId1, { label, width, height}); + graph.setNode(WnodeId2, { label, width, height}); + graph.setEdge(srcNodeId, tgtNodeId); + } + } + } +// console.log(graph) + let nodesWithTargetLabel = []; + graph.nodes().forEach(function(node) { + if (graph.node(node).label === "err") { + nodesWithTargetLabel.push(node); + } + }); + return nodesWithTargetLabel; + } \ No newline at end of file