remove save button

Author: Preetam Jinka

README.md

@@ -4,14 +4,37 @@ This is a web-based MySQL explain analyzer.
 
 You can use it here: https://preetam.github.io/explain-analyzer/#!/explain/
 
-Here's an example: https://preetam.github.io/explain-analyzer/#!/explain/0d2828b29fa9eeb73fff6880dee178431e47f26a.json
+Try it with
+
+```json
+{
+  "query_block": {
+    "select_id": 1,
+    "cost_info": { "query_cost": "0.45" },
+    "table": {
+      "table_name": "test",
+      "access_type": "ALL",
+      "rows_examined_per_scan": 2,
+      "rows_produced_per_join": 2,
+      "filtered": "100.00",
+      "cost_info": {
+        "read_cost": "0.25",
+        "eval_cost": "0.20",
+        "prefix_cost": "0.45",
+        "data_read_per_join": "16"
+      },
+      "used_columns": ["id"]
+    }
+  }
+}
+```
 
 ### Features
 
-* Table representation of MySQL JSON explain output
-* Comments about explain interpretation
-* Experimental scalability analysis
-* Explain saving and permalinks
+- Table representation of MySQL JSON explain output
+- Comments about explain interpretation
+- Experimental scalability analysis
+- Explain saving and permalinks
 
 ### Screenshot
 

html/js/app.min.js

@@ -1,50 +1,48 @@
-var m = require("mithril")
-var Explain = require("./Explain")
-var Analysis = require("./Analysis")
-var ErrorMessage = require("./ErrorMessage")
+var m = require("mithril");
+var Explain = require("./Explain");
+var Analysis = require("./Analysis");
+var ErrorMessage = require("./ErrorMessage");
 
 var App = {
-  oninit: function(vnode) {
+  oninit: function (vnode) {
     var planID = m.route.param("key");
     vnode.state.explain = new Explain();
     if (planID) {
       vnode.state.loading = true;
-      Explain.load(vnode.state.explain, planID).then(function() {
-        Explain.parse(vnode.state.explain);
-        vnode.state.analysis = new Analysis(vnode.state.explain);
-        vnode.state.loading = false;
-        vnode.state.initialFieldData = JSON.stringify(vnode.state.explain.data, null, " ");
-        vnode.state.fieldData = vnode.state.initialFieldData;
-      }).catch(function(e) {
-        vnode.state.loading = false;
-        vnode.state.loadError = e;
-      })
-      console.log("fetching plan", planID)
+      Explain.load(vnode.state.explain, planID)
+        .then(function () {
+          Explain.parse(vnode.state.explain);
+          vnode.state.analysis = new Analysis(vnode.state.explain);
+          vnode.state.loading = false;
+          vnode.state.initialFieldData = JSON.stringify(
+            vnode.state.explain.data,
+            null,
+            " "
+          );
+          vnode.state.fieldData = vnode.state.initialFieldData;
+        })
+        .catch(function (e) {
+          vnode.state.loading = false;
+          vnode.state.loadError = e;
+        });
+      console.log("fetching plan", planID);
     }
     vnode.state.analysis = "div";
 
-    vnode.state.save = function() {
-      var explain = this.explain;
-      Explain.save(explain).then(function() {
-        m.route.set("/explain/" + explain.id)
-      })
-      return false;
-    }.bind(vnode.state);
-
-    vnode.state.analyze = function() {
+    vnode.state.analyze = function () {
       try {
         var data = JSON.parse(this.fieldData);
         this.explain.data = data;
         Explain.parse(this.explain);
         this.analysis = new Analysis(this.explain);
         vnode.state.unanalyzedChanges = false;
-      } catch(e) {
-        this.analysis = new ErrorMessage("Error parsing explain JSON", ""+e)
+      } catch (e) {
+        this.analysis = new ErrorMessage("Error parsing explain JSON", "" + e);
       }
       return false;
     }.bind(vnode.state);
   },
-  view: function(vnode) {
+  view: function (vnode) {
     if (vnode.state.loading) {
       return m("div", "Loading...");
     }
@@ -54,42 +52,43 @@ var App = {
     var explainTextareaParams = {
       className: "explain-input pure-input-2-3",
       placeholder: "MySQL JSON Explain { . . . }",
-      oninput: function() {
+      oninput: function () {
         vnode.state.initialFieldData = null;
         vnode.state.fieldData = this.value;
         vnode.state.unanalyzedChanges = true;
-      }
-    }
+      },
+    };
     if (vnode.state.initialFieldData) {
       explainTextareaParams.value = vnode.state.initialFieldData;
     }
     return m("div", [
-      m("form",
+      m(
+        "form",
         {
           className: "pure-form pure-form-stacked",
         },
-        m("fieldset.pure-group",
-          m("textarea",
-            explainTextareaParams
-          ),
-          m("span", {
-            class: "pure-form-message mea-explain-input-message"
-          }, "Paste the output of EXPLAIN FORMAT=JSON ...")
+        m(
+          "fieldset.pure-group",
+          m("textarea", explainTextareaParams),
+          m(
+            "span",
+            {
+              class: "pure-form-message mea-explain-input-message",
+            },
+            "Paste the output of EXPLAIN FORMAT=JSON ..."
+          )
         ),
-        m("fieldset.pure-group",
-          m("button.pure-button", {onclick: vnode.state.analyze}, "Analyze"),
-          " ",
-          m("button.pure-button", {onclick: vnode.state.save, disabled: vnode.state.unanalyzedChanges == true}, "Save")
+        m(
+          "fieldset.pure-group",
+          m("button.pure-button", { onclick: vnode.state.analyze }, "Analyze")
         )
       ),
-      m("div", [
-        m(vnode.state.analysis)
-      ])
-    ])
-  }
-}
+      m("div", [m(vnode.state.analysis)]),
+    ]);
+  },
+};
 
 m.route(document.getElementById("app"), "/explain/", {
   "/explain/": App,
-  "/explain/:key": App
-})
+  "/explain/:key": App,
+});