rails-clustergrammer 0.1.0 → 0.1.1

data/vendor/assets/javascripts/graph-scroll.js

@@ -0,0 +1,136 @@
+function graphScroll() {
+  var windowHeight,
+      dispatch = d3.dispatch("scroll", "active"),
+      sections = d3.select('null'),
+      i = NaN,
+      sectionPos = [],
+      n,
+      graph = d3.select('null'),
+      isFixed = null,
+      isBelow = null,
+      container = d3.select('body'),
+      containerStart = 0,
+      belowStart,
+      eventId = Math.random()
+
+  function reposition(){
+    var i1 = 0
+    sectionPos.forEach(function(d, i){
+      if (d < pageYOffset - containerStart + 400) i1 = i
+    })
+    i1 = Math.min(n - 1, i1)
+    if (i != i1){
+      sections.classed('graph-scroll-active', function(d, i){ return i === i1 })
+
+      dispatch.active(i1)
+
+      i = i1
+    }
+
+    var isBelow1 = pageYOffset > belowStart
+    if (isBelow != isBelow1){
+      isBelow = isBelow1
+      graph.classed('graph-scroll-below', isBelow)
+    }
+    var isFixed1 = !isBelow && pageYOffset > containerStart
+    if (isFixed != isFixed1){
+      isFixed = isFixed1
+      graph.classed('graph-scroll-fixed', isFixed)
+    }
+  }
+
+  function resize(){
+    sectionPos = []
+    var startPos
+    sections.each(function(d, i){
+      if (!i) startPos = this.getBoundingClientRect().top
+      sectionPos.push(this.getBoundingClientRect().top -  startPos) })
+
+    var containerBB = container.node().getBoundingClientRect()
+    var graphBB = graph.node().getBoundingClientRect()
+
+    containerStart = containerBB.top + pageYOffset
+    belowStart = containerBB.bottom - graphBB.height  + pageYOffset
+  }
+
+  function keydown() {
+    if (!isFixed) return
+    var delta
+    switch (d3.event.keyCode) {
+      case 39: // right arrow
+      if (d3.event.metaKey) return
+      case 40: // down arrow
+      case 34: // page down
+      delta = d3.event.metaKey ? Infinity : 1 ;break
+      case 37: // left arrow
+      if (d3.event.metaKey) return
+      case 38: // up arrow
+      case 33: // page up
+      delta = d3.event.metaKey ? -Infinity : -1 ;break
+      case 32: // space
+      delta = d3.event.shiftKey ? -1 : 1
+      ;break
+      default: return
+    }
+
+    var i1 = Math.max(0, Math.min(i + delta, n - 1))
+    d3.select(document.documentElement)
+        .interrupt()
+      .transition()
+        .duration(500)
+        .tween("scroll", function() {
+          var i = d3.interpolateNumber(pageYOffset, sectionPos[i1] + containerStart)
+          return function(t) { scrollTo(0, i(t)) }
+        })
+
+    d3.event.preventDefault()
+  }
+
+
+  var rv ={}
+
+  rv.container = function(_x){
+    if (!_x) return container
+
+    container = _x
+    return rv
+  }
+
+  rv.graph = function(_x){
+    if (!_x) return graph
+
+    graph = _x
+    return rv
+  }
+
+  rv.eventId = function(_x){
+    if (!_x) return eventId
+
+    eventId = _x
+    return rv
+  }
+
+  rv.sections = function (_x){
+    if (!_x) return sections
+
+    sections = _x
+    n = sections.size()
+
+    d3.select(window)
+        .on('scroll.gscroll'  + eventId, reposition)
+        .on('resize.gscroll'  + eventId, resize)
+        .on('keydown.gscroll' + eventId, keydown)
+
+    resize()
+    d3.timer(function() {
+      reposition()
+      return true
+    })
+
+    return rv
+  }
+
+  d3.rebind(rv, dispatch, "on")
+
+  return rv
+}

