feat: provenance to model to doc

packages/client/hmi-client/src/components/dataset/tera-dataset.vue

@@ -78,7 +78,6 @@
 					<tera-related-documents
 						:asset-type="ResourceType.DATASET"
 						:documents="documents"
-						:related-documents="relatedDocuments"
 						:assetId="assetId"
 						@enriched="fetchDataset"
 					/>
@@ -329,7 +328,6 @@ const documents = computed(
 				id: document.id
 			})) ?? []
 );
-const relatedDocuments = computed(() => []);
 
 const emit = defineEmits(['close-preview', 'asset-loaded']);
 const newCsvContent: any = ref(null);

packages/client/hmi-client/src/components/model/petrinet/tera-model-description.vue

@@ -36,7 +36,6 @@
 				<template #header>Related publications</template>
 				<tera-related-documents
 					:documents="documents"
-					:related-documents="relatedDocuments"
 					:asset-type="ResourceType.MODEL"
 					:assetId="model.id"
 					@enriched="fetchAsset"
@@ -540,7 +539,6 @@ const documents = computed(
 				id: document.id
 			})) ?? []
 );
-const relatedDocuments = computed(() => []);
 const time = computed(() =>
 	props.model?.semantics?.ode?.time ? [props.model?.semantics.ode.time] : []
 );

packages/client/hmi-client/src/components/model/petrinet/tera-model-editor.vue

@@ -49,21 +49,20 @@
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
-import { ref, onMounted, computed } from 'vue';
+import { ref, computed } from 'vue';
 import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
 import TeraModelEquation from '@/components/model/petrinet/tera-model-equation.vue';
 import TeraModelObservable from '@/components/model/petrinet/tera-model-observable.vue';
 import TeraModelConfigurations from '@/components/model/petrinet/tera-model-configurations.vue';
 import { FeatureConfig, ResultType } from '@/types/common';
-import { Document, Dataset, Model, ProvenanceType, ModelConfiguration } from '@/types/Types';
+import { Document, Dataset, Model, ModelConfiguration } from '@/types/Types';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
-import { getRelatedArtifacts } from '@/services/provenance';
 import { isModel, isDataset, isDocument } from '@/utils/data-util';
 
