From 87afc10f72f317ce8e6679376f58d56da141847e Mon Sep 17 00:00:00 2001
From: b0ink <40929320+b0ink@users.noreply.github.com>
Date: Thu, 26 Jun 2025 14:42:53 +1000
Subject: [PATCH 1/4] Add post message handlers to auto load reports and view
 comparisons

---
 .../src/components/ComparisonsTable.vue       | 34 ++++++++++++++++++-
 report-viewer/src/views/FileUploadView.vue    | 16 ++++++++-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 9968cde1be..be00e0ce02 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -202,7 +202,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'
@@ -214,6 +214,7 @@ import { MetricType, metricToolTips } from '@/model/MetricType'
 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)
 
@@ -249,6 +250,37 @@ const displayedComparisons = computed(() => {
 
 const searchString = ref('')
 
+onMounted(() => {
+  // Allow the search filter to be remotely set via postMessage
+  window.addEventListener('message', async (event) => {
+    const { type, filter, autoViewComparison } = event.data
+
+    if (type !== 'set-filter-value' || !filter || typeof filter !== 'string') return
+
+    // 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: {
+            comparisonFileName: store().getComparisonFileName(
+              comparisons[0].firstSubmissionId,
+              comparisons[0].secondSubmissionId
+            )
+          }
+        })
+      }
+    }
+  })
+})
+
 /**
  * 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.
diff --git a/report-viewer/src/views/FileUploadView.vue b/report-viewer/src/views/FileUploadView.vue
index a9cde3c99f..df371c1a2c 100644
--- a/report-viewer/src/views/FileUploadView.vue
+++ b/report-viewer/src/views/FileUploadView.vue
@@ -58,7 +58,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'
@@ -114,6 +114,20 @@ 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) => {
+    const { type, file, name } = event.data
+    if (type !== 'jplag-zip' || !file) return
+
+    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

From 88c859dc56c9af21c10d1045d5200883d95539e3 Mon Sep 17 00:00:00 2001
From: b0ink <40929320+b0ink@users.noreply.github.com>
Date: Thu, 26 Jun 2025 15:22:34 +1000
Subject: [PATCH 2/4] Update post message type names

---
 report-viewer/src/components/ComparisonsTable.vue | 2 +-
 report-viewer/src/views/FileUploadView.vue        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index be00e0ce02..59276f1f5f 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -255,7 +255,7 @@ onMounted(() => {
   window.addEventListener('message', async (event) => {
     const { type, filter, autoViewComparison } = event.data
 
-    if (type !== 'set-filter-value' || !filter || typeof filter !== 'string') return
+    if (type !== 'set-search-filter-value' || !filter || typeof filter !== 'string') return
 
     // Set the value of the search input
     searchString.value = filter
diff --git a/report-viewer/src/views/FileUploadView.vue b/report-viewer/src/views/FileUploadView.vue
index df371c1a2c..41b1879f3b 100644
--- a/report-viewer/src/views/FileUploadView.vue
+++ b/report-viewer/src/views/FileUploadView.vue
@@ -120,7 +120,7 @@ onMounted(() => {
   // and automatically receive and open a JPlag report sent from the parent window
   window.addEventListener('message', async (event) => {
     const { type, file, name } = event.data
-    if (type !== 'jplag-zip' || !file) return
+    if (type !== 'upload-jplag-file' || !file) return
 
     const zipFile = new File([file], name || 'report.jplag')
 

From 95f3d99020772736c4cae213ec654ee045aeab89 Mon Sep 17 00:00:00 2001
From: b0ink <40929320+b0ink@users.noreply.github.com>
Date: Mon, 30 Jun 2025 16:55:24 +1000
Subject: [PATCH 3/4] Enable open-comparison post message handler

---
 .../src/components/ComparisonsTable.vue       | 63 ++++++++++++-------
 report-viewer/src/views/FileUploadView.vue    | 11 ++--
 2 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 59276f1f5f..df32e8e4e5 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -253,30 +253,47 @@ const searchString = ref('')
 onMounted(() => {
   // Allow the search filter to be remotely set via postMessage
   window.addEventListener('message', async (event) => {
-    const { type, filter, autoViewComparison } = event.data
-
-    if (type !== 'set-search-filter-value' || !filter || typeof filter !== 'string') return
-
-    // 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: {
-            comparisonFileName: store().getComparisonFileName(
-              comparisons[0].firstSubmissionId,
-              comparisons[0].secondSubmissionId
-            )
-          }
-        })
+    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: {
+              comparisonFileName: store().getComparisonFileName(
+                comparisons[0].firstSubmissionId,
+                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: {
+          comparisonFileName
+        }
+      })
     }
   })
 })
diff --git a/report-viewer/src/views/FileUploadView.vue b/report-viewer/src/views/FileUploadView.vue
index 41b1879f3b..84cfcaefdb 100644
--- a/report-viewer/src/views/FileUploadView.vue
+++ b/report-viewer/src/views/FileUploadView.vue
@@ -119,12 +119,11 @@ onMounted(() => {
   // 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) => {
-    const { type, file, name } = event.data
-    if (type !== 'upload-jplag-file' || !file) return
-
-    const zipFile = new File([file], name || 'report.jplag')
-
-    handleFile(zipFile)
+    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)
+    }
   })
 })
 

From df1120e2107ba87eb4c3f4d25f4decf5cb3fa601 Mon Sep 17 00:00:00 2001
From: b0ink <40929320+b0ink@users.noreply.github.com>
Date: Wed, 20 Aug 2025 13:35:08 +1000
Subject: [PATCH 4/4] Update to new params

---
 report-viewer/src/components/ComparisonsTable.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 406b7c845e..6aad7f6b2c 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -295,10 +295,8 @@ onMounted(() => {
           router.push({
             name: 'ComparisonView',
             params: {
-              comparisonFileName: store().getComparisonFileName(
-                comparisons[0].firstSubmissionId,
-                comparisons[0].secondSubmissionId
-              )
+              firstSubmissionId: comparisons[0].firstSubmissionId,
+              secondSubmissionId: comparisons[0].secondSubmissionId
             }
           })
         }
@@ -315,7 +313,8 @@ onMounted(() => {
       router.push({
         name: 'ComparisonView',
         params: {
-          comparisonFileName
+          firstSubmissionId: submissionId1,
+          secondSubmissionId: submissionId2
         }
       })
     }