Refactor dataset search and sorting functionality

index.html

@@ -90,10 +90,23 @@
           <div
             class="card bg-white p-8 rounded-xl shadow-sm border border-gray-100"
           >
-            <p class="text-gray-600 mb-4">
-              Enter keywords to search through dataset descriptions. The search
-              will automatically update as you type.
-            </p>
+            <div
+              class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between mb-4"
+            >
+              <p class="text-gray-600">
+                Enter keywords to search through dataset descriptions. The
+                search will automatically update as you type.
+              </p>
+              <select
+                id="searchSortSelect"
+                class="text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
+                onchange="handleSortChange('search')"
+              >
+                <option value="similarity">Sort by relevance</option>
+                <option value="likes">Sort by likes</option>
+                <option value="downloads">Sort by downloads</option>
+              </select>
+            </div>
             <div class="relative">
               <input
                 type="text"
@@ -112,10 +125,23 @@
           <div
             class="card bg-white p-8 rounded-xl shadow-sm border border-gray-100"
           >
-            <p class="text-gray-600 mb-4">
-              Enter a dataset ID to find similar datasets. Popular datasets will
-              appear as you type.
-            </p>
+            <div
+              class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between mb-4"
+            >
+              <p class="text-gray-600">
+                Enter a dataset ID to find similar datasets. Popular datasets
+                will appear as you type.
+              </p>
+              <select
+                id="similarSortSelect"
+                class="text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
+                onchange="handleSortChange('similar')"
+              >
+                <option value="similarity">Sort by relevance</option>
+                <option value="likes">Sort by likes</option>
+                <option value="downloads">Sort by downloads</option>
+              </select>
+            </div>
             <div class="flex gap-3">
               <div class="relative w-full">
                 <input
@@ -167,6 +193,9 @@
       const INITIAL_SEARCH = URL_PARAMS.get("q");
       const INITIAL_SIMILAR = URL_PARAMS.get("similar");
 
+      // Add this variable with other configurations
+      let currentSort = "similarity";
+
       // Initialize Lucide icons
       lucide.createIcons();
 
@@ -457,6 +486,11 @@
         const container = document.getElementById("resultsContainer");
         console.log("Displaying results:", results);
         if (results && results.length > 0) {
+          // Sort results if not using similarity
+          if (currentSort !== "similarity") {
+            results.sort((a, b) => b[currentSort] - a[currentSort]);
+          }
+
           container.innerHTML = `
             <div class="flex justify-between items-center mb-4">
               <h2 class="text-lg font-semibold">Results</h2>
@@ -689,6 +723,26 @@
           await findSimilarDatasets();
         }
       });
+
+      // Modify the handleSortChange function
+      function handleSortChange(tab) {
+        const sortSelect = document.getElementById(`${tab}SortSelect`);
+        currentSort = sortSelect.value;
+
+        // Re-run the current search with new sort
+        const activeTab = document.querySelector(".tab-trigger.active").id;
+        if (activeTab === "searchTab") {
+          const searchQuery = document.getElementById("searchInput").value;
+          if (searchQuery.length >= MIN_SEARCH_LENGTH) {
+            searchDatasets(searchQuery, 1);
+          }
+        } else {
+          const datasetId = document.getElementById("datasetInput").value;
+          if (datasetId) {
+            findSimilarDatasets(1);
+          }
+        }
+      }
     </script>
   </body>
 </html>