feat: move pdf download button to Document.vue (#948)

packages/client/hmi-client/src/assets/css/asset.scss

@@ -27,6 +27,11 @@
             color: var(--text-color-primary);
         }
 
+        h4,
+        .authors {
+            max-width: var(--constrain-width);
+        }
+
         .header-and-buttons {
             display: flex;
             justify-content: space-between;

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

@@ -2,7 +2,7 @@
 	<section class="asset">
 		<header>
 			<div class="simulation" v-if="dataset?.simulation_run">Simulation run</div>
-			<h4 v-html="dataset?.name" class="model-name" />
+			<h4 v-html="dataset?.name" />
 		</header>
 
 		<section class="description">
@@ -198,10 +198,6 @@ const showAccordion = computed(() =>
 </script>
 
 <style scoped>
-.model-name {
-	max-width: var(--constrain-width);
-}
-
 .metadata {
 	margin: 1rem;
 	margin-bottom: 0.5rem;

packages/client/hmi-client/src/components/documents/Document.vue

@@ -61,11 +61,11 @@
 				</div>
 				-->
 			</div>
-			<div v-bind:class="{ 'main-content': isEditable === true }">
+			<div class="asset" v-bind:class="{ 'main-content': isEditable === true }">
 				<header>
 					<div class="journal" v-html="highlightSearchTerms(doc.journal)" />
-					<h4 v-html="highlightSearchTerms(doc.title)" class="constrain-width" />
-					<div class="authors constrain-width" v-html="formatDocumentAuthors(doc)" />
+					<h4 v-html="highlightSearchTerms(doc.title)" />
+					<div class="authors" v-html="formatDocumentAuthors(doc)" />
 					<div v-if="docLink || doi">
 						DOI:
 						<a
@@ -81,6 +81,14 @@
 						label="Open PDF"
 						@click="openPDF"
 					/>
+					<Button
+						v-if="doi"
+						class="p-button-sm p-button-outlined"
+						@click="downloadPDF"
+						:icon="'pi pi-cloud-download'"
+						:loading="!pdfLink"
+						label="Download PDF"
+					/>
 				</header>
 				<Accordion :multiple="true" :active-index="[0, 1, 2, 3, 4, 5, 6, 7]">
 					<AccordionTab v-if="!isEmpty(formattedAbstract)" header="Abstract" id="Abstract">
@@ -262,6 +270,7 @@ import { Dataset } from '@/types/Dataset';
 import { ProvenanceType } from '@/types/Types';
 import * as textUtil from '@/utils/text';
 import Image from 'primevue/image';
+import { generatePdfDownloadLink } from '@/services/generate-download-link';
 // import InputText from 'primevue/inputtext'; // <-- this is for the keyword search feature commented out below
 
 const props = defineProps<{
@@ -273,6 +282,7 @@ const props = defineProps<{
 
 const sectionElem = ref<HTMLElement | null>(null);
 const doc = ref<DocumentType | null>(null);
+const pdfLink = ref<string | null>(null);
 
 const emit = defineEmits(['open-asset']);
 
@@ -372,10 +382,22 @@ const fetchRelatedTerariumArtifacts = async () => {
 	}
 };
 
-watch(doi, (currentValue, oldValue) => {
+// Better than wrapping download button with an anchor
+function downloadPDF() {
+	if (pdfLink.value) {
+		const link = document.createElement('a');
+		link.href = pdfLink.value;
+		link.download = `${doi.value}.pdf`;
+		link.click();
+	}
+}
+
+watch(doi, async (currentValue, oldValue) => {
 	if (currentValue !== oldValue) {
 		fetchDocumentArtifacts();
 		fetchRelatedTerariumArtifacts();
+		pdfLink.value = '';
+		pdfLink.value = await generatePdfDownloadLink(doi.value); // Generate PDF download link on (doi change)
 	}
 });
 
@@ -431,7 +453,7 @@ onMounted(async () => {
 
 .content-navigator {
 	padding: 1rem;
-	padding-top: 8.5rem;
+	margin-top: 8.5rem;
 	display: flex;
 	flex-direction: column;
 	gap: 3rem;
@@ -443,6 +465,7 @@ onMounted(async () => {
 .content-switcher {
 	width: 12rem;
 }
+
 .p-button.p-button-secondary {
 	border: 1px solid var(--surface-border);
 	box-shadow: none;
@@ -479,6 +502,7 @@ onMounted(async () => {
 .p-button.p-button-sm {
 	padding: 0.5rem 0.75rem;
 }
+
 .scroll-to-section-links {
 	display: flex;
 	flex-direction: column;
@@ -490,6 +514,7 @@ onMounted(async () => {
 	padding: 0.75rem;
 	width: 11.75rem;
 }
+
 .main-content {
 	height: 100vh;
 	margin-left: 15rem;
@@ -504,6 +529,7 @@ onMounted(async () => {
 	padding: 1rem;
 	border-radius: var(--border-radius);
 }
+
 .extracted-image {
 	max-width: 30rem;
 }

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

@@ -62,7 +62,6 @@
 			:selected-search-items="selectedSearchItems"
 			:search-term="searchTerm"
 			@toggle-data-item-selected="toggleDataItemSelected"
-			@download-pdf="downloadPDF"
 		/>
 		<tera-slider-panel
 			class="resources-slider"
@@ -135,10 +134,6 @@ import SelectedResourcesOptionsPane from '@/page/data-explorer/components/select
 import selectedResourcesHeaderPane from '@/page/data-explorer/components/selected-resources-header-pane.vue';
 import FacetsPanel from '@/page/data-explorer/components/facets-panel.vue';
 import SearchResultsList from '@/page/data-explorer/components/search-results-list.vue';
-import API from '@/api/api';
-import { logger } from '@/utils/logger';
-import { toQueryString } from '@/utils/query-string';
-import { DocumentType } from '@/types/Document';
 import { useSearchByExampleOptions } from './search-by-example';
 
 // FIXME: page count is not taken into consideration
@@ -459,27 +454,6 @@ const toggleDataItemSelected = (dataItem: { item: ResultType; type?: string }) =
 	}
 };
 
-const downloadPDF = async (dataItem: { item: DocumentType; type?: string }) => {
-	const doi = dataItem.item?.identifier[0]?.id;
-	const query = {
-		doi
-	};
-	const URL = `/download?${toQueryString(query)}`;
-	let response;
-	try {
-		response = await API.get(URL, { responseType: 'arraybuffer' });
-	} catch (e) {
-		logger.error(`Error: Unable to download pdf for doi ${doi}: ${e}`);
-		return;
-	}
-
-	const blob = new Blob([response?.data], { type: 'application/pdf' });
-	const link = document.createElement('a');
-	link.href = window.URL.createObjectURL(blob);
-	link.download = `${doi}.pdf`;
-	link.click();
-};
-
 const updateAssetType = async (newResourceType: ResourceType) => {
 	if (resourceType.value !== newResourceType) {
 		resourceType.value = newResourceType;
@@ -651,9 +625,11 @@ onUnmounted(() => {
 	color: var(--text-color-secondary);
 	font-size: var(--font-body-small);
 }
+
 .empty-cart-image {
 	margin: auto;
 }
+
 .breakdown-pane-container {
 	margin-left: 0.5rem;
 	margin-right: 0.5rem;

packages/client/hmi-client/src/page/data-explorer/components/preview-panel.vue

@@ -49,11 +49,6 @@
 				@click="emit('toggle-data-item-selected', { item: previewItem })"
 				class="toggle-selection p-button-secondary"
 			/>
-			<Button
-				label="Download PDF"
-				@click="emit('download-pdf', { item: previewItem })"
-				class="p-button"
-			/>
 		</template>
 	</tera-slider>
 </template>
@@ -109,7 +104,7 @@ const props = defineProps({
 const previewItemState = ref(props.previewItem);
 const previewItemResourceType = ref<ResourceType | null>(null);
 
-const emit = defineEmits(['update:previewItem', 'toggle-data-item-selected', 'download-pdf']);
+const emit = defineEmits(['update:previewItem', 'toggle-data-item-selected']);
 
 watch(
 	() => props.previewItem,

packages/client/hmi-client/src/services/generate-download-link.ts

@@ -0,0 +1,20 @@
+import API from '@/api/api';
+import { logger } from '@/utils/logger';
+import { toQueryString } from '@/utils/query-string';
+
+export async function generatePdfDownloadLink(doi: string) {
+	if (!doi) return null;
+
+	const query = { doi };
+	const URL = `/download?${toQueryString(query)}`;
+
+	try {
+		const response = await API.get(URL, { responseType: 'arraybuffer' });
+		const blob = new Blob([response?.data], { type: 'application/pdf' });
+		const pdfLink = window.URL.createObjectURL(blob);
+		return pdfLink ?? null;
+	} catch (error) {
+		logger.error(`Error: Unable to download pdf for doi ${doi}: ${error}`);
+		return null;
+	}
+}