@kylincloud/flamegraph 0.35.21 → 0.35.23

package/dist/shims/Table.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, CSSProperties, RefObject } from 'react';
+import React, { ReactNode, CSSProperties, RefObject } from 'react';
 interface CustomProp {
-    [k: string]: string | CSSProperties | ReactNode | number | undefined;
+    [k: string]: string | CSSProperties | ReactNode | number | undefined | ((e: React.MouseEvent) => void) | (() => void);
 }
 export interface Cell extends CustomProp {
     value: ReactNode | string;
@@ -18,6 +18,8 @@ export interface BodyRow {
     isRowDisabled?: boolean;
     cells: Cell[];
     onClick?: () => void;
+    onDoubleClick?: () => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
     className?: string;
 }
 export type TableBodyType = {

package/dist/shims/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AACA,OAAc,EAAY,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7E,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;CACtE;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACE,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEN,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CA0FZ;AA2DD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAoB,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUrF,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;CACvH;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACA,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACC;IACA,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEJ,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0CD,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CAkEZ;AA2DD,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kylincloud/flamegraph",
-  "version": "0.35.21",
+  "version": "0.35.23",
   "description": "KylinCloud flamegraph renderer (Pyroscope-based)",
   "license": "Apache-2.0",
   "main": "dist/index.node.cjs.js",

package/src/FlameGraph/FlameGraphComponent/Flamegraph.ts

@@ -12,7 +12,7 @@ import { PX_PER_LEVEL, BAR_HEIGHT, COLLAPSE_THRESHOLD } from './constants';
 import type { FlamegraphPalette } from './colorPalette';
 // there's a dependency cycle here but it should be fine
 /* eslint-disable-next-line import/no-cycle */
-import RenderCanvas from './Flamegraph_render';
+import RenderCanvas, { CanvasI18nMessages } from './Flamegraph_render';
 
 /* eslint-disable no-useless-constructor */
 
@@ -47,7 +47,10 @@ export default class Flamegraph {
     private readonly highlightQuery: string,
     private zoom: Maybe<DeepReadonly<{ i: number; j: number }>>,
 
-    private palette: FlamegraphPalette
+    private palette: FlamegraphPalette,
+
+    /** i18n messages for canvas rendering */
+    private messages?: CanvasI18nMessages
   ) {
     // TODO
     // these were only added because storybook is not setting
@@ -59,6 +62,7 @@ export default class Flamegraph {
     this.highlightQuery = highlightQuery;
     this.ff = createFF(flamebearer.format);
     this.palette = palette;
+    this.messages = messages;
 
     // don't allow to have a zoom smaller than the focus
     // since it does not make sense
@@ -96,6 +100,7 @@ export default class Flamegraph {
       pxPerTick: this.pxPerTick(),
       tickToX: this.tickToX,
       palette: this.palette,
+      messages: this.messages,
     };
 
     const { format: viewType } = this.flamebearer;

package/src/FlameGraph/FlameGraphComponent/Flamegraph_render.ts

@@ -49,6 +49,18 @@ import { isMatch } from '../../search';
 /* eslint-disable-next-line import/no-cycle */
 import Flamegraph from './Flamegraph';
 
+/** i18n messages needed for canvas rendering */
+export interface CanvasI18nMessages {
+  collapsedLevelsSingular: string;
+  collapsedLevelsPlural: string;
+}
+
+/** Default English messages (fallback) */
+const defaultCanvasMessages: CanvasI18nMessages = {
+  collapsedLevelsSingular: 'total (1 level collapsed)',
+  collapsedLevelsPlural: 'total ({n} levels collapsed)',
+};
+
 type CanvasRendererConfig = Flamebearer & {
   canvas: HTMLCanvasElement;
   focusedNode: ConstructorParameters<typeof Flamegraph>[2];
@@ -73,13 +85,30 @@ type CanvasRendererConfig = Flamebearer & {
 
   palette: FlamegraphPalette;
   maxSelf?: number;
+
+  /** i18n messages for collapsed text */
+  messages?: CanvasI18nMessages;
 };
 
+/**
+ * 生成 collapsed 层级的显示文本
+ */
+function getCollapsedText(
+  levelCount: number,
+  messages: CanvasI18nMessages
+): string {
+  if (levelCount === 1) {
+    return messages.collapsedLevelsSingular;
+  }
+  return messages.collapsedLevelsPlural.replace('{n}', String(levelCount));
+}
+
 export default function RenderCanvas(props: CanvasRendererConfig) {
   const { canvas, fitMode, units, tickToX, levels, palette } = props;
   const { numTicks, sampleRate, pxPerTick } = props;
   const { rangeMin, rangeMax } = props;
   const { focusedNode, zoom } = props;
+  const messages = props.messages || defaultCanvasMessages;
 
   const graphWidth = getCanvasWidth(canvas);
   // TODO: why is this needed? otherwise height is all messed up
@@ -134,10 +163,10 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
     ctx.fillStyle = colorGreyscale(200, 1).rgb().string();
     ctx.fill();
 
-    // TODO show the samples too?
+    // 使用 i18n 翻译的 collapsed 文本
     const shortName = focusedNode.mapOrElse(
       () => 'total',
-      (f) => `total (${f.i - 1} level(s) collapsed)`
+      (f) => getCollapsedText(f.i - 1, messages)
     );
 
     // Set the font syle

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -1,6 +1,6 @@
 // src/FlameGraph/FlameGraphComponent/index.tsx
 /* eslint-disable no-unused-expressions, import/no-extraneous-dependencies */
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
@@ -63,6 +63,15 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   const flamegraph = useRef<Flamegraph>();
   const i18n = useFlamegraphI18n();
 
+  // ====== 新增：提取 canvas 渲染需要的 i18n messages ======
+  const canvasMessages = useMemo(
+    () => ({
+      collapsedLevelsSingular: i18n.collapsedLevelsSingular,
+      collapsedLevelsPlural: i18n.collapsedLevelsPlural,
+    }),
+    [i18n.collapsedLevelsSingular, i18n.collapsedLevelsPlural]
+  );
+
   const [rightClickedNode, setRightClickedNode] = React.useState<
     Maybe<{ top: number; left: number; width: number }>
   >(Maybe.nothing());
@@ -291,17 +300,19 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         fitMode,
         highlightQuery,
         zoom,
-        palette
+        palette,
+        canvasMessages  // ====== 新增：传递 i18n messages ======
       );
 
       flamegraph.current = f;
     }
   };
 
+  // ====== 修改：添加 canvasMessages 依赖 ======
   React.useEffect(() => {
     constructCanvas();
     renderCanvas();
-  }, [palette]);
+  }, [palette, canvasMessages]);
 
   React.useEffect(() => {
     constructCanvas();

package/src/FlameGraph/FlameGraphRenderer.tsx

@@ -275,6 +275,55 @@ class FlameGraphRenderer extends Component<
     });
   };
 
