Skip to content

Commit

Permalink
Fix for issue #4, added mousedown event to biomodels search box
Browse files Browse the repository at this point in the history 
Added xmlDownloadInput.addEventListener("mousedown") to BioModels search box to display list of models. Previously the list existed but was not displayed when user did a mouse down 'highlight' and then types a replacement search. Also cleaned up/removed unused code.
  • Loading branch information
@NSR-Physiome
NSR-Physiome committed Apr 24, 2024
1 parent 25e3944 commit a9f14ed
Showing 1 changed file with 26 additions and 97 deletions.
123 changes: 26 additions & 97 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ let { log } = console;

let models = [];
//const maxRec = 15; currently Not used
const biomodelsInfoURL = "/makesbml/buildBiomodelsSearch/cached_biomodels.json";
const makeSBMLversion = "MakeSBML version 1.4. ";
const biomodelsInfoURL = "./buildBiomodelsSearch/cached_biomodels.json";
const makeSBMLversion = "MakeSBML version 1.5. ";
const makeSBMLinfo = makeSBMLversion + "\nCopyright 2023-24, Bartholomew Jardine and Herbert M. Sauro,\nUniversity of Washington, USA.\nSpecial thanks to University of Washington student Tracy Chan for her assistance with this software.\n\nThis project was funded by NIH/NIGMS (R01GM123032 and P41EB023912).";

