From 2e8bfa4da0f6aeaa3e882b1bc46831d9dbd281d5 Mon Sep 17 00:00:00 2001
From: John Nduli
Date: Tue, 17 Sep 2024 11:05:21 +0300
Subject: feat: improve animations text in llm search integration

---
 gn2/wqflask/templates/gsearch_gene.html | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

(limited to 'gn2')

diff --git a/gn2/wqflask/templates/gsearch_gene.html b/gn2/wqflask/templates/gsearch_gene.html
index e20977c7..40e18323 100644
--- a/gn2/wqflask/templates/gsearch_gene.html
+++ b/gn2/wqflask/templates/gsearch_gene.html
@@ -18,7 +18,7 @@
 
 
       {% if do_ai_search %}
-      <div class="row" id="ai_result">
+      <div class="row" id="ai_result_info">
         <div class="text-center" id="spinner">
            <i class="fa fa-spinner fa-spin fa-3x"></i>
         </div>
@@ -287,13 +287,14 @@
     {% if do_ai_search %}
     <script type='text/javascript'>
       function ai_content_div(search_term, search_result, search_uri) {
+        let header = search_result.slice(0, 75);
         return `
           <div class="col-sm-6">
             <div class="panel panel-info">
               <div class="panel-heading" role="tab" id="ai_heading">
                 <h4 class="panel-title">
-                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#ai_results" aria-expanded="false" aria-controls="ai_results">
-                    AI Search: ${search_term} (Click for more details)
+                  <a id="panel-title-content" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#ai_results" aria-expanded="false" aria-controls="ai_results">
+                    ${header}... (Click for more details)
                   </a>
                 </h4>
               </div>
@@ -308,6 +309,20 @@
           `
       }
 
+      $('#ai_result_info').on('hidden.bs.collapse', function () {
+        let original_text = $("#panel-title-content").text();
+        let new_text = original_text.replace("(Click to fold)", "(Click for more details)");
+        $("#panel-title-content").text(new_text);
+      })
+
+      $('#ai_result_info').on('shown.bs.collapse', function () {
+        let original_text = $("#panel-title-content").text();
+        let new_text = original_text.replace("(Click for more details)", "(Click to fold)");
+        $("#panel-title-content").text(new_text);
+      })
+
+
+
       $(document).ready( function () {
         $.ajax({url: "gnqna",
           contentType: "application/json",
@@ -317,7 +332,7 @@
           },
           success: function(result) {
             let ai_div = ai_content_div(result.search_term, result.search_result, result.search_url)
-            $("#ai_result").append(ai_div);
+            $("#ai_result_info").append(ai_div);
           },
           complete: function() {
             $("#spinner").hide();
-- 
cgit v1.2.3