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

package/dist/chunks/chunk.KXF7UXMG.js

@@ -0,0 +1,477 @@
+import { ComponentStyles } from './chunk.TWJOFBJX.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/badge/index.js';
+import '@elixir-cloud/design/components/skeleton/index.js';
+import '@elixir-cloud/design/components/card/index.js';
+import '@elixir-cloud/design/components/tabs/index.js';
+import '@elixir-cloud/design/components/separator/index.js';
+
+var _ECCClientGa4ghServiceRegistryService = class _ECCClientGa4ghServiceRegistryService extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.baseUrl = "";
+    this.serviceId = "";
+    this.service = null;
+    this.loading = false;
+    this.error = 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.serviceId) {
+      this.error = "Please provide a service ID.";
+      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 && this.serviceId) {
+      await this.loadData();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("baseUrl") && this.baseUrl || changedProperties.has("serviceId") && this.serviceId) {
+      if (this.baseUrl) {
+        this._provider = new RestServiceRegistryProvider(this.baseUrl);
+      }
+      if (this.serviceId && this._provider) {
+        this.loadData();
+      }
+    }
+  }
+  async loadData() {
+    if (!this._provider || !this.serviceId) return;
+    this.loading = true;
+    this.error = null;
+    try {
+      const service = await this._provider.getServiceById(this.serviceId);
+      this.service = service;
+      this.dispatchEvent(
+        new CustomEvent("ecc-service-changed", {
+          detail: { service },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : "Failed to load service";
+      console.error({
+        error: this.error,
+        breakPoint: "ECCClientGa4ghServiceRegistryService.loadData"
+      });
+    } finally {
+      this.loading = false;
+    }
+  }
+  static formatDate(dateString) {
+    if (!dateString) return "Not specified";
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleString();
+    } catch (e) {
+      return dateString;
+    }
+  }
+  static getTypeVariant(group) {
+    if (group.includes("ga4gh") || group.includes("elixir")) {
+      return "secondary";
+    }
+    return "default";
+  }
+  renderServiceHeader() {
+    if (!this.service) return html``;
+    return html`
+      <div class="mb-6">
+        <div class="w-full flex flex-col gap-2">
+          <div
+            class="flex flex-col md:flex-row md:items-center gap-2 justify-between"
+          >
+            <div class="flex flex-col md:flex-row md:items-center gap-2">
+              <h2 class="text-xl truncate">
+                ${this.service.name || this.service.id}
+              </h2>
+              ${this.service.version ? html`<ecc-utils-design-badge variant="outline">
+                    v${this.service.version}
+                  </ecc-utils-design-badge>` : ""}
+            </div>
+            ${this.service.contactUrl ? html`
+                  <a
+                    href="${this.service.contactUrl}"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-primary hover:text-primary/80 flex items-center gap-1"
+                    title="Contact"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="lucide lucide-mail-icon lucide-mail"
+                    >
+                      <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
+                      <rect x="2" y="4" width="20" height="16" rx="2" />
+                    </svg>
+                  </a>
+                ` : ""}
+          </div>
+
+          <div class="flex flex-wrap gap-2 items-center">
+            <ecc-utils-design-badge
+              variant=${_ECCClientGa4ghServiceRegistryService.getTypeVariant(
+      this.service.type.group
+    )}
+            >
+              ${this.service.type.artifact}@${this.service.type.version}
+            </ecc-utils-design-badge>
+            ${this.service.environment ? html`<ecc-utils-design-badge variant="outline">
+                  ${this.service.environment}
+                </ecc-utils-design-badge>` : ""}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderServiceContent() {
+    if (!this.service) return html``;
+    const { type } = this.service;
+    return html`
+      <div class="mt-4">
+        <div class="flex flex-col gap-4 text-sm">
+          <!-- Service Information Section -->
+          <div class="flex flex-col gap-2">
+            <div class="font-bold text-base">Service Information</div>
+            <div class="flex flex-col gap-3">
+              ${this.service.description ? html`
+                    <div>
+                      ${this.service.description.split("\n").map((line) => html`<p>${line}</p>`)}
+                    </div>
+                  ` : ""}
+              <div>
+                <dl class="flex flex-col gap-2">
+                  <div class="flex flex-row gap-2 w-full justify-between">
+                    <dt class="text-muted-foreground">ID</dt>
+                    <dd class="font-mono">${this.service.id}</dd>
+                  </div>
+                  <ecc-utils-design-separator></ecc-utils-design-separator>
+                  <div class="flex flex-row gap-2 w-full justify-between">
+                    <dt class="text-muted-foreground">Version</dt>
+                    <dd>${this.service.version || "Not specified"}</dd>
+                  </div>
+                  <ecc-utils-design-separator></ecc-utils-design-separator>
+                  <div class="flex flex-row gap-2 w-full justify-between">
+                    <dt class="text-muted-foreground">Organization</dt>
+                    <dd>
+                      ${this.service.organization.url ? html`
+                            <a
+                              href="${this.service.organization.url}"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              class="text-primary hover:underline flex items-center gap-1"
+                            >
+                              ${this.service.organization.name}
+                              <svg
+                                class="w-3.5"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                              >
+                                <path d="M13 5H19V11" />
+                                <path d="M19 5L5 19" />
+                              </svg>
+                            </a>
+                          ` : html`${this.service.organization.name}`}
+                    </dd>
+                  </div>
+                  <ecc-utils-design-separator></ecc-utils-design-separator>
+                  <div class="flex flex-row gap-2 w-full justify-between">
+                    <dt class="text-muted-foreground">Environment</dt>
+                    <dd>${this.service.environment || "Not specified"}</dd>
+                  </div>
+                  <ecc-utils-design-separator></ecc-utils-design-separator>
+                  <div class="flex flex-row gap-2 w-full justify-between">
+                    <dt class="text-muted-foreground">Service URL</dt>
+                    <dd>
+                      <a
+                        href="${this.service.url}"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-primary hover:underline break-all"
+                      >
+                        ${this.service.url}
+                      </a>
+                    </dd>
+                  </div>
+                </dl>
+              </div>
+            </div>
+          </div>
+
+          <ecc-utils-design-separator></ecc-utils-design-separator>
+
+          <!-- Service Type Section -->
+          <div class="flex flex-col gap-2">
+            <div class="font-bold text-base">Service Type</div>
+            <div class="flex flex-col gap-3">
+              <div>
+                <dl class="flex flex-col gap-2">
+                  <div class="flex flex-row gap-2 w-full justify-between">
+                    <dt class="text-muted-foreground">Group</dt>
+                    <dd>
+                      <ecc-utils-design-badge
+                        variant=${_ECCClientGa4ghServiceRegistryService.getTypeVariant(
+      type.group
+    )}
+                      >
+                        ${type.group}
+                      </ecc-utils-design-badge>
+                    </dd>
+                  </div>
+                  <ecc-utils-design-separator></ecc-utils-design-separator>
+                  <div class="flex flex-row gap-2 w-full justify-between">
+                    <dt class="text-muted-foreground">Artifact</dt>
+                    <dd>${type.artifact}</dd>
+                  </div>
+                  <ecc-utils-design-separator></ecc-utils-design-separator>
+                  <div class="flex flex-row gap-2 w-full justify-between">
+                    <dt class="text-muted-foreground">Type Version</dt>
+                    <dd>${type.version}</dd>
+                  </div>
+                </dl>
+              </div>
+            </div>
+          </div>
+
+          <ecc-utils-design-separator></ecc-utils-design-separator>
+
+          <!-- Additional Information Section -->
+          ${this.service.documentationUrl || this.service.createdAt || this.service.updatedAt ? html`
+                <ecc-utils-design-separator></ecc-utils-design-separator>
+                <div class="flex flex-col gap-2">
+                  <div class="font-bold text-base">Additional Information</div>
+                  <div>
+                    <dl class="flex flex-col gap-2">
+                      ${this.service.documentationUrl ? html`
+                            <div
+                              class="flex flex-row gap-2 w-full justify-between"
+                            >
+                              <dt class="text-muted-foreground">
+                                Documentation
+                              </dt>
+                              <dd>
+                                <a
+                                  href="${this.service.documentationUrl}"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  class="text-primary hover:underline break-all"
+                                >
+                                  ${this.service.documentationUrl}
+                                </a>
+                              </dd>
+                            </div>
+                            <ecc-utils-design-separator></ecc-utils-design-separator>
+                          ` : ""}
+                      ${this.service.createdAt ? html`
+                            <div
+                              class="flex flex-row gap-2 w-full justify-between"
+                            >
+                              <dt class="text-muted-foreground">Created</dt>
+                              <dd>
+                                ${_ECCClientGa4ghServiceRegistryService.formatDate(
+      this.service.createdAt
+    )}
+                              </dd>
+                            </div>
+                            <ecc-utils-design-separator></ecc-utils-design-separator>
+                          ` : ""}
+                      ${this.service.updatedAt ? html`
+                            <div
+                              class="flex flex-row gap-2 w-full justify-between"
+                            >
+                              <dt class="text-muted-foreground">
+                                Last Updated
+                              </dt>
+                              <dd>
+                                ${_ECCClientGa4ghServiceRegistryService.formatDate(
+      this.service.updatedAt
+    )}
+                              </dd>
+                            </div>
+                          ` : ""}
+                    </dl>
+                  </div>
+                </div>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+  static renderLoading() {
+    return html`
+      <div class="space-y-6">
+        <!-- Service header skeleton -->
+        <div class="mb-6">
+          <div class="flex flex-col gap-2">
+            <div class="flex flex-col md:flex-row md:items-center gap-2">
+              <ecc-utils-design-skeleton
+                class="part:h-10 part:w-64"
+              ></ecc-utils-design-skeleton>
+              <ecc-utils-design-skeleton
+                class="part:h-6 part:w-20"
+              ></ecc-utils-design-skeleton>
+            </div>
+            <div class="flex flex-wrap gap-2 mt-2">
+              <ecc-utils-design-skeleton
+                class="part:h-6 part:w-32"
+              ></ecc-utils-design-skeleton>
+              <ecc-utils-design-skeleton
+                class="part:h-6 part:w-20"
+              ></ecc-utils-design-skeleton>
+            </div>
+          </div>
+        </div>
+
+        <!-- Content skeleton -->
+        <div class="mt-4">
+          <div class="flex flex-col gap-4">
+            <div>
+              <ecc-utils-design-skeleton
+                class="part:h-6 part:w-48 part:mb-3"
+              ></ecc-utils-design-skeleton>
+              <div class="flex flex-col gap-3">
+                <ecc-utils-design-skeleton
+                  class="part:h-4 part:w-full"
+                ></ecc-utils-design-skeleton>
+                <ecc-utils-design-skeleton
+                  class="part:h-4 part:w-full"
+                ></ecc-utils-design-skeleton>
+                <ecc-utils-design-skeleton
+                  class="part:h-4 part:w-3/4"
+                ></ecc-utils-design-skeleton>
+              </div>
+            </div>
+
+            <ecc-utils-design-separator></ecc-utils-design-separator>
+
+            <div>
+              <ecc-utils-design-skeleton
+                class="part:h-6 part:w-32 part:mb-3"
+              ></ecc-utils-design-skeleton>
+              <div class="flex flex-col gap-2">
+                <div class="flex justify-between">
+                  <ecc-utils-design-skeleton
+                    class="part:h-4 part:w-24"
+                  ></ecc-utils-design-skeleton>
+                  <ecc-utils-design-skeleton
+                    class="part:h-4 part:w-32"
+                  ></ecc-utils-design-skeleton>
+                </div>
+                <ecc-utils-design-separator></ecc-utils-design-separator>
+                <div class="flex justify-between">
+                  <ecc-utils-design-skeleton
+                    class="part:h-4 part:w-20"
+                  ></ecc-utils-design-skeleton>
+                  <ecc-utils-design-skeleton
+                    class="part:h-4 part:w-40"
+                  ></ecc-utils-design-skeleton>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    if (!this.baseUrl && !this.provider) {
+      return html`
+        <div
+          class="p-4 border border-destructive rounded-md text-destructive-foreground bg-destructive/10"
+        >
+          Please provide either a base URL for the Service Registry API or a
+          custom provider.
+        </div>
+      `;
+    }
+    if (!this.serviceId) {
+      return html`
+        <div
+          class="p-4 border border-destructive rounded-md text-destructive-foreground bg-destructive/10"
+        >
+          Please provide a service ID.
+        </div>
+      `;
+    }
+    if (this.error) {
+      return html`
+        <div
+          class="p-4 border border-destructive rounded-md text-destructive-foreground bg-destructive/10"
+        >
+          ${this.error}
+        </div>
+      `;
+    }
+    if (this.loading || !this.service) {
+      return _ECCClientGa4ghServiceRegistryService.renderLoading();
+    }
+    return html`
+      <div class="space-y-4">
+        ${this.renderServiceHeader()} ${this.renderServiceContent()}
+      </div>
+    `;
+  }
+};
+_ECCClientGa4ghServiceRegistryService.styles = [
+  ComponentStyles,
+  GlobalStyles,
+  css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], _ECCClientGa4ghServiceRegistryService.prototype, "baseUrl", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], _ECCClientGa4ghServiceRegistryService.prototype, "serviceId", 2);
+__decorateClass([
+  property({ attribute: false, reflect: true })
+], _ECCClientGa4ghServiceRegistryService.prototype, "provider", 2);
+__decorateClass([
+  state()
+], _ECCClientGa4ghServiceRegistryService.prototype, "service", 2);
+__decorateClass([
+  state()
+], _ECCClientGa4ghServiceRegistryService.prototype, "loading", 2);
+__decorateClass([
+  state()
+], _ECCClientGa4ghServiceRegistryService.prototype, "error", 2);
+var ECCClientGa4ghServiceRegistryService = _ECCClientGa4ghServiceRegistryService;
+var service_default = ECCClientGa4ghServiceRegistryService;
+
+export { ECCClientGa4ghServiceRegistryService, service_default };

