@startinblox/components-ds4go 3.1.4 → 3.1.6

package/dist/index.js

@@ -1 +1 @@
-import "./index-DQ-N8-vz.js";
+import "./index-9p-uZ-aS.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/components-ds4go",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "description": "Startin'blox DS4GO",
   "main": "dist/index.js",
   "type": "module",

package/src/component.d.ts

@@ -314,6 +314,137 @@ export interface Asset {
   properties?: Record<string, any>;
 }
 
+// DSIF-specific types
+export interface DSIFRootAuthoritySector {
+  sectorName: string;
+  federatedCatalogEndpoint: string;
+  description: string;
+  lastUpdated: string;
+  ttlSeconds: number;
+  id: string;
+  rootAuthorityUrl?: string;
+}
+
+export interface DSIFSectorAuthority {
+  sector: string;
+  catalogType: string;
+  version: string;
+  discoveryTimestamp: string;
+  catalogs: DSIFSectorAuthorityCatalog[];
+  count: number;
+}
+
+export interface DSIFSectorAuthorityCatalog {
+  catalogId: string;
+  type: string;
+  sector: string;
+  description: string;
+  endpoints: {
+    catalog: string;
+    dataset?: string;
+    search?: string;
+    health?: string;
+    discovery?: string;
+  };
+  conformsTo: string[];
+  capabilities: {
+    search: {
+      q: boolean;
+      filters: string[];
+      paging: boolean;
+      sort: string[];
+    };
+    catalog: {
+      pagination: boolean;
+      format: string;
+    };
+    auth: {
+      scheme: string;
+    };
+  };
+  searchTemplate?: string;
+  searchParameters?: string[];
+  auth: {
+    scheme: string;
+  };
+  lastUpdated: string;
+  ttlSeconds: number;
+}
+
+export interface DSIFCatalogEntry extends Resource {
+  "@id": string;
+  "@type": string;
+  "dct:title": string;
+  "dct:description": string;
+  "dct:publisher"?: {
+    "@id": string;
+    "dct:title": string;
+  };
+  "dcat:dataset": DSIFDataset[];
+}
+
+export interface DSIFCatalogWithContext extends DSIFSectorAuthorityCatalog {
+  sectorName?: string;
+  sectorId?: string;
+  rootAuthorityUrl?: string;
+  sectorAuthorityUrl?: string;
+}
+
+export interface DSIFDatasetWithContext extends DSIFDataset {
+  catalogTitle?: string;
+  catalogId?: string;
+  sectorName?: string;
+  sectorId?: string;
+  rootAuthorityUrl?: string;
+  sectorAuthorityUrl?: string;
+}
+
+export interface DSIFDatasetPricing {
+  "dsif:costPerAPICall": number;
+  "dsif:setupFee": number;
+  "dsif:billingPeriod": string;
+  "dsif:currency": string;
+  "dsif:description": string;
+}
+
+export interface DSIFDatasetNegotiation {
+  "dspace:participantId": string;
+  "dspace:protocolEndpoint": string;
+}
+
+export interface DSIFDatasetPolicy {
+  "@type": string;
+  "odrl:permission": Array<{ "odrl:action": string }>;
+  "odrl:prohibition": any[];
+  "odrl:obligation": any[];
+}
+
+export interface DSIFDataset extends Resource {
+  "@id": string;
+  "@type": string;
+  "dct:title": string;
+  "dct:description": string;
+  "dcat:mediaType": string;
+  "dspace:assetId": string;
+  "dsif:pricing"?: DSIFDatasetPricing;
+  "dsif:previewLinks"?: Array<{ "@id": string }>;
+  "odrl:hasPolicy"?: DSIFDatasetPolicy;
+  "edc:contractDefinitionId"?: string;
+  "dsif:negotiation"?: DSIFDatasetNegotiation;
+  "dsif:originCatalogId"?: string;
+  "dsif:federationPath"?: any[];
+  "dsif:hopCount"?: number;
+  "foaf:thumbnail"?: {
+    "rdf:resource": string;
+  };
+  catalogTitle?: string;
+  catalogId?: string;
+  sectorName?: string;
+  sectorId?: string;
+  rootAuthorityUrl?: string;
+  sectorAuthorityUrl?: string;
+}
+
 export declare global {
   interface Window {
     orbit: LiveOrbit;

package/src/components/cards/ds4go-card-catalog.ts

@@ -10,6 +10,7 @@ export type DS4GOCardCatalogProps = {
   header?: string;
   content?: string;
   date?: string;
+  image?: string;
 };
 
 @customElement("ds4go-card-catalog")
@@ -33,6 +34,9 @@ export class DS4GOCardCatalog extends LitElement {
   @property({ attribute: false })
   tags: DS4GOCardCatalogProps["tags"] = [];
 
+  @property({ attribute: "image", type: String })
+  image: DS4GOCardCatalogProps["image"];
+
   private _getType() {
     const allowedTypes = ["vertical", "horizontal", "bill-image"];
     if (!allowedTypes.includes(String(this.cardType))) {
@@ -96,6 +100,16 @@ export class DS4GOCardCatalog extends LitElement {
     </div>`;
   }
 
+  private renderImage() {
+      if (this.image) {
+        return html`<header
+          class="image"
+          style="background-image: url(&quot;${this.image}&quot;)"
+        ></header>`;
+      }
+    return nothing;
+  }
+
   render() {
     const classes = {
       ...this._getType(),
@@ -103,6 +117,7 @@ export class DS4GOCardCatalog extends LitElement {
 
     if (this.cardType === "horizontal") {
       return html`<article class=${classMap(classes)}>
+        ${this.renderImage()}
         <main>
           ${this.renderTags()}
           ${this.renderContent()}
@@ -112,6 +127,7 @@ export class DS4GOCardCatalog extends LitElement {
 
     if (this.cardType === "bill-image") {
       return html`<article class=${classMap(classes)}>
+        ${this.renderImage()}
         <main>
           ${this.renderTags()}
           ${this.renderContent()}
@@ -121,6 +137,7 @@ export class DS4GOCardCatalog extends LitElement {
     }
 
     return html`<article class=${classMap(classes)}>
+      ${this.renderImage()}
       <main>
         ${this.renderDate()}
         ${this.renderContent()}

package/src/components/catalog/ds4go-dsif-explorer-poc-holder.ts

@@ -0,0 +1,324 @@
+import {
+  filterObjectByDateAfter,
+  filterObjectById,
+  filterObjectByInterval,
+  filterObjectByNamedValue,
+  filterObjectByType,
+  filterObjectByValue,
+  formatCase,
+  formatDate,
+} from "@helpers";
+import { msg } from "@lit/localize";
+import type {
+  DSIFCatalogEntry,
+  DSIFCatalogWithContext,
+  DSIFDataset,
+  DSIFDatasetWithContext,
+  DSIFRootAuthoritySector,
+  Resource,
+  SearchObject,
+  UnknownResource,
+} from "@src/component";
+import { css, html, LitElement, nothing, type PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+type holderTypeArray = (
+  | DSIFRootAuthoritySector
+  | DSIFCatalogWithContext
+  | DSIFDatasetWithContext
+)[];
+
+type holderType = DSIFCatalogEntry | holderTypeArray;
+
+@customElement("ds4go-dsif-explorer-poc-holder")
+export class Ds4goDsifExplorerPocHolder extends LitElement {
+  @property({ attribute: false })
+  objects?: holderType = [];
+
+  static styles = css`
+    .card-grid {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+    .card-grid-vertical {
+      justify-content: stretch;
+    }
+    .card-grid-vertical ds4go-card-catalog {
+      width: 354px;
+      height: auto;
+    }
+    ds4go-card-catalog.cursor-pointer {
+      cursor: pointer;
+    }
+    tems-division {
+      margin-bottom: var(--scale-900);
+    }
+  `;
+
+  @state()
+  search: SearchObject[] = [];
+
+  @state()
+  protected _displayObjects: holderType = [];
+
+  protected filter(
+    objects: holderType,
+    filters: SearchObject[] = [],
+  ): holderType {
+    if (Array.isArray(objects)) {
+      if (
+        !filters ||
+        filters.length === 0 ||
+        !objects ||
+        objects.length === 0
+      ) {
+        return objects;
+      }
+
+      const groupedFilters = new Map<string, SearchObject[]>();
+      for (const filter of filters) {
+        const groupKey = filter.name;
+        const group = groupedFilters.get(groupKey) || [];
+        group.push(filter);
+        groupedFilters.set(groupKey, group);
+      }
+
+      let currentFilteredObjects = [...objects];
+
+      for (const filterGroup of groupedFilters.values()) {
+        if (currentFilteredObjects.length === 0) {
+          break;
+        }
+
+        const tempResults: UnknownResource[] = [];
+        for (const filter of filterGroup) {
+          switch (filter.type) {
+            case "interval":
+              tempResults.push(
+                filterObjectByInterval(
+                  currentFilteredObjects,
+                  filter.name,
+                  filter.value,
+                ),
+              );
+              break;
+            case "dateAfter":
+              tempResults.push(
+                filterObjectByDateAfter(
+                  currentFilteredObjects,
+                  filter.name,
+                  filter.value,
+                ),
+              );
+              break;
+            case "matchId":
+              tempResults.push(
+                filterObjectById(
+                  currentFilteredObjects,
+                  filter.name,
+                  filter.value,
+                ),
+              );
+              break;
+            case "matchType":
+              tempResults.push(
+                filterObjectByType(currentFilteredObjects, filter.value),
+              );
+              break;
+            case "exact":
+              tempResults.push(
+                filterObjectByNamedValue(
+                  currentFilteredObjects,
+                  filter.name,
+                  filter.value,
+                ),
+              );
+              break;
+            default:
+              tempResults.push(
+                filterObjectByValue(currentFilteredObjects, filter.value),
+              );
+          }
+        }
+        currentFilteredObjects = [...tempResults.flat()] as holderTypeArray;
+      }
+
+      return currentFilteredObjects;
+    }
+    return {
+      ...(objects as holderType),
+      "dcat:dataset": this.filter(
+        objects["dcat:dataset"],
+        filters,
+      ) as DSIFDataset[],
+    };
+  }
+
+  protected _handleClickEvent(originalObj: Resource) {
+    this.dispatchEvent(new CustomEvent("clicked", { detail: originalObj }));
+  }
+
+  willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("objects") || changedProperties.has("search")) {
+      if (this.objects) {
+        this._displayObjects = this.filter(this.objects, this.search);
+      } else {
+        this._displayObjects = [];
+      }
+      this.dispatchEvent(
+        new CustomEvent("result-count", {
+          detail: this._displayObjects.length,
+        }),
+      );
+    }
+  }
+
+  private _getDatasetTags(dataset: DSIFDatasetWithContext) {
+    const tags: Array<{ name: string; type?: string }> = [];
+
+    if (dataset["dsif:pricing"]) {
+      const pricing = dataset["dsif:pricing"];
+      const cost =
+        pricing["dsif:costPerAPICall"] > 0
+          ? `${pricing["dsif:costPerAPICall"]} ${pricing["dsif:currency"]}/call`
+          : "Free";
+      tags.push({
+        name: cost,
+        type: pricing["dsif:costPerAPICall"] > 0 ? "warning" : "success",
+      });
+    }
+
+    if (dataset["dspace:assetId"]) {
+      tags.push({
+        name:
+          dataset["dspace:assetId"].split(":").pop() ||
+          dataset["dspace:assetId"],
+        type: "info",
+      });
+    }
+
+    if (dataset.sectorName) {
+      tags.push({ name: formatCase(dataset.sectorName), type: "neutral" });
+    }
+
+    if (
+      dataset["dsif:previewLinks"] &&
+      dataset["dsif:previewLinks"].length > 0
+    ) {
+      tags.push({
+        name: `${dataset["dsif:previewLinks"].length} previews`,
+        type: "info",
+      });
+    }
+
+    return tags;
+  }
+
+  private _getDatasetThumbnail(dataset: DSIFDatasetWithContext): string {
+    if (dataset["foaf:thumbnail"]?.["rdf:resource"]) {
+      return dataset["foaf:thumbnail"]["rdf:resource"];
+    }
+
+    return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='354' height='200' viewBox='0 0 354 200'%3E%3Crect width='354' height='200' fill='%23f0f0f0'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%23999'%3ENo Thumbnail%3C/text%3E%3C/svg%3E";
+  }
+
+  private _getCatalogTags(catalog: DSIFCatalogWithContext) {
+    const tags: Array<{ name: string; type?: string }> = [];
+
+    if (catalog.type) {
+      tags.push({
+        name: catalog.type.toUpperCase(),
+        type: catalog.type === "ic" ? "success" : "info",
+      });
+    }
+
+    if (catalog.sectorName) {
+      tags.push({ name: formatCase(catalog.sectorName), type: "neutral" });
+    }
+
+    return tags;
+  }
+
+  private _getSectorTags(sector: DSIFRootAuthoritySector) {
+    const tags: Array<{ name: string; type?: string }> = [];
+
+    if (sector.sectorName) {
+      tags.push({ name: formatCase(sector.sectorName), type: "neutral" });
+    }
+
+    return tags;
+  }
+
+  render() {
+    if (!this._displayObjects || this._displayObjects.length === 0) {
+      return 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.parent._back}
+            ></tems-button>`
+          : html`<tems-button
+              type="primary"
+              label=${msg("Retry")}
+              @click=${this.parent.requestUpdate}
+            ></tems-button>`}`;
+    }
+    return html`<div>
+      ${this.catalogId && this.catalogId !== "*"
+        ? html`<tems-division type="body-m"
+            >${(this._displayObjects as DSIFCatalogEntry)[
+              "dct:description"
+            ]}</tems-division
+          >`
+        : nothing}
+      <div class="card-grid card-grid-vertical">
+        ${this.catalogId
+            ? html`${(this._displayObjects as DSIFCatalogEntry)[
+                "dcat:dataset"
+              ].map(
+                (dataset: DSIFDatasetWithContext) =>
+                  html`<ds4go-card-catalog
+                    .object=${import.meta.env.DEV ? dataset : nothing}
+                    .header=${dataset["dct:title"] || nothing}
+                    .content=${dataset["dct:description"] || nothing}
+                    .tags=${this._getDatasetTags(dataset)}
+                    .image=${this._getDatasetThumbnail(dataset)}
+                  ></ds4go-card-catalog>`,
+              )}`
+            : this.sectorId
+              ? html`${(this._displayObjects as DSIFCatalogWithContext[]).map(
+                  (catalog: DSIFCatalogWithContext) =>
+                    html`<ds4go-card-catalog
+                      class="cursor-pointer"
+                      .object=${import.meta.env.DEV ? catalog : nothing}
+                      .header=${catalog.catalogId || nothing}
+                      .content=${catalog.description || nothing}
+                      .tags=${this._getCatalogTags(catalog)}
+                      date=${formatDate(catalog.lastUpdated) || nothing}
+                      @click=${() =>
+                        this.parent._selectCatalog(catalog.catalogId)}
+                    ></ds4go-card-catalog>`,
+                )}`
+              : html`${(this._displayObjects as DSIFRootAuthoritySector[]).map(
+                  (sector: DSIFRootAuthoritySector) =>
+                    html`<ds4go-card-catalog
+                      class="cursor-pointer"
+                      .object=${import.meta.env.DEV ? sector : nothing}
+                      .header=${sector.id || nothing}
+                      .content=${sector.description || nothing}
+                      .tags=${this._getSectorTags(sector)}
+                      date=${formatDate(sector.lastUpdated) || nothing}
+                      @click=${() => this.parent._selectSector(sector.id)}
+                    ></ds4go-card-catalog>`,
+                )}`}
+      </div>
+    </div>`;
+  }
+}

package/src/components/modal/ds4go-fact-bundle-modal.ts

@@ -58,6 +58,14 @@ export class Ds4goFactBundleModal extends OrbitComponent {
   @state()
   negotiations: ExtendedContractNegotiation[] = [];
 
+  @state()
+  showTechnicalInfo = false;
+
+  _toggleTechnicalInfo(e: Event) {
+    e.preventDefault();
+    this.showTechnicalInfo = !this.showTechnicalInfo;
+  }
+
   _getResource = new Task(this, {
     task: async () => {
       if (!this.object) return;
@@ -180,18 +188,29 @@ export class Ds4goFactBundleModal extends OrbitComponent {
                     </div>
                   </div></tems-division
                 >
-                <tems-division type="h4"
-                  ><div>${msg("Technical informations")}</div></tems-division
-                >
-                ${this.contracts && this.contracts.length > 0
-                  ? html`${this.contracts.map(
-                      (contract: ContractDefinition) =>
-                        html`<ds4go-contract-modal-part
-                          .contract=${contract}
-                          .assets=${this.assets}
-                          .policies=${this.policies}
-                        ></ds4go-contract-modal-part>`,
-                    )}`
+                <tems-button
+                  @click=${this._toggleTechnicalInfo}
+                  type="outline-gray"
+                  label=${this.showTechnicalInfo
+                    ? msg("Hide Technical Informations")
+                    : msg("Show Technical Informations")}
+                ></tems-button>
+                ${this.showTechnicalInfo
+                  ? html`
+                      <tems-division type="h4"
+                        >${msg("Technical informations")}</tems-division
+                      >
+                      ${this.contracts && this.contracts.length > 0
+                        ? html`${this.contracts.map(
+                            (contract: ContractDefinition) =>
+                              html`<ds4go-contract-modal-part
+                                .contract=${contract}
+                                .assets=${this.assets}
+                                .policies=${this.policies}
+                              ></ds4go-contract-modal-part>`,
+                          )}`
+                        : nothing}
+                    `
                   : nothing}
                 ${this.negotiations && this.negotiations.length > 0
                   ? html`<ds4go-negotiations-modal-part