From 414b87af8b99ffa951b267c153e49701e5b84986 Mon Sep 17 00:00:00 2001
From: Ivan Shubin <ivan.ishubin@gmail.com>
Date: Sat, 9 Mar 2019 10:55:13 +0100
Subject: [PATCH] fix for #616 Implemented image comparison map popup in html
 report

---
 .../resources/html-report/galen-report.css    | 10 +++++
 .../resources/html-report/galen-report.js     | 45 ++++++++++++++++++-
 .../html-report/report-test.tpl.html          | 27 +++++++++++
 3 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/galen-core/src/main/resources/html-report/galen-report.css b/galen-core/src/main/resources/html-report/galen-report.css
index 4acaf89d..178495bf 100644
--- a/galen-core/src/main/resources/html-report/galen-report.css
+++ b/galen-core/src/main/resources/html-report/galen-report.css
@@ -247,6 +247,11 @@ svg line.meta-line-guide {
 .layout-spec ul.error-messages li {
     margin-left: 10px;
 }
+.layout-spec ul.error-messages li .link {
+    color: #B33914;
+    font-weight: bold;
+    text-decoration: underline;
+}
 .layout-spec.has-failure > .title {
     font-weight: bold;
     color: #DB4B4B;
@@ -548,3 +553,8 @@ table.mutation-table tr.mutation-table-total td {
     white-space: pre;
     overflow-x: auto;
 }
+
+.image-comparison-popup .image-layout {
+    display: inline-block;
+    margin: 5px;
+}
diff --git a/galen-core/src/main/resources/html-report/galen-report.js b/galen-core/src/main/resources/html-report/galen-report.js
index d2a9ac77..5fb99a2f 100644
--- a/galen-core/src/main/resources/html-report/galen-report.js
+++ b/galen-core/src/main/resources/html-report/galen-report.js
@@ -245,10 +245,45 @@ function toggleReportNode(node) {
     node.expanded = !node.expanded;
 }
 
+Vue.component('image-comparison-popup', {
+    props: ['imagedata'],
+    template: '#tpl-image-comparison-popup',
+    mounted() {
+        document.addEventListener('keydown', this.onKeyPress);
+    },
+    beforeDestroy() {
+        document.removeEventListener('keydown', this.onKeyPress);
+    },
+    data: function () {
+        var clientWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+        var clientHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        return {
+            position: {
+                top: 5,
+                left: 50,
+                width: clientWidth - 100,
+                height: clientHeight - 10
+            }
+        };
+    },
+    methods: {
+        onKeyPress: function (event) {
+            if (event.key === 'Escape') {
+                this.$emit('close');
+            }
+        }
+    }
+});
 
 Vue.component('screenshot-popup', {
     props: ['screenshot', 'highlight', 'guides', 'spec'],
     template: '#tpl-screenshot-popup',
+    mounted() {
+        document.addEventListener('keydown', this.onKeyPress);
+    },
+    beforeDestroy() {
+        document.removeEventListener('keydown', this.onKeyPress);
+    },
     data: function () {
         var clientWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
         var clientHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
@@ -271,6 +306,13 @@ Vue.component('screenshot-popup', {
                 offsetTop: 30 - this.highlight.boundaryBox.min.y,
             }
         };
+    },
+    methods: {
+        onKeyPress: function (event) {
+            if (event.key === 'Escape') {
+                this.$emit('close');
+            }
+        }
     }
 });
 
@@ -360,7 +402,8 @@ Vue.component('layout-spec', {
     template: '#tpl-layout-spec',
     data: function () {
         return {
-            isFailed: this.spec.errors && this.spec.errors.length > 0
+            isFailed: this.spec.errors && this.spec.errors.length > 0,
+            imageComparisonShown: false
         };
     },
     methods: {
diff --git a/galen-core/src/main/resources/html-report/report-test.tpl.html b/galen-core/src/main/resources/html-report/report-test.tpl.html
index 6afe5905..3f227628 100644
--- a/galen-core/src/main/resources/html-report/report-test.tpl.html
+++ b/galen-core/src/main/resources/html-report/report-test.tpl.html
@@ -218,11 +218,38 @@
                     v-bind:title="spec.place ? spec.place.filePath + ':' + spec.place.lineNumber : ''"
                     >{{spec.name}}</div>
                 <ul class="error-messages" v-if="isFailed">
+                    <li class="error-message" v-if="spec.imageComparison">
+                        <span class="link" v-on:click="imageComparisonShown = true">Show image comparison</span>
+                    </li>
                     <li class="error-message" v-for="error in spec.errors">{{error}}</li>
                 </ul>
                 <div v-if="spec.subLayout" class="sublayout">
                     <layout-section v-if="spec.subLayout.sections" v-for="section in spec.subLayout.sections" v-bind:section="section" v-bind:bus="bus" v-bind:layout="spec.subLayout"></layout-section>
                 </div>
+                <image-comparison-popup v-if="imageComparisonShown" v-on:close="imageComparisonShown = false" v-bind:imagedata="spec.imageComparison"/>
+            </div>
+        </template>
+
+
+        <template id="tpl-image-comparison-popup">
+            <div class="image-comparison-popup">
+                <div class="popup-shadow" v-on:click="$emit('close')"> </div>
+                <div class="popup-container" v-bind:style="{top: position.top + 'px', left: position.left + 'px', width: position.width + 'px', height: position.height + 'px'}">
+                    <div class="popup-body">
+                        <div class="image-layout">
+                            <h5>Actual Image</h5>
+                            <img v-bind:src="imagedata.actualImage"/>
+                        </div>
+                        <div class="image-layout">
+                            <h5>Expected Image</h5>
+                            <img v-bind:src="imagedata.expectedImage"/>
+                        </div>
+                        <div class="image-layout">
+                            <h5>Comparison Map</h5>
+                            <img v-bind:src="imagedata.comparisonMapImage"/>
+                        </div>
+                    </div>
+                </div>
             </div>
         </template>