diff --git a/kadmos/graph/mixin_vistoms.py b/kadmos/graph/mixin_vistoms.py
index aa671389eed33aef365fb073fa3e6106dfbfbd5c..2e725b1ed0c9152c3e710ac5b200ad309fe8ef09 100644
--- a/kadmos/graph/mixin_vistoms.py
+++ b/kadmos/graph/mixin_vistoms.py
@@ -29,15 +29,15 @@ VISTOMS_NAME_TEMP = 'VISTOMS_Static.html'
VISTOMS_TV_NAME_TEMP = 'VISTOMS_TreeViewer.html'
LOCAL_PATH_PICTURES = os.path.join("file:static", "pictures")
-LOCAL_FILE_REFS = dict(REP__Acknowledgements__REP=os.path.join(LOCAL_PATH_PICTURES, "Acknowledgements.svg"),
- REP__AGILE_Icon__REP=os.path.join(LOCAL_PATH_PICTURES, "AGILE_Icon.png"),
- REP__AGILE_Logo__REP=os.path.join(LOCAL_PATH_PICTURES, "AGILE_Logo.png"),
- REP__Contact__REP=os.path.join(LOCAL_PATH_PICTURES, "Contact.svg"),
- REP__Home__REP=os.path.join(LOCAL_PATH_PICTURES, "Home.svg"),
- REP__RWTH_Logo__REP=os.path.join(LOCAL_PATH_PICTURES, "RWTH_Logo.svg"),
- REP__TUDelft_Logo__REP=os.path.join(LOCAL_PATH_PICTURES, "TUDelft_Logo.svg"),
- REP__Tutorial__REP=os.path.join(LOCAL_PATH_PICTURES, "Tutorial.svg"),
- REP__VISTOMS_Label__REP=os.path.join(LOCAL_PATH_PICTURES, "VISTOMS_Label.svg"))
+LOCAL_FILE_REFS = dict(REP__Acknowledgements__REP=os.path.join(LOCAL_PATH_PICTURES, "Acknowledgements.svg").replace('\\', '/'),
+ REP__AGILE_Icon__REP=os.path.join(LOCAL_PATH_PICTURES, "AGILE_Icon.png").replace('\\', '/'),
+ REP__AGILE_Logo__REP=os.path.join(LOCAL_PATH_PICTURES, "AGILE_Logo.png").replace('\\', '/'),
+ REP__Contact__REP=os.path.join(LOCAL_PATH_PICTURES, "Contact.svg").replace('\\', '/'),
+ REP__Home__REP=os.path.join(LOCAL_PATH_PICTURES, "Home.svg").replace('\\', '/'),
+ REP__RWTH_Logo__REP=os.path.join(LOCAL_PATH_PICTURES, "RWTH_Logo.svg").replace('\\', '/'),
+ REP__TUDelft_Logo__REP=os.path.join(LOCAL_PATH_PICTURES, "TUDelft_Logo.svg").replace('\\', '/'),
+ REP__Tutorial__REP=os.path.join(LOCAL_PATH_PICTURES, "Tutorial.svg").replace('\\', '/'),
+ REP__VISTOMS_Label__REP=os.path.join(LOCAL_PATH_PICTURES, "VISTOMS_Label.svg").replace('\\', '/'))
diff --git a/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.eot b/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.eot
new file mode 100644
index 0000000000000000000000000000000000000000..b93a4953fff68df523aa7656497ee339d6026d64
Binary files /dev/null and b/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.eot differ
diff --git a/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.ttf b/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..1413fc609ab6f21774de0cb7e01360095584f65b
Binary files /dev/null and b/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.ttf differ
diff --git a/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.woff b/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..9e612858f802245ddcbf59788a0db942224bab35
Binary files /dev/null and b/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.woff differ
diff --git a/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.woff2 b/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..64539b54c3751a6d9adb44c8e3a45ba5a73b77f0
Binary files /dev/null and b/kadmos/vistoms/static/pictures/glyphicons-halflings-regular.woff2 differ
diff --git a/kadmos/vistoms/templates/VISTOMS.html b/kadmos/vistoms/templates/VISTOMS.html
index f812b40b4d0ce207bbd453b90a9fff78664047a9..fd74668557f6e89cc9cf2bc73f9d245a79081486 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
@@ -19444,14 +19452,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,
@@ -19460,10 +19469,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(list);
@@ -20666,14 +20675,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,
@@ -20682,11 +20692,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 = [];
@@ -20795,7 +20804,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")
@@ -20814,7 +20824,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);
}
//############################################################
@@ -21204,8 +21214,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")
@@ -21224,7 +21234,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)
@@ -21424,7 +21434,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
@@ -21667,8 +21677,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) {
@@ -23605,13 +23615,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,
@@ -23620,7 +23632,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)");
@@ -23778,8 +23790,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)
@@ -25849,7 +25861,7 @@
{
if (theLink.to == theNode.id)
{
- array = array + ", " + theLink.name;
+ array = array + "," + theLink.name;
}
name_tmp = "Input tree view:" + theNode.id + "; Categorization: " + categoryDescr;
}
@@ -25857,7 +25869,7 @@
{
if (theLink.from == theNode.id)
{
- array = array + ", " + theLink.name;
+ array = array + "," + theLink.name;
}
name_tmp = "Output tree view:" + theNode.id + "; Categorization: " + categoryDescr;
}
@@ -26163,13 +26175,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,
@@ -26178,7 +26192,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")
@@ -26337,8 +26351,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)
diff --git a/kadmos/vistoms/templates/VISTOMS_Static.html b/kadmos/vistoms/templates/VISTOMS_Static.html
index 7af0313934001c6fb4c2c763b17095db7248e34f..0e245abdec5df75a6f27423fbb16f405d103d70e 100644
--- a/kadmos/vistoms/templates/VISTOMS_Static.html
+++ b/kadmos/vistoms/templates/VISTOMS_Static.html
@@ -1726,6 +1726,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: Function to filter a list with a search
//##############################################################
function filterSearch()
@@ -20021,14 +20029,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,
@@ -20037,11 +20046,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 = [];
@@ -20134,7 +20142,7 @@
name = "Input tree view: " + k.id + "; Categorization: " + categoryDescr;
if (d.to == k.id)
{
- array = array + ", " + d.name;
+ array = array + "," + d.name;
}
}
else if (io=="out")
@@ -20150,7 +20158,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")
@@ -20169,7 +20178,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);
}
//############################################################
@@ -20252,7 +20261,7 @@
minWidth: 200,
minHeight: 200,
maxWidth: 1100,
- maxHeight: 1100,
+ maxHeight: 1200,
});
$('.myPanel').lobiPanel('unpin');
}
@@ -20374,8 +20383,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")
@@ -20394,7 +20403,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)
@@ -20461,7 +20470,7 @@
minWidth: 200,
minHeight: 200,
maxWidth: 1100,
- maxHeight: 1100,
+ maxHeight: 1200,
});
$('.myPanel').lobiPanel('unpin');
}
@@ -20510,7 +20519,8 @@
})
}
- 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
@@ -20520,8 +20530,7 @@
if (pipeData)
{
prune_tree(pipeData, treeData);
- }
-
+ }
//build tree layout for vistoms
var newTree = {};
buildTree(newTree, treeData)
@@ -20754,8 +20763,9 @@
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);
+ console.log(aLobiID)
+ $('.' + 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) {
@@ -20947,7 +20957,7 @@
minWidth: 200,
minHeight: 200,
maxWidth: 1100,
- maxHeight: 1100,
+ maxHeight: 1200,
});
$('.myPanel').lobiPanel('unpin');
}
@@ -22471,13 +22481,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,
@@ -22486,7 +22498,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)");
@@ -22644,8 +22656,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)
@@ -24715,7 +24727,7 @@
{
if (theLink.to == theNode.id)
{
- array = array + ", " + theLink.name;
+ array = array + "," + theLink.name;
}
name_tmp = "Input tree view:" + theNode.id + "; Categorization: " + categoryDescr;
}
@@ -24723,7 +24735,7 @@
{
if (theLink.from == theNode.id)
{
- array = array + ", " + theLink.name;
+ array = array + "," + theLink.name;
}
name_tmp = "Output tree view:" + theNode.id + "; Categorization: " + categoryDescr;
}
@@ -25029,13 +25041,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,
@@ -25044,7 +25058,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")
@@ -25203,8 +25217,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)