Changeset 3431

Timestamp:

08/20/13 11:15:33 (11 years ago)

Author:

vronk

Message:

added external links to profiles, enhance init steps, add function: selectNodeByKey

File:

• SMC/trunk/SMC/src/web/scripts/js/cmd-dep-graph.js (modified) (19 diffs)

SMC/trunk/SMC/src/web/scripts/js/cmd-dep-graph.js

@@ -14 +14 @@
 var input_prefix = "input-";
 var select_rect_min_size = 5;
+var first_level_margin = 20;
 var min_circle = 4;
-var comp_reg_url = "http://catalog.clarin.eu/ds/ComponentRegistry/?item=";     
+var max_circle = 50;
+var comp_reg_url = "http://catalog.clarin.eu/ds/ComponentRegistry/?item=";
+var mdrepo_url_search = "http://localhost:8680/exist/apps/cr-xq/mdrepo/index.html?operation=searchRetrieve&x-context=&query=";
+/*http://localhost:8680/exist/apps/cr-xq/mdrepo/fcs?operation=scan&scanClause=cmd:CountryName&x-context=&x-format=htmlpage*/
+var mdrepo_url_scan = "http://localhost:8680/exist/apps/cr-xq/mdrepo/fcs?operation=scan&x-context=&x-format=htmlpage&sort=size&scanClause=";
 /*var source_file = "../scripts/cmd-dep-graph-d3_all_svg.json"*/
 /*var source_file = "file:/C:/Users/m/3/clarin/_repo/SMC/output/cmd-dep-graph.d3.js"
 var detail_file = "file:/C:/Users/m/3/clarin/_repo/SMC/output/smc_stats_detail.html"
 */
-var source_file = "/smc/cmd-dep-graph.d3.js";
-var detail_file = "/smc/smc_stats_detail.html";
-var userdocs_file = "/smc/userdocs.html";
- 
+/*
+var source_file = "/smc/_structure-graph.json";
+var source_file = "cmd-dep-graph.d3.js";
+var detail_file = "smc_stats_detail.html";
+var userdocs_file = "userdocs.html";
+*/
+var source_file = "/smc/cmd-dep-graph_profiles-datcats.json";
+/*var source_file = "/smc/cmd-dep-graph.d3.js";*/
+var detail_file = "smc_stats_detail.html";
+var userdocs_file = "userdocs.html";
+
 var opts = {"depth-before": {"value":2, "min":0, "max":10, "widget":"slider"}, 
             "depth-after":{"value":2, "min":0, "max":10, "widget":"slider"}, 
             "link-distance": {"value":120, "min":10, "max":300, "widget":"slider" }, 
             "charge":{"value":250, "min":10, "max":1000, "widget":"slider" },
+            "friction":{"value":75, "min":1, "max":100, "widget":"slider" },
             "node-size": {"value":"4", "values":["1","4","8","16","usage"], "widget":"selectone" },
-            "labels": {"value":"hide", "values":["show","hide"], "widget":"selectone" },                         
+            "labels": {"value":"show", "values":["show","hide"], "widget":"selectone" },                         
             "curve": {"value":"straight", "values":["straight","arc"], "widget":"selectone" },
            "layout": {"value":"horizontal-tree", "values":["vertical-tree", "horizontal-tree", "weak-tree","force","dot", "freeze"], "widget":"selectone" },
             "selected": {"widget":"hidden" },
             "link": {"widget":"link", "label":""},
-            "download": {"widget":"link", "label":""}
+            "download": {"widget":"link", "label":""},
+            "add_profile": {"widget":"link", "label":"Add profile", "widget":""}
             };
 
@@ -73 +87 @@
                  add_lookups(data_all);
                  
+                 // get min/max on some properties
                  var init_x_arr = [];
                     data_all.nodes.forEach(function(d,i){init_x_arr.push(d.init_x);})
