From 9e78c44d2eaa377fe5ba7818041b0acbc5d964f5 Mon Sep 17 00:00:00 2001
From: Malcolm Locke <malcolm@buildkite.com>
Date: Thu, 18 Jul 2024 16:00:18 +1200
Subject: [PATCH] Embed PEV2 plan viewer into Explain -> Visualize

---
 app/views/pg_hero/home/_pev2.html.erb   | 27 +++++++++++++++++++++++++
 app/views/pg_hero/home/explain.html.erb | 12 +++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 app/views/pg_hero/home/_pev2.html.erb

diff --git a/app/views/pg_hero/home/_pev2.html.erb b/app/views/pg_hero/home/_pev2.html.erb
new file mode 100644
index 000000000..ed5442bc8
--- /dev/null
+++ b/app/views/pg_hero/home/_pev2.html.erb
@@ -0,0 +1,27 @@
+<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js"></script>
+<script src="https://unpkg.com/pev2/dist/pev2.umd.js"></script>
+<link
+  href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+  rel="stylesheet"
+/>
+<link rel="stylesheet" href="https://unpkg.com/pev2/dist/style.css" />
+
+<div id="pev2">
+  <pev2 :plan-source="plan" plan-query="" />
+</div>
+
+<script>
+  const { createApp } = Vue;
+
+  const plan = "<%= escape_javascript(plan.html_safe) %>";
+
+  const app = createApp({
+    data() {
+      return {
+        plan: plan,
+      }
+    },
+  });
+  app.component("pev2", pev2.Plan);
+  app.mount("#pev2");
+</script>
diff --git a/app/views/pg_hero/home/explain.html.erb b/app/views/pg_hero/home/explain.html.erb
index c2d40ccc6..afd755b39 100644
--- a/app/views/pg_hero/home/explain.html.erb
+++ b/app/views/pg_hero/home/explain.html.erb
@@ -14,9 +14,17 @@
 
   <% if @explanation %>
     <% if @visualize %>
-      <p>Paste the output below into the <%= link_to "explain visualizer", PgHero.visualize_url, target: "_blank" %></p>
+      <hr>
+      <%= render partial: "pev2", locals: { plan: @explanation } %>
+      <hr>
+      <details>
+        <summary>PEV version 1 instructions</summary>
+        <p>Paste the output below into the <%= link_to "explain visualizer", PgHero.visualize_url, target: "_blank" %></p>
+        <pre><code><%= @explanation %></code></pre>
+      </details>
+    <% else %>
+      <pre><code><%= @explanation %></code></pre>
     <% end %>
-    <pre><code><%= @explanation %></code></pre>
     <% unless @visualize %>
       <p><%= link_to "See how to interpret this", "https://www.postgresql.org/docs/current/static/using-explain.html", target: "_blank" %></p>
     <% end %>