@startinblox/components-ds4go 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/components-ds4go",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Startin'blox DS4GO",
   "main": "dist/index.js",
   "type": "module",
@@ -83,11 +83,9 @@
     "@storybook/addon-docs": "^10.2.3",
     "@storybook/web-components-vite": "^10.2.3",
     "baseline-browser-mapping": "^2.9.19",
-    "buffer": "^6.0.3",
     "cypress": "^15.9.0",
     "cypress-ct-lit": "^1.0.0",
     "lorem-ipsum": "^2.0.8",
-    "storybook": "^10.2.3",
-    "stream-browserify": "^3.0.0"
+    "storybook": "^10.2.3"
   }
 }

package/src/component.d.ts

@@ -149,6 +149,122 @@ export interface SearchObject {
   type?: string;
 }
 
+export interface DSPComponentParameters extends ComponentParameters {
+  "api-gateway-config"?: string;
+  "participant-connector-uri"?: string;
+  "participant-id"?: string;
+  "participant-api-key"?: string;
+  providers?: {
+    name: string;
+    address: string;
+    participantId: string;
+  }[];
+}
+
+export interface Asset {
+  "@id": string;
+  "@type"?: string;
+  properties?: Record<string, any>;
+  dataAddress?: {
+    "@type"?: string;
+    type?: string;
+    baseUrl?: string;
+    endpoint?: string;
+  };
+  createdAt?: number;
+}
+
+export interface AssetInput {
+  "@id": string;
+  properties?: Record<string, any>;
+  dataAddress?: {
+    "@type": string;
+    type: string;
+    baseUrl?: string;
+  };
+}
+
+interface OdrlPermission {
+  "@type"?: string;
+  action: string | string[];
+  target?: string;
+  constraint?: Constraint[];
+}
+
+interface Prohibition {
+  "@type"?: string;
+  action: string | string[];
+  target?: string;
+  constraint?: Constraint[];
+}
+
+interface Duty {
+  "@type"?: string;
+  action: string | string[];
+  constraint?: Constraint[];
+}
+
+interface Constraint {
+  "@type"?: string;
+  leftOperand: string;
+  operator: string;
+  rightOperand: string | number | boolean;
+}
+
+interface OdrlPolicy {
+  "@type": "Set" | "Offer" | "Agreement";
+  "@id"?: string;
+  target?: string;
+  permission?: OdrlPermission[];
+  prohibition?: Prohibition[];
+  obligation?: Duty[];
+}
+
+export interface PolicyDefinition {
+  "@type"?: string;
+  "@id": string;
+  policy: OdrlPolicy;
+  createdAt?: number;
+}
+
+export interface PolicyDefinitionInput {
+  "@type"?: string;
+  "@id": string;
+  policy: OdrlPolicy;
+}interface AssetSelector {
+	"@type": "CriterionDto";
+	operandLeft: string;
+	operator: string;
+	operandRight: any;
+}
+
+export interface ContractDefinition {
+	"@type": "ContractDefinition";
+	"@id": string;
+	"@context"?: any;
+	accessPolicyId: string;
+	contractPolicyId: string;
+	assetsSelector?: AssetSelector[] | AssetSelector;
+	createdAt?: number;
+}
+
+export interface ContractDefinitionInput {
+	"@id": string;
+	accessPolicyId: string;
+	contractPolicyId: string;
+	assetsSelector?: AssetSelector[];
+}
+
+export interface PolicyDefinition {
+	"@id": string;
+	policy?: OdrlPolicy;
+}
+
+export interface Asset {
+	"@id": string;
+	properties?: Record<string, any>;
+}
+
 export declare global {
   interface Window {
     orbit: LiveOrbit;

package/src/components/solid-dsif-explorer-poc.ts

@@ -0,0 +1,345 @@
+import { formatDate, OrbitComponent, sort } from "@helpers";
+import { msg, str } from "@lit/localize";
+import { Task } from "@lit/task";
+import type { PropertiesPicker, Resource, SearchObject } from "@src/component";
+import { css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// TODO: move to @src/component
+//------------------------------------------------------------------------------
+interface Sector {
+  sectorName: string;
+  description: string;
+  federatedCatalogEndpoint: string;
+  lastUpdated: string;
+  id: string;
+}
+
+interface Catalog {
+  catalogId: string;
+  type: string;
+  description: string;
+  endpoints: {
+    catalog: string;
+  };
+  lastUpdated: string;
+}
+
+interface Dataset extends Resource {
+  "dct:title": string;
+  "dct:description": string;
+  "dct:creator": string;
+}
+
+interface CatalogEntry extends Resource {
+  "dct:title": string;
+  "dct:description": string;
+  "dcat:dataset": Dataset[];
+}
+//------------------------------------------------------------------------------
+
+@customElement("solid-dsif-explorer-poc")
+export class SolidDsifExplorerPoc extends OrbitComponent {
+  static styles = css`
+    .card-grid {
+      margin: var(--scale-900) 0;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+    .card-grid-vertical {
+      justify-content: stretch;
+    }
+    .card-grid-vertical tems-card-catalog {
+      width: 354px;
+      height: auto;
+    }
+    tems-card-catalog.cursor-pointer {
+      cursor: pointer;
+    }
+    tems-division {
+      margin-top: var(--scale-900);
+    }
+  `;
+
+  @property({ attribute: "sector-id", type: String })
+  sectorId?: string;
+
+  @property({ attribute: "catalog-id", type: String })
+  catalogId?: string;
+
+  @state()
+  search: SearchObject[] = [];
+
+  @state()
+  resultCount = this.objects?.length || 0;
+
+  cherryPickedProperties: PropertiesPicker[] = [
+    { key: "dct:title", value: "title" },
+    { key: "dct:description", value: "description" },
+    { key: "dcat:dataset", value: "dataset", expand: true },
+    { key: "dct:creator", value: "creator" },
+  ];
+
+  async _afterAttach() {
+    this.menuComponent = document.querySelector(
+      `[uniq="${this.orbit?.getComponent("menu")?.uniq}"]`,
+    );
+
+    return Promise.resolve();
+  }
+
+  @state()
+  sectors: Sector[] = [];
+
+  @state()
+  catalogs?: Catalog[];
+
+  @state()
+  object?: CatalogEntry;
+
+  _getResource = new Task(this, {
+    task: async ([dataSrc, sectorId, catalogId]) => {
+      if (
+        !dataSrc ||
+        !this.orbit ||
+        (!this.noRouter &&
+          this.route &&
+          this.currentRoute &&
+          !this.route.startsWith(this.currentRoute))
+      )
+        return;
+
+      this.displayFiltering = !this.component.parameters.disableFiltering;
+
+      if (!this.hasCachedDatas) {
+        if (!dataSrc) return;
+
+        this.sectors = [];
+        try {
+          const rootAuthority = await fetch(dataSrc);
+          this.sectors = await rootAuthority.json();
+
+          this.hasCachedDatas = true;
+        } catch (error) {
+          console.warn(`Failed to fetch sector authority ${dataSrc}`, error);
+          return;
+        }
+      }
+
+      if (sectorId) {
+        this.catalogs = [];
+
+        const selectedSectors = this.sectors.filter(
+          (sector) => sector.id === sectorId,
+        );
+
+        if (selectedSectors.length > 0) {
+          this.catalogs = (
+            await Promise.all(
+              selectedSectors.map(async (sector) => {
+                try {
+                  const response = await fetch(
+                    `${sector.federatedCatalogEndpoint}/discovery`,
+                  );
+                  return (await response.json()).catalogs as Catalog[];
+                } catch (error) {
+                  console.warn(
+                    `Failed to fetch sector authority ${sector.federatedCatalogEndpoint}/discovery`,
+                    error,
+                  );
+                  return [];
+                }
+              }),
+            )
+          ).flat();
+        }
+
+        if (catalogId) {
+          // FIXME: What if both sbx and sa use the same catalogId?
+          const selectedCatalog = this.catalogs.find(
+            (catalog) => catalog.catalogId === catalogId,
+          );
+
+          if (selectedCatalog) {
+            try {
+              this.object = (await (
+                await fetch(selectedCatalog.endpoints.catalog)
+              ).json()) as CatalogEntry;
+
+              this.object["dcat:dataset"] = sort(
+                this.object["dcat:dataset"],
+                "dct:title",
+                "asc",
+              );
+
+              return this.object;
+            } catch (error) {
+              console.warn(
+                `Failed to fetch catalog from ${selectedCatalog.endpoints.catalog}`,
+                error,
+              );
+              return;
+            }
+          }
+        }
+        return sort(this.catalogs, "catalogId", "asc");
+      }
+      return sort(this.sectors, "id", "asc");
+    },
+    args: () => [
+      this.dataSrc,
+      this.sectorId,
+      this.catalogId,
+      this.caching,
+      this.currentRoute,
+    ],
+  });
+
+  _search(e: Event) {
+    e.preventDefault();
+    this.search = e.detail;
+    this.filterCount = this.search.filter((s) => s.name !== "search").length;
+  }
+
+  _resultCountUpdate(e: Event) {
+    this.resultCount = e.detail ?? 0;
+  }
+
+  _back() {
+    if (this.catalogId) {
+      this.catalogId = "";
+    } else if (this.sectorId) {
+      this.sectorId = "";
+    }
+  }
+
+  _selectSector(sectorId: string) {
+    if (this.sectors.find((sector) => sector.id === sectorId)) {
+      this.sectorId = sectorId;
+    } else {
+      this.sectorId = "";
+    }
+  }
+
+  _selectCatalog(catalogId: string) {
+    if (this.catalogs?.find((catalog) => catalog.catalogId === catalogId)) {
+      this.catalogId = catalogId;
+    } else {
+      this.catalogId = "";
+    }
+  }
+
+  render() {
+    return (
+      this.gatekeeper() ||
+      this._getResource.render({
+        pending: () => html`<solid-loader></solid-loader>`,
+        error: (e) => {
+          console.warn("[solid-dsif-explorer-poc] Task error:", e);
+          return nothing;
+        },
+        complete: (datas) => {
+          return html`<tems-viewport>
+            <tems-header
+              slot="header"
+              heading=${this.catalogId
+                ? `${msg("Datasets from")}
+                  ${(datas as CatalogEntry)["dct:title"]} (From ${this.sectorId})`
+                : this.sectorId
+                  ? `${msg("Catalogs available in")} ${this.sectorId}`
+                  : `${msg("Root Authority")}`}
+              >${this.sectorId || this.catalogId
+                ? html` <div slot="cta">
+                    <tems-button
+                      type="primary"
+                      label=${msg(
+                        str`Back to ${this.catalogId ? this.sectorId : "Root Authority"}`,
+                      )}
+                      @click=${this._back}
+                    ></tems-button>
+                  </div>`
+                : nothing}</tems-header
+            >
+            <div slot="content">
+              ${datas
+                ? html`<div>
+                    ${this.catalogId
+                      ? html`<tems-division type="body-m"
+                          >${(datas as CatalogEntry)[
+                            "dct:description"
+                          ]}</tems-division
+                        >`
+                      : nothing}
+                    <div class="card-grid card-grid-vertical">
+                      ${this.catalogId
+                        ? html`${(datas as CatalogEntry)["dcat:dataset"].map(
+                            (dataset: Dataset) =>
+                              html`<tems-card-catalog
+                                .object=${import.meta.env.DEV
+                                  ? dataset
+                                  : nothing}
+                                type=${"bill-image"}
+                                .header=${dataset["dct:title"] || nothing}
+                                .content=${dataset["dct:description"] ||
+                                nothing}
+                              ></tems-card-catalog>`,
+                          )}`
+                        : this.sectorId
+                          ? html`${datas.map(
+                              (catalog: Catalog) =>
+                                html`<tems-card-catalog
+                                  class="cursor-pointer"
+                                  .object=${import.meta.env.DEV
+                                    ? catalog
+                                    : nothing}
+                                  type=${"bill-image"}
+                                  .header=${catalog.catalogId || nothing}
+                                  .content=${catalog.description || nothing}
+                                  date=${formatDate(catalog.lastUpdated) ||
+                                  nothing}
+                                  @click=${() =>
+                                    this._selectCatalog(catalog.catalogId)}
+                                ></tems-card-catalog>`,
+                            )}`
+                          : html`${datas.map(
+                              (sector: Sector) =>
+                                html`<tems-card-catalog
+                                  class="cursor-pointer"
+                                  .object=${import.meta.env.DEV
+                                    ? sector
+                                    : nothing}
+                                  type=${"bill-image"}
+                                  .header=${sector.id || nothing}
+                                  .content=${sector.description || nothing}
+                                  date=${formatDate(sector.lastUpdated) ||
+                                  nothing}
+                                  @click=${() => this._selectSector(sector.id)}
+                                ></tems-card-catalog>`,
+                            )}`}
+                    </div>
+                  </div>`
+                : html`<p>
+                      ${msg(
+                        "No data available, data source may be temporarily unavailable.",
+                      )}
+                    </p>
+                    ${this.sectorId || this.catalogId
+                      ? html`<tems-button
+                          type="primary"
+                          label=${msg("Back")}
+                          @click=${this._back}
+                        ></tems-button>`
+                      : html`<tems-button
+                          type="primary"
+                          label=${msg("Retry")}
+                          @click=${this.requestUpdate}
+                        ></tems-button>`}`}
+            </div>
+          </tems-viewport>`;
+        },
+      })
+    );
+  }
+}

package/src/components/solid-dsp-connector.ts

@@ -0,0 +1,185 @@
+import { dspComponent } from "@helpers";
+import { Task } from "@lit/task";
+import type { Asset, AssetInput, ContractDefinition, ContractDefinitionInput, PolicyDefinition, PolicyDefinitionInput, Resource } from "@src/component";
+import { nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+export interface DSPProviderConfig {
+  name: string;
+  address: string;
+  color?: string;
+  participantId?: string;
+}
+
+@customElement("solid-dsp-connector")
+export class SolidDspConnector extends dspComponent {
+  async _responseAdaptator(response: Resource): Promise<Resource> {
+    if (response.providers) {
+      if (!Array.isArray(response.providers)) {
+        response.providers = [response.providers].filter((i: any) => i);
+      }
+    } else if (response.provider) {
+      response.providers = [response.provider].filter((i: any) => i);
+    }
+    return response;
+  }
+
+  @state()
+  assets: Asset[] = [];
+
+  private async loadAssets() {
+    if (!this.storeService) {
+      console.error("Store not initialized. Check connector configuration.");
+      return;
+    }
+
+    try {
+      const assets = await this.storeService.getAllAssets();
+      this.assets = Array.isArray(assets) ? assets : [];
+    } catch (e) {
+      console.error("Failed to load assets:", e);
+    }
+  }
+
+  public async createAsset(assetData: AssetInput) {
+    if (!this.storeService) return false;
+
+    try {
+      // TODO: Check asset integrity & reject
+      await this.storeService.createAsset(assetData);
+      await this.loadAssets();
+
+      this.dispatchEvent(
+        new CustomEvent("asset-created", {
+          detail: { asset: assetData },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+
+      return true;
+    } catch (e) {
+      console.error("Failed to create asset", e);
+      return false;
+    }
+  }
+
+  @state()
+  policies: PolicyDefinition[] = [];
+
+  private async loadPolicies() {
+    if (!this.storeService) {
+      console.error("Store not initialized. Check connector configuration.");
+      return;
+    }
+
+    try {
+      const policies = await this.storeService.getAllPolicies();
+      this.policies = Array.isArray(policies) ? policies : [];
+    } catch (e) {
+      console.error("Failed to load policies", e);
+    }
+  }
+
+  public async createPolicy(policyData: PolicyDefinitionInput) {
+    if (!this.storeService) return false;
+
+    try {
+      // TODO: Check policy integrity & reject
+      await this.storeService.createPolicy(policyData);
+      await this.loadPolicies();
+
+      this.dispatchEvent(
+        new CustomEvent("policy-created", {
+          detail: { policy: policyData },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+
+      return true;
+    } catch (e) {
+      console.error("Failed to create policy", e);
+      return false;
+    }
+  }
+
+  @state()
+  contracts: ContractDefinition[] = [];
+
+  private async loadContracts() {
+    if (!this.storeService) {
+      console.error("Store not initialized. Check connector configuration.");
+      return;
+    }
+
+    try {
+      // TODO: Check contract integrity & reject
+      const contracts = await this.storeService.getAllContractDefinitions();
+      this.contracts = Array.isArray(contracts) ? contracts : [];
+    } catch (e) {
+      console.error("Failed to load contract definitions", e);
+    }
+  }
+
+  public async createContract(contractData: ContractDefinitionInput) {
+    if (!this.storeService) return false;
+
+    try {
+      await this.storeService.createContractDefinition(contractData);
+      await this.loadContracts();
+
+      this.dispatchEvent(
+        new CustomEvent("contract-created", {
+          detail: { contract: contractData },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+
+      return true;
+    } catch (e) {
+      console.error("Failed to create contract definition", e);
+      return false;
+    }
+  }
+
+  _getResource = new Task(this, {
+    task: async () => {
+      if (!this.orbit) return;
+
+      if (!this.hasCachedDatas) {
+        const datasets = await this.fetchFederatedCatalog();
+
+        if (datasets !== undefined && Array.isArray(datasets)) {
+          this.datas = await Promise.all(
+            datasets.map(
+              async (dataset) => await this._responseAdaptator(dataset),
+            ),
+          );
+          this.hasCachedDatas = true;
+        }
+      }
+
+      if (!Array.isArray(this.datas)) {
+        this.datas = [];
+      }
+
+      return this.datas;
+    },
+    args: () => [this.caching, this.currentRoute],
+  });
+
+  render() {
+    return this._getResource.render({
+      pending: () => nothing,
+      complete: () => nothing,
+      error: (e) => {
+        if (import.meta.env.DEV) {
+          console.error(e, this);
+        }
+        return nothing;
+      },
+    });
+  }
+}