var antCode;
Expand Down Expand Up @@ -74,9 +74,17 @@ window.onload = function() {

xmlDownloadInput.addEventListener("click", (e) => {
e.preventDefault();
xmlRecList1.style.display = "block";
xmlRecList1.style.display = "block"; // allow list of models to be displayed below input box.
e.stopPropagation();
});

xmlDownloadInput.addEventListener("mousedown", (event) => {
xmlRecList1.style.display = "block";
});

/*xmlDownloadInput.addEventListener("mouseup", (event) => {
xmlRecList1Loader.classList.remove("showLoader");
}); */

function delay(fn, ms) { // use to delay event from triggering.
let timer = 0
Expand All @@ -92,8 +100,8 @@ window.onload = function() {
xmlRecList1.innerHTML = "";
return;
}
log("processkeySearch(): ", e );
let recommends = await getModelIdRecommendNew(searchText);
xmlRecList1Loader.classList.add("showLoader");
let recommends = await getBiomodelsInfo(searchText);
const handleSelection = (e) => {
e.preventDefault();
const text = e.target.innerText;
Expand All @@ -119,18 +127,17 @@ window.onload = function() {

};

// Do not start processing user search until at least 1000 ms has elapsed.
// Do not start processing user search until at least 500 ms has elapsed.
// We want to reduce the number of searches and speed up populating result list.
xmlDownloadInput.addEventListener("keyup", async (e) => {
delay(processkeySearch(e), 1000);});

xmlDownloadInput.addEventListener("keyup", async (e) => {
delay(processkeySearch(e), 500);});
saveSBMLBtn.addEventListener("click", (_) => saveCode("sbml"));
copySBMLBtn.addEventListener("click", (_) => copyToClipboard("sbml"));
aboutBtn.addEventListener("click", (_) => showAbout());

document.body.onclick = (e) => {
xmlRecList1.style.display = "none";
};
//document.body.onclick = (e) => {
//xmlRecList1.style.display = "none"; // deletes/clears next dropdown list if using mouse
//};


inputFile.addEventListener("change", function() {
Expand Down Expand Up @@ -234,7 +241,8 @@ async function processFile(fileStr) {
procSBMLBtn.disabled = true;
sbmlTextArea.value = "[SBML code here.]";
await processAntimony();
xmlRecList1Loader.classList.remove("showLoader");// added in inputFile.addEventListener("change" )
xmlRecList1Loader.classList.remove("showLoader");// Remove drop-down list of biomodels
// added in inputFile.addEventListener("change" )
} else if (loadSBMLString(ptrFileStr) > 0) {
sbmlTextArea.value = fileStr;
procAntimonyBtn.disabled = true;
Expand Down Expand Up @@ -297,117 +305,38 @@ function saveCode(codeType) {

}
}
function isValidUrl(str) {
const pattern = new RegExp(
"^([a-zA-Z]+:\\/\\/)?" + // protocol
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
"((\\d{1,3}\\.){3}\\d{1,3}))" + // OR IP (v4) address
"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
"(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
"(\\#[-a-z\\d_]*)?$", // fragment locator
"i"
);
return pattern.test(str);
}

function checkIfInString(searchStr, queryAr, resultAr) {
for( let i=0; i < queryAr.length; i++) {
if(searchStr.toLowerCase().includes(queryAr[i].toLowerCase())) {
resultAr[i] = true; }
}
return resultAr;
}

async function getModelList(newQuery, jsonData) { // Get list of biomodels that match user query
let queries;
if(newQuery != null) {
queries = newQuery.split(" "); }
else { newQuery = ''; queries = ''; }
let found = []; // keep track if queries are found.

const results = new Map();
for (var model in jsonData) {
for(let i =0; i < queries.length; i++) {
found[i] = false; }
for ( var key in jsonData[model]) {
if (key == 'name') {
// console.log(jsonData[model][key]);
found = checkIfInString(jsonData[model][key], queries, found);
}
else if (key == 'description') {
found = checkIfInString(jsonData[model][key], queries, found);
}
else if (key == 'publication') {
for (var key2 in jsonData[model][key]) {
if(key2 == 'authors') {
for(var author in jsonData[model][key][key2]) {
// console.log(jsonData[model][key][key2][author]['name']);
found = checkIfInString(jsonData[model][key][key2][author]['name'], queries, found);
}
}
// now search 'title':
if(key2 == 'title') {
found = checkIfInString(jsonData[model][key][key2], queries, found);
}
}
}
}
let save = 0;
for( let i =0; i < found.length ; i++) {
if(found[i]) { save +=1; }
}
if (save == found.length){ results.set( model, jsonData[model]['name'] );}
}
return results;
}


// loads biomodels cache and returns models that match query
async function getBiomodelsInfo(query) {
console.log('In getBiomodelsInfo()');
let models;
xmlRecList1Loader.classList.remove("showLoader");
xmlRecList1Loader.classList.remove("showLoader"); // Remove drop-down list of biomodels ??
return searchModels(query) //fetch(biomodelsInfoURL)
}

// Get URL of biomodel and then get model, calls getBiomodel.js ->getModel()
async function getModelFile(modelId) {
clearPreviousLoads;
//console.log('importXML: ', modelId);
await getModel(modelId)
.then((response) => {
// console.log(response);
const filename = response[0];
const sbmlStr = response[1];
sbmlTextArea.value = response[1];
processSBML(); // generate antimony version
xmlRecList1Loader.classList.remove("showLoader")
xmlRecList1Loader.classList.remove("showLoader") // Remove drop-down list of biomodels
xmlRecList1.style.display = "none"; // Clear drop-down list of biomodels
})
.catch((err) => console.error(err));
}

async function processUserQuery(queryStr) {
let query = queryStr.split(/(\s)/).filter((x) => x.trim().length>0);
//log('Query: ',query, query.length)
let searchQuery = '';
for(let i = 0; i < query.length; i++) {
if(i == query.length - 1) {
searchQuery += query[i];}
else {
searchQuery += query[i] +'%20';}
}
//log(' --> search: ',searchQuery);
return searchQuery;
}

async function getModelIdRecommendNew(query) {
xmlRecList1Loader.classList.add("showLoader")
xmlRecList1Loader.classList.add("showLoader") // Show drop-down list of biomodels
return getBiomodelsInfo(query);
}

async function handleDownloadModel() {
if (xmlDownloadInput.value.trim().length > 1) {
xmlRecList1Loader.classList.add("showLoader")
xmlRecList1Loader.classList.add("showLoader") // Show drop-down list of biomodels
try{
await getModelFile(xmlDownloadInput.value.trim()); // Download SBML and display.
}
Expand Down

0 comments on commit a9f14ed

Please sign in to comment.