EccClientGa4ghServiceRegistryServices Component

Overview

The ecc-client-ga4gh-service-registry-services component displays a table of services from a GA4GH-compliant Service Registry. It provides search, filters by type, organization and environment, pagination, and actions for each row. Search, filters and pagination work on the list loaded from the registry, without further requests.

Usage

Basic Service List

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

Properties

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://registry.example.com/ga4gh/registry/v1');
 
<EccClientGa4ghServiceRegistryServices provider={provider} />

search

Controls whether the search input field is displayed. The search matches the ID, name, description, URL, organization and type (group, artifact and version) of each service, case-insensitively, in the list that is already loaded. While the field is hidden, its query doesn't apply.

<EccClientGa4ghServiceRegistryServices search={false} />

filter

Controls whether the filters are displayed: by type (the types the registry lists at /services/types, or else those of the loaded services), by organization, and by environment (only if a service has one). The filters, the search and the page combine; changing the search or a filter goes back to the first page. Only filters on display apply, and only with a value that is still among their options (e.g. after a reload from another registry), so the list never narrows without a visible reason.

<EccClientGa4ghServiceRegistryServices filter={false} />

pageSize

The number of services per page. The pagination is shown when the services that match the search and the filters fill more than one page. Set it to 0 to show all services on one page. A missing, empty or invalid value (e.g. a removed or malformed attribute) falls back to 10.

<EccClientGa4ghServiceRegistryServices pageSize={20} />

rowActions

A function that renders the actions of a row from its service, e.g. Edit and Delete buttons for the services that the user may change. It can return a Lit template, a DOM node, a string, or null for a row without actions; without the function, each row shows a "View Details" button, which selects the service (ecc-service-selected). Clicks on the actions of rowActions don't select the row. Set a new function when what it renders changes, e.g. after the user's roles changed, so that the rows are rendered again.

const rowActions = useCallback(
  (service) => {
    if (!canEdit(service)) return null;
    const button = document.createElement('button');
    button.textContent = 'Edit';
    button.addEventListener('click', () => navigate(`/services/${service.id}/edit`));
    return button;
  },
  [canEdit, navigate]
);
 
<EccClientGa4ghServiceRegistryServices rowActions={rowActions} />

Slots

Events

ecc-services-changed

Emitted whenever the services data is loaded or updated, providing all loaded services (not only those that match the search and the filters).

<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. Clicks on the row's actions or organization link, clicks with a modifier key (Ctrl, Cmd, Shift or Alt) and clicks that end a text selection (made by dragging across the row) don't emit it.

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