view js/crossSamplePlots.js @ 2:a64ece32a01a draft default tip

"planemo upload for repository https://github.com/ImmPortDB/immport-galaxy-tools/tree/master/flowtools/cs_overview commit a46097db0b6056e1125237393eb6974cfd51eb41"

+
−// Copyright (c) 2016 Northrop Grumman.
+
−// All rights reserved.
+
−var updateCSplots = function(plotconfig){
+
−  plotconfig.selectedPopulations = [];
+
−  $(plotconfig.popSelectj).each(function() {
+
−    if (this.checked) {
+
−      plotconfig.selectedPopulations.push(parseInt(this.value));
+
−    }
+
−  });
+
−  if (plotconfig.hasOwnProperty("mtable")) {
+
−    // Update selected markers?
+
−    plotconfig.selectedMarkers = [];
+
−    $(plotconfig.mrkrSelectj).each(function() {
+
−      if (this.checked) {
+
−        plotconfig.selectedMarkers.push(parseInt(this.value));
+
−      }
+
−    });
+
−    // update plot
+
−    updateBoxplot(plotconfig);
+
−  } else {
+
−    updatePlot(plotconfig);
+
−  }
+
−};
+
−
+
−var displayPopulationLegend = function(plotconfig) {
+
−  $(plotconfig.table).empty();
+
−  plotconfig.allPopulations.map(function(value,index) {
+
−    $(plotconfig.table).append('<tr><td align="center">'
+
−        + '<input type="checkbox" checked class=' + plotconfig.popSelect
+
−        + ' value=' + value + '/></td><td title="' + newPopNames[value] + '">'
+
−        + newPopNames[value] + '</td><td><span style="background-color:'
+
−        + color_palette[0][value][0] + '">&nbsp;&nbsp;&nbsp;</span></td></tr>');
+
−  });
+
−
+
−  $(plotconfig.popSelectAll).click(function() {
+
−    var checkAll = $(plotconfig.popSelectAll).prop('checked');
+
−    if (checkAll) {
+
−      $(plotconfig.popSelectj).prop("checked", true);
+
−    } else {
+
−      $(plotconfig.popSelectj).prop("checked", false);
+
−    }
+
−    updateCSplots(plotconfig);
+
−  });
+
−
+
−  $(plotconfig.popSelectj).click(function() {
+
−    if ($(plotconfig.popSelectj).length == $(plotconfig.popSelectCheck).length) {
+
−      $(plotconfig.popSelectAll).prop("checked",true);
+
−    } else {
+
−      $(plotconfig.popSelectAll).prop("checked",false);
+
−    }
+
−    updateCSplots(plotconfig);
+
−  });
+
−
+
−  $(plotconfig.popSelectj).each(function() {
+
−    var selectedpopn = parseInt(this.value);
+
−    if ($.inArray(selectedpopn,plotconfig.selectedPopulations) > -1) {
+
−      this.checked = true;
+
−    } else {
+
−      this.checked = false;
+
−    }
+
−  });
+
−};
+
−
+
−var displayToolbar = function(plotconfig){
+
−  $(plotconfig.displaybutton).on("click",function() {
+
−    $(plotconfig.popSelectj).prop("checked", true);
+
−    $(plotconfig.popSelectAll).prop("checked", true);
+
−    if (plotconfig.hasOwnProperty("mtable")){
+
−      $(plotconfig.displayMFI).prop("checked", false);
+
−      $(plotconfig.displayvalues).prop("checked", false);
+
−      $(plotconfig.mrkrSelectj).prop("checked", true);
+
−      $(plotconfig.mrkrSelectAll).prop("checked",true);
+
−    }
+
−    updateCSplots(plotconfig);
+
−  });
+
−
+
−  if (plotconfig.hasOwnProperty("mtable")){
+
−    $(plotconfig.displayMFI).on("click", function(){
+
−      updateCSplots(plotconfig);
+
−    });
+
−    $(plotconfig.displayvalues).on("click", function(){
+
−      updateCSplots(plotconfig);
+
−    });
+
−  }
+
−  $(plotconfig.toggledisplayj).on("click",function() {
+
−    plotconfig.selectedPopulations = [];
+
−    $(plotconfig.popSelectj).each(function() {
+
−      if (this.checked) {
+
−        plotconfig.selectedPopulations.push(parseInt(this.value));
+
−      }
+
−    })
+
−    if (plotconfig.hasOwnProperty("mtable")){
+
−      plotconfig.selectedMarkers = [];
+
−      $(plotconfig.mrkrSelectj).each(function() {
+
−        if (this.checked) {
+
−          plotconfig.selectedMarkers.push(parseInt(this.value));
+
−        }
+
−      });
+
−      var text = document.getElementById(plotconfig.toggledisplay).firstChild;
+
−      text.data = text.data == "View per marker" ? "View per population" : "View per marker";
+
−      plotconfig.view = plotconfig.view == "p" ? "m" : "p";
+
−      updateBoxplot(plotconfig);
+
−    } else {
+
−      var imgSrc = document.getElementById(plotconfig.toggledisplay);
+
−      imgSrc.src = imgSrc.src.endsWith("stackedsm.png") ? "/static/images/flowtools/barssm.png" : "/static/images/flowtools/stackedsm.png";
+
−      plotconfig.type = plotconfig.type == "barplot" ? "areaplot" : "barplot";
+
−      updatePlot(plotconfig);
+
−    }
+
−  });
+
−  displayPlot(plotconfig);
+
−};
+
−
+
−var displayPlot = function(plotconfig) {
+
−  var h = $(window).height() - 200;
+
−  $(plotconfig.plotdivj).empty();
+
−  $(plotconfig.plotdivj).height(h);
+
−
+
−  if (plotconfig.hasOwnProperty("mtable")) {
+
−    var nbPop = Object.keys(plotconfig.csdata.mfi[plotconfig.mrkrNames[0]]).length + 2;
+
−    // Get Markers too
+
−    for (var i = 0, nbMarkers = plotconfig.mrkrNames.length; i < nbMarkers; i++) {
+
−      plotconfig.allMarkers.push(i);
+
−      plotconfig.selectedMarkers.push(i);
+
−    }
+
−  } else {
+
−    var nbPop = plotconfig.csdata[0].length;
+
−  }
+
−
+
−  for (var i = 2; i < nbPop; i++) {
+
−    plotconfig.allPopulations.push(i - 1);
+
−    plotconfig.selectedPopulations.push(i - 1);
+
−  }
+
−
+
−  $(window).on('resize',function() {
+
−    waitForFinalEvent(function() {
+
−      if (plotconfig.hasOwnProperty("mtable")){
+
−          updateBoxplot(plotconfig);
+
−      } else {
+
−          updatePlot(plotconfig);
+
−      }
+
−    }, 500, "resizePlot");
+
−  });
+
−
+
−  displayPopulationLegend(plotconfig);
+
−  if (plotconfig.hasOwnProperty("mtable")){
+
−    displayMarkerTable(plotconfig);
+
−    updateBoxplot(plotconfig);
+
−  } else {
+
−    updatePlot(plotconfig);
+
−  }
+
−};
+
−
+
−var updatePlot = function(plotconfig) {
+
−  var h = $(window).height() - 200,
+
−      traces = [],
+
−      tmptraces = [],
+
−      x_values = [],
+
−      totals = [];
+
−      layout = {};
+
−
+
−  $(plotconfig.plotdivj).empty();
+
−  $(plotconfig.plotdivj).height(h);
+
−  for (var i = 1, j = plotconfig.csdata.length; i < j; i++) {
+
−    x_values.push(newSmpNames[plotconfig.csdata[i][1]]);
+
−  }
+
−
+
−  for (var k = 1, i = plotconfig.csdata.length; k < i; k++){
+
−    totals[k] = 0;
+
−    for (var m = 2, o = plotconfig.csdata[0].length; m < o; m++){
+
−      for (var n = 0, p = plotconfig.selectedPopulations.length; n < p; n++){
+
−        if (plotconfig.csdata[0][m] === plotconfig.selectedPopulations[n]) {
+
−          totals[k] += plotconfig.csdata[k][m];
+
−        }
+
−      }
+
−    }
+
−  }
+
−
+
−  for (var i = 0, ii = plotconfig.selectedPopulations.length; i < ii; i++) {
+
−    pop = plotconfig.selectedPopulations[i];
+
−    var popName = "Pop " + pop;
+
−    var y_values = [];
+
−    var obj;
+
−
+
−    for (var j = 1, jj = plotconfig.csdata.length; j < jj; j++) {
+
−      var newvalue = (plotconfig.csdata[j][pop + 1] / totals[j]) * 100;
+
−      y_values.push(newvalue);
+
−    }
+
−    if (plotconfig.type === "areaplot") {
+
−      obj = {
+
−          x: x_values,
+
−          y: y_values,
+
−          hoverinfo: "x",
+
−          name: popName,
+
−          type: 'area',
+
−          fill: 'tonexty',
+
−          marker: {color: color_palette[0][pop][0]}
+
−      };
+
−    }
+
−    if (plotconfig.type === "barplot") {
+
−      obj = {
+
−          x: x_values,
+
−          y: y_values,
+
−          hoverinfo: "x",
+
−          name: popName,
+
−          type: 'bar',
+
−          marker: {color: color_palette[0][pop][0]}
+
−      };
+
−    }
+
−    tmptraces.push(obj)
+
−  }
+
−
+
−  if (plotconfig.type === "barplot") {
+
−    layout = {
+
−        hovermode:'closest',
+
−        title: '',
+
−        barmode: 'stack',
+
−        showlegend: false,
+
−        yaxis: {
+
−            mirror: 'all',
+
−            tickmode: 'array',
+
−            ticktext: ["","20%", "40%", "60%", "80%", "100%"],
+
−            tickvals: [0,20,40,60,80,100],
+
−            title: 'Populations proportions in selected set',
+
−            titlefont: {
+
−                size: 16,
+
−                color: 'grey'
+
−            }
+
−        }
+
−    };
+
−    traces = tmptraces;
+
−  }
+
−  if (plotconfig.type === "areaplot") {
+
−    function stacked(trcs) {
+
−      for(var i=1; i<trcs.length; i++) {
+
−        for(var j=0; j<(Math.min(trcs[i]['y'].length, trcs[i-1]['y'].length)); j++) {
+
−          trcs[i]['y'][j] += trcs[i-1]['y'][j];
+
−        }
+
−      }
+
−      return trcs;
+
−    }
+
−    layout = {
+
−        title: '',
+
−        showlegend: false,
+
−        yaxis: {
+
−            mirror: 'all',
+
−            tickmode: 'array',
+
−            ticktext: ["","20%", "40%", "60%", "80%", "100%"],
+
−            tickvals: [0,20,40,60,80,100],
+
−            title: 'Populations proportions in selected set',
+
−            titlefont: {
+
−                size: 16,
+
−                color: 'grey'
+
−            }
+
−        },
+
−        xaxis: {
+
−            autorange: false,
+
−            range: [-0.2, x_values.length - 0.8]
+
−        }
+
−    };
+
−    traces = stacked(tmptraces);
+
−  }
+
−  Plotly.newPlot(plotconfig.plotdiv,traces,layout);
+
−};