From a022637827cad88e8bae974549f42d01b71c0cf5 Mon Sep 17 00:00:00 2001
From: Will Gunter <wgunter@udel.edu>
Date: Tue, 18 Jul 2023 08:39:45 -0700
Subject: [PATCH] Make images grow when hovered over

---
 .../main/java/jpl/cws/service/CwsConsoleService.java |  2 +-
 cws-ui/src/main/webapp/css/dashboard.css             | 12 +++++++++++-
 install/cws-ui/processes.ftl                         | 10 +++++-----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/cws-service/src/main/java/jpl/cws/service/CwsConsoleService.java b/cws-service/src/main/java/jpl/cws/service/CwsConsoleService.java
index 1bd76143..8d9f85eb 100644
--- a/cws-service/src/main/java/jpl/cws/service/CwsConsoleService.java
+++ b/cws-service/src/main/java/jpl/cws/service/CwsConsoleService.java
@@ -671,7 +671,7 @@ public Map<String, String> getOutputVariablesForProcess(String processInstanceId
                             } catch (IOException e) {
                                 throw new RuntimeException(e);
                             }
-                            outputVarMap.put(varName + " (" + varType + ", image)", encodedString);
+                            outputVarMap.put(varName + " (" + varType + ", " + mimeType + ")", encodedString);
                         } else {
                             outputVarMap.put(varName + " (" + varType + ")", fileName);
                         }
diff --git a/cws-ui/src/main/webapp/css/dashboard.css b/cws-ui/src/main/webapp/css/dashboard.css
index 05aab132..f35203c1 100644
--- a/cws-ui/src/main/webapp/css/dashboard.css
+++ b/cws-ui/src/main/webapp/css/dashboard.css
@@ -313,7 +313,7 @@ div[class*="bar-"]{
   position: relative;
   outline: none;
   float: right;
-  text-align: end;;
+  text-align: end;
 }
 
 .copy svg {
@@ -322,3 +322,13 @@ div[class*="bar-"]{
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.grow {
+  transition: all 0.3s ease-in-out;
+  position: relative;
+  z-index: 5;
+}
+
+.grow:hover {
+  transform: scale(2.0);
+}
\ No newline at end of file
diff --git a/install/cws-ui/processes.ftl b/install/cws-ui/processes.ftl
index 22c3f765..62c8a902 100644
--- a/install/cws-ui/processes.ftl
+++ b/install/cws-ui/processes.ftl
@@ -464,16 +464,16 @@
                             for (const [key, value] of Object.entries(data)) {
 								var temp = "";
 								var tempVal = value;
-								var tempKey = key.substring(7);
+								var tempKey = key;
                                 if (tempKey === "workerId") {
                                     continue;
                                 }
                                 if (count > 3) {
                                     putAllAfter = 1;
                                 }
-								if (tempKey.includes("(file, image)")) {
+								if (key.includes("(file, image/")) {
 									temp = "<div><div style=\"width: 85%; max-width: 300px; min-height: 25px; float:left; overflow-wrap: break-word;\"><b>" + tempKey + ":</b> " + '<a class="thumbnail">'
-										+ '<img src="' + tempVal + '">'
+										+ '<img class="grow" src="' + tempVal + '">'
 										+ '</a>' + "</div><div class=\"copySpan\" style=\"width: 30px; float:right\">"
 										+ "<span aria-label=\"Copy to clipboard\" data-microtip-position=\"top-left\" role=\"tooltip\" class=\"copy\" data-isImage=\"true\" data-copyValue=\"" + tempVal + "\" onClick=''>"
 										+ "<img src=\"images/copy.svg\" class=\"copy-icon clipboard\">"
@@ -536,9 +536,9 @@
                                 if (count > 3) {
                                     putAllAfter = 1;
                                 }
-								if (tempKey.includes("(file, image)")) {
+								if (tempKey.includes("(file, image/")) {
 									temp = "<div><div style=\"width: 85%; max-width: 300px; min-height: 25px; float:left; overflow-wrap: break-word;\"><b>" + tempKey + ":</b> " + '<a class="thumbnail">'
-										+ '<img src="' + tempVal + '">'
+										+ '<img class="grow" src="' + tempVal + '">'
 										+ '</a>' + "</div><div class=\"copySpan\" style=\"width: 30px; float:right\">"
 										+ "<span aria-label=\"Copy to clipboard\" data-microtip-position=\"top-left\" role=\"tooltip\" class=\"copy\" data-isImage=\"true\" data-copyValue=\"" + tempVal + "\" onClick=''>"
 										+ "<img src=\"images/copy.svg\" class=\"copy-icon clipboard\">"