@elixir-cloud/service-registry 2.0.0-alpha.28

package/dist/chunks/chunk.422CUO5Q.js

@@ -0,0 +1,329 @@
+import { ComponentStyles } from './chunk.2GTT6OBC.js';
+import { GlobalStyles } from './chunk.SWMR6FP7.js';
+import { RestServiceRegistryProvider } from './chunk.L4ERSGP3.js';
+import { __decorateClass } from './chunk.WHWUXFA2.js';
+import { css, LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '@elixir-cloud/design/components/table/index.js';
+import '@elixir-cloud/design/components/button/index.js';
+import '@elixir-cloud/design/components/input/index.js';
+import '@elixir-cloud/design/components/select/index.js';
+import '@elixir-cloud/design/components/label/index.js';
+import '@elixir-cloud/design/components/pagination/index.js';
+import '@elixir-cloud/design/components/badge/index.js';
+import '@elixir-cloud/design/components/skeleton/index.js';
+
+var _ECCClientGa4ghServiceRegistryServices = class _ECCClientGa4ghServiceRegistryServices extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.baseUrl = "";
+    this.filter = true;
+    this.search = true;
+    this.searchQuery = "";
+    this.services = [];
+    this.loading = false;
+    this.error = null;
+    this.serviceTypes = [];
+    this.searchTimeout = null;
+    this._provider = null;
+  }
+  async firstUpdated() {
+    if (!this.baseUrl && !this.provider) {
+      this.error = "Please provide either a base URL for the Service Registry API or a custom provider.";
+      return;
+    }
+    if (this.provider) {
+      this._provider = this.provider;
+    } else if (this.baseUrl) {
+      this._provider = new RestServiceRegistryProvider(this.baseUrl);
+    } else {
+      this._provider = null;
+    }
+    if (this._provider) {
+      await this.loadData();
+      await this.loadServiceTypes();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("baseUrl") && this.baseUrl) {
+      this._provider = new RestServiceRegistryProvider(this.baseUrl);
+      this.loadData();
+      this.loadServiceTypes();
+    }
+  }
+  async loadServiceTypes() {
+    if (!this._provider) return;
+    try {
+      this.serviceTypes = await this._provider.getServiceTypes();
+    } catch (error) {
+      console.error("Failed to load service types:", error);
+    }
+  }
+  async loadData() {
+    if (!this._provider) return;
+    this.loading = true;
+    this.error = null;
+    try {
+      const services = await this._provider.getServices();
+      this.services = services;
+      this.dispatchEvent(
+        new CustomEvent("ecc-services-changed", {
+          detail: { services },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : "Failed to load services";
+      console.error({
+        error: this.error,
+        breakPoint: "ECCClientGa4ghServiceRegistryServices.loadData"
+      });
+    } finally {
+      this.loading = false;
+    }
+  }
+  handleSearch(e) {
+    this.searchQuery = e.detail.value;
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+    this.searchTimeout = setTimeout(() => {
+      this.filterServices();
+    }, 500);
+  }
+  filterServices() {
+    if (!this.searchQuery) {
+      this.loadData();
+      return;
+    }
+    const query = this.searchQuery.toLowerCase();
+    if (!this._provider) return;
+    this.loading = true;
+    this.error = null;
+    try {
+      this._provider.getServices().then((services) => {
+        this.services = services.filter(
+          (service) => {
+            var _a;
+            return service.id.toLowerCase().includes(query) || service.name.toLowerCase().includes(query) || ((_a = service.description) == null ? void 0 : _a.toLowerCase().includes(query)) || service.organization.name.toLowerCase().includes(query) || service.type.group.toLowerCase().includes(query) || service.type.artifact.toLowerCase().includes(query);
+          }
+        );
+        this.loading = false;
+      });
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : "Failed to filter services";
+      this.loading = false;
+    }
+  }
+  handleViewDetails(serviceId) {
+    this.dispatchEvent(
+      new CustomEvent("ecc-service-selected", {
+        detail: { serviceId },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  static renderSkeletonRows() {
+    return html`
+      ${Array(5).fill(0).map(
+      () => html`
+            <ecc-utils-design-table-row>
+              <ecc-utils-design-table-cell class="w-7/12">
+                <div class="flex flex-col w-full gap-2">
+                  <ecc-utils-design-skeleton
+                    class="part:h-5 part:w-40"
+                  ></ecc-utils-design-skeleton>
+                  <ecc-utils-design-skeleton
+                    class="part:h-3 part:w-full"
+                  ></ecc-utils-design-skeleton>
+                  <ecc-utils-design-skeleton
+                    class="part:h-3 part:w-4/5"
+                  ></ecc-utils-design-skeleton>
+                </div>
+              </ecc-utils-design-table-cell>
+              <ecc-utils-design-table-cell class="w-2/12">
+                <ecc-utils-design-skeleton
+                  class="part:h-6 part:w-24 part:rounded-full"
+                ></ecc-utils-design-skeleton>
+              </ecc-utils-design-table-cell>
+              <ecc-utils-design-table-cell class="w-2/12">
+                <ecc-utils-design-skeleton
+                  class="part:h-4 part:w-28"
+                ></ecc-utils-design-skeleton>
+              </ecc-utils-design-table-cell>
+              <ecc-utils-design-table-cell class="w-1/12">
+                <ecc-utils-design-skeleton
+                  class="part:h-8 part:w-8 part:rounded"
+                ></ecc-utils-design-skeleton>
+              </ecc-utils-design-table-cell>
+            </ecc-utils-design-table-row>
+          `
+    )}
+    `;
+  }
+  static getServiceTypeVariant(type) {
+    if (type.group.includes("ga4gh") || type.group.includes("elixir")) {
+      return "secondary";
+    }
+    return "default";
+  }
+  render() {
+    return html`
+      <div class="flex flex-col gap-4">
+        ${this.error ? html`<div
+              class="p-4 border border-destructive rounded-md text-destructive-foreground bg-destructive/10"
+            >
+              ${this.error}
+            </div>` : ""}
+        ${this.search ? html`
+              <div class="flex flex-col gap-1">
+                <ecc-utils-design-label>Search Services</ecc-utils-design-label>
+                <ecc-utils-design-input
+                  class="part:w-full"
+                  placeholder="Search by name, type, organization..."
+                  @ecc-input-changed=${this.handleSearch}
+                ></ecc-utils-design-input>
+              </div>
+            ` : ""}
+
+        <ecc-utils-design-table>
+          <ecc-utils-design-table-header>
+            <ecc-utils-design-table-row>
+              <ecc-utils-design-table-head class="w-7/12"
+                >Service Info</ecc-utils-design-table-head
+              >
+              <ecc-utils-design-table-head class="w-2/12"
+                >Type</ecc-utils-design-table-head
+              >
+              <ecc-utils-design-table-head class="w-2/12"
+                >Organization</ecc-utils-design-table-head
+              >
+              <ecc-utils-design-table-head
+                class="w-1/12"
+              ></ecc-utils-design-table-head>
+            </ecc-utils-design-table-row>
+          </ecc-utils-design-table-header>
+          <ecc-utils-design-table-body>
+            ${(() => {
+      if (this.loading) {
+        return _ECCClientGa4ghServiceRegistryServices.renderSkeletonRows();
+      }
+      if (this.services.length === 0) {
+        return html`
+                  <ecc-utils-design-table-row>
+                    <ecc-utils-design-table-cell
+                      colspan="4"
+                      class="part:text-center part:py-8 part:text-muted-foreground"
+                    >
+                      No services found
+                    </ecc-utils-design-table-cell>
+                  </ecc-utils-design-table-row>
+                `;
+      }
+      return this.services.map(
+        (service) => html`
+                  <ecc-utils-design-table-row>
+                    <ecc-utils-design-table-cell class="w-7/12">
+                      <div class="flex flex-col w-full">
+                        <div class="flex items-center gap-2">
+                          <ecc-utils-design-button
+                            class="part:font-medium part:text-primary part:w-fit part:cursor-pointer part:p-0"
+                            variant="link"
+                            @click=${() => this.handleViewDetails(service.id)}
+                          >
+                            ${service.name || "-"}
+                          </ecc-utils-design-button>
+                          ${service.version ? html`<ecc-utils-design-badge variant="outline">
+                                v${service.version}
+                              </ecc-utils-design-badge>` : ""}
+                        </div>
+                        ${service.description ? html`<div
+                              class="text-xs text-muted-foreground line-clamp-3 break-all whitespace-normal overflow-hidden max-w-full"
+                            >
+                              ${service.description}
+                            </div>` : ""}
+                      </div>
+                    </ecc-utils-design-table-cell>
+                    <ecc-utils-design-table-cell class="w-2/12">
+                      <ecc-utils-design-badge
+                        variant=${_ECCClientGa4ghServiceRegistryServices.getServiceTypeVariant(
+          service.type
+        )}
+                      >
+                        ${service.type.artifact}@${service.type.version}
+                      </ecc-utils-design-badge>
+                    </ecc-utils-design-table-cell>
+                    <ecc-utils-design-table-cell class="w-2/12">
+                      ${service.organization.url ? html`<ecc-utils-design-button
+                            class="part:font-medium part:text-primary part:w-fit part:cursor-pointer part:p-0"
+                            variant="link"
+                            @click=${() => window.open(service.organization.url, "_blank")}
+                          >
+                            ${service.organization.name}
+                          </ecc-utils-design-button>` : html`${service.organization.name}`}
+                    </ecc-utils-design-table-cell>
+                    <ecc-utils-design-table-cell class="w-1/12">
+                      <slot name=${`actions-${service.id}`}>
+                        <ecc-utils-design-button
+                          size="sm"
+                          @click=${() => this.handleViewDetails(service.id)}
+                        >
+                          View Details
+                        </ecc-utils-design-button>
+                      </slot>
+                    </ecc-utils-design-table-cell>
+                  </ecc-utils-design-table-row>
+                `
+      );
+    })()}
+          </ecc-utils-design-table-body>
+        </ecc-utils-design-table>
+      </div>
+    `;
+  }
+};
+_ECCClientGa4ghServiceRegistryServices.styles = [
+  ComponentStyles,
+  GlobalStyles,
+  css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], _ECCClientGa4ghServiceRegistryServices.prototype, "baseUrl", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _ECCClientGa4ghServiceRegistryServices.prototype, "filter", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _ECCClientGa4ghServiceRegistryServices.prototype, "search", 2);
+__decorateClass([
+  property({ attribute: false, reflect: true })
+], _ECCClientGa4ghServiceRegistryServices.prototype, "provider", 2);
+__decorateClass([
+  state()
+], _ECCClientGa4ghServiceRegistryServices.prototype, "searchQuery", 2);
+__decorateClass([
+  state()
+], _ECCClientGa4ghServiceRegistryServices.prototype, "services", 2);
+__decorateClass([
+  state()
+], _ECCClientGa4ghServiceRegistryServices.prototype, "loading", 2);
+__decorateClass([
+  state()
+], _ECCClientGa4ghServiceRegistryServices.prototype, "error", 2);
+__decorateClass([
+  state()
+], _ECCClientGa4ghServiceRegistryServices.prototype, "serviceTypes", 2);
+__decorateClass([
+  state()
+], _ECCClientGa4ghServiceRegistryServices.prototype, "searchTimeout", 2);
+var ECCClientGa4ghServiceRegistryServices = _ECCClientGa4ghServiceRegistryServices;
+
+export { ECCClientGa4ghServiceRegistryServices };

package/dist/chunks/chunk.5EYXDARO.js

@@ -0,0 +1,23 @@
+import { ECCClientGa4ghServiceRegistryService } from './chunk.KXF7UXMG.js';
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+
+var tagName = "ecc-client-ga4gh-service-registry-service";
+if (typeof window !== "undefined" && window.customElements && !window.customElements.get("ecc-client-ga4gh-service-registry-service")) {
+  window.customElements.define(
+    "ecc-client-ga4gh-service-registry-service",
+    ECCClientGa4ghServiceRegistryService
+  );
+}
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: ECCClientGa4ghServiceRegistryService,
+  react: React,
+  events: {
+    onEccServiceChanged: "ecc-service-changed"
+  },
+  displayName: "EccClientGaGhServiceRegistryService"
+});
+var service_default = reactWrapper;
+
+export { service_default };

package/dist/chunks/chunk.EDOYU2FL.js

@@ -0,0 +1 @@
+

package/dist/chunks/chunk.FSZTY25R.js

@@ -0,0 +1,10 @@
+import { ECCClientGa4ghServiceRegistryServices } from './chunk.422CUO5Q.js';
+
+// src/components/services/index.ts
+var services_default = ECCClientGa4ghServiceRegistryServices;
+window.customElements.define(
+  "ecc-client-ga4gh-service-registry-services",
+  ECCClientGa4ghServiceRegistryServices
+);
+
+export { services_default };

package/dist/chunks/chunk.G7EXF7Y5.js

@@ -0,0 +1,24 @@
+import { ECCClientGa4ghServiceRegistryServices } from './chunk.422CUO5Q.js';
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+
+var tagName = "ecc-client-ga4gh-service-registry-services";
+if (typeof window !== "undefined" && window.customElements && !window.customElements.get("ecc-client-ga4gh-service-registry-services")) {
+  window.customElements.define(
+    "ecc-client-ga4gh-service-registry-services",
+    ECCClientGa4ghServiceRegistryServices
+  );
+}
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: ECCClientGa4ghServiceRegistryServices,
+  react: React,
+  events: {
+    onEccServicesChanged: "ecc-services-changed",
+    onEccServiceSelected: "ecc-service-selected"
+  },
+  displayName: "EccClientGaGhServiceRegistryServices"
+});
+var services_default = reactWrapper;
+
+export { services_default };