From 3f96770aeb88c873139b0262f2ae1bd0f92361fd Mon Sep 17 00:00:00 2001
From: Edwin Lai <edwinslai@gmail.com>
Date: Fri, 14 Jul 2023 14:06:02 -0400
Subject: [PATCH] feat: update dataset data profiling extractions table (#1302)

Co-authored-by: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Co-authored-by: Derek Vince <dvince@uncharted.software>
Co-authored-by: Thanh Pham <tpham@uncharted.software>
Co-authored-by: Tom Szendrey <T.Szendrey@hotmail.com>
Co-authored-by: Yohann Paris <github@yohannparis.com>
Co-authored-by: Thanh Pham <98172806+tangopapatime@users.noreply.github.com>
---
 .../src/components/dataset/tera-dataset.vue   | 486 ++++++++++++++----
 .../src/components/models/tera-model.vue      |  21 +-
 .../widgets/tera-related-publications.vue     |  30 +-
 .../temp/datasets/wasteWaterSurveillance.ts   | 326 ++++++++++++
 4 files changed, 740 insertions(+), 123 deletions(-)
 create mode 100644 packages/client/hmi-client/src/temp/datasets/wasteWaterSurveillance.ts

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
index ade5b9e9da..7130a42490 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
@@ -44,7 +44,7 @@
 					transformation tools.</Message
 				>
 			</div>
-			<section class="metadata data-row" v-if="!metadata">
+			<section class="metadata data-row">
 				<section>
 					<header>Rows</header>
 					<section>{{ csvContent?.length || '-' }}</section>
@@ -52,8 +52,6 @@
 				<section>
 					<header>Columns</header>
 					<section>{{ rawContent?.stats?.length || '-' }}</section>
-					<header>Metadata</header>
-					<section>{{ dataset?.metadata || '-' }}</section>
 				</section>
 				<section>
 					<header>Date uploaded</header>
@@ -66,10 +64,13 @@
 					<section>{{ dataset?.username || '-' }}</section>
 				</section>
 			</section>
-			<section class="metadata data-row" v-if="!metadata">
+			<section class="metadata data-row">
 				<section>
 					<header>Source Name</header>
-					<section>{{ dataset?.source || '-' }}</section>
+					<section v-if="dataset.url === 'https://github.com/reichlab/covid19-forecast-hub/'">
+						The Reich Lab at UMass-Amherst
+					</section>
+					<section v-else>{{ dataset?.source || '-' }}</section>
 				</section>
 				<section>
 					<header>Source URL</header>
@@ -79,36 +80,105 @@
 					</section>
 				</section>
 			</section>
-			<RelatedPublications
-				@extracted-metadata="(extract) => (metadata = extract)"
-				:publications="[metadata?.source]"
-				:project="project"
+			<tera-related-publications
+				@extracted-metadata="gotEnrichedData"
 				:dialog-flavour="'dataset'"
+				:publications="props.project?.assets?.publications"
+				:project="project"
 			/>
-			<Accordion :multiple="true" :activeIndex="showAccordion">
+			<Accordion :multiple="true" :activeIndex="[0, 1, 2]">
 				<AccordionTab>
 					<template #header>
 						<header id="Description">Description</header>
 					</template>
-					<section v-if="metadata">
-						<ul>
-							<li>Dataset name: {{ metadata.name }}</li>
-							<li>Dataset overview: {{ metadata.description }}</li>
-							<li>Dataset URL: {{ metadata.source }}</li>
-							<li>
-								Data size: This dataset currently contains {{ csvContent?.length || '-' }} rows.
-							</li>
-						</ul>
+					<section v-if="enriched">
+						<div class="dataset-detail">
+							<div class="full-width">
+								<div class="detail-list">
+									<h2 class="title">Dataset Details</h2>
+									<ul>
+										<li><strong>Dataset name:</strong> {{ dataset.name }}</li>
+										<li><strong>Dataset overview:</strong> {{ dataset.description }}</li>
+										<li>
+											<strong>Dataset URL:</strong>
+											<a :href="dataset.source">{{ dataset.source }}</a>
+										</li>
+										<li>
+											<strong>Data size:</strong> This dataset currently contains
+											{{ csvContent?.length || '-' }} rows.
+										</li>
+									</ul>
+								</div>
+							</div>
+							<div class="column">
+								<h3 class="title">{{ headers.DESCRIPTION }}</h3>
+								<p class="content">{{ enrichedData.DESCRIPTION }}</p>
+
+								<h3 class="subtitle">{{ headers.AUTHOR_NAME }}</h3>
+								<p class="content">{{ enrichedData.AUTHOR_NAME }}</p>
+
+								<h3 class="subtitle">{{ headers.AUTHOR_EMAIL }}</h3>
+								<p class="content">{{ enrichedData.AUTHOR_EMAIL }}</p>
+							</div>
+
+							<div class="column">
+								<h3 class="subtitle">{{ headers.DATE }}</h3>
+								<p class="content">{{ enrichedData.DATE }}</p>
+
+								<h3 class="subtitle">{{ headers.SCHEMA }}</h3>
+								<p class="content">{{ enrichedData.SCHEMA }}</p>
+
+								<h3 class="subtitle">{{ headers.PROVENANCE }}</h3>
+								<p class="content">{{ enrichedData.PROVENANCE }}</p>
+							</div>
+
+							<div class="column">
+								<h3 class="subtitle">{{ headers.SENSITIVITY }}</h3>
+								<p class="content">{{ enrichedData.SENSITIVITY }}</p>
+							</div>
+							<div class="column">
+								<h3 class="subtitle">{{ headers.LICENSE }}</h3>
+								<p class="content">{{ enrichedData.LICENSE }}</p>
+							</div>
+							<div class="full-width">
+								<h3 class="subtitle">{{ headers.EXAMPLES }}</h3>
+								<ul class="example-list" v-if="enrichedData.EXAMPLES">
+									<li
+										class="example-item"
+										v-for="(value, key) in JSON.parse(enrichedData.EXAMPLES)"
+										:key="key"
+									>
+										<strong>{{ key }}:</strong>{{ value }}
+									</li>
+								</ul>
+							</div>
+							<div class="full-width">
+								<h3 class="subtitle">{{ `Extraction Table` }}</h3>
+								<DataTable :value="pd">
+									<Column field="col_name" header="Column Name"></Column>
+									<Column field="concept" header="Concept"></Column>
+									<Column field="unit" header="Unit"></Column>
+									<Column field="description" header="Description"></Column>
+								</DataTable>
+							</div>
+						</div>
 					</section>
-					<p v-else v-html="dataset?.description" />
+					<p v-else>
+						No information available. Add resources to generate a description. Or click edit icon to
+						edit this field directly.
+					</p>
 				</AccordionTab>
-				<AccordionTab v-if="metadata">
+				<AccordionTab v-if="enriched">
 					<template #header>
 						<header id="Source">Source</header>
 					</template>
-					This data is sourced from {{ metadata.source }}
+					This data is sourced from
+					{{ dataset.metadata.documents ? dataset.metadata.documents[0].title : 'unknown' }}:
+					<a :href="dataset.metadata.documents ? dataset.metadata.documents[0].url : ''">{{
+						dataset.metadata.documents ? dataset.metadata.documents[0].url : ''
+					}}</a>
 				</AccordionTab>
-				<AccordionTab v-if="metadata">
+				<AccordionTab>
 					<template #header>
 						<header id="Variables">Variables</header>
 					</template>
@@ -120,7 +190,7 @@
 									'NAME',
 									'DATA TYPE',
 									'UNITS',
-									'GROUNDING',
+									'CONCEPTS',
 									'EXTRACTIONS'
 								]"
 								:key="index"
