Show details for JIT

src/components/JitDetails.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { JIT } from "@/interfaces"
+interface Props {
+  jit: JIT
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <table class="table table-sm table-borderless">
+    <tbody>
+      <tr>
+        <th>Functions</th>
+        <td class="text-end">{{ props.jit.Functions }}</td>
+      </tr>
+      <tr>
+        <th colspan="2">Options</th>
+      </tr>
+      <tr v-for="(option, index) in props.jit.Options" :key="index">
+        <td>&nbsp;&nbsp;{{ index }}</td>
+        <td class="text-end">
+          {{ option ? "✓" : "✗" }} <small>({{ option }})</small>
+        </td>
+      </tr>
+      <tr>
+        <th colspan="2">Timing</th>
+      </tr>
+      <tr v-for="(timing, index) in props.jit.Timing" :key="index">
+        <td>&nbsp;&nbsp;{{ index }}</td>
+        <td class="text-end">{{ timing }} ms</td>
+      </tr>
+    </tbody>
+  </table>
+</template>

src/components/PlanStats.vue

@@ -9,6 +9,7 @@ import { duration, durationClass } from "@/filters"
 import { directive as vTippy } from "vue-tippy"
 import { NodeProp } from "../enums"
 import { formatNodeProp } from "@/filters"
+import JitDetails from "@/components/JitDetails.vue"
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 import { faCaretDown, faInfoCircle } from "@fortawesome/free-solid-svg-icons"
@@ -18,6 +19,7 @@ const getHelpMessage = helpService.getHelpMessage
 const plan = inject(PlanKey) as Ref<IPlan>
 const showSettings = ref<boolean>(false)
 const showTriggers = ref<boolean>(false)
+const showJitDetails = ref<boolean>(false)
 const rootNode = computed(() => plan.value && plan.value.content.Plan)
 
 const planningTimeClass = (percent: number) => {
@@ -135,7 +137,7 @@ function averageIO(node: Node) {
       </template>
     </div>
     <div
-      class="d-inline-block border-start px-2"
+      class="d-inline-block border-start px-2 position-relative"
       v-if="plan.planStats.jitTime && plan.planStats.executionTime"
     >
       JIT:
@@ -149,6 +151,23 @@ function averageIO(node: Node) {
           "
           v-html="duration(plan.planStats.jitTime)"
         ></span>
+        <button
+          @click.prevent="showJitDetails = !showJitDetails"
+          class="bg-transparent border-0 p-0 m-0 ps-1"
+        >
+          <FontAwesomeIcon
+            :icon="faCaretDown"
+            class="text-secondary"
+          ></FontAwesomeIcon>
+        </button>
+        <div class="stat-dropdown-container text-start" v-if="showJitDetails">
+          <div>
+            <jit-details
+              :jit="plan.content.JIT"
+              v-if="plan.content.JIT"
+            ></jit-details>
+          </div>
+        </div>
       </span>
     </div>
     <div class="d-inline-block border-start px-2 position-relative">

src/enums.ts

@@ -135,6 +135,7 @@ export enum NodeProp {
   ARRAY_INDEX_KEY = "arrayIndex",
 
   PEV_PLAN_TAG = "plan_",
+  JIT = "JIT",
 }
 
 export enum PropType {
@@ -153,6 +154,7 @@ export enum PropType {
   rows,
   sortGroups,
   transferRate,
+  jit,
 }
 
 export const nodePropTypes: { [key: string]: PropType } = {}
@@ -210,6 +212,8 @@ nodePropTypes[NodeProp.EXCLUSIVE_LOCAL_WRITTEN_BLOCKS] = PropType.blocks
 nodePropTypes[NodeProp.FULL_SORT_GROUPS] = PropType.sortGroups
 nodePropTypes[NodeProp.PRE_SORTED_GROUPS] = PropType.sortGroups
 
+nodePropTypes[NodeProp.JIT] = PropType.jit
+
 export class WorkerProp {
   // plan property keys
   public static WORKER_NUMBER = "Worker Number"

src/filters.ts

@@ -1,7 +1,9 @@
 import _ from "lodash"
 import { createApp } from "vue"
 import { EstimateDirection, nodePropTypes, PropType } from "@/enums"
+import type { JIT } from "@/interfaces"
 import SortGroup from "@/components/SortGroup.vue"
+import JitDetails from "@/components/JitDetails.vue"
 import hljs from "highlight.js/lib/core"
 import pgsql from "highlight.js/lib/languages/pgsql"
 hljs.registerLanguage("pgsql", pgsql)
@@ -170,6 +172,13 @@ export function transferRate(value: number): string {
   return formatBytes(value * 8 * 1024) + "/s"
 }
 
+function jit(value: JIT): string {
+  const app = createApp(JitDetails, { jit: value }).mount(
+    document.createElement("div")
+  )
+  return app.$el.outerHTML
+}
+
 export function formatNodeProp(key: string, value: unknown): string {
   if (_.has(nodePropTypes, key)) {
     if (nodePropTypes[key] === PropType.duration) {
@@ -207,6 +216,8 @@ export function formatNodeProp(key: string, value: unknown): string {
       return sortGroups(value as string)
     } else if (nodePropTypes[key] === PropType.transferRate) {
       return transferRate(value as number)
+    } else if (nodePropTypes[key] === PropType.jit) {
+      return jit(value as JIT)
     }
   }
   return _.escape(value as unknown as string)