Added functionality to Magic button and improved the icon

src/web/Manager.mjs

@@ -158,6 +158,7 @@ class Manager {
         document.getElementById("switch").addEventListener("click", this.output.switchClick.bind(this.output));
         document.getElementById("undo-switch").addEventListener("click", this.output.undoSwitchClick.bind(this.output));
         document.getElementById("maximise-output").addEventListener("click", this.output.maximiseOutputClick.bind(this.output));
+        document.getElementById("magic").addEventListener("click", this.output.magicClick.bind(this.output));
         document.getElementById("output-text").addEventListener("scroll", this.highlighter.outputScroll.bind(this.highlighter));
         document.getElementById("output-text").addEventListener("mouseup", this.highlighter.outputMouseup.bind(this.highlighter));
         document.getElementById("output-text").addEventListener("mousemove", this.highlighter.outputMousemove.bind(this.highlighter));

src/web/OutputWaiter.mjs

@@ -422,6 +422,7 @@ class OutputWaiter {
      * Triggers the BackgroundWorker to attempt Magic on the current output.
      */
     backgroundMagic() {
+        this.hideMagicButton();
         const sample = this.dishStr ? this.dishStr.slice(0, 1000) :
             this.dishBuffer ? this.dishBuffer.slice(0, 1000) : "";
 
@@ -441,16 +442,57 @@ class OutputWaiter {
             !options[0].recipe.length)
             return;
 
-        //console.log(options);
-
         const currentRecipeConfig = this.app.getRecipeConfig();
         const newRecipeConfig = currentRecipeConfig.concat(options[0].recipe);
         const recipeURL = "#recipe=" + Utils.encodeURIFragment(Utils.generatePrettyRecipe(newRecipeConfig));
         const opSequence = options[0].recipe.map(o => o.op).join(", ");
 
         log.log(`Running <a href="${recipeURL}">${opSequence}</a> will result in "${Utils.truncate(options[0].data, 20)}"`);
-        //this.app.setRecipeConfig(newRecipeConfig);
+
-        //this.app.autoBake();
+        this.showMagicButton(opSequence, options[0].data, newRecipeConfig);
+    }
+
+
+    /**
+     * Handler for Magic click events.
+     *
+     * Loads the Magic recipe.
+     *
+     * @fires Manager#statechange
+     */
+    magicClick() {
+        const magicButton = document.getElementById("magic");
+        this.app.setRecipeConfig(JSON.parse(magicButton.getAttribute("data-recipe")));
+        window.dispatchEvent(this.manager.statechange); 
+        this.hideMagicButton();
+    }
+
+
+    /**
+     * Displays the Magic button with a title and adds a link to a complete recipe.
+     *
+     * @param {string} opSequence
+     * @param {string} result
+     * @param {Object[]} recipeConfig
+     */
+    showMagicButton(opSequence, result, recipeConfig) {
+        const magicButton = document.getElementById("magic");
+        magicButton.setAttribute("data-original-title", `Running <i>${opSequence}</i> will result in "${Utils.truncate(result, 20)}"`);
+        magicButton.setAttribute("data-recipe", JSON.stringify(recipeConfig), null, "");
+        magicButton.style.visibility = "visible";
+        magicButton.style.opacity = 1;
+    }
+
+
+    /**
+     * Hides the Magic button and resets its values.
+     */
+    hideMagicButton() {
+        const magicButton = document.getElementById("magic");
+        magicButton.style.visibility = "hidden";
+        magicButton.style.opacity = 0;
+        magicButton.setAttribute("data-recipe", "");
+        magicButton.setAttribute("data-original-title", "Magic!");
     }
 
 }

src/web/html/index.html

@@ -278,8 +278,10 @@
                             </span>
                             <div class="io-info" id="output-info"></div>
                             <div class="io-info" id="output-selection-info"></div>
-                            <button type="button" class="btn btn-primary bmd-btn-icon" id="magic" data-toggle="tooltip" title="Magic!">
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
-                                <i class="material-icons">flare</i>
+                                <svg width="22" height="22" viewBox="0 0 24 24">
+                                    <path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />
+                                </svg>
                             </button>
                             <span id="stale-indicator" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">
                                 <i class="material-icons">access_time</i>

src/web/stylesheets/layout/_io.css

@@ -148,6 +148,12 @@
 }
 
 #magic {
+    visibility: hidden;
+    transition: all 0.3s;
     margin-left: 5px;
-    display: none;
+    margin-bottom: 5px;
+}
+
+#magic svg path {
+    fill: var(--primary-font-colour);
 }

src/web/stylesheets/utils/_overrides.css

@@ -13,7 +13,7 @@
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
-    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
+    src: url("../static/fonts/MaterialIcons-Regular.woff2") format('woff2');
 }
 
 .material-icons {