diff --git a/kadmos/vistoms/static/lib/style.css b/kadmos/vistoms/static/lib/style.css
index 1024bfe8499bacfed1cfa5fa456fe98f227efb11..fe97d6f5bef6de865964ca9976f717721ff678bb 100644
--- a/kadmos/vistoms/static/lib/style.css
+++ b/kadmos/vistoms/static/lib/style.css
@@ -99,6 +99,12 @@ stroke: black;
stroke-width: 1px;
}
+.xdsm .surrogatemodel {
+fill: #FFFCCC;
+stroke: black;
+stroke-width: 1px;
+}
+
.xdsm .rcganalysis {
fill: #E5DEB3;
stroke: black;
diff --git a/kadmos/vistoms/templates/VISTOMS.html b/kadmos/vistoms/templates/VISTOMS.html
index 588e6183758aea09cab333770c8625eeaa023679..d8b85e1b8fc4b6b53dd76657adfe8529d0bb697a 100644
--- a/kadmos/vistoms/templates/VISTOMS.html
+++ b/kadmos/vistoms/templates/VISTOMS.html
@@ -122,7 +122,8 @@
}
//##############################################################
-
+ //aigner: Function to filter a list with a search
+ //##############################################################
function filterSearch()
{
var input, filter, table, tr, td, i;
@@ -146,7 +147,106 @@
}
}
}
-
+
+ //aigner: General functions for tree layout
+ //##############################################################
+ //Function to prune the tree according to list of xPaths that are actually there
+ function prune_tree(aPipeData,aTreeData,direction="none")
+ {
+ //First, clean up pipeData if necessary
+ var cleanPipeData = aPipeData.split(",")
+ var index = cleanPipeData.indexOf("");
+ if (index > -1) {cleanPipeData.splice(index, 1);}
+ var firstEl = cleanPipeData[0].split("/")[1]
+ for (var i=0; i < aTreeData.length; ++i)
+ {
+ var treeElement = aTreeData[i];
+ var relevant_xPath = "/"+firstEl+treeElement.xPath.split(firstEl)[1]
+ if(cleanPipeData.indexOf(relevant_xPath)<=-1)
+ {
+ aTreeData.splice(i,1);
+ i--;
+ }
+ else
+ {
+ if (direction=="in")
+ {
+ aTreeData[i].pipeLineIn = true;
+ }
+ else if (direction=="out")
+ {
+ aTreeData[i].pipeLineOut = true;
+ }
+ }
+ }
+ }
+
+ function childExists(name, children)
+ {
+ var exists = false
+ children.forEach(function(child)
+ {
+ if (child.name == name)
+ {
+ exists = true;
+ }
+ })
+ return exists;
+ }
+
+ //Function to create the tree layout by appending children to the layout
+ function appendChildren(anElement, aParent, xPath_list)
+ {
+ if (xPath_list.length > 0)
+ {
+ //If element has no children yet, initialize children array
+ if (!aParent.children){aParent.children = [];}
+ //Create a new child element, if it does not exist yet
+ if (!childExists(xPath_list[0], aParent.children))
+ {
+ //Create a new child object
+ var newChild = {level: aParent.level+1, name: xPath_list[0], type: "variable", xPath: aParent.xPath+"/"+xPath_list[0]};
+ if (anElement.pipeLineIn){newChild.pipeLineIn=true}
+ if (anElement.pipeLineOut){newChild.pipeLineOut=true}
+ aParent.children.push(newChild);
+ }
+ aParent.children.forEach(function(aChild)
+ {
+ if (xPath_list[0] == aChild.name)
+ {
+ let newXPath_list = JSON.parse(JSON.stringify(xPath_list));
+ newXPath_list.shift();
+ appendChildren(anElement, aChild, newXPath_list)
+ }
+ })
+ }
+ else
+ {
+ aParent.value = anElement.value;
+ }
+ }
+
+ //function builds tree layout from xPaths of the elements
+ function buildTree(root, aTreeData)
+ {
+ aTreeData.forEach(function(treeElement)
+ {
+ var xPath_split = treeElement.xPath.split("/");
+ var index = xPath_split.indexOf("");
+ if (index > -1) {xPath_split.splice(index, 1);}
+ root.level = 0
+ root.name = xPath_split[0]
+ root.xPath = "/"+xPath_split[0]
+ <!-- console.log("####################") -->
+ <!-- console.log(treeElement.xPath) -->
+ let newXPath_split = JSON.parse(JSON.stringify(xPath_split));
+ newXPath_split.shift();
+ appendChildren(treeElement, root, newXPath_split)
+ <!-- console.log("DONE!") -->
+ <!-- console.log("####################") -->
+ })
+ }
+ //##############################################################
function makeKadmosMenu(data, initial=false)
@@ -18651,9 +18751,6 @@
currentGraph = graphs[i]
}
}
-
- console.log(currentGraph)
-
varCategories = entireData.categories;
//aigner: Get xdsm data
@@ -21132,13 +21229,12 @@
var headLine = "Edge Information (" + anEdge.from + " - " + anEdge.to + ")";
var anEdgeNameSplit = anEdge.name.split(',')
var numberOfconnections = anEdgeNameSplit.length;
- var theLeafNodes = [];
var dimension=0;
var nullDim=false;
var undefinedLeafs;
- var treeData = jQuery.extend(true, {}, currentGraph.variableSchemes[varCategories[0].name]);
+ var theLeafNodes = (JSON.parse(JSON.stringify(currentGraph.variableSchemes[varCategories[0].name])));
var pipeData = anEdge.name;
- getPrunedLeafNodes("/"+treeData.name+"/", treeData.children, pipeData, theLeafNodes)
+ prune_tree(pipeData,theLeafNodes)
var undefLeafsNumber=0;
var defLeafsNumber=0;
for (var k=0;k<theLeafNodes.length;k++)
@@ -21324,111 +21420,21 @@
})
}
+
function maketreeLayout(pipeData, layout, svg, div, aName, aVarCategory)
{
var treeData = (JSON.parse(JSON.stringify(currentGraph.variableSchemes[aVarCategory])));
- //aigner: Here, the minimalized tree is created!
+ //aigner: Build the tree layout
//######################################################################
//Function to prune the tree according to list of xPaths that are actually there
- function prune_tree(aPipeData,aTreeData,direction="none")
- {
- //First, clean up pipeData if necessary
- var cleanPipeData = aPipeData.split(",")
- var index = cleanPipeData.indexOf("");
- if (index > -1) {cleanPipeData.splice(index, 1);}
- var firstEl = cleanPipeData[0].split("/")[1]
- for (i=0; i < aTreeData.length; ++i)
- {
- var treeElement = aTreeData[i];
- var relevant_xPath = "/"+firstEl+treeElement.xPath.split(firstEl)[1]
- if(cleanPipeData.indexOf(relevant_xPath)<=-1)
- {
- aTreeData.splice(i,1);
- i--;
- }
- else
- {
- if (direction=="in")
- {
- aTreeData[i].pipeLineIn = true;
- }
- else if (direction=="out")
- {
- aTreeData[i].pipeLineOut = true;
- }
- }
- }
- }
//The tree will only be pruned if there is pipeData, such as in an edge or for the input of a tool
if (pipeData)
{
prune_tree(pipeData, treeData);
}
- function childExists(name, children){
- var exists = false
- children.forEach(function(child)
- {
- if (child.name == name)
- {
- exists = true;
- }
- })
- return exists;
- }
-
- //Function to create the tree layout by appending children to the layout
- function appendChildren(anElement, aParent, xPath_list)
- {
- if (xPath_list.length > 0)
- {
- //If element has no children yet, initialize children array
- if (!aParent.children){aParent.children = [];}
- //Create a new child element, if it does not exist yet
- if (!childExists(xPath_list[0], aParent.children))
- {
- //Create a new child object
- var newChild = {level: aParent.level+1, name: xPath_list[0], type: "variable", xPath: aParent.xPath+"/"+xPath_list[0]};
- aParent.children.push(newChild);
- }
- aParent.children.forEach(function(aChild)
- {
- if (xPath_list[0] == aChild.name)
- {
- let newXPath_list = JSON.parse(JSON.stringify(xPath_list));
- newXPath_list.shift();
- appendChildren(anElement, aChild, newXPath_list)
- }
- })
- }
- else
- {
- aParent.value = anElement.value;
- }
- }
-
- var newTree = {};
- //function builds tree layout from xPaths of the elements
- function buildTree(root, aTreeData)
- {
- aTreeData.forEach(function(treeElement)
- {
- var xPath_split = treeElement.xPath.split("/");
- var index = xPath_split.indexOf("");
- if (index > -1) {xPath_split.splice(index, 1);}
- root.level = 0
- root.name = xPath_split[0]
- root.xPath = "/"+xPath_split[0]
- <!-- console.log("####################") -->
- <!-- console.log(treeElement.xPath) -->
- let newXPath_split = JSON.parse(JSON.stringify(xPath_split));
- newXPath_split.shift();
- appendChildren(treeElement, root, newXPath_split)
- <!-- console.log("DONE!") -->
- <!-- console.log("####################") -->
- })
- }
//build tree layout for vistoms
+ var newTree = {};
buildTree(newTree, treeData)
treeData = newTree
//######################################################################
@@ -21657,17 +21663,7 @@
y_tmp = d.y;
});
- function getTextWidth(text, font)
- {
- // re-use canvas object for better performance
- var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
- var context = canvas.getContext("2d");
- context.font = font;
- var metrics = context.measureText(text);
- return metrics.width;
- }
newWidth=Math.max(newWidth,getTextWidth(aName,"Arial 12pt"));
-
//aigner: Adjust height and width of the frame
$('.treeDiv').lobiPanel('setWidth', newWidth + margin.top + margin.bottom +400+maxLabelLength*25+offset_tmp);
$('.treeDiv').lobiPanel('setHeight', newHeight + margin.top + 2*margin.bottom+offset_tmp);
@@ -21934,7 +21930,6 @@
function unmarkVariable(aNode)
{
- console.log(currentGraph.variableSchemes["schema"])
var firstFromSchema = currentGraph.variableSchemes["schema"].name
function getFullXPath(data,aText)
{
@@ -22942,47 +22937,62 @@
}
- var headLine = "Edge Information (" + aLink.source.key + " - " + aLink.target.key + ")";
- var anEdgeNameSplit = aLink.name.split(',')
- var numberOfconnections = anEdgeNameSplit.length;
- var theLeafNodes = [];
- var dimension=0;
- var nullDim=false;
- var undefinedLeafs;
- var treeData = jQuery.extend(true, {}, currentGraph.variableSchemes[varCategories[0].name]);
- var pipeData = aLink.name;
- getPrunedLeafNodes("/"+treeData.name+"/", treeData.children, pipeData, theLeafNodes)
- var undefLeafsNumber=0;
- var defLeafsNumber=0;
- for (var k=0;k<theLeafNodes.length;k++)
- {
- if (theLeafNodes[k].dimension!=null){dimension = dimension+theLeafNodes[k].dimension}
- else{nullDim=true}
- if (theLeafNodes[k].value.includes("could not be found")||theLeafNodes[k].value.includes("unknown"))
- {
- if (undefLeafsNumber==0){undefinedLeafs += theLeafNodes[k].xPath;}
- else {undefinedLeafs += "," + theLeafNodes[k].xPath;}
- undefLeafsNumber ++;
- }
- else
- {
- defLeafsNumber++;
- }
- }
+ var headLine = "Edge Information (" + aLink.source.key + " - " + aLink.target.key + ")";
+ var pipeData_in = aLink.pipeDataName_in;
+ var pipeData_out = aLink.pipeDataName_in;
+ var theLeafNodes_in = JSON.parse(JSON.stringify(currentGraph.variableSchemes[varCategories[0].name]));
+ var theLeafNodes_out = JSON.parse(JSON.stringify(currentGraph.variableSchemes[varCategories[0].name]));
+ prune_tree(pipeData_in,theLeafNodes_in)
+ prune_tree(pipeData_out,theLeafNodes_out)
+
+ var nullDim_in=false;
+ var dimension_in=0;
+ var undefLeafsNumber_in=0;
+ var defLeafsNumber_in=0;
+ var nullDim_out=false;
+ var dimension_out=0;
+ var undefLeafsNumber_out=0;
+ var defLeafsNumber_out=0;
+ function getUndefinedLeafNodes(theLeafNodes,defLeafsNumber,undefLeafsNumber,dimenson,nullDim)
+ {
+ for (var k=0;k<theLeafNodes.length;k++)
+ {
+ if (theLeafNodes[k].dimension!=null){dimension = dimension+theLeafNodes[k].dimension}
+ else{nullDim=true}
+ if (theLeafNodes[k].value.includes("could not be found")||theLeafNodes[k].value.includes("unknown"))
+ {
+ undefLeafsNumber ++;
+ }
+ else
+ {
+ defLeafsNumber++;
+ }
+ }
+ }
+ getUndefinedLeafNodes(theLeafNodes_in,defLeafsNumber_in,undefLeafsNumber_in,dimension_in,nullDim_in)
+ getUndefinedLeafNodes(theLeafNodes_out,defLeafsNumber_out,undefLeafsNumber_out,dimension_out,nullDim_out)
//Render data for table
var data = [];
- data.push({ "name" : "Total number of connections", "value" : numberOfconnections })
- data.push({ "name" : "Number of referenced connections", "value" : defLeafsNumber })
- data.push({ "name" : "Dimension of referenced connections", "value" : String(dimension) })
- if (undefinedLeafs)
+ data.push({ "name" : "Total number of connections", "value" : aLink.pipeDataName_in.split(",").length+aLink.pipeDataName_out.split(",").length })
+
+ data.push({ "name" : "Total number of incoming connections", "value" : aLink.pipeDataName_in.split(",").length })
+ data.push({ "name" : "Number of referenced incoming connections", "value" : defLeafsNumber_in })
+ data.push({ "name" : "Dimension of referenced outgoing connections", "value" : String(dimension_in) })
+ if (undefLeafsNumber_in>0)
{
- data.push({ "name" : "Number of unreferenced connections", "value" : undefLeafsNumber})
+ data.push({ "name" : "Number of unreferenced incoming connections", "value" : undefLeafsNumber_in})
}
-
-
+ data.push({ "name" : "Total number of outgoing connections", "value" : aLink.pipeDataName_out.split(",").length })
+ data.push({ "name" : "Number of referenced outgoing connections", "value" : defLeafsNumber_out })
+ data.push({ "name" : "Dimension of referenced outgoing connections", "value" : String(dimension_out) })
+ if (undefLeafsNumber_out>0)
+ {
+ data.push({ "name" : "Number of unreferenced incoming connections", "value" : undefLeafsNumber_out})
+ }
+
+
var d3_body = d3.select("body");
-
var panel_div = d3_body.append("div").attr("class", "myPanel panel-default")
panel_div.append("div").attr("class","panel-heading")
.append("div").attr("class","panel_title").append("h4").text(headLine)
@@ -23394,184 +23404,13 @@
function include(arr,obj) {
return (arr.indexOf(obj) != -1);
}
-
- function prune_schema(parentXPath, objArray, xPathList_in, xPathList_out)
- {
- var firstElement_in = "/"+xPathList_in.split("/")[1]+"/";
- var firstElement_out = "/"+xPathList_out.split("/")[1]+"/";
- for (var i = 0; i < objArray.length; ++i)
- {
- var obj = objArray[i];
- obj.pipeLineIn = false;
- obj.pipeLineOut = false;
- var objXPath;
-
- //aigner: If object has children append a "/" as xPath separator
- //else append comma as indicator for last element in the xPath
- if (obj.children){objXPath = parentXPath+objArray[i].name+"/";}
- else{objXPath = parentXPath+objArray[i].name;}
- var objXPathFromFirst_in = objXPath.split(firstElement_in);
- var objXPathFromFirst_out = objXPath.split(firstElement_out);
-
- // console.log("Current node ->")
- // console.log(firstElement_in+objXPathFromFirst_in[1])
- // console.log(firstElement_out+objXPathFromFirst_out[1])
- // console.log(xPathList_out)
-
- var delete_it = true;
- if (xPathList_in!="")
- {
- if(objXPathFromFirst_in[1]==undefined)
- {
- delete_it = false;
- }
- else
- {
- if (include(xPathList_in, firstElement_in+objXPathFromFirst_in[1]))
- {
- obj.pipeLineIn = true;
- delete_it = false;
- }
- }
- }
- if (xPathList_out!="")
- {
- if(objXPathFromFirst_out[1]==undefined)
- {
- delete_it = false;
- }
- else
- {
- if (include(xPathList_out, firstElement_out+objXPathFromFirst_out[1]))
- {
- obj.pipeLineOut = true;
- delete_it = false;
- }
- }
- }
-
- if (delete_it==true)
- {
- // console.log("delete ->")
- // console.log( objXPathFromFirst_in[1])
- // console.log(xPathList)
-
- objArray.splice(i, 1);
- i--;
- }
- else
- {
- // console.log("do not delete ->")
- // console.log(objXPath);
- if (obj.children)
- {
- if (obj.children.length==0)
- {
- objArray.splice(i, 1);
- i--;
- prune_schema(parentXPath, objArray, xPathList_in, xPathList_out)
- }
- else{prune_schema(objXPath, obj.children, xPathList_in, xPathList_out);}
-
- }
- }
- }
- }
- function getPrunedLeafNodes(parentXPath, objArray, xPathList, leafNodes)
- {
- var firstElement = "/"+xPathList.split("/")[1]+"/";
- for (var i = 0; i < objArray.length; ++i)
- {
- var obj = objArray[i];
- var objXPath;
-
- //aigner: If object has children append a "/" as xPath separator
- //else append comma as indicator for last element in the xPath
- if (obj.children){objXPath = parentXPath+objArray[i].name+"/";}
- else{objXPath = parentXPath+objArray[i].name;}
- var objXPathFromFirst = objXPath.split(firstElement);
-
- // console.log("Current node ->")
- // console.log(firstElement+objXPathFromFirst[1])
- // console.log(xPathList)
-
- var delete_it = true;
- if(objXPathFromFirst[1]==undefined)
- {
- delete_it = false;
- }
- else
- {
- if (include(xPathList, firstElement+objXPathFromFirst[1]))
- {
- delete_it = false;
- }
- }
- if (delete_it==true)
- {
- // console.log("delete ->")
- // console.log( objXPathFromFirst[1])
- // console.log(xPathList)
-
- objArray.splice(i, 1);
- i--;
- }
- else
- {
- // console.log("do not delete ->")
- // console.log(objXPath);
- if (obj.children)
- {
- if (obj.children.length==0)
- {
- objArray.splice(i, 1);
- i--;
- getPrunedLeafNodes(parentXPath, objArray, xPathList, leafNodes)
- }
- else{getPrunedLeafNodes(objXPath, obj.children, xPathList, leafNodes);}
- }
- else
- {
- obj.xPath = objXPath;
- leafNodes.push(obj);
- };
- }
- }
- }
- function clean_tree(objArray)
- {
- for (var i = 0; i < objArray.length; ++i)
- {
- var obj = objArray[i];
- if (obj.children)
- {
- if (obj.children.length==0)
- {
- objArray.splice(i, 1);
- i--;
- }
- clean_tree(obj.children);
- }
- }
- }
- function countElements(node, counter)
- {
- counter ++;
- if (node.children)
- {
- if (node.children.length !== 0)
- {
- node.children.forEach(function(n)
- {
- counter = countElements(n, counter);
- });
- }
- }
- return counter;
- }
-
+
+
+
function createTreeLayout(theName, schema,aLink,theAllLinks)
{
+ //aigner: Build the tree layout
+ //######################################################################
var theLink = aLink;
if (aLink.source && aLink.target)
{
@@ -23605,156 +23444,31 @@
}
}
- var treeData = (JSON.parse(JSON.stringify(schema)));
-
- function put_xmlPaths_for_all(aNode, anxPath)
- {
- if (anxPath!="")
- {aNode.xPath = anxPath+"/"+aNode.name;}
- else{aNode.xPath = "/"+aNode.name;}
-
- if (aNode.children)
- {
- aNode.children.forEach(function (aChild)
- {
- put_xmlPaths_for_all(aChild, aNode.xPath)
- })
-
- }
- }
- //put_xmlPaths_for_all(treeData, "")
-
-
- if (false)
- {
- console.log(theLink.name_in)
- console.log(theLink.name_out)
- prune_schema("/"+treeData.name+"/", treeData.children, theLink.name_in, theLink.name_out);
- //aigner: count all descendants of a node
- var firstEl = theLink.name.split("/")[1];
- if(firstEl != treeData.name)
- {
- var cleanOperations = countElements(treeData,0)
- for (var i=0; i<cleanOperations; i++){clean_tree(treeData.children);}
- }
- }
-
- ///aigner: HIER WEITER
- //aigner: New implementation start
- //######################################################################
- var treeData = (JSON.parse(JSON.stringify(schema)));
+ var treeData_in = (JSON.parse(JSON.stringify(schema)));
+ var treeData_out = (JSON.parse(JSON.stringify(schema)));
//aigner: Here, the minimalized tree is created!
-
- //Function to prune the tree according to list of xPaths that are actually there
- function prune_tree(aPipeData,aTreeData,direction="none")
- {
- //First, clean up pipeData if necessary
- var cleanPipeData = aPipeData.split(",")
- var index = cleanPipeData.indexOf("");
- if (index > -1) {cleanPipeData.splice(index, 1);}
- var firstEl = cleanPipeData[0].split("/")[1]
- for (i=0; i < aTreeData.length; ++i)
- {
- var treeElement = aTreeData[i];
- var relevant_xPath = "/"+firstEl+treeElement.xPath.split(firstEl)[1]
- if(cleanPipeData.indexOf(relevant_xPath)<=-1)
- {
- aTreeData.splice(i,1);
- i--;
- }
- else
- {
- if (direction=="in")
- {
- treeElement.pipeLineIn = true;
- }
- else if (direction=="out")
- {
- treeElement.pipeLineOut = true;
- }
- }
- }
- }
//The tree will only be pruned if there is pipeData, such as in an edge or for the input of a tool
if (theLink)
{
- prune_tree(theLink.name_in, treeData, "in");
- prune_tree(theLink.name_in, treeData, "out");
- }
-
- function childExists(name, children){
- var exists = false
- children.forEach(function(child)
+ if (theLink.name_in)
{
- if (child.name == name)
- {
- exists = true;
- }
- })
- return exists;
- }
-
- //Function to create the tree layout by appending children to the layout
- function appendChildren(anElement, aParent, xPath_list)
- {
- if (xPath_list.length > 0)
- {
- //If element has no children yet, initialize children array
- if (!aParent.children){aParent.children = [];}
- //Create a new child element, if it does not exist yet
- if (!childExists(xPath_list[0], aParent.children))
- {
- //Create a new child object
- var newChild = {level: aParent.level+1, name: xPath_list[0], type: "variable", xPath: aParent.xPath+"/"+xPath_list[0]};
- aParent.children.push(newChild);
- }
- aParent.children.forEach(function(aChild)
- {
- if (xPath_list[0] == aChild.name)
- {
- let newXPath_list = JSON.parse(JSON.stringify(xPath_list));
- newXPath_list.shift();
- appendChildren(anElement, aChild, newXPath_list)
- }
- })
+ prune_tree(theLink.name_in, treeData_in, "in");
}
- else
+ else{treeData_in=[]}
+ if (theLink.name_out)
{
- aParent.value = anElement.value;
+ prune_tree(theLink.name_out, treeData_out, "out");
}
+ else{treeData_out=[]}
}
-
- var newTree = {};
- //function builds tree layout from xPaths of the elements
- function buildTree(root, aTreeData)
- {
- aTreeData.forEach(function(treeElement)
- {
- var xPath_split = treeElement.xPath.split("/");
- var index = xPath_split.indexOf("");
- if (index > -1) {xPath_split.splice(index, 1);}
- root.level = 0
- root.name = xPath_split[0]
- root.xPath = "/"+xPath_split[0]
- <!-- console.log("####################") -->
- <!-- console.log(treeElement.xPath) -->
- let newXPath_split = JSON.parse(JSON.stringify(xPath_split));
- newXPath_split.shift();
- appendChildren(treeElement, root, newXPath_split)
- <!-- console.log("DONE!") -->
- <!-- console.log("####################") -->
- })
- }
+
//build tree layout for vistoms
+ var treeData = treeData_in.concat(treeData_out)
+ var newTree = {};
buildTree(newTree, treeData)
treeData = newTree
//######################################################################
- //aigner: New implementation end
-
-
-
-
var width= 1000;
var height= 500;
var xOffset = 10;
@@ -23888,14 +23602,23 @@
//aigner: Here the tree layout is created
- var treeLayoutdiv = d3.select(".edgeBundlesDiv").append("div").attr("class","treeDiv_"+theName)
- .style("left",(d3.event.pageX) + "px")
- .style("top",(d3.event.pageY - 28) + "px")
- .style("position", "absolute")
- .on("mousedown", function(d) {
- d3.select(this).moveToFront();
- })
-
+ var d3_body = d3.select("body")
+ var treeLayoutdiv = d3_body.append("div").attr("class","treeDiv panel-default")
+ .style("left","200px")
+ .style("top","200px")
+ .style("position", "absolute")
+ treeLayoutdiv.append("div").attr("class","panel-heading")
+ .append("div").attr("class","panel_title").append("h4").text(theName)
+ $('.treeDiv').lobiPanel({
+ reload: false,
+ editTitle: false,
+ unpin: false,
+ minWidth: 200,
+ maxWidth: 100000,
+ minHeight: 200,
+ maxHeight: 100000,
+ });
+ $('.treeDiv').lobiPanel('unpin');
var treeLayoutSVG = treeLayoutdiv.append("svg").attr("class","treeLayoutSVG")
var treeGroup = treeLayoutSVG.append("g").attr("class","treeGroup").style("position","absolute")
.attr("transform", "translate(50,0)");
@@ -23916,70 +23639,13 @@
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
- //Drag Function for treeLayout
- var xPos_init = d3.event.pageX - 2;
- var yPos_init = d3.event.pageY - 2;
- var xOffset_tmp;
- var yOffset_tmp;
- var drag = d3.behavior.drag()
- .on("dragstart", dragstarted)
- .on("drag", dragged)
- .on("dragend", dragended);
- function dragstarted() {
- d3.select(this).style("cursor", "grabbing")
- xOffset_tmp = xPos_init-d3.event.sourceEvent.pageX;
- yOffset_tmp = yPos_init-d3.event.sourceEvent.pageY;
- }
- function dragged() {
- d3.select(this)
- .style("cursor", "grabbing")
- .style("left",(d3.event.sourceEvent.pageX+xOffset_tmp) + "px")
- .style("top",(d3.event.sourceEvent.pageY+yOffset_tmp) + "px")
- }
- function dragended() {
- d3.select(this).style("cursor", "grab")
- xPos_init = d3.event.sourceEvent.pageX+xOffset_tmp;
- yPos_init = d3.event.sourceEvent.pageY+yOffset_tmp;
- }
- treeLayoutdiv.call(drag);
+
var frame = treeGroup.append("rect")
.attr("class","treeFrame")
.attr("stroke-width", 1)
.attr("stroke", "white")
- .attr("fill-opacity", .8);
-
- var removeSymbol = treeGroup.append("g").attr("class", "remove"+d3.event.pageX+"_"+d3.event.pageX)
-
-
- var r=8;
- var cx=r+2;
- var cy=r+2;
- var circle = removeSymbol.append("circle")
- .attr("cx", cx)
- .attr("cy", cy)
- .attr("r", r)
- .style("stroke", "black")
- .style("stroke-width", 1.5)
- .style("fill", "red")
- .style("fill-opacity", .6)
- var minus = removeSymbol.append("line")
- .attr("x1", cx+r/2)
- .attr("y1", cy)
- .attr("x2", cx-r/2)
- .attr("y2", cy)
- .style("stroke", "black")
- .style("stroke-width", 1.5);
-
- removeSymbol
- .on("mouseover", function(){
- d3.select(this).style("cursor", "pointer")
- circle.style("fill", "red").style("fill-opacity", .8);})
- .on("mouseout", function(){circle.style("fill", "red").style("fill-opacity", .6)})
- .on("mousedown",function()
- {
- treeLayoutdiv.remove();
- })
+ .attr("fill-opacity", .8);
// Define the root
@@ -23995,16 +23661,7 @@
collapse(root);
update(root,theAllLinks);
-
- var frametext = treeGroup.append("text")
- .attr("class", "frametext")
- .attr("x",30)
- .attr("y",15)
- .attr("text-anchor","start")
- .attr("font-family","Arial")
- .attr("font-size","18px")
- .attr("font-weight","bold")
- .text(theName)
+
function update(source,allLinks) {
// Compute the new height, function counts total children of root node and sets tree height accordingly.
@@ -24116,23 +23773,11 @@
// console.log("##############")
});
- function getTextWidth(text, font)
- {
- // re-use canvas object for better performance
- var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
- var context = canvas.getContext("2d");
- context.font = font;
- var metrics = context.measureText(text);
- return metrics.width;
- }
- newWidth=Math.max(newWidth,getTextWidth(theName,"Arial 12pt"));
-
- // console.log(depths)
- // console.log(labelLength)
+ newWidth=Math.max(newWidth,getTextWidth(theName,"Arial 12pt"));
//aigner: Adjust height and width of the frame
- treeLayoutdiv = treeLayoutdiv.attr("height", newHeight + margin.top + margin.bottom+offset_tmp)
- treeLayoutdiv = treeLayoutdiv.attr("width", newWidth + margin.top + margin.bottom +300+maxLabelLength*25+offset_tmp)
+ $('.treeDiv').lobiPanel('setWidth', newWidth + margin.top + margin.bottom +400+maxLabelLength*25+offset_tmp);
+ $('.treeDiv').lobiPanel('setHeight', newHeight + margin.top + 2*margin.bottom+offset_tmp);
treeLayoutSVG = treeLayoutSVG.attr("height", newHeight + margin.top + margin.bottom+offset_tmp)
treeLayoutSVG = treeLayoutSVG.attr("width", newWidth + margin.top + margin.bottom +300+maxLabelLength*25+offset_tmp)
frame = frame.attr("height", newHeight + margin.top + margin.bottom)
@@ -25903,13 +25548,12 @@
var headLine = "Edge Information (" + aLink.from + " - " + aLink.to + ")";
var anEdgeNameSplit = aLink.name.split(',')
var numberOfconnections = anEdgeNameSplit.length;
- var theLeafNodes = [];
var dimension=0;
var nullDim=false;
var undefinedLeafs;
- var treeData = jQuery.extend(true, {}, currentGraph.variableSchemes[varCategories[0].name]);
+ var theLeafNodes = JSON.parse(JSON.stringify(currentGraph.variableSchemes[varCategories[0].name]));
var pipeData = aLink.name;
- getPrunedLeafNodes("/"+treeData.name+"/", treeData.children, pipeData, theLeafNodes)
+ prune_tree(pipeData,theLeafNodes)
var undefLeafsNumber=0;
var defLeafsNumber=0;
for (var k=0;k<theLeafNodes.length;k++)
@@ -26374,189 +26018,25 @@
}
- function prune_schema(parentXPath, objArray, xPathList)
- {
- var firstElement = "/"+xPathList.split("/")[1]+"/";
- for (var i = 0; i < objArray.length; ++i)
- {
- var obj = objArray[i];
- var objXPath;
-
- //aigner: If object has children append a "/" as xPath separator
- //else append comma as indicator for last element in the xPath
- if (obj.children){objXPath = parentXPath+objArray[i].name+"/";}
- else{objXPath = parentXPath+objArray[i].name;}
- var objXPathFromFirst = objXPath.split(firstElement);
-
- // console.log("Current node ->")
- // console.log(firstElement+objXPathFromFirst[1])
- // console.log(xPathList)
-
- var delete_it = true;
- if(objXPathFromFirst[1]==undefined)
- {
- delete_it = false;
- }
- else
- {
- if (include(xPathList, firstElement+objXPathFromFirst[1]))
- {
- delete_it = false;
- }
- }
- if (delete_it==true)
- {
- // console.log("delete ->")
- // console.log( objXPathFromFirst[1])
- // console.log(xPathList)
-
- objArray.splice(i, 1);
- i--;
- }
- else
- {
- // console.log("do not delete ->")
- // console.log(objXPath);
- if (obj.children)
- {
- if (obj.children.length==0)
- {
- objArray.splice(i, 1);
- i--;
- prune_schema(parentXPath, objArray, xPathList)
- }
- else{prune_schema(objXPath, obj.children, xPathList);}
-
- }
- }
- }
- }
- function getPrunedLeafNodes(parentXPath, objArray, xPathList, leafNodes)
- {
- var firstElement = "/"+xPathList.split("/")[1]+"/";
- for (var i = 0; i < objArray.length; ++i)
- {
- var obj = objArray[i];
- var objXPath;
-
- //aigner: If object has children append a "/" as xPath separator
- //else append comma as indicator for last element in the xPath
- if (obj.children){objXPath = parentXPath+objArray[i].name+"/";}
- else{objXPath = parentXPath+objArray[i].name;}
- var objXPathFromFirst = objXPath.split(firstElement);
-
- // console.log("Current node ->")
- // console.log(firstElement+objXPathFromFirst[1])
- // console.log(xPathList)
-
- var delete_it = true;
- if(objXPathFromFirst[1]==undefined)
- {
- delete_it = false;
- }
- else
- {
- if (include(xPathList, firstElement+objXPathFromFirst[1]))
- {
- delete_it = false;
- }
- }
- if (delete_it==true)
- {
- // console.log("delete ->")
- // console.log( objXPathFromFirst[1])
- // console.log(xPathList)
-
- objArray.splice(i, 1);
- i--;
- }
- else
- {
- // console.log("do not delete ->")
- // console.log(objXPath);
- if (obj.children)
- {
- if (obj.children.length==0)
- {
- objArray.splice(i, 1);
- i--;
- getPrunedLeafNodes(parentXPath, objArray, xPathList, leafNodes)
- }
- else{getPrunedLeafNodes(objXPath, obj.children, xPathList, leafNodes);}
- }
- else
- {
- obj.xPath = objXPath;
- leafNodes.push(obj);
- };
- }
- }
- }
- function clean_tree(objArray)
- {
- for (var i = 0; i < objArray.length; ++i)
- {
- var obj = objArray[i];
- if (obj.children)
- {
- if (obj.children.length==0)
- {
- objArray.splice(i, 1);
- i--;
- }
- clean_tree(obj.children);
- }
- }
- }
- function countElements(node, counter)
- {
- counter ++;
- if (node.children)
- {
- if (node.children.length !== 0)
- {
- node.children.forEach(function(n)
- {
- counter = countElements(n, counter);
- });
- }
- }
- return counter;
- }
+
function createTreeLayout(theName,schema,theLinks,theAllLinks)
{
+ //aigner: Build the tree layout
+ //######################################################################
var treeData = (JSON.parse(JSON.stringify(schema)));
-
- function put_xmlPaths_for_all(aNode, anxPath)
+ //The tree will only be pruned if there is pipeData, such as in an edge or for the input of a tool
+ if (theLinks)
{
- if (anxPath!="")
- {aNode.xPath = anxPath+"/"+aNode.name;}
- else{aNode.xPath = "/"+aNode.name;}
-
- if (aNode.children)
- {
- aNode.children.forEach(function (aChild)
- {
- put_xmlPaths_for_all(aChild, aNode.xPath)
- })
-
- }
+ prune_tree(theLinks, treeData);
}
- put_xmlPaths_for_all(treeData, "")
- if (theLinks)
- {
- prune_schema("/"+treeData.name+"/", treeData.children, theLinks);
- //aigner: count all descendants of a node
- var firstEl = theLinks.split("/")[1];
- if(firstEl != treeData.name)
- {
- var cleanOperations = countElements(treeData,0)
- for (var i=0; i<cleanOperations; i++){clean_tree(treeData.children);}
- }
- }
-
-
+ //build tree layout for vistoms
+ var newTree = {};
+ buildTree(newTree, treeData)
+ treeData = newTree
+ //######################################################################
+
+
var width= 1000;
var height= 500;
var xOffset = 10;
@@ -26680,13 +26160,23 @@
//aigner: Here the tree layout is created
- var treeLayoutdiv = d3.select(".sankeyDiagramDiv").append("div").attr("class","treeDiv_"+theName)
- .style("left",(d3.event.pageX) + "px")
- .style("top",(d3.event.pageY - 28) + "px")
- .style("position", "absolute")
- .on("mousedown", function(d) {
- d3.select(this).moveToFront();
- })
+ var d3_body = d3.select("body")
+ var treeLayoutdiv = d3_body.append("div").attr("class","treeDiv panel-default")
+ .style("left","200px")
+ .style("top","200px")
+ .style("position", "absolute")
+ treeLayoutdiv.append("div").attr("class","panel-heading")
+ .append("div").attr("class","panel_title").append("h4").text(theName)
+ $('.treeDiv').lobiPanel({
+ reload: false,
+ editTitle: false,
+ unpin: false,
+ minWidth: 200,
+ maxWidth: 100000,
+ minHeight: 200,
+ maxHeight: 100000,
+ });
+ $('.treeDiv').lobiPanel('unpin');
var treeLayoutSVG = treeLayoutdiv.append("svg").attr("class","treeLayoutSVG")
var treeGroup = treeLayoutSVG.append("g").attr("class","treeGroup").style("position","absolute")
@@ -26708,74 +26198,12 @@
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
-
- //Drag Function for treeLayout
- var xPos_init = d3.event.pageX - 2;
- var yPos_init = d3.event.pageY - 2;
- var xOffset_tmp;
- var yOffset_tmp;
- var drag = d3.behavior.drag()
- .on("dragstart", dragstarted)
- .on("drag", dragged)
- .on("dragend", dragended);
- function dragstarted() {
- d3.select(this).style("cursor", "grabbing")
- xOffset_tmp = xPos_init-d3.event.sourceEvent.pageX;
- yOffset_tmp = yPos_init-d3.event.sourceEvent.pageY;
- }
- function dragged() {
- d3.select(this)
- .style("cursor", "grabbing")
- .style("left",(d3.event.sourceEvent.pageX+xOffset_tmp) + "px")
- .style("top",(d3.event.sourceEvent.pageY+yOffset_tmp) + "px")
- }
- function dragended() {
- d3.select(this).style("cursor", "grab")
- xPos_init = d3.event.sourceEvent.pageX+xOffset_tmp;
- yPos_init = d3.event.sourceEvent.pageY+yOffset_tmp;
- }
- treeLayoutdiv.call(drag);
-
-
- var frame = treeGroup.append("rect")
+
+ var frame = treeGroup.append("rect")
.attr("class","treeFrame")
.attr("stroke-width", 1)
.attr("stroke", "white")
- .attr("fill-opacity", .8);
-
- var removeSymbol = treeGroup.append("g").attr("class", "remove"+d3.event.pageX+"_"+d3.event.pageX)
-
-
- var r=8;
- var cx=r+2;
- var cy=r+2;
- var circle = removeSymbol.append("circle")
- .attr("cx", cx)
- .attr("cy", cy)
- .attr("r", r)
- .style("stroke", "black")
- .style("stroke-width", 1.5)
- .style("fill", "red")
- .style("fill-opacity", .6)
- var minus = removeSymbol.append("line")
- .attr("x1", cx+r/2)
- .attr("y1", cy)
- .attr("x2", cx-r/2)
- .attr("y2", cy)
- .style("stroke", "black")
- .style("stroke-width", 1.5);
-
- removeSymbol
- .on("mouseover", function(){
- d3.select(this).style("cursor", "pointer")
- circle.style("fill", "red").style("fill-opacity", .8);})
- .on("mouseout", function(){circle.style("fill", "red").style("fill-opacity", .6)})
- .on("mousedown",function()
- {
- treeLayoutdiv.remove();
- })
-
-
+ .attr("fill-opacity", .8);
// Define the root
root = treeData;
@@ -26791,16 +26219,7 @@
collapse(root);
update(root,theAllLinks);
- var frametext = treeGroup.append("text")
- .attr("class", "frametext")
- .attr("x",30)
- .attr("y",15)
- .attr("text-anchor","start")
- .attr("font-family","Arial")
- .attr("font-size","18px")
- .attr("font-weight","bold")
- .text(theName)
-
+
function update(source,allLinks)
{
// Compute the new height, function counts total children of root node and sets tree height accordingly.
@@ -26913,13 +26332,11 @@
});
-
- // console.log(depths)
- // console.log(labelLength)
+ newWidth=Math.max(newWidth,getTextWidth(theName,"Arial 12pt"));
//aigner: Adjust height and width of the frame
- treeLayoutdiv = treeLayoutdiv.attr("height", newHeight + margin.top + margin.bottom+offset_tmp)
- treeLayoutdiv = treeLayoutdiv.attr("width", newWidth + margin.top + margin.bottom +300+maxLabelLength*25+offset_tmp)
+ $('.treeDiv').lobiPanel('setWidth', newWidth + margin.top + margin.bottom +400+maxLabelLength*25+offset_tmp);
+ $('.treeDiv').lobiPanel('setHeight', newHeight + margin.top + 2*margin.bottom+offset_tmp);
treeLayoutSVG = treeLayoutSVG.attr("height", newHeight + margin.top + margin.bottom+offset_tmp)
treeLayoutSVG = treeLayoutSVG.attr("width", newWidth + margin.top + margin.bottom +300+maxLabelLength*25+offset_tmp)
frame = frame.attr("height", newHeight + margin.top + margin.bottom)