data/vendor/assets/javascripts/hzome_functions.js

@@ -0,0 +1,83 @@
+function ini_hzome(root_id){
+
+  // save gene data to global variable
+  gene_data = {};
+
+  function get_mouseover(root_tip, gene_symbol){
+
+    // not sure if this is necessary
+    if ( d3.select(root_tip + '_row_tip').classed(gene_symbol) ){
+     get_request(root_tip, gene_symbol);
+    }
+
+  }
+
+  function get_request(root_tip, ini_gene_symbol){
+
+    var gene_symbol;
+    if (ini_gene_symbol.indexOf(' ') > 0){
+      gene_symbol = ini_gene_symbol.split(' ')[0];
+    } else if (ini_gene_symbol.indexOf('_') > 0){
+      gene_symbol = ini_gene_symbol.split('_')[0];
+    }
+    else {
+      gene_symbol = ini_gene_symbol;
+    }
+
+    var base_url = 'https://amp.pharm.mssm.edu/Harmonizome/api/1.0/gene/';
+    var url = base_url + gene_symbol;
+
+    $.get(url, function(data) {
+
+      data = JSON.parse(data);
+
+      // save data for repeated use
+      gene_data[gene_symbol] = {}
+      gene_data[gene_symbol].name = data.name;
+      gene_data[gene_symbol].description = data.description;
+
+      set_tooltip(data, root_tip, ini_gene_symbol);
+
+      return data;
+
+    });
+  }
+
+  function set_tooltip(data, root_tip, gene_symbol){
+
+    if (data.name != undefined){
+
+      d3.selectAll(root_tip + '_row_tip')
+        .html(function(){
+            var sym_name = gene_symbol + ': ' + data.name;
+            var full_html = '<p>' + sym_name + '</p>' +  '<p>' +
+              data.description + '</p>';
+            return full_html;
+        });
+    }
+  }
+
+
+  function gene_info(root_tip, gene_info){
+
+    var gene_symbol = gene_info.name;
+
+    if (_.has(gene_data, gene_symbol)){
+      var inst_data = gene_data[gene_symbol];
+      set_tooltip(inst_data, root_tip, gene_symbol);
+    } else{
+      setTimeout(get_mouseover, 250, root_tip, gene_symbol);
+    }
+
+  }
+
+  hzome = {}
+
+  hzome.gene_info = gene_info;
+  hzome.gene_data = gene_data;
+  hzome.get_mouseover = get_mouseover;
+  hzome.get_request = get_request;
+
+  return hzome;
+
+}

data/vendor/assets/javascripts/scroll_section_functions.js

