Mercurial > hg > Members > nobuyasu > html > graphViewer

comparison show.html @ 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 864c47b06e85
children c0066a07acd0
comparison
equal deleted inserted replaced
21:8f6f69bdd82c 22:892b68564117
26 <ul > 26 <ul >
27 <li>&gt; <a href="@{AAEvidenceSiftingModel.UserHomes.index()}">&{'navigation.back'}</a></li> 27 <li>&gt; <a href="@{AAEvidenceSiftingModel.UserHomes.index()}">&{'navigation.back'}</a></li>
28 <li>&gt; <a href="@{AAEvidenceSiftingModel.Projects.show(desktop.id)}">&{'AAEvidenceSiftingModel.projects.show.title'}</a></li> 28 <li>&gt; <a href="@{AAEvidenceSiftingModel.Projects.show(desktop.id)}">&{'AAEvidenceSiftingModel.projects.show.title'}</a></li>
29 </ul> 29 </ul>
30 <script type="text/javascript">var _desktopid = ${desktop.id};function desktopid(){return _desktopid;}</script> 30 <script type="text/javascript">var _desktopid = ${desktop.id};function desktopid(){return _desktopid;}</script>
31
31 <div id="traverseDisplay" style='position:fixed; width:250px; height:250px; border:solid 32 <div id="traverseDisplay" style='position:fixed; width:250px; height:250px; border:solid
32 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'> 33 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'>
33 <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.7;'></div> 34 <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.7;'></div>
34 <div id="closeTraverseDisplay" style='position:absolute; right:5px; top:-3px; z-index:10; color:white;' onclick="$('#traverseDisplay').css('visibility','hidden');" onmouseover="$('#closeTraverseDisplay').css('color','yellow');" onmouseout="$('#closeTraverseDisplay').css('color','white')" >CLOSE</div> 35 <div id="closeTraverseDisplay" style='position:absolute; right:5px; top:-3px; z-index:10; color:white;' onclick="$('#traverseDisplay').css('visibility','hidden');" onmouseover="$('#closeTraverseDisplay').css('color','yellow');" onmouseout="$('#closeTraverseDisplay').css('color','white')" >CLOSE</div>
35 <div style='position:absolute; width:90%; height:90%;'> 36 <div style='position:absolute; width:90%; height:90%;'>
67 <span class='button' id="rejectButton" style='position:absolute; width:50px; left:65px; bottom:5px; opacity:1; ' value='rejecte' onclick="statePost($('#rejectButton'));">reject</span> 68 <span class='button' id="rejectButton" style='position:absolute; width:50px; left:65px; bottom:5px; opacity:1; ' value='rejecte' onclick="statePost($('#rejectButton'));">reject</span>
68 <span class='button' id="retractButton" style='position:absolute; width:50px; left:125px; bottom:5px; opacity:1; ' value='retract' onclick="statePost($('#retractButton'));">retract</span> 69 <span class='button' id="retractButton" style='position:absolute; width:50px; left:125px; bottom:5px; opacity:1; ' value='retract' onclick="statePost($('#retractButton'));">retract</span>
69 </nobr> 70 </nobr>
70 </div> 71 </div>
71 72
73
74
72 <div class="graphMainCss" style="position:absolute; left:0; bottom:0; width:100%; height:75%;" id='graphMain'> 75 <div class="graphMainCss" style="position:absolute; left:0; bottom:0; width:100%; height:75%;" id='graphMain'>
73 <div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'> 76 <div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
74 </div> 77 </div>
75 </div> 78 </div>
76 79
80 <div id='edgeInfoDisplay' class='edgeInfoTable' style='left:0; top:0; z-index:20;'>
81 <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>
82 <div id='edgeInfoBody' style='position:absolute; padding-top:20px; '>
83 <div class='edgeInfoDiv' style='top:0px; left:0px;'>aaa---aaa----aaa---aaa---aaa-</div>
84 <div class='edgeInfoDiv' style='top:0px; left:0px;'>aaa---aaa----aaa---aaa---aaa-</div>
85 <div class='edgeInfoDiv' style='top:0px; left:0px;'>aaa---aaa----aaa---aaa---aaa-</div>
86 </div>
87 </div>
88
89
77 <script type="text/javascript"> 90 <script type="text/javascript">
78 var BASE_URL = ""; 91 var CURRENT_DATA = {};
92
79 if(!Array.prototype.filter){ 93 if(!Array.prototype.filter){
80 Array.prototype.filter=function(func){ 94 Array.prototype.filter=function(func){
81 var arr=[]; 95 var arr=[];
82 for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]); 96 for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]);
83 return arr; 97 return arr;
91 hoverPaintStyle:{strokeStyle:"#dbe300"}, 105 hoverPaintStyle:{strokeStyle:"#dbe300"},
92 endpoint:"Blank", 106 endpoint:"Blank",
93 anchor:"Continuous", 107 anchor:"Continuous",
94 overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]] 108 overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]]
95 }; 109 };
96
97 var arrowBothConnector = { 110 var arrowBothConnector = {
98 connector:"StateMachine", 111 connector:"StateMachine",
99 paintStyle:{lineWidth:2,strokeStyle:"#aaf"}, 112 paintStyle:{lineWidth:2,strokeStyle:"#aaf"},
100 hoverPaintStyle:{strokeStyle:"#dbe300"}, 113 hoverPaintStyle:{strokeStyle:"#dbe300"},
101 endpoint:"Blank", 114 endpoint:"Blank",
102 }; 115 };
103
104 function GraphData() { 116 function GraphData() {
105 var graphData = {}; 117 var graphData = {};
106 graphData.nodes = {}; 118 graphData.nodes = {};
107 graphData.edges = {}; 119 graphData.edges = {};
108 return graphData; 120 return graphData;
109 } 121 }
110
111 function Edge(fromNode, toNode, relation) {
112 var obj = {from:fromNode, to:toNode, rel:relation };
113 return obj;
114 }
115
116 var DragHandler = { 122 var DragHandler = {
117 _oElem : null, 123 _oElem : null,
118 _id : null, 124 _id : null,
119 attach : function(oElem) { 125 attach : function(oElem) {
120 oElem.onmousedown = DragHandler._dragBegin; 126 oElem.onmousedown = DragHandler._dragBegin;
138 var x = parseInt(oElem.style.left); 144 var x = parseInt(oElem.style.left);
139 var y = parseInt(oElem.style.top); 145 var y = parseInt(oElem.style.top);
140 e = e ? e : window.event; 146 e = e ? e : window.event;
141 var nextX = x + (e.clientX - oElem.mouseX); 147 var nextX = x + (e.clientX - oElem.mouseX);
142 var nextY = y + (e.clientY - oElem.mouseY); 148 var nextY = y + (e.clientY - oElem.mouseY);
149 if (nextX < 0) nextX = 0;
143 oElem.style.left = nextX + 'px'; 150 oElem.style.left = nextX + 'px';
144 oElem.style.top = nextY + 'px'; 151 oElem.style.top = nextY + 'px';
145 oElem.mouseX = e.clientX; 152 oElem.mouseX = e.clientX;
146 oElem.mouseY = e.clientY; 153 oElem.mouseY = e.clientY;
147 if (oElem.nodeId) { 154 if (oElem.nodeId) {
158 document.onmouseup = null; 165 document.onmouseup = null;
159 DragHandler._oElem = null; 166 DragHandler._oElem = null;
160 if (oElem.nodeId) { 167 if (oElem.nodeId) {
161 var x = parseInt(oElem.style.left); 168 var x = parseInt(oElem.style.left);
162 var y = parseInt(oElem.style.top); 169 var y = parseInt(oElem.style.top);
163 nodePositionPost(oElem.nodeId, x, y); 170 var node = GRAPH_DATA.nodes[oElem.nodeId];
164 } 171 if (x < 0) x = 0;
165 } 172 node.position.x = x;
166 173 node.position.y = y;
174 nodePositionPost(node);
175 }
176 }
167 }; 177 };
168 178
169 function writeMiniDisplay(title,str) { 179 function writeMiniDisplay(title,str) {
170 $('#miniDisplayBody')[0].innerHTML = str; 180 $('#miniDisplayBody')[0].innerHTML = str;
171 if(title) { 181 if(title) {
211 var info = {}; 221 var info = {};
212 for (var i=0; i<edgeInfo.length; i++) { 222 for (var i=0; i<edgeInfo.length; i++) {
213 var kind = edgeInfo[i].kind; 223 var kind = edgeInfo[i].kind;
214 var dir = edgeInfo[i].direction; 224 var dir = edgeInfo[i].direction;
215 var num = edgeInfo[i].num; 225 var num = edgeInfo[i].num;
216 info[kind] = {}; 226 if (!info[kind]) info[kind] = {};
217 info[kind][dir] = num; 227 info[kind][dir] = num;
218 } 228 }
219 var viewHTML = createTraverseView(info); 229 var viewHTML = createTraverseView(info);
220 edgeInfo.viewHtml = viewHTML; 230 edgeInfo.viewHtml = viewHTML;
221 $('#traverseDisplayBody')[0].innerHTML = viewHTML; 231 $('#traverseDisplayBody')[0].innerHTML = viewHTML;
232 }
233
234 function calcEdgeInfoTableHeight() {
235 var edgeInfoDivs = $('.edgeInfoDiv');
236 if (edgeInfoDivs.length <= 0) return 0;
237 var childrenHeight = 0;
238 for (var i=0; i<edgeInfoDivs.length; i++) {
239 childrenHeight = childrenHeight + edgeInfoDivs[i].offsetHeight;
240 }
241 var margin = parseInt(edgeInfoDivs.css('margin-top').split('px')[0]);
242 return (childrenHeight + 2*margin);
243 }
244
245 function updateEdgeInfoTableHeight() {
246 var table = $('.edgeInfoTable');
247 var height = calcEdgeInfoTableHeight();
248 var borderSize = parseInt(table.css('border-left-width').split('px')[0]);
249 table.css('height', (height+borderSize*2) + 'px');
250 }
251
252 function edgeInfoTableClear() {
253 $('.edgeInfoTable').children().remove();
254 }
255
256 function addEdgeInfoDiv(edgeInfoDiv) {
257 var table = $('.edgeInfoTable')[0];
258 table.insertBefore(edgeInfoDiv);
259 }
260
261 function createEdgeInfoDiv(edgeInfo) {
262 function createEdgeInfoinnerHTML(edgeInfo) {
263 return edgeInfo.kind + " : " + edgeInfo.num + ": " + edgeInfo.direction;
264 }
265 var edgeInfoDiv = $('<div class="edgeInfoDiv"/>')
266 edgeInfoDiv[0].innerHTML = createEdgeInfoinnerHTML(edgeInfo);
267 return edgeInfoDiv;
268 }
269
270 function updateEdgeInfoDisplay() {
271 edgeInfoTableClear();
272 var nodeId = this.id;
273 var edgeInfoArray = GRAPH_DATA.nodes[nodeId].property.edgeInfo;
274 for (var i=0; i<edgeInfoArray.length; i++) {
275 var edgeInfo = edgeInfoArray[i];
276 if (!edgeInfo.view) edgeInfo.view = createEdgeInfoDiv(edgeInfo);
277 addEdgeInfoDiv(edgeInfo.view[0]);
278 }
279 updateEdgeInfoTableHeight();
222 } 280 }
223 281
224 function init() { 282 function init() {
225 jsPlumb.importDefaults({ 283 jsPlumb.importDefaults({
226 Connector : [ "Straight", { curviness:50 } ], 284 Connector : [ "Straight", { curviness:50 } ],
230 }); 288 });
231 var rootDiv = $('#graphMain'); 289 var rootDiv = $('#graphMain');
232 var rootLeft = rootDiv.offset().left; 290 var rootLeft = rootDiv.offset().left;
233 var rootTop = rootDiv.offset().top; 291 var rootTop = rootDiv.offset().top;
234 $('#traverseDisplay').css( { 292 $('#traverseDisplay').css( {
235 left: rootLeft, 293 left: rootLeft + 'px',
236 top: rootTop 294 top: rootTop + 'px'
295 });
296 $('#edgeInfoDisplay').css({
297 right: 0 + 'px',
298 top: rootTop + 'px'
237 }); 299 });
238 var heightStr = $('#traverseDisplay').css('height').split('px')[0]; 300 var heightStr = $('#traverseDisplay').css('height').split('px')[0];
239 var height = parseInt(heightStr); 301 var height = parseInt(heightStr);
240 $('#miniDisplay').css( { 302 $('#miniDisplay').css( {
241 left: rootLeft + 'px', 303 left: rootLeft + 'px',
247 $("#miniDisplay").css("visibility", "visible"); 309 $("#miniDisplay").css("visibility", "visible");
248 writeJSONDataToMiniDisplay(node); 310 writeJSONDataToMiniDisplay(node);
249 } 311 }
250 312
251 function showTraverseDisplay(node) { 313 function showTraverseDisplay(node) {
252 this.id = node.property.id; 314 CURRENT_DATA.nodeId = node.property.id;
253 if (!node.property.edgeInfo) { console.log("not found node.edgeInfo "); return; } 315 if (!node.property.edgeInfo) { console.log("not found node.edgeInfo "); return; }
254 if (!node.property.edgeInfo.viewHtml) { 316 if (!node.property.edgeInfo.viewHtml) {
255 createEdgeInfoView(node); 317 createEdgeInfoView(node);
256 } 318 }
319
257 $('#traverseDisplayBody')[0].innerHTML = node.property.edgeInfo.viewHtml; 320 $('#traverseDisplayBody')[0].innerHTML = node.property.edgeInfo.viewHtml;
258 $("#traverseDisplay").css("visibility", "visible"); 321 $("#traverseDisplay").css("visibility", "visible");
259 } 322 }
260 323
261 var nodeNum = 0; 324 var nodeNum = 0;
308 } 371 }
309 372
310 function getEvidence(id, kind, direction, edgeInfoId) { 373 function getEvidence(id, kind, direction, edgeInfoId) {
311 $.ajax({ 374 $.ajax({
312 url:"/aat/aaevidencesiftingmodel.userdesktops/get?desktopid="+desktopid() + "&id="+id+"&kind="+kind+"&direction="+direction+"&edgeinfoid="+edgeInfoId, 375 url:"/aat/aaevidencesiftingmodel.userdesktops/get?desktopid="+desktopid() + "&id="+id+"&kind="+kind+"&direction="+direction+"&edgeinfoid="+edgeInfoId,
313 success:function(o) { console.log(this.url); parseJSONGraphData(GRAPH_DATA, o); recursiveCalcPosition(GRAPH_DATA, GRAPH_DATA.nodes[id]); showEdgesAndNodes(GRAPH_DATA, o, kind);}, 376 success:function(o) { parseJSONGraphData(GRAPH_DATA, o); recursiveCalcPosition(GRAPH_DATA, GRAPH_DATA.nodes[id]); showEdgesAndNodes(GRAPH_DATA, o, kind);},
314 type:"GET", cache:true, 377 type:"GET", cache:true,
315 error:function(o) { console.log("getEvidence error : ", o); } 378 error:function(o) { console.log("getEvidence error : ", o); }
316 }); 379 });
317 } 380 }
318 381
319 function postToServer(parameter) { 382 function postToServer(parameter) {
320 $.ajax({ 383 $.ajax({
321 url:"/aat/aaevidencesiftingmodel.userdesktops/update?"+parameter, 384 url:"/aat/aaevidencesiftingmodel.userdesktops/update?desktopid="+desktopid()+"&"+parameter,
322 success:function(o) {console.log("success postToServer URL:"+this.url); }, 385 success:function(o) { },
323 type:"POST", cache:true, 386 type:"POST", cache:true,
324 error:function(o) { console.log("post error : ", o); } 387 error:function(o) { console.log("post error : ", o); }
325 }); 388 });
326 } 389 }
327 390
391 var stateObj = {
392 accept:"Accepted",
393 reject:"Rejected",
394 retract:"Retract"
395 };
396
328 function statePost(buttonEle) { 397 function statePost(buttonEle) {
329 var id = this.id; 398 var id = CURRENT_DATA.nodeId;
330 var state = buttonEle.html(); 399 var state = buttonEle.html();
331 var node = GRAPH_DATA.nodes[id]; 400 var node = GRAPH_DATA.nodes[id];
332 node.property.state = state; 401 node.property.state = stateObj[state];
333 postToServer("id="+id+"&state="+state); 402 postToServer("id="+id+"&state="+stateObj[state]);
334 showMiniDisplay(node); 403 showMiniDisplay(node);
335 } 404 updateNodeElement(node);
336 405 }
337 function nodePositionPost(id, coordX, coordY) { 406
338 postToServer("id="+id+"&coordX="+coordX+"&coordY="+coordY); 407 function nodePositionPost(node) {
408 postToServer("id="+node.property.id+"&coordX="+node.position.x+"&coordY="+node.position.y);
339 } 409 }
340 410
341 function traverseAction() { 411 function traverseAction() {
342 var inDirChecked = $('#direction_in').is(':checked'); 412 var inDirChecked = $('#direction_in').is(':checked');
343 var outDirChecked = $('#direction_out').is(':checked'); 413 var outDirChecked = $('#direction_out').is(':checked');
347 var inputTag = labelTags[i].children[0]; 417 var inputTag = labelTags[i].children[0];
348 if (inputTag.checked) { 418 if (inputTag.checked) {
349 kinds.push(inputTag.value); 419 kinds.push(inputTag.value);
350 } 420 }
351 } 421 }
352 var id = this.id; 422 var id = CURRENT_DATA.nodeId;
353 var edgeInfoArray = GRAPH_DATA.nodes[id].property.edgeInfo; 423 var edgeInfoArray = GRAPH_DATA.nodes[id].property.edgeInfo;
354 var edgeInfos = {}; 424 var edgeInfos = {};
355 for (var i=0; i<edgeInfoArray.length; i++) { 425 for (var i=0; i<edgeInfoArray.length; i++) {
356 var edgeInfo = edgeInfoArray[i]; 426 var edgeInfo = edgeInfoArray[i];
357 var kind = edgeInfo.kind; 427 var kind = edgeInfo.kind;
358 edgeInfos[kind] = {}; 428 if (!edgeInfos[kind]) edgeInfos[kind] = {};
359 edgeInfos[kind][edgeInfo.direction] = edgeInfo; 429 edgeInfos[kind][edgeInfo.direction] = edgeInfo;
360 } 430 }
361 for (var i=0; i<kinds.length; i++) { 431 for (var i=0; i<kinds.length; i++) {
362 var kind = kinds[i]; 432 var kind = kinds[i];
363 var edgeInfo = edgeInfos[kind]; 433 var edgeInfo = edgeInfos[kind];
364 if (inDirChecked && edgeInfo.in) getEvidence(id, kind, "in", edgeInfo.in.id); 434 if (inDirChecked && edgeInfo.in) getEvidence(id, kind, "in", edgeInfo.in.id);
365 if (outDirChecked && edgeInfo.out ) getEvidence(id, kind, "out", edgeInfo.out.id); 435 if (outDirChecked && edgeInfo.out ) getEvidence(id, kind, "out", edgeInfo.out.id);
366 } 436 }
437
367 } 438 }
368 439
369 function createNodeDiv(node) { 440 function createNodeDiv(node) {
370 node.view = $("<div class='graphNode'/>"); 441 node.view = $("<div class='graphNode'/>");
371 node.view.click(function(){ clickNodeDiv(node.property.id) }); 442 node.view.click(function(){ clickNodeDiv(node.property.id) });
372 if(!node.position) { 443 if(!node.position) {
373 node.position = calcNewNodePosition(); 444 node.position = calcNewNodePosition();
374 } 445 }
375 node.view.hover();
376 var div = $("<div class='graphNodeContent' />")[0]; 446 var div = $("<div class='graphNodeContent' />")[0];
377 div.id = node.property.id; 447 div.id = node.property.id;
378 div.innerHTML = node.property.title; 448 div.innerHTML = node.property.title;
379 node.view[0].appendChild(div); 449 node.view[0].appendChild(div);
380 return node; 450 return node;
381 } 451 }
382 452
453 var StateColor = {
454 Accepted:"#48f",
455 Rejected:"#a66",
456 Retracted:"#fff"
457 };
458
383 function updateNodeElement(node) { 459 function updateNodeElement(node) {
384 var created = false; 460 var created = false;
385 if(!node.view) { 461 if(!node.view) {
386 created = true; 462 created = true;
387 createNodeDiv(node); 463 createNodeDiv(node);
388 } 464 }
389 var div = node.view; 465 var div = node.view;
466 div.hover(
467 function(){div.css("box-shadow","white 0 0 50px"); },
468 function(){div.css("box-shadow","");}
469 );
390 node.view[0].nodeId = node.property.id; 470 node.view[0].nodeId = node.property.id;
391 // div.text(node.property.title);
392 div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);}); 471 div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);});
393 DragHandler.attach($(node.view)[0]); 472 DragHandler.attach($(node.view)[0]);
394 var kindBackground = {agree:"#aaf", rejected:"#fff"};
395 var kindBorder = {agree:"#66a", rejected:"#a66"}; 473 var kindBorder = {agree:"#66a", rejected:"#a66"};
396 div.css("background", kindBackground[node.kind]||"white"); 474 div.css("background", StateColor[node.property.state]||"white");
397 div.css("border-color", kindBorder[node.kind] ||"#58f"); 475 div.css("border-color", kindBorder[node.property.state] ||"#58f");
398 div.css({ 476 div.css({
399 left: node.position.x + 'px', 477 left: node.position.x + 'px',
400 top: node.position.y + 'px' 478 top: node.position.y + 'px'
401 }); 479 });
480 var contentDiv = $(div[0].firstChild);
481 contentDiv.css("background", StateColor[node.property.state]||"white");
402 return created; 482 return created;
403 } 483 }
404 484
405 485
406 function updateNode(node) { 486 function updateNode(node) {
410 $('#graphRoot')[0].insertBefore(node.view[0], fc); 490 $('#graphRoot')[0].insertBefore(node.view[0], fc);
411 } else { 491 } else {
412 $('#graphRoot').append(node.view); 492 $('#graphRoot').append(node.view);
413 } 493 }
414 } 494 }
495 nodePositionPost(node);
415 } 496 }
416 497
417 var ViewParam = { 498 var ViewParam = {
418 offsetTop:100, 499 offsetTop:100,
419 offsetBottom:100, 500 offsetBottom:100,
599 var childNode = graphData.nodes[id]; 680 var childNode = graphData.nodes[id];
600 childArray[id] = childNode; 681 childArray[id] = childNode;
601 if (!childNode.position) { 682 if (!childNode.position) {
602 childNode.position = calcChildNodePosition(parentNode, numCalcChild); 683 childNode.position = calcChildNodePosition(parentNode, numCalcChild);
603 numCalcChild++; 684 numCalcChild++;
685 nodePositionPost(childNode);
604 } 686 }
605 } 687 }
606 /* calcration of grandchildNode position */ 688 /* calcration of grandchildNode position */
607 for (var id in childArray) { 689 for (var id in childArray) {
608 var childNode = childArray[id]; 690 var childNode = childArray[id];
615 } 697 }
616 } 698 }
617 } 699 }
618 } 700 }
619 701
620 function createNodeElement(node) {
621 var created = false;
622 if(!node.view) {
623 created = true;
624 createNodeDiv(node);
625 }
626 var div = node.view;
627 node.view[0].nodeId = node.property.id;
628 // div.text(node.property.title);
629 div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);});
630 DragHandler.attach($(node.view)[0]);
631 var kindBackground = {agree:"#aaf", rejected:"#fff"};
632 var kindBorder = {agree:"#66a", rejected:"#a66"};
633 div.css("background", kindBackground[node.kind]||"white");
634 div.css("border-color", kindBorder[node.kind] ||"#58f");
635 div.css({
636 left: node.position.x,
637 top: node.position.y
638 });
639 return created;
640 }
641
642
643 function showNode(node) {
644 if(createNodeElement(node)) {
645 var fc = $('#graphRoot')[0].firstChild;
646 if(fc) {
647 $('#graphRoot')[0].insertBefore(node.view[0], fc);
648 } else {
649 $('#graphRoot').append(node.view);
650 }
651 }
652 }
653
654 var GRAPH_DATA = new GraphData(); 702 var GRAPH_DATA = new GraphData();
655
656 function startUserDesktopUI() { 703 function startUserDesktopUI() {
657 function showFirstEvidenceList(graphData) { 704 function showFirstEvidenceList(graphData) {
658 var nodes = graphData.nodes; 705 var nodes = graphData.nodes;
659 for (var id in nodes) { 706 for (var id in nodes) {
660 updateNode(nodes[id]); 707 updateNode(nodes[id]);
694 }); 741 });
695 742
696 function beginScript() { 743 function beginScript() {
697 DragHandler.attach($('#miniDisplay')[0]); 744 DragHandler.attach($('#miniDisplay')[0]);
698 DragHandler.attach($('#traverseDisplay')[0]); 745 DragHandler.attach($('#traverseDisplay')[0]);
746 DragHandler.attach($('#edgeInfoDisplay')[0]);
699 start(); 747 start();
700 } 748 }
701 749
702 </script> 750 </script>
703 751