Prose ID Search

Type-ahead dropdown for searching and selecting Prose sequence IDs. Queries the Prose API at prose.apps.science.roche.com with fallback to mock data when outside the Roche network.

Live Demo

Prose Sequence IDs

Type at least 2 characters to search. Select one or more sequences.

↑↓ navigateEnter selectEsc close⌫ remove last

Implementation

API Endpoint

GET /sequences/api/v3/sequences?search=QUERY&limit=10

# OpenAPI docs
https://prose.apps.science.roche.com
  /sequences/api/v3/api-docs/all

Basic Usage

import { ProseIdSearch }
  from '@/components/examples/ProseIdSearch';

<ProseIdSearch />

Features

• Debounced search (250ms)
• Multi-select with tag chips
• Keyboard navigation (↑↓ Enter Esc ⌫)
• Mock data fallback for offline/demo
• SSO login button with popup auth flow
• Auto-detects auth status on mount
• Result type badges
• Direct links to Prose API

Response Shape

interface ProseSequence {
  id: string;
  name?: string;
  type?: string;
  organism?: string;
  description?: string;
}

The component normalizes multiple response shapes (array, .results, .sequences, .content).

Authentication

Click Sign in to Prose to authenticate via SSO in a popup window. After login, the component switches from mock data to live API results. Auth status is checked on mount and after the popup closes.

Requests use credentials: 'include' to forward SSO cookies. When the API is unreachable, mock data is shown automatically.

Integration Notes

• Adapt the fetch URL to match the actual Prose API search endpoint
• Adjust the response normalization once the OpenAPI schema is confirmed
• Consider adding CORS proxy if needed for cross-origin requests