From 3f286a85df99e1ccd06693945a5305403df011f5 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Tue, 3 Dec 2024 16:46:33 +0800
Subject: [PATCH] fix: address comments

---
 .../tracing/sandbox/pages/TraceViewerPage.vue | 10 ++++-----
 .../tracing/sandbox/pages/WaterfallPage.vue   |  6 ++---
 .../components/trace-viewer/TraceViewer.vue   |  8 +++----
 .../components/waterfall/WaterfallView.vue    | 22 +++++++------------
 packages/core/tracing/src/types/index.ts      |  1 +
 packages/core/tracing/src/types/utils.ts      |  8 +++++++
 6 files changed, 28 insertions(+), 27 deletions(-)
 create mode 100644 packages/core/tracing/src/types/utils.ts

diff --git a/packages/core/tracing/sandbox/pages/TraceViewerPage.vue b/packages/core/tracing/sandbox/pages/TraceViewerPage.vue
index 1051b91842..68f28054fb 100644
--- a/packages/core/tracing/sandbox/pages/TraceViewerPage.vue
+++ b/packages/core/tracing/sandbox/pages/TraceViewerPage.vue
@@ -19,7 +19,7 @@
     @close="slideoutVisible = false"
   >
     <template #title>
-      <template v-if="skeleton">
+      <template v-if="showSkeleton">
         <KSkeletonBox
           height="2"
           width="50"
@@ -39,7 +39,7 @@
     <TraceViewer
       :config="config"
       :root-span="spanRoots[0]"
-      :skeleton="skeleton"
+      :show-skeleton="showSkeleton"
       :url="url"
     />
   </KSlideout>
@@ -49,7 +49,7 @@
     title="Controls"
   >
     <KInputSwitch
-      v-model="skeleton"
+      v-model="showSkeleton"
       label="Skeleton"
     />
   </KCard>
@@ -65,7 +65,7 @@ const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
 
 const spanRoots = computed(() => buildSpanTrees(rawSpans))
 // const spanRoots = computed(() => buildSpanTrees(mergeSpansInTraceBatches(traceBatches)))
-const skeleton = ref(false)
+const showSkeleton = ref(false)
 const slideoutVisible = ref(false)
 
 const config: TraceViewerConfig = {
@@ -117,9 +117,7 @@ const url = `https://example.com${path}`
     }
   }
 }
-</style>
 
