From 62375272f3fb510ee9f3b6e448d3c451a37dee1f Mon Sep 17 00:00:00 2001 From: Ioannis Nezis Date: Wed, 6 Mar 2024 18:33:50 +0100 Subject: [PATCH 01/15] added keyword search to filter example querys --- backend/static/css/style.css | 4 +++ backend/static/js/qleverUI.js | 60 +++++++++++++++++++++++++++++++++++ backend/templates/index.html | 11 +++++-- 3 files changed, 73 insertions(+), 2 deletions(-) diff --git a/backend/static/css/style.css b/backend/static/css/style.css index 365319a3..07d844e0 100644 --- a/backend/static/css/style.css +++ b/backend/static/css/style.css @@ -61,6 +61,10 @@ Custom Elements .tooltip .tooltip-inner { background-color: #82B36F; max-width: 600px; word-wrap: break-word; } .tooltip .tooltip-arrow { border-top-color: #82B36F !important; } +.highlight { + text-decoration: underline; +} + .table > tbody > tr > td:first-child { color: #d3d3d3; } th { color: #82B36F; white-space: nowrap; } diff --git a/backend/static/js/qleverUI.js b/backend/static/js/qleverUI.js index 1d44ac86..6d552943 100755 --- a/backend/static/js/qleverUI.js +++ b/backend/static/js/qleverUI.js @@ -867,3 +867,63 @@ function renderRuntimeInformationToDom(entry = undefined) { $('#lastQueries').html(queryHistoryList); } } + +function unHighlight(input_str){ + return input_str.replaceAll(/\(.*?)\<\/span\>/gi, "$1"); +} + +function highlightWords(input_str, words) { + let return_str = unHighlight(input_str.toLowerCase()); + // find matching sections + let matching_sections = []; + for (word of words){ + let startIndex = 0; + while ((index = return_str.indexOf(word, startIndex)) > -1){ + matching_sections.push([index, index + word.length]); + startIndex = index + word.length; + } + } + if (matching_sections.length === 0){ + return input_str; + } + // consolidate overlapping sections + matching_sections.sort((a,b) => a[0] - b[0]); + matching_sections = matching_sections.reduceRight((accu,elem) => { + const [last, ...rest] = accu; + if (elem[1] >= last[0]){ + return [[elem[0], Math.max(elem[1], last[1])], ...rest] + } + return [elem].concat(accu); + }, [matching_sections[matching_sections.length-1]]); + // replace matching sections with highlighting span + return_str = unHighlight(input_str); + matching_sections.reverse().forEach(([from, to]) => { + return_str = `${return_str.substring(0, from)}${return_str.substring(from,to)}${return_str.substring(to)}`; + }); + return return_str; +} + +function filterExamples(event) { + const keywords = event.target.value + .toLowerCase() + .trim() + .split(' ') + .filter((keyword) => keyword !== ''); + let hits = 0; + const exampleItems = $("ul#example-list .example-name").each(function(idx) { + const exampleText = $(this).text().trim(); + if (keywords.every((keyword) => exampleText.toLowerCase().includes(keyword))){ + $(this).parent().parent().show(); + $(this).html(highlightWords(exampleText, keywords)); + hits++; + }else { + $(this).parent().parent().hide(); + } + }); + if (hits === 0){ + $("#empty-examples-excuse").show(); + } + else { + $("#empty-examples-excuse").hide(); + } +} diff --git a/backend/templates/index.html b/backend/templates/index.html index 38078644..316afcce 100644 --- a/backend/templates/index.html +++ b/backend/templates/index.html @@ -201,7 +201,11 @@

QLever UI Shortcuts:

Examples -