|
"use strict";const formOptions=document.querySelector("#options-form-compare");let compareBtn=document.querySelector("#compare-btn"),metricsDashboardContainer=document.querySelector("#metrics-dashboard-container"),vtContainer=document.querySelector("#main-vt-container");const inputExactMatch=document.querySelector("#exact-match"),inputInsert=document.querySelector("#insertion"),inputDelSubts=document.querySelector("#delSubts");function showHideSpinner(){let e=document.querySelector("#spinner-compare");return"none"===e.style.display?(e.style.display="",document.querySelector("#message-compare-btn").textContent=" Release the Kraken...! 🐙",void compareBtn.setAttribute("disabled","true")):(e.style.display="none",document.querySelector("#message-compare-btn").textContent=" Compare",void compareBtn.removeAttribute("disabled"))}function getTextAreaValue(){return[document.querySelector("#reference").value,document.querySelector("#prediction").value]}function serializeFormData(e,t){let n=formOptions.getElementsByTagName("input"),r={reference:e,prediction:t,preprocessingOpts:"",vtOpt:0};return Object.values(n).forEach(e=>{e.checked&&("optVT"!==e.name?r.preprocessingOpts+=e.value:r.vtOpt=1)}),r}function tabulate(e,t){let n=d3.select("#table-result-container").append("table").attr("class","dataframe data table table-hover table-bordered"),r=n.append("thead"),o=n.append("tbody");r.append("tr").selectAll("th").data(e).enter().append("th").text(function(e){return e}),o.selectAll("tr").data(t).enter().append("tr").selectAll("td").data(function(e,t){return e}).enter().append("td").html(function(e){return"string"==typeof e&&"Ø"!==e&&(e="<b>"+e+"</b>"),e})}function populateVersusText(e,t,n){[{reference:e},{comparaison:t},{prediction:n}].forEach(e=>{document.querySelector(`#vt-${Object.keys(e)[0]}`).innerHTML=Object.values(e)[0].join("")})}function versusTextSelector(){[inputExactMatch,inputInsert,inputDelSubts].forEach(e=>{e.addEventListener("click",function(e){document.querySelectorAll("."+e.target.id).forEach(t=>{e.target.checked?t.classList.remove("clear"):t.classList.add("clear")})})})}function fileJSLoader(e,t){try{document.querySelector("#"+t).remove()}catch(e){}let n=document.createElement("script");n.id="dynamic-vt-script",n.type="text/javascript",n.src="static/"+e,document.getElementById("head").appendChild(n)}function sendFormToResults(){let e=getTextAreaValue(),t=e[0],n=e[1];if(""!==t&&""!==n){metricsDashboardContainer.style.display="none",vtContainer.style.display="none",showHideSpinner();try{document.querySelector(".dataframe").remove()}catch(e){}fetch("/compute_results",{method:"POST",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify(serializeFormData(t,n))}).then(e=>e.json()).then(function(e){tabulate(e.columns,e.scores),metricsDashboardContainer.style.display="",0!==e.comparaison.length?(populateVersusText(e.reference,e.comparaison,e.prediction),vtContainer.style.display="",versusTextSelector(),fileJSLoader("js/dynamicVT.min.js","dynamic-vt-script")):vtContainer.style.display="none",showHideSpinner("hide")}).catch(function(){showHideSpinner("hide")})}}compareBtn.addEventListener("click",function(){sendFormToResults()}); |
