Changeset 2460 for SMC


Ignore:
Timestamp:
01/14/13 11:56:04 (11 years ago)
Author:
vronk
Message:

rendering node (circle+text) as one-group,
detail-overall as cmds-ui-block

Location:
SMC/trunk/SMC/src/web/scripts
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r2456 r2460  
    1010var detail_data = null; // global holder for detail-data (in html) 
    1111 
    12 
    13 var index_container_selector = "#index-container";
    14 var graph_container_selector = '#infovis';
    15 var navi_container_selector = '#navigate';
    16 var detail_container_selector = "#detail-container";
    17 var detail_info_holder_selector =  '#detail-info-holder';
    18 
    19 var graph_container = null;
    20 var index_container = null;
    2112
    2213var input_prefix = "input-";
    … …  
    3930
    4031
    41 
    4232/**  gets the data for the graph and calls rendering of the lists
    4333 * @name initGraph
    … …  
    4636 function initGraph ()
    4737    {
    48     graph_container = $(graph_container_selector);
    49    
    50     fillOpts(navi_container_selector);
    51    
    52     $('#infovis-wrapper').resizable( {
    53                    start: function(event, ui) {
    54                             graph_container.hide();
    55                         },
    56                    stop: function(event, ui) {
    57                             graph_container.show();
    58                             renderGraph();
    59                        }
    60                 }
    61                 );
    62 
    63    
    64     $("#navigate .slider").slider();
    6538   
    6639     // load data
    … …  
    6841                function(json) {       
    6942                    // return if data missing
    70                     if (json==null) { notify("source data missing: " + source_file ); return null}           
     43                    if (json==null) { notifyUser("source data missing: " + source_file ); return null}           
    7144                    data_all = json;
    7245                    data_all.links.forEach(function(d) {
    … …  
    12093 
    12194    target_container = d3.select(target_container_selector);
    122         target_container.selectAll("div").remove();
    123        
    124        
    125            
    126         var group_divs = target_container.selectAll("div").data(nest)
     95        target_container.selectAll("div.node-detail").remove();
     96       
     97        var group_divs = target_container.selectAll("div.node-detail").data(nest)
    12798                        .enter().append("div")
    12899                        .attr("id", function (d) { return "detail-" + d.key })
    129                         .classed("cmds-ui-block init-show", 1);
     100                        .classed("node-detail cmds-ui-block init-show", 1);
    130101                       
    131102      var group_headers = group_divs.append("div").classed("header", 1)
    … …  
    169140              }
    170141                       
    171    handleUIBlock($(target_container_selector).find(".cmds-ui-block"));
     142   handleUIBlock($(target_container_selector).find(".node-detail.cmds-ui-block"));
    172143 
    173144}
    … …  
    200171 
    201172  // information about the displayed data
    202         notify("show nodes: " + data_show.nodes.length + "; "
     173        notifyUser("show nodes: " + data_show.nodes.length + "; "
    203174                        + "show links: " + data_show.links.length);
    204175       
    … …  
    253224
    254225           
    255            
    256         var circle = svg.append("svg:g")
    257              .selectAll("circle")
    258             .data(force.nodes())
    259             .enter().append("svg:circle")
     226         var gnodes = svg.append("svg:g")
     227                      .selectAll("g.node")
     228                      .data(force.nodes())
     229                      .enter().append("g")
     230                      .attr("class", function(d) { return "type-" + d.type.toLowerCase()})
     231                      .classed("selected", function(d) { return d.selected; })
     232                      .on("click", function(d) {d.selected= d.selected ? 0 : 1; updateSelected() })
     233                      .on("mouseover", highlight("in")).on("mouseout", highlight("out"))
     234                      .call(force.drag);
     235               
     236            gnodes.append("svg:circle")
    260237/*            .attr("r", 6)*/
    261238            .attr("r", function(d) { if (opt("node-weight")=="1"){ return min_circle }
    262                                         else {return (Math.sqrt(d.count)>min_circle ? Math.sqrt(d.count) * 2 : min_circle); } })
    263           /*  .attr("x", function(d) {return d.x;})
    264             .attr("y", function(d) {return d.y;})*/
    265             .call(force.drag);
    266        
    267          circle.append("title")
    268             .text(function(d) { return d.name; });
    269        
     239                                        else {return (Math.sqrt(d.count)>min_circle ? Math.sqrt(d.count) * 2 : min_circle); } })   
     240           
     241            gnodes.append("title")
     242                  .text(function(d) { return d.name; });
     243                  
     244     
     245         
     246        /*
    270247       svg.selectAll("circle")
    271248            .attr("class", function(d) { return "type-" + d.type.toLowerCase()})
    … …  
    273250          .on("click", function(d) {d.selected= d.selected ? 0 : 1; updateSelected() })
    274251          .on("mouseover", highlight("in")).on("mouseout", highlight("out"));
    275        
    276       /*   
    277         var textgroup = svg.append("svg:g").selectAll("g")
    278             .data(data.nodes)
    279           .enter().append("svg:g")
    280           .attr("class", function(d) { return "type-" + d.type.toLowerCase()})
    281           .on("click", function(d) {d.selected= d.selected ? 0 : 1; updateSelected() });
    282        
    283        
    284          textgroup.attr("data-key", function (d) { return d.name } );
    285          
     252        */
     253       
    286254        // A copy of the text with a thick white stroke for legibility.
    287         textgroup.append("svg:text")
    288             .attr("x", 8)
    289             .attr("y", ".31em")
    290             .attr("class", "shadow")
    291            
    292             .text(function(d) { return d.name; });
    293        
    294         textgroup.append("svg:text")
    295             .attr("x", 8)
    296             .attr("y", ".31em")
    297             .text(function(d) { return d.name; });
    298 */
    299 
     255        if (opt("labels") =='show') {
     256           gnodes.append("svg:text")
     257                 .attr("x", 8)
     258                 .attr("y", ".31em")
     259                 .attr("class", "shadow")
     260                 .text(function(d) { return d.name; });
     261           gnodes.append("svg:text")
     262                 .attr("x", 8)
     263                 .attr("y", ".31em")
     264                 .text(function(d) { return d.name; });
     265        }
     266       
     267 
     268 
    300269   function tick(e) {
    301270    var link_distance_int = parseInt(opt("link-distance"));     
    … …  
    354323       });
    355324         
    356          circle.attr("cx", function(d) {return d.x;})
    357                 .attr("cy", function(d) {return d.y;});
    358       /* circle.attr("transform", function(d) {
     325         /*circle.attr("cx", function(d) {return d.x;})
     326                .attr("cy", function(d) {return d.y;});*/
     327       gnodes.attr("transform", function(d) {
    359328            return "translate(" + d.x + "," + d.y + ")";
    360        });*/
     329       });
    361330       
    362331  /*     textgroup.attr("transform", function(d) {
    … …  
    406375     
    407376  $(detail_info_holder_selector).load(detail_file,function(data) {
    408      $(detail_container_selector).html(getDetailInfo("summary", "overall"));
     377     $(detail_container_selector).html(
     378     '<div id="detail-summary-overall" class="cmds-ui-block init-show" ><div class="header">Overview</div><div class="content">'
     379     + getDetailInfo("summary", "overall") + '</div></div>');
     380     
     381     handleUIBlock($(detail_container_selector).find(".cmds-ui-block"));
     382     
    409383  });
     384 
     385 
    410386}
    411387
    … …  
    445421
    446422
    447 // Returns an event handler for fading a given chord group.
     423// Returns an event handler for highlighting the path of selected (mouseover) node.
    448424function highlight() {
    449425  return function(d, i) {
    … …  
    622598    return result;
    623599}
    624 
    625 /**
    626 gets an option, checking with the values in the navigation-UI
    627 */
    628 function opt(key) {
    629 
    630     if ($('#' + input_prefix + key) && (opts[key].value != $('#' + input_prefix + key).val())) {
    631         opts[key].value = $('#' + input_prefix + key).val();   
    632      } else if (opts[key].value)  {
    633         return opts[key].value
    634      } else if (opts[key])  {
    635         return opts[key]
    636      } else {
    637         return ""
    638      }
    639 }
    640 
    641 function setOpt(input_object) {
    642 
    643     var id = $(input_object).attr("id");
    644     var val = $(input_object).val();
    645     key = id.substring(id.indexOf(input_prefix) + input_prefix.length)
    646     opts[key].value = val;
    647     return opts[key].value;
    648 }
    649 
    650 
    651 function fillOpts(trg_container) {
    652 
    653   for ( var key in opts ) {
    654     if ($('#' + input_prefix + key).length) {
    655         $('#' + input_prefix + key).value = opts[key].value;   
    656      } else if (trg_container)  {
    657         var new_input_label = "<label>" + key + "</label>";
    658         var new_input;
    659        
    660        if (opts[key].widget == "slider") {
    661             [new_input,new_widget] = genSlider(key, opts[key].values);
    662          } else if (opts[key].widget =="selectone") {
    663             [new_input,new_widget] = genCombo(key, opts[key].values);
    664             // set initial value
    665             $(new_input).val(opts[key].value);
    666            
    667         //     $(new_input).autocomplete({"source":opts[key].values});
    668          }
    669          
    670     /* hook changing  options + redrawing the graph, when values in navigation changed */
    671          new_input.change(function () {
    672                setOpt(this);
    673                var related_widget = $(this).data("related-widget");
    674            if ( $(related_widget).hasClass("widget-slider")) {$(related_widget).slider("option", "value", $(this).val()); }
    675                renderGraph();
    676             });
    677                
    678         $(trg_container).append(new_input_label, new_input, new_widget);
    679        
    680      }
    681    }
    682    
    683    
    684 }
    685 
    686 /** generating my own comboboxes, because very annoying trying to use some of existing jquery plugins (easyui.combo, combobox, jquery-ui.autocomplete) */
    687 function genCombo (key, data) {
    688    
    689     var select = $("<select id='widget-" + key + "' />")
    690         select.attr("id", input_prefix + key)
    691     data.forEach(function(v) { $(select).append("<option value='" + v +"' >" + v + "</option>") });
    692     return [select, null];
    693 }
    694 
    695 function genSlider (key, data) {
    696 
    697     var new_input = $("<input />");
    698             new_input.attr("id", input_prefix + key)
    699                  .val(opts[key].value)
    700 /*                 .attr("type", "text")*/
    701                  .attr("size", 3);
    702      
    703     var new_widget = $("<div class='widget-" + opts[key].widget + "'></div>");
    704         new_widget.attr("id", "widget-" + key);
    705         new_widget.slider( opts[key]);
    706            
    707         // set both-ways references between the input-field and its slider - necessary for updating
    708         new_widget.data("related-input-field",new_input);
    709         new_input.data("related-widget",new_widget);
    710      
    711 //           console.log("widget:" + opts[key].widget);
    712        
    713         new_widget.bind( "slidechange", function(event, ui) {
    714             //   console.log(ui.value);
    715                $(this).data("related-input-field").val(ui.value);
    716                // update the opts-object, but based on the (updated) value of the related input-field
    717                 setOpt($(this).data("related-input-field"));
    718                renderGraph();
    719          });
    720          
    721    return [new_input,new_widget];
    722 }
    723 
    724 
    725 function notify (msg) {
    726   $("#notify").append(msg);
    727 }

  • SMC/trunk/SMC/src/web/scripts/style/cmd-dep-graph.css

    r2457 r2460  
    33 #infovis {height: 90%; width: 100%;}
    44 
    5  #index-container, #detail-container { overflow: auto;}
     5 #index-container, #detail-container, #navigate { overflow: auto;}
     6 
    67 
    78.block {
    … …  
    1819    background: #f66;   
    1920}
     21
     22.highlight circle,
     23.selected circle {
     24    fill: #f66;   
     25}
     26
    2027
    2128.widget-slider {width: 80px;  display:inline-block; font-size: 70%;  margin: 6px 12px 0 2px;}

  • SMC/trunk/SMC/src/web/scripts/style/cmds-ui.css

    r2441 r2460  
    3434label, .label, .cmds-elem-prop .label { font-size: 0.9em; color: #014172; font-style: italic; }
    3535ul { padding-left: 4px; list-style-type: none; margin: 0;}
    36 li { background: url('imgs/icon-dot-4.png') no-repeat; background-position: 0px 7px; padding-left: 8px;  }
     36li { background: url('imgs/icon-dot-4.png') no-repeat; background-position: 0px 7px; padding-left: 8px;  }
     37#detail-container li {margin-top: 0.6em; margin-bottom: 0.6em;}
    3738a img { border:0;       }
    3839tr.detailselection {background-color: #E6E9F0;}
Note: See TracChangeset for help on using the changeset viewer.