@startinblox/components-ds4go 1.0.0

package/src/helpers/components/dspComponent.ts

@@ -0,0 +1,243 @@
+import { OrbitComponent, setupComponentSubscriptions } from "@helpers";
+import { ResourceMapper } from "@helpers/components/ResourceMapper";
+import { dspMappingConfig } from "@helpers/mappings/dsp-mapping-config";
+import type { Resource } from "@src/component.d.ts";
+import { StoreService, StoreType } from "@startinblox/core";
+import { property, state } from "lit/decorators.js";
+
+export interface DSPProviderConfig {
+  name: string;
+  address: string;
+  color?: string;
+  participantId?: string;
+}
+
+export default class extends OrbitComponent {
+  @property({ attribute: "participant-connector-uri", reflect: true })
+  participantConnectorUri?: string;
+
+  @property({ attribute: "participant-id", reflect: true })
+  participantId?: string;
+
+  @property({ attribute: "participant-api-key", reflect: true })
+  participantApiKey?: string;
+
+  @property({ attribute: "providers", type: Array })
+  private _providers: DSPProviderConfig[] = [];
+
+  public get providers(): DSPProviderConfig[] {
+    return this._providers;
+  }
+  
+  public set providers(value: DSPProviderConfig[]) {
+    if (typeof value === "string") {
+      try {
+        this._providers = JSON.parse(value);
+      } catch (_e) {
+        this._providers = [];
+      }
+    } else {
+      this._providers = value || [];
+    }
+  }
+
+  @property({ attribute: "api-gateway-config", reflect: true })
+  apiGatewayConfig?: string;
+
+  @state()
+  storeService?: any;
+
+  @state()
+  dspStoreService?: any;
+
+  @state()
+  _apiGatewayConfigParsed?: any;
+
+  protected async _attach(
+    defaultRoute: boolean,
+    setupSubscriptions: boolean,
+    ignoreRouter: boolean,
+  ) {
+    if (!this.orbit) {
+      if (window.orbit) {
+        this.orbit = window.orbit;
+        if (setupSubscriptions) {
+          setupComponentSubscriptions({
+            component: this,
+            defaultRoute: defaultRoute,
+            ignoreRouter: ignoreRouter,
+          });
+          if (this.route) {
+            this.component = this.orbit.getComponentFromRoute(this.route);
+            if (this.component) {
+              this.orbit.components.map((c) => {
+                if (c.uniq === this.component.uniq) {
+                  c.instance = this;
+                }
+                return c;
+              });
+            }
+          }
+
+          // Get connector configuration from attributes or component params
+          if (!this.participantConnectorUri) {
+            const params = this.component?.parameters as any;
+            if (params?.["participant-connector-uri"]) {
+              this.participantConnectorUri =
+                params["participant-connector-uri"];
+            }
+            if (params?.["participant-api-key"]) {
+              this.participantApiKey = params["participant-api-key"];
+            }
+            if (params?.providers) {
+              this.providers = params.providers;
+            }
+            if (params?.["participant-id"]) {
+              this.participantId = params["participant-id"];
+            }
+          }
+
+          // Parse API Gateway configuration (OPTIONAL)
+          const params = this.component?.parameters as any;
+
+          if (params?.["api-gateway-config"]) {
+            this.apiGatewayConfig = params["api-gateway-config"];
+            try {
+              this._apiGatewayConfigParsed =
+                typeof this.apiGatewayConfig === "string"
+                  ? JSON.parse(this.apiGatewayConfig)
+                  : this.apiGatewayConfig;
+            } catch (_error) {
+              this._apiGatewayConfigParsed = null;
+            }
+          }
+
+          // Initialize DataspaceConnectorStore
+          if (!this.storeService && this.participantConnectorUri) {
+            try {
+              // Use unique store name based on component ID to avoid singleton conflicts
+              const storeName = `dsp-connector-${this.component.uniq}`;
+
+              const config = {
+                type: StoreType.DataspaceConnector,
+                endpoint: this.participantConnectorUri,
+                catalogEndpoint: `${this.participantConnectorUri}/management/v3/catalog/request`,
+                contractNegotiationEndpoint: `${this.participantConnectorUri}/management/v3/contractnegotiations`,
+                transferProcessEndpoint: `${this.participantConnectorUri}/management/v3/transferprocesses`,
+                edrsEndpoint: `${this.participantConnectorUri}/management/v3/edrs`,
+                authMethod: "dsp-api-key",
+                dspApiKey: this.participantApiKey || "password",
+                participantId: this.participantId || "stbx-consumer",
+                retryAttempts: 10,
+                timeout: 30000,
+                // Include API Gateway configuration ONLY if available
+                ...(this._apiGatewayConfigParsed && {
+                  apiGatewayConfig: this._apiGatewayConfigParsed,
+                }),
+              };
+
+              this.storeService = StoreService.addStore(storeName, config);
+              // Also set dspStoreService for contract negotiation in tems-modal
+              this.dspStoreService = this.storeService;
+              // Expose globally for FederatedIndexManager auto-negotiation
+              if (!window.dspStore) {
+                window.dspStore = this.storeService;
+              }
+            } catch (error) {
+              console.error("DSP Store initialization error:", error);
+            }
+          }
+          await this._afterAttach();
+          return Promise.resolve(true);
+        }
+      }
+    }
+    return Promise.resolve(false);
+  }
+
+  /**
+   * Fetch catalog from multiple DSP providers
+   */
+  async fetchFederatedCatalog(): Promise<Resource[]> {
+    if (!this.storeService || !this.providers || this.providers.length === 0) {
+      console.warn("DSP store or providers not configured");
+      return [];
+    }
+
+    try {
+      // FIXME: Avoid magic strings
+      // Use default base URLs for TEMS resources
+      const baseURL = "https://api.tems.example.com/services/";
+
+      // Initialize ResourceMapper with DSP configuration
+      const mapper = new ResourceMapper(dspMappingConfig);
+
+      const catalogPromises = this.providers.map(async (provider) => {
+        try {
+          const catalog = await this.storeService.getCatalog(provider.address);
+
+          if (catalog?.["dcat:dataset"]) {
+            // Normalize datasets to array - catalog may return single object if only one dataset
+            const rawDatasets = catalog["dcat:dataset"];
+            const datasets = Array.isArray(rawDatasets)
+              ? rawDatasets
+              : [rawDatasets];
+            // IMPORTANT: Prefer config's participantId over catalog response
+            // This ensures assets from different providers are distinguishable
+            // even if EDC catalogs return the same participantId (misconfiguration)
+            const catalogResponseParticipantId =
+              catalog.participantId ||
+              catalog["edc:participantId"] ||
+              catalog["https://w3id.org/edc/v0.0.1/ns/participantId"];
+
+            // Use config's participantId as authoritative (user configured it intentionally)
+            // Only fall back to catalog response if config doesn't have participantId
+            const effectiveParticipantId =
+              provider.participantId || catalogResponseParticipantId;
+
+            // Map each dataset using ResourceMapper
+            return datasets.map((dataset: Resource) => {
+              const context = {
+                temsServiceBase: baseURL,
+                temsCategoryBase: baseURL.replace(
+                  "/services/",
+                  "/providers/categories/",
+                ),
+                temsImageBase: baseURL.replace(
+                  "/services/",
+                  "/objects/images/",
+                ),
+                temsProviderBase: baseURL.replace("/services/", "/providers/"),
+                // Provider context for mapping - use config's participantId as authoritative
+                providerName: provider.name,
+                providerAddress: provider.address,
+                providerColor: provider.color,
+                providerParticipantId: effectiveParticipantId,
+              };
+
+              return mapper.map(dataset, context);
+            });
+          }
+
+          return [];
+        } catch (_error) {
+          return [];
+        }
+      });
+
+      const results = await Promise.all(catalogPromises);
+      const allDatasets = results.flat();
+
+      return allDatasets;
+    } catch (_error) {
+      return [];
+    }
+  }
+
+  /**
+   * Get current DataspaceConnectorStore instance
+   */
+  getStoreService() {
+    return this.storeService;
+  }
+}

