WIP

app/views/pg_hero/home/_pev2.html.erb

@@ -0,0 +1,27 @@
+<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
+<script src="https://unpkg.com/pev2/dist/pev2.umd.js"></script>
+<link
+  href="https://unpkg.com/[email protected]/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>

app/views/pg_hero/home/explain.html.erb

@@ -14,9 +14,10 @@
 
   <% if @explanation %>
     <% if @visualize %>
-      <p>Paste the output below into the <%= link_to "explain visualizer", PgHero.visualize_url, target: "_blank" %></p>
+      <%= render partial: "pev2", locals: { plan: @explanation } %>
+    <% 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 %>