-const props = defineProps<{
+defineProps<{
 	model: Model;
 	modelConfigurations: ModelConfiguration[];
 	featureConfig: FeatureConfig;
@@ -101,11 +100,4 @@ function updateConfiguration(updatedConfiguration: ModelConfiguration, index: nu
 function addConfiguration(configuration: ModelConfiguration) {
 	emit('add-configuration', configuration);
 }
-
-onMounted(async () => {
-	relatedTerariumArtifacts.value = await getRelatedArtifacts(
-		props.model.id,
-		ProvenanceType.ModelRevision
-	);
-});
 </script>

packages/client/hmi-client/src/components/widgets/tera-asset-icon.vue

@@ -0,0 +1,20 @@
+<template>
+	<vue-feather
+		v-if="typeof getAssetIcon(assetType ?? null) === 'string'"
+		class="p-button-icon-left icon"
+		:type="getAssetIcon(assetType ?? null)"
+		size="1rem"
+	/>
+	<component v-else :is="getAssetIcon(assetType ?? null)" class="p-button-icon-left icon" />
+</template>
+
+<script setup lang="ts">
+import { getAssetIcon } from '@/services/project';
+import { AssetType } from '@/types/Types';
+
+defineProps<{
+	assetType: AssetType;
+}>();
+</script>
+
+<style scoped></style>

packages/client/hmi-client/src/components/widgets/tera-asset-link.vue

@@ -0,0 +1,30 @@
+<template>
+	<a @click="openAsset(assetRoute)">
+		<span>
+			<tera-asset-icon :asset-type="(assetRoute.pageType as AssetType)" />
+		</span>
+		{{ label }}</a
+	>
+</template>
+
+<script setup lang="ts">
+import { AssetRoute } from '@/types/common';
+import router from '@/router';
+import { RouteName } from '@/router/routes';
+import { AssetType } from '@/types/Types';
+import TeraAssetIcon from './tera-asset-icon.vue';
+
+defineProps<{
+	assetRoute: AssetRoute;
+	label: string;
+}>();
+
+const openAsset = (assetRoute: AssetRoute) => {
+	router.push({
+		name: RouteName.Project,
+		params: assetRoute
+	});
+};
+</script>
+
+<style scoped></style>

packages/client/hmi-client/src/components/widgets/tera-related-documents.vue

@@ -5,7 +5,10 @@
 		</p>
 		<ul>
 			<li v-for="document in relatedDocuments" :key="document.id">
-				{{ document.name }}
+				<tera-asset-link
+					:label="document.name!"
+					:asset-route="{ assetId: document.id!, pageType: AssetType.Documents }"
+				></tera-asset-link>
 			</li>
 		</ul>
 		<Button
@@ -77,7 +80,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
 import DataTable from 'primevue/datatable';
@@ -92,10 +95,13 @@ import {
 } from '@/services/knowledge';
 import { PollerResult } from '@/api/api';
 import { isEmpty } from 'lodash';
+import { AssetType, DocumentAsset, ProvenanceType } from '@/types/Types';
+import { getRelatedArtifacts, mapResourceTypeToProvenanceType } from '@/services/provenance';
+import { isDocumentAsset } from '@/utils/data-util';
+import TeraAssetLink from './tera-asset-link.vue';
 
 const props = defineProps<{
 	documents?: Array<{ name: string | undefined; id: string | undefined }>;
-	relatedDocuments?: Array<{ name: string; id: string | undefined }>;
 	assetType: ResourceType;
 	assetId: string;
 }>();
@@ -106,6 +112,7 @@ const selectedResources = ref();
 const dialogType = ref<'enrich' | 'align'>('enrich');
 const aligning = ref(false);
 const enriching = ref(false);
+const relatedDocuments = ref<Array<{ name: string | undefined; id: string | undefined }>>([]);
 
 const sendForEnrichments = async (/* _selectedResources */) => {
 	const jobIds: (string | null)[] = [];
@@ -136,6 +143,7 @@ const sendForEnrichments = async (/* _selectedResources */) => {
 
 	enriching.value = false;
 	emit('enriched');
+	getRelatedDocuments();
 };
 
 const sendToAlignModel = async () => {
@@ -153,8 +161,39 @@ const sendToAlignModel = async () => {
 
 		aligning.value = false;
 		emit('enriched');
+		getRelatedDocuments();
 	}
 };
+
+onMounted(() => {
+	getRelatedDocuments();
+});
+
+watch(
+	() => props.assetId,
+	() => {
+		getRelatedDocuments();
+	}
+);
+
+async function getRelatedDocuments() {
+	if (!props.assetType) return;
+	const provenanceType = mapResourceTypeToProvenanceType(props.assetType);
+
+	if (!provenanceType) return;
+
+	const provenanceNodes = await getRelatedArtifacts(props.assetId, provenanceType, [
+		ProvenanceType.Publication
+	]);
+
+	relatedDocuments.value =
+		(provenanceNodes.filter((res) => isDocumentAsset(res)) as DocumentAsset[]).map(
+			(documentAsset) => ({
+				name: documentAsset.name,
+				id: documentAsset.id
+			})
+		) ?? [];
+}
 </script>
 
 <style scoped>

packages/client/hmi-client/src/page/project/components/tera-project-overview.vue

@@ -105,18 +105,7 @@
 					<Column field="assetName" header="Name" sortable style="width: 75%">
 						<template #body="slotProps">
 							<div class="asset-button" @click="openResource(slotProps.data)">
-								<vue-feather
-									v-if="typeof getAssetIcon(slotProps.data.pageType ?? null) === 'string'"
-									:type="getAssetIcon(slotProps.data.pageType ?? null)"
-									size="1rem"
-									stroke="rgb(16, 24, 40)"
-									class="p-button-icon-left icon"
-								/>
-								<component
-									v-else
-									:is="getAssetIcon(slotProps.data.pageType ?? null)"
-									class="p-button-icon-left icon"
-								/>
+								<tera-asset-icon :assetType="slotProps.data.pageType" />
 								<span class="p-button-label">{{ slotProps.data.assetName }}</span>
 							</div>
 						</template>
@@ -180,7 +169,7 @@ import { AssetType } from '@/types/Types';
 import { useRouter } from 'vue-router';
 import { RouteName } from '@/router/routes';
 import { useProjects } from '@/composables/project';
-import { getAssetIcon } from '@/services/project';
+import TeraAssetIcon from '@/components/widgets/tera-asset-icon.vue';
 import TeraUploadResourcesModal from './tera-upload-resources-modal.vue';
 
 const emit = defineEmits(['open-asset', 'open-new-asset']);

packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue

@@ -12,20 +12,9 @@
 				@click="toggleOptionsMenu"
 			/>
 			<Menu ref="optionsMenu" :model="optionsMenuItems" :popup="true">
-				<!-- A way to use vue feather icons in the MenuItem component, it might be better to try to use 1 icon library for easier integration -->
 				<template #item="slotProps">
 					<a class="p-menuitem-link">
-						<vue-feather
-							v-if="typeof getAssetIcon(slotProps.item.key ?? null) === 'string'"
-							class="p-button-icon-left icon"
-							:type="getAssetIcon(slotProps.item.key ?? null)"
-							size="1rem"
-						/>
-						<component
-							v-else
-							:is="getAssetIcon(slotProps.item.key ?? null)"
-							class="p-button-icon-left icon"
-						/>
+						<tera-asset-icon :asset-type="(slotProps.item.key as AssetType)" />
 						<span class="p-menuitem-text">
 							{{ slotProps.item.label }}
 						</span>
@@ -85,20 +74,7 @@
 						fallback-class="original-asset"
 						:force-fallback="true"
 					>
-						<vue-feather
-							v-if="typeof getAssetIcon(assetItem.pageType ?? null) === 'string'"
-							class="p-button-icon-left icon"
-							:type="getAssetIcon(assetItem.pageType ?? null)"
-							size="1rem"
-							:stroke="
-								isEqual(draggedAsset, assetItem) ? 'var(--text-color-primary)' : 'rgb(16, 24, 40)'
-							"
-						/>
-						<component
-							v-else
-							:is="getAssetIcon(assetItem.pageType ?? null)"
-							class="p-button-icon-left icon"
-						/>
+						<tera-asset-icon :asset-type="(assetItem.pageType as AssetType)" />
 						<span class="p-button-label">{{ assetItem.assetName }}</span>
 					</span>
 					<!-- This 'x' only shows while hovering over the row -->
@@ -143,7 +119,6 @@ import { computed, ref } from 'vue';
 import { capitalize, isEmpty, isEqual } from 'lodash';
 import { AssetItem, AssetRoute } from '@/types/common';
 import TeraModal from '@/components/widgets/tera-modal.vue';
-import { getAssetIcon } from '@/services/project';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Button from 'primevue/button';
@@ -154,6 +129,7 @@ import Menu from 'primevue/menu';
 import { AssetType } from '@/types/Types';
 import { useProjects } from '@/composables/project';
 import { generateProjectAssetsMap } from '@/utils/map-project-assets';
+import TeraAssetIcon from '@/components/widgets/tera-asset-icon.vue';
 
 defineProps<{
 	openedAssetRoute: AssetRoute;

packages/client/hmi-client/src/services/data.ts

@@ -495,7 +495,7 @@ const getDocumentById = async (docid: string): Promise<Document | null> => {
 	return null;
 };
 
-const getBulkDocuments = async (docIDs: string[]) => {
+const getBulkXDDDocuments = async (docIDs: string[]) => {
 	const result: Document[] = [];
 	const promiseList = [] as Promise<Document | null>[];
 	docIDs.forEach((docId) => {
@@ -684,7 +684,7 @@ export {
 	searchXDDDocuments,
 	getAssets,
 	getDocumentById,
-	getBulkDocuments,
+	getBulkXDDDocuments,
 	getRelatedDocuments,
 	getRelatedTerms,
 	getAutocomplete

packages/client/hmi-client/src/services/document-assets.ts

@@ -171,6 +171,21 @@ async function getDocumentFileAsText(documentId: string, fileName: string): Prom
 	return response.data;
 }
 
+async function getBulkDocumentAssets(docIDs: string[]) {
+	const result: DocumentAsset[] = [];
+	const promiseList = [] as Promise<DocumentAsset | null>[];
+	docIDs.forEach((docId) => {
+		promiseList.push(getDocumentAsset(docId));
+	});
+	const responsesRaw = await Promise.all(promiseList);
+	responsesRaw.forEach((r) => {
+		if (r) {
+			result.push(r);
+		}
+	});
+	return result;
+}
+
 async function createDocumentFromXDD(
 	document: Document,
 	projectId: string
@@ -195,6 +210,7 @@ export {
 	downloadDocumentAsset,
 	createNewDocumentFromGithubFile,
 	getDocumentFileAsText,
+	getBulkDocumentAssets,
 	createDocumentFromXDD,
 	createNewDocumentAsset
 };

packages/client/hmi-client/src/services/external.ts

@@ -20,7 +20,7 @@ async function getDocument(docId: string): Promise<ExternalPublication | null> {
  * @docId string array - represents a list of specific project asset/doc id
  * @return ExternalPublication[]|null - the specific document info including its xdd url, or null if none returned by API
  */
-async function getBulkDocumentAssets(docIDs: string[]) {
+async function getBulkExternalPublications(docIDs: string[]) {
 	const result: ExternalPublication[] = [];
 	const promiseList = [] as Promise<ExternalPublication | null>[];
 	docIDs.forEach((docId) => {
@@ -46,4 +46,4 @@ async function addDocuments(body: ExternalPublication): Promise<{ id: string } |
 	return response?.data ?? null;
 }
 
-export { getDocument, getBulkDocumentAssets, addDocuments };
+export { getDocument, getBulkExternalPublications, addDocuments };