EccClientGa4ghServiceRegistryServices Component

2.0.0-alpha.6

<ecc-client-ga4gh-service-registry-services/>

EccClientGa4ghServiceRegistryServices

Overview

The ecc-client-ga4gh-service-registry-services component displays a table of services from a GA4GH-compliant Service Registry. It provides built-in search functionality, service type filtering, and pagination for browsing large service collections.

This component implements the GA4GH Service Registry API specification and can connect to any compliant service registry endpoint.

Usage

Basic Service List

This example demonstrates a basic service registry table with search and filtering enabled.

Properties

Property	Type	Default	Description
`search`	`boolean`	`true`	Whether to display the search input field
`filter`	`boolean`	`true`	Whether to display the service type filter dropdown
`provider`	`ServiceRegistryProvider`	`null`	Data provider for fetching services (see Providers)

`provider`

The data provider responsible for fetching services from the registry. You must provide a provider that implements the ServiceRegistryProvider interface. See the Providers documentation for detailed information about available providers and how to create custom ones.

import { RestServiceRegistryProvider } from '@elixir-cloud/service-registry/providers';
 
const provider = new RestServiceRegistryProvider('https://cloud-registry.anuragxd.com/ga4gh/registry/v1');
 
<EccClientGa4ghServiceRegistryServices provider={provider} />

`search`

Controls whether the search input field is displayed, allowing users to filter services by name, description, or organization.

<EccClientGa4ghServiceRegistryServices search={false} />

`filter`

Controls whether the service type filter dropdown is displayed, allowing users to filter services by their type.

<EccClientGa4ghServiceRegistryServices filter={false} />

Events

Event Name	React Event Name	Detail Type	Description
`ecc-services-changed`	`onEccServicesChanged`	`{ services: ExternalService[] }`	Fired when the services data is updated
`ecc-service-selected`	`onEccServiceSelected`	`{ serviceId: string }`	Fired when a user clicks on a service row

`ecc-services-changed`

Emitted whenever the services data is loaded or updated, providing the current list of services.

<EccClientGa4ghServiceRegistryServices 
  onEccServicesChanged={(event) => {
    console.log('Services updated:', event.detail.services);
  }}
/>

`ecc-service-selected`

Emitted when a user clicks on a service in the table, providing the service ID for navigation or further actions.

<EccClientGa4ghServiceRegistryServices 
  onEccServiceSelected={(event) => {
    window.location.href = `/services/${event.detail.serviceId}`;
  }}
/>

Providers Service