Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add keyword search to filter example queries #83

Merged
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
enhancement: focus input on dropdown
  • Loading branch information
IoannisNezis committed Mar 27, 2024
commit 711395d8452296b840a8c8381c89d3ea2ec79e01
7 changes: 6 additions & 1 deletion backend/static/js/keywordSearch.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
// Set focus on input when examples dropdown is clicked
$('#exampleList').parent().on('shown.bs.dropdown', function () {
$("#exampleKeywordSearch").focus();
})

// this function removes the highlight
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A minor comment: Our comment style is normal sentences (capitalized and with a full stop). I know that a lot of the qlever-ui does not follow this rule yet. That's becase it's old. But nor reason not to stick to this for all new code.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, good to know!
I generated some docstrings with chatGPT.
Do the new comments satisfy the comment style?

/**
 * Removes highlighting from the input string by replacing all occurrences of
 * <span> elements with the class "keyword-search-highlight" with their inner content.
 *
 * @param {string} input_str - The input string possibly containing highlighted spans.
 * @returns {string} - The input string with highlighting removed.
 */

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use ordinary // ... comments with full sentences. When referring to variable or class names in a comment, we put it in .... See the code on https://github.com/ad-freiburg/qlever for many examples of this (it's also not 100% consistent there, but 90% of the comments follow this convention).

function unHighlight(input_str){
return input_str.replaceAll(/\<span class\=\"keyword-search-highlight\"\>(.*?)\<\/span\>/gi, "$1");
@@ -45,7 +50,7 @@ function filterExamples(event) {
.split(' ')
.filter((keyword) => keyword !== '');
let hits = 0;
const exampleItems = $("ul#example-list .example-name").each(function(idx) {
const exampleItems = $("ul#exampleList .example-name").each(function(idx) {
const exampleText = $(this).text().trim();
if (keywords.every((keyword) => exampleText.toLowerCase().includes(keyword))){
$(this).parent().parent().show();
4 changes: 2 additions & 2 deletions backend/templates/index.html
Original file line number Diff line number Diff line change
@@ -201,9 +201,9 @@ <h4 style="margin-top: 0px;">QLever UI Shortcuts:</h4>
<i class="glyphicon glyphicon-align-left"></i> Examples
<span class="caret"></span>
</button>
<ul id="example-list" class="dropdown-menu">
<ul id="exampleList" class="dropdown-menu" >
<div style="padding: 10px 20px;">
<input id="example-keyword-search" oninput="filterExamplesDebounced(event)" type="text" placeholder="search for keywords" style="width: 100%"> </input>
<input id="exampleKeywordSearch" oninput="filterExamplesDebounced(event)" type="text" placeholder="search for keywords" style="width: 100%"> </input>
</div>
<li class="divider"></li>
{% for example in examples %}
2 changes: 1 addition & 1 deletion backend/templates/partials/head.html
Original file line number Diff line number Diff line change
@@ -76,7 +76,7 @@
<script src="{% static "js/raphael.js" %}"></script>
<script src="{% static "js/treant.js" %}"></script>
<script src="{% static "js/qleverUI.js" %}"></script>
<script src="{% static "js/keywordSearch.js" %}"></script>
<script src="{% static "js/keywordSearch.js" %}" defer></script>

<!-- CodeMirror and it's modules and language mode -->
<script src="{% static "js/codemirror/codemirror.js" %}"></script>