add pev2

api/app.py

@@ -81,7 +81,6 @@ def spectrograph(file: bytes = File(...), x: int = Form(...), y: int = Form(...)
          "-x", str(x), "-y", str(y), "-z", str(z),
          "-w", window,
          "-o", "-"],
-        cwd="./FlameGraph",
         stdin=PIPE, stdout=PIPE, stderr=PIPE,
     )
 

toolbox-web/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
+    "pev2": "^0.8.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^8.4.2",

toolbox-web/src/App.vue

@@ -60,7 +60,7 @@ export default class App extends Vue {
 html, body {
   padding: 0;
   margin: 0;
-  overflow: hidden !important;
+  overflow: auto !important;
 }
 
 .monospace {

toolbox-web/src/components/Home.vue

@@ -12,6 +12,12 @@
           <v-card-title>Spectrograph</v-card-title>
           <v-card-subtitle>Generate spectrograph of audio files with <i>SoX</i></v-card-subtitle>
         </v-card>
+
+      <v-card class="mx-2" max-width="344" to="/tool/pev2">
+        <v-img :src="require('@/assets/pev2.png')" height="200px"></v-img>
+        <v-card-title>PEV2</v-card-title>
+        <v-card-subtitle>Postgres Explain Visualizer</v-card-subtitle>
+      </v-card>
     </v-row>
   </div>
 </template>

toolbox-web/src/components/Pev2.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <span>Use with <code>EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON)</code></span>
+    <v-row>
+      <v-col cols="12" md="6">
+        <v-textarea v-model="plan" dense rows="2" label="Plan" outlined></v-textarea>
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-textarea v-model="query" dense rows="2" label="Query" outlined></v-textarea>
+      </v-col>
+    </v-row>
+    <pev2 class="pev2" ref="pev2" v-if="!loading && plan" :plan-source="plan" :plan-query="query"></pev2>
+  </div>
+</template>
+
+<script>
+import pev2 from 'pev2'
+import { Watch, Component } from 'vue-property-decorator'
+import Vue from 'vue'
+
+
+@Component({
+  components: {
+    pev2: pev2
+  }
+})
+export default class Pev2 extends Vue {
+  plan = ""
+  query = ""
+  loading = false
+
+  @Watch("plan")
+  onPlanChange() {
+    if (this.plan) {
+      this.loading = true
+      window.setTimeout(() => this.loading = false, 10)
+    }
+  }
+
+  @Watch("query")
+  onQueryChange() {
+    if (this.query) {
+      this.loading = true
+      window.setTimeout(() => this.loading = false, 10)
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.plan-container {
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-top: -12px;
+}
+</style>
+
+<style>
+/* Undo bootstrap fuckery */
+*:hover {
+  text-decoration: none !important;
+}
+</style>

toolbox-web/src/main.ts

@@ -1,3 +1,4 @@
+import "bootstrap/dist/css/bootstrap.min.css"
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'

toolbox-web/src/router/index.ts

@@ -3,13 +3,15 @@ import VueRouter, {RouteConfig} from 'vue-router'
 import Home from '../components/Home.vue'
 import FlameGraph from '@/components/FlameGraph.vue'
 import Spectrograph from '@/components/Spectrograph.vue';
+import Pev2 from '@/components/Pev2.vue';
 
 Vue.use(VueRouter)
 
 const routes: Array<RouteConfig> = [
   {path: '/', component: Home},
   {path: '/tool/FlameGraph', component: FlameGraph},
-  {path: '/tool/Spectrograph', component: Spectrograph}
+  {path: '/tool/Spectrograph', component: Spectrograph},
+  {path: '/tool/pev2', component: Pev2}
 ]
 
 const router = new VueRouter({

toolbox-web/src/tools.ts

@@ -2,7 +2,8 @@ import {Tool} from "@/models";
 
 export const tools: Tool[] = [
   {name: "FlameGraph", icon: "mdi-bug"},
-  {name: "Spectrograph", icon: "mdi-music"}
+  {name: "Spectrograph", icon: "mdi-music"},
+  {name: "pev2", icon: "mdi-bug"},
 ]
 
 export const toolByName = (name: string) => {