Add single image selection mode to UMAP window

[Copilot]

Implementation Complete ✅

• Add state property umapClickSelectsCluster (default: true) in state.js
• Add localStorage persistence for umapClickSelectsCluster in state.js
• Add radio button controls to umap-floating-window.html under EPS spinner
• Add CSS styling for radio buttons in umap-floating-window.css
• Update umap.js to import slideState and new setter function
• Update umap.js to handle radio button changes and save to localStorage
• Modify click handler in umap.js to either select cluster or navigate to single image based on radio button value
• Run frontend tests - all 215 tests passing ✅
• Code review - no issues found ✅
• Security check (CodeQL) - no alerts ✅
• Adjust layout: align EPS container with checkboxes, reduce whitespace by 8px ✅
• Clear search selection when clicking in image navigation mode ✅

Summary

This PR implements a new feature that allows users to choose between two click behaviors in the UMAP window:

1. "Click selects cluster" (default) - maintains existing behavior where clicking a point selects the entire cluster
2. "Click selects image" - new behavior that navigates directly to the clicked image, similar to seek-slider behavior

Layout Changes (per feedback)

• Reduced margin-top from 12px to 4px (8px reduction as requested)
• Removed padding from EPS container (was 8px)
• Removed margin-bottom and padding-bottom from checkbox container
• This aligns the "Cluster Strength" label with the top row of checkboxes

Technical Details

The feature is implemented with:

• Two vertically stacked radio buttons positioned under the EPS spinner in the UMAP window
• The selected option is persisted in localStorage along with other UMAP settings
• When "Click selects image" is selected, clicking a point clears any existing search selection via exitSearchMode() and then navigates to the single image using slideState.navigateToIndex()
• When "Click selects cluster" is selected, the existing handleClusterClick() behavior is used

Testing

• All 215 existing frontend tests pass
• Code review completed with no issues
• CodeQL security analysis found no vulnerabilities

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add option to select a single image in the umap window</issue_title>
<issue_description>Currently when the user clicks on a point in the umap window, the plotly click handler will select all the images belonging to that point's cluster. Please add an option to navigate to the slide corresponding to the clicked point, similar to the behavior of the seek-slider.

This option should be controlled by a pair of vertically stacked radio buttons in the umap window located underneath the EPS spinner. The buttons should be labeled "Click selects cluster" and "Click selects image". The value of this option should be saved in persistent LocalStorage along with the checkmark values.</issue_description>

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

• Fixes Add option to select a single image in the umap window #169

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[lstein]

@copilot Please move the first column of controls at the bottom of the umap window upwards. I would like the top of the "Cluster Strength" label and EPS spinner to be aligned with the top row of checkboxes ("Show landmarks" "Exit full screen..."). If possible, also reduce the amount of whitespace between the bottom of the plotly plot and the controls. I believe you can reduce this space by 8px.

[Copilot]

@copilot Please move the first column of controls at the bottom of the umap window upwards. I would like the top of the "Cluster Strength" label and EPS spinner to be aligned with the top row of check...

Done in commit 9a1a796.

Changes made:

• Reduced margin-top from 12px to 4px (8px reduction as requested)
• Removed padding from EPS container (8px → 0px)
• Removed excess bottom spacing (32px → 0px)

The "Cluster Strength" label now aligns with the top row of checkboxes:

BEFORE (misaligned):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
│   [Plotly Plot Area]        │
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ↓ 12px gap
┌─────────────────────────────┐
│  ↓ 8px padding              │
│ Cluster Strength  ☐ Show... │
│     [0.1]         ☐ Exit... │

AFTER (aligned):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
│   [Plotly Plot Area]        │
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ↓ 4px gap (reduced) ✓
┌─────────────────────────────┐
│ Cluster Strength  ☐ Show... │ ← Aligned!
│     [0.1]         ☐ Exit... │

[lstein]

@copilot Lastly, clear the umap search selection when in click-to-navigate mode and the user clicks on a point.

[Copilot]

@copilot Lastly, clear the umap search selection when in click-to-navigate mode and the user clicks on a point.

Done in commit 6a0c076.

Added exitSearchMode() call in handleImageClick() to clear any existing search selection when the user clicks on a point in click-to-navigate mode.

async function handleImageClick(clickedIndex) {
  const clickedPoint = points.find((p) => p.index === clickedIndex);
  if (!clickedPoint) return;

  // Clear any existing search selection
  exitSearchMode();
  
  // Navigate directly to the clicked image
  slideState.navigateToIndex(clickedIndex, false);
}

This ensures that when "Click selects image" is selected, clicking a point will clear any previous cluster or search selections before navigating to the single image.

[lstein]

Everything looks good.