add share query button

index.html

@@ -162,6 +162,11 @@
       const MAX_RESULTS = 100;
       let currentPage = 1;
 
+      // Add these constants near the top with other configurations
+      const URL_PARAMS = new URLSearchParams(window.location.search);
+      const INITIAL_SEARCH = URL_PARAMS.get("q");
+      const INITIAL_SIMILAR = URL_PARAMS.get("similar");
+
       // Initialize Lucide icons
       lucide.createIcons();
 
@@ -177,6 +182,13 @@
 
         document.getElementById(`${tabId}Content`).classList.remove("hidden");
         document.getElementById(`${tabId}Tab`).classList.add("active");
+
+        // Clear URL parameters when switching tabs
+        if (tabId === "search") {
+          updateURL({ similar: null });
+        } else if (tabId === "similar") {
+          updateURL({ q: null });
+        }
       }
 
       // Create result card
@@ -205,6 +217,14 @@
                           <span class="bg-blue-50 px-2 py-1 rounded text-sm">
                               ${(result.similarity * 100).toFixed(1)}% match
                           </span>
+                          <button 
+                              onclick="shareResult('${result.dataset_id}')"
+                              class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
+                              title="Share link to these search results"
+                          >
+                              <i data-lucide="share-2"></i>
+                              Share Results
+                          </button>
                           <button 
                               onclick="findSimilarFromResult('${
                                 result.dataset_id
@@ -288,16 +308,33 @@
         }
       }
 
