Fix UMAP spinner not appearing during cluster click operations

[Copilot]

Fix UMAP Spinner Display on Cluster Click

Root Cause

The spinner was not appearing due to a combination of issues:

1. The colorizeUmap function and its Plotly operations needed to be async with proper awaiting
2. The spinner element was positioned incorrectly in the DOM structure
3. The spinner was being hidden too early in the click handlers, before async colorization completed

The #umapSpinner element was positioned as a sibling to #umapContent, which has position: relative set dynamically. This caused the spinner's absolute positioning to be relative to #umapFloatingWindow instead of the visible plot area, rendering it off-screen or at the wrong location.

Additionally, the click handlers (handleClusterClick and handleImageClick) were hiding the spinner in their finally blocks immediately after dispatching the searchResultsChanged event, but before the async colorization operations completed. This meant the spinner disappeared before the heavy Plotly work was done.

Solution

1. Made colorizeUmap async with yield point before heavy operations
2. Added await to all Plotly operations:
   • await Plotly.restyle(...)
   • await Plotly.addTraces(...)
   • await Plotly.deleteTraces(...)
   • await Plotly.moveTraces(...)
3. Moved spinner element inside #umapContent so it positions correctly relative to the plot area
4. Moved spinner hide logic to searchResultsChanged event handler so it only hides after all async colorization work completes

This ensures the spinner remains visible and properly centered over the plot throughout the entire rendering process, which can take several seconds for large clusters. The pattern now matches the working EPS parameter change flow where the spinner is only hidden after all operations complete.

Changes Made

• Made colorizeUmap() and setUmapColorMode() async functions
• Added await to 6 Plotly operation calls in colorizeUmap() function
• Updated event handlers to properly handle async functions
• Moved #umapSpinner from being a sibling to being a child of #umapContent in the HTML template
• Removed try/finally blocks from handleClusterClick and handleImageClick that were hiding spinner prematurely
• Added hideUmapSpinner() call in searchResultsChanged event handler after colorization completes

Testing

• ✅ All 222 frontend tests pass
• ✅ JavaScript linting passes
• ✅ Code formatting passes
• ✅ HTML structure validated
• ✅ Spinner hide logic matches working EPS parameter change pattern

Original prompt

---

This section details on the original issue you should resolve

<issue_title>bugfix: Show spinner after clicking on a cluster in the umap window</issue_title>
<issue_description>When the album has many files and the umap clusters are large, there is a perceptible delay between clicking on a point in the umap and the plot responding by highlighting the selected points and showing the corresponding image.

The system is supposed to display the busy spinner during this interval but the spinner doesn't seem to be appearing.</issue_description>

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

• Fixes bugfix: Show spinner after clicking on a cluster in the umap window #203

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[lstein]

@copilot Unfortunately the spinner is still not visible after clicking on a point in the umap.

[Copilot]

@copilot Unfortunately the spinner is still not visible after clicking on a point in the umap.

Fixed in commit 7e938ae. The issue was that Plotly operations (Plotly.restyle, Plotly.addTraces, etc.) return Promises but weren't being awaited. The spinner was being hidden before these operations completed. Now all Plotly operations are awaited, keeping the spinner visible throughout the entire rendering process.

[lstein]

@copilot The issue persists. No spinner is visible after clicking a point in the umap.

[Copilot]

@copilot The issue persists. No spinner is visible after clicking a point in the umap.

Fixed in commit 17d0430. The spinner was positioned outside #umapContent, which has position: relative. This caused the spinner to be positioned relative to the window instead of the plot area. Moved the spinner inside #umapContent so it now centers correctly over the visible plot during cluster selection.

[lstein]

@copilot The spinner is still not showing up. I know that the spinner should be visible, because when I change the umap's EPS parameter, the spinner displays during the period that the umap is being recalculated. Please have a look at this part of the code and do something similar.

[Copilot]

@copilot The spinner is still not showing up. I know that the spinner should be visible, because when I change the umap's EPS parameter, the spinner displays during the period that the umap is being r...

Fixed in commit 9d7719b. The issue was that the spinner was being hidden in the finally blocks of the click handlers immediately after dispatching the searchResultsChanged event, but before the async colorization work completed. Now the spinner is hidden in the searchResultsChanged event handler after all Plotly operations finish, matching the pattern used by the EPS parameter change that works correctly.

[lstein]

working as expected