+  /**
+   * 检查指定名称的函数是否在当前聚焦节点的子树中
+   */
+  isNameInFocusedSubtree = (name: string): boolean => {
+    const { focusedNode } = this.state.flamegraphConfigs;
+
+    // 如果没有聚焦节点，任何 name 都算"在子树中"
+    if (focusedNode.isNothing) {
+      return true;
+    }
+
+    const { flamebearer } = this.state;
+    if (!flamebearer || !flamebearer.levels) {
+      return true;
+    }
+
+    const { names, levels, format } = flamebearer;
+    const ff = createFF(format);
+    const focusedI = (focusedNode as any).value.i;
+    const focusedJ = (focusedNode as any).value.j;
+
+    // 获取聚焦节点的范围
+    const focusedLevel = levels[focusedI];
+    if (!focusedLevel) return true;
+
+    const focusedOffset = ff.getBarOffset(focusedLevel, focusedJ);
+    const focusedTotal = ff.getBarTotal(focusedLevel, focusedJ);
+    const focusedEnd = focusedOffset + focusedTotal;
+
+    // 遍历聚焦节点及其下面的所有层级，检查是否有匹配的函数名
+    for (let i = focusedI; i < levels.length; i++) {
+      const level = levels[i];
+      for (let j = 0; j < level.length; j += ff.jStep) {
+        const offset = ff.getBarOffset(level, j);
+        const total = ff.getBarTotal(level, j);
+
+        // 检查这个节点是否在聚焦范围内
+        if (offset >= focusedOffset && offset + total <= focusedEnd) {
+          const nameIndex = ff.getBarName(level, j);
+          if (names[nameIndex] === name) {
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  };
+
   setActiveItem = (item: { name: string }) => {
     const { name } = item;
 
@@ -288,10 +337,25 @@ class FlameGraphRenderer extends Component<
       }
     }
 
-    // clicking for the first time
-    this.setState({
-      selectedItem: Maybe.just(name),
-    });
+    // 检查选中的 item 是否在当前聚焦的子树中
+    // 如果不在，需要重置聚焦状态，以便在火焰图中正确显示高亮
+    const isInSubtree = this.isNameInFocusedSubtree(name);
+
+    if (isInSubtree) {
+      // 在子树中，只更新选中项
+      this.setState({
+        selectedItem: Maybe.just(name),
+      });
+    } else {
+      // 不在子树中，重置聚焦并更新选中项
+      this.setState({
+        selectedItem: Maybe.just(name),
+        flamegraphConfigs: {
+          ...this.state.flamegraphConfigs,
+          focusedNode: this.resetFlamegraphState.focusedNode,
+        },
+      });
+    }
   };
 
   getHighlightQuery = () => {
@@ -337,7 +401,7 @@ class FlameGraphRenderer extends Component<
     return (
       this.state.selectedItem.isJust ||
       JSON.stringify(this.initialFlamegraphState) !==
-        JSON.stringify(this.state.flamegraphConfigs)
+      JSON.stringify(this.state.flamegraphConfigs)
     );
   };
 
@@ -371,6 +435,10 @@ class FlameGraphRenderer extends Component<
           selectedItem={this.state.selectedItem}
           handleTableItemClick={this.setActiveItem}
           palette={this.state.palette}
+          // 新增：传递聚焦和视图切换能力给表格
+          onFocusOnNode={this.onFocusOnNode}
+          updateView={this.props.onlyDisplay ? undefined : this.updateView}
+          enableSandwichView={this.props.enableSandwichView}
         />
       </div>
     );
@@ -603,4 +671,4 @@ function decidePanesOrder(
   }
 }
 
-export default FlameGraphRenderer;
+export default FlameGraphRenderer;

package/src/ProfilerTable.module.scss

@@ -0,0 +1,42 @@
+// src/ProfilerTable.module.scss
+
+.tableContextMenu {
+  // 继承 react-menu 的基础样式
+  :global(.szh-menu) {
+    background-color: var(--ps-ui-background, #fff);
+    border: 1px solid var(--ps-ui-border, #ccc);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    padding: 4px 0;
+    min-width: 180px;
+    z-index: 1000;
+  }
+
+  :global(.szh-menu__item) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    color: var(--ps-ui-foreground-text, #333);
+    font-size: 13px;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: var(--ps-ui-element-bg-highlight, #f0f0f0);
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.sandwichItem {
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}