package.json

 {
   "name": "ui",
-  "version": "1.17.2",
+  "version": "1.18.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -71,6 +71,7 @@
     "@vitejs/plugin-vue2": "^1.1.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/runtime-dom": "^3.2.40",
     "conventional-changelog-eslint": "^3.0.9",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",

src/components/elements/BreadCrumbs.vue

@@ -128,9 +128,12 @@ export default defineComponent({
   },
   watch: {
     crumbs() {
-      let title =
+      let title = this.$t("breadcrumbs.home").toString();
+      if (this.crumbs && this.crumbs.length) {
+        title =
           this.crumbs.map((n) => n.text).at(-1) ??
           this.$t("breadcrumbs.home").toString();
+      }
       if (
         this.resource &&
         this.resource.type &&

src/modules/resource/store.ts

@@ -18,7 +18,11 @@ import type { ProjectObject } from "@coscine/api-client/dist/types/Coscine.Api.P
 import type { AxiosError } from "axios";
 import type { QuotaDimObject } from "@coscine/api-client/dist/types/Coscine.Api.Admin";
 import useNotificationStore from "@/store/notification";
-import { parseRDFDefinition, serializeRDFDefinition } from "./utils/linkedData";
+import {
+  parseRDFDefinition,
+  resolveImports,
+  serializeRDFDefinition,
+} from "./utils/linkedData";
 import factory from "rdf-ext";
 import { useLocalStorage } from "@vueuse/core";
 /*  
@@ -114,11 +118,15 @@ export const useResourceStore = defineStore({
           const apiResponse = await MetadataApi.metadataGetProfile(
             resource.applicationProfile
           );
-          resource.fullApplicationProfile = await parseRDFDefinition(
+          resource.rawApplicationProfile = await parseRDFDefinition(
             JSON.stringify(apiResponse.data),
             "application/ld+json",
             resource.applicationProfile
           );
+          resource.fullApplicationProfile = await resolveImports(
+            resource.applicationProfile,
+            resource.rawApplicationProfile
+          );
         } else {
           console.error("Resource's application profile may be undefined.");
         }
@@ -128,17 +136,27 @@ export const useResourceStore = defineStore({
       }
     },
 
-    async getApplicationProfile(applicationProfile: string): Promise<Dataset> {
+    async getApplicationProfile(
+      applicationProfile: string,
+      doResolveImports = true
+    ): Promise<Dataset> {
       const notificationStore = useNotificationStore();
       try {
         const apiResponse = await MetadataApi.metadataGetProfile(
           applicationProfile
         );
-        return await parseRDFDefinition(
+        let returnApplicationProfile = await parseRDFDefinition(
           JSON.stringify(apiResponse.data),
           "application/ld+json",
           applicationProfile
         );
+        if (doResolveImports) {
+          returnApplicationProfile = await resolveImports(
+            applicationProfile,
+            returnApplicationProfile
+          );
+        }
+        return returnApplicationProfile;
       } catch (error) {
         // Handle other Status Codes
         notificationStore.postApiErrorNotification(error as AxiosError);

src/modules/resource/types.ts

@@ -7,6 +7,7 @@ import type {
 import type { Dataset } from "@rdfjs/types";
 
 export interface VisitedResourceObject extends ResourceObject {
+  rawApplicationProfile: Dataset | null;
   fullApplicationProfile: Dataset | null;
   usedQuota: QuotaDimObject | null | undefined;
   storedColumns: string | null;

src/modules/resource/utils/linkedData.ts

@@ -4,6 +4,8 @@ import rdfParser from "rdf-parse";
 import type { Dataset } from "@rdfjs/types";
 import { serializers } from "@rdfjs-elements/formats-pretty";
 import stringifyStream from "stream-to-string";
+import { MetadataApi } from "@coscine/api-client";
+import type DatasetExt from "rdf-ext/lib/Dataset";
 
 export async function parseRDFDefinition(
   definition: string,
@@ -41,3 +43,61 @@ export async function serializeRDFDefinition(
   }
   return await stringifyStream(output as NodeJS.ReadableStream);
 }
+
+/**
+ * Deals with import statements and create a full application profile
+ * @param baseUrl Base Url of the starting dataset
+ * @param dataset The starting dataset
+ * @returns Full Dataset with every imported dataset
+ */
+export async function resolveImports(
+  baseUrl: string,
+  dataset: Dataset
+): Promise<Dataset> {
+  let fullApplicationProfile = dataset;
+
+  const toScanAPs = [dataset];
+  const owlImportsNode = factory.namedNode(
+    "http://www.w3.org/2002/07/owl#imports"
+  );
+  const visitedAPs = [baseUrl];
+  while (toScanAPs.length > 0) {
+    const dataset = toScanAPs.pop();
+    if (dataset) {
+      const importedAPs = Array.from(
+        dataset.match(null, owlImportsNode, null)
+      ).map((quad) => quad.object);
+      for (const importedAP of importedAPs) {
+        if (
+          importedAP.termType === "NamedNode" &&
+          !visitedAPs.includes(importedAP.value)
+        ) {
+          try {
+            const importedApiResponse = await MetadataApi.metadataGetProfile(
+              importedAP.value
+            );
+            const importedApplicationProfile = await parseRDFDefinition(
+              JSON.stringify(importedApiResponse.data),
+              "application/ld+json",
+              importedAP.value
+            );
+            fullApplicationProfile = (
+              fullApplicationProfile as unknown as DatasetExt
+            ).merge(
+              importedApplicationProfile as unknown as DatasetExt
+            ) as unknown as Dataset;
+            toScanAPs.push(importedApplicationProfile);
+          } catch {
+            console.error(
+              `The application profile ${importedAP.value} is not accessible.`
+            );
+          } finally {
+            visitedAPs.push(importedAP.value);
+          }
+        }
+      }
+    }
+  }
+
+  return fullApplicationProfile;
+}

vite.config.js

@@ -147,12 +147,8 @@ const config = defineConfig({
   ],
 
   server: {
-    hmr: {
-      clientPort: 443,
-    },
     host: true,
     port: 9234,
-    strictPort: true,
   },
 });