Mercurial > hg > Members > nobuyasu > html > graphViewer

changeset 22:892b68564117 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add edgeInfoDisplay
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Fri, 22 Mar 2013 03:58:03 +0900
parents 8f6f69bdd82c
children c0066a07acd0
files show.html
diffstat 1 files changed, 113 insertions(+), 65 deletions(-) [+]
line wrap: on
line diff
--- a/show.html	Thu Mar 21 23:20:15 2013 +0900
+++ b/show.html	Fri Mar 22 03:58:03 2013 +0900
@@ -28,6 +28,7 @@
 	<li>&gt; <a href="@{AAEvidenceSiftingModel.Projects.show(desktop.id)}">&{'AAEvidenceSiftingModel.projects.show.title'}</a></li>
     </ul>
 	<script type="text/javascript">var _desktopid = ${desktop.id};function desktopid(){return _desktopid;}</script>
+
 <div id="traverseDisplay" style='position:fixed; width:250px; height:250px; border:solid 
 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'>
     <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.7;'></div>
@@ -69,13 +70,26 @@
     </nobr>
 </div>
 
+
+
 <div class="graphMainCss" style="position:absolute; left:0; bottom:0; width:100%; height:75%;" id='graphMain'>
     <div  style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
     </div>
 </div>
 
+<div id='edgeInfoDisplay' class='edgeInfoTable' style='left:0; top:0; z-index:20;'>
+    <div id="closeEdgeInfoDisplay" style='position:absolute; right:5px; top:-15px; z-index:10; color:white;' onclick="$('#edgeInfoDisplay').css('visibility','hidden');" onmouseover="$('#closeEdgeInfoDisplay').css('color','yellow');" onmouseout="$('#closeEdgeInfoDisplay').css('color','white')" >CLOSE</div>  <div id='edgeInfoTitle' style='position:absolute; margin-top:2px; padding-left:5px; font-size:20px; width:100%; text-align:left;'>Traverse</div>
+  <div id='edgeInfoBody' style='position:absolute; padding-top:20px; '>
+      <div class='edgeInfoDiv' style='top:0px; left:0px;'>aaa---aaa----aaa---aaa---aaa-</div>
+      <div class='edgeInfoDiv' style='top:0px; left:0px;'>aaa---aaa----aaa---aaa---aaa-</div>
+      <div class='edgeInfoDiv' style='top:0px; left:0px;'>aaa---aaa----aaa---aaa---aaa-</div>
+  </div>
+</div>
+
+
 <script type="text/javascript">
-var BASE_URL = "";
+var CURRENT_DATA = {};
+
 if(!Array.prototype.filter){
     Array.prototype.filter=function(func){
 	var arr=[];
@@ -93,26 +107,18 @@
     anchor:"Continuous",
     overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]]
 };
-
 var arrowBothConnector = {
     connector:"StateMachine",
     paintStyle:{lineWidth:2,strokeStyle:"#aaf"},
     hoverPaintStyle:{strokeStyle:"#dbe300"},
     endpoint:"Blank",
 };
-
 function GraphData() {
     var graphData = {};
     graphData.nodes = {};
     graphData.edges = {};
     return graphData;
 }
-
-function Edge(fromNode, toNode, relation) {
-    var obj = {from:fromNode, to:toNode, rel:relation };
-    return obj;
-}
-
 var DragHandler = {
     _oElem : null,
     _id : null,
@@ -140,6 +146,7 @@
 	e = e ? e : window.event;
 	var nextX =  x + (e.clientX - oElem.mouseX);
 	var nextY =  y + (e.clientY - oElem.mouseY);
+	if (nextX < 0) nextX = 0;
 	oElem.style.left = nextX + 'px';
 	oElem.style.top = nextY  + 'px';
 	oElem.mouseX = e.clientX;
@@ -160,10 +167,13 @@
 	if (oElem.nodeId) {
 	    var x = parseInt(oElem.style.left);
 	    var y = parseInt(oElem.style.top);
-	    nodePositionPost(oElem.nodeId, x, y);
+	    var node = GRAPH_DATA.nodes[oElem.nodeId];
+	    if (x < 0) x = 0;
+	    node.position.x = x;
+	    node.position.y = y;
+	    nodePositionPost(node);
 	}
     }
-
 };
 
 function writeMiniDisplay(title,str) {
@@ -213,7 +223,7 @@
 	var kind = edgeInfo[i].kind;
 	var dir = edgeInfo[i].direction;
 	var num = edgeInfo[i].num;
-	info[kind] = {};
+	if (!info[kind]) info[kind] = {};
 	info[kind][dir] = num;
     }
     var viewHTML = createTraverseView(info);
@@ -221,6 +231,54 @@
     $('#traverseDisplayBody')[0].innerHTML = viewHTML;
 }
 