@@ -128,62 +198,122 @@
 								{{ title }}
 							</div>
 						</div>
-						<div v-for="(column, index) in metadata.columns" class="variables-row" :key="index">
-							<div>{{ column.name }}</div>
-							<div>{{ formatName(column.name) }}</div>
-							<div>{{ column.data_type }}</div>
-							<div>-</div>
-							<div>
-								{{ column.grounding.identifiers[Object.keys(column.grounding.identifiers)[0]] }}
+						<div
+							v-for="(column, index) in editableRows"
+							class="variables-row"
+							:key="index"
+							@click="
+								() => {
+									rowEditList[index] = true;
+									setUnsavedRowValues();
+								}
+							"
+							:active="rowEditList[index]"
+						>
+							<!-- id -->
+							<InputText
+								class="p-inputtext-sm"
+								type="text"
+								v-if="rowEditList[index]"
+								v-model="column.name"
+								@focus="setSuggestedValue(index, dataset.columns?.[index].name)"
+							/>
+							<div class="variables-value" v-else>{{ column.name }}</div>
+							<!-- name - currently just a formatted id -->
+							<InputText
+								class="p-inputtext-sm"
+								type="text"
+								v-if="rowEditList[index]"
+								v-model="column.name"
+								@focus="setSuggestedValue(index, dataset.columns?.[index].name)"
+							/>
+							<div class="variables-value" v-else>{{ formatName(column.name) }}</div>
+							<!-- data type -->
+							<InputText
+								class="p-inputtext-sm"
+								type="text"
+								v-if="rowEditList[index]"
+								v-model="column.dataType"
+								@focus="setSuggestedValue(index, dataset.columns?.[index].dataType)"
+							/>
+							<div class="variables-value" v-else>{{ column.dataType }}</div>
+							<!-- units - field does not exist in tds yet -->
+							<InputText
+								class="p-inputtext-sm"
+								type="text"
+								v-if="rowEditList[index]"
+								@focus="setSuggestedValue(index, '')"
+							/>
+							<div class="variables-value" v-else>-</div>
+							<!-- grounding -->
+							<InputText
+								class="p-inputtext-sm"
+								type="text"
+								v-if="rowEditList[index]"
+								v-model="groundingValues[index][0]"
+								@focus="setSuggestedValue(index, originalGroundingValues[0])"
+							/>
+							<div class="variables-value" v-else>
+								{{ groundingValues[index][0] }}
+							</div>
+							<!-- extractions - field does not exist in tds yet -->
+							<InputText
+								class="p-inputtext-sm"
+								type="text"
+								v-if="rowEditList[index]"
+								@focus="setSuggestedValue(index, '')"
+							/>
+							<div class="variables-value" v-else></div>
+							<div v-if="rowEditList[index]" class="row-edit-buttons">
+								<Button
+									text
+									icon="pi pi-times"
+									@click.stop="
+										() => {
+											rowEditList[index] = false;
+											cancelRowEdits(index);
+										}
+									"
+								/>
+								<Button text icon="pi pi-check" @click.stop="rowEditList[index] = false" />
+							</div>
+							<!-- description -->
+							<InputText
+								class="p-inputtext-sm variables-description"
+								type="text"
+								v-if="rowEditList[index]"
+								v-model="column.description"
+								@focus="setSuggestedValue(index, dataset.columns?.[index].description)"
+							/>
+							<div class="variables-description variables-value" v-else>
+								{{ column.description }}
+							</div>
+							<!-- suggested values -->
+							<div v-if="rowEditList[index]" class="variables-suggested">
+								<span>Suggested value</span>
+								<div>
+									<div class="suggested-value-source">
+										<i class="pi pi-file" />{{ dataset.metadata.documents[0].title }}
+									</div>
+									<div class="suggested-value">{{ suggestedValues[index] }}</div>
+								</div>
+								<span>Other possible values</span>
+								<div>
+									<div class="suggested-value-source">
+										<i class="pi pi-file" />{{ dataset.metadata.documents[0].title }}
+									</div>
+									<div class="suggested-value">
+										<ul>
+											<li v-for="(grounding, g) in groundingValues[index].slice(1, 5)" :key="g">
+												{{ grounding }}
+											</li>
+										</ul>
+									</div>
+								</div>
 							</div>
