Skip to content

Commit

Permalink
Merge pull request #467 from web4bio/erika
Browse files Browse the repository at this point in the history 
Mainly UI updates
  • Loading branch information
@enemeth19
enemeth19 authored Jul 2, 2024
2 parents 4f35efa + 4a892e7 commit 97e0dbb
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 74 deletions.
6 changes: 3 additions & 3 deletions main/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
/* WebGen Title at top of app */

.PageTitle {
font-family: 'Roboto', sans-serif;
font-family: Arial, Helvetica, sans-serif;
color: #4db6ac;
text-align: center;
font-size: 45px;
font-style: italic;
font-size: 50px;
font-style: bold;
margin-bottom: 28px;
width: 100%;
}
Expand Down
74 changes: 15 additions & 59 deletions main/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<!-- FontAwesome icon library -->
<script src="https://kit.fontawesome.com/9ab5261272.js" crossorigin="anonymous"></script>
<!-- hclust for clustering -->
<script src="../js/libraries/hclust.min.js" defer></script>
<!-- Select2 -->
Expand Down Expand Up @@ -65,7 +67,6 @@
<div class="nav-wrapper">
<a
href="index.html"
style="font-style: italic"
class="brand-logo center"
>
WebGen
Expand All @@ -74,57 +75,24 @@
id="nav-mobile"
class="right hide-on-med-and-down"
>
<li class="active">
<!-- <li class="active">
<a href="about.html">About</a>
</li>
</li> -->
</ul>

<ul class="right hide-on-med-and-down">
<li><a href="https://github.com/web4bio/webgen"><i class="fab fa-github"></i></a></li>
<li><a href=""><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</nav>
</div>
<div id="progress-bar"></div>
<!-- Set up subtitles -->
<div>
<br />
<br />
<h5
style="
text-align: center;
font-style: italic;
font-family: Georgia, 'Times New Roman', Times,
serif;
"
>
A tool for exploring data from The Cancer Genome Atlas
</h5>
<p
style="
text-align: center;
font-family: Georgia, 'Times New Roman', Times,
serif;
"
>
Currently, this tool enables visualization of gene
expression (RNA-seq) data from primary solid tumor
samples via heatmap and violin plot.
</p>
<br />
</div>
<div>
<h5
style="
text-align: center;
color: lightcoral;
font-family: Georgia, 'Times New Roman', Times,
serif;
"
>
<strong>Customize Your Cohort:</strong>
</h5>
<br />
</div>
<br>
<div>
<p style="text-align: center">
<b>1) Select tumor type(s)</b>
<b>1) Select TCGA solid tumor type(s)</b>
</p>
<div id="cancerQuerySelectBox">
<select
Expand All @@ -143,10 +111,11 @@
</select>
</div>
</div>
<br>
<div class="row">
<p style="text-align: center">
<b>
2) Filter data by gene mutation signature and/or by
2) Filter by gene mutation signature and/or
metadata
</b>
</p>
Expand Down Expand Up @@ -187,24 +156,11 @@
src="../js/plots/createPieCharts.js"
></script>
</div>
<br />
<div>
<h5
style="
text-align: center;
color: lightcoral;
font-family: Georgia, 'Times New Roman', Times,
serif;
"
>
<strong>Explore Your Cohort:</strong>
</h5>
<br />
</div>

<div class="row">
<p style="text-align: center">
<b
>3) Select genes and/or pathways that you would like
>3) Select genes and/or pathways
to visualize
</b>
</p>
Expand Down
34 changes: 24 additions & 10 deletions main/js/plots/createHeatmap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
*/
const createHeatmap = async function (expressionData, clinicalAndMutationData, divObject) {
///// BUILD SVG OBJECTS /////

///////////////////////////////////
// SAMPLE TRACK SELECTOR SETUP
///////////////////////////////////

// Create div for clinical feature sample track variable selector as scrolling check box list
// Note that we are using the Grid system for Materialize
var gridRow = divObject.append("div");
Expand All @@ -29,14 +34,17 @@ const createHeatmap = async function (expressionData, clinicalAndMutationData, d
var div_clinSelect = div_optionsPanels.append('div');
div_clinSelect.attr("id", "heatmapPartitionSelector");
div_clinSelect.append('text')
.style('font-size', '20px')
.text('Select clinical variables\nto display sample tracks:');
.style('font-size', '14px')
.style('font-weight', 'bold')
.text('Select sample tracks');
div_clinSelect.append('br')
div_clinSelect
.append('div')
.attr('class', 'viewport')
.style('overflow-y', 'scroll')
.style('height', '365px')
.style('width', '300px')
.style('font-size', '14px')
.style('text-align', 'left')
.append('div')
.attr('class', 'clin_selector');
Expand Down Expand Up @@ -68,7 +76,8 @@ const createHeatmap = async function (expressionData, clinicalAndMutationData, d
// function to create a pair of checkbox and text
function renderCB(div_obj, id) {
const label = div_obj.append('div');
label.append('input')
const label2 = label.append('label')
label2.append('input')
.attr('id', 'check' + id)
.attr('type', 'checkbox')
.attr('class', 'myCheckbox')
Expand All @@ -78,8 +87,7 @@ const createHeatmap = async function (expressionData, clinicalAndMutationData, d
sortGroups();
updateHeatmap();
})
.attr('style', 'opacity: 1; position: relative; pointer-events: all');
label.append('text')
label2.append('span')
.text(' ' + id);
};
// populate clinical feature sample track variable selector
Expand All @@ -94,19 +102,20 @@ const createHeatmap = async function (expressionData, clinicalAndMutationData, d
});
// updateSelectedText();

///////////////////////////////////
// SORT SELECTOR SETUP
///////////////////////////////////

// Create div for sorting options (checkboxes)
var sortOptionDiv = div_optionsPanels.append('br')
var sortOptionDiv = div_optionsPanels.append('div')
.text('Sort options: ')
.style('font-size', '20px');
// var sortCurrentText = sortOptionDiv
// .append('tspan')
// .text('mean expression (default)');
var toggle_str =
"<label class='switch'>" +
"Mean Expression" +
"<input type='checkbox' id='toggleClust'>" +
"<span class='lever'></span>" +
"Hierarchical Clustering" +
"<span class='myCheckbox' style='color: black; font-weight:bold; font-size: 14px'>Hierarchical clustering</span>" +
"</label>";
sortToggleDiv = sortOptionDiv.append("div")
.attr("align", "center")
Expand All @@ -122,6 +131,11 @@ const createHeatmap = async function (expressionData, clinicalAndMutationData, d
updateHeatmap();
});


///////////////////////////////////
// HEATMAP SETUP
///////////////////////////////////

///// BUILD SVG OBJECTS /////
// Set up dimensions for heatmap:
var margin = { top: 80, right: 20, space: 5, bottom: 30, left: 50},//100 },
Expand Down
4 changes: 2 additions & 2 deletions main/js/plots/createPieCharts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,9 +330,9 @@ let setChartDimensions = async function(uniqueValuesForCurrentFeature, currentFe
if (windowWidth > threeColLower) {
currentFeatureDiv.setAttribute("class", "col s4");
} else if (windowWidth > twoColLower) {
currentFeatureDiv.setAttribute("class", "col s5");
currentFeatureDiv.setAttribute("class", "col s4");
} else {
currentFeatureDiv.setAttribute("class", "col s7");
currentFeatureDiv.setAttribute("class", "col s6");
}

// set chart height and width
Expand Down

0 comments on commit 97e0dbb

Please sign in to comment.