diff --git a/kadmos/vistoms/templates/VISTOMS.html b/kadmos/vistoms/templates/VISTOMS.html
index 1f6ec9120948ca876da40dbea7d9ce162f33184f..47d2c4c08c6d95f65540cbf5297c087c3c0a6088 100644
--- a/kadmos/vistoms/templates/VISTOMS.html
+++ b/kadmos/vistoms/templates/VISTOMS.html
@@ -18754,8 +18754,6 @@
//Highlight function, that shows usage of a node in the XDSM
function highlight(data,aText)
{
- console.log(data)
- console.log(aText)
aText = "/"+data.data.name+aText;
if (data.parent){highlight(data.parent,aText)}
else
@@ -19070,8 +19068,6 @@
{
title: 'Show node information',
onMouseDown: function(elm, d, i) {
- console.log(elm)
- console.log(d)
showVariableTable(d);
},
onMouseUp: function(elm, d, i) {},
@@ -20971,42 +20967,6 @@
//####################################################################################################################
-
-
- //aigner: Data Model Tree View Button
- //####################################################################################################################
- var dataModelDiv = d3.select(".xdsmDiv").append("div").attr("class","dataModelDiv").attr("transform","translate(10,0)")
- var ul = dataModelDiv.append("ul")
- var dropdown1 = ul.append("li").on("mouseover", function(){d3.select(this).style("cursor", "default")})
- dropdown1.append("img").attr("src",fileReference.AGILE_Icon)
- .attr("align","left")
- .style("margin-left","6px")
- .style("margin-right","-10px")
- .style("margin-top","10px")
- .style("margin-bottom","0px")
- .attr("height","20")
- .attr("width","20")
- dropdown1.append("a").text("Data Model Tree")
- var links = dropdown1.append("ul");
- var xOffset_ul = dropdown1._groups[0][0].offsetLeft+dropdown1._groups[0][0].offsetWidth-40;
- links.style("left", String(xOffset_ul)+"px")
- for (var j=0; j< varCategories.length; j++)
- {
- //console.log(varCategories[j])
- var linkLi = links.append("li");
- var linkA = linkLi.append("a")
- .attr("id",j)
- .text(varCategories[j].description)
- .on("mouseover", function(){d3.select(this).style("cursor", "pointer")})
- .on("click", function()
- {
- showFullTree(varCategories[this.id].name,varCategories[this.id].description)
- })
- }
- //aigner: Set width of the div, so the VISTOMS dropdown (in the top of the page) still works
- //dataModelDiv.style("width", String(dropdown1.node().getBoundingClientRect().width+20)+"px")
- //####################################################################################################################
-
function showList(aTitle,aList,aMenu)
{
if (aList.length != 0)
@@ -21050,6 +21010,41 @@
}
}
+
+ //aigner: Data Model Tree View Button
+ //####################################################################################################################
+ var dataModelDiv = d3.select(".xdsmDiv").append("div").attr("class","dataModelDiv").attr("transform","translate(10,0)")
+ var ul = dataModelDiv.append("ul")
+ var dropdown1 = ul.append("li").on("mouseover", function(){d3.select(this).style("cursor", "default")})
+ dropdown1.append("img").attr("src",fileReference.AGILE_Icon)
+ .attr("align","left")
+ .style("margin-left","6px")
+ .style("margin-right","-10px")
+ .style("margin-top","10px")
+ .style("margin-bottom","0px")
+ .attr("height","20")
+ .attr("width","20")
+ dropdown1.append("a").text("Data Model Tree")
+ var links = dropdown1.append("ul");
+ var xOffset_ul = dropdown1._groups[0][0].offsetLeft+dropdown1._groups[0][0].offsetWidth-40;
+ links.style("left", String(xOffset_ul)+"px")
+ for (var j=0; j< varCategories.length; j++)
+ {
+ //console.log(varCategories[j])
+ var linkLi = links.append("li");
+ var linkA = linkLi.append("a")
+ .attr("id",j)
+ .text(varCategories[j].description)
+ .on("mouseover", function(){d3.select(this).style("cursor", "pointer")})
+ .on("click", function()
+ {
+ showFullTree(varCategories[this.id].name,varCategories[this.id].description)
+ })
+ }
+ //aigner: Set width of the div, so the VISTOMS dropdown (in the top of the page) still works
+ //dataModelDiv.style("width", String(dropdown1.node().getBoundingClientRect().width+20)+"px")
+ //####################################################################################################################
+
//aigner: Data Model List View Button
//####################################################################################################################
var ul_list = dataModelDiv.append("ul")
@@ -21799,25 +21794,25 @@
for (var j=0; j< varCategories.length; j++)
{
edgeChildrenItemsList.push({title: 'according to ' + varCategories[j].description,
- varCategory: varCategories[j].name,
- description: varCategories[j].description,
- onMouseClick: function(elm, data, i) {
- var variables = [];
- var pipeData = edge.name;
- var title = "Here is a list"
- variables = JSON.parse(JSON.stringify(currentGraph.variableSchemes[data.varCategory]))
- prune_tree(pipeData,variables)
- variables.forEach(function(variable)
- {
- variable.name = variable.xPath
- //work around because nodeMenu expexts the data, to have a "data" object inside
- variable.data = variable
- variable.data.name = variable.xPath.split("/")[variable.xPath.split("/").length-1]
- })
-
- showList(title,variables,nodeMenu);
- },
- onMouseOver: function(elm,data,i){}});
+ varCategory: varCategories[j].name,
+ description: varCategories[j].description,
+ onMouseClick: function(elm, data, i) {
+ var variables = [];
+ var pipeData = edge.name;
+ var title = "Here is a list"
+ variables = JSON.parse(JSON.stringify(currentGraph.variableSchemes[data.varCategory]))
+ prune_tree(pipeData,variables)
+ variables.forEach(function(variable)
+ {
+ variable.name = variable.xPath
+ //work around because nodeMenu expexts the data, to have a "data" object inside
+ variable.data = variable
+ variable.data.name = variable.xPath.split("/")[variable.xPath.split("/").length-1]
+ })
+
+ showList(title,variables,nodeMenu);
+ },
+ onMouseOver: function(elm,data,i){}});
}
var theEdge = this;
var edgeMenu = [
@@ -22829,7 +22824,317 @@
varCategories = entireData.categories;
var classes = currentGraph.edgeBundles;
-
+ //Highlight function, that shows usage of a node in the XDSM
+ function highlight(data,aText)
+ {
+ aText = "/"+data.name+aText;
+ if (data.parent){highlight(data.parent,aText)}
+ else
+ {
+ var allLinks = d3.selectAll(".edgeBundlesLink");
+ allLinks[0].forEach(function(aLink)
+ {
+
+ aLink.__data__.pipeData_in = aLink.__data__.source.pipeline_data[aLink.__data__.target.name];
+ aLink.__data__.pipeData_out = aLink.__data__.target.pipeline_data[aLink.__data__.source.name];
+ aLink.__data__.pipeDataName_in = "";
+ aLink.__data__.pipeDataName_out = "";
+ aLink.__data__.name = "";
+ if (aLink.__data__.pipeData_in)
+ {
+ for (var i=0; i<aLink.__data__.pipeData_in.length; i++)
+ {
+ if (i==0){aLink.__data__.pipeDataName_in += aLink.__data__.pipeData_in[i];}
+ else{aLink.__data__.pipeDataName_in += "," + aLink.__data__.pipeData_in[i];}
+
+ }
+ aLink.__data__.name += aLink.__data__.pipeDataName_in
+ }
+ if (aLink.__data__.pipeData_out)
+ {
+ for (var i=0; i<aLink.__data__.pipeData_out.length; i++)
+ {
+ if (i==0){aLink.__data__.pipeDataName_out += aLink.__data__.pipeData_out[i];}
+ else{aLink.__data__.pipeDataName_out += "," + aLink.__data__.pipeData_out[i];}
+ }
+ aLink.__data__.name += aLink.__data__.pipeDataName_out
+ }
+ })
+
+ //var allLinks_tmp = allLinks[0];
+ allLinks[0].forEach(function(p) {
+ var firstElement_tmp = p.__data__.name.split("/")[1]
+ var text_fromFirst = "/"+firstElement_tmp+aText.split(firstElement_tmp)[1]
+ if (include(p.__data__.name,text_fromFirst))
+ {
+ d3.select(p)
+ .style("stroke-opacity", 1.0)
+ }
+ else
+ {
+ d3.select(p).style("stroke-opacity", 0);
+ }
+ });
+ }
+ }
+
+ //Function writeTreeToXML goes through tree nodes and puts the into an xml document
+ function writeTreeToXML(aNode,anXMLDoc,anXPath)
+ {
+ //Variable "children"
+ //--> One children variable, no matter whether a node has "_children" (collapsed) or "children" (expanded)
+ var children;
+ if (aNode._children){children = aNode._children;}
+ else if (aNode.children){children = aNode.children;}
+
+ //Get current xml element with its xPath
+ var element = anXMLDoc.evaluate(anXPath,anXMLDoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
+ if (element != null) {element.value = '...';}
+
+ //If a node has children (collapsed or expanded), loop through them
+ if (children)
+ {
+ for (var i=0; i < children.length;i++)
+ {
+ //Name of the new XML element --> childName
+ var child = children[i];
+ var childName = child.name.split(/[\[\]]+/);//Split childName at "[]" which is the uID
+ var cleanChildName = childName[0].split(/[\+\*\^\-\ \#]+/);//Split childName all special characters
+ var newNode = anXMLDoc.createElement(String(cleanChildName[0]));
+
+ //The children are appended to the xPath --> newXPath
+ var newXPath = anXPath+"/"+cleanChildName[0];
+
+ //If childName contains a uID, make the uID an attribute
+ if (childName[1])
+ {
+ if (parseInt(childName[1]))
+ {
+ var dummyID = childName[1];
+ newNode.setAttribute("dummyID", dummyID)
+ newXPath = newXPath+"[@dummyID='"+dummyID+"']";
+ }
+ else
+ {
+ var uID = childName[1];
+ newNode.setAttribute("uID", uID)
+ newXPath = newXPath+"[@uID='"+uID+"']";
+ }
+ }
+ if (cleanChildName.length>1) {newNode.setAttribute("elementName", childName[0])};
+
+ //Append the newNode to the xml structure
+ element.appendChild(newNode);
+
+
+
+ ////aigner: Sorting of XML elements according to "uID"
+ // var items = element.children;
+ // var itemsArr = [];
+ // for (var j in items) {
+ // if (items[j].nodeType == 1) { // get rid of the whitespace text nodes
+ // itemsArr.push(items[j]);
+ // }
+ // }
+ // itemsArr.sort(function(a,b){
+ // if (a.getAttribute("uID") < b.getAttribute("uID"))
+ // return -1;
+ // if (a.getAttribute("uID") > b.getAttribute("uID"))
+ // return 1;
+ // return 0;
+ // });
+
+ // for (j = 0; j < itemsArr.length; ++j) {
+ // element.appendChild(itemsArr[j]);
+ // }
+
+ //call function writeTreeToXML recursively for all children
+ writeTreeToXML(child,anXMLDoc,newXPath)
+ }
+ }
+ else
+ {
+ if (aNode.value){element.innerHTML = String(aNode.value);}
+ else{element.innerHTML = " ";}
+ }
+ //return the xml document
+ return anXMLDoc;
+ }
+
+ function removeAttributeInAllElements(aDocument,attribute)
+ {
+ var matchingElements = [];
+ var allElements = aDocument.getElementsByTagName('*');
+ for (var i = 0, n = allElements.length; i < n; i++)
+ {
+ if (allElements[i].getAttribute(attribute) !== null)
+ {
+ allElements[i].removeAttribute(attribute);
+ }
+ }
+ return matchingElements;
+ }
+
+ function putAncestorsInXMLString(strWrapper, aNode)
+ {
+ //Name of the new XML element
+ var nodeName = aNode.name.split(/[\[\]]+/);//Split name at "[]" which is the uID
+ var cleanNodeName = nodeName[0].split(/[\+\*\^\-\ \#]+/);//Split nodeName all special characters
+ //If nodeName contains a uID, make the uID an attribute
+ if (nodeName[1])
+ {
+ var uID = nodeName[1];
+ strWrapper.val = "<"+cleanNodeName[0]+" uID='"+ uID +"'>"+strWrapper.val+"</"+cleanNodeName[0]+">";;
+ }
+ else
+ {
+ strWrapper.val = "<"+cleanNodeName[0]+">"+strWrapper.val+"</"+cleanNodeName[0]+">";;
+ }
+ var aParent = aNode.parent;
+ if (aParent)
+ {
+ return putAncestorsInXMLString(strWrapper, aParent);
+ }
+ else
+ {
+ return strWrapper;
+ }
+ }
+
+ function putAncestorsInXPath(strWrapper, aNode)
+ {
+ //Name of the new XML element
+ var nodeName = aNode.name.split(/[\[\]]+/);//Split name at "[]" which is the uID
+ var cleanNodeName = nodeName[0].split(/[\+\*\^\-\ \#]+/);//Split nodeName all special characters
+ //If nodeName contains a uID, make the uID an attribute
+ if (nodeName[1])
+ {
+ var uID = nodeName[1];
+ strWrapper.val = "/"+cleanNodeName[0]+"[@uID='"+uID+"']"+strWrapper.val;
+ }
+ else
+ {
+ strWrapper.val = "/"+cleanNodeName[0]+strWrapper.val;
+ }
+ var aParent = aNode.parent;
+ if (aParent)
+ {
+ return putAncestorsInXPath(strWrapper, aParent);
+ }
+ else
+ {
+ return strWrapper;
+ }
+ }
+
+ // Function to download data to a file
+ function download(filename, text) {
+ var element = document.createElement('a');
+ element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+ element.setAttribute('download', filename);
+
+ element.style.display = 'none';
+ document.body.appendChild(element);
+
+ element.click();
+
+ document.body.removeChild(element);
+ }
+
+ function showVariableTable(aVariable)
+ {
+
+ var headLine = "Node Information (" + aVariable.name + ")";
+ var data = [];
+ // render the table(s)
+ data.push({ "name" : "Name", "value" : "\""+aVariable.name+"\"" })
+ data.push({ "name" : "xPath", "value" : aVariable.xPath })
+ if (aVariable.type){data.push({ "name" : "Type", "value" : aVariable.type })}
+ if (aVariable.level){data.push({ "name" : "Level", "value" : aVariable.level })}
+ if (aVariable.children || aVariable._children)
+ {
+ var childrenNum=0;
+ if (aVariable.children){childrenNum=childrenNum+aVariable.children.length}
+ if (aVariable._children){childrenNum=childrenNum+aVariable._children.length}
+ data.push({ "name" : "Number of children", "value" : childrenNum })
+ }
+ if (aVariable.dimension){data.push({ "name" : "Dimension", "value" : aVariable.dimension })}
+ else if(aVariable.dimension===null){data.push({ "name" : "Dimension", "value" : "undefined" })}
+ if (aVariable.value){data.push({ "name" : "Value(s)", "value" : aVariable.value })}
+
+ 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)
+ var listGroup = panel_div.append("div").attr("class","panel-body")
+ .append("table").attr("id","myTable")
+ .append("tbody")
+
+ data.forEach(function(listElement)
+ {
+ var row = listGroup.append("tr")
+ row.append("td").text(listElement.name)
+ row.append("td").text(listElement.value)
+
+ })
+ $('.myPanel').lobiPanel({
+ reload: false,
+ editTitle: false,
+ expand: false,
+ unpin: false,
+ resize: "none",
+ minWidth: 200,
+ minHeight: 200,
+ maxWidth: 1100,
+ maxHeight: 1200,
+ });
+ $('.myPanel').lobiPanel('unpin');
+ }
+
+ //menu --> functions for right click options
+ var nodeMenu = [
+ {
+ title: 'Show node information',
+ onMouseDown: function(elm, d, i) {
+ showVariableTable(d);
+ },
+ onMouseUp: function(elm, d, i) {},
+ onMouseOver: function(elm, d, i) {},
+ childrenItems: []
+ },
+ {
+ title: 'Show usage of node in diagram',
+ onMouseDown: function(elm, d, i) {
+ d3.selectAll(".treeFrame").attr("fill-opacity", .5);
+ d3.selectAll(".nodeText").style("fill-opacity", 0.5);
+ var theText="";
+ highlight(d,theText);
+ },
+ onMouseUp: function(elm, d, i) {
+ d3.selectAll(".edgeBundlesLink")
+ .style("stroke-opacity",.4)
+ d3.selectAll(".treeFrame").attr("fill-opacity", .8);
+ d3.selectAll(".nodeText").style("fill-opacity", 1);
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: []
+ },
+ {
+ title: 'Copy x-path to clipboard',
+ onMouseDown: function(elm, d, i) {
+ window.prompt("Copy to clipboard: Ctrl+C, Enter", d.xPath);
+ d3.select('.d3-context-menu').style('display', 'none');
+ },
+ onMouseUp: function(elm, d, i) {
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: []
+ }
+ ]
+
//################################################################################################//
var headerDiv = d3.select(".edgeBundlesDiv").append("div").attr("class","panel panel-primary")
headerDiv.append("div").attr("class","panel-heading text-center")
@@ -22859,7 +23164,7 @@
var emptyArray="";
var allLinks = d3.selectAll(".edgeBundlesLink");
var theSchema = currentGraph.variableSchemes[categoryID];
- createTreeLayout(name_tmp,theSchema,emptyArray,allLinks);
+ createTreeLayout(name_tmp,theSchema,emptyArray,allLinks,nodeMenu);
}
var childrenItems = [];
@@ -22883,44 +23188,128 @@
childrenItems: childrenItems
}
]
- //#####################################################################//
- //aigner: treeLayout in the bottom
- //################################################################################################//
- //aigner: Data Model Expand Button
- //##########################################################
- var dataModelDiv = d3.select(".edgeBundlesDiv").append("div").attr("class","dataModelDiv").attr("transform","translate(10,0)")
- dataModelDiv.append("svg:title").text("Click right to inspect")
- var ul = dataModelDiv.append("ul")
- var dropdown1 = ul.append("li").on("mouseover", function(){d3.select(this).style("cursor", "default")})
- dropdown1.append("img").attr("src",fileReference.AGILE_Icon)
- .attr("align","left")
- .style("margin-left","6px")
- .style("margin-right","-10px")
- .style("margin-top","10px")
- .style("margin-bottom","0px")
- .attr("height","20")
- .attr("width","20")
- dropdown1.append("a").text("Data Model")
- var links = dropdown1.append("ul");
- for (var j=0; j< varCategories.length; j++)
- {
- //console.log(varCategories[j])
- var linkLi = links.append("li");
- var linkA = linkLi.append("a")
- .attr("id",j)
- .text(varCategories[j].description)
- .on("mouseover", function(){d3.select(this).style("cursor", "pointer")})
- .on("click", function()
- {
- showFullTree(varCategories[this.id].name,varCategories[this.id].description)
- })
-
- }
- //aigner: Set width of the div, so the VISTOMS dropdown (in the top of the page) still works
- dataModelDiv.style("width", String(dropdown1.node().getBoundingClientRect().width+20)+"px")
- //##########################################################
- //################################################################################################//
-
+
+
+ function showList(aTitle,aList,aMenu)
+ {
+ if (aList.length != 0)
+ {
+ 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(aTitle)
+ panel_div.append("input")
+ .attr("id","myInput")
+ .attr("placeholder","Filter search...")
+ .attr("title","Type in a name")
+ .attr("onkeyup","filterSearch()")
+ var listGroup = panel_div.append("div").attr("class","panel-body")
+ .append("table").attr("id","myTable")
+ .append("tbody")
+
+ var tr = listGroup
+ .selectAll('tr')
+ .data(aList).enter()
+ .append('tr')
+ var td = tr.append("td").html(function(d) {
+ if (d.xPath){return d.xPath;}
+ else {return d.name;}
+ })
+ tr.on('contextmenu', d3.contextMenu(aMenu));
+ $('.myPanel').lobiPanel({
+ reload: false,
+ editTitle: false,
+ expand: false,
+ unpin: false,
+ resize: "none",
+ minWidth: 200,
+ minHeight: 200,
+ maxWidth: 1100,
+ maxHeight: 1200,
+ });
+ $('.myPanel').lobiPanel('unpin');
+ $('.myPanel').lobiPanel('height','5000');
+ }
+ }
+
+ //aigner: Data Model Tree View Button
+ //####################################################################################################################
+ var dataModelDiv = d3.select(".edgeBundlesDiv").append("div").attr("class","dataModelDiv").attr("transform","translate(10,0)")
+ var ul = dataModelDiv.append("ul")
+ var dropdown1 = ul.append("li").on("mouseover", function(){d3.select(this).style("cursor", "default")})
+ dropdown1.append("img").attr("src",fileReference.AGILE_Icon)
+ .attr("align","left")
+ .style("margin-left","6px")
+ .style("margin-right","-10px")
+ .style("margin-top","10px")
+ .style("margin-bottom","0px")
+ .attr("height","20")
+ .attr("width","20")
+ dropdown1.append("a").text("Data Model Tree")
+ var links = dropdown1.append("ul");
+ var xOffset_ul = dropdown1[0][0].offsetLeft+dropdown1[0][0].offsetWidth-40;
+ links.style("left", String(xOffset_ul)+"px")
+ for (var j=0; j< varCategories.length; j++)
+ {
+ //console.log(varCategories[j])
+ var linkLi = links.append("li");
+ var linkA = linkLi.append("a")
+ .attr("id",j)
+ .text(varCategories[j].description)
+ .on("mouseover", function(){d3.select(this).style("cursor", "pointer")})
+ .on("click", function()
+ {
+ showFullTree(varCategories[this.id].name,varCategories[this.id].description)
+ })
+ }
+ //aigner: Set width of the div, so the VISTOMS dropdown (in the top of the page) still works
+ //dataModelDiv.style("width", String(dropdown1.node().getBoundingClientRect().width+20)+"px")
+ //####################################################################################################################
+
+ //aigner: Data Model List View Button
+ //####################################################################################################################
+ var ul_list = dataModelDiv.append("ul")
+ var dropdownList = ul_list.append("li").on("mouseover", function(){d3.select(this).style("cursor", "default")})
+ dropdownList.append("img").attr("src",fileReference.AGILE_Icon)
+ .attr("align","left")
+ .style("margin-left","6px")
+ .style("margin-right","-10px")
+ .style("margin-top","10px")
+ .style("margin-bottom","0px")
+ .attr("height","20")
+ .attr("width","20")
+ dropdownList.append("a").text("Data Model List")
+ var linksList = dropdownList.append("ul");
+ var xOffset_ul = dropdownList[0][0].offsetLeft+dropdownList[0][0].offsetWidth-40;
+ linksList.style("left", String(xOffset_ul)+"px")
+ for (var j=0; j< varCategories.length; j++)
+ {
+ //console.log(varCategories[j])
+ var linkLi = linksList.append("li");
+ var linkA = linkLi.append("a")
+ .attr("id",j)
+ .text(varCategories[j].description)
+ .on("mouseover", function(){d3.select(this).style("cursor", "pointer")})
+ .on("click", function()
+ {
+ var variables = JSON.parse(JSON.stringify(currentGraph.variableSchemes[varCategories[this.id].name]));
+
+ //aigner: HIER WEITER! evtl. treeData aufbauen (buildTree) um nodeMenu einfacher zu machen
+ variables.forEach(function(variable)
+ {
+ variable.name = variable.xPath
+ //work around because nodeMenu expexts the data, to have a "data" object inside
+ variable.data = variable
+ variable.data.name = variable.xPath.split("/")[variable.xPath.split("/").length-1]
+ })
+ var title = "Here is a list"
+ showList(title,variables,nodeMenu)
+ })
+ }
+ //aigner: Set width of the div, so the VISTOMS dropdown (in the top of the page) still works
+ //####################################################################################################################
+
//aigner: legend
//################################################################################################//
@@ -23033,7 +23422,7 @@
{
var theSchema = currentGraph.variableSchemes[aVarCategory];
var name_tmp = "Variable flow: " + aLink.__data__.source.name + " → " + aLink.__data__.target.name + "; Categorization: " + aCategoryDescr;
- createTreeLayout(name_tmp,theSchema,aLink.__data__,link);
+ createTreeLayout(name_tmp,theSchema,aLink.__data__,link,nodeMenu);
}
function showEdgeTable(aLink)
@@ -23149,15 +23538,37 @@
}
//linkMenu --> functions for right click options
- var linkChildrenItems = [];
+ var linkChildrenItemsTree = [];
for (var j=0; j< varCategories.length; j++)
{
- linkChildrenItems.push({title: 'according to ' + varCategories[j].description,
+ linkChildrenItemsTree.push({title: 'according to ' + varCategories[j].description,
varCategory: varCategories[j].name,
description: varCategories[j].description,
onMouseClick: function(elm, data, i) {showLinkTree(elm,data.varCategory,data.description)},
onMouseOver: function(elm,data,i){}});
}
+ var linkChildrenItemsList = [];
+ for (var j=0; j< varCategories.length; j++)
+ {
+ linkChildrenItemsList.push({title: 'according to ' + varCategories[j].description,
+ varCategory: varCategories[j].name,
+ description: varCategories[j].description,
+ onMouseClick: function(elm, data, i) {
+ var title = "Here is a list"
+ var variables = prepareTreeData(currentGraph.variableSchemes[data.varCategory],elm.__data__)
+ variables.forEach(function(variable)
+ {
+ variable.name = variable.xPath
+ //work around because nodeMenu expexts the data, to have a "data" object inside
+ variable.data = variable
+ variable.data.name = variable.xPath.split("/")[variable.xPath.split("/").length-1]
+ })
+
+ showList(title,variables,nodeMenu);
+ },
+ onMouseOver: function(elm,data,i){}});
+ }
+
var linkMenu = [
{
title: 'Show edge info',
@@ -23178,7 +23589,17 @@
},
onMouseOver: function(elm, d, i) {
},
- childrenItems: linkChildrenItems
+ childrenItems: linkChildrenItemsTree
+ },
+ {
+ title: 'Show variable list...',
+ onMouseDown: function(elm, k, i) {
+ },
+ onMouseUp: function(elm, k, i) {
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: linkChildrenItemsList
}
]
invisibleLink.append("svg:title").text("Click right to inspect")
@@ -23381,27 +23802,130 @@
}
})
var theSchema = currentGraph.variableSchemes[categoryName]
- createTreeLayout(name_tmp,theSchema,array,link)
+ createTreeLayout(name_tmp,theSchema,array,link,nodeMenu)
+ }
+ //############################################################
+
+ //aigner: Creation of input/output list
+ //############################################################
+ function prepareIOList(theNode, io)
+ {
+ var links = d3.selectAll(".edgeBundlesLink")[0];
+ var array={name_in:"",name_out:"",name:""};
+
+ links.forEach(function(d)
+ {
+ var theLink = d.__data__;
+
+
+ var pipeData_in = theLink.source.pipeline_data[theLink.target.name];
+ var pipeData_out = theLink.target.pipeline_data[theLink.source.name];
+ if (!pipeData_in){pipeData_in = [];}
+ if (!pipeData_out){pipeData_out = [];}
+ theLink.pipeData_in = theLink.source.pipeline_data[theLink.target.name];
+ theLink.pipeData_out = theLink.target.pipeline_data[theLink.source.name];
+ theLink.name_in = "";
+ theLink.name_out = "";
+ theLink.name = "";
+ if (theLink.pipeData_in)
+ {
+ for (var i=0; i<theLink.pipeData_in.length; i++)
+ {
+ if (i==0){theLink.name_in += theLink.pipeData_in[i];}
+ else{theLink.name_in += "," + theLink.pipeData_in[i];}
+
+ }
+ theLink.name += theLink.name_in
+ }
+ if (theLink.pipeData_out)
+ {
+ for (var i=0; i<theLink.pipeData_out.length; i++)
+ {
+ if (i==0){theLink.name_out += theLink.pipeData_out[i];}
+ else{theLink.name_out += "," + theLink.pipeData_out[i];}
+ }
+ theLink.name += theLink.name_out
+ }
+
+ if (io=="in")
+ {
+ if (theLink.target == theNode)
+ {
+ if (array.name_in == ""){array.name_in +=theLink.name_out;}
+ else{array.name_in += "," + theLink.name_out;}
+ array.name_out = "";
+ array.name = array.name_in;
+ }
+ if (theLink.source == theNode)
+ {
+ if (array.name_in == ""){array.name_in +=theLink.name_in;}
+ else{array.name_in += "," + theLink.name_in;}
+ array.name_out = "";
+ array.name = array.name_in;
+ }
+ }
+ else if (io=="out")
+ {
+ if (theLink.source == theNode)
+ {
+ if (array.name_out == ""){array.name_out +=theLink.name_out;}
+ else{array.name_out += "," + theLink.name_out;}
+ array.name_in = "";
+ array.name = array.name_out;
+ }
+ if (theLink.target == theNode)
+ {
+ if (array.name_out == ""){array.name_out +=theLink.name_in;}
+ else{array.name_out += "," + theLink.name_in;}
+ array.name_in = "";
+ array.name = array.name_out;
+ }
+ }
+ })
+ return array;
}
//############################################################
- var inputChildrenitems = [];
- var outputChildrenitems = [];
- var inputChildrenitems = [];
- var outputChildrenitems = [];
+ var inputChildrenitemsTree = [];
+ var outputChildrenitemsTree = [];
for (var j=0; j< varCategories.length; j++)
{
- inputChildrenitems.push({title: 'according to ' + varCategories[j].description,
+ inputChildrenitemsTree.push({title: 'according to ' + varCategories[j].description,
varCategory: varCategories[j].name,
description: varCategories[j].description,
onMouseClick: function(elm, data, i) {showIOTree(data.varCategory,data.description,elm.__data__,"in")},
onMouseOver: function(elm,data,i){}});
- outputChildrenitems.push({title: 'according to ' + varCategories[j].description,
+ outputChildrenitemsTree.push({title: 'according to ' + varCategories[j].description,
varCategory: varCategories[j].name,
description: varCategories[j].description,
onMouseClick: function(elm, data, i) {showIOTree(data.varCategory,data.description,elm.__data__,"out")},
onMouseOver: function(elm,data,i){}});
}
+ var inputChildrenitemsList = [];
+ var outputChildrenitemsList = [];
+ for (var j=0; j< varCategories.length; j++)
+ {
+ inputChildrenitemsList.push({title: 'according to ' + varCategories[j].description,
+ varCategory: varCategories[j].name,
+ description: varCategories[j].description,
+ onMouseClick: function(elm, data, i) {
+ var array = prepareIOList(elm.__data__,"in")
+ var variables = prepareTreeData(currentGraph.variableSchemes[data.varCategory],array)
+ var title = "Here is a list"
+ showList(title,variables,nodeMenu)
+ },
+ onMouseOver: function(elm,data,i){}});
+ outputChildrenitemsList.push({title: 'according to ' + varCategories[j].description,
+ varCategory: varCategories[j].name,
+ description: varCategories[j].description,
+ onMouseClick: function(elm, data, i) {
+ var array = prepareIOList(elm.__data__,"out")
+ var variables = prepareTreeData(currentGraph.variableSchemes[data.varCategory],array)
+ var title = "Here is a list"
+ showList(title,variables,nodeMenu)
+ },
+ onMouseOver: function(elm,data,i){}});
+ }
//menu --> functions for right click options
var toolMenu = [
{
@@ -23423,7 +23947,7 @@
},
onMouseOver: function(elm, d, i) {
},
- childrenItems: inputChildrenitems
+ childrenItems: inputChildrenitemsTree
},
{
title: 'Show output variable tree...',
@@ -23433,7 +23957,27 @@
},
onMouseOver: function(elm, d, i) {
},
- childrenItems: outputChildrenitems
+ childrenItems: outputChildrenitemsTree
+ },
+ {
+ title: 'Show input variable list...',
+ onMouseDown: function(elm, k, i) {
+ },
+ onMouseUp: function(elm, k, i) {
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: inputChildrenitemsList
+ },
+ {
+ title: 'Show output variable list...',
+ onMouseDown: function(elm, k, i) {
+ },
+ onMouseUp: function(elm, k, i) {
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: outputChildrenitemsList
}
]
@@ -23533,12 +24077,9 @@
}
-
- function createTreeLayout(theName, schema,aLink,theAllLinks)
- {
- //aigner: Build the tree layout
- //######################################################################
- var theLink = aLink;
+ function prepareTreeData(aSchema,aLink)
+ {
+ var theLink = aLink;
if (aLink.source && aLink.target)
{
var pipeData_in = theLink.source.pipeline_data[theLink.target.name];
@@ -23571,8 +24112,8 @@
}
}
- var treeData_in = (JSON.parse(JSON.stringify(schema)));
- var treeData_out = (JSON.parse(JSON.stringify(schema)));
+ var treeData_in = (JSON.parse(JSON.stringify(aSchema)));
+ var treeData_out = (JSON.parse(JSON.stringify(aSchema)));
//aigner: Here, the minimalized tree is created!
//The tree will only be pruned if there is pipeData, such as in an edge or for the input of a tool
if (theLink)
@@ -23591,6 +24132,15 @@
//build tree layout for vistoms
var treeData = treeData_in.concat(treeData_out)
+
+ return treeData;
+ }
+
+ function createTreeLayout(theName, schema,aLink,theAllLinks,nodeMenu)
+ {
+ //aigner: Build the tree layout
+ //######################################################################
+ var treeData = prepareTreeData(schema, aLink)
var newTree = {};
buildTree(newTree, treeData)
treeData = newTree
@@ -24012,316 +24562,9 @@
else{return "#fff";}
})
-
- function showVariableTable(aVariable)
- {
-
- var headLine = "Node Information (" + aVariable.name + ")";
- var data = [];
- // render the table(s)
- data.push({ "name" : "Name", "value" : "\""+aVariable.name+"\"" })
- data.push({ "name" : "xPath", "value" : aVariable.xPath })
- if (aVariable.type){data.push({ "name" : "Type", "value" : aVariable.type })}
- if (aVariable.level){data.push({ "name" : "Level", "value" : aVariable.level })}
- if (aVariable.children || aVariable._children)
- {
- var childrenNum=0;
- if (aVariable.children){childrenNum=childrenNum+aVariable.children.length}
- if (aVariable._children){childrenNum=childrenNum+aVariable._children.length}
- data.push({ "name" : "Number of children", "value" : childrenNum })
- }
- if (aVariable.dimension){data.push({ "name" : "Dimension", "value" : aVariable.dimension })}
- else if(aVariable.dimension===null){data.push({ "name" : "Dimension", "value" : "undefined" })}
- if (aVariable.value){data.push({ "name" : "Value(s)", "value" : aVariable.value })}
-
- 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)
- var listGroup = panel_div.append("div").attr("class","panel-body")
- .append("table").attr("id","myTable")
- .append("tbody")
-
- data.forEach(function(listElement)
- {
- var row = listGroup.append("tr")
- row.append("td").text(listElement.name)
- row.append("td").text(listElement.value)
-
- })
- $('.myPanel').lobiPanel({
- reload: false,
- editTitle: false,
- expand: false,
- unpin: false,
- resize: "none",
- minWidth: 200,
- minHeight: 200,
- maxWidth: 1100,
- maxHeight: 1200,
- });
- $('.myPanel').lobiPanel('unpin');
- }
-
- //Highlight function, that shows usage of a node in the XDSM
- function highlight(data,aText)
- {
- aText = "/"+data.name+aText;
- if (data.parent){highlight(data.parent,aText)}
- else
- {
- allLinks[0].forEach(function(aLink)
- {
-
- aLink.__data__.pipeData_in = aLink.__data__.source.pipeline_data[aLink.__data__.target.name];
- aLink.__data__.pipeData_out = aLink.__data__.target.pipeline_data[aLink.__data__.source.name];
- aLink.__data__.pipeDataName_in = "";
- aLink.__data__.pipeDataName_out = "";
- aLink.__data__.name = "";
- if (aLink.__data__.pipeData_in)
- {
- for (var i=0; i<aLink.__data__.pipeData_in.length; i++)
- {
- if (i==0){aLink.__data__.pipeDataName_in += aLink.__data__.pipeData_in[i];}
- else{aLink.__data__.pipeDataName_in += "," + aLink.__data__.pipeData_in[i];}
-
- }
- aLink.__data__.name += aLink.__data__.pipeDataName_in
- }
- if (aLink.__data__.pipeData_out)
- {
- for (var i=0; i<aLink.__data__.pipeData_out.length; i++)
- {
- if (i==0){aLink.__data__.pipeDataName_out += aLink.__data__.pipeData_out[i];}
- else{aLink.__data__.pipeDataName_out += "," + aLink.__data__.pipeData_out[i];}
- }
- aLink.__data__.name += aLink.__data__.pipeDataName_out
- }
- })
-
- //var allLinks_tmp = allLinks[0];
- allLinks[0].forEach(function(p) {
- var firstElement_tmp = p.__data__.name.split("/")[1]
- var text_fromFirst = "/"+firstElement_tmp+aText.split(firstElement_tmp)[1]
- if (include(p.__data__.name,text_fromFirst))
- {
- d3.select(p)
- .style("stroke-opacity", 1.0)
- }
- else
- {
- d3.select(p).style("stroke-opacity", 0);
- }
- });
- }
- }
-
- //Function writeTreeToXML goes through tree nodes and puts the into an xml document
- function writeTreeToXML(aNode,anXMLDoc,anXPath)
- {
- //Variable "children"
- //--> One children variable, no matter whether a node has "_children" (collapsed) or "children" (expanded)
- var children;
- if (aNode._children){children = aNode._children;}
- else if (aNode.children){children = aNode.children;}
-
- //Get current xml element with its xPath
- var element = anXMLDoc.evaluate(anXPath,anXMLDoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
- if (element != null) {element.value = '...';}
-
- //If a node has children (collapsed or expanded), loop through them
- if (children)
- {
- for (var i=0; i < children.length;i++)
- {
- //Name of the new XML element --> childName
- var child = children[i];
- var childName = child.name.split(/[\[\]]+/);//Split childName at "[]" which is the uID
- var cleanChildName = childName[0].split(/[\+\*\^\-\ \#]+/);//Split childName all special characters
- var newNode = anXMLDoc.createElement(String(cleanChildName[0]));
-
- //The children are appended to the xPath --> newXPath
- var newXPath = anXPath+"/"+cleanChildName[0];
-
- //If childName contains a uID, make the uID an attribute
- if (childName[1])
- {
- if (parseInt(childName[1]))
- {
- var dummyID = childName[1];
- newNode.setAttribute("dummyID", dummyID)
- newXPath = newXPath+"[@dummyID='"+dummyID+"']";
- }
- else
- {
- var uID = childName[1];
- newNode.setAttribute("uID", uID)
- newXPath = newXPath+"[@uID='"+uID+"']";
- }
- }
- if (cleanChildName.length>1) {newNode.setAttribute("elementName", childName[0])};
-
- //Append the newNode to the xml structure
- element.appendChild(newNode);
-
-
-
- ////aigner: Sorting of XML elements according to "uID"
- // var items = element.children;
- // var itemsArr = [];
- // for (var j in items) {
- // if (items[j].nodeType == 1) { // get rid of the whitespace text nodes
- // itemsArr.push(items[j]);
- // }
- // }
- // itemsArr.sort(function(a,b){
- // if (a.getAttribute("uID") < b.getAttribute("uID"))
- // return -1;
- // if (a.getAttribute("uID") > b.getAttribute("uID"))
- // return 1;
- // return 0;
- // });
-
- // for (j = 0; j < itemsArr.length; ++j) {
- // element.appendChild(itemsArr[j]);
- // }
-
- //call function writeTreeToXML recursively for all children
- writeTreeToXML(child,anXMLDoc,newXPath)
- }
- }
- else
- {
- if (aNode.value){element.innerHTML = String(aNode.value);}
- else{element.innerHTML = " ";}
- }
- //return the xml document
- return anXMLDoc;
- }
-
- function removeAttributeInAllElements(aDocument,attribute)
- {
- var matchingElements = [];
- var allElements = aDocument.getElementsByTagName('*');
- for (var i = 0, n = allElements.length; i < n; i++)
- {
- if (allElements[i].getAttribute(attribute) !== null)
- {
- allElements[i].removeAttribute(attribute);
- }
- }
- return matchingElements;
- }
-
- function putAncestorsInXMLString(strWrapper, aNode)
- {
- //Name of the new XML element
- var nodeName = aNode.name.split(/[\[\]]+/);//Split name at "[]" which is the uID
- var cleanNodeName = nodeName[0].split(/[\+\*\^\-\ \#]+/);//Split nodeName all special characters
- //If nodeName contains a uID, make the uID an attribute
- if (nodeName[1])
- {
- var uID = nodeName[1];
- strWrapper.val = "<"+cleanNodeName[0]+" uID='"+ uID +"'>"+strWrapper.val+"</"+cleanNodeName[0]+">";;
- }
- else
- {
- strWrapper.val = "<"+cleanNodeName[0]+">"+strWrapper.val+"</"+cleanNodeName[0]+">";;
- }
- var aParent = aNode.parent;
- if (aParent)
- {
- return putAncestorsInXMLString(strWrapper, aParent);
- }
- else
- {
- return strWrapper;
- }
- }
-
- function putAncestorsInXPath(strWrapper, aNode)
- {
- //Name of the new XML element
- var nodeName = aNode.name.split(/[\[\]]+/);//Split name at "[]" which is the uID
- var cleanNodeName = nodeName[0].split(/[\+\*\^\-\ \#]+/);//Split nodeName all special characters
- //If nodeName contains a uID, make the uID an attribute
- if (nodeName[1])
- {
- var uID = nodeName[1];
- strWrapper.val = "/"+cleanNodeName[0]+"[@uID='"+uID+"']"+strWrapper.val;
- }
- else
- {
- strWrapper.val = "/"+cleanNodeName[0]+strWrapper.val;
- }
- var aParent = aNode.parent;
- if (aParent)
- {
- return putAncestorsInXPath(strWrapper, aParent);
- }
- else
- {
- return strWrapper;
- }
- }
-
- // Function to download data to a file
- function download(filename, text) {
- var element = document.createElement('a');
- element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
- element.setAttribute('download', filename);
-
- element.style.display = 'none';
- document.body.appendChild(element);
-
- element.click();
-
- document.body.removeChild(element);
- }
-
- //menu --> functions for right click options
- var nodeMenu = [
- {
- title: 'Show node information',
- onMouseDown: function(elm, d, i) {
- showVariableTable(d);
- },
- onMouseUp: function(elm, d, i) {},
- onMouseOver: function(elm, d, i) {},
- childrenItems: []
- },
- {
- title: 'Show usage of node in diagram',
- onMouseDown: function(elm, d, i) {
- d3.selectAll(".treeFrame").attr("fill-opacity", .5);
- d3.selectAll(".nodeText").style("fill-opacity", 0.5);
- var theText="";
- highlight(d,theText);
- },
- onMouseUp: function(elm, d, i) {
- d3.selectAll(".edgeBundlesLink")
- .style("stroke-opacity",.4)
- d3.selectAll(".treeFrame").attr("fill-opacity", .8);
- d3.selectAll(".nodeText").style("fill-opacity", 1);
- },
- onMouseOver: function(elm, d, i) {
- },
- childrenItems: []
- },
- {
- title: 'Copy x-path to clipboard',
- onMouseDown: function(elm, d, i) {
- window.prompt("Copy to clipboard: Ctrl+C, Enter", d.xPath);
- d3.select('.d3-context-menu').style('display', 'none');
- },
- onMouseUp: function(elm, d, i) {
- },
- onMouseOver: function(elm, d, i) {
- },
- childrenItems: []
- },
- {
+ var nodeTreeMenu = nodeMenu;
+ var treeMenu = [
+ {
title: 'Download full tree as XML-file',
onMouseDown: function(elm, d, i) {
//Begin xml structure with the first element
@@ -24373,10 +24616,11 @@
childrenItems: []
}
]
+ var nodeTreeMenu = nodeMenu.concat(treeMenu)
nodeEnter.append("svg:title").text("Click left to expand, click right to inspect")
- nodeEnter = nodeEnter.on('contextmenu', d3.contextMenu(nodeMenu));
+ nodeEnter = nodeEnter.on('contextmenu', d3.contextMenu(nodeTreeMenu));
// UPDATE
// Transition nodes to their new position.
@@ -25652,16 +25896,176 @@
}
});
-
- function showLinkTree(aLink,aVarCategory)
- {
- var name_tmp = "Variable flow: " + aLink.__data__.source.name + " → " + aLink.__data__.target.name
- var theSchema = currentGraph.variableSchemes[aVarCategory];
- createTreeLayout(name_tmp,theSchema,aLink.__data__.name,link);
- }
-
- function showEdgeTable(aLink)
- {
+
+ //Highlight function, that shows usage of a node in the XDSM
+ function highlight(data,aText)
+ {
+ aText = "/"+data.name+aText;
+ if (data.parent){highlight(data.parent,aText)}
+ else
+ {
+ var allLinks = d3.selectAll(".link");
+ var allLinks_tmp = allLinks[0];
+ allLinks_tmp.forEach(function(p) {
+ var firstElement_tmp = p.__data__.name.split("/")[1]
+ var text_fromFirst = "/"+firstElement_tmp+aText.split(firstElement_tmp)[1]
+ if (include(p.__data__.name,text_fromFirst))
+ {
+ d3.select(p).style("opacity", .8);
+ }
+ else
+ {
+ d3.select(p).style("opacity", 0);
+ }
+ });
+ }
+ }
+
+ function showVariableTable(aVariable)
+ {
+ var headLine = "Node Information (" + aVariable.name + ")";
+ var data = [];
+ // render the table(s)
+ data.push({ "name" : "Name", "value" : "\""+aVariable.name+"\"" })
+ data.push({ "name" : "xPath", "value" : aVariable.xPath })
+ if (aVariable.type){data.push({ "name" : "Type", "value" : aVariable.type })}
+ if (aVariable.level){data.push({ "name" : "Level", "value" : aVariable.level })}
+ if (aVariable.children || aVariable._children)
+ {
+ var childrenNum=0;
+ if (aVariable.children){childrenNum=childrenNum+aVariable.children.length}
+ if (aVariable._children){childrenNum=childrenNum+aVariable._children.length}
+ data.push({ "name" : "Number of children", "value" : childrenNum })
+ }
+ if (aVariable.dimension){data.push({ "name" : "Dimension", "value" : aVariable.dimension })}
+ else if(aVariable.dimension===null){data.push({ "name" : "Dimension", "value" : "undefined" })}
+ if (aVariable.value){data.push({ "name" : "Value(s)", "value" : aVariable.value })}
+
+ 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)
+ var listGroup = panel_div.append("div").attr("class","panel-body")
+ .append("table").attr("id","myTable")
+ .append("tbody")
+
+ data.forEach(function(listElement)
+ {
+ var row = listGroup.append("tr")
+ row.append("td").text(listElement.name)
+ row.append("td").text(listElement.value)
+
+ })
+ $('.myPanel').lobiPanel({
+ reload: false,
+ editTitle: false,
+ expand: false,
+ unpin: false,
+ resize: "none",
+ minWidth: 200,
+ minHeight: 200,
+ maxWidth: 1100,
+ maxHeight: 1200,
+ });
+ $('.myPanel').lobiPanel('unpin');
+ }
+
+ //menu --> functions for right click options
+ var nodeMenu = [
+ {
+ title: 'Show node information',
+ onMouseDown: function(elm, d, i) {
+ showVariableTable(d);
+ },
+ onMouseUp: function(elm, d, i) {},
+ onMouseOver: function(elm, d, i) {},
+ childrenItems: []
+ },
+ {
+ title: 'Show usage of node in diagram',
+ onMouseDown: function(elm, d, i) {
+ d3.selectAll(".treeFrame").attr("fill-opacity", .5);
+ d3.selectAll(".nodeText").style("fill-opacity", 0.5);
+ var theText="";
+ highlight(d,theText);
+ },
+ onMouseUp: function(elm, d, i) {
+ d3.selectAll(".link").style("opacity",.6)
+ d3.selectAll(".treeFrame").attr("fill-opacity", .8);
+ d3.selectAll(".nodeText").style("fill-opacity", 1);
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: []
+ },
+ {
+ title: 'Copy x-path to clipboard',
+ onMouseDown: function(elm, d, i) {
+ window.prompt("Copy to clipboard: Ctrl+C, Enter", d.xPath);
+ d3.select('.d3-context-menu').style('display', 'none');
+ },
+ onMouseUp: function(elm, d, i) {
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: []
+ }
+ ]
+
+ function showList(aTitle,aList,aMenu)
+ {
+ if (aList.length != 0)
+ {
+ 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(aTitle)
+ panel_div.append("input")
+ .attr("id","myInput")
+ .attr("placeholder","Filter search...")
+ .attr("title","Type in a name")
+ .attr("onkeyup","filterSearch()")
+ var listGroup = panel_div.append("div").attr("class","panel-body")
+ .append("table").attr("id","myTable")
+ .append("tbody")
+
+ var tr = listGroup
+ .selectAll('tr')
+ .data(aList).enter()
+ .append('tr')
+ var td = tr.append("td").html(function(d) {
+ if (d.xPath){return d.xPath;}
+ else {return d.name;}
+ })
+ tr.on('contextmenu', d3.contextMenu(aMenu));
+ $('.myPanel').lobiPanel({
+ reload: false,
+ editTitle: false,
+ expand: false,
+ unpin: false,
+ resize: "none",
+ minWidth: 200,
+ minHeight: 200,
+ maxWidth: 1100,
+ maxHeight: 1200,
+ });
+ $('.myPanel').lobiPanel('unpin');
+ $('.myPanel').lobiPanel('height','5000');
+ }
+ }
+
+
+ function showLinkTree(aLink,aVarCategory)
+ {
+ var name_tmp = "Variable flow: " + aLink.__data__.source.name + " → " + aLink.__data__.target.name
+ var theSchema = currentGraph.variableSchemes[aVarCategory];
+ createTreeLayout(name_tmp,theSchema,aLink.__data__.name,link,nodeMenu);
+ }
+
+ function showEdgeTable(aLink)
+ {
var headLine = "Edge Information (" + aLink.from + " - " + aLink.to + ")";
var anEdgeNameSplit = aLink.name.split(',')
@@ -25732,14 +26136,37 @@
}
//linkMenu --> functions for right click options
- var linkChildrenItems = [];
+ var linkChildrenItemsTree = [];
for (var j=0; j< varCategories.length; j++)
{
- linkChildrenItems.push({title: 'according to ' + varCategories[j].description,
+ linkChildrenItemsTree.push({title: 'according to ' + varCategories[j].description,
varCategory: varCategories[j].name,
onMouseClick: function(elm, data, i) {showLinkTree(elm,data.varCategory)},
onMouseOver: function(elm,data,i){}});
}
+ var linkChildrenItemsList = [];
+ for (var j=0; j< varCategories.length; j++)
+ {
+ linkChildrenItemsList.push({title: 'according to ' + varCategories[j].description,
+ varCategory: varCategories[j].name,
+ onMouseClick: function(elm, data, i) {
+ var variables = [];
+ var pipeData = elm.__data__.name;
+ var title = "Here is a list"
+ variables = JSON.parse(JSON.stringify(currentGraph.variableSchemes[data.varCategory]))
+ prune_tree(pipeData,variables)
+ variables.forEach(function(variable)
+ {
+ variable.name = variable.xPath
+ //work around because nodeMenu expexts the data, to have a "data" object inside
+ variable.data = variable
+ variable.data.name = variable.xPath.split("/")[variable.xPath.split("/").length-1]
+ })
+
+ showList(title,variables,nodeMenu);
+ },
+ onMouseOver: function(elm,data,i){}});
+ }
var linkMenu = [
{
title: 'Show edge info',
@@ -25760,7 +26187,17 @@
},
onMouseOver: function(elm, d, i) {
},
- childrenItems: linkChildrenItems
+ childrenItems: linkChildrenItemsTree
+ },
+ {
+ title: 'Show variable list...',
+ onMouseDown: function(elm, k, i) {
+ },
+ onMouseUp: function(elm, k, i) {
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: linkChildrenItemsList
}
]
@@ -25980,27 +26417,89 @@
})
var theSchema = currentGraph.variableSchemes[categoryID];
- createTreeLayout(name_tmp,theSchema,array,link)
+ createTreeLayout(name_tmp,theSchema,array,link,nodeMenu)
}
//############################################################
- var inputChildrenitems = [];
- var outputChildrenitems = [];
- var inputChildrenitems = [];
- var outputChildrenitems = [];
+ var inputChildrenitemsTree = [];
+ var outputChildrenitemsTree = [];
for (var j=0; j< varCategories.length; j++)
{
- inputChildrenitems.push({title: 'according to ' + varCategories[j].description,
+ inputChildrenitemsTree.push({title: 'according to ' + varCategories[j].description,
varCategory: varCategories[j].name,
description: varCategories[j].description,
onMouseClick: function(elm, data, i) {showIOTree(data.varCategory,data.description,elm.__data__,"in")},
onMouseOver: function(elm,data,i){}});
- outputChildrenitems.push({title: 'according to ' + varCategories[j].description,
+ outputChildrenitemsTree.push({title: 'according to ' + varCategories[j].description,
varCategory: varCategories[j].name,
description: varCategories[j].description,
onMouseClick: function(elm, data, i) {showIOTree(data.varCategory,data.description,elm.__data__,"out")},
onMouseOver: function(elm,data,i){}});
}
+ var inputChildrenitemsList = [];
+ var outputChildrenitemsList = [];
+ for (var j=0; j< varCategories.length; j++)
+ {
+ inputChildrenitemsList.push({title: 'according to ' + varCategories[j].description,
+ varCategory: varCategories[j].name,
+ description: varCategories[j].description,
+ onMouseClick: function(elm, data, i) {
+ var links = d3.selectAll(".link");
+ var pipeData="";
+ var name_tmp = "";
+ links.each(function(theLink)
+ {
+ if (theLink.to == elm.__data__.id)
+ {
+ pipeData = pipeData + ", " + theLink.name;
+ }
+ })
+
+ var title = "Here is a list"
+ var variables = JSON.parse(JSON.stringify(currentGraph.variableSchemes[data.varCategory]))
+ prune_tree(pipeData,variables)
+ variables.forEach(function(variable)
+ {
+ variable.name = variable.xPath
+ //work around because nodeMenu expexts the data, to have a "data" object inside
+ variable.data = variable
+ variable.data.name = variable.xPath.split("/")[variable.xPath.split("/").length-1]
+ })
+
+ showList(title,variables,nodeMenu);
+ },
+ onMouseOver: function(elm,data,i){}});
+ outputChildrenitemsList.push({title: 'according to ' + varCategories[j].description,
+ varCategory: varCategories[j].name,
+ description: varCategories[j].description,
+ onMouseClick: function(elm, data, i) {
+ var links = d3.selectAll(".link");
+ var pipeData="";
+ var name_tmp = "";
+ links.each(function(theLink)
+ {
+ if (theLink.from == elm.__data__.id)
+ {
+ pipeData = pipeData + ", " + theLink.name;
+ }
+ })
+
+ var title = "Here is a list"
+ var variables = JSON.parse(JSON.stringify(currentGraph.variableSchemes[data.varCategory]))
+ prune_tree(pipeData,variables)
+ variables.forEach(function(variable)
+ {
+ variable.name = variable.xPath
+ //work around because nodeMenu expexts the data, to have a "data" object inside
+ variable.data = variable
+ variable.data.name = variable.xPath.split("/")[variable.xPath.split("/").length-1]
+ })
+
+ showList(title,variables,nodeMenu);
+
+ },
+ onMouseOver: function(elm,data,i){}});
+ }
//menu --> functions for right click options
var toolMenu = [
{
@@ -26022,7 +26521,7 @@
},
onMouseOver: function(elm, d, i) {
},
- childrenItems: inputChildrenitems
+ childrenItems: inputChildrenitemsTree
},
{
title: 'Show output variable tree...',
@@ -26032,7 +26531,27 @@
},
onMouseOver: function(elm, d, i) {
},
- childrenItems: outputChildrenitems
+ childrenItems: outputChildrenitemsTree
+ },
+ {
+ title: 'Show input variable list...',
+ onMouseDown: function(elm, k, i) {
+ },
+ onMouseUp: function(elm, k, i) {
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: inputChildrenitemsList
+ },
+ {
+ title: 'Show output variable list...',
+ onMouseDown: function(elm, k, i) {
+ },
+ onMouseUp: function(elm, k, i) {
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: outputChildrenitemsList
}
]
//##############################################################################################################################
@@ -26137,7 +26656,7 @@
}
- function createTreeLayout(theName,schema,theLinks,theAllLinks)
+ function createTreeLayout(theName,schema,theLinks,theAllLinks,nodeMenu)
{
//aigner: Build the tree layout
//######################################################################
@@ -26462,79 +26981,6 @@
frame = frame.attr("height", newHeight + margin.top + margin.bottom)
frame = frame.attr("width", newWidth + margin.top + margin.bottom+300+maxLabelLength*15)
-
- function showVariableTable(aVariable)
- {
- var headLine = "Node Information (" + aVariable.name + ")";
- var data = [];
- // render the table(s)
- data.push({ "name" : "Name", "value" : "\""+aVariable.name+"\"" })
- data.push({ "name" : "xPath", "value" : aVariable.xPath })
- if (aVariable.type){data.push({ "name" : "Type", "value" : aVariable.type })}
- if (aVariable.level){data.push({ "name" : "Level", "value" : aVariable.level })}
- if (aVariable.children || aVariable._children)
- {
- var childrenNum=0;
- if (aVariable.children){childrenNum=childrenNum+aVariable.children.length}
- if (aVariable._children){childrenNum=childrenNum+aVariable._children.length}
- data.push({ "name" : "Number of children", "value" : childrenNum })
- }
- if (aVariable.dimension){data.push({ "name" : "Dimension", "value" : aVariable.dimension })}
- else if(aVariable.dimension===null){data.push({ "name" : "Dimension", "value" : "undefined" })}
- if (aVariable.value){data.push({ "name" : "Value(s)", "value" : aVariable.value })}
-
- 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)
- var listGroup = panel_div.append("div").attr("class","panel-body")
- .append("table").attr("id","myTable")
- .append("tbody")
-
- data.forEach(function(listElement)
- {
- var row = listGroup.append("tr")
- row.append("td").text(listElement.name)
- row.append("td").text(listElement.value)
-
- })
- $('.myPanel').lobiPanel({
- reload: false,
- editTitle: false,
- expand: false,
- unpin: false,
- resize: "none",
- minWidth: 200,
- minHeight: 200,
- maxWidth: 1100,
- maxHeight: 1200,
- });
- $('.myPanel').lobiPanel('unpin');
- }
-
- //Highlight function, that shows usage of a node in the XDSM
- function highlight(data,aText)
- {
- aText = "/"+data.name+aText;
- if (data.parent){highlight(data.parent,aText)}
- else
- {
- var allLinks_tmp = allLinks[0];
- allLinks_tmp.forEach(function(p) {
- var firstElement_tmp = p.__data__.name.split("/")[1]
- var text_fromFirst = "/"+firstElement_tmp+aText.split(firstElement_tmp)[1]
- if (include(p.__data__.name,text_fromFirst))
- {
- d3.select(p).style("opacity", .8);
- }
- else
- {
- d3.select(p).style("opacity", 0);
- }
- });
- }
- }
//Function writeTreeToXML goes through tree nodes and puts the into an xml document
function writeTreeToXML(aNode,anXMLDoc,anXPath)
@@ -26699,47 +27145,10 @@
document.body.removeChild(element);
}
- //menu --> functions for right click options
- var nodeMenu = [
- {
- title: 'Show node information',
- onMouseDown: function(elm, d, i) {
- showVariableTable(d);
- },
- onMouseUp: function(elm, d, i) {},
- onMouseOver: function(elm, d, i) {},
- childrenItems: []
- },
- {
- title: 'Show usage of node in diagram',
- onMouseDown: function(elm, d, i) {
- d3.selectAll(".treeFrame").attr("fill-opacity", .5);
- d3.selectAll(".nodeText").style("fill-opacity", 0.5);
- var theText="";
- highlight(d,theText);
- },
- onMouseUp: function(elm, d, i) {
- d3.selectAll(".link").style("opacity",.6)
- d3.selectAll(".treeFrame").attr("fill-opacity", .8);
- d3.selectAll(".nodeText").style("fill-opacity", 1);
- },
- onMouseOver: function(elm, d, i) {
- },
- childrenItems: []
- },
- {
- title: 'Copy x-path to clipboard',
- onMouseDown: function(elm, d, i) {
- window.prompt("Copy to clipboard: Ctrl+C, Enter", d.xPath);
- d3.select('.d3-context-menu').style('display', 'none');
- },
- onMouseUp: function(elm, d, i) {
- },
- onMouseOver: function(elm, d, i) {
- },
- childrenItems: []
- },
- {
+
+ var treeNodeMenu = nodeMenu;
+ var treeMenu = [
+ {
title: 'Download full tree as XML-file',
onMouseDown: function(elm, d, i) {
//Begin xml structure with the first element
@@ -26790,10 +27199,8 @@
},
childrenItems: []
}
- ]
-
-
-
+ ]
+ treeNodeMenu = nodeMenu.concat(treeMenu)
// Update the nodes…
@@ -26809,7 +27216,7 @@
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
- .on('contextmenu', d3.contextMenu(nodeMenu))
+ .on('contextmenu', d3.contextMenu(treeNodeMenu))
.on("mousedown", function(d) {
if (d3.event.which != 3)
{
@@ -26970,7 +27377,8 @@
}
- //aigner: Here the data is read and the sankey diagram is created
+
+ //aigner: Here the data is read and the sankey diagram is created
//#####################################################################//
var graphs, currentGraph, varCategories, entireData;
function startSankeyDiagram(data, graphID)
@@ -26986,6 +27394,121 @@
}
varCategories = entireData.categories;
+ //Highlight function, that shows usage of a node in the XDSM
+ function highlight(data,aText)
+ {
+ aText = "/"+data.name+aText;
+ if (data.parent){highlight(data.parent,aText)}
+ else
+ {
+ var allLinks = d3.selectAll(".link");
+ var allLinks_tmp = allLinks[0];
+ allLinks_tmp.forEach(function(p) {
+ var firstElement_tmp = p.__data__.name.split("/")[1]
+ var text_fromFirst = "/"+firstElement_tmp+aText.split(firstElement_tmp)[1]
+ if (include(p.__data__.name,text_fromFirst))
+ {
+ d3.select(p).style("opacity", .8);
+ }
+ else
+ {
+ d3.select(p).style("opacity", 0);
+ }
+ });
+ }
+ }
+
+ function showVariableTable(aVariable)
+ {
+ var headLine = "Node Information (" + aVariable.name + ")";
+ var data = [];
+ // render the table(s)
+ data.push({ "name" : "Name", "value" : "\""+aVariable.name+"\"" })
+ data.push({ "name" : "xPath", "value" : aVariable.xPath })
+ if (aVariable.type){data.push({ "name" : "Type", "value" : aVariable.type })}
+ if (aVariable.level){data.push({ "name" : "Level", "value" : aVariable.level })}
+ if (aVariable.children || aVariable._children)
+ {
+ var childrenNum=0;
+ if (aVariable.children){childrenNum=childrenNum+aVariable.children.length}
+ if (aVariable._children){childrenNum=childrenNum+aVariable._children.length}
+ data.push({ "name" : "Number of children", "value" : childrenNum })
+ }
+ if (aVariable.dimension){data.push({ "name" : "Dimension", "value" : aVariable.dimension })}
+ else if(aVariable.dimension===null){data.push({ "name" : "Dimension", "value" : "undefined" })}
+ if (aVariable.value){data.push({ "name" : "Value(s)", "value" : aVariable.value })}
+
+ 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)
+ var listGroup = panel_div.append("div").attr("class","panel-body")
+ .append("table").attr("id","myTable")
+ .append("tbody")
+
+ data.forEach(function(listElement)
+ {
+ var row = listGroup.append("tr")
+ row.append("td").text(listElement.name)
+ row.append("td").text(listElement.value)
+
+ })
+ $('.myPanel').lobiPanel({
+ reload: false,
+ editTitle: false,
+ expand: false,
+ unpin: false,
+ resize: "none",
+ minWidth: 200,
+ minHeight: 200,
+ maxWidth: 1100,
+ maxHeight: 1200,
+ });
+ $('.myPanel').lobiPanel('unpin');
+ }
+
+ //menu --> functions for right click options
+ var nodeMenu = [
+ {
+ title: 'Show node information',
+ onMouseDown: function(elm, d, i) {
+ showVariableTable(d);
+ },
+ onMouseUp: function(elm, d, i) {},
+ onMouseOver: function(elm, d, i) {},
+ childrenItems: []
+ },
+ {
+ title: 'Show usage of node in diagram',
+ onMouseDown: function(elm, d, i) {
+ d3.selectAll(".treeFrame").attr("fill-opacity", .5);
+ d3.selectAll(".nodeText").style("fill-opacity", 0.5);
+ var theText="";
+ highlight(d,theText);
+ },
+ onMouseUp: function(elm, d, i) {
+ d3.selectAll(".link").style("opacity",.6)
+ d3.selectAll(".treeFrame").attr("fill-opacity", .8);
+ d3.selectAll(".nodeText").style("fill-opacity", 1);
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: []
+ },
+ {
+ title: 'Copy x-path to clipboard',
+ onMouseDown: function(elm, d, i) {
+ window.prompt("Copy to clipboard: Ctrl+C, Enter", d.xPath);
+ d3.select('.d3-context-menu').style('display', 'none');
+ },
+ onMouseUp: function(elm, d, i) {
+ },
+ onMouseOver: function(elm, d, i) {
+ },
+ childrenItems: []
+ }
+ ]
var graph = currentGraph.xdsm;
var theNodes = graph.nodes
@@ -26995,6 +27518,7 @@
link.target = link.to;
link.value = link.name.split(",").length
});
+
//################################################################################################//
var headerDiv = sankeyDiagramDiv.append("div").attr("class","panel panel-primary")
@@ -27025,7 +27549,7 @@
var emptyArray="";
var allLinks = d3.selectAll(".link");
var theSchema = currentGraph.variableSchemes[categoryID];
- createTreeLayout(name_tmp,theSchema,emptyArray,allLinks);
+ createTreeLayout(name_tmp,theSchema,emptyArray,allLinks,nodeMenu);
}
var childrenItems = [];
@@ -27049,13 +27573,53 @@
childrenItems: childrenItems
}
]
- //#####################################################################//
-
+ //#####################################################################//
+
+ function showList(aTitle,aList,aMenu)
+ {
+ if (aList.length != 0)
+ {
+ 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(aTitle)
+ panel_div.append("input")
+ .attr("id","myInput")
+ .attr("placeholder","Filter search...")
+ .attr("title","Type in a name")
+ .attr("onkeyup","filterSearch()")
+ var listGroup = panel_div.append("div").attr("class","panel-body")
+ .append("table").attr("id","myTable")
+ .append("tbody")
+
+ var tr = listGroup
+ .selectAll('tr')
+ .data(aList).enter()
+ .append('tr')
+ var td = tr.append("td").html(function(d) {
+ if (d.xPath){return d.xPath;}
+ else {return d.name;}
+ })
+ tr.on('contextmenu', d3.contextMenu(aMenu));
+ $('.myPanel').lobiPanel({
+ reload: false,
+ editTitle: false,
+ expand: false,
+ unpin: false,
+ resize: "none",
+ minWidth: 200,
+ minHeight: 200,
+ maxWidth: 1100,
+ maxHeight: 1200,
+ });
+ $('.myPanel').lobiPanel('unpin');
+ $('.myPanel').lobiPanel('height','5000');
+ }
+ }
- //aigner: treeLayout in the bottom
- //################################################################################################//
- //aigner: Data Model Expand Button
- //##########################################################
+ //aigner: Data Model Tree View Button
+ //####################################################################################################################
var dataModelDiv = d3.select(".sankeyDiagramDiv").append("div").attr("class","dataModelDiv").attr("transform","translate(10,0)")
var ul = dataModelDiv.append("ul")
var dropdown1 = ul.append("li").on("mouseover", function(){d3.select(this).style("cursor", "default")})
@@ -27067,8 +27631,10 @@
.style("margin-bottom","0px")
.attr("height","20")
.attr("width","20")
- dropdown1.append("a").text("Data Model")
+ dropdown1.append("a").text("Data Model Tree")
var links = dropdown1.append("ul");
+ var xOffset_ul = dropdown1[0][0].offsetLeft+dropdown1[0][0].offsetWidth-40;
+ links.style("left", String(xOffset_ul)+"px")
for (var j=0; j< varCategories.length; j++)
{
//console.log(varCategories[j])
@@ -27083,9 +27649,51 @@
})
}
//aigner: Set width of the div, so the VISTOMS dropdown (in the top of the page) still works
- dataModelDiv.style("width", String(dropdown1.node().getBoundingClientRect().width+20)+"px")
- //##########################################################
- //################################################################################################//
+ //dataModelDiv.style("width", String(dropdown1.node().getBoundingClientRect().width+20)+"px")
+ //####################################################################################################################
+
+ //aigner: Data Model List View Button
+ //####################################################################################################################
+ var ul_list = dataModelDiv.append("ul")
+ var dropdownList = ul_list.append("li").on("mouseover", function(){d3.select(this).style("cursor", "default")})
+ dropdownList.append("img").attr("src",fileReference.AGILE_Icon)
+ .attr("align","left")
+ .style("margin-left","6px")
+ .style("margin-right","-10px")
+ .style("margin-top","10px")
+ .style("margin-bottom","0px")
+ .attr("height","20")
+ .attr("width","20")
+ dropdownList.append("a").text("Data Model List")
+ var linksList = dropdownList.append("ul");
+ var xOffset_ul = dropdownList[0][0].offsetLeft+dropdownList[0][0].offsetWidth-40;
+ linksList.style("left", String(xOffset_ul)+"px")
+ for (var j=0; j< varCategories.length; j++)
+ {
+ //console.log(varCategories[j])
+ var linkLi = linksList.append("li");
+ var linkA = linkLi.append("a")
+ .attr("id",j)
+ .text(varCategories[j].description)
+ .on("mouseover", function(){d3.select(this).style("cursor", "pointer")})
+ .on("click", function()
+ {
+ var variables = JSON.parse(JSON.stringify(currentGraph.variableSchemes[varCategories[this.id].name]));
+
+ //aigner: HIER WEITER! evtl. treeData aufbauen (buildTree) um nodeMenu einfacher zu machen
+ variables.forEach(function(variable)
+ {
+ variable.name = variable.xPath
+ //work around because nodeMenu expexts the data, to have a "data" object inside
+ variable.data = variable
+ variable.data.name = variable.xPath.split("/")[variable.xPath.split("/").length-1]
+ })
+ var title = "Here is a list"
+ showList(title,variables,nodeMenu)
+ })
+ }
+ //aigner: Set width of the div, so the VISTOMS dropdown (in the top of the page) still works
+ //####################################################################################################################
d3.select(".dataModelDiv").moveToBack()
headerDiv.moveToBack()