refactor: put all properties in a single enum

src/__tests__/filters-formatProp.spec.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from "vitest"
+import { formatProp } from "@/filters"
+import { Property } from "@/enums"
+
+
+describe("formatProp", () => {
+  describe("duration", () => {
+    it("formats duration", () => {
+      expect(formatProp(Property.ACTUAL_TOTAL_TIME, 1234.56)).toBe("1s 235ms");
+    })
+    it("returns N/A for undefined", () => {
+      expect(formatProp(Property.ACTUAL_TOTAL_TIME, undefined)).toBe("-");
+    })
+  })
+
+  describe("cost", () => {
+    it("formats cost", () => {
+      expect(formatProp(Property.TOTAL_COST, 1234.56)).toBe("1,234.56");
+    })
+    it("formats cost with fraction digits", () => {
+      expect(formatProp(Property.TOTAL_COST, 1234)).toBe("1,234.00");
+    })
+    it("returns N/A for undefined", () => {
+      expect(formatProp(Property.TOTAL_COST, undefined)).toBe("N/A");
+    })
+  })
+
+  describe("rows", () => {
+    it("formats rows", () => {
+      expect(formatProp(Property.ACTUAL_ROWS, 1000)).toBe("1,000");
+    })
+    it("returns N/A for undefined", () => {
+      expect(formatProp(Property.ACTUAL_ROWS, undefined)).toBe("N/A");
+    })
+  })
+
+  describe("loops", () => {
+    it("formats loops", () => {
+      expect(formatProp(Property.ACTUAL_LOOPS, 1000)).toBe("1,000");
+    })
+    it("returns N/A for undefined", () => {
+      expect(formatProp(Property.ACTUAL_LOOPS, undefined)).toBe("N/A");
+    })
+  })
+
+  describe("factor", () => {
+    it("formats a factor with a times symbol", () => {
+      expect(formatProp(Property.PLANNER_ESTIMATE_FACTOR, 3.456)).toBe("3.5 ×");
+    });
+
+    it("rounds to 2 significant figures", () => {
+      expect(formatProp(Property.PLANNER_ESTIMATE_FACTOR, 1234)).toBe("1,200 ×");
+    });
+
+    it("returns N/A for undefined", () => {
+      expect(formatProp(Property.PLANNER_ESTIMATE_FACTOR, undefined)).toBe("N/A");
+    });
+  });
+
+  describe("kilobytes", () => {
+    it("formats kilobytes", () => {
+      expect(formatProp(Property.SORT_SPACE_USED, 1151688)).toBe("1.1 GB");
+    });
+  });
+
+  describe("bytes", () => {
+    it("formats bytes", () => {
+      expect(formatProp(Property.WAL_BYTES, 1151688)).toBe("1.1 MB");
+    });
+  });
+
+  describe("boolean", () => {
+    it("returns 'yes' for true", () => {
+      expect(formatProp(Property.ACTUAL_ROWS_FRACTIONAL, true)).toBe("yes");
+    });
+  });
+
+  it("returns 'no' for false", () => {
+    expect(formatProp(Property.ACTUAL_ROWS_FRACTIONAL, false)).toBe("no");
+  });
+
+  describe("blockAsBytes", () => {
+    it("formats blocks", () => {
+        expect(formatProp(Property.SHARED_HIT_BLOCKS, 1234)).toBe("1,234<br><small>9.6 MB</small>");
+      });
+    });
+
+  describe("no formatter provided", () => {
+    it("escapes ", () => {
+        expect(formatProp(Property.FILTER, "something")).toBe("something");
+      });
+    });
+});

src/__tests__/filters-output-escape.spec.ts

@@ -1,10 +1,10 @@
 import { describe, expect, test } from "vitest"
-import { formatNodeProp } from "@/filters"
-import { NodeProp } from "@/enums"
+import { formatProp } from "@/filters"
+import { Property } from "@/enums"
 
 describe("formatNodeProp", () => {
   test("escapes HTML in Output list items", () => {
-    const html = formatNodeProp(NodeProp.OUTPUT, [
+    const html = formatProp(Property.OUTPUT, [
       "<img src=x onerror=alert(1)>",
     ])
     expect(html).toContain("&lt;img src=x onerror=alert(1)&gt;")

src/components/BuffersDetail.vue

@@ -1,53 +1,53 @@
 <script lang="ts" setup>
 import { formatBlocks } from "@/filters"
 import type { ISerialization, Node } from "@/interfaces"
-import { BuffersProp, NodeProp } from "@/enums"
+import { Property } from "@/enums"
 
 interface Props {
   object: Node | ISerialization
 }
 const props = defineProps<Props>()
 
 const sharedHitBlocks =
-  NodeProp.EXCLUSIVE_SHARED_HIT_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_SHARED_HIT_BLOCKS]
-    : props.object[BuffersProp.SHARED_HIT_BLOCKS]
+  Property.EXCLUSIVE_SHARED_HIT_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_SHARED_HIT_BLOCKS]
+    : props.object[Property.SHARED_HIT_BLOCKS]
 const sharedReadBlocks =
-  NodeProp.EXCLUSIVE_SHARED_READ_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_SHARED_READ_BLOCKS]
-    : props.object[BuffersProp.SHARED_READ_BLOCKS]
+  Property.EXCLUSIVE_SHARED_READ_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_SHARED_READ_BLOCKS]
+    : props.object[Property.SHARED_READ_BLOCKS]
 const sharedDirtiedBlocks =
-  NodeProp.EXCLUSIVE_SHARED_DIRTIED_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_SHARED_DIRTIED_BLOCKS]
-    : props.object[BuffersProp.SHARED_DIRTIED_BLOCKS]
+  Property.EXCLUSIVE_SHARED_DIRTIED_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_SHARED_DIRTIED_BLOCKS]
+    : props.object[Property.SHARED_DIRTIED_BLOCKS]
 const sharedWrittenBlocks =
