diff 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"

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/js/crossSamplePlots.js	Tue Jul 28 08:32:36 2020 -0400
@@ -0,0 +1,263 @@
+// 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);
+};