+function calcEdgeInfoTableHeight() {
+    var edgeInfoDivs = $('.edgeInfoDiv');
+    if (edgeInfoDivs.length <= 0) return 0;
+    var childrenHeight = 0;
+    for (var i=0; i<edgeInfoDivs.length; i++) {
+	childrenHeight = childrenHeight + edgeInfoDivs[i].offsetHeight;
+    }
+    var margin = parseInt(edgeInfoDivs.css('margin-top').split('px')[0]);
+    return (childrenHeight + 2*margin);
+}
+
+function updateEdgeInfoTableHeight() {
+    var table =  $('.edgeInfoTable');
+    var height = calcEdgeInfoTableHeight();
+    var borderSize = parseInt(table.css('border-left-width').split('px')[0]);
+    table.css('height', (height+borderSize*2) + 'px');
+}
+
+function edgeInfoTableClear() {
+    $('.edgeInfoTable').children().remove();
+}
+
+function addEdgeInfoDiv(edgeInfoDiv) {
+    var table =  $('.edgeInfoTable')[0];    
+    table.insertBefore(edgeInfoDiv);
+}
+
+function createEdgeInfoDiv(edgeInfo) {
+    function createEdgeInfoinnerHTML(edgeInfo) {
+	return edgeInfo.kind + " : " + edgeInfo.num + ": " + edgeInfo.direction;
+    }
+    var edgeInfoDiv = $('<div class="edgeInfoDiv"/>')
+    edgeInfoDiv[0].innerHTML = createEdgeInfoinnerHTML(edgeInfo);
+    return edgeInfoDiv;
+}
+
+function updateEdgeInfoDisplay() {
+    edgeInfoTableClear();
+    var nodeId = this.id;
+    var edgeInfoArray = GRAPH_DATA.nodes[nodeId].property.edgeInfo;
+    for (var i=0; i<edgeInfoArray.length; i++) {
+	var edgeInfo = edgeInfoArray[i];
+	if (!edgeInfo.view) edgeInfo.view = createEdgeInfoDiv(edgeInfo);
+	addEdgeInfoDiv(edgeInfo.view[0]);
+    }
+    updateEdgeInfoTableHeight();
+}
+
 function init() {
     jsPlumb.importDefaults({
 	Connector : [ "Straight", { curviness:50 } ],
@@ -232,8 +290,12 @@
     var rootLeft = rootDiv.offset().left;
     var rootTop = rootDiv.offset().top;
     $('#traverseDisplay').css( {
-	left: rootLeft,
-	top: rootTop
+	left: rootLeft + 'px',
+	top: rootTop + 'px'
+    });
+    $('#edgeInfoDisplay').css({
+	right: 0 + 'px',
+	top: rootTop + 'px'
     });
     var heightStr = $('#traverseDisplay').css('height').split('px')[0];
     var height = parseInt(heightStr);
@@ -249,11 +311,12 @@
 }
 
 function showTraverseDisplay(node) {
-    this.id = node.property.id;
+    CURRENT_DATA.nodeId = node.property.id;
     if (!node.property.edgeInfo) { console.log("not found node.edgeInfo "); return; }
     if (!node.property.edgeInfo.viewHtml) {
 	createEdgeInfoView(node);
     }
+
     $('#traverseDisplayBody')[0].innerHTML = node.property.edgeInfo.viewHtml;	
     $("#traverseDisplay").css("visibility", "visible");
 }
@@ -310,7 +373,7 @@
 function getEvidence(id, kind, direction, edgeInfoId) {
     $.ajax({
 	url:"/aat/aaevidencesiftingmodel.userdesktops/get?desktopid="+desktopid() + "&id="+id+"&kind="+kind+"&direction="+direction+"&edgeinfoid="+edgeInfoId,
-	success:function(o) { console.log(this.url); parseJSONGraphData(GRAPH_DATA, o); recursiveCalcPosition(GRAPH_DATA, GRAPH_DATA.nodes[id]);  showEdgesAndNodes(GRAPH_DATA, o, kind);},
+	success:function(o) { parseJSONGraphData(GRAPH_DATA, o); recursiveCalcPosition(GRAPH_DATA, GRAPH_DATA.nodes[id]);  showEdgesAndNodes(GRAPH_DATA, o, kind);},
 	type:"GET", cache:true,
 	error:function(o) { console.log("getEvidence error : ", o); }
     });
@@ -318,24 +381,31 @@
 
 function postToServer(parameter) {
     $.ajax({
-	url:"/aat/aaevidencesiftingmodel.userdesktops/update?"+parameter,
-	success:function(o) {console.log("success postToServer URL:"+this.url); },
+	url:"/aat/aaevidencesiftingmodel.userdesktops/update?desktopid="+desktopid()+"&"+parameter,
+	success:function(o) { },
 	type:"POST", cache:true,
 	error:function(o) { console.log("post error : ", o); }
     });
 }
 
+var stateObj = {
+    accept:"Accepted",
+    reject:"Rejected",
+    retract:"Retract"
+};
+
 function statePost(buttonEle) {
-    var id = this.id;
+    var id = CURRENT_DATA.nodeId;
     var state = buttonEle.html();
     var node = GRAPH_DATA.nodes[id];
-    node.property.state = state;
-    postToServer("id="+id+"&state="+state);
+    node.property.state = stateObj[state];
+    postToServer("id="+id+"&state="+stateObj[state]);
     showMiniDisplay(node);
+    updateNodeElement(node);
 }
 
-function nodePositionPost(id, coordX, coordY) {
-    postToServer("id="+id+"&coordX="+coordX+"&coordY="+coordY);
+function nodePositionPost(node) {
+    postToServer("id="+node.property.id+"&coordX="+node.position.x+"&coordY="+node.position.y);
 }
 
 function traverseAction() {
@@ -349,13 +419,13 @@
 	    kinds.push(inputTag.value);
 	}
     }
-    var id = this.id;
+    var id = CURRENT_DATA.nodeId;
     var edgeInfoArray = GRAPH_DATA.nodes[id].property.edgeInfo;
     var edgeInfos = {};
         for (var i=0; i<edgeInfoArray.length; i++) {
 	var edgeInfo = edgeInfoArray[i];
 	var kind = edgeInfo.kind;
-	edgeInfos[kind] = {};
+	if (!edgeInfos[kind]) edgeInfos[kind] = {};
 	edgeInfos[kind][edgeInfo.direction] = edgeInfo;
     }
     for (var i=0; i<kinds.length; i++) {
@@ -364,6 +434,7 @@
 	if (inDirChecked && edgeInfo.in) getEvidence(id, kind, "in", edgeInfo.in.id);
 	if (outDirChecked && edgeInfo.out ) getEvidence(id, kind, "out", edgeInfo.out.id);
     }
+
 }
 
 function createNodeDiv(node) {
@@ -372,7 +443,6 @@
     if(!node.position) {
 	node.position = calcNewNodePosition();
     }
-    node.view.hover();
     var div = $("<div class='graphNodeContent' />")[0];
     div.id = node.property.id;
     div.innerHTML = node.property.title;
@@ -380,6 +450,12 @@
     return node;
 }
 
+var StateColor = {
+    Accepted:"#48f",
+    Rejected:"#a66",
+    Retracted:"#fff"
+};
+
 function updateNodeElement(node) {
     var created = false;
     if(!node.view) {
@@ -387,18 +463,22 @@
 	createNodeDiv(node);
     }
     var div = node.view;
+    div.hover(  
+	function(){div.css("box-shadow","white 0 0 50px");  },
+	function(){div.css("box-shadow","");}
+    );
     node.view[0].nodeId = node.property.id;
-    //    div.text(node.property.title);
     div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);});
     DragHandler.attach($(node.view)[0]);
