Cloud Components

Web components for front ends of GA4GH APIs and the services built on them, brought to you by ELIXIR On-Cloud. Built with Lit and TypeScript, they work in any web framework or in plain HTML, and come with React wrappers and providers that connect them to your API endpoints. They are published as npm packages:

Package	Components for
@elixir-cloud/design	The design system and utility components that the other packages use
@elixir-cloud/service-registry	The GA4GH Service Registry API
@elixir-cloud/cloud-registry	Cloud Registry, a GA4GH Service Registry with service management
@elixir-cloud/trs	The GA4GH Tool Registry Service (TRS) API
@elixir-cloud/trs-filer	TRS-Filer, a GA4GH TRS implementation with tool management
@elixir-cloud/wes	The GA4GH Workflow Execution Service (WES) API
@elixir-cloud/drs	The GA4GH Data Repository Service (DRS) API
@elixir-cloud/drs-filer	DRS-Filer, a GA4GH DRS implementation with object management

Read the documentation for the installation, the components and providers of each package, customisation and the versions.

Quick start

Install the package for your API with npm, e.g., for the GA4GH Service Registry API:

npm install @elixir-cloud/service-registry

Then import it in your app to register its components, and give them a provider for your API endpoint:

import "@elixir-cloud/service-registry";
import { RestServiceRegistryProvider } from "@elixir-cloud/service-registry/providers";

const services = document.createElement("ecc-client-ga4gh-service-registry-services");
services.provider = new RestServiceRegistryProvider(
  "https://registry.example.com/ga4gh/registry/v1",
);
document.body.append(services);

See Installation for React, loading the components from a CDN and the other packages.

Development

With Node.js 22.12 or later installed, clone the repository, install the dependencies and start the design package, which all other packages need:

git clone https://github.com/elixir-cloud-aai/cloud-components.git
cd cloud-components
npm install
npm run dev --workspace=@elixir-cloud/design

The design package keeps running; start the package you work on in a second terminal:

npm run dev --workspace=@elixir-cloud/<package>

npm run lint, npm run build and npm test run the checks of CI; the documentation app is in apps/documentation/.

Citation

If you use Cloud Components, please cite them with their DOI 10.5281/zenodo.23858158, which always resolves to the latest version on Zenodo; the Zenodo record lists the DOI of each version, too. The citation metadata is in CITATION.cff: on GitHub, "Cite this repository" in the sidebar of the repository formats it as APA or BibTeX.

Contributing

Contributions are welcome! See the organisation's contributing guide and the Contributing page of the documentation for local checks and releases, and mind our code of conduct. For anything else, write to cloud-service@elixir-europe.org.