feat: postmessage handlers to view reports and load comparisons

report-viewer/src/components/ComparisonsTable.vue

@@ -217,7 +217,7 @@
 <script setup lang="ts">
 import type { Cluster } from '@/model/Cluster'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
-import { type PropType, watch, computed, ref, type Ref } from 'vue'
+import { type PropType, watch, computed, ref, type Ref, onMounted } from 'vue'
 import { store } from '@/stores/store'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -230,6 +230,7 @@ import { MetricJsonIdentifier } from '@/model/MetricJsonIdentifier'
 import NameElement from './NameElement.vue'
 import ComparisonTableFilter from './ComparisonTableFilter.vue'
 import { Column, Direction, type ColumnId } from '@/model/ui/ComparisonSorting'
+import { router } from '@/router'
 
 library.add(faUserGroup)
 
@@ -273,6 +274,53 @@ const displayedComparisons = computed(() => {
 
 const searchString = ref('')
 
+onMounted(() => {
+  // Allow the search filter to be remotely set via postMessage
+  window.addEventListener('message', async (event) => {
+    const data = event.data
+
+    if (data.type === 'set-search-filter-value' && data.filter && typeof data.filter === 'string') {
+      const { filter, autoViewComparison } = data
+
+      // Set the value of the search input
+      searchString.value = filter
+
+      // Automatically view the comparison if only one was found in the list
+      if (autoViewComparison) {
+        const comparisons = getFilteredComparisons(
+          getSortedComparisons(Array.from(props.topComparisons))
+        )
+
+        if (comparisons.length == 1) {
+          router.push({
+            name: 'ComparisonView',
+            params: {
+              firstSubmissionId: comparisons[0].firstSubmissionId,
+              secondSubmissionId: comparisons[0].secondSubmissionId
+            }
+          })
+        }
+      }
+    } else if (data.type === 'open-comparison' && data.submissionId1 && data.submissionId2) {
+      const { submissionId1, submissionId2 } = data
+      const comparisonFileName = store().getComparisonFileName(submissionId1, submissionId2)
+
+      if (!comparisonFileName) {
+        console.error(`Unable to find comparison between ${submissionId1} && ${submissionId2}`)
+        return
+      }
+
+      router.push({
+        name: 'ComparisonView',
+        params: {
+          firstSubmissionId: submissionId1,
+          secondSubmissionId: submissionId2
+        }
+      })
+    }
+  })
+})
+
 /**
  * This function gets called when the search bar for the comparison table has been updated.
  * It returns the input list, with the filter given in searchString applied.

report-viewer/src/views/FileUploadView.vue

@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { onErrorCaptured, ref, type Ref } from 'vue'
+import { onErrorCaptured, ref, type Ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { router } from '@/router'
 import { store } from '@/stores/store'
@@ -103,6 +103,19 @@ function navigateToOverview() {
   })
 }
 
+onMounted(() => {
+  // Enable uploading of .jplag files via postMessage
+  // This allows the report viewer to be embedded (eg. in an iframe or popup)
+  // and automatically receive and open a JPlag report sent from the parent window
+  window.addEventListener('message', async (event) => {
+    if (event.data.type === 'upload-jplag-file' && event.data.file && event.data.name) {
+      const { file, name } = event.data
+      const zipFile = new File([file], name || 'report.jplag')
+      handleFile(zipFile)
+    }
+  })
+})
+
 /**
  * Handles a file on drop. It determines the file type and passes it to the corresponding handler.
  * @param file File to handle