Enhance UMAP search result highlighting with larger markers, white borders, and persistent settings

[Copilot]

Successfully implemented UMAP highlighting improvements with all feedback addressed:

Changes Made

1. Enhanced Visual Highlighting

Selected image spots in the UMAP are now:

• Cluster colors maintained to preserve visual grouping
• Larger (size 8 vs default 5) to make them more prominent
• White border (line width 1) to distinguish selected points from non-selected
• Full opacity (1.0) while non-selected spots are dimmed

Non-selected spots are dimmed (opacity 0.2 for unclustered, 0.75 for clustered) to emphasize the selection.

2. Clear Link Added

A blue clickable "clear" link appears next to the "Highlight selection" checkbox, providing quick access to clear search results without navigating to the search panel.

3. Persistent UMAP Settings

The "Show landmarks", "Show hover thumbnails", and "Exit fullscreen on selection" checkbox states are now persistent across browser sessions:

• States are saved to localStorage when changed
• Restored automatically on page load
• Initialization waits for state to fully load (stateReady event) before setting checkbox values
• Managed through new setter functions in state.js (setUmapShowLandmarks(), setUmapShowHoverThumbnails(), and setUmapExitFullscreenOnSelection())

4. Exit Fullscreen on Selection Checkbox

Added a new "Exit fullscreen on selection" checkbox positioned between "Show hover thumbnails" and "Highlight selection":

• Default state: Checked (enabled)
• Behavior: When checked, clicking on a UMAP point exits fullscreen mode and selects the cluster
• When unchecked: UMAP window size does not change when a point is clicked
• Enabled state: Only enabled when UMAP is in fullscreen mode (disabled with 50% opacity otherwise)
• Persistence: State is saved to localStorage and restored across sessions

5. Increased Window Height

UMAP window sizes have been increased to provide more breathing room for the checkboxes:

• Big: 560 → 590 pixels (+30px)
• Medium: 280 → 310 pixels (+30px)
• Small: 180 → 210 pixels (+30px)

This prevents the "Highlight selection" option from abutting the bottom of the window.

Testing

• ✅ JavaScript syntax validation passes
• ✅ Code review completed with no issues
• ✅ Security scan passed (0 alerts)
• ✅ All changes maintain compatibility with master branch appearance

The changes improve user experience by making search results more visible in the UMAP visualization through enlarged markers with white borders, providing user control over fullscreen behavior, and preserving user preferences across sessions.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>In the umap, make selected image spots larger and bright yellow</issue_title>
<issue_description>Currently in the UMAP display, spots corresponding to images in the current search results are highlighted by making them brighter and other spots dimmer. This is difficult to see.

1. Please change the highlighting so that the search result spots are slightly larger and colored bright yellow. This will make the selected spots more prominent.
2. Also add a link next to "Highlight selection" that will clear the search results. The checkbox label should now read: "Highlight selection (clear)", where "clear" is a blue action link. Selecting the link will have the same effect as pressing the Clear Search button in the search panel.

</issue_description>

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

• Fixes In the umap, make selected image spots larger and bright yellow #142

---

💡 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]

Please use solid colored points, not circles in the plotly graph. I would like the appearance of the umap plot to be similar to its appearance in the current master branch.

[Copilot]

Please use solid colored points, not circles in the plotly graph. I would like the appearance of the umap plot to be similar to its appearance in the current master branch.

Added explicit marker.symbol: "circle" property to ensure solid colored points are used in the UMAP plot, maintaining the same appearance as the master branch. (797955f)

[lstein]

@copilot No, something is not right. The points are still displaying as small hollow circles rather than solid circles.

[Copilot]

@copilot No, something is not right. The points are still displaying as small hollow circles rather than solid circles.

Fixed by setting marker.line.width to 0, which ensures all points render as solid filled circles instead of hollow circles. This applies to both highlighted and non-highlighted states to maintain consistent solid appearance. (8b4ed83)

[lstein]

@copilot Please make the umap "Show landmarks" and "Show hover thumbnails" checkboxes persistent across sessions by saving to local storage in state.js. Be aware that before the checkboxes are initialized, the state in state.js needs to fully load.

[Copilot]

@copilot Please make the umap "Show landmarks" and "Show hover thumbnails" checkboxes persistent across sessions by saving to local storage in state.js. Be aware that before the checkboxes are initial...

Implemented persistent checkbox settings for "Show landmarks" and "Show hover thumbnails". The states are now saved to localStorage and restored on page load. The initialization waits for the stateReady event to ensure state is fully loaded before setting checkbox values. (3efc389)

[lstein]

@copilot Please add a new checkbox to the umap window labeled "Exit fullscreen on selection". Place it between "Show hover thumbnails" and "Highlight selection".

When selected (the initial default), clicking on a point in the umap should select the current cluster and exit umap fullscreen mode. If unselected, the umap window size should not change when a point is clicked.

The state of this checkbox should be stored in persistent LocalStorage, the same way that the other checkboxes in this window are stored.

The checkbox and its label should only be enabled when the umap window is in fullscreen mode.

[Copilot]

@copilot Please add a new checkbox to the umap window labeled "Exit fullscreen on selection". Place it between "Show hover thumbnails" and "Highlight selection".

When selected (the initial default)...

Implemented "Exit fullscreen on selection" checkbox between "Show hover thumbnails" and "Highlight selection". The checkbox:

• Default state: checked (enabled)
• Controls whether clicking a UMAP point exits fullscreen and selects the cluster
• Only enabled when in fullscreen mode (disabled with 50% opacity otherwise)
• State persisted to localStorage and restored across sessions
• Updates automatically when fullscreen mode changes

Also fixed highlighted points to use bright yellow (#faea0e) and size 8 as specified. (ae12822)

[lstein]

@copilot A couple of requests:

[lstein]

@copilot A couple of requests:

1. Revert ae12822. I prefer the highlighted points to keep their cluster colors, but to be enlarged and have a white border.
2. Make the umap window slighter taller to give breathing space to the "Highlight selection" option at the bottom. Currently it abuts the bottom of the window.

[Copilot]

@copilot A couple of requests:

1. Revert ae12822. I prefer the highlighted points to keep their cluster colors, but to be enlarged and have a white border.
2. Make the umap window slighter taller to g...

Completed both requests:

1. Reverted highlighted points to use cluster colors with white border (line width 1) while keeping size 8
2. Increased UMAP window heights by 30 pixels (big: 560→590px, medium: 280→310px, small: 180→210px) to provide breathing space for the "Highlight selection" option at the bottom (df1872e)

[lstein]

Looks good.

[lstein]

Approved.