-                            
                  data_all.init_x_min = d3.min(init_x_arr);
                  data_all.init_x_max = d3.max(init_x_arr);
+
+                 var init_level = [];
+                    data_all.nodes.forEach(function(d,i){init_level.push(+d.level);})
+                    data_all.level_min = d3.min(init_level);
+                
+                 var init_count = [];
+                    data_all.nodes.forEach(function(d,i){init_count.push(+d.count);})
+                 
+                 data_all.count_max = d3.max(init_count);
+                 data_all.node_size_ratio = Math.sqrt(data_all.count_max) / max_circle;
+
+                notifyUser("count max: " + data_all.count_max + "; "
+                        + "node_size_ratio: " + data_all.node_size_ratio);
                  
                  // should be delivered by the data directly
@@ -87 +114 @@
                   // get selected nodes (if any) from param
                   selected_ids = opt("selected").split(",");
-                  var selected_match = 0;
+                  selectNodeByKey(selected_ids);
+                  /*var selected_match = 0;
                     for (var i = 0; i < selected_ids.length; i++)
                     {  if (data_all.nodes_index[selected_ids[i]]) {
@@ -96 +124 @@
                   // if something was selected, update and render Graph and Detail
                   if (selected_match) { updateSelected();}
-                    
+                  */  
               renderIndex();
     
@@ -148 +176 @@
                     .attr("class", "node-item");
                item_li.append("span")
-                    .text(function (d) { return d.name})
+                    .text(function (d) { return d.name + ' |' + d.count + '|' })
                     .on("click", function(d) { d.selected= d.selected ? 0 : 1 ; updateSelected() });
           
@@ -162 +190 @@
                 
               } else {
-                 var item_detail = item_li.append("div")
-                                          .classed("node-detail", 1);
+                 var item_detail = item_li.append("div");
+                                        /*  .classed("node-detail", 1);*/
                             
                  item_detail.append("a")
@@ -169 +197 @@
                                                         else return comp_reg_url + d.id })
                             .text(function (d) { return d.id });
-                 item_detail.append("div").html(
+                
+                profile_item_detail = item_detail.filter(function(d, i) { return d.type.toLowerCase()=='profile' }); 
+                profile_item_detail.append("a")
+                            .attr("target",'_blank')
+                            .attr("href",function (d) { return 'profiles/' + d.key + '.html' })
+                            .text(' html-view ');
+                
+/*                profile_item_detail.append("a")*/
+                item_detail.append("a")
+                            .classed("scan", function (d) {  return !(d.type=='Profile') } )
+                            .attr("target",'_blank')
+                            .attr("href",function (d) { if (d.type=='Profile') { return mdrepo_url_search +  'cmd.profile=%22' + d.id + '%22'; }
+                                                          else { return mdrepo_url_scan +  'cmd:' +  d.name; }   }  )
+                            .text(' mdrepo-view ');
+                
+                 item_detail_detail = item_detail.append("div").html(
                                  function (d) { 
                                     var detail_info_div = getDetailInfo(d.type.toLowerCase(), d.key);
@@ -178 +221 @@
                                     }
                           });
+                          
+                 item_detail_detail.classed("node-detail", 1);
                            
               }
@@ -229 +274 @@
             .size([w, h])
             //.gravity(0.3)
-            .friction(0.7)
+            .friction(parseInt(opt("friction")) / 100 )
             .linkDistance(parseInt(opt("link-distance")))
             .charge(parseInt(opt("charge")) * -1)
@@ -281 +326 @@
                       .classed("selected", function(d) { return d.selected; })
                       .call(force.drag);
-          
+                      
           // dragging of all selected nodes on freeze layout
           // this does not work yet
@@ -319 +364 @@
                     .on("click", function(d) {d.selected= d.selected ? 0 : 1; updateSelected() })
                       .on("mouseover", highlight()).on("mouseout", unhighlight())
