feat: Option to download plan as JSON (#23)

* feat: Download JSON when a SQL plan is coded

* fix: lint and package version changes

* fix: nodeData table and Download JSON buttons should reset upon state change

* fix: lint

* fix: supporting json download for all formats and modes

* feat: comments on JSON.stringify parameters

client/package.json

@@ -39,7 +39,6 @@
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
     "happy-dom": "^8.2.6",
-    "prettier": "^2.7.1",
     "sass": "^1.57.1",
     "vite": "^4.0.5",
     "vitest": "^0.28.4"

client/src/assets/js/substrait-d3.js

@@ -337,8 +337,10 @@ function drawGraph(pre_nodes, pre_links, use_drag = true) {
 }
 
 function clearGraph() {
-  var svg = d3.select("svg");
+  const svg = d3.select("svg");
   svg.html("");
+  const nodeData = document.getElementById("nodeData");
+  nodeData.innerHTML = "";
 }
 
 export { buildGraph, clearGraph, drawGraph };

client/src/components/SubstraitGraph.vue

@@ -3,6 +3,16 @@
     <div style="margin-top: 10px; list-style: none" id="index" class="fa"></div>
     <div id="svgContainer">
       <div style="margin-right: 10vh; text-align: right">
+        <button
+          ref="download_json"
+          type="button"
+          class="btn btn-outline-primary btn-sm"
+          v-show="downloadJSON"
+          style="margin-right: 1vh"
+          @click="generateJSON"
+        >
+          Download JSON
+        </button>
         <button
           type="button"
           class="btn btn-outline-primary btn-sm"
@@ -28,17 +38,21 @@
 </template>
 
 <script>
+import { store } from "../components/store";
+
 export default {
   name: "SubstraitGraph",
   data: function () {
     return {
       download: false,
+      downloadJSON: false,
     };
   },
   mounted() {
     this.observer = new MutationObserver(() => {
       const svgElement = this.$refs.d3Plot;
       this.download = svgElement.childNodes.length > 0 ? true : false;
+      this.downloadJSON = store.plan.length > 0 && this.download ? true : false;
     });
 
     this.observer.observe(this.$refs.d3Plot, {
@@ -85,6 +99,20 @@ export default {
       };
       image.src = svgUrl;
     },
+    generateJSON() {
+      const jsonObject = JSON.parse(store.plan);
+      const jsonString = JSON.stringify(
+        jsonObject,
+        /* no replacer function required */ null,
+        /* whitespace for indentation */ 4
+      );
+      const blob = new Blob([jsonString], { type: "application/json" });
+      const plan_link = document.createElement("a");
+      plan_link.href = URL.createObjectURL(blob);
+      plan_link.download = "plan.json";
+      plan_link.click();
+      URL.revokeObjectURL(plan_link.href);
+    },
   },
 };
 </script>

client/src/components/store.js

@@ -0,0 +1,11 @@
+import { reactive } from "vue";
+
+export const store = reactive({
+  plan: "",
+  reset_plan() {
+    this.plan = "";
+  },
+  set_plan(data) {
+    this.plan = data;
+  },
+});

client/src/views/CodeView.vue

@@ -63,6 +63,8 @@ import axios from "axios";
 
 import * as substrait from "substrait";
 import { validate, plot } from "../assets/js/shared";
+import { clearGraph } from "../assets/js/substrait-d3";
+import { store } from "../components/store";
 
 self.MonacoEnvironment = {
   getWorker(_, label) {
@@ -107,6 +109,7 @@ export default {
         editors[0].updateOptions({ minimap: { enabled: true } });
         editors[0].updateOptions({ overviewRulerLanes: 2 });
       }
+      clearGraph();
     },
     async generateFromJson() {
       this.updateStatus("Validating JSON plan with Substrait Validator...");
@@ -115,6 +118,7 @@ export default {
         this.getValidationOverrideLevel(),
         this.updateStatus
       );
+      store.set_plan(this.code);
       this.updateStatus("Generating plot for substrait JSON plan...");
       const plan = substrait.substrait.Plan.fromObject(this.content);
       plot(plan, this.updateStatus);
@@ -124,6 +128,7 @@ export default {
       const duckDbRsp = await axios.post("/api/parse/", {
         query: this.code,
       });
+      store.set_plan(duckDbRsp.data);
       this.updateStatus("SQL query converted to Substrait Plan successfully!");
       this.updateStatus("Validating converted Substrait plan...");
       validate(

client/src/views/UploadView.vue

@@ -37,6 +37,8 @@ import ValidationLevel from "@/components/ValidationLevel.vue";
 import axios from "axios";
 import { readFile, readText, validate, plot } from "../assets/js/shared";
 
+import { store } from "../components/store";
+
 import * as substrait from "substrait";
 
 export default {
@@ -65,6 +67,7 @@ export default {
         this.getValidationOverrideLevel(),
         this.updateStatus
       );
+      store.set_plan(jsonFileRes);
       this.updateStatus("Generating plot for substrait JSON plan...");
       const plan = substrait.substrait.Plan.fromObject(this.content);
       plot(plan, this.updateStatus);
@@ -85,6 +88,7 @@ export default {
         this.getValidationOverrideLevel(),
         this.updateStatus
       );
+      store.set_plan(duckDbRsp.data);
       this.updateStatus("Generating plot for converted substrait plan...");
       const plan = substrait.substrait.Plan.fromObject(
         JSON.parse(duckDbRsp.data)
@@ -110,6 +114,7 @@ export default {
       }
       this.updateStatus("Generating plot for Substrait plan...");
       const plan = substrait.substrait.Plan.decode(new Uint8Array(fileReadRsp));
+      store.set_plan(JSON.stringify(plan, null, 2));
       plot(plan, this.updateStatus);
     },
     async generate() {