From 77c890e0aa8f174dee1c7dbfe4f62e1902f4f16d Mon Sep 17 00:00:00 2001
From: Thong Nguyen <nguyenthacthong@gmail.com>
Date: Fri, 12 Mar 2021 16:10:13 +0100
Subject: [PATCH] Can search query by id/terms when > 20 queries

---
 diffir/templates/template.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/diffir/templates/template.html b/diffir/templates/template.html
index 87e6f22..bd10c44 100644
--- a/diffir/templates/template.html
+++ b/diffir/templates/template.html
@@ -398,7 +398,6 @@ <h6 id="Run2Name" style="text-align: center;"></h6>
 
     function selectQuery() {
       var $select = $('#Queries');
-      $select.selectpicker();
       var query_id = $select.val();
       var query = data.queries.filter(query => query.fields.query_id === query_id);
       mergedWeights = query[0].mergedWeights
@@ -557,7 +556,7 @@ <h6 id="Run2Name" style="text-align: center;"></h6>
         }
       });
       $.each(data.queries, function (_, query) {
-        $('<option>').attr('value', query['fields']['query_id']).attr('data-subtext', query.fields.metric.name+': '+query.fields.metric.value.toFixed(5)).text(query.fields[queryDisplayField]).appendTo($select);
+        $('<option>').attr('value', query['fields']['query_id']).attr("data-tokens", query.fields.query_id + " " + query.fields[queryDisplayField]).attr('data-subtext', query.fields.metric.name+': '+query.fields.metric.value.toFixed(5)).text(query.fields[queryDisplayField]).appendTo($select);
       });
       $select.change(selectQuery).change();
       $(document).on('mouseenter', '.card', onCardEnter);
@@ -589,6 +588,10 @@ <h6 id="Run2Name" style="text-align: center;"></h6>
       });
     });
     $(document).ready(function () {
+      var $select = $('#Queries');
+      if (data.queries.length > 20)
+        $select.attr("data-live-search","true")
+      $select.selectpicker();
       $("#Query").find("tr").slice(2).attr("class", "query_collapse collapse")
       $(".query_collapse").on("shown.bs.collapse", function () {
         text = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-angle-contract" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707zM15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707z"/></svg>';