diff --git a/js/ui.js b/js/ui.js index d2ca7efd..e50bb68f 100644 --- a/js/ui.js +++ b/js/ui.js @@ -34,7 +34,7 @@ let completeDiv = $('.complete'); const resultTable = $('#resultTableBody') const modalTable = $('#modalBody'); const feedbackTable = $('#feedbackModalBody'); -let predictions = {}, correctedSpecies, speciesListItems, action, clickedNode, clickedIndex; +let predictions = {}, correctedSpecies, speciesListItems, action, clickedNode, clickedIndex, speciesName; let currentBuffer, bufferBegin = 0, windowLength = 20; // seconds let workerLoaded = false; @@ -1092,15 +1092,38 @@ ipcRenderer.on('prediction-done', async (event, arg) => { let summaryHTML = ` + `; for (const [key, value] of Object.entries(summarySorted)) { - summaryHTML += ``; + summaryHTML += ` + + `; } summaryHTML += '
Filter Species Count
${key} ${value}
filter_alt${key} ${value}
'; modalTable.append(summaryHTML); + + $(document).on('click', '.speciesFilter', function (e) { + const speciesName = document.querySelectorAll('.cname'); + if (e.target.classList.contains('text-success')) { + e.target.classList.remove('text-success') + speciesName.forEach(function(el){ + el.parentNode.classList.remove('d-none') + }) + } else { + $('.speciesFilter').removeClass('text-success'); + e.target.classList.add('text-success'); + speciesName.forEach(function (el) { + el.parentNode.classList.remove('d-none') + if (el.innerText !== e.target.id) { + el.parentNode.classList.add('d-none') + } + }); + } + e.stopImmediatePropagation(); + }); }); ipcRenderer.on('prediction-ongoing', async (event, arg) => { @@ -1138,7 +1161,7 @@ ipcRenderer.on('prediction-ongoing', async (event, arg) => { tr += `${index}`; tr += "expand_more"; tr += "" + result.timestamp + ""; - tr += "" + result.cname + ""; + tr += "" + result.cname + ""; tr += "" + result.sname + ""; tr += "" + iconizeScore(result.score) + ""; tr += "play_circle_filled";