From 9677bfea43cbce2d7e4dfeee2100ec40a33edce6 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Mon, 12 Aug 2024 00:18:03 +0800
Subject: [PATCH 01/18] feat: waterfall

---
 src/client/pages/index.vue           |   3 +
 src/client/pages/index/waterfall.vue | 148 +++++++++++++++++++++++++++
 src/node/index.ts                    |  14 +++
 src/types.ts                         |  23 +++--
 4 files changed, 181 insertions(+), 7 deletions(-)
 create mode 100644 src/client/pages/index/waterfall.vue

diff --git a/src/client/pages/index.vue b/src/client/pages/index.vue
index 01f759c..75732e3 100644
--- a/src/client/pages/index.vue
+++ b/src/client/pages/index.vue
@@ -49,6 +49,9 @@ onMounted(() => {
     <RouterLink text-lg icon-btn to="/metric" title="Metrics">
       <div i-carbon-meter />
     </RouterLink>
+    <RouterLink text-lg icon-btn to="/waterfall" title="Metrics">
+      <div i-carbon-chart-waterfall />
+    </RouterLink>
   </NavBar>
   <Container of-auto>
     <KeepAlive>
diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
new file mode 100644
index 0000000..201a4e9
--- /dev/null
+++ b/src/client/pages/index/waterfall.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { inspectSSR, onRefetch, root } from '../../logic'
+import { getHot } from '../../logic/hot'
+import { rpc } from '../../logic/rpc'
+
+const data = ref(await rpc.getWaterfallInfo(inspectSSR.value))
+const durationData = computed(() => Object.fromEntries(Object.entries(data.value).map(
+  ([id, transforms]) => [id, {
+    start: Math.min(...transforms.map(i => i.start), ...transforms.map(i => i.end)),
+    end: Math.max(...transforms.map(i => i.start), ...transforms.map(i => i.end)),
+  }],
+)))
+const startTime = computed(() => Math.min(...Object.values(durationData.value).map(i => i.start)))
+const endTime = computed(() => Math.max(...Object.values(durationData.value).map(i => i.end)))
+const scale = ref(0.3)
+const tickFreq = computed(() => 1000)
+const tickNum = computed(() => Math.ceil((endTime.value - startTime.value) / tickFreq.value) + 1)
+
+const searchText = ref('')
+const searchFn = computed(() => {
+  const text = searchText.value.trim()
+  if (text === '') {
+    return () => true
+  }
+  const regex = new RegExp(text, 'i')
+  return (name: string) => regex.test(name)
+})
+
+const waterfallData = computed(() => {
+  const result: {
+    isGroup?: boolean
+    fade: boolean
+    start: number
+    end: number
+    id: string
+    name: string
+  }[][] = []
+  const rowsEnd: number[] = []
+  for (const [id, transforms] of Object.entries(data.value)) {
+    const sorted = [...transforms]
+      .sort((a, b) => a.start - b.start)
+      .filter(({ start, end }) => start + 2 < end)
+    if (sorted.length === 0) {
+      continue
+    }
+    const start = sorted[0].start
+    const end = sorted[sorted.length - 1].end
+    const spans = sorted.map(v => ({ ...v, id, fade: !searchFn.value(v.name) && !searchFn.value(id) }))
+    const groupSpan = {
+      isGroup: true,
+      fade: spans.every(i => i.fade),
+      start,
+      end,
+      id,
+      name: 'group',
+    }
+    spans.push(groupSpan)
+    const row = rowsEnd.findIndex((rowEnd, i) => {
+      if (rowEnd <= start) {
+        rowsEnd[i] = end
+        result[i].push(...spans)
+        return true
+      }
+      return false
+    })
+    if (row === -1) {
+      result.push(spans)
+      rowsEnd.push(end)
+    }
+  }
+  return result
+})
+
+async function refetch() {
+  data.value = await rpc.getWaterfallInfo(inspectSSR.value)
+}
+
+onRefetch.on(async () => {
+  await refetch()
+})
+
+watch(inspectSSR, refetch)
+
+getHot().then((hot) => {
+  if (hot) {
+    hot.on('vite-plugin-inspect:update', refetch)
+  }
+})
+
+function getPositionStyle(start: number, end: number) {
+  return {
+    left: `${(start - startTime.value) * scale.value}px`,
+    width: `${(end - start) * scale.value}px`,
+  }
+}
+</script>
+
+<template>
+  <NavBar>
+    <RouterLink class="my-auto icon-btn !outline-none" to="/">
+      <div i-carbon-arrow-left />
+    </RouterLink>
+    <div my-auto text-sm font-mono>
+      Waterfall
+    </div>
+    <input v-model="searchText" placeholder="Search here..." class="w-full px-4 py-2 text-xs">
+
+    <button text-lg icon-btn title="Inspect SSR" @click="inspectSSR = !inspectSSR">
+      <div i-carbon-cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
+    </button>
+    <button text-lg icon-btn title="Zoom in" @click="scale += 0.1">
+      <div i-carbon-zoom-in />
+    </button>
+    <button text-lg icon-btn title="Zoom in" :disabled="scale <= 0.11" @click="scale -= 0.1">
+      <div i-carbon-zoom-out />
+    </button>
+    <div flex-auto />
+  </NavBar>
+  <Container v-if="data" of-auto>
+    <div relative m-4 w-full flex flex-col gap-1 pb-2 pt-8>
+      <div absolute top-0 h-full flex>
+        <div w-10 overflow-hidden text-nowrap text-xs />
+        <div relative flex-grow>
+          <div v-for="i in tickNum" :key="i" absolute h-full bg-red-200 bg-op-40 :style="{ left: `${tickFreq * (i - 1) * scale}px`, width: '1px' }">
+            <span absolute top--1 w-max> {{ i - 1 }} s </span>
+          </div>
+        </div>
+      </div>
+      <div v-for="spans, i in waterfallData" :key="i" h-5 flex>
+        <div w-10 overflow-hidden text-nowrap text-xs>
+          {{ i }}
+        </div>
+        <div relative flex-grow>
+          <div v-for="{ isGroup, fade, start, end, id, name }, j in spans" :key="j" :title="`${name} - ${id}`" :class="(isGroup ? 'outline-orange-200 outline-offset-1 pointer-events-none' : 'outline-blue-200 outline-offset--1 bg-gray-500 bg-op-80') + (fade ? ' op-20 bg-op-20' : '')" :style="getPositionStyle(start, end)" absolute h-full flex items-center overflow-hidden text-nowrap outline-1 outline-solid>
+            <template v-if="!isGroup">
+              {{ name }} -
+              <template v-if="id.startsWith(root)">
+                <span class="op50">.</span>
+                <span>{{ id.slice(root.length) }}</span>
+              </template>
+              <span v-else>{{ id }}</span>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Container>
+</template>
diff --git a/src/node/index.ts b/src/node/index.ts
index e673cb8..113b171 100644
--- a/src/node/index.ts
+++ b/src/node/index.ts
@@ -4,6 +4,7 @@ import sirv from 'sirv'
 import { createRPCServer } from 'vite-dev-rpc'
 import c from 'picocolors'
 import { debounce } from 'perfect-debounce'
+import { objectMap } from '@antfu/utils'
 import type { HMRData, RPCFunctions } from '../types'
 import { DIR_CLIENT } from '../dir'
 import type { Options } from './options'
@@ -125,6 +126,7 @@ export default function PluginInspect(options: Options = {}): Plugin {
     const rpcFunctions: RPCFunctions = {
       list: () => ctx.getList(server),
       getIdInfo,
+      getWaterfallInfo,
       getPluginMetrics: (ssr = false) => ctx.getPluginMetrics(ssr),
       getServerMetrics,
       resolveId: (id: string, ssr = false) => ctx.resolveId(id, ssr),
@@ -163,6 +165,18 @@ export default function PluginInspect(options: Options = {}): Plugin {
       }
     }
 
+    function getWaterfallInfo(ssr = false) {
+      const recorder = ctx.getRecorder(ssr)
+      return objectMap(recorder.transform, (id, transforms) => [
+        id,
+        transforms.map(transform => ({
+          name: transform.name,
+          start: transform.start,
+          end: transform.end,
+        })),
+      ])
+    }
+
     function clearId(_id: string, ssr = false) {
       const id = ctx.resolveId(_id)
       if (id) {
diff --git a/src/types.ts b/src/types.ts
index 52d3748..d06962b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -48,6 +48,14 @@ export interface ModuleTransformInfo {
   transforms: TransformInfo[]
 }
 
+export interface WaterfallInfo {
+  [id: string]: {
+    name: string
+    start: number
+    end: number
+  }[]
+}
+
 export interface PluginMetricInfo {
   name: string
   enforce?: string
@@ -62,13 +70,14 @@ export interface PluginMetricInfo {
 }
 
 export interface RPCFunctions {
-  list(): Awaitable<ModulesList>
-  getIdInfo(id: string, ssr: boolean, clear?: boolean): Awaitable<ModuleTransformInfo>
-  resolveId(id: string, ssr: boolean): Awaitable<string>
-  clear(id: string, ssr: boolean): Awaitable<void>
-  getPluginMetrics(ssr: boolean): Awaitable<PluginMetricInfo[]>
-  getServerMetrics(): Awaitable<Record<string, Record<string, { name: string, self: number, total: number }[]>>>
-  moduleUpdated(): void
+  list: () => Awaitable<ModulesList>
+  getIdInfo: (id: string, ssr: boolean, clear?: boolean) => Awaitable<ModuleTransformInfo>
+  getWaterfallInfo: (ssr: boolean) => Awaitable<WaterfallInfo>
+  resolveId: (id: string, ssr: boolean) => Awaitable<string>
+  clear: (id: string, ssr: boolean) => Awaitable<void>
+  getPluginMetrics: (ssr: boolean) => Awaitable<PluginMetricInfo[]>
+  getServerMetrics: () => Awaitable<Record<string, Record<string, { name: string, self: number, total: number }[]>>>
+  moduleUpdated: () => void
 }
 
 export interface HMRData {

From 64bcf746e2eca707f159b487fa6b63fdd4066fb8 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Mon, 12 Aug 2024 15:28:48 +0800
Subject: [PATCH 02/18] chore: update

---
 src/client/logic/state.ts            |   1 +
 src/client/pages/index/waterfall.vue | 129 ++++++++++++++++-----------
 src/node/index.ts                    |  50 +++++++++--
 src/types.ts                         |  13 ++-
 4 files changed, 124 insertions(+), 69 deletions(-)

diff --git a/src/client/logic/state.ts b/src/client/logic/state.ts
index 12901f7..5341780 100644
--- a/src/client/logic/state.ts
+++ b/src/client/logic/state.ts
@@ -10,6 +10,7 @@ export const showOneColumn = useStorage('vite-inspect-one-column', false)
 export const showBailout = useStorage('vite-inspect-bailout', false)
 export const listMode = useStorage<'graph' | 'list' | 'detailed'>('vite-inspect-mode', 'detailed')
 export const lineWrapping = useStorage('vite-inspect-line-wrapping', false)
+export const waterfallShowResolveId = useStorage('vite-inspect-waterfall-show-resolve-id', false)
 export const inspectSSR = useStorage('vite-inspect-ssr', false)
 export const metricDisplayHook = useStorage<'transform' | 'resolveId' | 'server'>('vite-inspect-metric-display-hook', 'transform')
 export const sortMode = useStorage<'default' | 'time-asc' | 'time-desc'>('vite-inspect-sort', 'default')
diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 201a4e9..0fbd02e 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -1,20 +1,12 @@
 <script setup lang="ts">
-import { inspectSSR, onRefetch, root } from '../../logic'
+import { range } from '@antfu/utils'
+import { inspectSSR, onRefetch, root, waterfallShowResolveId } from '../../logic'
 import { getHot } from '../../logic/hot'
 import { rpc } from '../../logic/rpc'
 
-const data = ref(await rpc.getWaterfallInfo(inspectSSR.value))
-const durationData = computed(() => Object.fromEntries(Object.entries(data.value).map(
-  ([id, transforms]) => [id, {
-    start: Math.min(...transforms.map(i => i.start), ...transforms.map(i => i.end)),
-    end: Math.max(...transforms.map(i => i.start), ...transforms.map(i => i.end)),
-  }],
-)))
-const startTime = computed(() => Math.min(...Object.values(durationData.value).map(i => i.start)))
-const endTime = computed(() => Math.max(...Object.values(durationData.value).map(i => i.end)))
+const data = shallowRef(await rpc.getWaterfallInfo(inspectSSR.value))
+const startTime = computed(() => Math.min(...Object.values(data.value).map(i => i[0]?.start ?? -1)))
 const scale = ref(0.3)
-const tickFreq = computed(() => 1000)
-const tickNum = computed(() => Math.ceil((endTime.value - startTime.value) / tickFreq.value) + 1)
 
 const searchText = ref('')
 const searchFn = computed(() => {
@@ -26,28 +18,44 @@ const searchFn = computed(() => {
   return (name: string) => regex.test(name)
 })
 
+const container = ref<HTMLElement>()
+const { x: containerScrollX } = useScroll(container)
+const { width: containerWidth } = useElementSize(container)
+const visibleMin = computed(() => (containerScrollX.value - 100) / scale.value)
+const visibleMax = computed(() => (containerScrollX.value + containerWidth.value + 100) / scale.value)
+const tickNum = computed(() => range(Math.floor(visibleMin.value / 1000), Math.ceil(visibleMax.value / 1000) + 1))
+
+interface WaterfallSpan {
+  kind: keyof typeof classNames
+  fade: boolean
+  start: number
+  end: number
+  id: string
+  name: string
+}
+
 const waterfallData = computed(() => {
-  const result: {
-    isGroup?: boolean
-    fade: boolean
-    start: number
-    end: number
-    id: string
-    name: string
-  }[][] = []
+  const result: WaterfallSpan[][] = []
   const rowsEnd: number[] = []
-  for (const [id, transforms] of Object.entries(data.value)) {
-    const sorted = [...transforms]
-      .sort((a, b) => a.start - b.start)
-      .filter(({ start, end }) => start + 2 < end)
-    if (sorted.length === 0) {
+  for (let [id, steps] of Object.entries(data.value)) {
+    if (!waterfallShowResolveId.value) {
+      steps = steps.filter(i => !i.isResolveId)
+    }
+    if (steps.length === 0) {
       continue
     }
-    const start = sorted[0].start
-    const end = sorted[sorted.length - 1].end
-    const spans = sorted.map(v => ({ ...v, id, fade: !searchFn.value(v.name) && !searchFn.value(id) }))
-    const groupSpan = {
-      isGroup: true,
+    const start = steps[0].start - startTime.value
+    const end = steps[steps.length - 1].end - startTime.value
+    const spans: WaterfallSpan[] = steps.map(v => ({
+      kind: v.isResolveId ? 'resolve' : 'transform',
+      start: v.start - startTime.value,
+      end: v.end - startTime.value,
+      name: v.name,
+      id,
+      fade: !searchFn.value(v.name) && !searchFn.value(id),
+    }))
+    const groupSpan: WaterfallSpan = {
+      kind: 'group',
       fade: spans.every(i => i.fade),
       start,
       end,
@@ -75,10 +83,7 @@ async function refetch() {
   data.value = await rpc.getWaterfallInfo(inspectSSR.value)
 }
 
-onRefetch.on(async () => {
-  await refetch()
-})
-
+onRefetch.on(refetch)
 watch(inspectSSR, refetch)
 
 getHot().then((hot) => {
@@ -89,10 +94,16 @@ getHot().then((hot) => {
 
 function getPositionStyle(start: number, end: number) {
   return {
-    left: `${(start - startTime.value) * scale.value}px`,
-    width: `${(end - start) * scale.value}px`,
+    left: `${start * scale.value}px`,
+    width: `${Math.max((end - start) * scale.value, 1)}px`,
   }
 }
+
+const classNames = {
+  resolve: 'outline-red-200 outline-offset--1 bg-gray-500 bg-op-80 z-1',
+  transform: 'outline-blue-200 outline-offset--1 bg-gray-500 bg-op-80 z-1',
+  group: 'outline-orange-200',
+}
 </script>
 
 <template>
@@ -108,6 +119,9 @@ function getPositionStyle(start: number, end: number) {
     <button text-lg icon-btn title="Inspect SSR" @click="inspectSSR = !inspectSSR">
       <div i-carbon-cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
     </button>
+    <button class="text-lg icon-btn" title="Toggle Diff" @click="waterfallShowResolveId = !waterfallShowResolveId">
+      <div i-carbon-connect-source :class="waterfallShowResolveId ? 'opacity-100' : 'opacity-25'" />
+    </button>
     <button text-lg icon-btn title="Zoom in" @click="scale += 0.1">
       <div i-carbon-zoom-in />
     </button>
@@ -116,31 +130,40 @@ function getPositionStyle(start: number, end: number) {
     </button>
     <div flex-auto />
   </NavBar>
-  <Container v-if="data" of-auto>
+  <Container ref="container" of-auto>
     <div relative m-4 w-full flex flex-col gap-1 pb-2 pt-8>
-      <div absolute top-0 h-full flex>
-        <div w-10 overflow-hidden text-nowrap text-xs />
-        <div relative flex-grow>
-          <div v-for="i in tickNum" :key="i" absolute h-full bg-red-200 bg-op-40 :style="{ left: `${tickFreq * (i - 1) * scale}px`, width: '1px' }">
-            <span absolute top--1 w-max> {{ i - 1 }} s </span>
-          </div>
+      <div absolute left-8 top-0 h-full w-0 of-x-visible>
+        <div v-for="i in tickNum" :key="i" absolute h-full bg-red-200 bg-op-20 :style="{ left: `${1000 * i * scale - 2}px`, width: '2px' }">
+          <span absolute left-1 top--1 w-max op-80>
+            {{ i }}
+            <span op-70>s</span>
+          </span>
         </div>
       </div>
       <div v-for="spans, i in waterfallData" :key="i" h-5 flex>
-        <div w-10 overflow-hidden text-nowrap text-xs>
+        <div w-8 overflow-hidden pr-4 text-right text-nowrap text-xs tabular-nums>
           {{ i }}
         </div>
         <div relative flex-grow>
-          <div v-for="{ isGroup, fade, start, end, id, name }, j in spans" :key="j" :title="`${name} - ${id}`" :class="(isGroup ? 'outline-orange-200 outline-offset-1 pointer-events-none' : 'outline-blue-200 outline-offset--1 bg-gray-500 bg-op-80') + (fade ? ' op-20 bg-op-20' : '')" :style="getPositionStyle(start, end)" absolute h-full flex items-center overflow-hidden text-nowrap outline-1 outline-solid>
-            <template v-if="!isGroup">
-              {{ name }} -
-              <template v-if="id.startsWith(root)">
-                <span class="op50">.</span>
-                <span>{{ id.slice(root.length) }}</span>
+          <template v-for="{ kind, fade, start, end, id, name }, j in spans" :key="j">
+            <div
+              v-if="visibleMin <= end && start <= visibleMax"
+              :title="`${kind === 'group' ? '' : `${kind === 'resolve' ? '(resolve)' : ''} ${name} - `}${id} (${start}+${end - start}ms)`"
+              :class="(classNames[kind]) + (fade ? ' op-20 bg-op-20' : '')"
+              :style="getPositionStyle(start, end)"
+              absolute h-full flex items-center overflow-hidden pl-1 text-nowrap font-mono outline-1 outline-solid
+            >
+              <template v-if="kind !== 'group'">
+                <PluginName :name />
+                <span mx-.5 op-50>-</span>
+                <template v-if="id.startsWith(root)">
+                  <span class="op50">.</span>
+                  <span>{{ id.slice(root.length) }}</span>
+                </template>
+                <span v-else>{{ id }}</span>
               </template>
-              <span v-else>{{ id }}</span>
-            </template>
-          </div>
+            </div>
+          </template>
         </div>
       </div>
     </div>
diff --git a/src/node/index.ts b/src/node/index.ts
index 113b171..439c577 100644
--- a/src/node/index.ts
+++ b/src/node/index.ts
@@ -5,7 +5,7 @@ import { createRPCServer } from 'vite-dev-rpc'
 import c from 'picocolors'
 import { debounce } from 'perfect-debounce'
 import { objectMap } from '@antfu/utils'
-import type { HMRData, RPCFunctions } from '../types'
+import type { HMRData, RPCFunctions, ResolveIdInfo, WaterfallInfo } from '../types'
 import { DIR_CLIENT } from '../dir'
 import type { Options } from './options'
 import { ViteInspectContext } from './context'
@@ -167,14 +167,46 @@ export default function PluginInspect(options: Options = {}): Plugin {
 
     function getWaterfallInfo(ssr = false) {
       const recorder = ctx.getRecorder(ssr)
-      return objectMap(recorder.transform, (id, transforms) => [
-        id,
-        transforms.map(transform => ({
-          name: transform.name,
-          start: transform.start,
-          end: transform.end,
-        })),
-      ])
+      const resolveIdByResult: Record<string, ResolveIdInfo> = {}
+      for (const id in recorder.resolveId) {
+        const info = recorder.resolveId[id][0]
+        resolveIdByResult[info.result] = {
+          ...info,
+          result: id,
+        }
+      }
+      return objectMap(recorder.transform, (id, transforms) => {
+        const result: WaterfallInfo[string] = []
+        let currentId = id
+        while (resolveIdByResult[currentId]) {
+          const info = resolveIdByResult[currentId]
+          result.push({
+            name: info.name,
+            start: info.start,
+            end: info.end,
+            isResolveId: true,
+          })
+          if (currentId === info.result)
+            break
+          currentId = info.result
+        }
+        for (const transform of transforms) {
+          result.push({
+            name: transform.name,
+            start: transform.start,
+            end: transform.end,
+            isResolveId: false,
+          })
+        }
+        result.sort((a, b) => a.start - b.start)
+        const filtered = result.filter(({ start, end }, i) => i === 0 || i === result.length - 1 || start < end)
+        return filtered.length
+          ? [
+              id,
+              filtered,
+            ]
+          : undefined
+      })
     }
 
     function clearId(_id: string, ssr = false) {
diff --git a/src/types.ts b/src/types.ts
index d06962b..7e47a32 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -48,13 +48,12 @@ export interface ModuleTransformInfo {
   transforms: TransformInfo[]
 }
 
-export interface WaterfallInfo {
-  [id: string]: {
-    name: string
-    start: number
-    end: number
-  }[]
-}
+export type WaterfallInfo = Record<string, {
+  name: string
+  start: number
+  end: number
+  isResolveId: boolean
+}[]>
 
 export interface PluginMetricInfo {
   name: string

From 9ef986283b8efeea121708ccc1ed6c3ab2cfaf4a Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Mon, 12 Aug 2024 15:54:03 +0800
Subject: [PATCH 03/18] fix

---
 src/client/components/Container.vue  |  6 +++++-
 src/client/pages/index/waterfall.vue | 21 +++++++++++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/client/components/Container.vue b/src/client/components/Container.vue
index 9a04b5c..1e163c7 100644
--- a/src/client/components/Container.vue
+++ b/src/client/components/Container.vue
@@ -1,5 +1,9 @@
+<script setup lang="ts">
+const emit = defineEmits(['element'])
+</script>
+
 <template>
-  <div class="h-[calc(100vh-55px)]">
+  <div :ref="el => emit('element', el)" class="h-[calc(100vh-55px)]">
     <slot />
   </div>
 </template>
diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 0fbd02e..c449c07 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -5,7 +5,8 @@ import { getHot } from '../../logic/hot'
 import { rpc } from '../../logic/rpc'
 
 const data = shallowRef(await rpc.getWaterfallInfo(inspectSSR.value))
-const startTime = computed(() => Math.min(...Object.values(data.value).map(i => i[0]?.start ?? -1)))
+const startTime = computed(() => Math.min(...Object.values(data.value).map(i => i[0]?.start ?? Infinity)))
+const endTime = computed(() => Math.max(...Object.values(data.value).map(i => i[i.length - 1]?.end ?? -Infinity)) + 1000)
 const scale = ref(0.3)
 
 const searchText = ref('')
@@ -21,9 +22,12 @@ const searchFn = computed(() => {
 const container = ref<HTMLElement>()
 const { x: containerScrollX } = useScroll(container)
 const { width: containerWidth } = useElementSize(container)
-const visibleMin = computed(() => (containerScrollX.value - 100) / scale.value)
-const visibleMax = computed(() => (containerScrollX.value + containerWidth.value + 100) / scale.value)
-const tickNum = computed(() => range(Math.floor(visibleMin.value / 1000), Math.ceil(visibleMax.value / 1000) + 1))
+const visibleMin = computed(() => (containerScrollX.value - 500) / scale.value)
+const visibleMax = computed(() => (containerScrollX.value + containerWidth.value + 500) / scale.value)
+const tickNum = computed(() => range(
+  Math.floor(Math.max(0, visibleMin.value) / 1000),
+  Math.ceil(Math.min(endTime.value - startTime.value, visibleMax.value) / 1000),
+))
 
 interface WaterfallSpan {
   kind: keyof typeof classNames
@@ -104,6 +108,10 @@ const classNames = {
   transform: 'outline-blue-200 outline-offset--1 bg-gray-500 bg-op-80 z-1',
   group: 'outline-orange-200',
 }
+
+watch(scale, (newScale, oldScale) => {
+  containerScrollX.value *= newScale / oldScale
+})
 </script>
 
 <template>
@@ -119,7 +127,7 @@ const classNames = {
     <button text-lg icon-btn title="Inspect SSR" @click="inspectSSR = !inspectSSR">
       <div i-carbon-cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
     </button>
-    <button class="text-lg icon-btn" title="Toggle Diff" @click="waterfallShowResolveId = !waterfallShowResolveId">
+    <button class="text-lg icon-btn" title="Show resolveId" @click="waterfallShowResolveId = !waterfallShowResolveId">
       <div i-carbon-connect-source :class="waterfallShowResolveId ? 'opacity-100' : 'opacity-25'" />
     </button>
     <button text-lg icon-btn title="Zoom in" @click="scale += 0.1">
@@ -130,7 +138,7 @@ const classNames = {
     </button>
     <div flex-auto />
   </NavBar>
-  <Container ref="container" of-auto>
+  <Container of-auto @element="el => container = el">
     <div relative m-4 w-full flex flex-col gap-1 pb-2 pt-8>
       <div absolute left-8 top-0 h-full w-0 of-x-visible>
         <div v-for="i in tickNum" :key="i" absolute h-full bg-red-200 bg-op-20 :style="{ left: `${1000 * i * scale - 2}px`, width: '2px' }">
@@ -144,6 +152,7 @@ const classNames = {
         <div w-8 overflow-hidden pr-4 text-right text-nowrap text-xs tabular-nums>
           {{ i }}
         </div>
+        <div absolute h-full :style="getPositionStyle(0, endTime - startTime)" />
         <div relative flex-grow>
           <template v-for="{ kind, fade, start, end, id, name }, j in spans" :key="j">
             <div

From 0680408871a88ee9c52d7a9d0488f419f0af1c40 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Mon, 12 Aug 2024 15:54:25 +0800
Subject: [PATCH 04/18] fix

---
 src/client/pages/index/waterfall.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index c449c07..ca2e150 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -122,7 +122,7 @@ watch(scale, (newScale, oldScale) => {
     <div my-auto text-sm font-mono>
       Waterfall
     </div>
-    <input v-model="searchText" placeholder="Search here..." class="w-full px-4 py-2 text-xs">
+    <input v-model="searchText" placeholder="Search..." class="w-full px-4 py-2 text-xs">
 
     <button text-lg icon-btn title="Inspect SSR" @click="inspectSSR = !inspectSSR">
       <div i-carbon-cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />

From 4e70c6e7aece1fbaae9e81f9325be72f65115ac3 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Mon, 12 Aug 2024 15:54:56 +0800
Subject: [PATCH 05/18] fix

---
 src/client/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/pages/index.vue b/src/client/pages/index.vue
index 75732e3..46b98ae 100644
--- a/src/client/pages/index.vue
+++ b/src/client/pages/index.vue
@@ -49,7 +49,7 @@ onMounted(() => {
     <RouterLink text-lg icon-btn to="/metric" title="Metrics">
       <div i-carbon-meter />
     </RouterLink>
-    <RouterLink text-lg icon-btn to="/waterfall" title="Metrics">
+    <RouterLink text-lg icon-btn to="/waterfall" title="Waterfall">
       <div i-carbon-chart-waterfall />
     </RouterLink>
   </NavBar>

From 7a6fc29ec6b407da83137fc731b34c65a4af7b41 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Mon, 12 Aug 2024 15:55:22 +0800
Subject: [PATCH 06/18] update

---
 src/client/logic/state.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/logic/state.ts b/src/client/logic/state.ts
index 5341780..4d23e6a 100644
--- a/src/client/logic/state.ts
+++ b/src/client/logic/state.ts
@@ -10,7 +10,7 @@ export const showOneColumn = useStorage('vite-inspect-one-column', false)
 export const showBailout = useStorage('vite-inspect-bailout', false)
 export const listMode = useStorage<'graph' | 'list' | 'detailed'>('vite-inspect-mode', 'detailed')
 export const lineWrapping = useStorage('vite-inspect-line-wrapping', false)
-export const waterfallShowResolveId = useStorage('vite-inspect-waterfall-show-resolve-id', false)
+export const waterfallShowResolveId = useStorage('vite-inspect-waterfall-show-resolve-id', true)
 export const inspectSSR = useStorage('vite-inspect-ssr', false)
 export const metricDisplayHook = useStorage<'transform' | 'resolveId' | 'server'>('vite-inspect-metric-display-hook', 'transform')
 export const sortMode = useStorage<'default' | 'time-asc' | 'time-desc'>('vite-inspect-sort', 'default')

From ae7f8e1fe01db8d5ab3ce5963da3f823b6d040d8 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Mon, 12 Aug 2024 15:59:04 +0800
Subject: [PATCH 07/18] fix light mode

---
 src/client/pages/index/waterfall.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index ca2e150..231fa49 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -104,9 +104,9 @@ function getPositionStyle(start: number, end: number) {
 }
 
 const classNames = {
-  resolve: 'outline-red-200 outline-offset--1 bg-gray-500 bg-op-80 z-1',
-  transform: 'outline-blue-200 outline-offset--1 bg-gray-500 bg-op-80 z-1',
-  group: 'outline-orange-200',
+  resolve: 'outline-red-200 outline-offset--1 bg-gray-300 dark:bg-gray-500 bg-op-80 z-1',
+  transform: 'outline-blue-200 outline-offset--1 bg-gray-300 dark:bg-gray-500 bg-op-80 z-1',
+  group: 'outline-orange-700 dark:outline-orange-200',
 }
 
 watch(scale, (newScale, oldScale) => {
@@ -141,7 +141,7 @@ watch(scale, (newScale, oldScale) => {
   <Container of-auto @element="el => container = el">
     <div relative m-4 w-full flex flex-col gap-1 pb-2 pt-8>
       <div absolute left-8 top-0 h-full w-0 of-x-visible>
-        <div v-for="i in tickNum" :key="i" absolute h-full bg-red-200 bg-op-20 :style="{ left: `${1000 * i * scale - 2}px`, width: '2px' }">
+        <div v-for="i in tickNum" :key="i" absolute h-full bg-gray-400 bg-op-30 :style="{ left: `${1000 * i * scale - 2}px`, width: '2px' }">
           <span absolute left-1 top--1 w-max op-80>
             {{ i }}
             <span op-70>s</span>

From 74907a8395f63f0e55293798124e1e60093ca1c6 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Mon, 12 Aug 2024 16:01:36 +0800
Subject: [PATCH 08/18] fix

---
 src/client/pages/index/waterfall.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 231fa49..1ccb26c 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -110,7 +110,7 @@ const classNames = {
 }
 
 watch(scale, (newScale, oldScale) => {
-  containerScrollX.value *= newScale / oldScale
+  containerScrollX.value = (containerScrollX.value - 40) * newScale / oldScale + 40
 })
 </script>
 

From a599931ef951731607dab59821d8a16eae1943ea Mon Sep 17 00:00:00 2001
From: unknown <liang.li@medomino.com>
Date: Sun, 15 Sep 2024 11:55:37 +0800
Subject: [PATCH 09/18] refactor: waterfall via echarts

---
 src/client/pages/index/waterfall.vue | 284 +++++++++++++++++----------
 1 file changed, 176 insertions(+), 108 deletions(-)

diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 1ccb26c..1b5bf4d 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -1,8 +1,31 @@
 <script setup lang="ts">
-import { range } from '@antfu/utils'
-import { inspectSSR, onRefetch, root, waterfallShowResolveId } from '../../logic'
-import { getHot } from '../../logic/hot'
+import { graphic, use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import type { CustomSeriesOption } from 'echarts/charts'
+import { BarChart, CustomChart } from 'echarts/charts'
+import type {
+  SingleAxisComponentOption,
+  TooltipComponentOption,
+} from 'echarts/components'
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams, CustomSeriesRenderItemReturn, TopLevelFormatterParams } from 'echarts/types/dist/shared'
 import { rpc } from '../../logic/rpc'
+import { getHot } from '../../logic/hot'
+import { inspectSSR, onRefetch, waterfallShowResolveId } from '../../logic'
+
+const container = ref<HTMLDivElement | null>()
+
+const dataZoomBar = 100
+const zoomBarOffset = 100
+
+const { height } = useElementSize(container)
 
 const data = shallowRef(await rpc.getWaterfallInfo(inspectSSR.value))
 const startTime = computed(() => Math.min(...Object.values(data.value).map(i => i[0]?.start ?? Infinity)))
@@ -19,67 +42,55 @@ const searchFn = computed(() => {
   return (name: string) => regex.test(name)
 })
 
-const container = ref<HTMLElement>()
-const { x: containerScrollX } = useScroll(container)
-const { width: containerWidth } = useElementSize(container)
-const visibleMin = computed(() => (containerScrollX.value - 500) / scale.value)
-const visibleMax = computed(() => (containerScrollX.value + containerWidth.value + 500) / scale.value)
-const tickNum = computed(() => range(
-  Math.floor(Math.max(0, visibleMin.value) / 1000),
-  Math.ceil(Math.min(endTime.value - startTime.value, visibleMax.value) / 1000),
-))
-
-interface WaterfallSpan {
-  kind: keyof typeof classNames
-  fade: boolean
-  start: number
-  end: number
-  id: string
-  name: string
+const categories = computed(() => {
+  return Object.keys(data.value)
+})
+
+function generatorHashColorByString(str: string) {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  let color = '#'
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xFF
+    color += (`00${value.toString(16)}`).substr(-2)
+  }
+  return color
 }
 
-const waterfallData = computed(() => {
-  const result: WaterfallSpan[][] = []
-  const rowsEnd: number[] = []
-  for (let [id, steps] of Object.entries(data.value)) {
-    if (!waterfallShowResolveId.value) {
-      steps = steps.filter(i => !i.isResolveId)
-    }
-    if (steps.length === 0) {
-      continue
+const types = computed(() => {
+  return Object.keys(data.value).map((id) => {
+    return {
+      name: id,
+      color: generatorHashColorByString(id),
     }
-    const start = steps[0].start - startTime.value
-    const end = steps[steps.length - 1].end - startTime.value
-    const spans: WaterfallSpan[] = steps.map(v => ({
-      kind: v.isResolveId ? 'resolve' : 'transform',
-      start: v.start - startTime.value,
-      end: v.end - startTime.value,
-      name: v.name,
-      id,
-      fade: !searchFn.value(v.name) && !searchFn.value(id),
-    }))
-    const groupSpan: WaterfallSpan = {
-      kind: 'group',
-      fade: spans.every(i => i.fade),
-      start,
-      end,
-      id,
-      name: 'group',
-    }
-    spans.push(groupSpan)
-    const row = rowsEnd.findIndex((rowEnd, i) => {
-      if (rowEnd <= start) {
-        rowsEnd[i] = end
-        result[i].push(...spans)
-        return true
+  })
+})
+
+const waterfallData = computed(() => {
+  const result: any = []
+
+  Object.entries(data.value).forEach(([id, steps], index) => {
+    steps.forEach((s) => {
+      const typeItem = types.value.find(i => i.name === id)
+
+      const duration = s.end - s.start
+
+      if (searchFn.value(id) && searchFn.value(s.name)) {
+        result.push({
+          name: typeItem ? typeItem.name : id,
+          value: [index, s.start, s.end, duration],
+          itemStyle: {
+            normal: {
+              color: typeItem ? typeItem.color : '#000',
+            },
+          },
+        })
       }
-      return false
     })
-    if (row === -1) {
-      result.push(spans)
-      rowsEnd.push(end)
-    }
-  }
+  })
+
   return result
 })
 
@@ -96,21 +107,108 @@ getHot().then((hot) => {
   }
 })
 
-function getPositionStyle(start: number, end: number) {
-  return {
-    left: `${start * scale.value}px`,
-    width: `${Math.max((end - start) * scale.value, 1)}px`,
-  }
-}
+use([
+  CanvasRenderer,
+  BarChart,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+  GridComponent,
+  DataZoomComponent,
+  CustomChart,
+])
+
+function renderItem(params: CustomSeriesRenderItemParams | any, api: CustomSeriesRenderItemAPI): CustomSeriesRenderItemReturn {
+  const categoryIndex = api.value(0)
+  const start = api.coord([api.value(1), categoryIndex])
+  const end = api.coord([api.value(2), categoryIndex])
+  const height = (api.size?.([0, 1]) as number[])[1] * 0.6
+  const rectShape = graphic.clipRectByRect(
+    {
+      x: start[0],
+      y: start[1] - height / 2,
+      width: end[0] - start[0],
+      height,
+    },
+    {
+      x: params.coordSys.x,
+      y: params.coordSys.y,
+      width: params.coordSys.width,
+      height: params.coordSys.height,
+    },
+  )
 
-const classNames = {
-  resolve: 'outline-red-200 outline-offset--1 bg-gray-300 dark:bg-gray-500 bg-op-80 z-1',
-  transform: 'outline-blue-200 outline-offset--1 bg-gray-300 dark:bg-gray-500 bg-op-80 z-1',
-  group: 'outline-orange-700 dark:outline-orange-200',
+  return (
+    rectShape && {
+      type: 'rect',
+      transition: ['shape'],
+      shape: rectShape,
+      style: api.style(),
+    }
+  )
 }
 
-watch(scale, (newScale, oldScale) => {
-  containerScrollX.value = (containerScrollX.value - 40) * newScale / oldScale + 40
+const option = computed(() => ({
+  tooltip: {
+    formatter(params: TopLevelFormatterParams | any) {
+      return `${params.marker + params.name}: ${params.value[3]} ms`
+    },
+
+  } satisfies TooltipComponentOption,
+  title: {
+    text: 'Waterfall',
+    left: 'center',
+  },
+  dataZoom: [
+    {
+      type: 'slider',
+      filterMode: 'weakFilter',
+      showDataShadow: false,
+      top: height.value - dataZoomBar,
+      labelFormatter: '',
+    },
+    {
+      type: 'inside',
+      filterMode: 'weakFilter',
+    },
+  ],
+  grid: {
+    height: height.value - dataZoomBar - zoomBarOffset,
+  },
+  xAxis: {
+    min: startTime.value,
+    max: endTime.value,
+    scale: true,
+    axisLabel: {
+      formatter(val: number) {
+        return `${Math.max(0, val - startTime.value)} ms`
+      },
+    },
+  } satisfies SingleAxisComponentOption,
+  yAxis: {
+    data: categories.value,
+  } satisfies SingleAxisComponentOption,
+  series: [
+    {
+      type: 'custom',
+      renderItem,
+      itemStyle: {
+        opacity: 0.8,
+      },
+      encode: {
+        x: [1, 2],
+        y: 0,
+      },
+      data: waterfallData.value,
+    },
+  ] satisfies CustomSeriesOption[],
+
+}))
+
+const chartStyle = computed(() => {
+  return {
+    height: `${height.value}px`,
+  }
 })
 </script>
 
@@ -138,43 +236,13 @@ watch(scale, (newScale, oldScale) => {
     </button>
     <div flex-auto />
   </NavBar>
-  <Container of-auto @element="el => container = el">
-    <div relative m-4 w-full flex flex-col gap-1 pb-2 pt-8>
-      <div absolute left-8 top-0 h-full w-0 of-x-visible>
-        <div v-for="i in tickNum" :key="i" absolute h-full bg-gray-400 bg-op-30 :style="{ left: `${1000 * i * scale - 2}px`, width: '2px' }">
-          <span absolute left-1 top--1 w-max op-80>
-            {{ i }}
-            <span op-70>s</span>
-          </span>
-        </div>
-      </div>
-      <div v-for="spans, i in waterfallData" :key="i" h-5 flex>
-        <div w-8 overflow-hidden pr-4 text-right text-nowrap text-xs tabular-nums>
-          {{ i }}
-        </div>
-        <div absolute h-full :style="getPositionStyle(0, endTime - startTime)" />
-        <div relative flex-grow>
-          <template v-for="{ kind, fade, start, end, id, name }, j in spans" :key="j">
-            <div
-              v-if="visibleMin <= end && start <= visibleMax"
-              :title="`${kind === 'group' ? '' : `${kind === 'resolve' ? '(resolve)' : ''} ${name} - `}${id} (${start}+${end - start}ms)`"
-              :class="(classNames[kind]) + (fade ? ' op-20 bg-op-20' : '')"
-              :style="getPositionStyle(start, end)"
-              absolute h-full flex items-center overflow-hidden pl-1 text-nowrap font-mono outline-1 outline-solid
-            >
-              <template v-if="kind !== 'group'">
-                <PluginName :name />
-                <span mx-.5 op-50>-</span>
-                <template v-if="id.startsWith(root)">
-                  <span class="op50">.</span>
-                  <span>{{ id.slice(root.length) }}</span>
-                </template>
-                <span v-else>{{ id }}</span>
-              </template>
-            </div>
-          </template>
-        </div>
+
+  <div ref="container" h-full p4>
+    <div v-if="!waterfallData.length" flex="~" h-40 w-full>
+      <div ma italic op50>
+        No data
       </div>
     </div>
-  </Container>
+    <VChart class="w-100%" :style="chartStyle" :option="option" autoresize />
+  </div>
 </template>

From 83d95da5166963307ca1c9249b1000ae3f34ab5d Mon Sep 17 00:00:00 2001
From: liliang18 <liliang18@tal.com>
Date: Wed, 18 Sep 2024 15:13:51 +0800
Subject: [PATCH 10/18] fix: fix time range

---
 src/client/pages/index/waterfall.vue | 51 +++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 1b5bf4d..66b21c1 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -13,9 +13,10 @@ import {
   LegendComponent,
   TitleComponent,
   TooltipComponent,
+  VisualMapComponent,
 } from 'echarts/components'
 import VChart from 'vue-echarts'
-import type { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams, CustomSeriesRenderItemReturn, TopLevelFormatterParams } from 'echarts/types/dist/shared'
+import type { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams, CustomSeriesRenderItemReturn, LegendComponentOption, TopLevelFormatterParams } from 'echarts/types/dist/shared'
 import { rpc } from '../../logic/rpc'
 import { getHot } from '../../logic/hot'
 import { inspectSSR, onRefetch, waterfallShowResolveId } from '../../logic'
@@ -43,9 +44,22 @@ const searchFn = computed(() => {
 })
 
 const categories = computed(() => {
-  return Object.keys(data.value)
+  return Object.keys(data.value).filter(searchFn.value)
 })
 
+// const legendData = computed(() => {
+//   const l = categories.value.map((id) => {
+//     return {
+//       name: id,
+//       icon: 'circle',
+//     }
+//   })
+
+//   console.log(l)
+
+//   return l
+// })
+
 function generatorHashColorByString(str: string) {
   let hash = 0
   for (let i = 0; i < str.length; i++) {
@@ -80,7 +94,7 @@ const waterfallData = computed(() => {
       if (searchFn.value(id) && searchFn.value(s.name)) {
         result.push({
           name: typeItem ? typeItem.name : id,
-          value: [index, s.start, s.end, duration],
+          value: [index, s.start, (s.end - s.start) < 1 ? 1 : s.end, duration],
           itemStyle: {
             normal: {
               color: typeItem ? typeItem.color : '#000',
@@ -91,6 +105,8 @@ const waterfallData = computed(() => {
     })
   })
 
+  // console.log(result)
+
   return result
 })
 
@@ -108,6 +124,7 @@ getHot().then((hot) => {
 })
 
 use([
+  VisualMapComponent,
   CanvasRenderer,
   BarChart,
   TooltipComponent,
@@ -151,15 +168,34 @@ function renderItem(params: CustomSeriesRenderItemParams | any, api: CustomSerie
 const option = computed(() => ({
   tooltip: {
     formatter(params: TopLevelFormatterParams | any) {
-      return `${params.marker + params.name}: ${params.value[3]} ms`
+      return `${params.marker + params.name}: ${params.value[3] <= 1 ? '<1' : params.value[3]}ms}`
     },
 
   } satisfies TooltipComponentOption,
+  legendData: {
+    top: 'center',
+    data: ['c'],
+  } satisfies LegendComponentOption,
+
   title: {
     text: 'Waterfall',
+    // left: 'center',
+  },
+  visualMap: {
+    type: 'piecewise',
+    // show: false,
+    orient: 'horizontal',
     left: 'center',
+    bottom: 10,
+    pieces: [
+
+    ],
+    seriesIndex: 1,
+    dimension: 1,
   },
   dataZoom: [
+    // 最多支持放大到1ms
+
     {
       type: 'slider',
       filterMode: 'weakFilter',
@@ -178,10 +214,14 @@ const option = computed(() => ({
   xAxis: {
     min: startTime.value,
     max: endTime.value,
+    // type: 'value',
+
     scale: true,
     axisLabel: {
       formatter(val: number) {
-        return `${Math.max(0, val - startTime.value)} ms`
+        // console.log(val, startTime.value, val - startTime.value, Math.max(0, val - startTime.value))
+
+        return `${Math.max(0, val - startTime.value).toFixed(2)} ms`
       },
     },
   } satisfies SingleAxisComponentOption,
@@ -191,6 +231,7 @@ const option = computed(() => ({
   series: [
     {
       type: 'custom',
+      name: 'c',
       renderItem,
       itemStyle: {
         opacity: 0.8,

From aa16759ec5d658e62f513d41f9e62cc9ae18ac7d Mon Sep 17 00:00:00 2001
From: liliang18 <liliang18@tal.com>
Date: Wed, 18 Sep 2024 19:12:29 +0800
Subject: [PATCH 11/18] fix: remove etc btns

---
 src/client/pages/index/waterfall.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 66b21c1..d60efb5 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -31,8 +31,8 @@ const { height } = useElementSize(container)
 const data = shallowRef(await rpc.getWaterfallInfo(inspectSSR.value))
 const startTime = computed(() => Math.min(...Object.values(data.value).map(i => i[0]?.start ?? Infinity)))
 const endTime = computed(() => Math.max(...Object.values(data.value).map(i => i[i.length - 1]?.end ?? -Infinity)) + 1000)
-const scale = ref(0.3)
 
+// const reversed = ref(false)
 const searchText = ref('')
 const searchFn = computed(() => {
   const text = searchText.value.trim()
@@ -219,9 +219,7 @@ const option = computed(() => ({
     scale: true,
     axisLabel: {
       formatter(val: number) {
-        // console.log(val, startTime.value, val - startTime.value, Math.max(0, val - startTime.value))
-
-        return `${Math.max(0, val - startTime.value).toFixed(2)} ms`
+        return `${(val - startTime.value).toFixed(val % 1 ? 2 : 0)} ms`
       },
     },
   } satisfies SingleAxisComponentOption,
@@ -269,12 +267,10 @@ const chartStyle = computed(() => {
     <button class="text-lg icon-btn" title="Show resolveId" @click="waterfallShowResolveId = !waterfallShowResolveId">
       <div i-carbon-connect-source :class="waterfallShowResolveId ? 'opacity-100' : 'opacity-25'" />
     </button>
-    <button text-lg icon-btn title="Zoom in" @click="scale += 0.1">
-      <div i-carbon-zoom-in />
-    </button>
-    <button text-lg icon-btn title="Zoom in" :disabled="scale <= 0.11" @click="scale -= 0.1">
-      <div i-carbon-zoom-out />
-    </button>
+
+    <!-- <button class="text-lg icon-btn" title="Show resolveId" @click="reversed = !reversed">
+      <div i-carbon-arrows-vertical :class="reversed ? 'opacity-100' : 'opacity-25'" />
+    </button> -->
     <div flex-auto />
   </NavBar>
 

From fe940e2c8c3f092b2f2db027937f1ff43627de41 Mon Sep 17 00:00:00 2001
From: liliang18 <liliang18@tal.com>
Date: Thu, 19 Sep 2024 10:59:01 +0800
Subject: [PATCH 12/18] fix: limit waterfall only for dev

---
 src/client/logic/utils.ts  | 3 +++
 src/client/pages/index.vue | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/client/logic/utils.ts b/src/client/logic/utils.ts
index 14728ea..95a47a6 100644
--- a/src/client/logic/utils.ts
+++ b/src/client/logic/utils.ts
@@ -86,3 +86,6 @@ function serializeForSourcemapsVisualizer(code: string, map: string) {
   // Convert the binary string to a base64 string and return it
   return btoa(binary)
 }
+
+export const isDev = import.meta.env.DEV
+export const isBuild = import.meta.env.PROD
diff --git a/src/client/pages/index.vue b/src/client/pages/index.vue
index dbeb101..f45446c 100644
--- a/src/client/pages/index.vue
+++ b/src/client/pages/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { listMode, refetch, searchResults, searchText, sortMode, sortedSearchResults, toggleMode, toggleSort } from '../logic'
+import { isDev, listMode, refetch, searchResults, searchText, sortMode, sortedSearchResults, toggleMode, toggleSort } from '../logic'
 
 const route = useRoute()
 const isRoot = computed(() => route.path === '/')
@@ -49,7 +49,7 @@ onMounted(() => {
     <RouterLink text-lg icon-btn to="/metric" title="Metrics">
       <div i-carbon-meter />
     </RouterLink>
-    <RouterLink text-lg icon-btn to="/waterfall" title="Waterfall">
+    <RouterLink v-if="isDev" text-lg icon-btn to="/waterfall" title="Waterfall">
       <div i-carbon-chart-waterfall />
     </RouterLink>
   </NavBar>

From 9a983d02805d5fc413a572a45c85985a79f9a5c1 Mon Sep 17 00:00:00 2001
From: ArthurDarkstone <liliang18@tal.com>
Date: Tue, 24 Sep 2024 19:47:05 +0800
Subject: [PATCH 13/18] feat: sort by asc & add filters

---
 .gitignore                           |  3 ++
 src/client/pages/index/waterfall.vue | 56 ++++++++++++++++++++++++----
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index a642117..11d4774 100644
--- a/.gitignore
+++ b/.gitignore
@@ -83,3 +83,6 @@ dist
 .vite-inspect
 
 public/assets/fonts
+
+src/client/auto-imports.d.ts
+src/client/components.d.ts
\ No newline at end of file
diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index d60efb5..5478870 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -33,9 +33,30 @@ const startTime = computed(() => Math.min(...Object.values(data.value).map(i =>
 const endTime = computed(() => Math.max(...Object.values(data.value).map(i => i[i.length - 1]?.end ?? -Infinity)) + 1000)
 
 // const reversed = ref(false)
-const searchText = ref('')
-const searchFn = computed(() => {
-  const text = searchText.value.trim()
+// const searchText = ref('')
+// const searchFn = computed(() => {
+//   const text = searchText.value.trim()
+//   if (text === '') {
+//     return () => true
+//   }
+//   const regex = new RegExp(text, 'i')
+//   return (name: string) => regex.test(name)
+// })
+
+const searchItem = ref('')
+const searchId = ref('')
+
+const searchItemFn = computed(() => {
+  const text = searchItem.value.trim()
+  if (text === '') {
+    return () => true
+  }
+  const regex = new RegExp(text, 'i')
+  return (name: string) => regex.test(name)
+})
+
+const searchIdFn = computed(() => {
+  const text = searchId.value.trim()
   if (text === '') {
     return () => true
   }
@@ -44,7 +65,16 @@ const searchFn = computed(() => {
 })
 
 const categories = computed(() => {
-  return Object.keys(data.value).filter(searchFn.value)
+  const cates = Object.keys(data.value).filter(searchIdFn.value)
+
+  // 按照start时间给key排序
+  cates.sort((a, b) => {
+    const aStart = data.value[a][0]?.start ?? Infinity
+    const bStart = data.value[b][0]?.start ?? Infinity
+    return bStart - aStart
+  })
+
+  return cates
 })
 
 // const legendData = computed(() => {
@@ -85,13 +115,19 @@ const types = computed(() => {
 const waterfallData = computed(() => {
   const result: any = []
 
-  Object.entries(data.value).forEach(([id, steps], index) => {
+  const sorted = Object.entries(data.value).sort(([a], [b]) => {
+    const aStart = data.value[a][0]?.start ?? Infinity
+    const bStart = data.value[b][0]?.start ?? Infinity
+    return bStart - aStart
+  })
+
+  sorted.forEach(([id, steps], index) => {
     steps.forEach((s) => {
       const typeItem = types.value.find(i => i.name === id)
 
       const duration = s.end - s.start
 
-      if (searchFn.value(id) && searchFn.value(s.name)) {
+      if (searchItemFn.value(s.name)) {
         result.push({
           name: typeItem ? typeItem.name : id,
           value: [index, s.start, (s.end - s.start) < 1 ? 1 : s.end, duration],
@@ -105,7 +141,9 @@ const waterfallData = computed(() => {
     })
   })
 
-  // console.log(result)
+  // result.sort((a, b) => {
+  //   return b.value[1] - a.value[1]
+  // })
 
   return result
 })
@@ -259,7 +297,9 @@ const chartStyle = computed(() => {
     <div my-auto text-sm font-mono>
       Waterfall
     </div>
-    <input v-model="searchText" placeholder="Search..." class="w-full px-4 py-2 text-xs">
+    <input v-model="searchItem" placeholder="Item Filter..." class="w-full px-4 py-2 text-xs">
+
+    <input v-model="searchId" placeholder="ID Filter..." class="w-full px-4 py-2 text-xs">
 
     <button text-lg icon-btn title="Inspect SSR" @click="inspectSSR = !inspectSSR">
       <div i-carbon-cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />

From 3a67362ebc30438a1460293bdc8fc894124dfbdc Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Tue, 17 Dec 2024 10:44:59 +0800
Subject: [PATCH 14/18] fix

---
 src/client/logic/utils.ts            |  3 ---
 src/client/pages/index.vue           |  2 +-
 src/client/pages/index/waterfall.vue | 34 ++++++++++++++++++----------
 src/node/context.ts                  |  4 ++++
 src/node/rpc.ts                      |  4 ++--
 src/types.ts                         |  2 +-
 6 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/client/logic/utils.ts b/src/client/logic/utils.ts
index de34dee..d29eda0 100644
--- a/src/client/logic/utils.ts
+++ b/src/client/logic/utils.ts
@@ -78,6 +78,3 @@ function serializeForSourcemapsVisualizer(code: string, map: string) {
   // Convert the binary string to a base64 string and return it
   return btoa(binary)
 }
-
-export const isDev = import.meta.env.DEV
-export const isBuild = import.meta.env.PROD
diff --git a/src/client/pages/index.vue b/src/client/pages/index.vue
index 4bc8be5..e7bd6ea 100644
--- a/src/client/pages/index.vue
+++ b/src/client/pages/index.vue
@@ -55,7 +55,7 @@ const isRoot = computed(() => route.path === '/')
     <RouterLink text-lg icon-btn :to="{ path: '/metric', query: route.query }" title="Metrics">
       <span i-carbon-meter />
     </RouterLink>
-    <RouterLink v-if="isDev" text-lg icon-btn to="/waterfall" title="Waterfall">
+    <RouterLink text-lg icon-btn to="/waterfall" title="Waterfall">
       <div i-carbon-chart-waterfall />
     </RouterLink>
     <RouterLink text-lg icon-btn :to="{ path: '/plugins', query: route.query }" title="Plugins">
diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 862e471..0351443 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -17,10 +17,13 @@ import {
 import { graphic, use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import VChart from 'vue-echarts'
-import { inspectSSR, onRefetch } from '../../logic'
 import { getHot } from '../../logic/hot'
-import { rpc } from '../../logic/rpc'
+import { onModuleUpdated, rpc } from '../../logic/rpc'
 import { useOptionsStore } from '../../stores/options'
+import { usePayloadStore } from '../../stores/payload'
+
+const options = useOptionsStore()
+const payload = usePayloadStore()
 
 const container = ref<HTMLDivElement | null>()
 
@@ -29,8 +32,7 @@ const zoomBarOffset = 100
 
 const { height } = useElementSize(container)
 
-const options = useOptionsStore()
-const data = shallowRef(await rpc.getWaterfallInfo(inspectSSR.value))
+const data = shallowRef(await rpc.getWaterfallInfo(payload.query))
 const startTime = computed(() => Math.min(...Object.values(data.value).map(i => i[0]?.start ?? Infinity)))
 const endTime = computed(() => Math.max(...Object.values(data.value).map(i => i[i.length - 1]?.end ?? -Infinity)) + 1000)
 
@@ -151,15 +153,24 @@ const waterfallData = computed(() => {
 })
 
 async function refetch() {
-  data.value = await rpc.getWaterfallInfo(inspectSSR.value)
+  data.value = await rpc.getWaterfallInfo(payload.query)
 }
 
-onRefetch.on(refetch)
-watch(inspectSSR, refetch)
+onModuleUpdated.on(async () => {
+  await refetch()
+})
+
+watch(
+  () => payload.query,
+  () => refetch(),
+  { deep: true },
+)
 
 getHot().then((hot) => {
   if (hot) {
-    hot.on('vite-plugin-inspect:update', refetch)
+    hot.on('vite-plugin-inspect:update', () => {
+      refetch()
+    })
   }
 })
 
@@ -303,10 +314,9 @@ const chartStyle = computed(() => {
 
     <input v-model="searchId" placeholder="ID Filter..." class="w-full px-4 py-2 text-xs">
 
-    <button text-lg icon-btn title="Inspect SSR" @click="inspectSSR = !inspectSSR">
-      <div i-carbon-cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
-    </button>
-    <button class="text-lg icon-btn" title="Show resolveId" @click="waterfallShowResolveId = !waterfallShowResolveId">
+    <QuerySelector />
+
+    <button class="text-lg icon-btn" title="Show resolveId" @click="options.view.waterfallShowResolveId = !options.view.waterfallShowResolveId">
       <div i-carbon-connect-source :class="options.view.waterfallShowResolveId ? 'opacity-100' : 'opacity-25'" />
     </button>
 
diff --git a/src/node/context.ts b/src/node/context.ts
index 381de26..d292f98 100644
--- a/src/node/context.ts
+++ b/src/node/context.ts
@@ -293,6 +293,10 @@ export class InspectContextViteEnv {
     }
   }
 
+  async getWaterfallInfo() {
+    return {}
+  }
+
   clearId(_id: string) {
     const id = this.resolveId(_id)
     if (id) {
diff --git a/src/node/rpc.ts b/src/node/rpc.ts
index df530d6..dc094c1 100644
--- a/src/node/rpc.ts
+++ b/src/node/rpc.ts
@@ -25,8 +25,8 @@ export function createServerRpc(
         .data
         .serverMetrics || {}
     },
-    async getWaterfallInfo() {
-      return ctx.getWaterfallInfo()
+    async getWaterfallInfo(query) {
+      return ctx.queryEnv(query).getWaterfallInfo()
     },
     async onModuleUpdated() {},
 
diff --git a/src/types.ts b/src/types.ts
index dfcc2b4..d6903db 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -113,7 +113,7 @@ export interface RpcFunctions {
   getModuleTransformInfo: (query: QueryEnv, id: string, clear?: boolean) => Promise<ModuleTransformInfo>
   getPluginMetrics: (query: QueryEnv) => Promise<PluginMetricInfo[]>
   getServerMetrics: (query: QueryEnv) => Promise<ServerMetrics>
-  getWaterfallInfo: (ssr: boolean) => Promise<WaterfallInfo>
+  getWaterfallInfo: (query: QueryEnv) => Promise<WaterfallInfo>
   resolveId: (query: QueryEnv, id: string) => Promise<string>
   onModuleUpdated: () => Promise<void>
 

From 39b9138fca0f0a20888ee94ba03e92222f84735f Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Tue, 17 Dec 2024 11:55:34 +0800
Subject: [PATCH 15/18] chore: update

---
 .gitignore                           |   3 -
 src/client/logic/rpc-static.ts       |   1 +
 src/client/pages/index/waterfall.vue | 225 ++++++++-------------------
 src/node/context.ts                  |  44 +++++-
 src/node/utils.ts                    |  22 +++
 5 files changed, 130 insertions(+), 165 deletions(-)

diff --git a/.gitignore b/.gitignore
index 11d4774..a642117 100644
--- a/.gitignore
+++ b/.gitignore
@@ -83,6 +83,3 @@ dist
 .vite-inspect
 
 public/assets/fonts
-
-src/client/auto-imports.d.ts
-src/client/components.d.ts
\ No newline at end of file
diff --git a/src/client/logic/rpc-static.ts b/src/client/logic/rpc-static.ts
index 4557604..4857c14 100644
--- a/src/client/logic/rpc-static.ts
+++ b/src/client/logic/rpc-static.ts
@@ -23,5 +23,6 @@ export function createStaticRpcClient(): RpcFunctions {
     onModuleUpdated: async () => undefined,
     getServerMetrics: async () => ({}),
     getWaterfallInfo: async () => ({}),
+    list: () => null!,
   }
 }
diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 0351443..957c8d5 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import type { CustomSeriesOption } from 'echarts/charts'
-import type {
-  SingleAxisComponentOption,
-  TooltipComponentOption,
-} from 'echarts/components'
-import type { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams, CustomSeriesRenderItemReturn, LegendComponentOption, TopLevelFormatterParams } from 'echarts/types/dist/shared'
+import type { init } from 'echarts/core'
+import type { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams, CustomSeriesRenderItemReturn, TopLevelFormatterParams } from 'echarts/types/dist/shared'
 import { BarChart, CustomChart } from 'echarts/charts'
 import {
   DataZoomComponent,
@@ -17,11 +13,24 @@ import {
 import { graphic, use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import VChart from 'vue-echarts'
+import { createFilter, generatorHashColorByString } from '../../../node/utils'
 import { getHot } from '../../logic/hot'
 import { onModuleUpdated, rpc } from '../../logic/rpc'
 import { useOptionsStore } from '../../stores/options'
 import { usePayloadStore } from '../../stores/payload'
 
+use([
+  VisualMapComponent,
+  CanvasRenderer,
+  BarChart,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+  GridComponent,
+  DataZoomComponent,
+  CustomChart,
+])
+
 const options = useOptionsStore()
 const payload = usePayloadStore()
 
@@ -36,129 +45,11 @@ const data = shallowRef(await rpc.getWaterfallInfo(payload.query))
 const startTime = computed(() => Math.min(...Object.values(data.value).map(i => i[0]?.start ?? Infinity)))
 const endTime = computed(() => Math.max(...Object.values(data.value).map(i => i[i.length - 1]?.end ?? -Infinity)) + 1000)
 
-// const reversed = ref(false)
-// const searchText = ref('')
-// const searchFn = computed(() => {
-//   const text = searchText.value.trim()
-//   if (text === '') {
-//     return () => true
-//   }
-//   const regex = new RegExp(text, 'i')
-//   return (name: string) => regex.test(name)
-// })
-
-const searchItem = ref('')
-const searchId = ref('')
-
-const searchItemFn = computed(() => {
-  const text = searchItem.value.trim()
-  if (text === '') {
-    return () => true
-  }
-  const regex = new RegExp(text, 'i')
-  return (name: string) => regex.test(name)
-})
-
-const searchIdFn = computed(() => {
-  const text = searchId.value.trim()
-  if (text === '') {
-    return () => true
-  }
-  const regex = new RegExp(text, 'i')
-  return (name: string) => regex.test(name)
-})
-
-const categories = computed(() => {
-  const cates = Object.keys(data.value).filter(searchIdFn.value)
-
-  // 按照start时间给key排序
-  cates.sort((a, b) => {
-    const aStart = data.value[a][0]?.start ?? Infinity
-    const bStart = data.value[b][0]?.start ?? Infinity
-    return bStart - aStart
-  })
-
-  return cates
-})
-
-// const legendData = computed(() => {
-//   const l = categories.value.map((id) => {
-//     return {
-//       name: id,
-//       icon: 'circle',
-//     }
-//   })
-
-//   console.log(l)
-
-//   return l
-// })
-
-function generatorHashColorByString(str: string) {
-  let hash = 0
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  let color = '#'
-  for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 0xFF
-    color += (`00${value.toString(16)}`).substr(-2)
-  }
-  return color
-}
-
-const types = computed(() => {
-  return Object.keys(data.value).map((id) => {
-    return {
-      name: id,
-      color: generatorHashColorByString(id),
-    }
-  })
-})
-
-const waterfallData = computed(() => {
-  const result: any = []
-
-  const sorted = Object.entries(data.value).sort(([a], [b]) => {
-    const aStart = data.value[a][0]?.start ?? Infinity
-    const bStart = data.value[b][0]?.start ?? Infinity
-    return bStart - aStart
-  })
-
-  sorted.forEach(([id, steps], index) => {
-    steps.forEach((s) => {
-      const typeItem = types.value.find(i => i.name === id)
-
-      const duration = s.end - s.start
-
-      if (searchItemFn.value(s.name)) {
-        result.push({
-          name: typeItem ? typeItem.name : id,
-          value: [index, s.start, (s.end - s.start) < 1 ? 1 : s.end, duration],
-          itemStyle: {
-            normal: {
-              color: typeItem ? typeItem.color : '#000',
-            },
-          },
-        })
-      }
-    })
-  })
-
-  // result.sort((a, b) => {
-  //   return b.value[1] - a.value[1]
-  // })
-
-  return result
-})
-
 async function refetch() {
   data.value = await rpc.getWaterfallInfo(payload.query)
 }
 
-onModuleUpdated.on(async () => {
-  await refetch()
-})
+onModuleUpdated.on(refetch)
 
 watch(
   () => payload.query,
@@ -174,17 +65,40 @@ getHot().then((hot) => {
   }
 })
 
-use([
-  VisualMapComponent,
-  CanvasRenderer,
-  BarChart,
-  TooltipComponent,
-  TitleComponent,
-  LegendComponent,
-  GridComponent,
-  DataZoomComponent,
-  CustomChart,
-])
+const itemFilter = ref('')
+const idFilter = ref('')
+const itemFilterFn = computed(() => createFilter(itemFilter.value))
+const idFilterFn = computed(() => createFilter(idFilter.value))
+
+const categories = computed(() => {
+  return Object.entries(data.value)
+    .filter(([k]) => idFilterFn.value(k))
+    .sort(([_, a], [__, b]) => {
+      const aStart = a[0]?.start ?? 0
+      const bStart = b[0]?.start ?? 0
+      return bStart - aStart
+    })
+})
+
+const chartData = computed(() => {
+  const result: any[] = []
+  for (const [index, [id, steps]] of categories.value.entries()) {
+    for (const s of steps) {
+      if (itemFilterFn.value(s.name)) {
+        result.push({
+          name: id,
+          value: [index, s.start, (s.end - s.start) < 1 ? 1 : s.end, s.end - s.start],
+          itemStyle: {
+            normal: {
+              color: generatorHashColorByString(id),
+            },
+          },
+        })
+      }
+    }
+  }
+  return result
+})
 
 function renderItem(params: CustomSeriesRenderItemParams | any, api: CustomSeriesRenderItemAPI): CustomSeriesRenderItemReturn {
   const categoryIndex = api.value(0)
@@ -216,18 +130,17 @@ function renderItem(params: CustomSeriesRenderItemParams | any, api: CustomSerie
   )
 }
 
-const option = computed(() => ({
+type ChartOption = ReturnType<ReturnType<typeof init>['getOption']>
+const chartOption = computed<ChartOption>(() => ({
   tooltip: {
     formatter(params: TopLevelFormatterParams | any) {
       return `${params.marker + params.name}: ${params.value[3] <= 1 ? '<1' : params.value[3]}ms}`
     },
-
-  } satisfies TooltipComponentOption,
+  },
   legendData: {
     top: 'center',
     data: ['c'],
-  } satisfies LegendComponentOption,
-
+  },
   title: {
     text: 'Waterfall',
     // left: 'center',
@@ -245,8 +158,6 @@ const option = computed(() => ({
     dimension: 1,
   },
   dataZoom: [
-    // 最多支持放大到1ms
-
     {
       type: 'slider',
       filterMode: 'weakFilter',
@@ -265,18 +176,16 @@ const option = computed(() => ({
   xAxis: {
     min: startTime.value,
     max: endTime.value,
-    // type: 'value',
-
     scale: true,
     axisLabel: {
       formatter(val: number) {
         return `${(val - startTime.value).toFixed(val % 1 ? 2 : 0)} ms`
       },
     },
-  } satisfies SingleAxisComponentOption,
+  },
   yAxis: {
-    data: categories.value,
-  } satisfies SingleAxisComponentOption,
+    data: categories.value.map(([id]) => id),
+  },
   series: [
     {
       type: 'custom',
@@ -289,10 +198,9 @@ const option = computed(() => ({
         x: [1, 2],
         y: 0,
       },
-      data: waterfallData.value,
+      data: chartData.value,
     },
-  ] satisfies CustomSeriesOption[],
-
+  ],
 }))
 
 const chartStyle = computed(() => {
@@ -310,28 +218,25 @@ const chartStyle = computed(() => {
     <div my-auto text-sm font-mono>
       Waterfall
     </div>
-    <input v-model="searchItem" placeholder="Item Filter..." class="w-full px-4 py-2 text-xs">
+    <input v-model="itemFilter" placeholder="Item Filter..." class="w-full px-4 py-2 text-xs">
 
-    <input v-model="searchId" placeholder="ID Filter..." class="w-full px-4 py-2 text-xs">
+    <input v-model="idFilter" placeholder="ID Filter..." class="w-full px-4 py-2 text-xs">
 
     <QuerySelector />
 
-    <button class="text-lg icon-btn" title="Show resolveId" @click="options.view.waterfallShowResolveId = !options.view.waterfallShowResolveId">
-      <div i-carbon-connect-source :class="options.view.waterfallShowResolveId ? 'opacity-100' : 'opacity-25'" />
+    <button text-lg icon-btn title="Show resolveId" @click="options.view.waterfallShowResolveId = !options.view.waterfallShowResolveId">
+      <span i-carbon-connect-source :class="options.view.waterfallShowResolveId ? 'opacity-100' : 'opacity-25'" />
     </button>
 
-    <!-- <button class="text-lg icon-btn" title="Show resolveId" @click="reversed = !reversed">
-      <div i-carbon-arrows-vertical :class="reversed ? 'opacity-100' : 'opacity-25'" />
-    </button> -->
     <div flex-auto />
   </NavBar>
 
   <div ref="container" h-full p4>
-    <div v-if="!waterfallData.length" flex="~" h-40 w-full>
+    <div v-if="!chartData.length" flex="~" h-40 w-full>
       <div ma italic op50>
         No data
       </div>
     </div>
-    <VChart class="w-100%" :style="chartStyle" :option="option" autoresize />
+    <VChart class="w-100%" :style="chartStyle" :option="chartOption" autoresize />
   </div>
 </template>
diff --git a/src/node/context.ts b/src/node/context.ts
index d292f98..55e503d 100644
--- a/src/node/context.ts
+++ b/src/node/context.ts
@@ -1,8 +1,9 @@
 import type { Environment, ResolvedConfig } from 'vite'
-import type { Metadata, ModuleInfo, PluginMetricInfo, QueryEnv, ResolveIdInfo, ServerMetrics, TransformInfo } from '../types'
+import type { Metadata, ModuleInfo, PluginMetricInfo, QueryEnv, ResolveIdInfo, ServerMetrics, TransformInfo, WaterfallInfo } from '../types'
 import type { ViteInspectOptions } from './options'
 import { Buffer } from 'node:buffer'
 import { resolve } from 'node:path'
+import { objectMap } from '@antfu/utils'
 import { createFilter } from '@rollup/pluginutils'
 import { DUMMY_LOAD_PLUGIN_NAME } from './constants'
 import { removeVersionQuery, serializePlugin } from './utils'
@@ -294,7 +295,46 @@ export class InspectContextViteEnv {
   }
 
   async getWaterfallInfo() {
-    return {}
+    const resolveIdByResult: Record<string, ResolveIdInfo> = {}
+    for (const id in this.data.resolveId) {
+      const info = this.data.resolveId[id][0]
+      resolveIdByResult[info.result] = {
+        ...info,
+        result: id,
+      }
+    }
+    return objectMap(this.data.transform, (id, transforms) => {
+      const result: WaterfallInfo[string] = []
+      let currentId = id
+      while (resolveIdByResult[currentId]) {
+        const info = resolveIdByResult[currentId]
+        result.push({
+          name: info.name,
+          start: info.start,
+          end: info.end,
+          isResolveId: true,
+        })
+        if (currentId === info.result)
+          break
+        currentId = info.result
+      }
+      for (const transform of transforms) {
+        result.push({
+          name: transform.name,
+          start: transform.start,
+          end: transform.end,
+          isResolveId: false,
+        })
+      }
+      result.sort((a, b) => a.start - b.start)
+      const filtered = result.filter(({ start, end }, i) => i === 0 || i === result.length - 1 || start < end)
+      return filtered.length
+        ? [
+            id,
+            filtered,
+          ]
+        : undefined
+    })
   }
 
   clearId(_id: string) {
diff --git a/src/node/utils.ts b/src/node/utils.ts
index 872d233..278bc11 100644
--- a/src/node/utils.ts
+++ b/src/node/utils.ts
@@ -34,3 +34,25 @@ export function removeVersionQuery(url: string) {
   }
   return url
 }
+
+export function createFilter(pattern: string) {
+  pattern = pattern.trim()
+  if (!pattern) {
+    return () => true
+  }
+  const regex = new RegExp(pattern, 'i')
+  return (name: string) => regex.test(name)
+}
+
+export function generatorHashColorByString(str: string) {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  let color = '#'
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xFF
+    color += (`00${value.toString(16)}`).slice(-2)
+  }
+  return color
+}

From 9d284115b4ae911e4020eab9195a6b4072ec4700 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Tue, 17 Dec 2024 18:02:00 +0800
Subject: [PATCH 16/18] feat: stacked view

---
 src/client/logic/rpc-static.ts       |   1 +
 src/client/pages/index/waterfall.vue | 109 ++++++++++++++++++++++-----
 src/client/stores/options.ts         |   2 +
 src/node/context.ts                  |  12 ++-
 src/node/index.ts                    |   7 +-
 src/node/rpc.ts                      |   3 +
 src/types.ts                         |   7 ++
 7 files changed, 119 insertions(+), 22 deletions(-)

diff --git a/src/client/logic/rpc-static.ts b/src/client/logic/rpc-static.ts
index 4857c14..3f750d1 100644
--- a/src/client/logic/rpc-static.ts
+++ b/src/client/logic/rpc-static.ts
@@ -23,6 +23,7 @@ export function createStaticRpcClient(): RpcFunctions {
     onModuleUpdated: async () => undefined,
     getServerMetrics: async () => ({}),
     getWaterfallInfo: async () => ({}),
+    getHmrEvents: async () => [],
     list: () => null!,
   }
 }
diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 957c8d5..0223cf9 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -65,29 +65,31 @@ getHot().then((hot) => {
   }
 })
 
-const itemFilter = ref('')
+const pluginFilter = ref('')
 const idFilter = ref('')
-const itemFilterFn = computed(() => createFilter(itemFilter.value))
+const pluginFilterFn = computed(() => createFilter(pluginFilter.value))
 const idFilterFn = computed(() => createFilter(idFilter.value))
 
-const categories = computed(() => {
+const sortedData = computed(() => {
   return Object.entries(data.value)
-    .filter(([k]) => idFilterFn.value(k))
     .sort(([_, a], [__, b]) => {
       const aStart = a[0]?.start ?? 0
       const bStart = b[0]?.start ?? 0
-      return bStart - aStart
+      return aStart - bStart
     })
 })
 
-const chartData = computed(() => {
+const moduleIds = computed(() => sortedData.value.filter(([k]) => idFilterFn.value(k)).reverse())
+
+const chartDataById = computed(() => {
   const result: any[] = []
-  for (const [index, [id, steps]] of categories.value.entries()) {
+  for (const [index, [id, steps]] of moduleIds.value.entries()) {
     for (const s of steps) {
-      if (itemFilterFn.value(s.name)) {
+      if (pluginFilterFn.value(s.name)) {
+        const duration = s.end - s.start
         result.push({
           name: id,
-          value: [index, s.start, (s.end - s.start) < 1 ? 1 : s.end, s.end - s.start],
+          value: [index, s.start, duration < 1 ? s.start + 1 : s.end, duration],
           itemStyle: {
             normal: {
               color: generatorHashColorByString(id),
@@ -100,11 +102,77 @@ const chartData = computed(() => {
   return result
 })
 
+interface WaterfallSpan {
+  kind: 'resolve' | 'transform' | 'group'
+  fade: boolean
+  start: number
+  end: number
+  id: string
+  name: string
+}
+
+const chartDataStacked = computed(() => {
+  const rows: WaterfallSpan[][] = []
+  const rowsEnd: number[] = []
+  for (let [id, steps] of sortedData.value) {
+    if (!options.view.waterfallShowResolveId) {
+      steps = steps.filter(i => !i.isResolveId)
+    }
+    if (steps.length === 0) {
+      continue
+    }
+    const start = steps[0].start
+    const end = steps[steps.length - 1].end
+    const spans: WaterfallSpan[] = steps.map(v => ({
+      kind: v.isResolveId ? 'resolve' : 'transform',
+      start: v.start,
+      end: v.end,
+      name: v.name,
+      id,
+      fade: !pluginFilterFn.value(v.name) && !idFilterFn.value(id),
+    }))
+    spans.push({
+      kind: 'group',
+      fade: spans.every(i => i.fade),
+      start,
+      end,
+      id,
+      name: 'group',
+    })
+    const row = rowsEnd.findIndex((rowEnd, i) => {
+      if (rowEnd <= start) {
+        rowsEnd[i] = end
+        rows[i].push(...spans)
+        return true
+      }
+      return false
+    })
+    if (row === -1) {
+      rows.push(spans)
+      rowsEnd.push(end)
+    }
+  }
+  return rows.reverse().map((spans, index) => spans.map((s) => {
+    const duration = s.end - s.start
+    return {
+      name: s.id,
+      value: [index, s.start, duration < 1 ? s.start + 1 : s.end, duration],
+      itemStyle: {
+        normal: {
+          color: generatorHashColorByString(s.id),
+          opacity: s.fade ? 0.2 : 1,
+        },
+      },
+    }
+  }))
+})
+
 function renderItem(params: CustomSeriesRenderItemParams | any, api: CustomSeriesRenderItemAPI): CustomSeriesRenderItemReturn {
-  const categoryIndex = api.value(0)
-  const start = api.coord([api.value(1), categoryIndex])
-  const end = api.coord([api.value(2), categoryIndex])
-  const height = (api.size?.([0, 1]) as number[])[1] * 0.6
+  const index = api.value(0)
+  const start = api.coord([api.value(1), index])
+  const end = api.coord([api.value(2), index])
+  const height = (api.size?.([0, 1]) as number[])[1]
+
   const rectShape = graphic.clipRectByRect(
     {
       x: start[0],
@@ -134,7 +202,7 @@ type ChartOption = ReturnType<ReturnType<typeof init>['getOption']>
 const chartOption = computed<ChartOption>(() => ({
   tooltip: {
     formatter(params: TopLevelFormatterParams | any) {
-      return `${params.marker + params.name}: ${params.value[3] <= 1 ? '<1' : params.value[3]}ms}`
+      return `${params.marker}${params.name}: ${params.value[3] <= 1 ? '<1' : params.value[3]}ms}`
     },
   },
   legendData: {
@@ -184,7 +252,7 @@ const chartOption = computed<ChartOption>(() => ({
     },
   },
   yAxis: {
-    data: categories.value.map(([id]) => id),
+    data: options.view.waterfallStacking ? [...chartDataStacked.value.keys()].reverse() : moduleIds.value.map(([id]) => id),
   },
   series: [
     {
@@ -198,7 +266,7 @@ const chartOption = computed<ChartOption>(() => ({
         x: [1, 2],
         y: 0,
       },
-      data: chartData.value,
+      data: options.view.waterfallStacking ? chartDataStacked.value.flat() : chartDataById.value,
     },
   ],
 }))
@@ -218,8 +286,8 @@ const chartStyle = computed(() => {
     <div my-auto text-sm font-mono>
       Waterfall
     </div>
-    <input v-model="itemFilter" placeholder="Item Filter..." class="w-full px-4 py-2 text-xs">
 
+    <input v-model="pluginFilter" placeholder="Plugin Filter..." class="w-full px-4 py-2 text-xs">
     <input v-model="idFilter" placeholder="ID Filter..." class="w-full px-4 py-2 text-xs">
 
     <QuerySelector />
@@ -227,16 +295,19 @@ const chartStyle = computed(() => {
     <button text-lg icon-btn title="Show resolveId" @click="options.view.waterfallShowResolveId = !options.view.waterfallShowResolveId">
       <span i-carbon-connect-source :class="options.view.waterfallShowResolveId ? 'opacity-100' : 'opacity-25'" />
     </button>
+    <button text-lg icon-btn title="Stacked" @click="options.view.waterfallStacking = !options.view.waterfallStacking">
+      <span i-carbon-stacked-scrolling-1 :class="options.view.waterfallStacking ? 'opacity-100' : 'opacity-25'" />
+    </button>
 
     <div flex-auto />
   </NavBar>
 
   <div ref="container" h-full p4>
-    <div v-if="!chartData.length" flex="~" h-40 w-full>
+    <div v-if="!Object.keys(data).length" flex="~" h-40 w-full>
       <div ma italic op50>
         No data
       </div>
     </div>
-    <VChart class="w-100%" :style="chartStyle" :option="chartOption" autoresize />
+    <VChart v-else class="w-100%" :style="chartStyle" :option="chartOption" autoresize />
   </div>
 </template>
diff --git a/src/client/stores/options.ts b/src/client/stores/options.ts
index 27172f9..e24d3f8 100644
--- a/src/client/stores/options.ts
+++ b/src/client/stores/options.ts
@@ -13,6 +13,7 @@ export interface ViewState {
   showOneColumn: boolean
   sort: 'default' | 'time-asc' | 'time-desc'
   waterfallShowResolveId: boolean
+  waterfallStacking: boolean
 }
 
 export interface SearchState {
@@ -39,6 +40,7 @@ export const useOptionsStore = defineStore('options', () => {
       showOneColumn: false,
       sort: 'default',
       waterfallShowResolveId: true,
+      waterfallStacking: true,
     },
     { mergeDefaults: true },
   )
diff --git a/src/node/context.ts b/src/node/context.ts
index 55e503d..e40541e 100644
--- a/src/node/context.ts
+++ b/src/node/context.ts
@@ -1,5 +1,5 @@
 import type { Environment, ResolvedConfig } from 'vite'
-import type { Metadata, ModuleInfo, PluginMetricInfo, QueryEnv, ResolveIdInfo, ServerMetrics, TransformInfo, WaterfallInfo } from '../types'
+import type { HmrEventInfo, Metadata, ModuleInfo, PluginMetricInfo, QueryEnv, ResolveIdInfo, ServerMetrics, TransformInfo, WaterfallInfo } from '../types'
 import type { ViteInspectOptions } from './options'
 import { Buffer } from 'node:buffer'
 import { resolve } from 'node:path'
@@ -111,10 +111,12 @@ export class InspectContextViteEnv {
     transform: Record<string, TransformInfo[]>
     resolveId: Record<string, ResolveIdInfo[]>
     transformCounter: Record<string, number>
+    hmrEvents: HmrEventInfo[]
   } = {
       transform: {},
       resolveId: {},
       transformCounter: {},
+      hmrEvents: [],
     }
 
   recordTransform(id: string, info: TransformInfo, preTransformCode: string) {
@@ -147,6 +149,10 @@ export class InspectContextViteEnv {
     this.data.resolveId[id].push(info)
   }
 
+  recordHmrEvent(info: HmrEventInfo) {
+    this.data.hmrEvents.push(info)
+  }
+
   invalidate(id: string) {
     id = this.normalizeId(id)
     delete this.data.transform[id]
@@ -337,6 +343,10 @@ export class InspectContextViteEnv {
     })
   }
 
+  async getHmrEvents() {
+    return this.data.hmrEvents.sort((a, b) => a.timestamp - b.timestamp)
+  }
+
   clearId(_id: string) {
     const id = this.resolveId(_id)
     if (id) {
diff --git a/src/node/index.ts b/src/node/index.ts
index 913fb2f..ad6bb92 100644
--- a/src/node/index.ts
+++ b/src/node/index.ts
@@ -233,13 +233,16 @@ export default function PluginInspect(options: ViteInspectOptions = {}): Plugin
         return null
       },
     },
-    hotUpdate({ modules, environment }) {
+    hotUpdate({ modules, type, file, timestamp }) {
       const ids = modules.map(module => module.id)
-      environment.hot.send({
+      this.environment.hot.send({
         type: 'custom',
         event: 'vite-plugin-inspect:update',
         data: { ids } as HMRData,
       })
+
+      const env = ctx.getEnvContext(this.environment)
+      env?.recordHmrEvent({ type, file, timestamp })
     },
     async buildEnd() {
       if (!build)
diff --git a/src/node/rpc.ts b/src/node/rpc.ts
index dc094c1..621f834 100644
--- a/src/node/rpc.ts
+++ b/src/node/rpc.ts
@@ -28,6 +28,9 @@ export function createServerRpc(
     async getWaterfallInfo(query) {
       return ctx.queryEnv(query).getWaterfallInfo()
     },
+    async getHmrEvents(query) {
+      return ctx.queryEnv(query).getHmrEvents()
+    },
     async onModuleUpdated() {},
 
     async list() {
diff --git a/src/types.ts b/src/types.ts
index d6903db..9530454 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -19,6 +19,12 @@ export interface ResolveIdInfo {
   error?: ParsedError
 }
 
+export interface HmrEventInfo {
+  type: 'create' | 'update' | 'delete'
+  file: string
+  timestamp: number
+}
+
 export interface ParsedError {
   message: string
   stack: StackFrame[]
@@ -114,6 +120,7 @@ export interface RpcFunctions {
   getPluginMetrics: (query: QueryEnv) => Promise<PluginMetricInfo[]>
   getServerMetrics: (query: QueryEnv) => Promise<ServerMetrics>
   getWaterfallInfo: (query: QueryEnv) => Promise<WaterfallInfo>
+  getHmrEvents: (query: QueryEnv) => Promise<HmrEventInfo[]>
   resolveId: (query: QueryEnv, id: string) => Promise<string>
   onModuleUpdated: () => Promise<void>
 

From cad4f94ac66263d5134514bbc757b3f9621b6507 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Tue, 17 Dec 2024 18:20:53 +0800
Subject: [PATCH 17/18] chore: update

---
 src/client/pages/index/waterfall.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 0223cf9..2f27fbe 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -131,14 +131,6 @@ const chartDataStacked = computed(() => {
       id,
       fade: !pluginFilterFn.value(v.name) && !idFilterFn.value(id),
     }))
-    spans.push({
-      kind: 'group',
-      fade: spans.every(i => i.fade),
-      start,
-      end,
-      id,
-      name: 'group',
-    })
     const row = rowsEnd.findIndex((rowEnd, i) => {
       if (rowEnd <= start) {
         rowsEnd[i] = end

From 979fdefdb39464d2e9bae635db879d7549eec5f2 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Tue, 17 Dec 2024 23:07:27 +0800
Subject: [PATCH 18/18] wip: hmr event

---
 src/client/pages/index/waterfall.vue | 33 +++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
index 2f27fbe..1fcfba1 100644
--- a/src/client/pages/index/waterfall.vue
+++ b/src/client/pages/index/waterfall.vue
@@ -42,17 +42,27 @@ const zoomBarOffset = 100
 const { height } = useElementSize(container)
 
 const data = shallowRef(await rpc.getWaterfallInfo(payload.query))
+const hmrEvents = shallowRef(await rpc.getHmrEvents(payload.query))
 const startTime = computed(() => Math.min(...Object.values(data.value).map(i => i[0]?.start ?? Infinity)))
 const endTime = computed(() => Math.max(...Object.values(data.value).map(i => i[i.length - 1]?.end ?? -Infinity)) + 1000)
 
+const paused = ref(false)
+const pluginFilter = ref('')
+const idFilter = ref('')
+const pluginFilterFn = computed(() => createFilter(pluginFilter.value))
+const idFilterFn = computed(() => createFilter(idFilter.value))
+
 async function refetch() {
-  data.value = await rpc.getWaterfallInfo(payload.query)
+  if (!paused.value) {
+    data.value = await rpc.getWaterfallInfo(payload.query)
+    hmrEvents.value = await rpc.getHmrEvents(payload.query)
+  }
 }
 
 onModuleUpdated.on(refetch)
 
 watch(
-  () => payload.query,
+  () => [paused.value, payload.query],
   () => refetch(),
   { deep: true },
 )
@@ -65,11 +75,6 @@ getHot().then((hot) => {
   }
 })
 
-const pluginFilter = ref('')
-const idFilter = ref('')
-const pluginFilterFn = computed(() => createFilter(pluginFilter.value))
-const idFilterFn = computed(() => createFilter(idFilter.value))
-
 const sortedData = computed(() => {
   return Object.entries(data.value)
     .sort(([_, a], [__, b]) => {
@@ -203,7 +208,6 @@ const chartOption = computed<ChartOption>(() => ({
   },
   title: {
     text: 'Waterfall',
-    // left: 'center',
   },
   visualMap: {
     type: 'piecewise',
@@ -259,6 +263,16 @@ const chartOption = computed<ChartOption>(() => ({
         y: 0,
       },
       data: options.view.waterfallStacking ? chartDataStacked.value.flat() : chartDataById.value,
+      markLine: {
+        data: hmrEvents.value.map(({ type, file, timestamp }) => ({
+          name: `${type} ${file}`,
+          xAxis: timestamp,
+        })),
+        lineStyle: {
+          color: '#f00',
+        },
+        symbol: ['none', 'none'],
+      },
     },
   ],
 }))
@@ -284,6 +298,9 @@ const chartStyle = computed(() => {
 
     <QuerySelector />
 
+    <button text-lg icon-btn title="Pause" @click="paused = !paused">
+      <span i-carbon-pause opacity-90 :class="paused ? 'text-red' : ''" />
+    </button>
     <button text-lg icon-btn title="Show resolveId" @click="options.view.waterfallShowResolveId = !options.view.waterfallShowResolveId">
       <span i-carbon-connect-source :class="options.view.waterfallShowResolveId ? 'opacity-100' : 'opacity-25'" />
     </button>