DARPA-ASKEM · dgauldie · Mar 19, 2024 · Mar 11, 2024 · Mar 12, 2024 · Mar 12, 2024
@@ -25,13 +25,16 @@
 				@enriched="fetchAsset"
 			/>
 		</AccordionTab>
-		<AccordionTab header="Column information">
+		<AccordionTab header="Column information" v-if="!dataset?.esgfId">
 			<tera-dataset-overview-table
 				v-if="dataset"
 				:dataset="dataset"
 				@update-dataset="(dataset: Dataset) => emit('update-dataset', dataset)"
 			/>
 		</AccordionTab>
+		<AccordionTab header="Preview" v-if="dataset?.esgfId">
+			<img :src="image" alt="" />
+		</AccordionTab>
 	</Accordion>
 </template>
 
@@ -50,6 +53,7 @@ import TeraDatasetOverviewTable from './tera-dataset-overview-table.vue';
 
 const props = defineProps<{
 	dataset: Dataset | null;
+	image?: string | undefined;
 	highlight?: string;
 	featureConfig?: FeatureConfig;
 	rawContent: CsvAsset | null;

@@ -34,11 +34,12 @@
 				<tera-dataset-description
 					tabName="Description"
 					:dataset="dataset"
+					:image="image"
 					:raw-content="rawContent"
 					@update-dataset="(dataset: Dataset) => updateAndFetchDataset(dataset)"
 				/>
 			</section>
-			<section class="tab data-tab" tabName="Data">
+			<section class="tab data-tab" tabName="Data" v-if="rawContent">
 				<tera-dataset-datatable :rows="100" :raw-content="rawContent" />
 			</section>
 		</template>
@@ -48,7 +49,13 @@
 import { onUpdated, PropType, Ref, ref, watch } from 'vue';
 import * as textUtil from '@/utils/text';
 import { cloneDeep, isString } from 'lodash';
-import { downloadRawFile, getDataset, updateDataset } from '@/services/dataset';
+import {
+	downloadRawFile,
+	getClimateDataset,
+	getClimateDatasetPreview,
+	getDataset,
+	updateDataset
+} from '@/services/dataset';
 import { AssetType, type CsvAsset, type Dataset, type DatasetColumn } from '@/types/Types';
 import TeraDatasetDatatable from '@/components/dataset/tera-dataset-datatable.vue';
 import TeraAsset from '@/components/asset/tera-asset.vue';
@@ -58,6 +65,7 @@ import InputText from 'primevue/inputtext';
 import ContextMenu from 'primevue/contextmenu';
 import Button from 'primevue/button';
 import { logger } from '@/utils/logger';
+import { DatasetSource } from '@/types/Dataset';
 import TeraDatasetDescription from './tera-dataset-description.vue';
 import { enrichDataset } from './utils';
 
@@ -79,6 +87,10 @@ const props = defineProps({
 	highlight: {
 		type: String,
 		default: null
+	},
+	datasetSource: {
+		type: String as PropType<DatasetSource>,
+		default: DatasetSource.TERARIUM
 	}
 });
 
@@ -89,9 +101,8 @@ const isRenamingDataset = ref(false);
 const rawContent: Ref<CsvAsset | null> = ref(null);
 const isDatasetLoading = ref(false);
 const selectedTabIndex = ref(0);
-
 const view = ref(DatasetView.DESCRIPTION);
-
+const image: Ref<string | undefined> = ref(undefined);
 // Highlight strings based on props.highlight
 function highlightSearchTerms(text: string | undefined): string {
 	if (!!props.highlight && !!text) {
@@ -163,17 +174,38 @@ async function updateAndFetchDataset(ds: Dataset) {
 }
 
 const fetchDataset = async () => {
-	const datasetTemp: Dataset | null = await getDataset(props.assetId);
-
-	if (datasetTemp) {
-		// We are assuming here there is only a single csv file. This may change in the future as the API allows for it.
-		rawContent.value = await downloadRawFile(props.assetId, datasetTemp?.fileNames?.[0] ?? '');
-		Object.entries(datasetTemp).forEach(([key, value]) => {
-			if (isString(value)) {
-				datasetTemp[key] = highlightSearchTerms(value);
+	switch (props.datasetSource) {
+		case DatasetSource.TERARIUM: {
+			const datasetTemp = await getDataset(props.assetId);
+			if (datasetTemp) {
+				if (datasetTemp.esgfId) {
+					image.value = await getClimateDatasetPreview(datasetTemp.esgfId);
+					rawContent.value = null;
+				} else {
+					// We are assuming here there is only a single csv file. This may change in the future as the API allows for it.
+					image.value = undefined;
+					rawContent.value = await downloadRawFile(
+						props.assetId,
+						datasetTemp?.fileNames?.[0] ?? ''
+					);
+					Object.entries(datasetTemp).forEach(([key, value]) => {
+						if (isString(value)) {
+							datasetTemp[key] = highlightSearchTerms(value);
+						}
+					});
+				}
+				dataset.value = enrichDataset(datasetTemp);
 			}
-		});
-		dataset.value = enrichDataset(datasetTemp);
+			break;
+		}
+		case DatasetSource.ESGF: {
+			dataset.value = await getClimateDataset(props.assetId);
+			if (dataset.value?.esgfId)
+				image.value = await getClimateDatasetPreview(dataset.value?.esgfId);
+			break;
+		}
+		default:
+			break;
 	}
 };
 

@@ -34,6 +34,17 @@
 							</span>
 							<tera-filter-bar :topic-options="topicOptions" @filter-changed="executeNewQuery" />
 						</div>
+						<div class="toggles" v-if="assetType === AssetType.Dataset">
+							<span>
+								<label class="mr-2">Source</label>
+								<Dropdown
+									v-model="chosenDatasetSource"
+									:options="datasetSourceOptions"
+									@change="executeNewQuery"
+								/>
+							</span>
+							<tera-filter-bar :topic-options="topicOptions" @filter-changed="executeNewQuery" />
+						</div>
 					</nav>
 					<tera-searchbar
 						ref="searchBarRef"
@@ -68,13 +79,14 @@
 				:source="chosenSource"
 				:resource-type="resourceType"
 				:search-term="searchTerm"
+				:dataset-source="chosenDatasetSource"
 			/>
 		</section>
 	</main>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import SelectButton from 'primevue/selectbutton';
 import Dropdown from 'primevue/dropdown';
@@ -93,6 +105,7 @@ import {
 	FACET_FIELDS as XDD_FACET_FIELDS,
 	GITHUB_URL,
 	XDD_RESULT_DEFAULT_PAGE_SIZE,
+	XDDSearchParams,
 	YEAR
 } from '@/types/XDD';
 import useQueryStore from '@/stores/query';
@@ -106,6 +119,8 @@ import TeraFacetsPanel from '@/page/data-explorer/components/tera-facets-panel.v
 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 { DatasetSearchParams, DatasetSource } from '@/types/Dataset';
+import { ModelSearchParams } from '@/types/Model';
 import { useSearchByExampleOptions } from './search-by-example';
 import TeraFilterBar from './components/tera-filter-bar.vue';
 
@@ -171,6 +186,9 @@ const topicOptions = ref([
 const sourceOptions = ref(['xDD', 'Terarium']);
 const chosenSource = ref('xDD');
 
+const datasetSourceOptions: Ref<DatasetSource[]> = ref(Object.values(DatasetSource));
+const chosenDatasetSource: Ref<DatasetSource> = ref(DatasetSource.TERARIUM);
+
 const sliderWidth = computed(() =>
 	isSliderFacetsOpen.value ? 'calc(50% - 120px)' : 'calc(50% - 20px)'
 );
@@ -261,7 +279,10 @@ const executeSearch = async () => {
 			known_entities: 'url_extractions,askem_object'
 		},
 		model: {},
-		dataset: {}
+		[ResourceType.DATASET]: {
+			source: chosenDatasetSource.value,
+			topic: 'covid-19'
+		}
 	};
 
 	// handle the search-by-example for finding related documents, models, and/or datasets
@@ -298,12 +319,12 @@ const executeSearch = async () => {
 			assetType.value = AssetType.Dataset;
 		}
 	}
-	const searchParamsWithFacetFilters = cloneDeep(searchParams);
+	const searchParamsWithFacetFilters: SearchParameters = cloneDeep(searchParams);
 
 	//
 	// extend search parameters by converting facet filters into proper search parameters
 	//
-	const xddSearchParams = searchParamsWithFacetFilters?.[ResourceType.XDD] || {};
+	const xddSearchParams: XDDSearchParams = searchParamsWithFacetFilters?.[ResourceType.XDD] || {};
 	// transform facet filters into xdd search parameters
 	clientFilters.value.clauses.forEach((clause) => {
 		if (XDD_FACET_FIELDS.includes(clause.field)) {
@@ -334,17 +355,21 @@ const executeSearch = async () => {
 		}
 	});
 
-	let modelSearchParams;
+	let modelSearchParams: ModelSearchParams;
 	if (searchParamsWithFacetFilters?.[ResourceType.MODEL]?.filters) {
 		modelSearchParams = searchParamsWithFacetFilters[ResourceType.MODEL];
 	} else {
 		modelSearchParams = { filters: clientFilters.value };
 	}
-	let datasetSearchParams;
+	let datasetSearchParams: DatasetSearchParams;
 	if (searchParamsWithFacetFilters?.[ResourceType.DATASET]?.filters) {
-		datasetSearchParams = searchParamsWithFacetFilters[ResourceType.MODEL];
+		datasetSearchParams = searchParamsWithFacetFilters[ResourceType.DATASET];
 	} else {
-		datasetSearchParams = { filters: clientFilters.value };
+		datasetSearchParams = {
+			filters: clientFilters.value,
+			source: chosenDatasetSource.value,
+			topic: 'covid-19' // TODO - this should be dynamic
+		};
 	}
 
 	// update search parameters object

@@ -28,6 +28,7 @@
 				:asset-id="previewItemId"
 				:highlight="searchTerm"
 				:feature-config="{ isPreview: true }"
+				:dataset-source="datasetSource"
 				@close-preview="closePreview"
 			/>
 			<tera-model
@@ -42,14 +43,16 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, ref, watch } from 'vue';
-import { ResultType, ResourceType } from '@/types/common';
+import { computed, PropType, ref, watch } from 'vue';
+import { ResourceType, ResultType } from '@/types/common';
 import { isDocument } from '@/utils/data-util';
 import TeraModel from '@/components/model/tera-model.vue';
 import TeraDataset from '@/components/dataset/tera-dataset.vue';
 import TeraSlider from '@/components/widgets/tera-slider.vue';
 import TeraDocumentAsset from '@/components/documents/tera-document-asset.vue';
 import TeraExternalPublication from '@/components/documents/tera-external-publication.vue';
+import { DatasetSource } from '@/types/Dataset';
+import { Dataset } from '@/types/Types';
 
 const props = defineProps({
 	// slider props
@@ -80,6 +83,10 @@ const props = defineProps({
 	source: {
 		type: String,
 		default: 'xDD'
+	},
+	datasetSource: {
+		type: String as PropType<DatasetSource>,
+		default: DatasetSource.TERARIUM
 	}
 });
 
@@ -92,6 +99,13 @@ const previewItemId = computed(() => {
 	if (isDocument(previewItemState.value)) {
 		return previewItemState.value.gddId;
 	}
+	if (
+		previewItemResourceType.value === ResourceType.DATASET &&
+		props.datasetSource === DatasetSource.ESGF
+	) {
+		const dataset: Dataset = previewItemState.value as Dataset;
+		return dataset.esgfId as string;
+	}
 	return previewItemState.value.id as string;
 });