@@ -0,0 +1,291 @@
+var section_fun = {};
+
+section_fun['initialize_view'] = function(){
+  console.log('initializing view');
+  click_reorder_button('row','clust');
+  click_reorder_button('col','clust');
+  cgm.reset_cats();
+  cgm.update_view('N_row_sum','all');
+  close_enrichr_menu();
+}
+
+section_fun['run_filter_sum_10'] = function(){
+  console.log('sum filtering');
+  cgm.update_view('N_row_sum', 10);
+}
+
+section_fun['run_filter_sum_20'] = function(){
+  console.log('sum filtering');
+  cgm.update_view('N_row_sum', 20);
+}
+
+section_fun['run_filter_var_10'] = function(){
+  console.log('variance filtering');
+  click_reorder_button('row','clust');
+  click_reorder_button('col','clust');
+  highlight_sidebar_element(cgm.params, 'slider_N_row_var');
+  cgm.update_view('N_row_var', 10);
+
+  // update slider manually - 2 means the third position of the slider
+  // for some reason I need to call it twice
+  cgm.slider_functions['N_row_var'].value(1);
+  cgm.slider_functions['N_row_var'].value(2);
+
+  d3.select(cgm.params.root+' .title_N_row_var')
+    .text('Top rows variance: 10');
+
+  d3.select(cgm.params.root+' .slider_N_row_var')
+    .attr('current_state', '10');
+}
+
+section_fun['run_reorder_row_var'] = function(){
+  highlight_sidebar_element(cgm.params, 'toggle_row_order');
+  click_reorder_button('row','rankvar');
+}
+
+section_fun['run_reorder_single_row'] = function(){
+
+  var params = cgm.params;
+
+  var inst_element = get_row_element(params, 'EGFR');
+
+  var group_trans = d3.select(inst_element).attr('transform');
+
+  var container_trans = d3.select(params.root+' .clust_container')
+    .attr('transform')
+    .split(',')[1].replace(')','');
+
+  var x_trans = params.viz.norm_labels.width.row * 0.9;
+
+  var row_trans = group_trans.split(',')[1].replace(')','');
+  var y_trans = String(Number(row_trans) + Number(container_trans) +
+    params.viz.rect_height/2);
+
+  var wait_click = 500;
+  setTimeout(sim_click, wait_click, params, 'double', x_trans, y_trans);
+  var wait_reorder = wait_click + 300;
+  setTimeout(fire_double_click_row, wait_reorder, params, inst_element);
+}
+
+section_fun['run_conclusions'] = function(){
+  console.log('run conclusions');
+  click_reorder_button('row','clust');
+  click_reorder_button('col ','clust');
+  cgm.update_view('N_row_sum','all');
+}
+
+section_fun['run_zoom_and_pan'] = function(){
+  console.log('zoom_and_pan');
+  setTimeout(function(){cgm.zoom(0, 0, 3)}, 0);
+  setTimeout(function(){cgm.zoom(0, 0, 1)}, 1500);
+}
+
+section_fun['open_enrichr_menu'] = function(){
+
+  cgm.update_view('N_row_sum','all');
+
+  var x_trans = 72;
+  var y_trans = 25;
+  var wait_click = 500;
+  setTimeout(sim_click, wait_click, cgm.params, 'single', x_trans, y_trans);
+
+  setTimeout(open_enrichr_menu, 750);
+}
+
+section_fun['run_enrichr_cats'] = function(){
+
+  console.log('run_enrichr_cats\n--------------')
+  var lib_of_interest = 'ChEA 2015'
+
+  var x_trans = 115;
+  var y_trans = 93;
+  var wait_click = 500;
+  setTimeout(sim_click, wait_click, cgm.params, 'single', x_trans, y_trans);
+
+  setTimeout(click_lib, 750, lib_of_interest);
+
+  setTimeout(close_enrichr_menu, 1500);
+
+}
+
+section_fun['clear_enrichr_cats'] = function(){
+
+  setTimeout(open_enrichr_menu, 500);
+
+  var x_trans = 460;
+  var y_trans = 65;
+  var wait_click = 1500;
+  setTimeout(sim_click, wait_click, cgm.params, 'single', x_trans, y_trans);
+
+  function delay_enr_clear(){
+    console.log('delay_enr_clear')
+    $(d3.select('.enr_menu_clear')[0]).d3Click();
+  }
+
+  setTimeout(delay_enr_clear, 2000);
+}
+
+section_fun['dendro_groups'] = function(){
+  click_reorder_button('row','clust');
+  click_reorder_button('col','clust');
+  function highlight_dendro(){
+    highlight_sidebar_element(cgm.params, 'slider_row');
+    highlight_sidebar_element(cgm.params, 'slider_col');
+  }
+  setTimeout(highlight_dendro, 1500);
+}
+
+section_fun['row_search'] = function(){
+  highlight_sidebar_element(cgm.params, 'gene_search_container');
+}
+
+var update_section_db = _.debounce(update_section, 1500);
+
+function update_section(current_section){
+
+  if (prev_section != current_section){
+
+    prev_section = current_section;
+
+    var function_name = tutorial_info[current_section].run_function;
+    var inst_function = section_fun[function_name];
+
+    // run if buttons are active
+    if (d3.select('.toggle_col_order').select('button').attr('disabled') === null){
+      inst_function();
+
+    // wait if still transitioning
+    } else {
+
+      // need to check that you are in the same section
+      setTimeout(inst_function, 2000);
+    }
+
+  } else {
+    console.log('already in section - do not run\n')
+  }
+}
+
+function highlight_sidebar_element(params, highlight_class){
+
+  var duration = 4000;
+
+  if (highlight_class.indexOf('slider') < 0){
+    d3.select(params.root+' .'+highlight_class)
+      .style('background','#007f00')
+      .style('box-shadow','0px 0px 10px 5px #007f00')
+      .transition().duration(1).delay(duration)
+      .style('background','#FFFFFF')
+      .style('box-shadow','none');
+  } else {
+    d3.select(params.root+' .'+highlight_class)
+      .style('box-shadow','0px 0px 10px 5px #007f00')
+      .transition().duration(1).delay(duration)
+      .style('box-shadow','none');
+  }
+}
+
+function sim_click(params, single_double, pos_x, pos_y){
+
+  var click_duration = 200;
+
+  var click_circle = d3.select(params.root+' .viz_svg')
+    .append('circle')
+    .attr('cx',pos_x)
+    .attr('cy',pos_y)
+    .attr('r',25)
+    .style('stroke','black')
+    .style('stroke-width','3px')
+    .style('fill','#007f00')
+    .style('opacity',0.5);
+
+  if (single_double === 'double'){
+    click_circle
+      .transition().duration(click_duration)
+      .style('opacity',0.0)
+      .transition().duration(50)
+      .style('opacity',0.5)
+      .transition().duration(click_duration)
+      .style('opacity',0.0)
+      .remove();
+  } else {
+    click_circle
+      .transition().duration(click_duration)
+      .style('opacity',0.0)
+      .transition().duration(250)
+      .remove();
+  }
+
+}
+
+
+function click_lib(lib_of_interest){
+
+  found_lib = d3.select(cgm.params.root+' .enr_lib_section')
+    .selectAll('g')
+    .filter(function(){
+      var inst_text = d3.select(this).select('text').text();
+      return inst_text === lib_of_interest;
+    })[0];
+  $(found_lib).d3Click();
+  console.log('click_lib')
+}
+
+function open_enrichr_menu(){
+  // only open, do not close
+  if (d3.select('.enrichr_menu').classed('showing') === false){
+    $(d3.select('#enrichr_menu_button_graph')[0]).d3Click();
+  }
+}
+
+function close_enrichr_menu(){
+  console.log('close_enrichr_menu')
+  // only open, do not close
+  if (d3.select('.enrichr_menu').classed('showing') === true){
+    $(d3.select('#enrichr_menu_button_graph')[0]).d3Click();
+  }
+}
+
+function click_reorder_button(inst_rc, inst_order){
+  var inst_button = d3.selectAll('.toggle_'+inst_rc+'_order .btn')
+    .filter(function(){
+      return this.__data__ == inst_order;
+    })[0];
+
+  $(inst_button).click();
+}
+
+
+
+function get_row_element(params, inst_row){
+
+  var inst_element = d3.selectAll(params.root+' .row_label_group')
+    .filter(function(){
+      var inst_data = this.__data__;
+      return inst_data.name == inst_row;
+    })[0][0];
+
+  return inst_element;
+}
+
+function fire_double_click_row(params, inst_element){
+  $(inst_element).d3DblClick();
+}
+
+// allows doubleclicking on d3 element
+jQuery.fn.d3DblClick = function () {
+  this.each(function (i, e) {
+    var evt = document.createEvent("MouseEvents");
+    evt.initMouseEvent("dblclick", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+    e.dispatchEvent(evt);
+  });
+};
+
+jQuery.fn.d3Click = function () {
+  this.each(function (i, e) {
+    var evt = document.createEvent("MouseEvents");
+    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false,
+      false, false, false, 0, null);
+    e.dispatchEvent(evt);
+  });
+};