concept search dataset

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

@@ -26,7 +26,11 @@
 			/>
 		</AccordionTab>
 		<AccordionTab header="Column Information">
-			<tera-dataset-overview-table v-if="dataset" :dataset="dataset" />
+			<tera-dataset-overview-table
+				v-if="dataset"
+				:dataset="dataset"
+				@update-dataset="(dataset: Dataset) => emit('update-dataset', dataset)"
+			/>
 		</AccordionTab>
 	</Accordion>
 </template>
@@ -52,7 +56,7 @@ const props = defineProps<{
 	rawContent: CsvAsset | null;
 }>();
 
-const emit = defineEmits(['fetch-dataset']);
+const emit = defineEmits(['fetch-dataset', 'update-dataset']);
 const card = computed(() => {
 	if (props.dataset?.metadata?.data_card) {
 		const cardWithUnknowns = props.dataset.metadata?.data_card;

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

@@ -2,8 +2,10 @@
 	<DataTable
 		class="dataset-overview-table"
 		:value="formattedData"
-		dataKey="name"
+		dataKey="id"
 		:rowsPerPageOptions="[10, 20, 50]"
+		edit-mode="cell"
+		@cell-edit-complete="onCellEditComplete"
 	>
 		<Column field="id" header="ID" sortable style="width: 10%" />
 		<Column field="name" header="Name" sortable style="width: 10%" />
@@ -23,6 +25,23 @@
 						<i class="pi pi-external-link" />
 					</a>
 				</template>
+				<template v-else>--</template>
+			</template>
+			<template #editor="{ data, index }">
+				<AutoComplete
+					v-model="conceptSearchTerm.name"
+					:suggestions="curies"
+					@complete="onSearch"
+					@item-select="
+						updateDataset(index, 'metadata', {
+							...data.column?.metadata,
+							groundings: {
+								identifiers: parseCurie($event.value?.curie)
+							}
+						})
+					"
+					optionLabel="name"
+				/>
 			</template>
 		</Column>
 		<Column field="unit" header="Unit" sortable style="width: 10%" />
@@ -42,18 +61,28 @@
 <script setup lang="ts">
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
-import type { Dataset, DatasetColumn } from '@/types/Types';
+import type { DKG, Dataset, DatasetColumn } from '@/types/Types';
 import { computed, ref } from 'vue';
-import { isEmpty } from 'lodash';
+import { cloneDeep, isEmpty } from 'lodash';
 import {
 	getNameOfCurieCached,
 	getCurieFromGroudingIdentifier,
-	getCurieUrl
+	getCurieUrl,
+	searchCuriesEntities,
+	parseCurie
 } from '@/services/concept';
+import AutoComplete, { AutoCompleteCompleteEvent } from 'primevue/autocomplete';
 
 const props = defineProps<{
 	dataset: Dataset;
 }>();
+const emit = defineEmits(['update-dataset']);
+
+const conceptSearchTerm = ref({
+	curie: '',
+	name: ''
+});
+const curies = ref<DKG[]>([]);
 
 const nameOfCurieCache = ref(new Map<string, string>());
 
@@ -66,6 +95,29 @@ function formatName(name: string) {
 	return (name.charAt(0).toUpperCase() + name.slice(1)).replace('_', ' ');
 }
 
+async function onSearch(event: AutoCompleteCompleteEvent) {
+	const query = event.query;
+	if (query.length > 2) {
+		const response = await searchCuriesEntities(query);
+		curies.value = response;
+	}
+}
+
+function updateDataset(index: number, field: string, value: any) {
+	const datasetClone = cloneDeep(props.dataset);
+	if (datasetClone.columns) {
+		if (!datasetClone.columns[index][field]) {
+			datasetClone.columns[index][field] = null;
+		}
+		datasetClone.columns[index][field] = value;
+	}
+	emit('update-dataset', datasetClone);
+}
+
+function onCellEditComplete() {
+	conceptSearchTerm.value = { curie: '', name: '' };
+}
+
 function formatData(data: DatasetColumn[]) {
 	return data.map((col) => ({
 		id: col.name,
@@ -74,7 +126,8 @@ function formatData(data: DatasetColumn[]) {
 		concept: col.metadata?.groundings?.identifiers,
 		unit: col.metadata?.unit,
 		dataType: col.dataType,
-		stats: col.metadata?.column_stats
+		stats: col.metadata?.column_stats,
+		column: col
 	}));
 }
 </script>

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

@@ -35,6 +35,7 @@
 					tabName="Description"
 					:dataset="dataset"
 					:raw-content="rawContent"
+					@update-dataset="(dataset: Dataset) => updateAndFetchDataset(dataset)"
 				/>
 			</section>
 			<section class="tab data-tab" tabName="Data">
@@ -134,6 +135,11 @@ async function updateDatasetName() {
 	}
 }
 
+async function updateAndFetchDataset(ds: Dataset) {
+	await updateDataset(ds);
+	fetchDataset();
+}
+
 const fetchDataset = async () => {
 	const datasetTemp: Dataset | null = await getDataset(props.assetId);
 

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

@@ -301,7 +301,8 @@ import {
 	searchCuriesEntities,
 	getNameOfCurieCached,
 	getCurieFromGroudingIdentifier,
-	getCurieUrl
+	getCurieUrl,
+	parseCurie
 } from '@/services/concept';
 import Tag from 'primevue/tag';
 import DataTable from 'primevue/datatable';
@@ -484,12 +485,6 @@ async function onSearch(event: AutoCompleteCompleteEvent) {
 	}
 }
 
-function parseCurie(curie: string) {
-	const key = curie.split(':')[0];
-	const value = curie.split(':')[1];
-	return { [key]: value };
-}
-
 function onCellEditComplete() {
 	conceptSearchTerm.value = { curie: '', name: '' };
 }

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

@@ -122,12 +122,19 @@ function getCurieFromGroudingIdentifier(identifier: Object | undefined): string
 	return '';
 }
 
+function parseCurie(curie: string) {
+	const key = curie.split(':')[0];
+	const value = curie.split(':')[1];
+	return { [key]: value };
+}
+
 export {
 	getCuriesEntities,
 	getFacets,
 	getEntitySimilarity,
 	searchCuriesEntities,
 	getNameOfCurieCached,
 	getCurieFromGroudingIdentifier,
-	getCurieUrl
+	getCurieUrl,
+	parseCurie
 };

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

@@ -37,7 +37,6 @@ async function getDataset(datasetId: string): Promise<Dataset | null> {
  * @return Dataset|null - the dataset, or null if none returned by API
  */
 async function updateDataset(dataset: Dataset) {
-	delete dataset.columns;
 	const response = await API.put(`/datasets/${dataset.id}`, dataset);
 	return response?.data ?? null;
 }