<commit_before>/**
 * Created by Reem on 10/23/2015.
 */
define(['exports', 'd3', 'jquery', '../caleydo_d3/d3util', '../caleydo_core/idtype'],
  function (exports, d3, $, d3utils, idtypes) {
    //MDS graph
    function drawMDSGraph($parent, data, nodes, pos, size){
      var width = size[0],
        height = size[1];
      var top = $parent.node().getBoundingClientRect().top;
      var left = $parent.node().getBoundingClientRect().left;
      var svg = $parent;
        //.attr("width", width)
        //.attr("height", height);
        //responsive SVG needs these 2 attributes and no width and height attr
       //.attr("preserveAspectRatio", "xMaxYMax meet")
       //.attr("viewBox",  left + " "+ top + " " + width + " " + height)
       //.attr("viewBox",  "0 0 " + width + " " + height)
       //class to make it responsive
       //.classed("svg-content-responsive", true);
      var margin = 40;

      var xScale = d3.scale.linear()
        .domain([pos.xmin, pos.xmax])
        .range([margin, width - margin]);

      var yScale = d3.scale.linear()
        .domain([pos.ymin, pos.ymax])
        .range([margin, height - margin]);

      //node selection from Caleydo
      d3utils.selectionUtil(data, svg, '.node');
      var onClick = function(d,i) {
        data.select(0, 'node-selected', [i], idtypes.toSelectOperation(d3.event));
      };

      // combine both the nodes with the position
      var mixed_data = [];
      pos.pos.forEach(function(d,i) {
        d.name = nodes[i][0];
        mixed_data[i] = d;
      });

      var selection = svg.selectAll(".node").data(mixed_data);
      // d3 enter -> create dom elements once
      var node =  selection.enter()
        .append("div")
        .attr("class", "node");
      node.append("text")
       // .attr("dx", 10)
       // .attr("dy", ".35em")
        .text(function (d, i) {
          return d.name;
        });

      var circles = node.append("div")
        .style("width", '20px')
        .style("height", '20px')
        .classed("fd-circle", true)
        .attr("id", function(d, i){
          return "table" + i;
        })
        .on('click', onClick);

      // d3 update
      svg.selectAll(".node")
        .style("transform", function(d) {
          return "translate(" + xScale(d.x) + "px," + yScale(d.y) + "px)";
        });

      // d3 remove
      selection.exit().remove();

      return svg;
    }
    //end of MDS graph


    var $svg = null;

    exports.MDSVis = d3utils.defineVis('MDSVis', {
        dim: ['column']
      }, [200, 200],
      function ($parent, data, size) {
        var o = this.options;
        var current_size = [$parent.node().getBoundingClientRect().width, $parent.node().getBoundingClientRect().height];
        var $node = $parent.append("div")
          //.classed("svg-container", true) //container class to make it responsive
          .classed("mds-container", true)
          .style("width", current_size[0] + "px")
          .style("height", current_size[1] + "px");
        data.data().then(function(nodes){
          console.log(nodes);
          $svg = drawMDSGraph($node, data, nodes, o.links, current_size);

          //to resize MDS
          o.dispatcher.on('resized_flex_column', function(col_id, width, $column) {
            current_size = [$parent.node().getBoundingClientRect().width, $parent.node().getBoundingClientRect().height];
            drawMDSGraph($node, data, nodes, o.links, current_size);
            console.log(col_id, width, $column);
          });
        });
        return $node;
      },
      {
        resize: function() {
          if($svg === null) {
            return;
          }
          var done = false;
          var resizeSvg = function() {
            done = true;
            var width = $svg.node().parentNode.getBoundingClientRect().width,
                height = $svg.node().parentNode.getBoundingClientRect().height;
              console.log("resize mds vis", $svg);
            //$svg.attr("width", width)
            //  .attr("height", height);
            $svg.attr("viewBox",  "0 0 " + width + " " + height);
          };

          // use jquery instead of d3
          // http://stackoverflow.com/questions/2087510/callback-on-css-transition
          $($svg.node()).parents('.flex-column').one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', resizeSvg);

          //ensure tidy up if event doesn't fire..
          setTimeout(function(){
            if(!done){
              console.log("timeout needed to call transition ended..");
              resizeSvg();
            }<commit_msg>close #61<commit_after>/**
 * Created by Reem on 10/23/2015.
 */
define(['exports', 'd3', 'jquery', '../caleydo_d3/d3util', '../caleydo_core/idtype'],
  function (exports, d3, $, d3utils, idtypes) {
    //MDS graph
    function drawMDSGraph($parent, data, nodes, pos, size){
      var width = size[0],
        height = size[1];
      var top = $parent.node().getBoundingClientRect().top;
      var left = $parent.node().getBoundingClientRect().left;
      var svg = $parent;
        //.attr("width", width)
        //.attr("height", height);
        //responsive SVG needs these 2 attributes and no width and height attr
       //.attr("preserveAspectRatio", "xMaxYMax meet")
       //.attr("viewBox",  left + " "+ top + " " + width + " " + height)
       //.attr("viewBox",  "0 0 " + width + " " + height)
       //class to make it responsive
       //.classed("svg-content-responsive", true);
      var margin = 40;

      var xScale = d3.scale.linear()
        .domain([pos.xmin, pos.xmax])
        .range([margin, width - margin]);

      var yScale = d3.scale.linear()
        .domain([pos.ymin, pos.ymax])
        .range([margin, height - margin]);

      //node selection from Caleydo
      d3utils.selectionUtil(data, svg, '.node');
      var onClick = function(d,i) {
        data.select(0, 'node-selected', [i], idtypes.toSelectOperation(d3.event));
      };

      // combine both the nodes with the position
      var mixed_data = [];
      pos.pos.forEach(function(d,i) {
        d.name = nodes[i][0];
        mixed_data[i] = d;
      });

      var selection = svg.selectAll(".node").data(mixed_data);
      // d3 enter -> create dom elements once
      var node =  selection.enter()
        .append("div")
        .attr("class", "node");
      node.append("text")
       // .attr("dx", 10)
       // .attr("dy", ".35em")
        .text(function (d, i) {
          return d.name;
        });

      var circles = node.append("div")
        .style("width", '20px')
        .style("height", '20px')
        .classed("fd-circle", true)
        .attr("id", function(d, i){
          return "table" + i;
        })
        .on('click', onClick);

      // d3 update
      svg.selectAll(".node")
        .style("transform", function(d) {
          return "translate(" + xScale(d.x) + "px," + yScale(d.y) + "px)";
        });

      // d3 remove
      selection.exit().remove();

      return svg;
    }
    //end of MDS graph


    var $svg = null;

    exports.MDSVis = d3utils.defineVis('MDSVis', {
        dim: ['column']
      }, [200, 200],
      function ($parent, data, size) {
        var o = this.options;
        var current_size = [$parent.node().getBoundingClientRect().width, $parent.node().getBoundingClientRect().height];
        var $node = $parent.append("div")
          //.classed("svg-container", true) //container class to make it responsive
          .classed("mds-container", true)
          .style("width", current_size[0] + "px")
          .style("height", current_size[1] + "px");
        data.data().then(function(nodes){
          console.log(nodes);
          $svg = drawMDSGraph($node, data, nodes, o.links, current_size);

          //to resize MDS
          o.dispatcher.on('resized_flex_column', function(col_id, width, $column) {
            current_size = [$parent.node().getBoundingClientRect().width, $parent.node().getBoundingClientRect().height];
            if (current_size[0] > 100){
              drawMDSGraph($node, data, nodes, o.links, current_size);
              console.log(col_id, width, $column);
            }
          });
        });
        return $node;
      },
      {
        resize: function() {
          if($svg === null) {
            return;
          }
          var done = false;
          var resizeSvg = function() {
            done = true;
            var width = $svg.node().parentNode.getBoundingClientRect().width,
                height = $svg.node().parentNode.getBoundingClientRect().height;
              console.log("resize mds vis", $svg);
            //$svg.attr("width", width)
            //  .attr("height", height);
            $svg.attr("viewBox",  "0 0 " + width + " " + height);
          };

          // use jquery instead of d3
          // http://stackoverflow.com/questions/2087510/callback-on-css-transition
          $($svg.node()).parents('.flex-column').one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', resizeSvg);

          //ensure tidy up if event doesn't fire..
          setTimeout(function(){
            if(!done){
              console.log("timeout needed to call transition ended..");
              resizeSvg();
            }
{'fraction_non_alphanumeric': 0.16691761669176167, 'fraction_numerical': 0.012690901269090126, 'mean_word_length': 2.016217969510217, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 6, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1239070', 'n_tokens_mistral': 2921, 'n_tokens_neox': 2795, 'n_words': 622}