Skip to content

Commit

Permalink
Merge branch 'ui-v2' of https://github.com/IGS/gEAR into ui-v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@adkinsrs
adkinsrs committed Jan 9, 2024
2 parents 3a265e6 + d4b742f commit 8160f0a
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 34 deletions.
9 changes: 5 additions & 4 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,12 +171,12 @@ <h3 class="mt-6 mb-3">
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu6" role="menu">
<div class="dropdown-menu" role="menu">
<div class="dropdown-content is-full-width">
<div class="dropdown-item">
<div class="field">
<p class="control has-icons-left">
<input class="input" type="input" placeholder="Search and select a Gene List or a Gene">
<input class="input" type="input" id="dropdown-gene-list-search-input" placeholder="Search and select a Gene List">
<span class="icon is-small is-left">
<i class="mdi mdi-magnify"></i>
</span>
Expand Down Expand Up @@ -242,7 +242,8 @@ <h3>Genes</h3>
<div id="gene-select-dropdown-dynamic-selections"></div>
</div>
<div class="column is-2">
<button class="button is-primary is-rounded">Proceed</button>
<button class="button is-primary is-rounded is-small mb-1">Proceed</button><br />
<button id="dropdown-gene-list-cancel" class="button is-secondary is-rounded is-small">Reset</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -273,7 +274,7 @@ <h3>Genes</h3>
<div class="control">
<label class="checkbox">
<input type="checkbox">
Exact match
Exact
</label>
</div>
<div class="control">
Expand Down
130 changes: 100 additions & 30 deletions www/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
let gene_cart_data = null;
let gene_cart_label_index = {};

// For carts, key is share_id, value is array of genes individually selected
// For carts, key is share_id, value is array of genes symbol strings
let selected_carts = {};
let selected_genes = [];

Expand Down Expand Up @@ -37,6 +38,9 @@ document.addEventListener('DOMContentLoaded', () => {
} else if (event.target.classList.contains('dropdown-gene-list-item-add')) {
const row_div = event.target.closest('div');
setActiveGeneCart(row_div, 'add');
} else if (event.target.classList.contains('dropdown-gene-list-item-remove')) {
const row_div = event.target.closest('div');
setActiveGeneCart(row_div, 'remove');
}
});

Expand All @@ -47,35 +51,97 @@ document.addEventListener('DOMContentLoaded', () => {

const row_div = event.target.closest('div');
const gene_symbol = row_div.querySelector('.gene-item-label').textContent;
console.log("Gene symbol is: " + gene_symbol);
console.log("Selected genes is:");
console.log(selected_genes);

if (selected_genes.includes(gene_symbol)) {
console.log("Removing gene from list");
selected_genes = selected_genes.filter((gene) => gene !== gene_symbol);
} else {
console.log("Adding gene to list");
selected_genes.push(gene_symbol);
}

console.log("Selected genes is now:");
console.log(selected_genes);

row_div.classList.toggle('is-selected');
row_div.querySelector('i.toggler').classList.toggle('mdi-plus');
row_div.querySelector('i.toggler').classList.toggle('mdi-minus');
}
});

// Add a click listener to the dropdown-gene-list-cancel button
document.querySelector('#dropdown-gene-list-cancel').addEventListener('click', (event) => {
// clear gene lists and gene list areas
document.querySelector('#dropdown-content-gene-lists').innerHTML = '';
document.querySelector('#dropdown-content-genes').innerHTML = '';

// reset the label container
document.querySelector('#gene-select-dropdown-dynamic-selections').innerHTML = '';

const categorySelectors = document.querySelectorAll('#dropdown-content-gene-list-category .ul-li');
categorySelectors.forEach((element) => {
element.classList.remove('is-selected');
element.classList.add('is-clickable');
});

// clear the genes-manually-entered input element
document.querySelector('#genes-manually-entered').value = '';
document.querySelector('#dropdown-gene-list-search-input').value = '';

// and finally the related gene lists and genes
selected_carts = {};
selected_genes = [];
});

// Minor key strokes after user types more than 2 characters in the dropdown-gene-list-search-input box
document.querySelector('#dropdown-gene-list-search-input').addEventListener('keyup', (event) => {
const search_term = event.target.value;

if (search_term.length <= 2) {return}

const categorySelectors = document.querySelectorAll('#dropdown-content-gene-list-category .ul-li');
categorySelectors.forEach((element) => {
element.classList.remove('is-selected');
element.classList.add('is-clickable');
});

document.querySelector('#dropdown-content-gene-lists').innerHTML = '';
document.querySelector('#dropdown-content-genes').innerHTML = '';
const gene_list_item_template = document.querySelector('#tmpl-gene-list-item');

for (const cart_type in gene_cart_data) {
for (const cart of gene_cart_data[cart_type]) {
if (cart.label.toLowerCase().includes(search_term.toLowerCase())) {
const row = gene_list_item_template.content.cloneNode(true);
row.querySelector('.gene-list-item-label').textContent = cart.label;
row.querySelector('.ul-li').dataset.genes = cart.genes.join(',');
row.querySelector('.ul-li').dataset.shareId = cart.share_id;

if (cart.share_id in selected_carts) {
row.querySelector('i.toggler').classList.remove('mdi-plus');
row.querySelector('i.toggler').classList.add('mdi-minus');
row.querySelector('.ul-li').classList.add('is-selected');
} else {
row.querySelector('i.toggler').classList.remove('mdi-minus');
row.querySelector('i.toggler').classList.add('mdi-plus');
row.querySelector('.ul-li').classList.remove('is-selected');
}

document.querySelector('#dropdown-content-gene-lists').appendChild(row);
}
}
}
});
});