package/dist/chunks/chunk.L4ERSGP3.js

@@ -0,0 +1,59 @@
+// src/providers/rest-sr-provider.ts
+var RestServiceRegistryProvider = class {
+  // eslint-disable-next-line no-useless-constructor
+  constructor(baseUrl) {
+    this.baseUrl = baseUrl;
+  }
+  /**
+   * Fetch list of services from the registry
+   * @returns Promise resolving to array of services
+   */
+  async getServices() {
+    const url = `${this.baseUrl}/services`;
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch services: ${response.statusText}`);
+    }
+    return response.json();
+  }
+  /**
+   * Fetch a specific service by ID
+   * @param serviceId ID of the service to fetch
+   * @returns Promise resolving to service details
+   */
+  async getServiceById(serviceId) {
+    const encodedServiceId = encodeURIComponent(serviceId);
+    const url = `${this.baseUrl}/services/${encodedServiceId}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch service: ${response.statusText}`);
+    }
+    return response.json();
+  }
+  /**
+   * Fetch types of services exposed by the registry
+   * @returns Promise resolving to array of service types
+   */
+  async getServiceTypes() {
+    const url = `${this.baseUrl}/services/types`;
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch service types: ${response.statusText}`);
+    }
+    return response.json();
+  }
+  /**
+   * Fetch information about the registry
+   * @returns Promise resolving to service information
+   */
+  async getServiceInfo() {
+    const url = `${this.baseUrl}/service-info`;
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch service info: ${response.statusText}`);
+    }
+    return response.json();
+  }
+};
+
+export { RestServiceRegistryProvider };

package/dist/chunks/chunk.P4Y7MKRA.js

@@ -0,0 +1 @@
+

package/dist/chunks/chunk.SWMR6FP7.js

@@ -0,0 +1,97 @@
+import { css } from 'lit';
+
+// src/global.ts
+var GlobalStyles = css`
+  :host {
+    --background: var(--ecc-background, oklch(1 0 0));
+    --foreground: var(--ecc-foreground, oklch(0.145 0 0));
+    --card: var(--ecc-card, oklch(1 0 0));
+    --card-foreground: var(--ecc-card-foreground, oklch(0.145 0 0));
+    --popover: var(--ecc-popover, oklch(1 0 0));
+    --popover-foreground: var(--ecc-popover-foreground, oklch(0.145 0 0));
+    --primary: var(--ecc-primary, oklch(0.205 0 0));
+    --primary-foreground: var(--ecc-primary-foreground, oklch(0.985 0 0));
+    --secondary: var(--ecc-secondary, oklch(0.97 0 0));
+    --secondary-foreground: var(--ecc-secondary-foreground, oklch(0.205 0 0));
+    --muted: var(--ecc-muted, oklch(0.97 0 0));
+    --muted-foreground: var(--ecc-muted-foreground, oklch(0.556 0 0));
+    --accent: var(--ecc-accent, oklch(0.97 0 0));
+    --accent-foreground: var(--ecc-accent-foreground, oklch(0.205 0 0));
+    --destructive: var(--ecc-destructive, oklch(0.577 0.245 27.325));
+    --destructive-foreground: var(
+      --ecc-destructive-foreground,
+      oklch(0.985 0 0)
+    );
+    --border: var(--ecc-border, oklch(0.922 0 0));
+    --input: var(--ecc-input, oklch(0.922 0 0));
+    --ring: var(--ecc-ring, oklch(0.708 0 0));
+    --chart-1: var(--ecc-chart-1, oklch(0.646 0.222 41.116));
+    --chart-2: var(--ecc-chart-2, oklch(0.6 0.118 184.704));
+    --chart-3: var(--ecc-chart-3, oklch(0.398 0.07 227.392));
+    --chart-4: var(--ecc-chart-4, oklch(0.828 0.189 84.429));
+    --chart-5: var(--ecc-chart-5, oklch(0.769 0.188 70.08));
+    --radius: var(--ecc-radius, 0.625rem);
+    --sidebar: var(--ecc-sidebar, oklch(0.985 0 0));
+    --sidebar-foreground: var(--ecc-sidebar-foreground, oklch(0.145 0 0));
+    --sidebar-primary: var(--ecc-sidebar-primary, oklch(0.205 0 0));
+    --sidebar-primary-foreground: var(
+      --ecc-sidebar-primary-foreground,
+      oklch(0.985 0 0)
+    );
+    --sidebar-accent: var(--ecc-sidebar-accent, oklch(0.97 0 0));
+    --sidebar-accent-foreground: var(
+      --ecc-sidebar-accent-foreground,
+      oklch(0.205 0 0)
+    );
+    --sidebar-border: var(--ecc-sidebar-border, oklch(0.922 0 0));
+    --sidebar-ring: var(--ecc-sidebar-ring, oklch(0.708 0 0));
+  }
+
+  :host([dark]),
+  :host-context([dark]),
+  :host-context(.dark) {
+    --background: var(--ecc-background, oklch(0.145 0 0));
+    --foreground: var(--ecc-foreground, oklch(0.985 0 0));
+    --card: var(--ecc-card, oklch(0.145 0 0));
+    --card-foreground: var(--ecc-card-foreground, oklch(0.985 0 0));
+    --popover: var(--ecc-popover, oklch(0.145 0 0));
+    --popover-foreground: var(--ecc-popover-foreground, oklch(0.985 0 0));
+    --primary: var(--ecc-primary, oklch(0.985 0 0));
+    --primary-foreground: var(--ecc-primary-foreground, oklch(0.205 0 0));
+    --secondary: var(--ecc-secondary, oklch(0.269 0 0));
+    --secondary-foreground: var(--ecc-secondary-foreground, oklch(0.985 0 0));
+    --muted: var(--ecc-muted, oklch(0.269 0 0));
+    --muted-foreground: var(--ecc-muted-foreground, oklch(0.708 0 0));
+    --accent: var(--ecc-accent, oklch(0.269 0 0));
+    --accent-foreground: var(--ecc-accent-foreground, oklch(0.985 0 0));
+    --destructive: var(--ecc-destructive, oklch(0.396 0.141 25.723));
+    --destructive-foreground: var(
+      --ecc-destructive-foreground,
+      oklch(0.637 0.237 25.331)
+    );
+    --border: var(--ecc-border, oklch(0.269 0 0));
+    --input: var(--ecc-input, oklch(0.269 0 0));
+    --ring: var(--ecc-ring, oklch(0.439 0 0));
+    --chart-1: var(--ecc-chart-1, oklch(0.488 0.243 264.376));
+    --chart-2: var(--ecc-chart-2, oklch(0.696 0.17 162.48));
+    --chart-3: var(--ecc-chart-3, oklch(0.769 0.188 70.08));
+    --chart-4: var(--ecc-chart-4, oklch(0.627 0.265 303.9));
+    --chart-5: var(--ecc-chart-5, oklch(0.645 0.246 16.439));
+    --sidebar: var(--ecc-sidebar, oklch(0.205 0 0));
+    --sidebar-foreground: var(--ecc-sidebar-foreground, oklch(0.985 0 0));
+    --sidebar-primary: var(--ecc-sidebar-primary, oklch(0.488 0.243 264.376));
+    --sidebar-primary-foreground: var(
+      --ecc-sidebar-primary-foreground,
+      oklch(0.985 0 0)
+    );
+    --sidebar-accent: var(--ecc-sidebar-accent, oklch(0.269 0 0));
+    --sidebar-accent-foreground: var(
+      --ecc-sidebar-accent-foreground,
+      oklch(0.985 0 0)
+    );
+    --sidebar-border: var(--ecc-sidebar-border, oklch(0.269 0 0));
+    --sidebar-ring: var(--ecc-sidebar-ring, oklch(0.439 0 0));
+  }
+`;
+
+export { GlobalStyles };