Add search cluster sorting mode; implement dropdown for selecting sorting criteria in heatmap functionality.

index.html

@@ -69,6 +69,15 @@
     <button id="naming-btn">Generate Name</button>
     <button id="clusterplot-btn">Cluster Plot</button>
 
+    <!-- Add this dropdown for search cluster sorting mode -->
+    <div style="margin-bottom: 10px;">
+      <label for="search-sort-mode">Search Cluster Sort Mode:</label>
+      <select id="search-sort-mode">
+        <option value="group">By Group Similarity</option>
+        <option value="line">By Max Search Line</option>
+      </select>
+    </div>
+
     <button id="heatmap-btn">Similarity</button>
     <div id="progress-bar">
         <div id="progress-bar-inner"></div>

main.js

@@ -17,6 +17,10 @@ document.getElementById("heatmap-btn").onclick = async () => {
     progressBarInner.style.width = "0%";
 
     const text = document.getElementById("input").value;
+    // Get search sort mode from dropdown
+    const searchSortMode = document.getElementById("search-sort-mode")?.value || "group";
+    const search_by_max_search_line = searchSortMode === "line";
+    const search_by_max_search_group = searchSortMode === "group";
 
     // Find the index of the search cluster (case-insensitive)
     const clusterNames = text.split(/\n/)
@@ -66,7 +70,58 @@ document.getElementById("heatmap-btn").onclick = async () => {
     // Reorder text if search cluster is found
     // First group is search then follow by hight sim group
     // in each group order by high sim line
-    if (searchIdx !== -1) {
+    if (searchIdx !== -1 && search_by_max_search_line) {
+        const searchLines = groups[searchIdx]
+            .split("\n")
+            .filter(l => l && !l.startsWith("##"));
+        const searchEmbeds = await getLineEmbeddings(searchLines, task);
+
+        const cleanGroups = groups.map(g =>
+            g.split("\n").filter(l => l && !l.startsWith("##"))
+        );
+        const allLines = cleanGroups.flat();
+        const allEmbeds = await getLineEmbeddings(allLines, task);
+
+        const cosine = (a, b) => {
+            let dot = 0, na = 0, nb = 0;
+            for (let i = 0; i < a.length; i++) {
+                dot += a[i] * b[i];
+                na += a[i] * a[i];
+                nb += b[i] * b[i];
+            }
+            return na && nb ? dot / Math.sqrt(na * nb) : 0;
+        };
+
+        const score = e =>
+            Math.max(...searchEmbeds.map(se => cosine(se, e)));
+
+        const idxByGroup = [];
+        let p = 0;
+        for (const g of cleanGroups) {
+            idxByGroup.push(Array.from({ length: g.length }, (_, i) => p + i));
+            p += g.length;
+        }
+
+        const sorted = order.map(g =>
+            idxByGroup[g]
+                .map(i => ({ t: allLines[i], s: score(allEmbeds[i]) }))
+                .sort((a, b) => b.s - a.s)
+                .map(o => o.t)
+        );
+
+        const finalText = order
+            .map((gIdx, i) => {
+                const header =
+                    clusterNames?.length === n ? clusterNames[gIdx] : `Group ${i + 1}`;
+                return `## ${header}\n${sorted[i].join("\n")}`;
+            })
+            .join("\n\n\n");
+
+        document.getElementById("input").value = finalText;
+    }
+
+
+    if (searchIdx !== -1 && search_by_max_search_group) {
         const refEmbed = groupEmbeddings[searchIdx];
 
         const cleanGroups = groups.map(g =>