-							<div></div>
-							<div class="variables-description">{{ column.description }}</div>
 						</div>
 					</div>
 				</AccordionTab>
-				<AccordionTab v-if="(annotations?.length || 0) > 0">
-					<template #header>
-						<header id="Annotations">
-							Annotations
-							<span class="artifact-amount"> ({{ annotations?.length || 0 }}) </span>
-						</header>
-					</template>
-					<section v-if="annotations">
-						<header class="annotation-subheader">Annotations</header>
-						<section class="annotation-group">
-							<section
-								v-for="name in annotations.map((annotation) => annotation['name'])"
-								:key="name"
-								class="annotation-row data-row"
-							>
-								<section>
-									<header>Name</header>
-									<section>{{ name }}</section>
-								</section>
-								<section>
-									<header>Description</header>
-									<section>{{ annotations[name] }}</section>
-								</section>
-							</section>
-						</section>
-					</section>
-				</AccordionTab>
-			</Accordion>
-			<Accordion :multiple="true" :activeIndex="[0, 1]">
-				<AccordionTab v-if="(annotations?.['feature']?.length || 0) > 0">
-					<template #header>
-						<header id="Variables">
-							Variables<span class="artifact-amount">({{ annotations?.['feature']?.length }})</span>
-						</header>
-					</template>
-					<DataTable :value="annotations?.['feature']">
-						<Column field="name" header="Name"></Column>
-						<Column field="featureType" header="Type"></Column>
-						<Column field="description" header="Definition"></Column>
-						<Column field="units" header="Units"></Column>
-						<Column field="concept" header="Concept"></Column>
-					</DataTable>
-				</AccordionTab>
 			</Accordion>
 		</template>
 		<template v-else-if="datasetView === DatasetView.DATA">
@@ -219,15 +349,17 @@ import Message from 'primevue/message';
 import * as textUtil from '@/utils/text';
 import { isString } from 'lodash';
 import { downloadRawFile, getDataset } from '@/services/dataset';
-import { CsvAsset, Dataset } from '@/types/Types';
+import { CsvAsset, Dataset, DatasetColumn } from '@/types/Types';
 import TeraDatasetDatatable from '@/components/dataset/tera-dataset-datatable.vue';
 import TeraDatasetJupyterPanel from '@/components/dataset/tera-dataset-jupyter-panel.vue';
 import TeraAsset from '@/components/asset/tera-asset.vue';
 import { IProject } from '@/types/Project';
 import Menu from 'primevue/menu';
