- Timestamp:
- 08/20/13 11:15:33 (11 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
SMC/trunk/SMC/src/web/scripts/js/cmd-dep-graph.js
r2488 r3431 14 14 var input_prefix = "input-"; 15 15 var select_rect_min_size = 5; 16 var first_level_margin = 20; 16 17 var min_circle = 4; 17 var comp_reg_url = "http://catalog.clarin.eu/ds/ComponentRegistry/?item="; 18 var max_circle = 50; 19 var comp_reg_url = "http://catalog.clarin.eu/ds/ComponentRegistry/?item="; 20 var mdrepo_url_search = "http://localhost:8680/exist/apps/cr-xq/mdrepo/index.html?operation=searchRetrieve&x-context=&query="; 21 /*http://localhost:8680/exist/apps/cr-xq/mdrepo/fcs?operation=scan&scanClause=cmd:CountryName&x-context=&x-format=htmlpage*/ 22 var mdrepo_url_scan = "http://localhost:8680/exist/apps/cr-xq/mdrepo/fcs?operation=scan&x-context=&x-format=htmlpage&sort=size&scanClause="; 18 23 /*var source_file = "../scripts/cmd-dep-graph-d3_all_svg.json"*/ 19 24 /*var source_file = "file:/C:/Users/m/3/clarin/_repo/SMC/output/cmd-dep-graph.d3.js" 20 25 var detail_file = "file:/C:/Users/m/3/clarin/_repo/SMC/output/smc_stats_detail.html" 21 26 */ 22 var source_file = "/smc/cmd-dep-graph.d3.js"; 23 var detail_file = "/smc/smc_stats_detail.html"; 24 var userdocs_file = "/smc/userdocs.html"; 25 27 /* 28 var source_file = "/smc/_structure-graph.json"; 29 var source_file = "cmd-dep-graph.d3.js"; 30 var detail_file = "smc_stats_detail.html"; 31 var userdocs_file = "userdocs.html"; 32 */ 33 var source_file = "/smc/cmd-dep-graph_profiles-datcats.json"; 34 /*var source_file = "/smc/cmd-dep-graph.d3.js";*/ 35 var detail_file = "smc_stats_detail.html"; 36 var userdocs_file = "userdocs.html"; 37 26 38 var opts = {"depth-before": {"value":2, "min":0, "max":10, "widget":"slider"}, 27 39 "depth-after":{"value":2, "min":0, "max":10, "widget":"slider"}, 28 40 "link-distance": {"value":120, "min":10, "max":300, "widget":"slider" }, 29 41 "charge":{"value":250, "min":10, "max":1000, "widget":"slider" }, 42 "friction":{"value":75, "min":1, "max":100, "widget":"slider" }, 30 43 "node-size": {"value":"4", "values":["1","4","8","16","usage"], "widget":"selectone" }, 31 "labels": {"value":" hide", "values":["show","hide"], "widget":"selectone" },44 "labels": {"value":"show", "values":["show","hide"], "widget":"selectone" }, 32 45 "curve": {"value":"straight", "values":["straight","arc"], "widget":"selectone" }, 33 46 "layout": {"value":"horizontal-tree", "values":["vertical-tree", "horizontal-tree", "weak-tree","force","dot", "freeze"], "widget":"selectone" }, 34 47 "selected": {"widget":"hidden" }, 35 48 "link": {"widget":"link", "label":""}, 36 "download": {"widget":"link", "label":""} 49 "download": {"widget":"link", "label":""}, 50 "add_profile": {"widget":"link", "label":"Add profile", "widget":""} 37 51 }; 38 52 … … 73 87 add_lookups(data_all); 74 88 89 // get min/max on some properties 75 90 var init_x_arr = []; 76 91 data_all.nodes.forEach(function(d,i){init_x_arr.push(d.init_x);}) 77 78 92 data_all.init_x_min = d3.min(init_x_arr); 79 93 data_all.init_x_max = d3.max(init_x_arr); 94 95 var init_level = []; 96 data_all.nodes.forEach(function(d,i){init_level.push(+d.level);}) 97 data_all.level_min = d3.min(init_level); 98 99 var init_count = []; 100 data_all.nodes.forEach(function(d,i){init_count.push(+d.count);}) 101 102 data_all.count_max = d3.max(init_count); 103 data_all.node_size_ratio = Math.sqrt(data_all.count_max) / max_circle; 104 105 notifyUser("count max: " + data_all.count_max + "; " 106 + "node_size_ratio: " + data_all.node_size_ratio); 80 107 81 108 // should be delivered by the data directly … … 87 114 // get selected nodes (if any) from param 88 115 selected_ids = opt("selected").split(","); 89 var selected_match = 0; 116 selectNodeByKey(selected_ids); 117 /*var selected_match = 0; 90 118 for (var i = 0; i < selected_ids.length; i++) 91 119 { if (data_all.nodes_index[selected_ids[i]]) { … … 96 124 // if something was selected, update and render Graph and Detail 97 125 if (selected_match) { updateSelected();} 98 126 */ 99 127 renderIndex(); 100 128 … … 148 176 .attr("class", "node-item"); 149 177 item_li.append("span") 150 .text(function (d) { return d.name })178 .text(function (d) { return d.name + ' |' + d.count + '|' }) 151 179 .on("click", function(d) { d.selected= d.selected ? 0 : 1 ; updateSelected() }); 152 180 … … 162 190 163 191 } else { 164 var item_detail = item_li.append("div") 165 .classed("node-detail", 1);192 var item_detail = item_li.append("div"); 193 /* .classed("node-detail", 1);*/ 166 194 167 195 item_detail.append("a") … … 169 197 else return comp_reg_url + d.id }) 170 198 .text(function (d) { return d.id }); 171 item_detail.append("div").html( 199 200 profile_item_detail = item_detail.filter(function(d, i) { return d.type.toLowerCase()=='profile' }); 201 profile_item_detail.append("a") 202 .attr("target",'_blank') 203 .attr("href",function (d) { return 'profiles/' + d.key + '.html' }) 204 .text(' html-view '); 205 206 /* profile_item_detail.append("a")*/ 207 item_detail.append("a") 208 .classed("scan", function (d) { return !(d.type=='Profile') } ) 209 .attr("target",'_blank') 210 .attr("href",function (d) { if (d.type=='Profile') { return mdrepo_url_search + 'cmd.profile=%22' + d.id + '%22'; } 211 else { return mdrepo_url_scan + 'cmd:' + d.name; } } ) 212 .text(' mdrepo-view '); 213 214 item_detail_detail = item_detail.append("div").html( 172 215 function (d) { 173 216 var detail_info_div = getDetailInfo(d.type.toLowerCase(), d.key); … … 178 221 } 179 222 }); 223 224 item_detail_detail.classed("node-detail", 1); 180 225 181 226 } … … 229 274 .size([w, h]) 230 275 //.gravity(0.3) 231 .friction( 0.7)276 .friction(parseInt(opt("friction")) / 100 ) 232 277 .linkDistance(parseInt(opt("link-distance"))) 233 278 .charge(parseInt(opt("charge")) * -1) … … 281 326 .classed("selected", function(d) { return d.selected; }) 282 327 .call(force.drag); 283 328 284 329 // dragging of all selected nodes on freeze layout 285 330 // this does not work yet … … 319 364 .on("click", function(d) {d.selected= d.selected ? 0 : 1; updateSelected() }) 320 365 .on("mouseover", highlight()).on("mouseout", unhighlight()) 321 .attr("r", function(d) { if (opt("node-size")=="usage") {return (Math.sqrt(d.count)>min_circle ? Math.sqrt(d.count) * 2 : min_circle); } 366 .attr("r", function(d) { if (opt("node-size")=="usage") 367 {return (Math.sqrt(d.count)<=min_circle) ? min_circle : Math.sqrt(d.count) / data_all.node_size_ratio; 368 } 322 369 else { return node_size_int; } 323 370 }) 324 371 325 372 gnodes.append("title") 326 .text(function(d) { return d.name; }); 373 .text(function (d) { return d.name + ' |' + d.count + '|' }) 374 /* .text(function(d) { return d.name; });*/ 375 327 376 328 377 … … 376 425 var ky= 1.4 * e.alpha, kx = .4 * e.alpha; 377 426 data.links.forEach(function(d, i) { 378 if (d.source.level== 0) { d.source.y = 20};427 if (d.source.level==data_all.level_min) { d.source.y = first_level_margin }; 379 428 // d.target.x += (d.source.x - d.target.x) * kx; 380 429 d.target.y += (d.source.y - d.target.y + link_distance_int) * ky; … … 383 432 var kx= 1.4 * e.alpha, ky = .4 * e.alpha; 384 433 data.links.forEach(function(d, i) { 385 if (d.source.level== 0) { d.source.x = 20};434 if (d.source.level==data_all.level_min) { d.source.x = first_level_margin }; 386 435 //d.target.y += (d.source.y - d.target.y) * ky; 387 436 d.target.x += (d.source.x - d.target.x + link_distance_int ) * kx; … … 466 515 467 516 $(detail_info_holder_selector).load(detail_file,function(data) { 468 $(detail_container_selector). html(517 $(detail_container_selector).find("h3").after( 469 518 '<div id="detail-summary-overall" class="cmds-ui-block init-show" ><div class="header">Overview</div><div class="content">' 470 519 + getDetailInfo("summary", "overall") + '</div></div>'); … … 472 521 handleUIBlock($(detail_container_selector).find(".cmds-ui-block")); 473 522 523 // only render detail for initially selected nodes, after the detail info has been loaded 524 if (nodes_sel) { renderDetail(nodes_sel) }; 525 474 526 }); 475 476 // loading userdocs as welcome info477 $(graph_container).load(userdocs_file + " div.document");478 527 479 528 // loading css to store in extra variable, for later use = injecting into exported SVG … … 505 554 var svg_h = svg.attr("height"); 506 555 var bounds = graphBounds(); 507 var margin = 20;556 var margin = 30; 508 557 var link_dist = parseInt(opt("link-distance")); 509 558 … … 511 560 x = Math.floor(bounds["x-min"]) - margin 512 561 y = Math.floor(bounds["y-min"]) - margin 513 w = (bounds["width"] > svg_w) ? bounds["width"] + 2 * margin + link_dist : svg_w; 562 // add extra space to the right, because of the possible labels 563 w = (bounds["width"] > svg_w) ? bounds["width"] + 2 * margin + link_dist : svg_w + link_dist; 514 564 h = (bounds["height"] > svg_h) ? bounds["height"] + 2 * margin : svg_h; 515 565 … … 557 607 } 558 608 609 function selectNodeByKey(nodes_keys) { 610 611 // get selected nodes (if any) from param 612 var selected_match = 0; 613 for (var i = 0; i < nodes_keys.length; i++) 614 { if (data_all.nodes_index[nodes_keys[i]]) { 615 data_all.nodes_index[nodes_keys[i]].selected = 1; 616 selected_match ++; 617 } 618 } 619 // if something was selected, update and render Graph and Detail 620 if (selected_match) { updateSelected();} 621 } 559 622 560 623 function updateSelected () { … … 574 637 renderGraph(); 575 638 576 // this is to early! the graph is not positioned yet:577 //genDownload();578 579 639 // just need to highlight the selected nodes 580 640 d3.select(index_container_selector).selectAll("li").classed("highlight", function (d) { return d.selected });
Note: See TracChangeset
for help on using the changeset viewer.