-      // Search datasets
+      // Add this function to update the URL
+      function updateURL(params) {
+        const newURL = new URL(window.location);
+        Object.entries(params).forEach(([key, value]) => {
+          if (value) {
+            newURL.searchParams.set(key, value);
+          } else {
+            newURL.searchParams.delete(key);
+          }
+        });
+        window.history.pushState({}, "", newURL);
+      }
+
+      // Modify the searchDatasets function
       const searchDatasets = _.debounce(async (query, page = 1) => {
         if (query.length < MIN_SEARCH_LENGTH) {
           document.getElementById("resultsContainer").innerHTML = "";
+          updateURL({ q: null, similar: null }); // Clear URL params
           return;
         }
 
         document.getElementById("searchLoader").classList.remove("hidden");
         document.getElementById("errorMessage").classList.add("hidden");
 
+        // Update URL with search query
+        updateURL({ q: query, similar: null });
+
         try {
           const response = await fetch(
             `${API_URL}/search/datasets?query=${encodeURIComponent(query)}&k=${
@@ -382,11 +419,14 @@
         findSimilarDatasets();
       }
 
-      // Find similar datasets
+      // Modify the findSimilarDatasets function
       async function findSimilarDatasets(page = 1) {
         const datasetId = document.getElementById("datasetInput").value;
         if (!datasetId) return;
 
+        // Update URL with similar dataset ID
+        updateURL({ similar: datasetId, q: null });
+
         const similarLoader = document.getElementById("similarLoader");
         if (similarLoader) {
           similarLoader.classList.remove("hidden");
@@ -418,34 +458,64 @@
         console.log("Displaying results:", results);
         if (results && results.length > 0) {
           container.innerHTML = `
-            <div class="flex justify-between items-center">
+            <div class="flex justify-between items-center mb-4">
               <h2 class="text-lg font-semibold">Results</h2>
-              <span class="text-sm text-gray-500">Found ${
-                results.length
-              } results</span>
+              <div class="flex items-center gap-4">
+                <span class="text-sm text-gray-500">Found ${
+                  results.length
+                } results</span>
+                <button 
+                  onclick="shareResults()"
+                  class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
+                  title="Share link to these search results"
+                >
+                  <i data-lucide="share-2"></i>
+                  Share Results
+                </button>
+              </div>
             </div>
             ${results.map((result) => createResultCard(result)).join("")}
             ${
               results.length >= RESULTS_PER_PAGE * page &&
               RESULTS_PER_PAGE * (page + 1) <= MAX_RESULTS
-                ? `<button
-                    onclick="loadMore()"
-                    class="w-full mt-4 px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors flex items-center gap-2 justify-center"
-                  >
-                    <i data-lucide="more-horizontal"></i>
-                    Load More Results
-                  </button>`
+                ? `<div class="mt-4 flex items-center justify-between">
+                    <button
+                      onclick="loadMore()"
+                      class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors flex items-center gap-2"
+                    >
+                      <i data-lucide="more-horizontal"></i>
+                      Load More Results
+                    </button>
+                    <button 
+                      onclick="shareResults()"
+                      class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
+                      title="Share link to these search results"
+                    >
+                      <i data-lucide="share-2"></i>
+                      Share Results
+                    </button>
+                  </div>`
                 : results.length >= MAX_RESULTS
                 ? `<div class="text-center mt-4 p-6 bg-blue-50 rounded-lg">
-                      <p class="text-gray-700 mb-3">You've reached the end of our dataset journey! (${MAX_RESULTS} results)</p>
-                      <p class="text-gray-600 mb-4">Can't find what you're looking for? Why not create and share your own dataset?</p>
+                    <p class="text-gray-700 mb-3">You've reached the end of our dataset journey! (${MAX_RESULTS} results)</p>
+                    <p class="text-gray-600 mb-4">Can't find what you're looking for? Why not create and share your own dataset?</p>
+                    <div class="flex items-center justify-center gap-4">
                       <a href="https://huggingface.co/docs/datasets/upload_dataset" 
                          target="_blank" 
                          class="inline-flex items-center gap-2 text-blue-500 hover:text-blue-700">
                         <i data-lucide="external-link"></i>
                         Learn how to share your dataset on Hugging Face
                       </a>
-                    </div>`
+                      <button 
+                        onclick="shareResults()"
+                        class="flex items-center gap-1 text-blue-500 hover:text-blue-700"
+                        title="Share link to these search results"
+                      >
+                        <i data-lucide="share-2"></i>
+                        Share Results
+                      </button>
+                    </div>
+                  </div>`
                 : ""
             }
           `;
@@ -528,8 +598,52 @@
           : "rotate(90deg)";
       }
 
+      // Update the share function name and remove the datasetId parameter
+      async function shareResults() {
+        const activeTab = document.querySelector(".tab-trigger.active").id;
+        const currentURL = new URL(window.location);
+
+        // Update URL based on active tab
+        if (activeTab === "searchTab") {
+          const searchQuery = document.getElementById("searchInput").value;
+          currentURL.searchParams.set("q", searchQuery);
+          currentURL.searchParams.delete("similar");
+        } else {
+          const datasetId = document.getElementById("datasetInput").value;
+          currentURL.searchParams.set("similar", datasetId);
+          currentURL.searchParams.delete("q");
+        }
+
+        try {
+          if (navigator.share) {
+            // Use native sharing on supported devices
+            await navigator.share({
+              title: "Hub Semantic Search",
+              text: "Check out these dataset search results",
+              url: currentURL.toString(),
+            });
+          } else {
+            // Fallback to clipboard copy
+            await navigator.clipboard.writeText(currentURL.toString());
+
+            // Show temporary success message
+            const button = event.target.closest("button");
+            const originalHTML = button.innerHTML;
+            button.innerHTML = '<i data-lucide="check"></i> Copied!';
+            lucide.createIcons();
+
+            setTimeout(() => {
+              button.innerHTML = originalHTML;
+              lucide.createIcons();
+            }, 2000);
+          }
+        } catch (error) {
+          console.error("Error sharing:", error);
+        }
+      }
+
       // Update the event listeners section
-      document.addEventListener("DOMContentLoaded", () => {
+      document.addEventListener("DOMContentLoaded", async () => {
         const datasetInput = document.getElementById("datasetInput");
         let programmaticFocus = false;
 
@@ -563,6 +677,17 @@
           }
           programmaticFocus = false;
         });
+
+        // Handle initial URL parameters
+        if (INITIAL_SEARCH) {
+          switchTab("search");
+          document.getElementById("searchInput").value = INITIAL_SEARCH;
+          await searchDatasets(INITIAL_SEARCH);
+        } else if (INITIAL_SIMILAR) {
+          switchTab("similar");
+          document.getElementById("datasetInput").value = INITIAL_SIMILAR;
+          await findSimilarDatasets();
+        }
       });
     </script>
   </body>