Fix cluster badge not updating in metadata panel for both swiper and grid views (#168)

* Initial plan

* Fix cluster display to use current image's cluster from UMAP points

Co-authored-by: lstein <[email protected]>

* Export updateClusterInfo and call it from grid-view to fix cluster badge updates

Co-authored-by: lstein <[email protected]>

* Fix cluster badge empty on initial load by listening for UMAP data loaded event

Co-authored-by: lstein <[email protected]>

* Fix grid-view test by adding updateClusterInfo to metadata-drawer mock

Co-authored-by: lstein <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: lstein <[email protected]>

Author: Copilot

photomap/frontend/static/javascript/grid-view.js

@@ -3,6 +3,7 @@ import { toggleGridSwiperView } from "./events.js";
 import {
   replaceReferenceImagesWithLinks,
   updateCurrentImageScore,
+  updateClusterInfo,
 } from "./metadata-drawer.js";
 import { fetchImageByIndex } from "./search.js";
 import { slideState } from "./slide-state.js";
@@ -703,6 +704,9 @@ class GridViewManager {
     document.getElementById("filepathText").textContent =
       data["filepath"] || "";
     document.getElementById("metadataLink").href = data["metadata_url"] || "#";
+    
+    // Update cluster information display
+    updateClusterInfo(data);
   }
 
   // These functions act as a semaphore to prevent overlapping batch loads

photomap/frontend/static/javascript/metadata-drawer.js

@@ -113,7 +113,7 @@ export function updateMetadataOverlay(slide) {
 }
 
 // Update cluster information in the metadata window
-function updateClusterInfo(metadata) {
+export function updateClusterInfo(metadata) {
   const clusterInfoContainer = document.getElementById("clusterInfoContainer");
   const clusterInfoBadge = document.getElementById("clusterInfoBadge");
 
@@ -208,10 +208,14 @@ export async function updateCurrentImageScore(metadata) {
     return;
   }
 
-  if (metadata.cluster !== null && metadata.cluster !== undefined) {
+  // Get current cluster info from UMAP points, not from stale metadata
+  const clusterInfo = getClusterInfoForImage(globalIndex, window.umapPoints);
+  if (clusterInfo && clusterInfo.cluster !== null && clusterInfo.cluster !== undefined) {
+    // Show "unclustered" text for cluster -1
+    const clusterDisplay = clusterInfo.cluster === -1 ? "unclustered" : clusterInfo.cluster;
     scoreDisplay.showCluster(
-      metadata.cluster || 0,
-      metadata.color,
+      clusterDisplay,
+      clusterInfo.color,
       searchIndex,
       state.searchResults.length
     );
@@ -470,6 +474,24 @@ function setupOverlayButtons() {
 // Initialize metadata drawer - sets up all event listeners
 export function initializeMetadataDrawer() {
   setupOverlayButtons();
+  
+  // Listen for UMAP data loaded event to refresh cluster info for the current slide
+  window.addEventListener('umapDataLoaded', () => {
+    const currentSlide = slideState.getCurrentSlide();
+    if (currentSlide && currentSlide.globalIndex !== undefined) {
+      // Get the slide data/metadata for the current slide
+      // In swiper view, we need to get the actual slide element
+      const swiperSlide = document.querySelector(`[data-global-index="${currentSlide.globalIndex}"]`);
+      if (swiperSlide && swiperSlide.dataset) {
+        updateClusterInfo(swiperSlide.dataset);
+        updateCurrentImageScore(swiperSlide.dataset);
+      } else {
+        // In grid view or if slide element not found, construct minimal metadata
+        const metadata = { globalIndex: currentSlide.globalIndex };
+        updateClusterInfo(metadata);
+      }
+    }
+  });
 }
 
 // Position metadata drawer (called from events.js during initialization and on window resize)

photomap/frontend/static/javascript/umap.js

@@ -407,6 +407,9 @@ export async function fetchUmapData() {
     window.umapPoints = points;
     state.dataChanged = false;
 
+    // Dispatch event to notify that UMAP data has been loaded
+    window.dispatchEvent(new CustomEvent('umapDataLoaded'));
+
     setUmapColorMode();
   } finally {
     hideUmapSpinner();

tests/frontend/grid-view.test.js

@@ -66,7 +66,8 @@ jest.unstable_mockModule('../../photomap/frontend/static/javascript/search.js',
 // Mock metadata-drawer.js
 jest.unstable_mockModule('../../photomap/frontend/static/javascript/metadata-drawer.js', () => ({
   replaceReferenceImagesWithLinks: jest.fn(() => ''),
-  updateCurrentImageScore: jest.fn()
+  updateCurrentImageScore: jest.fn(),
+  updateClusterInfo: jest.fn()
 }));
 
 // Mock slide-state.js