Fix cluster badge not updating in metadata panel for both swiper and grid views

[Copilot]

Fixing Cluster Display in Metadata Panel - COMPLETE ✅

All Issues Fixed

✅ Issue 1: Cluster badge showed stale data from previous searches
✅ Issue 2: Unclustered images showed "cluster=-1" instead of "unclustered"
✅ Issue 3: Cluster badge didn't update when navigating in grid view
✅ Issue 4: Cluster badge was empty on initial page load
✅ Issue 5: Test failure - grid-view.test.js missing updateClusterInfo in mock

Summary of Changes

Commit 1302187: Fixed score display to use current cluster from UMAP data

• Modified updateCurrentImageScore() to get cluster from window.umapPoints instead of stale metadata
• Pass "unclustered" string for cluster -1

Commit 4df7048: Fixed grid view not updating cluster badge

• Exported updateClusterInfo() function from metadata-drawer.js
• Imported and called updateClusterInfo() in grid-view.js

Commit ec0e87c: Fixed empty badge on initial page load

• Added umapDataLoaded event dispatch in umap.js after window.umapPoints is set
• Added event listener in initializeMetadataDrawer() to refresh cluster info when UMAP data loads

Commit (current): Fixed test failure

• Updated grid-view.test.js mock to include updateClusterInfo export from metadata-drawer.js

Technical Details

The complete solution addresses four separate issues:

1. Stale metadata problem: Always fetch cluster info from window.umapPoints based on current globalIndex, never from slide dataset
2. Grid view gap: Ensure both swiper and grid view call updateClusterInfo() when metadata updates
3. Async loading race condition: Use event-driven approach to refresh cluster info after UMAP data loads
4. Test mocking: Update test mocks to reflect the new exported function

Testing & Validation

✅ All 215 tests passing (13 grid-view tests included)
✅ Code review completed
✅ Security scan completed - no vulnerabilities
✅ CI build now passing

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Cluster not displayed correctly in metadata panel</issue_title>
<issue_description>The image metadata display panel (fileNameBanner) displays a badge with the current image's umap cluster. However, the cluster information is not correct. Instead of showing the current image's cluster, the badge shows whatever cluster was last selected regardless of the current image. This needs to be corrected.

In addition, images that are not clustered are being displaying as cluster=-1. Instead, the badge should read "unclustered" for consistency with the fixed-score display.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Cluster not displayed correctly in metadata panel #167

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[lstein]

@copilot This has not fixed the issue. The cluster badge in the metadata panel does not update when I select different images.

[Copilot]

@copilot This has not fixed the issue. The cluster badge in the metadata panel does not update when I select different images.

Fixed in commit 4df7048. The issue was that grid-view.js was not calling updateClusterInfo() to update the cluster badge when navigating between images. The function is now exported and called from both swiper view and grid view, ensuring the cluster badge always reflects the current image's cluster from UMAP data.

[lstein]

@copilot After a full reload, the very first chronological slide is selected by default. However, its metadata panel badge is empty. If I select a different slide and then return to the first one, its cluster is displayed correctly.

[Copilot]

@copilot After a full reload, the very first chronological slide is selected by default. However, its metadata panel badge is empty. If I select a different slide and then return to the first one, its...

Fixed in commit ec0e87c. The issue was that UMAP data loads asynchronously after the initial slide is displayed. Added a umapDataLoaded event that's dispatched when window.umapPoints is set, and a listener in initializeMetadataDrawer() that refreshes the cluster badge for the current slide when the data becomes available.

[lstein]

@copilot The test_frontend check is failing:

FAIL tests/frontend/grid-view.test.js
  ● Test suite failed to run

    SyntaxError: The requested module './metadata-drawer.js' does not provide an export named 'updateClusterInfo'

      114 |
      115 | // Now import the module we want to test
    > 116 | const { initializeGridSwiper } = await import('../../photomap/frontend/static/javascript/grid-view.js');
          |                                  ^
      117 |
      118 | describe('grid-view.js', () => {
      119 |   let gridViewManager;

      at Runtime.linkAndEvaluateModule (node_modules/jest-runtime/build/index.js:708:5)
      at tests/frontend/grid-view.test.js:116:34

(node:2233) ExperimentalWarning: VM Modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

[Copilot]

@copilot The test_frontend check is failing:

FAIL tests/frontend/grid-view.test.js

...

Fixed in commit c0df728. The test mock in grid-view.test.js was missing the updateClusterInfo export that was added in commit 4df7048. Updated the mock to include it. All 215 tests now pass.

[lstein]

Seems to be working as expected.