@kylincloud/flamegraph 0.35.8 → 0.35.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +292 -50
- package/dist/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.d.ts.map +1 -1
- package/dist/FlameGraph/FlameGraphComponent/Header.d.ts +0 -3
- package/dist/FlameGraph/FlameGraphComponent/Header.d.ts.map +1 -1
- package/dist/FlameGraph/FlameGraphComponent/index.d.ts +2 -0
- package/dist/FlameGraph/FlameGraphComponent/index.d.ts.map +1 -1
- package/dist/FlameGraph/FlameGraphRenderer.d.ts +2 -0
- package/dist/FlameGraph/FlameGraphRenderer.d.ts.map +1 -1
- package/dist/FlamegraphRenderer.d.ts +23 -5
- package/dist/FlamegraphRenderer.d.ts.map +1 -1
- package/dist/ProfilerTable.d.ts.map +1 -1
- package/dist/Toolbar.d.ts +4 -1
- package/dist/Toolbar.d.ts.map +1 -1
- package/dist/i18n.d.ts +2 -0
- package/dist/i18n.d.ts.map +1 -1
- package/dist/index.cjs.js +4 -4
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +4 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.node.cjs.js +6 -1
- package/dist/index.node.cjs.js.map +1 -1
- package/dist/index.node.esm.js +8 -3
- package/dist/index.node.esm.js.map +1 -1
- package/package.json +4 -1
- package/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.module.css +69 -21
- package/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx +57 -86
- package/src/FlameGraph/FlameGraphComponent/Header.tsx +23 -36
- package/src/FlameGraph/FlameGraphComponent/index.tsx +13 -9
- package/src/FlameGraph/FlameGraphRenderer.tsx +14 -11
- package/src/FlamegraphRenderer.tsx +103 -20
- package/src/ProfilerTable.tsx +24 -11
- package/src/SharedQueryInput.module.scss +5 -2
- package/src/Toolbar.module.scss +13 -0
- package/src/Toolbar.tsx +29 -3
- package/src/i18n.tsx +11 -2
- package/src/sass/_css-variables.scss +15 -2
- package/src/sass/flamegraph.scss +59 -0
- package/src/shims/Table.module.scss +7 -1
package/README.md
CHANGED
|
@@ -11,15 +11,25 @@
|
|
|
11
11
|
## 1. 功能特性
|
|
12
12
|
|
|
13
13
|
- 🔥 支持 **单视图** 与 **Diff 差分视图**
|
|
14
|
-
- 📊 支持 **表格 / 火焰图 /
|
|
14
|
+
- 📊 支持 **表格 / 火焰图 / 表格 + 火焰图 / Sandwich** 等多种布局(具体取决于业务侧如何组合封装)
|
|
15
15
|
- 🧭 丰富交互:
|
|
16
16
|
- 鼠标悬停 Tooltip(展示占比、采样数、绝对值等)
|
|
17
17
|
- 点击放大 / 回退、滚轮缩放、拖拽平移
|
|
18
|
-
-
|
|
18
|
+
- 右键菜单(折叠、重置视图、打开 Sandwich 视图等,**Sandwich 入口支持开关控制**)
|
|
19
19
|
- 🔍 函数名搜索 & 高亮
|
|
20
20
|
- 🎨 多种配色 / Diff 渐变色,适配普通与色弱模式
|
|
21
|
+
- 🌐 **内置 i18n 支持**:
|
|
22
|
+
- `locale="auto"` 时自动根据浏览器语言选择中英文
|
|
23
|
+
- 也可通过 `locale="en" | "zh-CN"` 强制指定语言
|
|
24
|
+
- 支持通过 `i18n` 精细覆盖各项文案
|
|
21
25
|
- 🧱 基于 **Flamebearer** 数据结构,兼容 Pyroscope / Grafana Pyroscope 的 profile 数据
|
|
22
26
|
- 🧩 以 React 组件的方式独立封装,可作为「黑盒区域」嵌入任意业务页面
|
|
27
|
+
- 💠 主题适配:
|
|
28
|
+
- 支持 `dark / light / kylin` 三种颜色模式(通过 `colorMode` / `Box` 的 `theme` 控制)
|
|
29
|
+
- `kylin` 主题贴近 Ant Design 白底风格
|
|
30
|
+
- 🧮 Diff 模式表格增强:
|
|
31
|
+
- **Diff 表格支持独立滚动容器 + 表头 sticky 固定**
|
|
32
|
+
- 默认最大高度可通过 CSS 变量 `--kylin-flamegraph-table-max-height` 配置(例如 1000px / 2000px)
|
|
23
33
|
|
|
24
34
|
---
|
|
25
35
|
|
|
@@ -60,7 +70,6 @@ yarn add @kylincloud/flamegraph
|
|
|
60
70
|
* `DefaultPalette`
|
|
61
71
|
* `convertJaegerTraceToProfile`
|
|
62
72
|
* `diffTwoProfiles`
|
|
63
|
-
|
|
64
73
|
* i18n 导出:
|
|
65
74
|
|
|
66
75
|
* `flamegraphDefaultMessages`
|
|
@@ -93,7 +102,7 @@ import {
|
|
|
93
102
|
} from '@kylincloud/flamegraph'
|
|
94
103
|
```
|
|
95
104
|
|
|
96
|
-
>
|
|
105
|
+
> 提示:
|
|
97
106
|
>
|
|
98
107
|
> * 对于浏览器端渲染:只要导入任意来自 `@kylincloud/flamegraph` 的组件,样式就会自动注入。
|
|
99
108
|
> * 对于 SSR 场景:Node 侧入口为 `dist/index.node.cjs.js` / `dist/index.node.esm.js`,不会在服务端注入样式,CSS 注入会在浏览器端 hydration 时发生。
|
|
@@ -130,50 +139,200 @@ export default function App() {
|
|
|
130
139
|
<div style={{ height: 600 }}>
|
|
131
140
|
<FlamegraphRenderer
|
|
132
141
|
profile={simpleProfile}
|
|
133
|
-
//
|
|
134
|
-
//
|
|
135
|
-
// type="single" // 'single' | 'diff'
|
|
136
|
-
// showToolbar={true}
|
|
137
|
-
// showCredit={false}
|
|
142
|
+
// 可选:颜色模式(inner state 会将它挂到 data-flamegraph-color-mode 上)
|
|
143
|
+
// colorMode="light" | "dark" | "kylin"
|
|
138
144
|
/>
|
|
139
145
|
</div>
|
|
140
146
|
)
|
|
141
147
|
}
|
|
142
148
|
```
|
|
143
149
|
|
|
144
|
-
|
|
150
|
+
在麒麟系前端(AntD 白色背景)中,推荐:
|
|
151
|
+
|
|
152
|
+
```tsx
|
|
153
|
+
<FlamegraphRenderer
|
|
154
|
+
profile={simpleProfile}
|
|
155
|
+
colorMode="kylin"
|
|
156
|
+
/>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
并在外层使用:
|
|
160
|
+
|
|
161
|
+
```tsx
|
|
162
|
+
<Box theme="kylin">
|
|
163
|
+
<FlamegraphRenderer profile={simpleProfile} colorMode="kylin" />
|
|
164
|
+
</Box>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### 3.3 语言与 i18n 使用方式
|
|
168
|
+
|
|
169
|
+
`FlamegraphRenderer` 内部已经内置了 i18n 能力,支持两种层级的使用方式。
|
|
170
|
+
|
|
171
|
+
#### 3.3.1 推荐:直接使用 `locale` / `i18n` props
|
|
172
|
+
|
|
173
|
+
组件对外暴露的部分类型如下:
|
|
174
|
+
|
|
175
|
+
```ts
|
|
176
|
+
type FlamegraphLocale = 'auto' | 'en' | 'zh-CN'
|
|
177
|
+
|
|
178
|
+
type FlamegraphRendererProps = {
|
|
179
|
+
// ...
|
|
180
|
+
|
|
181
|
+
/** 语言设置(不传等价于 'auto') */
|
|
182
|
+
locale?: FlamegraphLocale
|
|
183
|
+
|
|
184
|
+
/**
|
|
185
|
+
* 文案覆盖:
|
|
186
|
+
* - 显式传入 i18n 时,优先使用这一套(不再根据 locale 推断)
|
|
187
|
+
* - 不传时,根据 locale / 浏览器语言自动选择内置英文 / 中文
|
|
188
|
+
*/
|
|
189
|
+
i18n?: Partial<FlamegraphMessages>
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* 是否开启三明治视图入口(右键菜单中的 “Open in Sandwich View”)
|
|
193
|
+
* - 默认 true
|
|
194
|
+
* - 设为 false 时将隐藏右键菜单中的 Sandwich 入口,
|
|
195
|
+
* 不影响 Toolbar 中的视图切换(仍可切换到 Sandwich 视图)
|
|
196
|
+
*/
|
|
197
|
+
sandwich?: boolean
|
|
198
|
+
|
|
199
|
+
/**
|
|
200
|
+
* 颜色模式(配合 CSS 变量)
|
|
201
|
+
* - 'dark' | 'light' | 'kylin'
|
|
202
|
+
*/
|
|
203
|
+
colorMode?: 'dark' | 'light' | 'kylin'
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
典型用法:
|
|
208
|
+
|
|
209
|
+
```tsx
|
|
210
|
+
import React from 'react'
|
|
211
|
+
import {
|
|
212
|
+
FlamegraphRenderer,
|
|
213
|
+
flamegraphZhCNMessages,
|
|
214
|
+
} from '@kylincloud/flamegraph'
|
|
215
|
+
|
|
216
|
+
// 1)默认:自动根据浏览器语言选择中英文
|
|
217
|
+
function AutoLocaleExample({ profile }: { profile: any }) {
|
|
218
|
+
return (
|
|
219
|
+
<FlamegraphRenderer
|
|
220
|
+
profile={profile}
|
|
221
|
+
// 不传 locale / i18n 时等价于 locale="auto"
|
|
222
|
+
/>
|
|
223
|
+
)
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
// 2)强制中文
|
|
227
|
+
function ZhCNExample({ profile }: { profile: any }) {
|
|
228
|
+
return (
|
|
229
|
+
<FlamegraphRenderer
|
|
230
|
+
profile={profile}
|
|
231
|
+
locale="zh-CN"
|
|
232
|
+
/>
|
|
233
|
+
)
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
// 3)强制英文
|
|
237
|
+
function EnExample({ profile }: { profile: any }) {
|
|
238
|
+
return (
|
|
239
|
+
<FlamegraphRenderer
|
|
240
|
+
profile={profile}
|
|
241
|
+
locale="en"
|
|
242
|
+
/>
|
|
243
|
+
)
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
// 4)在中文基础上局部改写某些文案
|
|
247
|
+
function OverrideExample({ profile }: { profile: any }) {
|
|
248
|
+
return (
|
|
249
|
+
<FlamegraphRenderer
|
|
250
|
+
profile={profile}
|
|
251
|
+
locale="zh-CN"
|
|
252
|
+
i18n={{
|
|
253
|
+
viewFlamegraph: '火焰图视图',
|
|
254
|
+
more: '更多操作',
|
|
255
|
+
}}
|
|
256
|
+
/>
|
|
257
|
+
)
|
|
258
|
+
}
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
规则说明:
|
|
262
|
+
|
|
263
|
+
* 若 **显式传入 `i18n`**,则以 `i18n` 为准,不再根据 `locale` / 浏览器语言推断。
|
|
264
|
+
* 若未传入 `i18n`:
|
|
265
|
+
|
|
266
|
+
* `locale` 未指定时视为 `"auto"`,组件会读取 `navigator.language` 进行选择:
|
|
267
|
+
|
|
268
|
+
* `zh*` → 使用内置中文文案 `flamegraphZhCNMessages`
|
|
269
|
+
* 其他 → 使用内置英文文案 `flamegraphDefaultMessages`
|
|
270
|
+
|
|
271
|
+
### 3.4 Sandwich 视图入口开关
|
|
272
|
+
|
|
273
|
+
默认情况下,右键菜单会提供「Open in Sandwich View」入口,用于快速从当前函数跳转到 **Sandwich 视图(Callers / Callees)**。
|
|
274
|
+
|
|
275
|
+
可以通过 `sandwich` 属性控制该入口是否启用:
|
|
276
|
+
|
|
277
|
+
```tsx
|
|
278
|
+
// 默认:右键菜单中包含 “Open in Sandwich View”
|
|
279
|
+
<FlamegraphRenderer
|
|
280
|
+
profile={profile}
|
|
281
|
+
/>
|
|
282
|
+
|
|
283
|
+
// 关闭:隐藏右键菜单中的 Sandwich 入口(Toolbar 中的视图切换仍可用)
|
|
284
|
+
<FlamegraphRenderer
|
|
285
|
+
profile={profile}
|
|
286
|
+
sandwich={false}
|
|
287
|
+
/>
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
说明:
|
|
291
|
+
|
|
292
|
+
* `sandwich` 只控制「右键菜单入口」,不会关闭整个 Sandwich 视图能力。
|
|
293
|
+
* 当 `sandwich={false}` 时:
|
|
294
|
+
|
|
295
|
+
* 右键菜单不再显示 「Open in Sandwich View」
|
|
296
|
+
* 如 Toolbar 中仍暴露视图切换控件,用户依然可以手动切换到 `Sandwich` 视图。
|
|
297
|
+
|
|
298
|
+
### 3.5 高级用法:手动使用 `FlamegraphI18nProvider`
|
|
299
|
+
|
|
300
|
+
在绝大部分场景,**只使用 `FlamegraphRenderer` 的 `locale` / `i18n` 即可**,它内部已经自动套了一层 `FlamegraphI18nProvider`。
|
|
301
|
+
|
|
302
|
+
如果希望在更高层共享同一套翻译配置(例如一整个页面内的多处 Flamegraph 统一使用某套覆盖文案),也可以手动使用 Provider:
|
|
145
303
|
|
|
146
304
|
```tsx
|
|
147
305
|
import React from 'react'
|
|
148
306
|
import {
|
|
149
307
|
FlamegraphRenderer,
|
|
150
308
|
FlamegraphI18nProvider,
|
|
151
|
-
flamegraphDefaultMessages,
|
|
152
309
|
flamegraphZhCNMessages,
|
|
310
|
+
type FlamegraphMessages,
|
|
153
311
|
} from '@kylincloud/flamegraph'
|
|
154
312
|
|
|
313
|
+
const customMessages: Partial<FlamegraphMessages> = {
|
|
314
|
+
...flamegraphZhCNMessages,
|
|
315
|
+
viewFlamegraph: '火焰图(自定义文案)',
|
|
316
|
+
}
|
|
317
|
+
|
|
155
318
|
export default function App() {
|
|
156
319
|
return (
|
|
157
|
-
<FlamegraphI18nProvider
|
|
158
|
-
messages={{
|
|
159
|
-
// 可按需合并多语言
|
|
160
|
-
en: flamegraphDefaultMessages,
|
|
161
|
-
zhCN: flamegraphZhCNMessages,
|
|
162
|
-
}}
|
|
163
|
-
locale="zhCN"
|
|
164
|
-
>
|
|
320
|
+
<FlamegraphI18nProvider messages={customMessages}>
|
|
165
321
|
<div style={{ height: 600 }}>
|
|
166
|
-
<FlamegraphRenderer
|
|
322
|
+
<FlamegraphRenderer
|
|
323
|
+
profile={/* your profile */}
|
|
324
|
+
// 此时可以不再传 locale / i18n,由上层 Provider 决定
|
|
325
|
+
/>
|
|
167
326
|
</div>
|
|
168
327
|
</FlamegraphI18nProvider>
|
|
169
328
|
)
|
|
170
329
|
}
|
|
171
330
|
```
|
|
172
331
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
332
|
+
建议:
|
|
333
|
+
|
|
334
|
+
* 简单场景:直接在 `FlamegraphRenderer` 上使用 `locale` / `i18n`。
|
|
335
|
+
* 多个火焰图共享同一套深度自定义文案时,再考虑使用 `FlamegraphI18nProvider`。
|
|
177
336
|
|
|
178
337
|
---
|
|
179
338
|
|
|
@@ -192,11 +351,14 @@ type FlamebearerProfile = {
|
|
|
192
351
|
maxSelf?: number
|
|
193
352
|
sampleRate?: number
|
|
194
353
|
units?: 'samples' | 'bytes' | 'ns' | string
|
|
354
|
+
leftTicks?: number
|
|
355
|
+
rightTicks?: number
|
|
356
|
+
format?: 'single' | 'double'
|
|
195
357
|
}
|
|
196
358
|
metadata?: {
|
|
197
359
|
appName?: string
|
|
198
360
|
spyName?: string
|
|
199
|
-
format?: 'single' | 'double' |
|
|
361
|
+
format?: 'single' | 'double' | string
|
|
200
362
|
from?: number
|
|
201
363
|
until?: number
|
|
202
364
|
[key: string]: any
|
|
@@ -205,11 +367,12 @@ type FlamebearerProfile = {
|
|
|
205
367
|
```
|
|
206
368
|
|
|
207
369
|
* `names`:所有符号(函数名)列表,`levels` 中通过索引引用
|
|
208
|
-
* `levels
|
|
370
|
+
* `levels`:二维数组,每一行对应火焰图中的一层
|
|
209
371
|
|
|
210
372
|
* **单视图**:每 4 个数字为一组
|
|
211
373
|
* **Diff 视图**:每组数字扩展为左/右 profile 的宽度及差分值(通常 7 个)
|
|
212
374
|
* `units` / `sampleRate`:用于 Tooltip 和表格中做单位换算、展示总时间等
|
|
375
|
+
* `leftTicks` / `rightTicks`:Diff 模式下左、右 profile 的总采样数,用于计算百分比
|
|
213
376
|
|
|
214
377
|
在麒麟内部项目中,也可以在后端将自定义的树型数据转换为上述格式,再传递给组件。
|
|
215
378
|
|
|
@@ -219,12 +382,13 @@ type FlamebearerProfile = {
|
|
|
219
382
|
|
|
220
383
|
如果 profile 为 Diff 格式(用于比较「基线」与「当前」两段 profile),通常会:
|
|
221
384
|
|
|
222
|
-
* 在 `
|
|
385
|
+
* 在 `flamebearer.format` 中标注 `'double'`
|
|
223
386
|
* 在 `flamebearer.levels` 中扩展出:
|
|
224
387
|
|
|
225
388
|
* 左 profile(基线)的宽度 / 值
|
|
226
389
|
* 右 profile(比较)的宽度 / 值
|
|
227
390
|
* 差分值(正负表示变慢 / 变快)
|
|
391
|
+
* 在 `flamebearer.leftTicks` / `rightTicks` 中提供两端总采样数,用于计算百分比
|
|
228
392
|
|
|
229
393
|
前端典型表现:
|
|
230
394
|
|
|
@@ -235,10 +399,12 @@ type FlamebearerProfile = {
|
|
|
235
399
|
* 表格区域:
|
|
236
400
|
|
|
237
401
|
* 展示 `Symbol / Baseline / Comparison / Diff` 列
|
|
238
|
-
*
|
|
402
|
+
* Diff 列以百分比形式展示变化:`(+12.34%)` / `(-7.89%)`
|
|
403
|
+
* 对于只在右侧出现的函数显示 `NEW` 文案(可通过 `messages.diffNew` 定制)
|
|
404
|
+
* 对于只在左侧出现的函数显示 `REMOVED` 文案(可通过 `messages.diffRemoved` 定制)
|
|
239
405
|
* Tooltip:
|
|
240
406
|
|
|
241
|
-
* 展示 `% of total / value / samples`
|
|
407
|
+
* 展示 `% of total / value / samples` 等信息,并同时展现左右两侧的数值对比
|
|
242
408
|
|
|
243
409
|
具体字段与含义请以实际 `DiffProfile` / `DiffNode` 类型定义及实现为准。
|
|
244
410
|
|
|
@@ -246,19 +412,93 @@ type FlamebearerProfile = {
|
|
|
246
412
|
|
|
247
413
|
## 6. 样式与主题
|
|
248
414
|
|
|
415
|
+
### 6.1 核心样式
|
|
416
|
+
|
|
249
417
|
* 核心样式源文件为:`src/sass/flamegraph.scss`
|
|
250
418
|
* 浏览器入口 `src/index.tsx` 中默认会导入该样式文件:
|
|
251
419
|
|
|
252
420
|
* `import './sass/flamegraph.scss'`
|
|
253
|
-
* Rollup + PostCSS + Sass 会在构建时将其编译为 CSS,并在运行时自动注入 `<style>` 标签,不再额外生成独立的 `dist/index.css`
|
|
421
|
+
* Rollup + PostCSS + Sass 会在构建时将其编译为 CSS,并在运行时自动注入 `<style>` 标签,不再额外生成独立的 `dist/index.css` 等文件。
|
|
254
422
|
|
|
255
423
|
`package.json` 中已将 `*.css` / `*.scss` 标记为 `sideEffects`,确保在使用方构建时不会被错误 Tree-Shaking 掉。
|
|
256
424
|
|
|
257
|
-
|
|
425
|
+
默认情况下,组件会包裹在一个自定义元素 `<pyro-flamegraph>` 内部,在 `flamegraph.scss` 中会对该元素设置基础字体、颜色等样式,方便在不同业务系统中保持一致的视觉基线。
|
|
426
|
+
|
|
427
|
+
### 6.2 主题与 CSS 变量
|
|
428
|
+
|
|
429
|
+
主题相关的 CSS 变量主要定义在:
|
|
430
|
+
|
|
431
|
+
* `src/sass/_css-variables.scss`
|
|
258
432
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
*
|
|
433
|
+
关键点:
|
|
434
|
+
|
|
435
|
+
* **暗色主题**:由 `:root` / `[data-theme='dark']` / `[data-flamegraph-color-mode='dark']` 控制
|
|
436
|
+
* **浅色基础主题**:`[data-theme='light']` / `[data-theme='kylin']` / `[data-flamegraph-color-mode='light']` / `[data-flamegraph-color-mode='kylin']`
|
|
437
|
+
* **Kylin 主题微调**:`[data-theme='kylin']` / `[data-flamegraph-color-mode='kylin']` 会在浅色基础上做进一步调整(更接近 Ant Design)
|
|
438
|
+
|
|
439
|
+
`Box` 组件会在自身 `div` 上挂载:
|
|
440
|
+
|
|
441
|
+
```html
|
|
442
|
+
<div data-theme="dark" | "light" | "kylin">...</div>
|
|
443
|
+
```
|
|
444
|
+
|
|
445
|
+
`FlamegraphRenderer` 会在内部元素上挂载:
|
|
446
|
+
|
|
447
|
+
```html
|
|
448
|
+
<div data-flamegraph-color-mode="dark" | "light" | "kylin">...</div>
|
|
449
|
+
```
|
|
450
|
+
|
|
451
|
+
你可以通过在外层容器覆盖部分变量来自定义主题,例如:
|
|
452
|
+
|
|
453
|
+
```css
|
|
454
|
+
/* 调整 Kylin 主题下的表格高亮行与 header 底色 */
|
|
455
|
+
.kylin-pyroscope-flamegraph {
|
|
456
|
+
--ps-table-highlight-row-bg: #e6f4ff;
|
|
457
|
+
--ps-table-highlight-row-text: #000000;
|
|
458
|
+
--ps-table-header-bg: #ffffff;
|
|
459
|
+
--ps-table-header-text: #000000;
|
|
460
|
+
}
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
### 6.3 Diff 模式表格滚动与表头固定
|
|
464
|
+
|
|
465
|
+
在差分火焰图(`flamebearer.format === 'double'`)下,内部会给表格容器增加类似结构:
|
|
466
|
+
|
|
467
|
+
```html
|
|
468
|
+
<div class="flamegraph-table-wrapper flamegraph-table-wrapper--double">
|
|
469
|
+
<div class="flamegraph-table-scroll">
|
|
470
|
+
<table class="flamegraph-table"> ... </table>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
```
|
|
474
|
+
|
|
475
|
+
行为说明:
|
|
476
|
+
|
|
477
|
+
* `.flamegraph-table-scroll`:
|
|
478
|
+
|
|
479
|
+
* 具有最大高度与 `overflow-y: auto`,只在 Diff 模式下生效
|
|
480
|
+
* 默认最大高度通过 CSS 变量控制:
|
|
481
|
+
|
|
482
|
+
* `max-height: var(--kylin-flamegraph-table-max-height, 1000px);`
|
|
483
|
+
* `thead`:
|
|
484
|
+
|
|
485
|
+
* 使用 `position: sticky; top: 0;` 固定在滚动容器顶部
|
|
486
|
+
* 使用 `--ps-table-header-bg` / `--ps-table-header-text` 控制表头底色和文字颜色,确保不透明,避免滚动时内容透出
|
|
487
|
+
|
|
488
|
+
在业务侧可以通过覆盖 CSS 变量调整体验,例如:
|
|
489
|
+
|
|
490
|
+
```css
|
|
491
|
+
/* 将 Diff 表格最大高度调整为 2000px */
|
|
492
|
+
.kylin-pyroscope-flamegraph {
|
|
493
|
+
--kylin-flamegraph-table-max-height: 2000px;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
/* 自定义浅色主题下的 header 底色 */
|
|
497
|
+
.kylin-pyroscope-flamegraph {
|
|
498
|
+
--ps-table-header-bg: #fafafa;
|
|
499
|
+
--ps-table-header-text: #000000;
|
|
500
|
+
}
|
|
501
|
+
```
|
|
262
502
|
|
|
263
503
|
---
|
|
264
504
|
|
|
@@ -336,25 +576,27 @@ type FlamebearerProfile = {
|
|
|
336
576
|
pnpm run lint
|
|
337
577
|
```
|
|
338
578
|
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
579
|
+
说明:
|
|
580
|
+
|
|
581
|
+
* 旧版本使用的 esbuild 构建脚本已移除,当前仓库仅保留 Rollup 方案,避免多套构建链路带来的维护成本。
|
|
582
|
+
* 若需要在 CI 中校验,可至少执行:
|
|
583
|
+
|
|
584
|
+
* `pnpm run type-check`
|
|
585
|
+
* `pnpm run build`
|
|
346
586
|
|
|
347
587
|
---
|
|
348
588
|
|
|
349
589
|
## 8. 与上游项目的关系
|
|
350
590
|
|
|
351
|
-
* 本项目在工程结构与数据格式上与 Pyroscope 的 flamegraph
|
|
591
|
+
* 本项目在工程结构与数据格式上与 Pyroscope 的 flamegraph 组件保持高度兼容。
|
|
352
592
|
* 主要差异点集中在:
|
|
353
593
|
|
|
354
|
-
* 包名与发布渠道:使用 `@kylincloud/flamegraph
|
|
355
|
-
* 构建链路调整为 Rollup + PostCSS + Sass,自动注入样式,兼容 ESM / CJS / Node
|
|
356
|
-
*
|
|
357
|
-
*
|
|
594
|
+
* 包名与发布渠道:使用 `@kylincloud/flamegraph`。
|
|
595
|
+
* 构建链路调整为 Rollup + PostCSS + Sass,自动注入样式,兼容 ESM / CJS / Node 侧入口。
|
|
596
|
+
* 在类型声明、主题适配与 i18n 导出上进行了补充,便于在 TypeScript 环境与多语言环境中使用。
|
|
597
|
+
* 增加了 Sandwich 视图入口开关 `sandwich`,满足不同产品界面对交互复杂度的差异化需求。
|
|
598
|
+
* 针对麒麟内部项目新增 `kylin` 主题,适配 Ant Design 风格界面,并在 Diff 表格中增加了独立滚动 / sticky 表头等易用性增强。
|
|
599
|
+
* 后续可能增加更多与内部监控体系 / 智算平台联动的定制功能。
|
|
358
600
|
|
|
359
601
|
如需回溯或对比实现细节,可以参考源码中的注释与 commit 记录。
|
|
360
602
|
|
|
@@ -371,9 +613,9 @@ type FlamebearerProfile = {
|
|
|
371
613
|
|
|
372
614
|
建议遵循:
|
|
373
615
|
|
|
374
|
-
1. 所有 PR 保持 `pnpm run type-check` 与 `pnpm run lint`
|
|
375
|
-
2. 尽量避免破坏现有公开 API;如有必要,务必在 `CHANGELOG.md` 与本 README
|
|
376
|
-
3. 对关键交互(如 Diff
|
|
616
|
+
1. 所有 PR 保持 `pnpm run type-check` 与 `pnpm run lint` 通过。
|
|
617
|
+
2. 尽量避免破坏现有公开 API;如有必要,务必在 `CHANGELOG.md` 与本 README 中标注。
|
|
618
|
+
3. 对关键交互(如 Diff 视图、搜索、高亮、Sandwich 视图、Diff 表格滚动)补充最小可复现示例或 demo 代码。
|
|
377
619
|
|
|
378
620
|
---
|
|
379
621
|
|
|
@@ -381,5 +623,5 @@ type FlamebearerProfile = {
|
|
|
381
623
|
|
|
382
624
|
本项目使用 **Apache-2.0** 许可证发布。
|
|
383
625
|
|
|
384
|
-
如在外部开源,请确保保留上游版权与许可证声明,并补充
|
|
626
|
+
如在外部开源,请确保保留上游版权与许可证声明,并补充 `@kylincloud` 的版权信息。
|
|
385
627
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DiffLegendPaletteDropdown.d.ts","sourceRoot":"","sources":["../../../src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DiffLegendPaletteDropdown.d.ts","sourceRoot":"","sources":["../../../src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAexB,UAAU,8BAA8B;IAEtC,OAAO,EAAE,iBAAiB,CAAC;IAE3B,QAAQ,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,yBAAyB,UAC7B,8BAA8B,4CAkEtC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { Flamebearer } from '../../models';
|
|
2
|
-
import { FlamegraphPalette } from './colorPalette';
|
|
3
2
|
interface HeaderProps {
|
|
4
3
|
format: Flamebearer['format'];
|
|
5
4
|
units: Flamebearer['units'];
|
|
6
|
-
palette: FlamegraphPalette;
|
|
7
|
-
setPalette: (p: FlamegraphPalette) => void;
|
|
8
5
|
toolbarVisible?: boolean;
|
|
9
6
|
}
|
|
10
7
|
export default function Header(props: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/FlameGraph/FlameGraphComponent/Header.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/FlameGraph/FlameGraphComponent/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,UAAU,WAAW;IACnB,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC9B,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,2CA8ChD"}
|
|
@@ -31,6 +31,8 @@ interface FlamegraphProps {
|
|
|
31
31
|
headerVisible?: boolean;
|
|
32
32
|
disableClick?: boolean;
|
|
33
33
|
showSingleLevel?: boolean;
|
|
34
|
+
/** 是否显示右键菜单中的「打开 Sandwich 视图」项,默认 true */
|
|
35
|
+
enableSandwichView?: boolean;
|
|
34
36
|
}
|
|
35
37
|
export default function FlameGraphComponent(props: FlamegraphProps): import("react/jsx-runtime").JSX.Element;
|
|
36
38
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FlameGraph/FlameGraphComponent/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,UAAU,MAAM,cAAc,CAAC;AAStC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAsB,MAAM,uBAAuB,CAAC;AAIrE,UAAU,eAAe;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,qBAAqB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,OAAO,EAAE,qBAAqB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,qBAAqB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,IAAI,EAAE,qBAAqB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE5B,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACvD,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAEpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC;IAEvB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,UAAU,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FlameGraph/FlameGraphComponent/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,UAAU,MAAM,cAAc,CAAC;AAStC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAsB,MAAM,uBAAuB,CAAC;AAIrE,UAAU,eAAe;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,qBAAqB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,OAAO,EAAE,qBAAqB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,qBAAqB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,IAAI,EAAE,qBAAqB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE5B,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACvD,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAEpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC;IAEvB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,UAAU,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,eAAe,2CAkWjE"}
|
|
@@ -29,6 +29,7 @@ export interface FlamegraphRendererProps {
|
|
|
29
29
|
id: string;
|
|
30
30
|
};
|
|
31
31
|
children?: ReactNode;
|
|
32
|
+
enableSandwichView?: boolean;
|
|
32
33
|
}
|
|
33
34
|
interface FlamegraphRendererState {
|
|
34
35
|
/** A dirty flamegraph refers to a flamegraph where its original state can be reset */
|
|
@@ -80,6 +81,7 @@ declare class FlameGraphRenderer extends Component<FlamegraphRendererProps, Flam
|
|
|
80
81
|
updateFitMode: (newFitMode: FitModes) => void;
|
|
81
82
|
isDirty: () => boolean;
|
|
82
83
|
shouldShowToolbar(): boolean;
|
|
84
|
+
handleSetPalette: (p: typeof DefaultPalette) => void;
|
|
83
85
|
render: () => import("react/jsx-runtime").JSX.Element;
|
|
84
86
|
}
|
|
85
87
|
export default FlameGraphRenderer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlameGraphRenderer.d.ts","sourceRoot":"","sources":["../../src/FlameGraph/FlameGraphRenderer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FlameGraphRenderer.d.ts","sourceRoot":"","sources":["../../src/FlameGraph/FlameGraphRenderer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +1,37 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { FlamegraphRendererProps as InnerFlamegraphRendererProps } from './FlameGraph/FlameGraphRenderer';
|
|
2
|
+
import type { FlamegraphRendererProps as InnerFlamegraphRendererProps } from './FlameGraph/FlameGraphRenderer';
|
|
3
3
|
import './sass/flamegraph.scss';
|
|
4
|
-
import {
|
|
4
|
+
import type { FlamegraphMessages } from './i18n';
|
|
5
|
+
/** 对外暴露的 locale 类型 */
|
|
6
|
+
export type FlamegraphLocale = 'auto' | 'en' | 'zh-CN';
|
|
5
7
|
export type FlamegraphRendererProps = Omit<InnerFlamegraphRendererProps, 'showPyroscopeLogo'> & {
|
|
6
8
|
/** 颜色模式:原生 light/dark + 新增 kylin */
|
|
7
9
|
colorMode?: 'light' | 'dark' | 'kylin';
|
|
8
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* 文案覆盖:
|
|
12
|
+
* - 如果显式传入 i18n,则优先使用这一套(不再根据 locale 推断)
|
|
13
|
+
* - 如果不传,则根据 locale(或浏览器语言)自动选择内置英文 / 中文
|
|
14
|
+
*/
|
|
9
15
|
i18n?: Partial<FlamegraphMessages>;
|
|
16
|
+
/**
|
|
17
|
+
* 语言设置:
|
|
18
|
+
* - 不传时等价于 "auto"
|
|
19
|
+
* - "auto" 表示根据浏览器语言(navigator.language)自动选择
|
|
20
|
+
* - "en" / "zh-CN" 为强制指定
|
|
21
|
+
*/
|
|
22
|
+
locale?: FlamegraphLocale;
|
|
23
|
+
/** 是否开启三明治视图菜单 */
|
|
24
|
+
sandwich?: boolean;
|
|
10
25
|
};
|
|
11
26
|
declare global {
|
|
12
27
|
namespace JSX {
|
|
13
28
|
interface IntrinsicElements {
|
|
14
|
-
'pyro-flamegraph': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement
|
|
29
|
+
'pyro-flamegraph': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
|
|
30
|
+
profile?: any;
|
|
31
|
+
};
|
|
15
32
|
}
|
|
16
33
|
}
|
|
17
34
|
}
|
|
18
|
-
|
|
35
|
+
declare const FlamegraphRenderer: React.FC<FlamegraphRendererProps>;
|
|
36
|
+
export { FlamegraphRenderer };
|
|
19
37
|
//# sourceMappingURL=FlamegraphRenderer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlamegraphRenderer.d.ts","sourceRoot":"","sources":["../src/FlamegraphRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FlamegraphRenderer.d.ts","sourceRoot":"","sources":["../src/FlamegraphRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,uBAAuB,IAAI,4BAA4B,EACxD,MAAM,iCAAiC,CAAC;AAEzC,OAAO,wBAAwB,CAAC;AAOhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAOjD,sBAAsB;AACtB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,4BAA4B,EAC5B,mBAAmB,CACpB,GAAG;IACF,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAEvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAEnC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,kBAAkB;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAGF,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CACxC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ,GAAG;gBACF,OAAO,CAAC,EAAE,GAAG,CAAC;aACf,CAAC;SACH;KACF;CACF;AA2DD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAoBzD,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProfilerTable.d.ts","sourceRoot":"","sources":["../src/ProfilerTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAU,SAAS,EAAiB,MAAM,OAAO,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAsB,WAAW,EAAE,MAAM,UAAU,CAAC;AAe3D,OAAO,EAAoB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AA2IvF,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,iBAAiB,EAC1B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,EACjC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GACf,KAAK,CAAC,aAAa,CA4BrB;AAqMD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,oBAAoB,EAAE,CAAC,SAAS,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE5B,YAAY,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;CAClD;AA2FD,QAAA,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"ProfilerTable.d.ts","sourceRoot":"","sources":["../src/ProfilerTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAU,SAAS,EAAiB,MAAM,OAAO,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAsB,WAAW,EAAE,MAAM,UAAU,CAAC;AAe3D,OAAO,EAAoB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AA2IvF,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,iBAAiB,EAC1B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,EACjC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GACf,KAAK,CAAC,aAAa,CA4BrB;AAqMD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,oBAAoB,EAAE,CAAC,SAAS,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE5B,YAAY,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;CAClD;AA2FD,QAAA,MAAM,aAAa,sEA4CjB,CAAC;AAEH,eAAe,aAAa,CAAC"}
|
package/dist/Toolbar.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { Maybe } from 'true-myth';
|
|
|
3
3
|
import { FitModes } from './fitMode/fitMode';
|
|
4
4
|
import type { ViewTypes } from './FlameGraph/FlameGraphComponent/viewTypes';
|
|
5
5
|
import type { FlamegraphRendererProps } from './FlameGraph/FlameGraphRenderer';
|
|
6
|
+
import { FlamegraphPalette } from './FlameGraph/FlameGraphComponent/colorPalette';
|
|
6
7
|
export interface ProfileHeaderProps {
|
|
7
8
|
view: ViewTypes;
|
|
8
9
|
enableChangingDisplay?: boolean;
|
|
@@ -25,7 +26,9 @@ export interface ProfileHeaderProps {
|
|
|
25
26
|
}>;
|
|
26
27
|
onFocusOnSubtree: (i: number, j: number) => void;
|
|
27
28
|
sharedQuery?: FlamegraphRendererProps['sharedQuery'];
|
|
29
|
+
palette?: FlamegraphPalette;
|
|
30
|
+
setPalette?: (p: FlamegraphPalette) => void;
|
|
28
31
|
}
|
|
29
|
-
declare const Toolbar: React.MemoExoticComponent<({ view, handleSearchChange, highlightQuery, isFlamegraphDirty, reset, updateFitMode, fitMode, updateView, selectedNode, onFocusOnSubtree, flamegraphType, enableChangingDisplay, sharedQuery, ExportData, }: ProfileHeaderProps) => import("react/jsx-runtime").JSX.Element>;
|
|
32
|
+
declare const Toolbar: React.MemoExoticComponent<({ view, handleSearchChange, highlightQuery, isFlamegraphDirty, reset, updateFitMode, fitMode, updateView, selectedNode, onFocusOnSubtree, flamegraphType, enableChangingDisplay, sharedQuery, ExportData, palette, setPalette, }: ProfileHeaderProps) => import("react/jsx-runtime").JSX.Element>;
|
|
30
33
|
export default Toolbar;
|
|
31
34
|
//# sourceMappingURL=Toolbar.d.ts.map
|
package/dist/Toolbar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../src/Toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,SAAS,EAOV,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAQlC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../src/Toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,SAAS,EAOV,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAQlC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AA0FlF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,SAAS,CAAC;IAChB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACpC,kBAAkB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,kEAAkE;IAClE,iBAAiB,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,QAAQ,CAAC;IAClB,UAAU,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9C,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAC;IAGrD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC7C;AASD,QAAA,MAAM,OAAO,+PAkBR,kBAAkB,6CA0JtB,CAAC;AA4KF,eAAe,OAAO,CAAC"}
|
package/dist/i18n.d.ts
CHANGED
|
@@ -40,6 +40,8 @@ export type FlamegraphMessages = {
|
|
|
40
40
|
diffLegendSelectPalette: string;
|
|
41
41
|
paletteDefaultName: string;
|
|
42
42
|
paletteColorBlindName: string;
|
|
43
|
+
paletteDefaultDesc: string;
|
|
44
|
+
paletteColorBlindDesc: string;
|
|
43
45
|
searchPlaceholder: string;
|
|
44
46
|
syncSearchBars: string;
|
|
45
47
|
unsyncSearchBars: string;
|