DARPA-ASKEM · YohannParis · Apr 21, 2023 · Apr 5, 2023 · Apr 5, 2023 · Apr 5, 2023
@@ -88,9 +88,7 @@ Basic rules to write organised code.
     />
     ```
 
-## `LOGGING & TOASTS`
-
-### LOGGING
+## Logging & Toasts
 
 There is a new logging service in place that buffers log messages to be posted to the `/logs` hmi-server endpoint.  The HMI server then echos out the message for kibana to eventually consume.
 
@@ -129,7 +127,7 @@ toast.showToast(
   );
 ```
 
-[## TERA-MATH-EDITOR](src/components/mathml/README.md)
+## [TERA-MATH-EDITOR](src/components/mathml/README.md)
 
 Terrarium uses [mathlive](https://cortexjs.io/docs/mathlive/) & [mathjax 2.7.2](https://docs.mathjax.org/en/v2.7-latest/start.html) via a the `vue-mathjax-next` component to create a custom component: `tera-math-editor`
 

@@ -8,9 +8,10 @@
 	<title>Terarium</title>
 	<!--Only way I was able to get mathJAX to work.  I was having trouble getting it to pickup as a package.-->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>
+	<script src="https://documentservices.adobe.com/view-sdk/viewer.js" async></script>
 	<script type="module" src="src/main.ts"></script>
 </head>
 
 <body></body>
 
-</html>
+</html>
@@ -13,6 +13,7 @@
 					class="p-button-secondary p-button-sm"
 					label="PDF"
 					icon="pi pi-file"
+					:loading="!pdfLink"
 					@click="documentView = DocumentView.PDF"
 					:active="documentView === DocumentView.PDF"
 				/>
@@ -256,7 +257,11 @@
 				</AccordionTab>
 			</Accordion>
 		</section>
-		<section v-else-if="DocumentView.PDF" class="asset">PDF Preview</section>
+		<pdf-embed
+			v-else-if="documentView === DocumentView.PDF && pdfLink"
+			:pdf-link="pdfLink"
+			:title="doc.title"
+		/>
 	</section>
 </template>
 
@@ -276,6 +281,7 @@ import { ResultType, Tab } from '@/types/common';
 import { getRelatedArtifacts } from '@/services/provenance';
 import TeraShowMoreText from '@/components/widgets/tera-show-more-text.vue';
 import ImportCodeButton from '@/components/widgets/import-code-button.vue';
+import PdfEmbed from '@/components/widgets/pdf-embed.vue';
 import { Model } from '@/types/Model';
 import { Dataset } from '@/types/Dataset';
 import { ProvenanceType } from '@/types/Types';
@@ -424,7 +430,10 @@ const openPDF = () => {
 		else if (doi.value) window.open(`https://doi.org/${doi.value}`);
 		return;
 	}
-	if (pdfLink.value) window.open(pdfLink.value);
+	if (pdfLink.value) {
+		const pdfWindow = window.open(pdfLink.value);
+		if (pdfWindow) pdfWindow.document.title = doi.value;
+	}
 };
 
 watch(doi, async (currentValue, oldValue) => {

@@ -0,0 +1,50 @@
+<template>
+	<div id="adobe-dc-view"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+
+const props = defineProps<{
+	pdfLink: string;
+	title: string;
+}>();
+
+const adobeDCView = ref();
+const isAdobePdfApiReady = ref(false);
+
+onMounted(() => {
+	// @ts-ignore
+	// eslint-disable-line
+	if (window.AdobeDC) {
+		isAdobePdfApiReady.value = true;
+	} else {
+		// Fallback in the case library isn't loaded
+		document.addEventListener('adobe_dc_view_sdk.ready', () => {
+			isAdobePdfApiReady.value = true;
+		});
+	}
+});
+
+watch(isAdobePdfApiReady, () => {
+	if (isAdobePdfApiReady.value) {
+		adobeDCView.value = Object.freeze(
+			// @ts-ignore
+			// eslint-disable-line
+			new window.AdobeDC.View({
+				clientId: '0cac1f8fd97c4957b968ebf6a5252223',
+				divId: 'adobe-dc-view'
+			})
+		);
+
+		adobeDCView.value.previewFile({
+			content: {
+				location: {
+					url: props.pdfLink
+				}
+			},
+			metaData: { fileName: props.title }
+		});
+	}
+});
+</script>