-<style lang="scss" scoped>
 .controls {
   z-index: 10000;
   bottom: 16px;
diff --git a/packages/core/tracing/sandbox/pages/WaterfallPage.vue b/packages/core/tracing/sandbox/pages/WaterfallPage.vue
index ebd982b800..56d8e2dcb9 100644
--- a/packages/core/tracing/sandbox/pages/WaterfallPage.vue
+++ b/packages/core/tracing/sandbox/pages/WaterfallPage.vue
@@ -4,7 +4,7 @@
     title="Controls"
   >
     <KInputSwitch
-      v-model="skeleton"
+      v-model="showSkeleton"
       label="Skeleton"
     />
   </KCard>
@@ -13,7 +13,7 @@
     v-for="(root, i) in spanRoots"
     :key="i"
     :root-span="root"
-    :skeleton="skeleton"
+    :show-skeleton="showSkeleton"
   />
 </template>
 
@@ -22,7 +22,7 @@ import { computed, ref } from 'vue'
 import { buildSpanTrees, WaterfallView } from '../../src'
 import rawSpans from '../fixtures/spans.json'
 
-const skeleton = ref(false)
+const showSkeleton = ref(false)
 const spanRoots = computed(() => buildSpanTrees(rawSpans))
 </script>
 
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
index 273830a9a6..dd9f7e272f 100644
--- a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
+++ b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
@@ -8,7 +8,7 @@
       min-size="20"
     >
       <div class="above-waterfall">
-        <template v-if="skeleton">
+        <template v-if="showSkeleton">
           <KSkeletonBox
             height="2"
             width="25"
@@ -43,7 +43,7 @@
       <div class="waterfall-wrapper">
         <WaterfallView
           :root-span="props.rootSpan"
-          :skeleton="props.skeleton"
+          :show-skeleton="props.showSkeleton"
           @update:selected-span="handleUpdateSelectedSpan"
         />
       </div>
@@ -53,7 +53,7 @@
       class="detail-pane"
       size="50"
     >
-      <template v-if="skeleton">
+      <template v-if="showSkeleton">
         <KSkeleton
           :table-columns="2"
           :table-rows="8"
@@ -107,7 +107,7 @@ const props = defineProps<{
   config: TraceViewerConfig
   rootSpan?: SpanNode
   url?: string
-  skeleton?: boolean
+  showSkeleton?: boolean
 }>()
 
 // Provide the config to all children components
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallView.vue b/packages/core/tracing/src/components/waterfall/WaterfallView.vue
index b519a3c961..a21ec76404 100644
--- a/packages/core/tracing/src/components/waterfall/WaterfallView.vue
+++ b/packages/core/tracing/src/components/waterfall/WaterfallView.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="skeleton"
+    v-if="showSkeleton"
     class="waterfall-skeleton"
   >
     <KSkeleton
@@ -87,11 +87,11 @@
 // RESERVED: Only used when zooming is enabled
 // import { useWheel } from '@vueuse/gesture'
 import { AddIcon, RemoveIcon } from '@kong/icons'
-import { provide, reactive, ref, useTemplateRef, watch, type PropType, type Ref } from 'vue'
+import { computed, provide, reactive, ref, toRef, useTemplateRef, watch, type PropType, type Ref } from 'vue'
 import composables from '../../composables'
 import { WATERFALL_ROW_COLUMN_GAP, WATERFALL_ROW_LABEL_WIDTH, WATERFALL_ROW_PADDING_X, WATERFALL_SPAN_BAR_FADING_WIDTH } from '../../constants'
 import { WATERFALL_CONFIG, WATERFALL_ROWS_STATE, WaterfallRowsState } from '../../constants/waterfall'
-import { type SpanNode, type WaterfallConfig } from '../../types'
+import { type MarkReactiveInputRefs, type SpanNode, type WaterfallConfig } from '../../types'
 import WaterfallScale from './WaterfallScale.vue'
 import WaterfallSpanRow from './WaterfallSpanRow.vue'
 
@@ -107,7 +107,7 @@ const props = defineProps({
     type: Object as PropType<SpanNode>,
     default: () => undefined,
   },
-  skeleton: {
+  showSkeleton: {
     type: Boolean,
     default: false,
   },
@@ -124,10 +124,10 @@ const spanBarMeasurementRef = useTemplateRef<HTMLElement>('spanBarMeasurement')
 const interaction = ref<'scroll' | 'zoom'>('scroll')
 const rowsAreaGuideX = ref<number | undefined>(undefined)
 
-const config = reactive<WaterfallConfig>({
-  ticks: props.ticks,
-  totalDurationNano: props.rootSpan?.durationNano ?? 0,
-  startTimeUnixNano: props.rootSpan ? BigInt(props.rootSpan.span.startTimeUnixNano) : 0n,
+const config = reactive<MarkReactiveInputRefs<WaterfallConfig, 'ticks' | 'totalDurationNano' | 'startTimeUnixNano'>>({
+  ticks: toRef(props, 'ticks'), // This will be unwrapped
+  totalDurationNano: computed(() => props.rootSpan?.durationNano ?? 0), // This will be unwrapped
+  startTimeUnixNano: computed(() => props.rootSpan ? BigInt(props.rootSpan.span.startTimeUnixNano) : 0n), // This will be unwrapped
   zoom: 1,
   viewportShift: 0,
   viewport: { left: 0, right: 0 },
@@ -156,14 +156,8 @@ const handleRowsAreaLeave = () => {
   rowsAreaGuideX.value = undefined
 }
 
-watch(() => props.ticks, (ticks) => {
-  config.ticks = ticks
-}, { immediate: true })
-
 watch(() => props.rootSpan, (rootSpan) => {
   config.selectedSpan = rootSpan
-  config.totalDurationNano = rootSpan?.durationNano ?? 0,
-  config.startTimeUnixNano = rootSpan ? BigInt(rootSpan.span.startTimeUnixNano) : 0n
 }, { immediate: true })
 
 watch(() => config.selectedSpan, (span) => {
diff --git a/packages/core/tracing/src/types/index.ts b/packages/core/tracing/src/types/index.ts
index e857acfe64..be99b5002e 100644
--- a/packages/core/tracing/src/types/index.ts
+++ b/packages/core/tracing/src/types/index.ts
@@ -2,4 +2,5 @@ export * from './otlp'
 export * from './spans'
 export * from './trace-viewer'
 export * from './trace'
+export * from './utils'
 export * from './waterfall'
diff --git a/packages/core/tracing/src/types/utils.ts b/packages/core/tracing/src/types/utils.ts
new file mode 100644
index 0000000000..d80a51944b
--- /dev/null
+++ b/packages/core/tracing/src/types/utils.ts
@@ -0,0 +1,8 @@
+import type { Ref } from 'vue'
+
+/**
+ * MarkReactiveInputRefs is a utility type that selectively wraps some properties in U of T with
+ * `Ref<...>` to make `reactive(...)` accept refs for those properties, without modifying the original
+ * shape.
+ */
+export type MarkReactiveInputRefs<T, U extends keyof T> = { [P in U]: Ref<T[P]> } & Omit<T, U>