const fetchGeneCartData = async () => {
try {
gene_cart_data = await apiCallsMixin.fetchGeneCarts('unweighted-list');
console.log(gene_cart_data);

document.querySelector('#dropdown-gene-lists').classList.remove('is-loading');
document.querySelector('#dropdown-gene-lists').classList.remove('is-disabled');

// Build the gene cart label index for ease of use
for (const cart_type in gene_cart_data) {
for (const cart of gene_cart_data[cart_type]) {
gene_cart_label_index[cart.share_id] = cart.label;
}
}

} catch (error) {
console.error(error);
}
Expand Down Expand Up @@ -134,46 +200,35 @@ const setActiveGeneCart = (cart_row, mode) => {
// if adding or removing, update the inventory
if (mode === 'add') {
selected_carts[cart_row.dataset.shareId] = genes;
selected_genes = [...new Set([...selected_genes, ...genes])];
} else if (mode === 'remove') {
delete selected_carts[cart_row.dataset.shareId];
selected_genes = selected_genes.filter((gene) => !genes.includes(gene));
}

// now handle the coloring, icons and selection box based on the mode
if (mode === 'add') {
cart_row.querySelector('i.toggler').classList.remove('mdi-plus');
cart_row.querySelector('i.toggler').classList.add('mdi-minus');
cart_row.querySelector('i.toggler').classList.add('mdi-minus')
cart_row.querySelector('i.toggler').classList.remove('dropdown-gene-list-item-add');
cart_row.querySelector('i.toggler').classList.add('dropdown-gene-list-item-remove');
cart_row.classList.add('is-selected');

} else if (mode === 'remove') {
cart_row.querySelector('i.toggler').classList.remove('mdi-minus');
cart_row.querySelector('i.toggler').classList.add('mdi-plus');
cart_row.querySelector('i.toggler').classList.add('dropdown-gene-list-item-add');
cart_row.querySelector('i.toggler').classList.remove('dropdown-gene-list-item-remove');
cart_row.classList.remove('is-selected');

} else if (mode === 'view') {
// do nothing
}

// process the gene list panel now
const gene_list = document.querySelector('#dropdown-content-genes');

// build a list of selected genes. this is detailed since multiple selected carts can have the same gene
let currently_selected_genes = [];

for (const cart of Object.values(selected_carts)) {
for (const gene of cart) {
if (!currently_selected_genes.includes(gene)) {
currently_selected_genes.push(gene);
}
}
}

// merge the currently selected genes with the genes in the gene list to create unique list
currently_selected_genes = [...new Set([...currently_selected_genes, ...selected_genes])];

for (const gene_div of document.querySelectorAll('.dropdown-gene-item')) {
let gene_symbol = gene_div.querySelector('.gene-item-label').textContent;

if (currently_selected_genes.includes(gene_symbol)) {
if (selected_genes.includes(gene_symbol)) {
gene_div.classList.add('is-selected');
gene_div.querySelector('i.toggler').classList.remove('mdi-plus');
gene_div.querySelector('i.toggler').classList.add('mdi-minus');
Expand All @@ -183,11 +238,15 @@ const setActiveGeneCart = (cart_row, mode) => {
gene_div.querySelector('i.toggler').classList.add('mdi-plus');
}
}

// update the panel of selected items
updateGeneListSelectionPanel();
}

const setActiveGeneCartCategory = (category) => {
// clear the gene list
document.querySelector('#dropdown-content-genes').innerHTML = '';
document.querySelector('#dropdown-gene-list-search-input').value = '';

const gene_list_item_template = document.querySelector('#tmpl-gene-list-item');
let data = null;
Expand Down Expand Up @@ -228,6 +287,17 @@ const setActiveGeneCartCategory = (category) => {
}
}

const updateGeneListSelectionPanel = () => {
selection_box = document.querySelector('#gene-select-dropdown-dynamic-selections');

// first empty it out, then populate it
selection_box.innerHTML = '';

for (const cart_share_id in selected_carts) {
selection_box.innerHTML += `<span class="tag is-info is-light is-small m-1">${gene_cart_label_index[cart_share_id]}</span>`;
}
}

const handlePageSpecificLoginUIUpdates = async (event) => {
if (CURRENT_USER.session_id) {
populateUserHistoryTable();
Expand Down

0 comments on commit 8160f0a

Please sign in to comment.