Model card from document

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

@@ -36,12 +36,11 @@
 </template>
 
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
 import { computed } from 'vue';
 import TeraRelatedDocuments from '@/components/widgets/tera-related-documents.vue';
-import type { CsvAsset, Dataset, DocumentAsset } from '@/types/Types';
+import type { CsvAsset, Dataset, ProjectAsset } from '@/types/Types';
 import { AssetType } from '@/types/Types';
-import { AcceptedExtensions, FeatureConfig } from '@/types/common';
+import { FeatureConfig } from '@/types/common';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import TeraShowMoreText from '@/components/widgets/tera-show-more-text.vue';
@@ -77,23 +76,13 @@ const description = computed(() =>
 );
 const datasetType = computed(() => card.value?.DATASET_TYPE ?? '');
 
-const documents = computed(
+const documents = computed<{ name: string; id: string }[]>(
 	() =>
 		useProjects()
 			.getActiveProjectAssets(AssetType.Document)
-			.filter((document: DocumentAsset) =>
-				[AcceptedExtensions.PDF, AcceptedExtensions.TXT, AcceptedExtensions.MD].some(
-					(extension) => {
-						if (document.fileNames && !isEmpty(document.fileNames)) {
-							return document.fileNames[0]?.endsWith(extension);
-						}
-						return false;
-					}
-				)
-			)
-			.map((document: DocumentAsset) => ({
-				name: document.name,
-				id: document.id
+			.map((projectAsset: ProjectAsset) => ({
+				name: projectAsset.assetName,
+				id: projectAsset.assetId
 			})) ?? []
 );
 

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

@@ -4,34 +4,29 @@
 			<AccordionTab header="Description">
 				<section v-if="!isGeneratingCard" class="description">
 					<tera-show-more-text :text="description" :lines="5" />
-
-					<template v-if="modelType">
-						<div class="label-value-pair">
-							<label class="p-text-secondary">Model type</label>
-							<p>{{ modelType }}</p>
-						</div>
-					</template>
+					<p v-if="modelType">
+						<label class="p-text-secondary mr-2">Model type</label>{{ modelType }}
+					</p>
 					<template v-if="fundedBy">
 						<div class="label-value-pair">
-							<label class="p-text-secondary">Funded by</label>
-							<p>{{ fundedBy }}</p>
+							<p><label class="p-text-secondary mr-2">Funded by</label>{{ fundedBy }}</p>
 						</div>
 					</template>
 					<template v-if="authors">
 						<div class="label-value-pair">
-							<label class="p-text-secondary">Authors</label>
-							<p>{{ authors }}</p>
+							<p><label class="p-text-secondary mr-2">Authors</label>{{ authors }}</p>
 						</div>
 					</template>
 					<template v-if="uses">
 						<div class="label-value-pair mt-2">
 							<h6>Uses</h6>
-							<label class="p-text-secondary">Direct use</label>
-							<p>{{ uses.DirectUse }}</p>
+							<p><label class="p-text-secondary mr-2">Direct use</label>{{ uses.DirectUse }}</p>
 						</div>
 						<div class="label-value-pair">
-							<label class="p-text-secondary">Out of scope use</label>
-							<p>{{ uses.OutOfScopeUse }}</p>
+							<p>
+								<label class="p-text-secondary mr-2">Out of scope use</label>
+								{{ uses.OutOfScopeUse }}
+							</p>
 						</div>
 					</template>
 
@@ -118,6 +113,7 @@
 			</AccordionTab>
 			<AccordionTab header="Provenance">
 				<tera-related-documents
+					class="m-2"
 					:documents="documents"
 					:asset-type="AssetType.Model"
 					:assetId="model.id"
@@ -163,8 +159,8 @@ import { isEmpty } from 'lodash';
 import { computed, ref } from 'vue';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
-import { AcceptedExtensions, FeatureConfig, ResultType } from '@/types/common';
-import type { DocumentAsset, Model, Dataset, ModelConfiguration } from '@/types/Types';
+import { FeatureConfig, ResultType } from '@/types/common';
+import type { Dataset, Model, ModelConfiguration, ProjectAsset } from '@/types/Types';
 import { AssetType } from '@/types/Types';
 import * as textUtil from '@/utils/text';
 import TeraRelatedDocuments from '@/components/widgets/tera-related-documents.vue';
@@ -248,23 +244,13 @@ const authors = computed(() => {
 	return authorsArray.join(', ');
 });
 
-const documents = computed(
+const documents = computed<{ name: string; id: string }[]>(
 	() =>
 		useProjects()
 			.getActiveProjectAssets(AssetType.Document)
-			.filter((document: DocumentAsset) =>
-				[AcceptedExtensions.PDF, AcceptedExtensions.TXT, AcceptedExtensions.MD].some(
-					(extension) => {
-						if (document.fileNames && !isEmpty(document.fileNames)) {
-							return document.fileNames[0]?.endsWith(extension);
-						}
-						return false;
-					}
-				)
-			)
-			.map((document: DocumentAsset) => ({
-				name: document.name,
-				id: document.id
+			.map((projectAsset: ProjectAsset) => ({
+				name: projectAsset.assetName,
+				id: projectAsset.assetId
 			})) ?? []
 );
 
@@ -324,11 +310,6 @@ function updateConfiguration(updatedConfiguration: ModelConfiguration) {
 	gap: var(--gap-small);
 }
 
-.label-value-pair {
-	display: flex;
-	flex-direction: column;
-	gap: 0rem;
-}
 .framework {
 	text-transform: capitalize;
 }

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

@@ -15,6 +15,7 @@
 			/>
 		</template>
 		<template #edit-buttons>
+			<span v-if="model" class="ml-auto">{{ model.header.schema_name }}</span>
 			<template v-if="!featureConfig.isPreview">
 				<Button
 					icon="pi pi-ellipsis-v"
@@ -40,15 +41,15 @@
 </template>
 
 <script setup lang="ts">
-import { watch, PropType, ref, computed } from 'vue';
-import { isEmpty, cloneDeep } from 'lodash';
+import { computed, PropType, ref, watch } from 'vue';
+import { cloneDeep, isEmpty } from 'lodash';
 import TeraAsset from '@/components/asset/tera-asset.vue';
 import TeraModelDescription from '@/components/model/petrinet/tera-model-description.vue';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
 import ContextMenu from 'primevue/contextmenu';
-import { updateModelConfiguration, addDefaultConfiguration } from '@/services/model-configurations';
-import { getModel, updateModel, getModelConfigurations, isModelEmpty } from '@/services/model';
+import { addDefaultConfiguration, updateModelConfiguration } from '@/services/model-configurations';
+import { getModel, getModelConfigurations, isModelEmpty, updateModel } from '@/services/model';
 import { FeatureConfig } from '@/types/common';
 import { AssetType, type Model, type ModelConfiguration } from '@/types/Types';
 import { useProjects } from '@/composables/project';

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

@@ -1,10 +1,12 @@
 <template>
 	<main>
-		<section>
-			<h5>Related publications</h5>
+		<p v-if="isEmpty(relatedDocuments)">
+			Terarium can extract information from documents to add relevant information to this resource.
+		</p>
+		<template v-else>
 			<p>
-				Terarium can extract information from documents to add relevant information to this
-				resource.
+				Related publications, documents, and other resources that are relevant to this
+				{{ assetType }}.
 			</p>
 			<ul>
 				<li v-for="document in relatedDocuments" :key="document.id">
@@ -14,18 +16,31 @@
 					/>
 				</li>
 			</ul>
-			<div class="extraction-commands">
-				<Button text label="Enrich description" :loading="isLoading" @click="dialogForEnrichment" />
-				<Button text label="Extract variables" :loading="isLoading" @click="dialogForExtraction" />
-				<Button
-					text
-					:disabled="props.assetType != AssetType.Model"
-					:label="`Align extractions to ${assetType}`"
-					:loading="isLoading"
-					@click="dialogForAlignment"
-				/>
-			</div>
-		</section>
+		</template>
+		<footer class="flex gap-2">
+			<Button
+				severity="secondary"
+				size="small"
+				label="Enrich description"
+				:loading="isLoading"
+				@click="dialogForEnrichment"
+			/>
+			<Button
+				severity="secondary"
+				size="small"
+				label="Extract variables"
+				:loading="isLoading"
+				@click="dialogForExtraction"
+			/>
+			<Button
+				severity="secondary"
+				size="small"
+				:disabled="props.assetType != AssetType.Model"
+				:label="`Align extractions to ${assetType}`"
+				:loading="isLoading"
+				@click="dialogForAlignment"
+			/>
+		</footer>
 		<Dialog
 			v-model:visible="visible"
 			modal
@@ -111,7 +126,7 @@ import { isDocumentAsset } from '@/utils/data-util';
 import TeraAssetLink from './tera-asset-link.vue';
 
 const props = defineProps<{
-	documents?: Array<{ name: string | undefined; id: string | undefined }>;
+	documents: { name: string; id: string }[];
 	assetType: AssetType;
 	assetId: TerariumAsset['id'];
 }>();
@@ -254,9 +269,10 @@ watch(
 
 async function getRelatedDocuments() {
 	if (!props.assetType) return;
-	const provenanceType = mapAssetTypeToProvenanceType(props.assetType);
 
+	const provenanceType = mapAssetTypeToProvenanceType(props.assetType);
 	if (!provenanceType) return;
+
 	const provenanceNodes = await getRelatedArtifacts(props.assetId, provenanceType, [
 		ProvenanceType.Document
 	]);
@@ -273,16 +289,9 @@ async function getRelatedDocuments() {
 
 <style scoped>
 main {
-	background-color: var(--surface-highlight);
-	border-radius: var(--border-radius);
-	border: 1px solid var(--surface-border);
-	padding: var(--gap-small) var(--gap);
-
-	& > section {
-		display: flex;
-		gap: var(--gap-small);
-		flex-direction: column;
-	}
+	display: flex;
+	gap: var(--gap-small);
+	flex-direction: column;
 }
 
 ul {
@@ -300,10 +309,6 @@ ul:empty {
 	align-items: center;
 }
 
-.extraction-commands > .p-button {
-	padding: 0.25rem var(--gap-small);
-}
-
 .no-documents-img {
 	width: 30%;
 	padding: 10px;

packages/client/hmi-client/src/page/data-explorer/DataExplorer.vue

@@ -27,9 +27,9 @@
 							option-value="value"
 							option-label="label"
 						/>
-						<div class="toggles">
-							<span v-if="assetType === AssetType.Document">
-								<label>Source</label>
+						<div class="toggles" v-if="assetType === AssetType.Document">
+							<span>
+								<label class="mr-2">Source</label>
 								<Dropdown v-model="chosenSource" :options="sourceOptions" />
 							</span>
 							<tera-filter-bar :topic-options="topicOptions" @filter-changed="executeNewQuery" />
@@ -98,15 +98,14 @@ import {
 import useQueryStore from '@/stores/query';
 import filtersUtil from '@/utils/filters-util';
 import useResourcesStore from '@/stores/resources';
-import { getResourceID, isDataset, isModel, isDocument, validate } from '@/utils/data-util';
+import { getResourceID, isDataset, isDocument, isModel, validate } from '@/utils/data-util';
 import { cloneDeep, intersectionBy, isEmpty, isEqual, max, min, unionBy } from 'lodash';
 import { useRoute } from 'vue-router';
 import TeraPreviewPanel from '@/page/data-explorer/components/tera-preview-panel.vue';
 import TeraFacetsPanel from '@/page/data-explorer/components/tera-facets-panel.vue';
 import TeraSearchResultsList from '@/page/data-explorer/components/tera-search-results-list.vue';
 import { AssetType, XDDFacetsItemResponse } from '@/types/Types';
-import TeraSearchbar from '@/components/navbar/tera-searchbar.vue';
-// import Chip from 'primevue/chip';
+import TeraSearchbar from '@/components/navbar/tera-searchbar.vue'; // import Chip from 'primevue/chip';
 import { useSearchByExampleOptions } from './search-by-example';
 import TeraFilterBar from './components/tera-filter-bar.vue';
 
@@ -169,8 +168,8 @@ const topicOptions = ref([
 	{ label: 'Climate Weather', value: 'climate-change-modeling' }
 ]);
 
-const sourceOptions = ref(['XDD', 'Terarium']);
-const chosenSource = ref('XDD');
+const sourceOptions = ref(['xDD', 'Terarium']);
+const chosenSource = ref('xDD');
 
 const sliderWidth = computed(() =>
 	isSliderFacetsOpen.value ? 'calc(50% - 120px)' : 'calc(50% - 20px)'
@@ -615,14 +614,9 @@ main {
 }
 
 .toggles {
+	align-items: center;
 	display: flex;
-	gap: 1rem;
-
-	& > span {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
+	gap: var(--gap);
 
 	& .p-dropdown {
 		min-width: 8rem;

packages/client/hmi-client/src/page/data-explorer/components/tera-filter-bar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="flex align-items-center">
-		<label class="pr-2">Topic Filter</label>
+		<label class="mr-2">Topic Filter</label>
 		<Dropdown
 			class="topic-dropdown"
 			:modelValue="topic"
@@ -38,6 +38,6 @@ const onTopicChange = (e) => {
 
 <style scoped>
 .topic-dropdown {
-	min-width: 210px;
+	min-width: 12rem;
 }
 </style>