From 366d7bc38cd50ba07b30b1b1996f122dbbbf4d3f Mon Sep 17 00:00:00 2001
From: baigner <benedikt.aigner@rwth-aachen.de>
Date: Tue, 15 May 2018 13:15:49 +0200
Subject: [PATCH] Variables can now be shown as a list and a tree. This works
for the XDSM. Edge bundles and Sankey will follow...
Former-commit-id: be57f1e8a7ed5b83d8bb36fd4a3ac4d931dc917b
---
kadmos/vistoms/templates/VISTOMS.html | 233 ++++++++++++++------------
1 file changed, 123 insertions(+), 110 deletions(-)
diff --git a/kadmos/vistoms/templates/VISTOMS.html b/kadmos/vistoms/templates/VISTOMS.html
index 8f0b22ab2..45cb20735 100644
--- a/kadmos/vistoms/templates/VISTOMS.html
+++ b/kadmos/vistoms/templates/VISTOMS.html
@@ -19788,11 +19788,17 @@
var firstEl = treeData[0].xPath.split("/")[1]
var graphElements = JSON.parse(result)
+
+ var title = "Here is a list of graph elements."
+ +" category: \"" + category + "\""
+ +", sub-category: \"" + sub_category + "\""
var message = "";
var variables = [];
var functions = [];
+
+
if (result.includes("/"+firstEl))
{
var pipeData = [];
@@ -19819,13 +19825,6 @@
variable.data = variable
variable.data.name = variable.xPath.split("/")[variable.xPath.split("/").length-1]
})
-
- //build tree layout for vistoms
- var newTree = {};
- buildTree(newTree, variables)
- //variables = newTree
- console.log(newTree)
- console.log(variables)
bootbox.prompt(
{
@@ -19864,12 +19863,12 @@
var treeLayoutSVG = treeLayoutdiv.append("svg").attr("class","treeLayoutSVG")
var treeLayout = treeLayoutSVG.append("g").attr("class","treeLayout");
maketreeLayout(array, treeLayout, treeLayoutSVG, treeLayoutdiv, divClassName, headLine, varCategories[0].description);
- show_bootBox_listMessage(functions,toolMenu);
+ show_bootBox_listMessage(title,functions,[]);
}
if (result.includes("List"))
{
- show_bootBox_listMessage(variables,nodeMenu);
- show_bootBox_listMessage(functions,toolMenu);
+ show_bootBox_listMessage(title,variables,nodeMenu);
+ show_bootBox_listMessage(title,functions,[]);
}
}
}
@@ -19882,51 +19881,7 @@
{
functions.push({name:graphElement,type:"function"})
})
- show_bootBox_listMessage(functions,toolMenu)
- }
-
- function show_bootBox_listMessage(aList,aMenu)
- {
- if (aList.length != 0)
- {
- bootboxContent.title = "Here is a list of graph elements."
- +" category: \"" + category + "\""
- +", sub-category: \"" + sub_category + "\""
- bootboxContent.message = message
- 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(bootboxContent.title)
- 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) { return d.xPath; })
- 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');
- }
+ show_bootBox_listMessage(title,functions,[])
}
}
},
@@ -21020,7 +20975,7 @@
- //aigner: Data Model Expand Button
+ //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")
@@ -21033,8 +20988,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._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])
@@ -21049,7 +21006,94 @@
})
}
//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: Hier weiter!!!
+ function show_bootBox_listMessage(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 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._groups[0][0].offsetLeft+dropdownList._groups[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"
+ show_bootBox_listMessage(title,variables,nodeMenu)
+ })
+ }
+ //aigner: Set width of the div, so the VISTOMS dropdown (in the top of the page) still works
//####################################################################################################################
@@ -21154,34 +21198,34 @@
xdsm.svg.selectAll(".node")
- .each(function(d)
+ .each(function(node)
{
var gNode = this;
var d3gNode = d3.select(gNode);
//aigner: Creation of input/output tree
//############################################################
- function showIOTree(aCategory, categoryDescr, k, io)
- {
+ function showIOTree(aCategory, categoryDescr, aNode, io)
+ {
var edges = d3.selectAll(".edge");
var array="";
var name;
- edges.each(function(d)
+ edges.each(function(edge)
{
if (io=="in")
{
- name = "Input tree view: " + k.id + "; Categorization: " + categoryDescr;
- if (d.to == k.id)
+ name = "Input tree view: " + aNode.id + "; Categorization: " + categoryDescr;
+ if (edge.to == aNode.id)
{
- array = array + "," + d.name;
+ array = array + "," + edge.name;
}
}
else if (io=="out")
{
- name = "Output tree view:" + k.id + "; Categorization: " + categoryDescr;
- if (d.from == k.id)
+ name = "Output tree view:" + aNode.id + "; Categorization: " + categoryDescr;
+ if (edge.from == aNode.id)
{
- array = array + "," + d.name;
+ array = array + "," + edge.name;
}
}
})
@@ -21220,12 +21264,12 @@
inputChildrenitems.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,d,"in")},
+ onMouseClick: function(elm, data, i) {showIOTree(data.varCategory,data.description,node,"in")},
onMouseOver: function(elm,data,i){}});
outputChildrenitems.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,d,"out")},
+ onMouseClick: function(elm, data, i) {showIOTree(data.varCategory,data.description,node,"out")},
onMouseOver: function(elm,data,i){}});
}
@@ -21417,9 +21461,8 @@
}
-
- //menu --> functions for right click options
- var toolMenu = [
+ //menu --> functions for right click options (coordinator)
+ var toolMenuCoor = [
{
title: 'Show competence info',
onMouseDown: function(elm, k, i) {
@@ -21450,7 +21493,11 @@
onMouseOver: function(elm, d, i) {
},
childrenItems: outputChildrenitems
- },
+ }
+ ]
+
+ //menu --> functions for right click options for other tools
+ var toolMenuSpecial = [
{
title: 'Change competence position in the graph',
onMouseDown: function(elm, k, i) {
@@ -21475,45 +21522,11 @@
}
]
-
- //menu --> functions for right click options (special case coordinator)
- var toolMenuCoor = [
- {
- title: 'Show competence info',
- onMouseDown: function(elm, k, i) {
- showToolTable(k);
- },
- onMouseUp: function(elm, k, i) {
- },
- onMouseOver: function(elm, d, i) {
- },
- childrenItems: []
- },
- {
- title: 'Show input variable tree...',
- onMouseDown: function(elm, k, i) {
- },
- onMouseUp: function(elm, k, i) {
- },
- onMouseOver: function(elm, d, i) {
- },
- childrenItems: inputChildrenitems
- },
- {
- title: 'Show output variable tree...',
- onMouseDown: function(elm, k, i) {
- },
- onMouseUp: function(elm, k, i) {
- },
- onMouseOver: function(elm, d, i) {
- },
- childrenItems: outputChildrenitems
- }
- ]
+ var toolMenu = toolMenuCoor.concat(toolMenuSpecial)
scenarioKeys.forEach(function(k)
{
- if (k == d.xdsm)
+ if (k == node.xdsm)
{
var cx, cy;
for (var j=0; j < gNode.childNodes.length; j++)
--
GitLab