diff --git a/kadmos/vistoms/templates/VISTOMS.html b/kadmos/vistoms/templates/VISTOMS.html
index 730d62f80679e43c4681ed6d3ef38e0916bccba2..de4254ed7d98399183f5e9578e2097172a60cc41 100644
--- a/kadmos/vistoms/templates/VISTOMS.html
+++ b/kadmos/vistoms/templates/VISTOMS.html
@@ -50,6 +50,14 @@
}
});
};
+
+ /**
+ * Returns a random integer between min (inclusive) and max (inclusive)
+ * Using Math.round() will give you a non-uniform distribution!
+ */
+ function getRandomInt(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
//aigner: General functions communicating with the user via bootbox after kadmos requests
@@ -20066,14 +20074,15 @@
{
var headLine = "Tree Layout for category:\" " + category + "\", subcategory:\" " + sub_category + "\"";
var d3_body = d3.select("body");
-
- var treeLayoutdiv = d3_body.append("div").attr("class","treeDiv panel-default")
+ var lobiID = String(getRandomInt(0,1000))
+ var divClassName = "treeDiv" + lobiID;
+ var treeLayoutdiv = d3_body.append("div").attr("class",divClassName+ " 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(headLine)
- $('.treeDiv').lobiPanel({
+ $('.' + divClassName).lobiPanel({
reload: false,
editTitle: false,
unpin: false,
@@ -20082,10 +20091,10 @@
minHeight: 200,
maxHeight: 100000,
});
- $('.treeDiv').lobiPanel('unpin');
+ $('.'+divClassName).lobiPanel('unpin');
var treeLayoutSVG = treeLayoutdiv.append("svg").attr("class","treeLayoutSVG")
var treeLayout = treeLayoutSVG.append("g").attr("class","treeLayout");
- maketreeLayout(array, treeLayout, treeLayoutSVG, treeLayoutdiv, headLine, varCategories[0].description);
+ maketreeLayout(array, treeLayout, treeLayoutSVG, treeLayoutdiv, divClassName, headLine, varCategories[0].description);
show_bootBox_listMessage(functions,nodeMenu);
}
if (result.includes("List"))
@@ -21282,14 +21291,15 @@
{
var headLine = "Full data model tree view; Categorization: " + categoryDescr;
var d3_body = d3.select("body");
-
- var treeLayoutdiv = d3_body.append("div").attr("class","treeDiv panel-default")
+ var lobiID = String(getRandomInt(0,1000))
+ var divClassName = 'treeDiv' + lobiID;
+ var treeLayoutdiv = d3_body.append("div").attr("class",divClassName+" panel-default")
.style("left",(d3.event.pageX) + "px")
.style("top",(d3.event.pageY - 28) + "px")
.style("position", "absolute")
treeLayoutdiv.append("div").attr("class","panel-heading")
.append("div").attr("class","panel_title").append("h4").text(headLine)
- $('.treeDiv').lobiPanel({
+ $('.' + divClassName).lobiPanel({
reload: false,
editTitle: false,
unpin: false,
@@ -21298,11 +21308,10 @@
minHeight: 200,
maxHeight: 100000,
});
- $('.treeDiv').lobiPanel('unpin');
-
+ $('.'+divClassName).lobiPanel('unpin');
var treeLayoutSVG = treeLayoutdiv.append("svg").attr("class","treeLayoutSVG")
var treeLayout = treeLayoutSVG.append("g").attr("class","treeLayout");
- maketreeLayout(emptyArray, treeLayout, treeLayoutSVG, treeLayoutdiv, headLine, aCategory);
+ maketreeLayout(emptyArray, treeLayout, treeLayoutSVG, treeLayoutdiv, divClassName, headLine, aCategory);
}
var childrenItems = [];
@@ -21411,7 +21420,8 @@
var headLine = name;
var d3_body = d3.select("body");
- var divClassName = "treeDiv";
+ var lobiID = String(getRandomInt(0,1000))
+ var divClassName = "treeDiv" + lobiID;
var treeLayoutdiv = d3_body.append("div").attr("class",divClassName + " panel-default")
.style("left",(d3.event.pageX) + "px")
.style("top",(d3.event.pageY - 28) + "px")
@@ -21430,7 +21440,7 @@
$('.'+divClassName).lobiPanel('unpin');
var treeLayoutSVG = treeLayoutdiv.append("svg").attr("class","treeLayoutSVG")
var treeLayout = treeLayoutSVG.append("g").attr("class","treeLayout");
- maketreeLayout(array, treeLayout, treeLayoutSVG, treeLayoutdiv, headLine, aCategory);
+ maketreeLayout(array, treeLayout, treeLayoutSVG, treeLayoutdiv, divClassName, headLine, aCategory);
}
//############################################################
@@ -21820,8 +21830,8 @@
{
var headLine = "Tree view: " + data.from + " → " + data.to + "; Categorization: " + categoryDescr;
var d3_body = d3.select("body");
-
- var divClassName = "treeDiv";
+ var lobiID = String(getRandomInt(0,1000))
+ var divClassName = "treeDiv" + lobiID;
var treeLayoutdiv = d3_body.append("div").attr("class",divClassName + " panel-default")
.style("left",(d3.event.pageX) + "px")
.style("top",(d3.event.pageY - 28) + "px")
@@ -21840,7 +21850,7 @@
$('.'+divClassName).lobiPanel('unpin');
var treeLayoutSVG = treeLayoutdiv.append("svg").attr("class","treeLayoutSVG")
var treeLayout = treeLayoutSVG.append("g").attr("class","treeLayout");
- maketreeLayout(data.name, treeLayout, treeLayoutSVG, treeLayoutdiv, headLine, aVarCategory);
+ maketreeLayout(data.name, treeLayout, treeLayoutSVG, treeLayoutdiv, divClassName, headLine, aVarCategory);
}
function showEdgeTable(anEdge)
@@ -22040,7 +22050,7 @@
}
- function maketreeLayout(pipeData, layout, svg, div, aName, aVarCategory)
+ function maketreeLayout(pipeData, layout, svg, div, aLobiID, aName, aVarCategory)
{
var treeData = (JSON.parse(JSON.stringify(currentGraph.variableSchemes[aVarCategory])));
//aigner: Build the tree layout
@@ -22283,8 +22293,8 @@
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);
+ $('.' + aLobiID).lobiPanel('setWidth', newWidth + margin.top + margin.bottom +400+maxLabelLength*25+offset_tmp);
+ $('.' + aLobiID).lobiPanel('setHeight', newHeight + margin.top + 2*margin.bottom+offset_tmp);
div = div.attr("height", newHeight + margin.top + margin.bottom+offset_tmp)
div = div.attr("width", newWidth + margin.top + margin.bottom +400+maxLabelLength*25+offset_tmp)
.on("mousedown", function(d) {
@@ -23619,13 +23629,15 @@
//aigner: Here the tree layout is created
var d3_body = d3.select("body")
- var treeLayoutdiv = d3_body.append("div").attr("class","treeDiv panel-default")
+ var lobiID = String(getRandomInt(0,1000))
+ var divClassName = "treeDiv"+lobiID
+ var treeLayoutdiv = d3_body.append("div").attr("class",divClassName+" 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({
+ $('.'+divClassName).lobiPanel({
reload: false,
editTitle: false,
unpin: false,
@@ -23634,7 +23646,7 @@
minHeight: 200,
maxHeight: 100000,
});
- $('.treeDiv').lobiPanel('unpin');
+ $('.'+divClassName).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)");
@@ -23792,8 +23804,8 @@
newWidth=Math.max(newWidth,getTextWidth(theName,"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);
+ $('.'+divClassName).lobiPanel('setWidth', newWidth + margin.top + margin.bottom +400+maxLabelLength*25+offset_tmp);
+ $('.'+divClassName).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)
@@ -26177,13 +26189,15 @@
//aigner: Here the tree layout is created
var d3_body = d3.select("body")
- var treeLayoutdiv = d3_body.append("div").attr("class","treeDiv panel-default")
+ var lobiID = String(getRandomInt(0,1000))
+ var divClassName = "treeDiv"+lobiID
+ var treeLayoutdiv = d3_body.append("div").attr("class",divClassName+" 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({
+ $('.'+divClassName).lobiPanel({
reload: false,
editTitle: false,
unpin: false,
@@ -26192,7 +26206,7 @@
minHeight: 200,
maxHeight: 100000,
});
- $('.treeDiv').lobiPanel('unpin');
+ $('.'+divClassName).lobiPanel('unpin');
var treeLayoutSVG = treeLayoutdiv.append("svg").attr("class","treeLayoutSVG")
var treeGroup = treeLayoutSVG.append("g").attr("class","treeGroup").style("position","absolute")
@@ -26351,8 +26365,8 @@
newWidth=Math.max(newWidth,getTextWidth(theName,"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);
+ $('.'+divClassName).lobiPanel('setWidth', newWidth + margin.top + margin.bottom +400+maxLabelLength*25+offset_tmp);
+ $('.'+divClassName).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)