package/src/helpers/components/orbitComponent.ts

@@ -0,0 +1,273 @@
+import {
+  CLIENT_CONTEXT,
+  requestNavigation,
+  setupComponentSubscriptions,
+} from "@helpers";
+import { ComponentObjectsHandler } from "@helpers/components/componentObjectsHandler";
+import type {
+  Container,
+  LiveOrbit,
+  PropertiesPicker,
+  ProxyValue,
+  Resource,
+  UnknownResource,
+} from "@src/component";
+import { nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+
+export default class extends ComponentObjectsHandler {
+  constructor({
+    defaultRoute = false,
+    setupSubscriptions = true,
+    ignoreRouter = false,
+  } = {}) {
+    super();
+    const attach = () => {
+      if (document.readyState === "complete") {
+        this._attach(defaultRoute, setupSubscriptions, ignoreRouter).then(
+          (attach: boolean) => {
+            if (attach) {
+              this.requestUpdate();
+            }
+          },
+        );
+      }
+    };
+    if (document.readyState === "complete") {
+      attach();
+    } else {
+      document.addEventListener("readystatechange", attach);
+    }
+  }
+
+  @property({ attribute: "default-data-src", reflect: true })
+  defaultDataSrc?: string;
+
+  @property({ attribute: "data-src", reflect: true })
+  dataSrc?: string;
+
+  @property({ attribute: "nested-field" })
+  nestedField?: string;
+
+  @property({ attribute: "uniq" })
+  uniq?: string;
+
+  @property({ attribute: "route" })
+  route: string | undefined;
+
+  @property({ attribute: false })
+  cherryPickedProperties: PropertiesPicker[] = [];
+
+  @state()
+  orbit: LiveOrbit | undefined;
+
+  @state()
+  currentRoute = "";
+
+  protected async _attach(
+    defaultRoute: boolean,
+    setupSubscriptions: boolean,
+    ignoreRouter: boolean,
+  ) {
+    if (!this.orbit) {
+      if (window.orbit) {
+        this.orbit = window.orbit;
+        if (setupSubscriptions) {
+          setupComponentSubscriptions({
+            component: this,
+            defaultRoute: defaultRoute,
+            ignoreRouter: ignoreRouter,
+          });
+          if (this.route) {
+            this.component = this.orbit.getComponentFromRoute(this.route);
+            if (this.component) {
+              this.orbit.components.map((c) => {
+                if (c.uniq === this.component.uniq) {
+                  c.instance = this;
+                }
+                return c;
+              });
+            }
+          }
+          await this._afterAttach();
+          return Promise.resolve(true);
+        }
+      }
+    }
+    return Promise.resolve(false);
+  }
+
+  async _afterAttach() {
+    return Promise.resolve();
+  }
+
+  _navigate(e: Event) {
+    window.sibRouter.previousRoute = this.currentRoute;
+    window.sibRouter.previousResource = window.sibRouter.currentResource;
+    const navigator = e.target?.closest("[navigation-target]");
+    let target = navigator.getAttribute("navigation-target");
+    const subrouter = navigator.getAttribute("navigation-subrouter");
+    const resource = navigator.getAttribute("navigation-resource");
+    const rdfType = navigator.getAttribute("navigation-rdf-type");
+    if (rdfType) {
+      const compatibleComponents = window.orbit?.components?.filter(
+        (c) => c?.routeAttributes?.["rdf-type"] === rdfType,
+      );
+      if (compatibleComponents) target = compatibleComponents[0]?.uniq;
+    }
+    if (target) {
+      requestNavigation(
+        (window.orbit ? window.orbit.getRoute(target, true) : target) +
+          (subrouter ? `-${subrouter}` : ""),
+        resource,
+      );
+    }
+    e.preventDefault();
+  }
+
+  _normalizeLdpContains(value: Resource[] | Resource): Resource[] {
+    if (!Array.isArray(value) && value !== null) {
+      return [value];
+    }
+    return value;
+  }
+
+  async _expandContainer(
+    value: Resource[],
+    recursive = true,
+    targetProperties: PropertiesPicker[] = this.cherryPickedProperties,
+  ): Promise<UnknownResource[]> {
+    const expandedContainer: UnknownResource[] = [];
+    for (const entry of value) {
+      const line = await this._getProxyValue(
+        await entry,
+        recursive,
+        targetProperties,
+      );
+      if (line) expandedContainer.push(line);
+    }
+    return expandedContainer;
+  }
+
+  async _getProperties(
+    resource: Resource,
+    recursive = true,
+    targetProperties: PropertiesPicker[] = this.cherryPickedProperties,
+  ) {
+    const properties = await resource.properties;
+    const response: Resource = {
+      "@id": resource["@id"],
+      "@type": resource["@type"],
+      "@context": resource.serverContext,
+      _originalResource: resource,
+    };
+    for (const prop of targetProperties) {
+      if (properties?.includes(prop.key)) {
+        response[prop.value] = await resource.get(prop.key);
+        if (prop.expand) {
+          response[prop.value] = await this._getProxyValue(
+            response[prop.value],
+            recursive,
+            targetProperties,
+          );
+        }
+        if (prop.cast) {
+          response[prop.value] = await prop.cast(response[prop.value]);
+        }
+      }
+    }
+    return await this._responseAdaptator(response);
+  }
+
+  async _hasCherryPickedProperties(resource: Resource) {
+    const properties = await resource.properties;
+    for (const prop of this.cherryPickedProperties) {
+      if (properties?.includes(prop.key)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  async _getProxyValue(
+    resource:
+      | string
+      | Resource
+      | ProxyValue<Resource | Container<ProxyValue<Resource> | Resource>>,
+    recursive = true,
+    targetProperties: PropertiesPicker[] = this.cherryPickedProperties,
+  ) {
+    try {
+      if (resource) {
+        let target = resource;
+        if (typeof resource === "string") {
+          target = await window.sibStore.getData(resource, CLIENT_CONTEXT);
+        }
+        if (typeof resource !== "string" && resource.isFullResource) {
+          if (!resource.isFullResource?.()) {
+            target = await window.sibStore.getData(
+              resource["@id"],
+              CLIENT_CONTEXT,
+            );
+          }
+        }
+
+        // TEMPFIX: weird store behaviour? (await await getData?)
+        // target = await target;
+
+        if (typeof resource !== "string" && !resource.isFullResource) {
+          // Edge case when calling getProxyValue with an already
+          // fetched resource with server search, not a proxy
+          (target as Resource).properties = Object.keys(target);
+          (target as Resource).get = (property: any) =>
+            (target as Resource)[property];
+        }
+        if (!target) return { _originalResource: target };
+        if (typeof target === "object" && target !== null) {
+          if (target.isContainer?.() && target["ldp:contains"]) {
+            // Allow ldp:containers to be treated manually by a component
+            if (await this._hasCherryPickedProperties(target)) {
+              return await this._getProperties(
+                target,
+                recursive,
+                targetProperties,
+              );
+            }
+            const value = this._normalizeLdpContains(
+              await target["ldp:contains"],
+            );
+            return await this._expandContainer(
+              value,
+              recursive,
+              targetProperties,
+            );
+          }
+          return await this._getProperties(target, recursive, targetProperties);
+        }
+      }
+      return;
+    } catch (e) {
+      if (import.meta.env.DEV) console.error(e);
+    }
+  }
+
+  async _responseAdaptator(response: Resource) {
+    return Promise.resolve(response);
+  }
+
+  gatekeeper() {
+    if (
+      !this.orbit ||
+      (!this.noRouter &&
+        this.route &&
+        this.currentRoute &&
+        !this.route.startsWith(this.currentRoute))
+    ) {
+      return nothing;
+    }
+
+    if (!this.dataSrc) {
+      return nothing;
+    }
+  }
+}

package/src/helpers/components/setupCacheInvalidation.ts

@@ -0,0 +1,44 @@
+/*
+Common code for components
+Handle cache invalidation based on keywords
+*/
+const setupCacheInvalidation = (
+  component: any,
+  { keywords = [] as string[], attributes = ["dataSrc"] } = {}
+) => {
+  const setup = () => {
+    if (keywords && attributes) {
+      if (component.caching === undefined) {
+        component.caching = 0;
+      }
+      if (component.hasCachedDatas === undefined) {
+        component.hasCachedDatas = false;
+      }
+
+      component.cacheListener = (e: Event) => {
+        const resource = e.detail.id || e.detail.resource["@id"];
+        if (keywords.some((keyword) => resource?.includes(keyword))) {
+          for (const attribute of attributes) {
+            if (component[attribute] && resource !== component[attribute]) {
+              window.sibStore.clearCache(component[attribute]);
+            }
+          }
+          component.caching++;
+          component.hasCachedDatas = false;
+          component.requestUpdate();
+        }
+      };
+
+      component._subscriptions.add(["save", component.cacheListener]);
+
+      component._subscribe();
+    }
+  };
+  if (document.readyState !== "complete") {
+    document.addEventListener("DOMContentLoaded", setup);
+  } else {
+    setup();
+  }
+};
+
+export default setupCacheInvalidation;

package/src/helpers/components/setupCacheOnResourceReady.ts

@@ -0,0 +1,39 @@
+/*
+Common code for components
+Handle cache invalidation based on keywords
+*/
+const setupCacheOnResourceReady = (component: any, { keywords = [] } = {}) => {
+  const setup = () => {
+    if (keywords) {
+      if (component.caching === undefined) {
+        component.caching = 0;
+      }
+      if (component.hasCachedDatas === undefined) {
+        component.hasCachedDatas = false;
+      }
+
+      component.resourceCacheListener = (e: Event) => {
+        const resource = e.detail.id || e.detail.resource["@id"];
+        if (keywords.some((keyword) => resource?.includes(keyword))) {
+          component.caching++;
+          component.hasCachedDatas = false;
+          component.requestUpdate();
+        }
+      };
+
+      component._subscriptions.add([
+        "resourceReady",
+        component.resourceCacheListener,
+      ]);
+
+      component._subscribe();
+    }
+  };
+  if (document.readyState !== "complete") {
+    document.addEventListener("DOMContentLoaded", setup);
+  } else {
+    setup();
+  }
+};
+
+export default setupCacheOnResourceReady;

package/src/helpers/components/setupComponentSubscriptions.ts

@@ -0,0 +1,73 @@
+import uniq from "@helpers/utils/uniq";
+/*
+Common code for components
+Handles uniq, route, optional orbit interface, subscriptions manager for each component
+*/
+const setupComponentSubscriptions = ({
+  component,
+  defaultRoute = false,
+  ignoreRouter = false,
+}: {
+  component: any;
+  defaultRoute: boolean;
+  ignoreRouter: boolean;
+}) => {
+  if (!component.uniq) {
+    component.uniq = uniq();
+    if (defaultRoute && !component.route && !ignoreRouter) {
+      component.route = defaultRoute;
+    }
+  }
+  component._subscriptions = new Set();
+  if (!ignoreRouter) {
+    if (!component.route) {
+      component.route = component.uniq;
+      if (window.orbit) {
+        component.route = window.orbit.getRoute(component.uniq);
+      }
+    }
+    component.noRouter = true;
+    let router = document.querySelector("solid-router");
+    while (router) {
+      component.noRouter = false;
+      component.currentRoute = router.currentRouteName;
+      component.currentResource = window.sibRouter.currentResource;
+      router = document.querySelector(
+        `[data-view="${router.currentRouteName}"] solid-router`,
+      );
+    }
+
+    component.navigationListener = () => {
+      // component.currentRoute = e.detail?.route;
+      // component.currentResource = window.sibRouter.currentResource;
+      let router = document.querySelector("solid-router");
+      while (router) {
+        component.noRouter = false;
+        component.currentRoute = router.currentRouteName;
+        component.currentResource = window.sibRouter.currentResource;
+        router = document.querySelector(
+          `[data-view="${router.currentRouteName}"] solid-router`,
+        );
+      }
+      component.requestUpdate();
+    };
+    component._subscriptions.add(["navigate", component.navigationListener]);
+  }
+
+  component._subscribe = () => {
+    component._unsubscribe();
+    for (const subscription of component._subscriptions) {
+      document.addEventListener(subscription[0], subscription[1]);
+    }
+  };
+
+  component._unsubscribe = () => {
+    for (const subscription of component._subscriptions) {
+      document.removeEventListener(subscription[0], subscription[1]);
+    }
+  };
+
+  component._subscribe();
+};
+
+export default setupComponentSubscriptions;

package/src/helpers/components/setupOnSaveReset.ts

@@ -0,0 +1,20 @@
+/*
+Common code for components
+Handle cache invalidation based on keywords
+*/
+const setupOnSaveReset = (component: any, { keywords = [] } = {}) => {
+  if (keywords) {
+    component.saveListener = (e: Event) => {
+      const resource = e.detail.id || e.detail.resource["@id"];
+      if (keywords.some((keyword) => resource?.includes(keyword))) {
+        component._setValue({ target: { value: "" } });
+      }
+    };
+
+    component._subscriptions.add(["save", component.saveListener]);
+
+    component._subscribe();
+  }
+};
+
+export default setupOnSaveReset;