-    var kindBackground = {agree:"#aaf", rejected:"#fff"};
     var kindBorder = {agree:"#66a", rejected:"#a66"};
-    div.css("background", kindBackground[node.kind]||"white");
-    div.css("border-color", kindBorder[node.kind] ||"#58f");
+    div.css("background", StateColor[node.property.state]||"white");
+    div.css("border-color", kindBorder[node.property.state] ||"#58f");
     div.css({
 	left: node.position.x + 'px',
 	top: node.position.y + 'px'
     }); 
+    var contentDiv = $(div[0].firstChild);
+    contentDiv.css("background", StateColor[node.property.state]||"white");
     return created;    
 }
 
@@ -412,6 +492,7 @@
 	    $('#graphRoot').append(node.view);
 	}
     }
+    nodePositionPost(node);
 }
 
 var ViewParam = {
@@ -601,6 +682,7 @@
 	if (!childNode.position) {
 	    childNode.position = calcChildNodePosition(parentNode, numCalcChild);
 	    numCalcChild++;
+	    nodePositionPost(childNode);
 	}
     }
     /* calcration of grandchildNode position  */
@@ -617,42 +699,7 @@
     }
 }
 
-function createNodeElement(node) {
-    var created = false;
-    if(!node.view) {
-	created = true;
-	createNodeDiv(node);
-    }
-    var div = node.view;
-    node.view[0].nodeId = node.property.id;
-    //    div.text(node.property.title);
-    div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);});
-    DragHandler.attach($(node.view)[0]);
-    var kindBackground = {agree:"#aaf", rejected:"#fff"};
-    var kindBorder = {agree:"#66a", rejected:"#a66"};
-    div.css("background", kindBackground[node.kind]||"white");
-    div.css("border-color", kindBorder[node.kind] ||"#58f");
-    div.css({
-	left: node.position.x,
-	top: node.position.y
-    }); 
-    return created;    
-}
-
-
-function showNode(node) {
-    if(createNodeElement(node)) {
-	var fc = $('#graphRoot')[0].firstChild;
-	if(fc) {
-	    $('#graphRoot')[0].insertBefore(node.view[0], fc);
-	} else {
-	    $('#graphRoot').append(node.view);
-	}
-    }
-}
-
 var GRAPH_DATA = new GraphData();
-
 function startUserDesktopUI() {
     function showFirstEvidenceList(graphData) {
 	var nodes = graphData.nodes;
@@ -696,6 +743,7 @@
 function beginScript() {
     DragHandler.attach($('#miniDisplay')[0]);
     DragHandler.attach($('#traverseDisplay')[0]);
+    DragHandler.attach($('#edgeInfoDisplay')[0]);
     start();
 }