-            .attr("r", function(d) { if (opt("node-size")=="usage") {return (Math.sqrt(d.count)>min_circle ? Math.sqrt(d.count) * 2 : min_circle); }
+            .attr("r", function(d) { if (opt("node-size")=="usage") 
+                                        {return (Math.sqrt(d.count)<=min_circle) ?  min_circle  : Math.sqrt(d.count) / data_all.node_size_ratio;                                        
+                                        }
                                         else { return node_size_int; }
                                     })    
             
             gnodes.append("title")
-                  .text(function(d) { return d.name; });
+                .text(function (d) { return d.name + ' |' + d.count + '|' })
+/*                  .text(function(d) { return d.name; });*/
+                  
                   
       
@@ -376 +425 @@
                    var ky= 1.4 * e.alpha, kx = .4 * e.alpha;
                    data.links.forEach(function(d, i) {
-                     if (d.source.level==0) { d.source.y = 20 };
+                     if (d.source.level==data_all.level_min) { d.source.y = first_level_margin };
                    //  d.target.x += (d.source.x - d.target.x)  * kx;
                      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;
                    data.links.forEach(function(d, i) {
-                       if (d.source.level==0) { d.source.x = 20 };
+                       if (d.source.level==data_all.level_min) { d.source.x = first_level_margin };
                        //d.target.y += (d.source.y - d.target.y)  * ky;
                        d.target.x += (d.source.x - d.target.x + link_distance_int  ) * kx;
@@ -466 +515 @@
      
   $(detail_info_holder_selector).load(detail_file,function(data) {
-     $(detail_container_selector).html(
+     $(detail_container_selector).find("h3").after(
      '<div id="detail-summary-overall" class="cmds-ui-block init-show" ><div class="header">Overview</div><div class="content">'
      + getDetailInfo("summary", "overall") + '</div></div>');
@@ -472 +521 @@
      handleUIBlock($(detail_container_selector).find(".cmds-ui-block"));
      
+     // only render detail for initially selected nodes, after the detail info has been loaded 
+     if (nodes_sel) { renderDetail(nodes_sel) };
+     
   });
-  
-  // loading userdocs as welcome info
-  $(graph_container).load(userdocs_file + " div.document");
   
   // loading css to store in extra variable, for later use = injecting into exported SVG 
@@ -505 +554 @@
     var svg_h = svg.attr("height");
     var bounds = graphBounds();
-    var margin = 20;
+    var margin = 30;
     var link_dist = parseInt(opt("link-distance"));
     
@@ -511 +560 @@
     x = Math.floor(bounds["x-min"]) - margin 
     y = Math.floor(bounds["y-min"]) - margin
-    w = (bounds["width"] > svg_w) ? bounds["width"] + 2 * margin + link_dist : svg_w;  
+    // add extra space to the right, because of the possible labels 
+    w = (bounds["width"] > svg_w) ? bounds["width"] + 2 * margin + link_dist : svg_w + link_dist;  
     h = (bounds["height"] > svg_h) ? bounds["height"] + 2 * margin : svg_h;
        
@@ -557 +607 @@
 }
 
+function selectNodeByKey(nodes_keys) {
+
+    // get selected nodes (if any) from param
+      var selected_match = 0;
+        for (var i = 0; i < nodes_keys.length; i++)
+        {  if (data_all.nodes_index[nodes_keys[i]]) {
+                 data_all.nodes_index[nodes_keys[i]].selected = 1;
+                 selected_match ++;
+           }
+        }    
+      // if something was selected, update and render Graph and Detail
+      if (selected_match) { updateSelected();}
+}
 
 function updateSelected () {
@@ -574 +637 @@
     renderGraph();
     
-    // this is to early! the  graph is not positioned yet: 
-    //genDownload();
- 
  // just need to highlight the selected nodes
     d3.select(index_container_selector).selectAll("li").classed("highlight", function (d) { return d.selected });