-
Notifications
You must be signed in to change notification settings - Fork 492
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #753 from thehyve/volcano_plot_part1
Volcano plot part1
- Loading branch information
Showing
14 changed files
with
1,636 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .axis path, | ||
| .axis line { | ||
| fill: none; | ||
| stroke: black; | ||
| shape-rendering: crispEdges; | ||
| } | ||
|
|
||
| .axis text { | ||
| font-family: Verdana, Arial, sans-serif; | ||
| font-size: 11px; | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
146 changes: 146 additions & 0 deletions
146
portal/src/main/webapp/js/src/co-exp/components/MiniOnco.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| function MiniOnco(plotDiv, miniOncoDiv, originalData){ | ||
| var stackedHistogram; | ||
|
|
||
| // build a mini oncoprint | ||
| // the mini oncoprint works as follows | ||
| // Bar1: Query Genes | ||
| // - Altered Samples | ||
| // - Unaltered Samples | ||
| // Bar2: Selected Gene | ||
| // - Query Genes Altered and Selected Gene Unaltered Samples | ||
| // - Query Genes Altered and Selected Gene Altered Samples | ||
| // - Query Genes Unaltered and Selected Gene Altered Samples | ||
| // - Query Genes Unaltered and Selected Gene Unaltered Samples | ||
| this.render = function(current_gene){ | ||
| // fetch the alteredSamples | ||
| window.QuerySession.getAlteredSamples().then( | ||
| function (setAlt) { | ||
| // when we have the data, create bardata and build the mini oncoprint | ||
| var bardata = createBarData(setAlt.length, current_gene); | ||
| buildMiniOnco(bardata); | ||
| } | ||
| ) | ||
| } | ||
|
|
||
| // create the bar data which will be used to create the stacked histogram | ||
| function createBarData(setSizeAlt, current_gene){ | ||
| var bardata; | ||
| // retrieve the total number of samples and calculate the setsizes | ||
| var totalSetSize = window.QuerySession.getSampleIds().length; | ||
| var setSizeUnalt = totalSetSize - setSizeAlt; | ||
|
|
||
| if(!stackedHistogram){ | ||
| bardata = createEmptyBar(setSizeUnalt, setSizeAlt); | ||
| //bardata = createSelectedGeneData(current_gene, setSizeUnalt, setSizeAlt); | ||
| } | ||
| else{ | ||
| bardata = createSelectedGeneData(current_gene, setSizeUnalt, setSizeAlt); | ||
| } | ||
|
|
||
| bardata.push({ | ||
| barName: "Query Genes", | ||
| barPieceName: "Query Genes Unaltered: "+setSizeUnalt, | ||
| barPieceValue: setSizeUnalt, | ||
| color: "lightgrey" | ||
| }); | ||
|
|
||
| bardata.push({ | ||
| barName: "Query Genes", | ||
| barPieceName: "Query Genes Altered: "+setSizeAlt, | ||
| barPieceValue: setSizeAlt, | ||
| color: "#58ACFA" | ||
| }); | ||
|
|
||
| return bardata; | ||
| } | ||
|
|
||
| /** | ||
| * Creates an empty row for when the mini-onco is created | ||
| * @param setSizeUnalt | ||
| * @param setSizeAlt | ||
| * @returns {*[]} | ||
| */ | ||
| function createEmptyBar(setSizeUnalt, setSizeAlt){ | ||
| return [{ | ||
| barName: "None selected", | ||
| barPieceName: "Select gene in table or volcano plot", | ||
| barPieceValue: setSizeUnalt + setSizeAlt, | ||
| color: "lightgrey", | ||
| opacity: 0 | ||
| },{ | ||
| barName: "None selected", | ||
| barPieceName: "dummy1", | ||
| barPieceValue: 0, | ||
| color: "#58ACFA", | ||
| opacity: 0 | ||
| },{ | ||
| barName: "None selected", | ||
| barPieceName: "dummy2", | ||
| barPieceValue: 0, | ||
| color: "#58ACFA", | ||
| opacity: 0 | ||
| },{ | ||
| barName: "None selected", | ||
| barPieceName: "dummy3", | ||
| barPieceValue: 0, | ||
| color: "lightgrey", | ||
| opacity: 0 | ||
| } | ||
| ]; | ||
| } | ||
|
|
||
| function createSelectedGeneData(current_gene, setSizeUnalt, setSizeAlt){ | ||
| // find the numbers in the table | ||
| var nrAltInAlt = 0; | ||
| var nrAltInUnalt = 0; | ||
| for (var i = 0; i < originalData.length; i++) { | ||
| if (current_gene == originalData[i]["Gene"]) { | ||
| // the cell contains something like 30////0.2345, so the first entry gives us our number | ||
| nrAltInAlt = Number(originalData[i]["percentage of alteration in altered group"].split("\/")[0]); | ||
| nrAltInUnalt = Number(originalData[i]["percentage of alteration in unaltered group"].split("\/")[0]); | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| var selectedGeneData = [{ | ||
| barName: current_gene, | ||
| barPieceName: "Query Genes Unaltered, "+current_gene+" Unaltered: "+(setSizeUnalt - nrAltInUnalt), | ||
| barPieceValue: setSizeUnalt - nrAltInUnalt, | ||
| color: "lightgrey" | ||
| }, { | ||
| barName: current_gene, | ||
| barPieceName: "Query Genes Unaltered, "+current_gene+" Altered: "+nrAltInUnalt, | ||
| barPieceValue: nrAltInUnalt, | ||
| color: "#58ACFA" | ||
| }, { | ||
| barName: current_gene, | ||
| barPieceName: "Query Genes Altered, "+current_gene+" Altered: "+nrAltInAlt, | ||
| barPieceValue: nrAltInAlt, | ||
| color: "#58ACFA" | ||
| }, { | ||
| barName: current_gene, | ||
| barPieceName: "Query Genes Altered, "+current_gene+" Unaltered: "+(setSizeAlt - nrAltInAlt), | ||
| barPieceValue: setSizeAlt - nrAltInAlt, | ||
| color: "lightgrey" | ||
| }]; | ||
| return selectedGeneData; | ||
| } | ||
|
|
||
| // create or update the histogram | ||
| function buildMiniOnco(bardata){ | ||
| // if there is no mini-onco yet, append the div and create the histogram | ||
| if (!stackedHistogram) { | ||
| $("#" + plotDiv).append("<div id='" + miniOncoDiv + "'/>"); | ||
| stackedHistogram = new stacked_histogram("#" + miniOncoDiv); | ||
| stackedHistogram.createStackedHistogram(bardata); | ||
| stackedHistogram.addTextToLane("None selected", "Select gene in table or volcano plot"); | ||
|
|
||
| } | ||
| else{ | ||
| stackedHistogram.removeTextFromLane("None selected"); | ||
| stackedHistogram.updateStackedHistogram(bardata); | ||
| $("#"+miniOncoDiv).css("display", "block"); | ||
| } | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.