Make images grow when hovered over

NASA-AMMOS · Jul 18, 2023 · a022637 · a022637
1 parent 6e385de
commit a022637
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 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
@@ -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
@@ -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);
+}
diff --git 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\">"