-  NodeProp.EXCLUSIVE_SHARED_WRITTEN_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_SHARED_WRITTEN_BLOCKS]
-    : props.object[BuffersProp.SHARED_WRITTEN_BLOCKS]
+  Property.EXCLUSIVE_SHARED_WRITTEN_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_SHARED_WRITTEN_BLOCKS]
+    : props.object[Property.SHARED_WRITTEN_BLOCKS]
 const localHitBlocks =
-  NodeProp.EXCLUSIVE_LOCAL_HIT_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_LOCAL_HIT_BLOCKS]
-    : props.object[BuffersProp.LOCAL_HIT_BLOCKS]
+  Property.EXCLUSIVE_LOCAL_HIT_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_LOCAL_HIT_BLOCKS]
+    : props.object[Property.LOCAL_HIT_BLOCKS]
 const localReadBlocks =
-  NodeProp.EXCLUSIVE_LOCAL_READ_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_LOCAL_READ_BLOCKS]
-    : props.object[BuffersProp.LOCAL_READ_BLOCKS]
+  Property.EXCLUSIVE_LOCAL_READ_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_LOCAL_READ_BLOCKS]
+    : props.object[Property.LOCAL_READ_BLOCKS]
 const localDirtiedBlocks =
-  NodeProp.EXCLUSIVE_LOCAL_DIRTIED_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_LOCAL_DIRTIED_BLOCKS]
-    : props.object[BuffersProp.LOCAL_DIRTIED_BLOCKS]
+  Property.EXCLUSIVE_LOCAL_DIRTIED_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_LOCAL_DIRTIED_BLOCKS]
+    : props.object[Property.LOCAL_DIRTIED_BLOCKS]
 const localWrittenBlocks =
-  NodeProp.EXCLUSIVE_LOCAL_WRITTEN_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_LOCAL_WRITTEN_BLOCKS]
-    : props.object[BuffersProp.LOCAL_WRITTEN_BLOCKS]
+  Property.EXCLUSIVE_LOCAL_WRITTEN_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_LOCAL_WRITTEN_BLOCKS]
+    : props.object[Property.LOCAL_WRITTEN_BLOCKS]
 const tempReadBlocks =
-  NodeProp.EXCLUSIVE_TEMP_READ_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_TEMP_READ_BLOCKS]
-    : props.object[BuffersProp.TEMP_READ_BLOCKS]
+  Property.EXCLUSIVE_TEMP_READ_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_TEMP_READ_BLOCKS]
+    : props.object[Property.TEMP_READ_BLOCKS]
 const tempWrittenBlocks =
-  NodeProp.EXCLUSIVE_TEMP_WRITTEN_BLOCKS in props.object
-    ? props.object[NodeProp.EXCLUSIVE_TEMP_WRITTEN_BLOCKS]
-    : props.object[BuffersProp.TEMP_WRITTEN_BLOCKS]
+  Property.EXCLUSIVE_TEMP_WRITTEN_BLOCKS in props.object
+    ? props.object[Property.EXCLUSIVE_TEMP_WRITTEN_BLOCKS]
+    : props.object[Property.TEMP_WRITTEN_BLOCKS]
 </script>
 <template>
   <table class="table table-sm">

src/components/Diagram.vue

@@ -9,7 +9,7 @@ import {
   ref,
   watch,
 } from "vue"
-import { BufferLocation, NodeProp, Metric } from "../enums"
+import { BufferLocation, Property, Metric } from "../enums"
 import {
   getHelpMessage,
   scrollChildIntoParentView,
@@ -63,7 +63,7 @@ const dataAvailable = computed((): boolean => {
 })
 
 function isCTE(node: Node): boolean {
-  return _.startsWith(node[NodeProp.SUBPLAN_NAME], "CTE")
+  return _.startsWith(node[Property.SUBPLAN_NAME], "CTE")
 }
 
 function scrollTo(el: Element) {
@@ -219,7 +219,7 @@ provide("scrollTo", scrollTo)
             <th colspan="3" class="subplan">Main Query Plan</th>
           </tr>
           <template v-for="row in flat" :key="row">
-            <tr v-if="row.node[NodeProp.SUBPLAN_NAME]">
+            <tr v-if="row.node[Property.SUBPLAN_NAME]">
               <td></td>
               <td
                 :class="{ 'fw-bold': isCTE(row.node) }"
@@ -231,7 +231,7 @@ provide("scrollTo", scrollTo)
                   href=""
                   @click.prevent="selectNode(row.node.nodeId, true)"
                 >
-                  {{ row.node[NodeProp.SUBPLAN_NAME] }}
+                  {{ row.node[Property.SUBPLAN_NAME] }}
                 </a>
               </td>
             </tr>