Skip to content

Commit

Permalink
Reordered condition and secondary filtering sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@adkinsrs
adkinsrs committed Jul 22, 2024
1 parent abf55bf commit 804b990
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 27 deletions.
32 changes: 17 additions & 15 deletions www/compare_datasets.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,18 +132,6 @@ <h5 class="title is-5">
</h5>

<div class="js-step-collapsable mt-3" id="condition-compare-collapsable">
<div id="facet-content" class="content is-hidden">
<p>Number of selected observations: <span id="num-selected" class="has-text-weight-semibold"></span></p>
<div class="box" id="selected-facets">
<p> Selected filters:
<span class="loader is-hidden is-inline-flex" id="selected-facets-loader"></span>
</p>
<span class="tags" id="selected-facets-tags"></span>
</div>

<span class="title is-6">Shared filtered conditions</span>
<div id="facet-c" class="content"></div>
</div>

<div>
<div class="columns">
Expand All @@ -158,19 +146,33 @@ <h5 class="title is-5">
</div>

<div class="columns">
<div class="field column is-one-third">
<div class="field column is-one-third is-hidden">
<label class="label">X-axis (query) condition <span class="has-text-success-dark is-pulled-right">Required</span></label>
<div id="compare-x" class="control has-background-white p-3 is-hidden js-compare-groups js-compare-x">
</div>
</div>

<div class="field column is-one-third">
<div class="field column is-one-third is-hidden">
<label class="label">Y-axis (reference) condition <span class="has-text-success-dark is-pulled-right">Required</span></label>
<div id="compare-y" class="control has-background-white p-3 is-hidden js-compare-groups js-compare-y">
</div>
</div>
</div>
<p id="select-compare-series-notification" class="notification is-light"> </p>
<p id="select-compare-series-notification" class="mb-3 notification is-warning">Please select a series to compare to choose X and Y conditions</p>
</div>

<div id="facet-content" class="content is-hidden">
<p>Number of selected observations: <span id="num-selected" class="has-text-weight-semibold"></span></p>
<div class="box" id="selected-facets">
<p> Selected filters:
<span class="loader is-hidden is-inline-flex" id="selected-facets-loader"></span>
</p>
<span class="tags" id="selected-facets-tags"></span>
</div>

<span class="title is-6">Extra filters to apply to both conditions</span>
<p class="help">Useful for doing X vs Y comparison on subsets of data beyond the main series to compare.</p>
<div id="facet-c" class="content"></div>
</div>

</div>
Expand Down
46 changes: 34 additions & 12 deletions www/js/compare_datasets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const LOG10_TRANSFORMED_DATASETS = [
];

let sessionId;
let facetWidget;
let facetWidget; // stores aggregation data
let datasetId;
let organismId; // Used for saving as gene cart
let compareData;;
Expand Down Expand Up @@ -106,12 +106,8 @@ const datasetTree = new DatasetTree({
classElt.replaceChildren();
}

// Create facet widget, which will refresh filters
facetWidget = await createFacetWidget(datasetId, null, {});
document.getElementById("facet-content").classList.remove("is-hidden");
document.getElementById("selected-facets").classList.remove("is-hidden");

// Update compare series options
facetWidget = await createFacetWidget(datasetId, null, {}); // Initial fetching of categorical columns
const catColumns = facetWidget.aggregations.map((agg) => agg.name);
updateSeriesOptions("js-compare", catColumns);

Expand Down Expand Up @@ -237,6 +233,8 @@ const clearGenes = (event) => {

const createFacetWidget = async (datasetId, analysisId, filters) => {
document.getElementById("selected-facets-loader").classList.remove("is-hidden")
document.getElementById("facet-content").classList.add("is-hidden");
document.getElementById("selected-facets").classList.add("is-hidden");

const {aggregations, total_count:totalCount} = await fetchAggregations(datasetId, analysisId, filters);
document.getElementById("num-selected").textContent = totalCount;
Expand All @@ -262,6 +260,8 @@ const createFacetWidget = async (datasetId, analysisId, filters) => {
filterHeaderExtraClasses:"has-background-white"
});
document.getElementById("selected-facets-loader").classList.add("is-hidden")
document.getElementById("facet-content").classList.remove("is-hidden");
document.getElementById("selected-facets").classList.remove("is-hidden");
return facetWidget;
}

Expand Down Expand Up @@ -959,6 +959,8 @@ const updateGroupOptions = (selectorId, groupsArray, series) => {
label.prepend(checkbox);

// If group has aggregations count of 0 (no data after filtering), disable checkbox and label
checkbox.disabled = false;
label.removeAttribute("disabled");
if (facetWidget.aggregations.find((agg) => agg.name === series).items.find((item) => item.name === group).count === 0) {
checkbox.disabled = true;
label.setAttribute("disabled", "disabled");
Expand Down Expand Up @@ -1136,16 +1138,23 @@ document.getElementById("statistical-test").addEventListener("change", (event) =
for (const classElt of document.getElementsByClassName("js-compare")) {
const compareSeriesNotification = document.getElementById("select-compare-series-notification");
classElt.addEventListener("change", async (event) => {
const compareSeries = event.target.value;
compareSeriesNotification.classList.remove("is-hidden", "is-danger");
compareSeriesNotification.classList.add("is-warning");
compareSeriesNotification.textContent = "Please select a series to compare first";

// Disable plot button until conditions are met
for (const plotBtn of document.getElementsByClassName("js-plot-btn")) {
plotBtn.disabled = true;
}

// Hide and clear compare groups
for (const classElt of document.getElementsByClassName("js-compare-groups")) {
classElt.classList.add("is-hidden");
classElt.parentElement.classList.add("is-hidden");
classElt.replaceChildren();
}

const compareSeries = event.target.value;
compareSeriesNotification.classList.remove("is-hidden", "is-danger");
compareSeriesNotification.classList.add("is-warning");
compareSeriesNotification.textContent = "Please select a series to compare to choose X and Y conditions";

if (!compareSeries) return;

const seriesItems = getSeriesItems(compareSeries);
Expand All @@ -1162,8 +1171,21 @@ for (const classElt of document.getElementsByClassName("js-compare")) {

compareSeriesNotification.classList.add("is-hidden");

// Reset facet groups
facetWidget = await createFacetWidget(datasetId, null, {}); // will also remove any existing facet widget

updateGroupOptions("compare-x", seriesNames, compareSeries);
updateGroupOptions("compare-y", seriesNames, compareSeries);

// Show compare groups since things have validated.
for (const classElt of document.getElementsByClassName("js-compare-groups")) {
classElt.parentElement.classList.remove("is-hidden");
}

// Hide the chosen group's facet element
const facetElt = document.getElementById(`filter-${compareSeries}`);
facetElt.classList.add("is-hidden");

})
}

Expand Down Expand Up @@ -1249,7 +1271,7 @@ document.getElementById('genes-manually-entered').addEventListener('change', (ev
chooseGenes(null);
});

document.querySelector('#dropdown-gene-list-proceed').addEventListener('click', chooseGenes);
document.getElementById('dropdown-gene-list-proceed').addEventListener('click', chooseGenes);

document.getElementById("download-selected-genes-btn").addEventListener("click", downloadSelectedGenes);

Expand Down

0 comments on commit 804b990

Please sign in to comment.