Implement React versions of Encounter search results tabs beyond Results Table

[vkirkl]

Feature description and context

Following the migration of the search filters and Results Table to React, let's finish migrating, or removing, the rest of the search results tabs:

Design Specification

Project Management Tab

The Project Management Tab has now been merged into the Table View. When you click the Download button, you’ll see this popup, where you can download encounters in your preferred format.

Inside the popup: There’s an index menu on the left. Clicking an item in this menu will scroll the main content to the relevant download section. This should work both ways: as you scroll through the download sections manually, the active selection in the index should update automatically.

---

The Matching Images/Videos Tab

The Matching Images/Videos Tab has now been renamed to Gallery View.

Images will display in a Pinterest-style layout — the image width stays fixed, and the height adjusts based on the original image dimensions.

On hovering over annotations, you’ll see key details like:

• Encounter ID
• Viewpoint
• IA Class
• Regular actions (e.g., Match Results, Add Annotation, Visual Matcher) are accessible via the hamburger menu attached to each image.

Clicking on any image opens the Image Details Page, where you can:

• Zoom in/out
• Toggle fullscreen on/off
• View total number of images
• Download image
• Share image
• Open/close image details
• Add/remove tags
• Show/hide annotations
• Add annotation
• Launch Visual Matcher

---

Mapped Results

Mapped Results Tab is now renamed to Map View. The map now occupies a larger area, with the index panel on the right.

• If “None” is selected: shows red location pins.
• If “Species” is selected: shows different colors for different species.
• If “Sex” is selected: shows different colors for different sexes.
• If “Haplotype” is selected: shows different colors for different haplotypes.

---

Results Calendar

Results Calendar tab is now renamed to Calendar View.

In Grid View:

• Today’s date is highlighted.
• Encounters from that date are listed in the grid.

In List View:

• Only dates with encounters are shown.
• All encounters from that date are listed with time.
• Encounters are arranged in descending order (latest encounter on top).

Miscellaneous

• Figma link - Static https://www.figma.com/design/OSUJ7S84IwwLgu2poBlMAn/Encounters-Search-Results?node-id=4-14660&t=Ynl3ATTLQ3a3gcyB-0
• Component list/reference
  • pagination
  • button
  • pills
  • tab options
• Navigation sitemap
  • from the header, click search
  • click encounter to go to encounter search filters page
  • apply filters is needed
  • click search to see all search results
  • swtch between various tabs to see these tabs