From 98884d851ae947f55550895dcfc75b731c8d2241 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Fri, 28 Jul 2017 15:43:23 +0100
Subject: [PATCH] Added staleness indicator to the output

---
 src/web/App.js                     |  7 +++++--
 src/web/ControlsWaiter.js          | 24 ++++++++++++++++++++++++
 src/web/html/index.html            |  1 +
 src/web/stylesheets/layout/_io.css |  8 ++++++++
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/web/App.js b/src/web/App.js
index 6bbb5e0b..8945ea89 100755
--- a/src/web/App.js
+++ b/src/web/App.js
@@ -107,6 +107,7 @@ App.prototype.setBakingStatus = function(bakingStatus) {
         outputElement = document.getElementById("output-text");
 
     if (bakingStatus) {
+        this.manager.controls.hideStaleIndicator();
         this.bakingStatusTimeout = setTimeout(function() {
             outputElement.disabled = true;
             outputLoader.style.visibility = "visible";
@@ -205,8 +206,10 @@ App.prototype.bakingComplete = function(response) {
  * Runs Auto Bake if it is set.
  */
 App.prototype.autoBake = function() {
-    if (this.autoBake_ && !this.autoBakePause) {
+    if (this.autoBake_ && !this.autoBakePause && !this.baking) {
         this.bake();
+    } else {
+        this.manager.controls.showStaleIndicator();
     }
 };
 
@@ -310,7 +313,7 @@ App.prototype.populateOperationsList = function() {
 App.prototype.initialiseSplitter = function() {
     this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
         sizes: [20, 30, 50],
-        minSize: [240, 325, 440],
+        minSize: [240, 325, 450],
         gutterSize: 4,
         onDrag: function() {
             this.manager.controls.adjustWidth();
diff --git a/src/web/ControlsWaiter.js b/src/web/ControlsWaiter.js
index 886cb46c..2c8cf9c6 100755
--- a/src/web/ControlsWaiter.js
+++ b/src/web/ControlsWaiter.js
@@ -362,4 +362,28 @@ ControlsWaiter.prototype.supportButtonClick = function(e) {
     }
 };
 
+
+/**
+ * Shows the stale indicator to show that the input or recipe has changed
+ * since the last bake.
+ */
+ControlsWaiter.prototype.showStaleIndicator = function() {
+    const staleIndicator = document.getElementById("stale-indicator");
+
+    staleIndicator.style.visibility = "visible";
+    staleIndicator.style.opacity = 1;
+};
+
+
+/**
+ * Hides the stale indicator to show that the input or recipe has not changed
+ * since the last bake.
+ */
+ControlsWaiter.prototype.hideStaleIndicator = function() {
+    const staleIndicator = document.getElementById("stale-indicator");
+
+    staleIndicator.style.opacity = 0;
+    staleIndicator.style.visibility = "hidden";
+};
+
 export default ControlsWaiter;
diff --git a/src/web/html/index.html b/src/web/html/index.html
index a1fef8fb..ac10ec14 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -172,6 +172,7 @@
                             </div>
                             <div class="io-info" id="output-info"></div>
                             <div class="io-info" id="output-selection-info"></div>
+                            <span id="stale-indicator" title="The output is stale.&#10;The input or recipe has changed since this output was generated. Bake again to get the new value.">&#x1F551;</span>
                         </div>
                         <div class="textarea-wrapper">
                             <div id="output-highlighter" class="no-select"></div>
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 9caca010..a425edd1 100644
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -101,3 +101,11 @@
 .dropping-file {
     border: 5px dashed var(--drop-file-border-colour) !important;
 }
+
+#stale-indicator {
+    visibility: hidden;
+    transition: all 0.3s;
+    margin-left: 5px;
+    font-size: larger;
+    font-weight: normal;
+}