Implement event handler functions for heatmap, K-Means, cluster plot, and naming events; refactor main.js to use these handlers.

clusterplot_event.js

@@ -0,0 +1,70 @@
+// Handles cluster plot (UMAP scatter) event
+import { getLineEmbeddings } from './embedding.js';
+import { plotScatter } from './plotting.js';
+
+const task = "Given a textual input sentence, retrieve relevant categories that best describe it.";
+
+export async function handleClusterPlotEvent() {
+    const progressBar = document.getElementById("progress-bar");
+    const progressBarInner = document.getElementById("progress-bar-inner");
+    progressBar.style.display = "block";
+    progressBarInner.style.width = "0%";
+
+    // Recalculate embeddings from current textarea
+    const text = document.getElementById("input").value;
+    // Remove ## lines for embedding
+    const lines = text.split(/\n/).map(x => x.trim()).filter(x => x && !x.startsWith("##"));
+    const embeddings = await getLineEmbeddings(lines, task);
+    const n = embeddings.length;
+    if (n < 2) return;
+
+    // Parse clusters from textarea (split by triple newlines)
+    const groups = text.split(/\n{3,}/);
+    const k = groups.length;
+    // Build labels array: for each line, assign the cluster index it belongs to
+    let labels = [];
+    let lineIdx = 0;
+    for (let c = 0; c < k; ++c) {
+        const groupLines = groups[c].split('\n').map(x => x.trim()).filter(x => x && !x.startsWith('##'));
+        for (let i = 0; i < groupLines.length; ++i) {
+            labels[lineIdx++] = c;
+        }
+    }
+    if (labels.length !== n) return;
+
+    // UMAP projection
+    const { UMAP } = await import('https://cdn.jsdelivr.net/npm/[email protected]/+esm');
+    const nNeighbors = Math.max(1, Math.min(lines.length - 1, 15));
+    const umap = new UMAP({ nComponents: 2, nNeighbors, minDist: 0.2, metric: "cosine" });
+    const proj = umap.fit(embeddings);
+    // Group lines by cluster
+    const clustered = Array.from({ length: k }, () => []);
+    for (let i = 0; i < lines.length; ++i)
+        clustered[labels[i]].push(lines[i]);
+    // Prepare scatter plot traces
+    const colors = ["red", "blue", "green", "orange", "purple", "cyan", "magenta", "yellow", "brown", "black", "lime", "navy", "teal", "olive", "maroon", "pink", "gray", "gold", "aqua", "indigo"];
+    // Try to extract cluster names from textarea headers
+    const clusterNames = groups.map(g => {
+        const m = g.match(/^##\s*(.*)/m);
+        return m ? m[1].trim() : null;
+    });
+    const placeholderNames = clusterNames.map((name, i) => name || `Cluster ${i + 1}`);
+    const traces = Array.from({ length: k }, (_, c) => ({
+        x: [], y: [], text: [],
+        mode: "markers", type: "scatter",
+        name: placeholderNames[c],
+        marker: { color: colors[c % colors.length], size: 12, line: { width: 1, color: "#333" } }
+    }));
+    for (let i = 0; i < lines.length; ++i) {
+        traces[labels[i]].x.push(proj[i][0]);
+        traces[labels[i]].y.push(proj[i][1]);
+        traces[labels[i]].text.push(lines[i]);
+    }
+    plotScatter(traces, k);
+    window.traces = traces;
+    // Optionally update textarea with cluster names as markdown headers
+    document.getElementById("input").value = clustered.map((g, i) =>
+        `## ${placeholderNames[i]}\n${g.join("\n")}`
+    ).join("\n\n\n");
+    progressBarInner.style.width = "100%";
+}

heatmap_event.js

@@ -0,0 +1,164 @@
+// Handles the heatmap event and group similarity logic
+import { getGroupEmbeddings, getLineEmbeddings } from './embedding.js';
+import { plotHeatmap } from './plotting.js';
+
+const task = "Given a textual input sentence, retrieve relevant categories that best describe it.";
+
+export async function handleHeatmapEvent() {
+    const progressBar = document.getElementById("progress-bar");
+    const progressBarInner = document.getElementById("progress-bar-inner");
+    progressBar.style.display = "block";
+    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/)
+        .map(x => x.trim())
+        .filter(x => x && x.startsWith('##'))
+        .map(x => x.replace(/^##\s*/, ''));
+    let searchIdx = clusterNames.findIndex(name => name.toLowerCase().includes('search'));
+
+    const groups = text.split(/\n{3,}/);
+    // Get group embeddings (removes ## lines internally)
+    const groupEmbeddings = await getGroupEmbeddings(groups, task);
+    const n = groupEmbeddings.length;
+    progressBarInner.style.width = "30%";
+    // Cosine similarity matrix
+    const sim = [];
+    for (let i = 0; i < n; i++) {
+        const row = [];
+        for (let j = 0; j < n; j++) {
+            let dot = 0, na = 0, nb = 0;
+            for (let k = 0; k < groupEmbeddings[i].length; k++) {
+                dot += groupEmbeddings[i][k] * groupEmbeddings[j][k];
+                na += groupEmbeddings[i][k] ** 2;
+                nb += groupEmbeddings[j][k] ** 2;
+            }
+            row.push(dot / Math.sqrt(na * nb));
+        }
+        sim.push(row);
+    }
+    progressBarInner.style.width = "60%";
+    // Reorder clusters if search cluster is found
+    let order = Array.from({ length: n }, (_, i) => i);
+    if (searchIdx !== -1) {
+        // Compute similarity to search cluster
+        const simToSearch = sim[searchIdx].map((v, i) => ({ idx: i, sim: v }));
+        // Exclude searchIdx from sorting
+        const others = simToSearch.filter(x => x.idx !== searchIdx);
+        others.sort((a, b) => b.sim - a.sim); // descending similarity
+        order = [searchIdx, ...others.map(x => x.idx)];
+    }
+    // Reorder sim matrix and clusterNames
+    const simOrdered = order.map(i => order.map(j => sim[i][j]));
+    const xLabels = (clusterNames && clusterNames.length === n)
+        ? order.map(i => clusterNames[i])
+        : order.map((_, i) => `Group ${i + 1}`);
+    plotHeatmap(simOrdered, xLabels, xLabels);
+
+    // 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 && 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 =>
+            g.split("\n").filter(l => l && !l.startsWith("##"))
+        );
+
+        const allLines = cleanGroups.flat();
+        const allEmbeds = await getLineEmbeddings(allLines, task);
+
+        const idxByGroup = [];
+        let p = 0;
+        for (const g of cleanGroups) {
+            idxByGroup.push(Array.from({ length: g.length }, (_, i) => p + i));
+            p += g.length;
+        }
+
+        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 sortedLines = order.map(gIdx =>
+            idxByGroup[gIdx]
+                .map(i => ({ t: allLines[i], s: cosine(refEmbed, 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${sortedLines[i].join("\n")}`;
+            })
+            .join("\n\n\n");
+
+        document.getElementById("input").value = finalText;
+    }
+    progressBarInner.style.width = "100%";
+}

kmeans_event.js

@@ -0,0 +1,41 @@
+// Handles K-Means and Balanced K-Means clustering event
+import { getLineEmbeddings } from './embedding.js';
+import { kmeans, balancedKMeans } from './clustering.js';
+
+const task = "Given a textual input sentence, retrieve relevant categories that best describe it.";
+
+export async function handleKMeansEvent() {
+    const progressBar = document.getElementById("progress-bar");
+    const progressBarInner = document.getElementById("progress-bar-inner");
+    progressBar.style.display = "block";
+    progressBarInner.style.width = "0%";
+
+    const text = document.getElementById("input").value;
+    // Remove ## lines for embedding
+    const lines = text.split(/\n/).map(x => x.trim()).filter(x => x && !x.startsWith("##"));
+    const embeddings = await getLineEmbeddings(lines, task);
+    const n = embeddings.length;
+    if (n < 2) return;
+    const requestedK = parseInt(document.getElementById("kmeans-k").value) || 3;
+    const k = Math.max(2, Math.min(requestedK, n));
+    // Read clustering type and beta
+    const clusteringType = document.getElementById("kmeans-type").value;
+    const beta = parseFloat(document.getElementById("kmeans-beta").value) || 0.01;
+    let labels;
+    if (clusteringType === "balancedKMeans") {
+        labels = balancedKMeans(embeddings, k, beta).labels;
+    } else {
+        labels = kmeans(embeddings, k).labels;
+    }
+
+    // Build clustered text for textarea
+    const clustered = Array.from({ length: k }, () => []);
+    for (let i = 0; i < n; ++i)
+        clustered[labels[i]].push(lines[i]);
+    const clusterNames = Array.from({ length: k }, (_, c) => `Cluster ${c + 1}`);
+    document.getElementById("input").value = clustered.map((g, i) =>
+        `## ${clusterNames[i]}\n${g.join("\n")}`
+    ).join("\n\n\n");
+
+    progressBarInner.style.width = "100%";
+}

main.js

@@ -1,310 +1,11 @@
-import { getGroupEmbeddings, getLineEmbeddings } from './embedding.js';
-import { kmeans, balancedKMeans } from './clustering.js';
-import { plotHeatmap, plotScatter, updateScatter } from './plotting.js';
-import { nameCluster } from './cluster_naming.js';
-import { prompt_cluster } from './prompt_cluster.js';
+import { handleHeatmapEvent } from './heatmap_event.js';
+import { handleKMeansEvent } from './kmeans_event.js';
+import { handleClusterPlotEvent } from './clusterplot_event.js';
+import { handleNamingEvent } from './naming_event.js';
 
-const task = "Given a textual input sentence, retrieve relevant categories that best describe it.";
+// Attach event handlers to buttons
 
-// Heatmap event
-// Handles group similarity heatmap
-// Uses group-level embeddings
-
-document.getElementById("heatmap-btn").onclick = async () => {
-    const progressBar = document.getElementById("progress-bar");
-    const progressBarInner = document.getElementById("progress-bar-inner");
-    progressBar.style.display = "block";
-    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/)
-        .map(x => x.trim())
-        .filter(x => x && x.startsWith('##'))
-        .map(x => x.replace(/^##\s*/, ''));
-    let searchIdx = clusterNames.findIndex(name => name.toLowerCase().includes('search'));
-
-    const groups = text.split(/\n{3,}/);
-    // Get group embeddings (removes ## lines internally)
-    const groupEmbeddings = await getGroupEmbeddings(groups, task);
-    const n = groupEmbeddings.length;
-    progressBarInner.style.width = "30%";
-    // Cosine similarity matrix
-    const sim = [];
-    for (let i = 0; i < n; i++) {
-        const row = [];
-        for (let j = 0; j < n; j++) {
-            let dot = 0, na = 0, nb = 0;
-            for (let k = 0; k < groupEmbeddings[i].length; k++) {
-                dot += groupEmbeddings[i][k] * groupEmbeddings[j][k];
-                na += groupEmbeddings[i][k] ** 2;
-                nb += groupEmbeddings[j][k] ** 2;
-            }
-            row.push(dot / Math.sqrt(na * nb));
-        }
-        sim.push(row);
-    }
-    progressBarInner.style.width = "60%";
-    // Reorder clusters if search cluster is found
-    let order = Array.from({ length: n }, (_, i) => i);
-    if (searchIdx !== -1) {
-        // Compute similarity to search cluster
-        const simToSearch = sim[searchIdx].map((v, i) => ({ idx: i, sim: v }));
-        // Exclude searchIdx from sorting
-        const others = simToSearch.filter(x => x.idx !== searchIdx);
-        others.sort((a, b) => b.sim - a.sim); // descending similarity
-        order = [searchIdx, ...others.map(x => x.idx)];
-    }
-    // Reorder sim matrix and clusterNames
-    const simOrdered = order.map(i => order.map(j => sim[i][j]));
-    const xLabels = (clusterNames && clusterNames.length === n)
-        ? order.map(i => clusterNames[i])
-        : order.map((_, i) => `Group ${i + 1}`);
-    plotHeatmap(simOrdered, xLabels, xLabels);
-
-    // 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 && 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 =>
-            g.split("\n").filter(l => l && !l.startsWith("##"))
-        );
-
-        const allLines = cleanGroups.flat();
-        const allEmbeds = await getLineEmbeddings(allLines, task);
-
-        const idxByGroup = [];
-        let p = 0;
-        for (const g of cleanGroups) {
-            idxByGroup.push(Array.from({ length: g.length }, (_, i) => p + i));
-            p += g.length;
-        }
-
-        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 sortedLines = order.map(gIdx =>
-            idxByGroup[gIdx]
-                .map(i => ({ t: allLines[i], s: cosine(refEmbed, 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${sortedLines[i].join("\n")}`;
-            })
-            .join("\n\n\n");
-
-        document.getElementById("input").value = finalText;
-    }
-    progressBarInner.style.width = "100%";
-};
-
-// K-Means event: only clustering, no plotting
-
-document.getElementById("kmeans-btn").onclick = async () => {
-    const progressBar = document.getElementById("progress-bar");
-    const progressBarInner = document.getElementById("progress-bar-inner");
-    progressBar.style.display = "block";
-    progressBarInner.style.width = "0%";
-
-    const text = document.getElementById("input").value;
-    // Remove ## lines for embedding
-    const lines = text.split(/\n/).map(x => x.trim()).filter(x => x && !x.startsWith("##"));
-    const embeddings = await getLineEmbeddings(lines, task);
-    const n = embeddings.length;
-    if (n < 2) return;
-    const requestedK = parseInt(document.getElementById("kmeans-k").value) || 3;
-    const k = Math.max(2, Math.min(requestedK, n));
-    // Read clustering type and beta
-    const clusteringType = document.getElementById("kmeans-type").value;
-    const beta = parseFloat(document.getElementById("kmeans-beta").value) || 0.01;
-    let labels;
-    if (clusteringType === "balancedKMeans") {
-        labels = balancedKMeans(embeddings, k, beta).labels;
-    } else {
-        labels = kmeans(embeddings, k).labels;
-    }
-
-    // Build clustered text for textarea
-    const clustered = Array.from({ length: k }, () => []);
-    for (let i = 0; i < n; ++i)
-        clustered[labels[i]].push(lines[i]);
-    const clusterNames = Array.from({ length: k }, (_, c) => `Cluster ${c + 1}`);
-    document.getElementById("input").value = clustered.map((g, i) =>
-        `## ${clusterNames[i]}\n${g.join("\n")}`
-    ).join("\n\n\n");
-
-    progressBarInner.style.width = "100%";
-};
-
-// Cluster Plot event: only plotting, no clustering
-
-document.getElementById("clusterplot-btn").onclick = async () => {
-    const progressBar = document.getElementById("progress-bar");
-    const progressBarInner = document.getElementById("progress-bar-inner");
-    progressBar.style.display = "block";
-    progressBarInner.style.width = "0%";
-
-    // Recalculate embeddings from current textarea
-    const text = document.getElementById("input").value;
-    // Remove ## lines for embedding
-    const lines = text.split(/\n/).map(x => x.trim()).filter(x => x && !x.startsWith("##"));
-    const embeddings = await getLineEmbeddings(lines, task);
-    const n = embeddings.length;
-    if (n < 2) return;
-
-    // Parse clusters from textarea (split by triple newlines)
-    const groups = text.split(/\n{3,}/);
-    const k = groups.length;
-    // Build labels array: for each line, assign the cluster index it belongs to
-    let labels = [];
-    let lineIdx = 0;
-    for (let c = 0; c < k; ++c) {
-        const groupLines = groups[c].split('\n').map(x => x.trim()).filter(x => x && !x.startsWith('##'));
-        for (let i = 0; i < groupLines.length; ++i) {
-            labels[lineIdx++] = c;
-        }
-    }
-    if (labels.length !== n) return;
-
-    // UMAP projection
-    const { UMAP } = await import('https://cdn.jsdelivr.net/npm/[email protected]/+esm');
-    const nNeighbors = Math.max(1, Math.min(lines.length - 1, 15));
-    const umap = new UMAP({ nComponents: 2, nNeighbors, minDist: 0.2, metric: "cosine" });
-    const proj = umap.fit(embeddings);
-    // Group lines by cluster
-    const clustered = Array.from({ length: k }, () => []);
-    for (let i = 0; i < lines.length; ++i)
-        clustered[labels[i]].push(lines[i]);
-    // Prepare scatter plot traces
-    const colors = ["red", "blue", "green", "orange", "purple", "cyan", "magenta", "yellow", "brown", "black", "lime", "navy", "teal", "olive", "maroon", "pink", "gray", "gold", "aqua", "indigo"];
-    // Try to extract cluster names from textarea headers
-    const clusterNames = groups.map(g => {
-        const m = g.match(/^##\s*(.*)/m);
-        return m ? m[1].trim() : null;
-    });
-    const placeholderNames = clusterNames.map((name, i) => name || `Cluster ${i + 1}`);
-    const traces = Array.from({ length: k }, (_, c) => ({
-        x: [], y: [], text: [],
-        mode: "markers", type: "scatter",
-        name: placeholderNames[c],
-        marker: { color: colors[c % colors.length], size: 12, line: { width: 1, color: "#333" } }
-    }));
-    for (let i = 0; i < lines.length; ++i) {
-        traces[labels[i]].x.push(proj[i][0]);
-        traces[labels[i]].y.push(proj[i][1]);
-        traces[labels[i]].text.push(lines[i]);
-    }
-    plotScatter(traces, k);
-    window.traces = traces;
-    // Optionally update textarea with cluster names as markdown headers
-    document.getElementById("input").value = clustered.map((g, i) =>
-        `## ${placeholderNames[i]}\n${g.join("\n")}`
-    ).join("\n\n\n");
-    progressBarInner.style.width = "100%";
-};
-
-document.getElementById("naming-btn").onclick = async () => {
-    const progressBar = document.getElementById("progress-bar");
-    const progressBarInner = document.getElementById("progress-bar-inner");
-    progressBar.style.display = "block";
-    progressBarInner.style.width = "0%";
-
-    const text = document.getElementById("input").value;
-    // Reconstruct clusters from textarea (split by triple newlines)
-    const clustered = text.split(/\n{3,}/).map(group =>
-        group.split('\n').filter(line => line && !line.startsWith('##'))
-    );
-    const k = clustered.length;
-
-    const clusterNames = [];
-    for (let c = 0; c < k; ++c) {
-        progressBarInner.style.width = `${Math.round(((c + 1) / k) * 100)}%`;
-        const name = await nameCluster(clustered[c]);
-        clusterNames.push(name || `Cluster ${c + 1}`);
-        // Update UMAP scatter plot legend with new cluster names
-        if (window.traces && window.traces[c]) {
-            window.traces[c].name = clusterNames[c];
-        }
-    }
-    // Update textarea with cluster names as markdown headers
-    document.getElementById("input").value = clustered.map((g, i) =>
-        `## ${clusterNames[i]}\n${g.join("\n")}`
-    ).join("\n\n\n");
-    // Update UMAP scatter plot if traces are available
-    if (window.traces) {
-        updateScatter(window.traces, k);
-    }
-    progressBarInner.style.width = "100%";
-};
+document.getElementById("heatmap-btn").onclick = handleHeatmapEvent;
+document.getElementById("kmeans-btn").onclick = handleKMeansEvent;
+document.getElementById("clusterplot-btn").onclick = handleClusterPlotEvent;
+document.getElementById("naming-btn").onclick = handleNamingEvent;

naming_event.js

@@ -0,0 +1,37 @@
+// Handles cluster naming event
+import { nameCluster } from './cluster_naming.js';
+import { updateScatter } from './plotting.js';
+
+export async function handleNamingEvent() {
+    const progressBar = document.getElementById("progress-bar");
+    const progressBarInner = document.getElementById("progress-bar-inner");
+    progressBar.style.display = "block";
+    progressBarInner.style.width = "0%";
+
+    const text = document.getElementById("input").value;
+    // Reconstruct clusters from textarea (split by triple newlines)
+    const clustered = text.split(/\n{3,}/).map(group =>
+        group.split('\n').filter(line => line && !line.startsWith('##'))
+    );
+    const k = clustered.length;
+
+    const clusterNames = [];
+    for (let c = 0; c < k; ++c) {
+        progressBarInner.style.width = `${Math.round(((c + 1) / k) * 100)}%`;
+        const name = await nameCluster(clustered[c]);
+        clusterNames.push(name || `Cluster ${c + 1}`);
+        // Update UMAP scatter plot legend with new cluster names
+        if (window.traces && window.traces[c]) {
+            window.traces[c].name = clusterNames[c];
+        }
+    }
+    // Update textarea with cluster names as markdown headers
+    document.getElementById("input").value = clustered.map((g, i) =>
+        `## ${clusterNames[i]}\n${g.join("\n")}`
+    ).join("\n\n\n");
+    // Update UMAP scatter plot if traces are available
+    if (window.traces) {
+        updateScatter(window.traces, k);
+    }
+    progressBarInner.style.width = "100%";
+}