From 11f755f57b38bee2d418ac6e9253e1137ec915b8 Mon Sep 17 00:00:00 2001
From: Sanjiban Sengupta <sanjiban.sg@gmail.com>
Date: Tue, 27 Jun 2023 09:44:01 +0530
Subject: [PATCH] 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-lock.json                 | 17 +++++++-------
 client/package.json                      |  1 -
 client/src/assets/js/substrait-d3.js     |  4 +++-
 client/src/components/SubstraitGraph.vue | 28 ++++++++++++++++++++++++
 client/src/components/store.js           | 11 ++++++++++
 client/src/views/CodeView.vue            |  5 +++++
 client/src/views/UploadView.vue          |  5 +++++
 7 files changed, 61 insertions(+), 10 deletions(-)
 create mode 100644 client/src/components/store.js

diff --git a/client/package-lock.json b/client/package-lock.json
index 9c57fe8e..441deff6 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -35,7 +35,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"
@@ -5765,10 +5764,11 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
-      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true,
+      "peer": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -11587,10 +11587,11 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
-      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
-      "dev": true
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "peer": true
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
diff --git a/client/package.json b/client/package.json
index f7f468b3..2e045c72 100644
--- a/client/package.json
+++ b/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"
diff --git a/client/src/assets/js/substrait-d3.js b/client/src/assets/js/substrait-d3.js
index f7805948..e98178c1 100644
--- a/client/src/assets/js/substrait-d3.js
+++ b/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 };
diff --git a/client/src/components/SubstraitGraph.vue b/client/src/components/SubstraitGraph.vue
index 1987bb3f..a77ef75c 100644
--- a/client/src/components/SubstraitGraph.vue
+++ b/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>
diff --git a/client/src/components/store.js b/client/src/components/store.js
new file mode 100644
index 00000000..12cacae5
--- /dev/null
+++ b/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;
+  },
+});
diff --git a/client/src/views/CodeView.vue b/client/src/views/CodeView.vue
index 24ea36a2..6330447d 100644
--- a/client/src/views/CodeView.vue
+++ b/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(
diff --git a/client/src/views/UploadView.vue b/client/src/views/UploadView.vue
index 14dbd0a9..88bbc66b 100644
--- a/client/src/views/UploadView.vue
+++ b/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() {