From 91429c965b86716123902159b6ec9e61278aea4b Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Mon, 9 Sep 2024 15:29:02 -0400
Subject: [PATCH] dataset column information redesign (#4582)

---
 .../designer/components/input/_terainput.scss |   1 +
 .../src/components/asset/tera-asset.vue       |  18 +-
 .../components/dataset/tera-column-info.vue   | 208 ++++++++++++++
 .../dataset/tera-dataset-overview-table.vue   | 135 ---------
 .../src/components/dataset/tera-dataset.vue   | 262 ++++++++++--------
 .../src/components/model/tera-model.vue       |   5 +-
 .../widgets/tera-asset-enrichment.vue         |  15 +-
 7 files changed, 376 insertions(+), 268 deletions(-)
 create mode 100644 packages/client/hmi-client/src/components/dataset/tera-column-info.vue
 delete mode 100644 packages/client/hmi-client/src/components/dataset/tera-dataset-overview-table.vue

diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss
index d5fc11e6b3..afbf3a4640 100644
--- a/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss
@@ -7,6 +7,7 @@
 			padding-right: var(--gap-1-5);
 			font-size: var(--font-caption);
 			align-self: center;
+			text-wrap: nowrap;
 	};
 	& > main {
 		display: flex;
diff --git a/packages/client/hmi-client/src/components/asset/tera-asset.vue b/packages/client/hmi-client/src/components/asset/tera-asset.vue
index 8f80433b0a..a32d3bc54e 100644
--- a/packages/client/hmi-client/src/components/asset/tera-asset.vue
+++ b/packages/client/hmi-client/src/components/asset/tera-asset.vue
@@ -250,7 +250,7 @@ nav {
 	flex-direction: column;
 	width: fit-content;
 	gap: 1rem;
-	padding: var(--gap) var(--gap-large) 0 var(--gap-small);
+	padding: var(--gap) var(--gap-large) 0 var(--gap-2);
 	/* Responsible for stickiness */
 	position: sticky;
 	top: 0;
@@ -270,8 +270,8 @@ header {
 	flex-direction: column;
 	justify-content: space-between;
 	height: fit-content;
-	padding: var(--gap-small) var(--gap);
-	gap: var(--gap-small);
+	padding: var(--gap-2) var(--gap);
+	gap: var(--gap-2);
 	background-color: var(--surface-0);
 	backdrop-filter: blur(6px);
 	overflow: hidden;
@@ -305,7 +305,7 @@ header.overview-banner section {
 }
 
 header.with-tabs {
-	padding: var(--gap-small) var(--gap) 0;
+	padding: var(--gap-2) var(--gap) 0;
 }
 
 .overview-banner {
@@ -337,7 +337,7 @@ header section:deep(> input) {
 }
 
 .authors i {
-	margin-right: var(--gap-small);
+	margin-right: var(--gap-2);
 }
 
 .authors ~ * {
@@ -352,7 +352,7 @@ header section:deep(> input) {
 header aside {
 	display: flex;
 	flex-direction: row;
-	gap: var(--gap-small);
+	gap: var(--gap-2);
 }
 
 .shadow {
@@ -363,17 +363,17 @@ header aside {
 
 /* Affects child components put in the slot*/
 main:deep(.p-accordion) {
-	margin: var(--gap-small);
+	margin: var(--gap-2);
 }
 
 main:deep(.p-accordion-content) {
-	padding-bottom: var(--gap-small);
+	padding-bottom: var(--gap-2);
 }
 
 main:deep(.p-accordion-content ul) {
 	display: flex;
 	flex-direction: column;
-	gap: var(--gap-small);
+	gap: var(--gap-2);
 	list-style: none;
 }
 
diff --git a/packages/client/hmi-client/src/components/dataset/tera-column-info.vue b/packages/client/hmi-client/src/components/dataset/tera-column-info.vue
new file mode 100644
index 0000000000..aaa7e900a6
--- /dev/null
+++ b/packages/client/hmi-client/src/components/dataset/tera-column-info.vue
@@ -0,0 +1,208 @@
+<template>
+	<div class="flex gap-3">
+		<section class="entries">
+			<h6>{{ column.symbol }}</h6>
+			<span class="name">
+				<template v-if="featureConfig.isPreview">{{ column.name }}</template>
+				<tera-input-text
+					v-else
+					placeholder="Add a name"
+					:model-value="column.name ?? ''"
+					@update:model-value="$emit('update-column', { key: 'name', value: $event })"
+				/>
+			</span>
+			<span class="unit">
+				<template v-if="featureConfig.isPreview"><label>Unit</label>{{ column.unit }}</template>
+				<tera-input-text
+					v-else
+					label="Unit"
+					placeholder="Add a unit"
+					:characters-to-reject="[' ']"
+					:model-value="column.unit ?? ''"
+					@update:model-value="$emit('update-column', { key: 'unit', value: $event })"
+				/>
+			</span>
+			<span class="data-type">
+				<label>Data type</label>
+				<template v-if="featureConfig.isPreview">{{ column.dataType }}</template>
+				<Dropdown
+					v-else
+					placeholder="Select a data type"
+					:model-value="column.dataType ?? ''"
+					@update:model-value="$emit('update-column', { key: 'dataType', value: $event })"
+					:options="Object.values(ColumnType)"
+				/>
+			</span>
+			<span v-if="showConcept" class="concept">
+				<label>Concept</label>
+				<template v-if="featureConfig.isPreview">{{ query }}</template>
+				<AutoComplete
+					v-else
+					size="small"
+					placeholder="Search concepts"
+					v-model="query"
+					:suggestions="results"
+					optionLabel="name"
+					@complete="async () => (results = await searchCuriesEntities(query))"
+					@item-select="
+						$emit('update-column', { key: 'concept', value: { curie: $event.value.curie, name: $event.value.name } })
+					"
+					@keyup.enter="applyValidConcept"
+					@blur="applyValidConcept"
+				/>
+			</span>
+			<span class="description">
+				<template v-if="featureConfig.isPreview">{{ column.description }}</template>
+				<tera-input-text
+					v-else
+					placeholder="Add a description"
+					:model-value="column.description ?? ''"
+					@update:model-value="$emit('update-column', { key: 'description', value: $event })"
+				/>
+			</span>
+		</section>
+		<tera-boxplot class="flex-1" v-if="column.stats" :stats="column.stats" />
+	</div>
+</template>
+
+<script setup lang="ts">
+/* Copied the structure of tera-model-parts.vue */
+import { ref, computed, watch } from 'vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraBoxplot from '@/components/widgets/tera-boxplot.vue';
+import AutoComplete from 'primevue/autocomplete';
+import Dropdown from 'primevue/dropdown';
+import { type DKG, ColumnType, type Grounding } from '@/types/Types';
+import { searchCuriesEntities } from '@/services/concept';
+import type { FeatureConfig } from '@/types/common';
+
+type ColumnInfo = {
+	symbol: string;
+	dataType?: ColumnType;
+	description?: string;
+	grounding?: Grounding;
+	// Metadata
+	unit?: string;
+	name?: string;
+	stats?: any;
+};
+
+const props = defineProps<{
+	column: ColumnInfo;
+	featureConfig: FeatureConfig;
+}>();
+
+const emit = defineEmits(['update-column']);
+
+const query = ref('');
+const results = ref<DKG[]>([]);
+
+// If we are in preview mode and there is no content, show nothing
+const showConcept = computed(() => !(props.featureConfig.isPreview && !query.value));
+
+// Used if an option isn't selected from the Autocomplete suggestions but is typed in regularly
+function applyValidConcept() {
+	// Allows to empty the concept
+	if (query.value === '') {
+		emit('update-column', { key: 'concept', value: { curie: '', name: '' } });
+	}
+	// If what was typed was one of the results then choose that result
+	else {
+		const concept = results.value.find((result) => result.name === query.value);
+		if (concept) {
+			emit('update-column', { key: 'concept', value: { curie: concept.curie, name: concept.name } });
+		}
+	}
+}
+
+watch(
+	() => props.column.grounding?.identifiers,
+	(identifiers) => {
+		// console.log(identifiers); // FIXME: Multiple identifiers are held in here after enrichment! Designs have to be updated to handle more.
+		query.value = identifiers?.[0].name ?? ''; // Just show first one for now.
+	},
+	{ immediate: true }
+);
+</script>
+
+<style scoped>
+section.entries {
+	display: grid;
+	grid-template-areas:
+		'symbol name unit data-type . concept'
+		'expression expression expression expression expression expression'
+		'description description description description description description';
+	grid-template-columns: max-content max-content max-content auto max-content;
+	grid-auto-flow: dense;
+	overflow: hidden;
+	gap: var(--gap-2);
+	align-items: center;
+	font-size: var(--font-caption);
+	overflow: auto;
+	width: 85%;
+
+	& > *:empty {
+		display: none;
+	}
+}
+
+label {
+	color: var(--text-color-subdued);
+	text-wrap: nowrap;
+}
+
+h6 {
+	grid-area: symbol;
+	justify-self: center;
+	&::after {
+		content: '|';
+		color: var(--text-color-light);
+		margin-left: var(--gap-2);
+	}
+}
+
+.name {
+	grid-area: name;
+}
+
+.description {
+	grid-area: description;
+	color: var(--text-color-subdued);
+}
+
+.unit {
+	grid-area: unit;
+}
+
+.data-type {
+	grid-area: data-type;
+}
+
+.unit,
+.data-type {
+	max-width: 15rem;
+}
+
+.expression {
+	grid-area: expression;
+	font-size: var(--font-body-small);
+}
+
+.concept {
+	grid-area: concept;
+	margin-left: auto;
+}
+
+.unit,
+.data-type,
+.concept {
+	display: flex;
+	align-items: center;
+	gap: var(--gap-1);
+}
+
+:deep(.p-dropdown > span),
+:deep(.p-autocomplete-input) {
+	padding: var(--gap-1) var(--gap-2);
+}
+</style>
diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-overview-table.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-overview-table.vue
deleted file mode 100644
index f42197920e..0000000000
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset-overview-table.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-	<DataTable
-		class="dataset-overview-table"
-		:value="tableData"
-		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%" />
-		<Column field="description" header="Description" sortable style="width: 30%" />
-		<Column field="concept" header="Concept" sortable style="width: 10%">
-			<template #body="{ data }">
-				<div v-if="data.concept" class="concept">
-					<span>{{ data.concept }}<i class="pi pi-chevron-down pl-2 text-xs" /></span>
-					<a target="_blank" rel="noopener noreferrer" :href="data.conceptURL" @click.stop aria-label="Open Concept">
-						<i class="pi pi-external-link pl-4 text-xs" v-tooltip.top="'MIRA Epi Metaregistry'" />
-					</a>
-				</div>
-			</template>
-			<template #editor="{ data, index }">
-				<AutoComplete
-					v-model="query"
-					placeholder="Search for concepts"
-					:suggestions="curies"
-					@complete="async () => (curies = await searchCuriesEntities(query))"
-					@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%" />
-		<Column field="dataType" header="Datatype" sortable style="width: 10%" />
-		<Column field="stats" header="Stats" style="width: 20%">
-			<template #body="{ data }">
-				<tera-boxplot v-if="data.stats" :stats="data.stats" />
-			</template>
-		</Column>
-	</DataTable>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
-import type { Dataset, DKG } from '@/types/Types';
-import { cloneDeep } from 'lodash';
-import {
-	getCurieFromGroundingIdentifier,
-	getCurieUrl,
-	getNameOfCurieCached,
-	parseCurie,
-	searchCuriesEntities
-} from '@/services/concept';
-import AutoComplete from 'primevue/autocomplete';
-import TeraBoxplot from '@/components/widgets/tera-boxplot.vue';
-
-const props = defineProps<{
-	dataset: Dataset;
-}>();
-const emit = defineEmits(['update-dataset']);
-
-const query = ref('');
-const curies = ref<DKG[]>([]);
-const tableData = ref<any[]>([]);
-
-function formatName(name: string) {
-	return (name.charAt(0).toUpperCase() + name.slice(1)).replace('_', ' ');
-}
-
-async 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() {
-	query.value = '';
-}
-
-watch(
-	() => props.dataset?.columns,
-	async () => {
-		tableData.value = await Promise.all(
-			props.dataset.columns?.map(async (col) => {
-				const identifier = col.metadata?.groundings?.identifiers ?? parseCurie(col.grounding?.identifiers[0].curie);
-				return {
-					id: col.name,
-					name: formatName(col.name),
-					description: col.description,
-					concept: await getNameOfCurieCached(getCurieFromGroundingIdentifier(identifier)),
-					conceptURL: getCurieUrl(getCurieFromGroundingIdentifier(identifier)),
-					unit: col.metadata?.unit,
-					dataType: col.metadata?.column_stats?.type,
-					stats: col.metadata?.column_stats,
-					column: col
-				};
-			}) ?? []
-		);
-	},
-	{ immediate: true }
-);
-</script>
-
-<style scoped>
-.dataset-overview-table :deep(td:empty:before) {
-	content: '--';
-}
-
-.p-datatable:deep(.p-datatable-thead > tr > th) {
-	background-color: var(--surface-50);
-	padding-left: var(--gap);
-}
-
-.concept,
-.concept > span {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	align-items: center;
-}
-</style>
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 b2f1996744..6a8b889f4b 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
@@ -1,9 +1,10 @@
 <template>
 	<tera-asset
+		v-bind="$attrs"
 		:id="assetId"
 		:name="dataset?.name"
 		:feature-config="featureConfig"
-		:is-naming-asset="isRenamingDataset"
+		:is-naming-asset="isRenaming"
 		:is-loading="isDatasetLoading"
 		:overflow-hidden="selectedTabIndex === 1"
 		:selected-tab-index="selectedTabIndex"
@@ -13,14 +14,14 @@
 	>
 		<template #name-input>
 			<tera-input-text
-				v-if="isRenamingDataset"
-				v-model.lazy="newDatasetName"
+				v-if="isRenaming"
+				v-model.lazy="newName"
 				placeholder="Dataset name"
 				@keyup.enter="updateDatasetName"
 				@keyup.esc="updateDatasetName"
 				auto-focus
 			/>
-			<div v-if="isRenamingDataset" class="flex flex-nowrap ml-1 mr-3">
+			<div v-if="isRenaming" class="flex flex-nowrap ml-1 mr-3">
 				<Button icon="pi pi-check" rounded text @click="updateDatasetName" />
 			</div>
 		</template>
@@ -33,9 +34,9 @@
 			<ContextMenu ref="optionsMenu" :model="optionsMenuItems" popup :pt="optionsMenuPt" />
 			<div class="btn-group">
 				<tera-asset-enrichment :asset-type="AssetType.Dataset" :assetId="assetId" @finished-job="fetchDataset" />
-				<Button label="Reset" severity="secondary" outlined />
-				<Button label="Save as..." severity="secondary" outlined />
-				<Button label="Save" />
+				<Button label="Reset" severity="secondary" outlined @click="reset" />
+				<Button label="Save as..." severity="secondary" outlined @click="showSaveModal = true" disabled />
+				<Button label="Save" :disabled="isSaved" @click="updateDatasetContent" />
 			</div>
 		</template>
 		<section>
@@ -65,12 +66,15 @@
 				</AccordionTab>
 				<!-- <AccordionTab header="Charts">TBD</AccordionTab> -->
 				<AccordionTab header="Column information" v-if="!isClimateData && !isClimateSubset">
-					<tera-dataset-overview-table
-						v-if="dataset"
-						:dataset="dataset"
-						@update-dataset="(dataset: Dataset) => updateAndFetchDataset(dataset)"
-						class="column-information-table"
-					/>
+					<ul>
+						<li v-for="(column, index) in columnInformation" :key="index">
+							<tera-column-info
+								:column="column"
+								:feature-config="{ isPreview: false }"
+								@update-column="updateColumn(index, $event.key, $event.value)"
+							/>
+						</li>
+					</ul>
 				</AccordionTab>
 				<template v-else-if="dataset?.metadata">
 					<AccordionTab header="Preview">
@@ -116,11 +120,21 @@
 			</Accordion>
 		</section>
 	</tera-asset>
+	<!-- TODO: Add create dataset support to save modal -->
+	<!---<tera-save-asset-modal
+		v-if="transientDataset"
+		:initial-name="transientDataset.name"
+		:is-visible="showSaveModal"
+		:asset="transientDataset"
+		:asset-type="AssetType.Dataset"
+		@close-modal="showSaveModal = false"
+		@on-save="showSaveModal = false"
+	/> -->
 </template>
 
 <script setup lang="ts">
-import { computed, onUpdated, PropType, ref, watch } from 'vue';
-import { cloneDeep, isEmpty } from 'lodash';
+import { computed, PropType, ref, watch } from 'vue';
+import { cloneDeep, isEmpty, isEqual } from 'lodash';
 import { snakeToCapitalized } from '@/utils/text';
 import {
 	downloadRawFile,
@@ -130,7 +144,7 @@ import {
 	getDownloadURL,
 	updateDataset
 } from '@/services/dataset';
-import { AssetType, type CsvAsset, type Dataset, type DatasetColumn, PresignedURL } from '@/types/Types';
+import { AssetType, type CsvAsset, type Dataset, PresignedURL } from '@/types/Types';
 import TeraAsset from '@/components/asset/tera-asset.vue';
 import type { FeatureConfig } from '@/types/common';
 import type { Source } from '@/types/search';
@@ -146,9 +160,9 @@ import { logger } from '@/utils/logger';
 import TeraCarousel from '@/components/widgets/tera-carousel.vue';
 import TeraAssetEnrichment from '@/components/widgets/tera-asset-enrichment.vue';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
-import TeraDatasetOverviewTable from './tera-dataset-overview-table.vue';
-import TeraDatasetDatatable from './tera-dataset-datatable.vue';
-import { enrichDataset } from './utils';
+import TeraDatasetDatatable from '@/components/dataset/tera-dataset-datatable.vue';
+import TeraColumnInfo from '@/components/dataset/tera-column-info.vue';
+// import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
 
 const props = defineProps({
 	assetId: {
@@ -165,14 +179,74 @@ const props = defineProps({
 	}
 });
 
-const emit = defineEmits(['close-preview', 'asset-loaded']);
+const emit = defineEmits(['close-preview']);
+
 const dataset = ref<Dataset | null>(null);
-const newDatasetName = ref('');
-const isRenamingDataset = ref(false);
+const transientDataset = ref<Dataset | null>(null);
+const newName = ref('');
+const isRenaming = ref(false);
+const showSaveModal = ref(false);
 const rawContent = ref<CsvAsset | null>(null);
 const isDatasetLoading = ref(false);
 const selectedTabIndex = ref(0);
 
+const optionsMenu = ref();
+const optionsMenuPt = {
+	submenu: {
+		class: 'max-h-30rem overflow-y-scroll'
+	}
+};
+const optionsMenuItems = ref([
+	{
+		icon: 'pi pi-pencil',
+		label: 'Rename',
+		command() {
+			isRenaming.value = true;
+			newName.value = dataset.value?.name ?? '';
+		}
+	},
+	{
+		icon: 'pi pi-plus',
+		label: 'Add to project',
+		items:
+			useProjects()
+				.allProjects.value?.filter((project) => project.id !== useProjects().activeProject.value?.id)
+				.map((project) => ({
+					label: project.name,
+					command: async () => {
+						const response = await useProjects().addAsset(AssetType.Dataset, props.assetId, project.id);
+						if (response) logger.info(`Added asset to ${project.name}`);
+					}
+				})) ?? []
+	},
+	{
+		icon: 'pi pi-download',
+		label: 'Download',
+		command: async () => {
+			const presignedUrl: PresignedURL | null = await downloadFileFromDataset();
+			if (presignedUrl) {
+				window.open(presignedUrl.url, '_blank');
+			}
+			emit('close-preview');
+		}
+	}
+]);
+
+const isSaved = computed(() => isEqual(dataset.value, transientDataset.value));
+const columnInformation = computed(
+	() =>
+		transientDataset.value?.columns?.map((column) => ({
+			symbol: column.name, // Uneditable
+			description: column.description,
+			grounding: column?.grounding,
+			dataType: column.dataType,
+			// Metadata
+			name: column.metadata?.name ?? column.name,
+			unit: column.metadata?.unit,
+			stats: column.metadata?.column_stats // Uneditable
+		})) ?? []
+);
+
 const datasetInfo = computed(() => {
 	const information = {
 		id: '',
@@ -189,15 +263,6 @@ const isClimateData = computed(() => dataset.value?.esgfId);
 const isClimateSubset = computed(() => dataset.value?.metadata?.format === 'netcdf');
 const datasetType = computed(() => card.value?.DATASET_TYPE ?? '');
 
-const groundingValues = ref<string[][]>([]);
-// originaGroundingValues are displayed as the first suggested value for concepts
-const originalGroundingValues = ref<string[]>([]);
-const suggestedValues = ref<string[]>([]);
-
-const rowEditList = ref<boolean[]>([]);
-// editableRows are the dataset columns that can be edited by the user; transient data
-const editableRows = ref<DatasetColumn[]>([]);
-
 const image = ref<string | undefined>(undefined);
 
 const card = computed(() => {
@@ -218,6 +283,26 @@ const card = computed(() => {
 const description = computed(() => dataset.value?.description?.concat('\n', card.value?.DESCRIPTION ?? '') ?? '');
 const author = computed(() => card.value?.AUTHOR_NAME ?? '');
 
+function updateColumn(index: number, key: string, value: any) {
+	if (!transientDataset.value?.columns?.[index]) return;
+	if (key === 'unit' || key === 'name') {
+		if (!transientDataset.value.columns[index].metadata) {
+			transientDataset.value.columns[index].metadata = {};
+		}
+		transientDataset.value.columns[index].metadata[key] = value;
+	} else if (key === 'concept') {
+		// Only one identifier is supported for now
+		if (!transientDataset.value.columns[index]?.grounding?.identifiers) {
+			transientDataset.value.columns[index].grounding = { identifiers: [] };
+		}
+		// Replaces first element of identifiers array
+		transientDataset.value.columns[index].grounding?.identifiers?.shift();
+		transientDataset.value.columns[index].grounding?.identifiers?.unshift(value);
+	} else {
+		transientDataset.value.columns[index][key] = value;
+	}
+}
+
 const toggleOptionsMenu = (event) => {
 	optionsMenu.value.toggle(event);
 };
@@ -236,76 +321,37 @@ async function downloadFileFromDataset(): Promise<PresignedURL | null> {
 	return null;
 }
 
-const optionsMenu = ref();
-const optionsMenuItems = ref([
-	{
-		icon: 'pi pi-pencil',
-		label: 'Rename',
-		command() {
-			isRenamingDataset.value = true;
-			newDatasetName.value = dataset.value?.name ?? '';
-		}
-	},
-	{
-		icon: 'pi pi-plus',
-		label: 'Add to project',
-		items:
-			useProjects()
-				.allProjects.value?.filter((project) => project.id !== useProjects().activeProject.value?.id)
-				.map((project) => ({
-					label: project.name,
-					command: async () => {
-						const response = await useProjects().addAsset(AssetType.Dataset, props.assetId, project.id);
-						if (response) logger.info(`Added asset to ${project.name}`);
-					}
-				})) ?? []
-	},
-	{
-		icon: 'pi pi-download',
-		label: 'Download',
-		command: async () => {
-			const presignedUrl: PresignedURL | null = await downloadFileFromDataset();
-			if (presignedUrl) {
-				window.open(presignedUrl.url, '_blank');
-			}
-			emit('close-preview');
-		}
+async function updateDatasetContent() {
+	if (!transientDataset.value) return;
+	if (!useProjects().hasEditPermission()) {
+		logger.error('You do not have permission to edit this dataset.'); // FIXME: Disable asset editing options if user does not have permission
+		return;
 	}
-]);
-const optionsMenuPt = {
-	submenu: {
-		class: 'max-h-30rem overflow-y-scroll'
-	}
-};
+	await updateDataset(transientDataset.value);
+	logger.info('Saved changes.');
+	await useProjects().refresh();
+	fetchDataset();
+}
 
-// TODO - It's got to be a better way to do this
 async function updateDatasetName() {
-	if (dataset.value && newDatasetName.value !== '') {
-		const datasetClone = cloneDeep(dataset.value);
-		datasetClone.name = newDatasetName.value;
-		await updateDataset(datasetClone);
-		dataset.value = await getDataset(props.assetId);
-		await useProjects().refresh();
-		isRenamingDataset.value = false;
+	if (transientDataset.value && !isEmpty(newName.value)) {
+		transientDataset.value.name = newName.value;
+		await updateDatasetContent();
 	}
+	isRenaming.value = false;
 }
 
-async function updateAndFetchDataset(ds: Dataset) {
-	await updateDataset(ds);
-	fetchDataset();
+function reset() {
+	transientDataset.value = cloneDeep(dataset.value);
 }
 
 const fetchDataset = async () => {
-	isDatasetLoading.value = true;
 	if (props.source === DatasetSource.TERARIUM) {
-		const datasetTemp = await getDataset(props.assetId);
-		if (datasetTemp) {
-			dataset.value = enrichDataset(datasetTemp);
-		}
+		dataset.value = await getDataset(props.assetId);
 	} else if (props.source === DatasetSource.ESGF) {
 		dataset.value = await getClimateDataset(props.assetId);
 	}
-	isDatasetLoading.value = false;
+	reset(); // Prepare transientDataset for editing
 
 	if (dataset.value?.esgfId && !image.value) {
 		image.value = await getClimateDatasetPreview(dataset.value.esgfId);
@@ -315,11 +361,10 @@ const fetchDataset = async () => {
 function getRawContent() {
 	// If it's an ESGF dataset or a NetCDF file, we don't want to download the raw content
 	if (!dataset.value || dataset.value.esgfId || dataset.value.metadata?.format === 'netcdf') return;
-
 	// We are assuming here there is only a single csv file.
 	if (
 		dataset.value.fileNames &&
-		dataset.value.fileNames.length > 0 &&
+		!isEmpty(dataset.value.fileNames) &&
 		!isEmpty(dataset.value.fileNames[0]) &&
 		dataset.value.fileNames[0].endsWith('.csv')
 	) {
@@ -329,39 +374,21 @@ function getRawContent() {
 	}
 }
 
-onUpdated(() => {
-	if (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]);
-		}
-	}
-});
-
 // Whenever assetId changes, fetch dataset with that ID
 watch(
 	() => props.assetId,
 	async () => {
-		isRenamingDataset.value = false;
+		isRenaming.value = false;
 		if (props.assetId) {
-			// Reset the dataset and rawContent so previous data is not shown
+			// Empty the dataset and rawContent so previous data is not shown
 			dataset.value = null;
 			rawContent.value = null;
+			isDatasetLoading.value = true;
 			await fetchDataset();
-			if (dataset.value) getRawContent(); // Whenever we change the dataset, we need to fetch the rawContent
+			isDatasetLoading.value = false;
+			if (dataset.value) {
+				getRawContent(); // Whenever we change the dataset, we need to fetch the rawContent
+			}
 		}
 	},
 	{ immediate: true }
@@ -379,6 +406,11 @@ watch(
 	margin-left: auto;
 }
 
+li {
+	padding-bottom: var(--gap-2);
+	border-bottom: 1px solid var(--surface-border);
+}
+
 .description {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/client/hmi-client/src/components/model/tera-model.vue b/packages/client/hmi-client/src/components/model/tera-model.vue
index 8bc84135ca..43d745d871 100644
--- a/packages/client/hmi-client/src/components/model/tera-model.vue
+++ b/packages/client/hmi-client/src/components/model/tera-model.vue
@@ -150,12 +150,13 @@ const optionsMenuPt = {
 
 async function updateModelContent(updatedModel: Model) {
 	if (!useProjects().hasEditPermission()) {
+		logger.error('You do not have permission to edit this model.'); // FIXME: Disable asset editing options if user does not have permission
 		return;
 	}
 	await updateModel(updatedModel);
-	logger.info('Saved changes');
+	logger.info('Saved changes.');
 	await useProjects().refresh();
-	await fetchModel();
+	fetchModel();
 }
 
 async function updateModelName() {
diff --git a/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue b/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue
index bf80b81f2e..87f3015ae9 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue
@@ -26,9 +26,9 @@
 				<Button label="Cancel" severity="secondary" outlined @click="closeDialog" />
 				<Button label="Enrich" :disabled="isDialogDisabled" @click="confirm" />
 			</div>
-			<!--TODO: Will make sure this works in a second pass-->
+			<!--TODO: Overwrite is how we enrich, handle appending content in another pass-->
 			<div class="flex items-center">
-				<Checkbox v-model="overwriteContent" inputId="overwriteContent" binary />
+				<Checkbox v-model="overwriteContent" inputId="overwriteContent" binary disabled />
 				<div class="ml-3">
 					<label for="overwriteContent">Overwrite existing content</label>
 					<p class="text-subdued">If unselected, new content will be appended</p>
@@ -73,7 +73,7 @@ enum DialogType {
 const dialogType = ref<DialogType>(DialogType.ENRICH);
 const isLoading = ref(false);
 const isModalVisible = ref(false);
-const overwriteContent = ref(false);
+const overwriteContent = ref(true);
 
 const selectedResourceId = ref<string>('');
 const relatedDocuments = ref<Array<{ name: string; id: string }>>([]);
@@ -115,17 +115,18 @@ function closeDialog() {
 
 const confirm = async () => {
 	isLoading.value = true;
+	closeDialog();
 
+	// Await for enrichment/extraction so once we call finished-job the refetched dataset will have the new data
 	if (dialogType.value === DialogType.ENRICH) {
-		sendForEnrichment();
+		await sendForEnrichment();
 	} else if (dialogType.value === DialogType.EXTRACT) {
-		sendForExtractions();
+		await sendForExtractions();
 	}
 
 	isLoading.value = false;
 	emit('finished-job');
-	await getRelatedDocuments();
-	closeDialog();
+	getRelatedDocuments();
 };
 
 const sendForEnrichment = async () => {