+import TeraRelatedPublications from '@/components/widgets/tera-related-publications.vue';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
-import RelatedPublications from '../widgets/tera-related-publications.vue';
+
+const enrichedData = ref();
 
 enum DatasetView {
 	DESCRIPTION = 'description',
@@ -241,8 +373,28 @@ const props = defineProps<{
 	project?: IProject;
 }>();
 
+const gotEnrichedData = (payload) => {
+	enrichedData.value = payload;
+	enriched.value = true;
+};
+
+const pd = computed(() =>
+	enrichedData.value ? Object.values(enrichedData.value.DATA_PROFILING_RESULT) : []
+);
+
+const headers = ref({
+	DESCRIPTION: 'Project Description',
+	AUTHOR_NAME: 'Author Name',
+	AUTHOR_EMAIL: 'Author Email',
+	DATE: 'Date of Data',
+	SCHEMA: 'Data Schema',
+	PROVENANCE: 'Data Provenance',
+	SENSITIVITY: 'Data Sensitivity',
+	EXAMPLES: 'Example Data',
+	LICENSE: 'License Information'
+});
+
 const emit = defineEmits(['close-preview', 'asset-loaded']);
-const metadata = ref();
 const showKernels = ref(<boolean>false);
 const showChatThoughts = ref(<boolean>false);
 const menu = ref();
@@ -311,6 +463,40 @@ function highlightSearchTerms(text: string | undefined): string {
 	return text ?? '';
 }
 
+// temporary variable to allow user to click through related publications modal and simulate "getting" enriched data back
+const enriched = ref(false);
+
+const groundingValues = ref<string[][]>([]);
+// groundingValuesUnsaved is set to the value of the grounding value being edited, and is the value that is reverted back to if the user does not save their changes
+const groundingValuesUnsaved = ref<string[][]>([]);
+// originaGroundingValues are displayed as the first suggested value for concepts
+const originalGroundingValues = ref<string[]>([]);
+const suggestedValues = ref<string[]>([]);
+
+function setUnsavedRowValues() {
+	editableRowsUnsaved.value = editableRows.value.map((row) => ({ ...row }));
+	groundingValuesUnsaved.value = groundingValues.value.map((g) => [...g]);
+}
+
+// quick and dirty function to populate one suggested value per column, based on what column field user clicked; possible refactor
+function setSuggestedValue(index: number, suggestedValue: string | undefined) {
+	if (suggestedValues.value.length > index && suggestedValue) {
+		suggestedValues.value[index] = suggestedValue;
+	}
+}
+
+const rowEditList = ref<boolean[]>([]);
+// editableRows is are the dataset columns that can be edited by the user; transient data
+const editableRows = ref<DatasetColumn[]>([]);
+// editableRowsUnsaved is set to the value of the row being edited, and is the value that is reverted back to if the user does not save their changes
+const editableRowsUnsaved = ref<DatasetColumn[]>([]);
+
+function cancelRowEdits(index: number) {
+	if (dataset.value?.columns) {
+		editableRows.value[index] = { ...editableRowsUnsaved.value[index] };
+		groundingValues.value[index] = [...groundingValuesUnsaved.value[index]];
+	}
+}
 const openDatesetChatTab = () => {
 	datasetView.value = DatasetView.LLM;
 	jupyterCsv.value = null;
@@ -318,7 +504,24 @@ const openDatesetChatTab = () => {
 
 onUpdated(() => {
 	if (dataset.value) {
+		console.log(dataset.value);
 		emit('asset-loaded');
+
+		// setting values related to editing rows in the variables table
+		if (dataset.value.columns) {
+			rowEditList.value = dataset.value.columns.map(() => false);
+			suggestedValues.value = dataset.value.columns.map(() => '');
+			editableRows.value = dataset.value.columns.map((c) => ({ ...c }));
+			groundingValues.value = editableRows.value.map((row) => {
+				const grounding = row.grounding;
+				if (grounding) {
+					const keys = Object.keys(grounding.identifiers);
+					return keys.map((k) => grounding.identifiers[k]);
+				}
+				return [];
+			});
+			originalGroundingValues.value = groundingValues.value.map((g) => g[0]);
+		}
 	}
 });
 
@@ -357,20 +560,6 @@ watch(
 	},
 	{ immediate: true }
 );
-
-const annotations = computed(() => dataset.value?.columns?.map((column) => column.annotations));
-const showAccordion = computed(() => {
-	if (metadata.value) {
-		return [0, 1, 2];
-	}
-	if (dataset.value?.columns) {
-		return dataset.value?.columns?.map((column) => column?.annotations ?? 0)?.length > 0
-			? [1]
-			: [0];
-	}
-
-	return [0];
-});
 </script>
 
 <style scoped>
@@ -472,14 +661,14 @@ main .annotation-group {
 
 .variables-header {
 	display: grid;
-	grid-template-columns: repeat(6, 1fr);
+	grid-template-columns: repeat(6, 1fr) 0.5fr;
 	color: var(--text-color-subdued);
 	font-size: var(--font-caption);
 }
 
 .variables-row {
 	display: grid;
-	grid-template-columns: repeat(6, 1fr);
+	grid-template-columns: repeat(6, 1fr) 0.5fr;
 	grid-template-rows: 1fr 1fr;
 	border-top: 1px solid var(--surface-border);
 }
@@ -488,9 +677,116 @@ main .annotation-group {
 	background-color: var(--surface-highlight);
 }
 
+.variables-row[active='true'] {
+	background-color: var(--surface-highlight);
+	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+}
+
 .variables-description {
 	grid-row: 2;
 	grid-column: 1 / span 6;
 	color: var(--text-color-subdued);
 }
+
+.variables-suggested {
+	grid-row: 3 / span 3;
+	grid-column: 1 / span 6;
+}
+
+.variables-suggested div {
+	display: flex;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.variables-suggested span {
+	font-weight: bold;
+}
+
+.variables-suggested i {
+	margin-right: 0.5rem;
+}
+
+.suggested-value-source {
+	margin-right: 2rem;
+}
+
+.suggested-value {
+	color: var(--text-color-subdued);
+}
+
+.variables-suggested .suggested-value ul {
+	flex-direction: row;
+}
+
+main :deep(.p-inputtext.p-inputtext-sm) {
+	padding-left: 0.65rem;
+}
+
+.row-edit-buttons {
+	display: flex;
+	justify-content: space-evenly;
+}
+.dataset-detail {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	font-family: var(--font-family);
+	transition: all 0.3s ease;
+	padding: 20px;
+}
+
+.column,
+.detail-list {
+	margin-bottom: 20px;
+}
+
+.full-width {
+	width: 100%;
+}
+
+.detail-list {
+	padding: 10px;
+	border-radius: 5px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.detail-list ul {
+	list-style: none;
+	padding: 0;
+}
+
+.detail-list ul li {
+	margin-bottom: 10px;
+}
+
+.title {
+	font-size: 16px;
+	margin-bottom: 20px;
+}
+
+.subtitle {
+	font-size: 14px;
+	margin-top: 20px;
+	margin-bottom: 10px;
+}
+
+.content {
+	font-size: 12px;
+	margin-bottom: 10px;
+}
+
+.example-list {
+	list-style-type: none;
+	padding: 0;
+}
+
+.example-item {
+	margin-bottom: 10px;
+}
+
+.example-item:hover {
+	color: #f78c6c;
+	transition: all 0.3s ease;
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/models/tera-model.vue b/packages/client/hmi-client/src/components/models/tera-model.vue
index b6186f1277..56ce93da85 100644
--- a/packages/client/hmi-client/src/components/models/tera-model.vue
+++ b/packages/client/hmi-client/src/components/models/tera-model.vue
@@ -75,7 +75,7 @@
 					<td>{{ model?.metadata?.processed_by ?? '--' }}</td>
 				</tr>
 			</table>
-			<RelatedPublications
+			<tera-related-publications
 				:publications="publications"
 				:project="project"
 				:dialog-flavour="'model'"
@@ -481,7 +481,7 @@ import Message from 'primevue/message';
 import Tag from 'primevue/tag';
 import Textarea from 'primevue/textarea';
 import TeraAsset from '@/components/asset/tera-asset.vue';
-import RelatedPublications from '@/components/widgets/tera-related-publications.vue';
+import TeraRelatedPublications from '@/components/widgets/tera-related-publications.vue';
 import TeraModal from '@/components/widgets/tera-modal.vue';
 import { convertToAMRModel } from '@/model-representation/petrinet/petrinet-service';
 import { RouteName } from '@/router/routes';
@@ -912,28 +912,11 @@ function editSection(event: Event) {
 	margin-left: 0.5rem;
 }
 
-.p-toolbar {
-	position: absolute;
-	width: 100%;
-	z-index: 1;
-	isolation: isolate;
-	background: transparent;
-	padding: 0.5rem;
-}
-
 .p-button.p-component.p-button-sm.p-button-outlined.toolbar-button {
 	background-color: var(--surface-0);
 	margin: 0.25rem;
 }
 
-.toolbar-button-saveModel {
-	margin: 0.25rem;
-}
-
-.toolbar-subgroup {
-	display: flex;
-}
-
 .floating-edit-button {
 	background-color: var(--surface-0);
 	margin-top: 10px;
diff --git a/packages/client/hmi-client/src/components/widgets/tera-related-publications.vue b/packages/client/hmi-client/src/components/widgets/tera-related-publications.vue
index 0581737026..a555c31f12 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-related-publications.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-related-publications.vue
@@ -6,12 +6,12 @@
 				Terarium can extract information from papers and other resources to add relevant information
 				to this resource.
 			</p>
-			<ul v-if="publications?.length">
+			<ul>
 				<li v-for="(publication, index) in publications" :key="index">
-					<a :href="publication">{{ publication }}</a>
+					<a :href="publication.xdd_uri">{{ publication.title }}</a>
 				</li>
 			</ul>
-			<Button icon="pi pi-plus" label="Add resources" text @click="visible = true" />
+			<Button icon="pi pi-plus" label="Add resources" text @click="addResources" />
 			<Dialog
 				v-model:visible="visible"
 				modal
@@ -23,12 +23,12 @@
 					{{ dialogFlavour }}. Select the resources you would like to use.
 				</p>
 				<DataTable
-					:value="resources"
+					:value="publications"
 					v-model:selection="selectedResources"
 					tableStyle="min-width: 50rem"
 				>
 					<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-					<Column field="name" sortable header="Name"></Column>
+					<Column field="title" sortable header="Name"></Column>
 					<Column field="authors" sortable header="Authors"></Column>
 				</DataTable>
 				<template #footer>
@@ -51,16 +51,19 @@ import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
-import { computed, ComputedRef, ref } from 'vue';
+import { computed, ComputedRef, ref, onMounted } from 'vue';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
-import { Artifact } from '@/types/Types';
 import { IProject } from '@/types/Project';
 import { AcceptedExtensions } from '@/types/common';
+import { WASTE_WATER_SURVEILLANCE } from '@/temp/datasets/wasteWaterSurveillance';
+
+import { Artifact, DocumentAsset } from '@/types/Types';
 
 const visible = ref(false);
 const selectedResources = ref();
 
+// removed from template.  re-add after hack-a-thon and endpoint working.
 const resources: ComputedRef<{ name: string; id: string | undefined; authors: string }[] | any[]> =
 	computed(() => {
 		if (props.project?.assets) {
@@ -81,17 +84,26 @@ const resources: ComputedRef<{ name: string; id: string | undefined; authors: st
 
 const props = defineProps<{
 	project?: IProject;
-	publications?: Array<string>;
+	publications?: Array<DocumentAsset>;
 	dialogFlavour: string;
 }>();
 const emit = defineEmits(['extracted-metadata']);
 
+const addResources = () => {
+	visible.value = true;
+	// do something
+};
+
 function sendForEnrichments(_selectedResources) {
 	console.log('sending these resources for enrichment:', _selectedResources);
 
-	emit('extracted-metadata');
+	emit('extracted-metadata', WASTE_WATER_SURVEILLANCE);
 	/* TODO: send selected resources to backend for enrichment */
 }
+
+onMounted(() => {
+	console.log(resources);
+});
 </script>
 
 <style scoped>
diff --git a/packages/client/hmi-client/src/temp/datasets/wasteWaterSurveillance.ts b/packages/client/hmi-client/src/temp/datasets/wasteWaterSurveillance.ts
new file mode 100644
index 0000000000..be294f4f84
--- /dev/null
+++ b/packages/client/hmi-client/src/temp/datasets/wasteWaterSurveillance.ts
@@ -0,0 +1,326 @@
+// @ts-nocheck
+/* eslint-disable */
+
+export const WASTE_WATER_SURVEILLANCE = {
+	DESCRIPTION: 'COVID-19 Wastewater Surveillance: An Epidemiological Model',
+	AUTHOR_NAME: 'Shakeri-Lab',
+	AUTHOR_EMAIL: 'UNKNOWN',
+	DATE: '2021-10-19',
+	SCHEMA: 'dates,VAX_count,day,sdm,events,I_1,I_2,I_3,Y_1,Y_2,Y_3,V_1,V_2,V_3,Infected,Y,V,logV',
+	PROVENANCE:
+		'Using wastewater surveillance as a continuous pooled sampling technique has been in place in many countries since the early stages of the outbreak of COVID-19.',
+	SENSITIVITY: 'UNKNOWN',
+	EXAMPLES:
+		'{"dates": "2021-05-14", "VAX_count": 236, "day": 430, "sdm": 0.4, "events": 0.1, "I_1": 85, "I_2": 49, "I_3": 62, "Y_1": 3, "Y_2": 0, "Y_3": 2, "V_1": 113192.37284202829, "V_2": 81612.73344185714, "V_3": 78832.64723781461, "Infected": 196, "Y": 5, "V": 87568.41792704807, "logV": 11.38017568597244}',
+	LICENSE: 'UNKNOWN',
+	DATA_PROFILING_RESULT: {
+		dates: {
+			col_name: 'dates',
+			concept: 'Time',
+			unit: 'YYYY-MM-DD',
+			description: 'The date when the data was recorded',
+			dkg_groundings: [
+				['hp:0001147', 'Retinal exudate'],
+				['hp:0030496', 'Macular exudate'],
+				['ncit:C114947', 'Postterm Infant'],
+				['oae:0006126', 'retinal exudates AE'],
+				['oae:0008293', 'large for dates baby AE'],
+				['pato:0000165', 'time', 'class'],
+				['gfo:Time', 'time', 'class'],
+				['geonames:2365173', 'Maritime', 'individual'],
+				['wikidata:Q174728', 'centimeter', 'class'],
+				['probonto:k0000056', 'nondecisionTime', 'class']
+			]
+		},
+		VAX_count: {
+			col_name: 'VAX_count',
+			concept: 'Vaccination',
+			unit: 'Count',
+			description: 'The number of vaccinations administered on the given date',
+			dkg_groundings: [
+				['apollosv:00000142', 'vaccination', 'class'],
+				['idomal:0001040', 'vaccination', 'class'],
+				['vo:0000002', 'vaccination', 'class'],
+				['askemo:0000012', 'vaccination rate', 'class'],
+				['vo:0000814', 'vaccination dose', 'class']
+			]
+		},
+		day: {
+			col_name: 'day',
+			concept: 'Time',
+			unit: 'Day',
+			description: 'The day count since the start of the data recording',
+			dkg_groundings: [
+				['wikidata:Q573', 'day'],
+				['geonames:3099434', 'Gdańsk'],
+				['geonames:1263814', 'Mandya'],
+				['geonames:1275163', 'Budaun'],
+				['geonames:358269', 'Dayrūţ'],
+				['pato:0000165', 'time', 'class'],
+				['gfo:Time', 'time', 'class'],
+				['geonames:2365173', 'Maritime', 'individual'],
+				['wikidata:Q174728', 'centimeter', 'class'],
+				['probonto:k0000056', 'nondecisionTime', 'class']
+			]
+		},
+		sdm: {
+			col_name: 'sdm',
+			concept: 'Social Distancing Measure',
+			unit: 'Ratio',
+			description: 'The level of social distancing measures in place, represented as a ratio',
+			dkg_groundings: [
+				['geonames:2852458', 'Potsdam'],
+				['pr:Q9D8T2', 'gasdermin-D (mouse)'],
+				['pr:P57764', 'gasdermin-D (human)'],
+				['pr:Q14696', 'LRP chaperone MESD (human)'],
+				['cido:0013402', 'SARS-CoV-2-human S-DMD physical association'],
+				[
+					'wikidata:Q91104866',
+					'social distancing measures related to the 2019–20 coronavirus pandemic',
+					'class'
+				],
+				[
+					'wikidata:Q96612699',
+					'Social distancing measures: evidence of interruption of seasonal influenza activity and early lessons of the SARS-CoV-2 pandemic',
+					'class'
+				],
+				[
+					'wikidata:Q99612241',
+					'Social distancing measures in the fight against COVID-19 in Brazil: description and epidemiological analysis by state',
+					'class'
+				],
+				[
+					'wikidata:Q104138004',
+					'Social distancing measures and demands for the reorganization of hemotherapy services in the context of Covid-19',
+					'class'
+				],
+				[
+					'wikidata:Q96290984',
+					'Social distancing measures to control the COVID-19 pandemic: potential impacts and challenges in Brazil',
+					'class'
+				]
+			]
+		},
+		events: {
+			col_name: 'events',
+			concept: 'Events',
+			unit: 'Count',
+			description:
+				'The number of significant events (such as policy changes or outbreaks) on the given date',
+			dkg_groundings: [
+				['hp:0001907', 'Thromboembolism'],
+				['hp:0001297', 'Stroke'],
+				['pr:Q9GZR2', 'RNA exonuclease 4 (human)'],
+				['cemo:number_of_cases_with_exposure_events', 'number of cases with exposure events'],
+				['cemo:number_of_schools_with_exposure_events', 'number of schools with exposure events']
+			]
+		},
+		I_1: {
+			col_name: 'I_1',
+			concept: 'Infectious Population',
+			unit: 'Count',
+			description:
+				'The number of infectious individuals in the first compartment of the SEIR model',
+			dkg_groundings: [
+				['chebi:189658', '4EGI-1'],
+				['vo:0011274', 'LmSTI1'],
+				['ogg:3001197075', 'BMEI1364'],
+				['probonto:k0001243', 'Chi1'],
+				['probonto:k0000361', 'ParetoTypeI1']
+			]
+		},
+		I_2: {
+			col_name: 'I_2',
+			concept: 'Infectious Population',
+			unit: 'Count',
+			description:
+				'The number of infectious individuals in the second compartment of the SEIR model',
+			dkg_groundings: [
+				['vo:0005238', 'VBI-2902a'],
+				['probonto:k0000028', 'Bernoulli2'],
+				['chebi:189653', 'pelabresib'],
+				['pr:P08582', 'melanotransferrin (human)'],
+				['pr:Q15477', 'helicase SKI2W (human)']
+			]
+		},
+		I_3: {
+			col_name: 'I_3',
+			concept: 'Infectious Population',
+			unit: 'Count',
+			description:
+				'The number of infectious individuals in the third compartment of the SEIR model',
+			dkg_groundings: [
+				['chebi:82721', 'dalbavancin'],
+				['pr:Q13501', 'sequestosome-1 (human)'],
+				['doid:0111936', 'immunodeficiency 14'],
+				['pr:Q8WY22', 'BRI3-binding protein (human)'],
+				['cido:0013240', 'SARS-CoV-2-human S-ERI3 association']
+			]
+		},
+		Y_1: {
+			col_name: 'Y_1',
+			concept: 'Case Count',
+			unit: 'Count',
+			description: 'The number of confirmed cases in the first compartment of the SEIR model',
+			dkg_groundings: [
+				['probonto:k0001393', 'Levy1'],
+				['doid:0060728', 'NGLY1-deficiency'],
+				['probonto:k0000274', 'Cauchy1'],
+				['chebi:145798', 'ouabain(1-)'],
+				['chebi:145795', 'digoxin(1-)'],
+				[
+					'wikidata:Q36803786',
+					'Case counting in epidemiology: limitations of methods based on multiple data sources',
+					'class'
+				]
+			]
+		},
+		Y_2: {
+			col_name: 'Y_2',
+			concept: 'Case Count',
+			unit: 'Count',
+			description: 'The number of confirmed cases in the second compartment of the SEIR model',
+			dkg_groundings: [
+				['vo:0012363', 'AY243312'],
+				['idomal:0001137', 'Py235'],
+				['chebi:93829', '4-[1-hydroxy-2-[4-(phenylmethyl)-1-piperidinyl]propyl]phenol'],
+				['chebi:32458', 'cysteinium'],
+				['chebi:32613', 'isoleucinium'],
+				[
+					'wikidata:Q36803786',
+					'Case counting in epidemiology: limitations of methods based on multiple data sources',
+					'class'
+				]
+			]
+		},
+		Y_3: {
+			col_name: 'Y_3',
+			concept: 'Case Count',
+			unit: 'Count',
+			description: 'The number of confirmed cases in the third compartment of the SEIR model',
+			dkg_groundings: [
+				['chebi:82699', 'oritavancin'],
+				['chebi:95341', 'baricitinib'],
+				['chebi:180654', 'N(4)-hydroxycytidine'],
+				['chebi:28001', 'vancomycin'],
+				['chebi:2955', 'azithromycin'],
+				[
+					'wikidata:Q36803786',
+					'Case counting in epidemiology: limitations of methods based on multiple data sources',
+					'class'
+				]
+			]
+		},
+		V_1: {
+			col_name: 'V_1',
+			concept: 'Viral Load',
+			unit: 'Count',
+			description: 'The viral load in the first compartment of the SEIR model',
+			dkg_groundings: [
+				['ncit:C171133', 'COVID-19 Infection'],
+				['idomal:0000883', 'SV1'],
+				['vo:0005227', 'BBV154'],
+				['vo:0004774', 'NYVAC-HIV-1'],
+				['vo:0004996', 'AdCLD-CoV19'],
+				['vido:0001331', 'viral load', 'class'],
+				['vsmo:0000051', 'viral load of arthropod', 'class']
+			]
+		},
+		V_2: {
+			col_name: 'V_2',
+			concept: 'Viral Load',
+			unit: 'Count',
+			description: 'The viral load in the second compartment of the SEIR model',
+			dkg_groundings: [
+				['ncit:C171133', 'COVID-19 Infection'],
+				['vo:0005255', 'ABNCoV2'],
+				['vo:0005169', 'GRAd-COV2'],
+				['vo:0005196', 'VXA-CoV2-1'],
+				['vo:0005263', 'CoV2-OGEN1'],
+				['vido:0001331', 'viral load', 'class'],
+				['vsmo:0000051', 'viral load of arthropod', 'class']
+			]
+		},
+		V_3: {
+			col_name: 'V_3',
+			concept: 'Viral Load',
+			unit: 'Count',
+			description: 'The viral load in the third compartment of the SEIR model',
+			dkg_groundings: [
+				['vo:0004656', 'rBCGpMV361-TgCyP'],
+				['vo:0004695', 'PAV3-HA (H5N1)'],
+				['ncbitaxon:1403205', 'Coronavirus PgCoV-3'],
+				['ncbitaxon:1289548', 'Coronavirus Mex_CoV-3'],
+				['ncbitaxon:2717647', 'Coronavirus PREDICT_CoV-35'],
+				['vido:0001331', 'viral load', 'class'],
+				['vsmo:0000051', 'viral load of arthropod', 'class']
+			]
+		},
+		Infected: {
+			col_name: 'Infected',
+			concept: 'Infection',
+			unit: 'Count',
+			description: 'The total number of infected individuals on the given date',
+			dkg_groundings: [
+				['ido:0000511', 'infected population'],
+				['efo:0001460', 'uninfected'],
+				['vsmo:0000268', 'infected'],
+				['doid:13117', 'paronychia'],
+				['idomal:0001129', 'RESA-155'],
+				['ncit:C171133', 'COVID-19 Infection', 'class'],
+				['ncit:C128320', 'Infection', 'class'],
+				['apollosv:00000114', 'infection', 'class'],
+				['ido:0000586', 'infection', 'class'],
+				['ncit:C177387', 'Reinfection', 'class']
+			]
+		},
+		Y: {
+			col_name: 'Y',
+			concept: 'Case Count',
+			unit: 'Count',
+			description: 'The total number of confirmed cases on the given date',
+			dkg_groundings: [
+				['ncit:C171133', 'COVID-19 Infection'],
+				['ido:0000621', 'acquired immunity to infectious agent'],
+				['ido:0000569', 'asymptomatic host of infectious agent'],
+				['geonames:1848522', 'Yao'],
+				['geonames:363619', 'Yei'],
+				[
+					'wikidata:Q36803786',
+					'Case counting in epidemiology: limitations of methods based on multiple data sources',
+					'class'
+				]
+			]
+		},
+		V: {
+			col_name: 'V',
+			concept: 'Viral Load',
+			unit: 'Count',
+			description: 'The total viral load on the given date',
+			dkg_groundings: [
+				['ncit:C171133', 'COVID-19 Infection'],
+				['ncit:C53511', 'Intensive Care Unit'],
+				['ido:0000597', 'host exposure to environment containing infectious agent'],
+				['ncit:C154475', 'Discharged Alive'],
+				['geonames:298117', 'Van'],
+				['vido:0001331', 'viral load', 'class'],
+				['vsmo:0000051', 'viral load of arthropod', 'class']
+			]
+		},
+		logV: {
+			col_name: 'logV',
+			concept: 'Viral Load',
+			unit: 'Logarithmic Scale',
+			description: 'The total viral load on the given date, represented on a logarithmic scale',
+			dkg_groundings: [
+				['wikidata:Q2589313', 'Logvino'],
+				['wikidata:Q4265044', 'Logvin'],
+				['wikidata:Q21337279', 'Logvinovka'],
+				['wikidata:Q4265064', 'Logvinivka'],
+				['wikidata:Q12083595', 'Logvyn F. Boiko'],
+				['vido:0001331', 'viral load', 'class'],
+				['vsmo:0000051', 'viral load of arthropod', 'class']
+			]
+		}
+	}
+};