From 9a47c2ec2c4202d2c5784e8ee98d9ce1387d3a68 Mon Sep 17 00:00:00 2001
From: DominikDoom <rehdominik@gmail.com>
Date: Mon, 5 Aug 2024 11:39:38 +0200
Subject: [PATCH] Mouse hover can now trigger selection event for extra network
 previews Closes #292

---
 javascript/tagAutocomplete.js | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/javascript/tagAutocomplete.js b/javascript/tagAutocomplete.js
index ec5c754..1f3ab40 100644
--- a/javascript/tagAutocomplete.js
+++ b/javascript/tagAutocomplete.js
@@ -819,7 +819,7 @@ function addResultsToList(textArea, results, tagword, resetList) {
         // Check if it's a negative prompt
         let isNegative = textAreaId.includes("n");
 
-        // Add listener
+        // Add click listener
         li.addEventListener("click", (e) => {
             if (e.ctrlKey || e.metaKey) {
                 resetUseCount(result.text, result.type, !isNegative, isNegative);
@@ -828,6 +828,30 @@ function addResultsToList(textArea, results, tagword, resetList) {
                 insertTextAtCursor(textArea, result, tagword);
             }
         });
+        // Add delayed hover listener for extra network previews
+        if (TAC_CFG.showExtraNetworkPreviews && [ResultType.embedding, ResultType.hypernetwork, ResultType.lora, ResultType.lyco].includes(result.type)) {
+            li.addEventListener("mouseover", async () => {
+                const me = this;
+                let hoverTimeout;
+
+                hoverTimeout = setTimeout(async () => {
+                    // If the tag we hover over is already selected, do nothing
+                    if (selectedTag && selectedTag === i) return;
+
+                    oldSelectedTag = selectedTag;
+                    selectedTag = i;
+
+                    // Update selection without scrolling to the item (since we would
+                    // immediately trigger the next scroll as the items move under the cursor)
+                    updateSelectionStyle(textArea, selectedTag, oldSelectedTag, false);
+                }, 400);
+                me.addEventListener("mouseout", () => {
+                    clearTimeout(hoverTimeout);
+                    //resultDiv.querySelector(".sideInfo").style.display = "none";
+                });
+            });
+        }
+
         // Add element to list
         resultsList.appendChild(li);
     }
@@ -840,7 +864,7 @@ function addResultsToList(textArea, results, tagword, resetList) {
     }
 }
 
-async function updateSelectionStyle(textArea, newIndex, oldIndex) {
+async function updateSelectionStyle(textArea, newIndex, oldIndex, scroll = true) {
     let textAreaId = getTextAreaIdentifier(textArea);
     let resultDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
     let resultsList = resultDiv.querySelector('ul');
@@ -856,7 +880,7 @@ async function updateSelectionStyle(textArea, newIndex, oldIndex) {
         selected.classList.add('selected');
 
          // Set scrolltop to selected item
-        resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
+       if (scroll) resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
     }
 
     // Show preview if enabled and the selected type supports it