@kylincloud/flamegraph 0.35.27 → 0.35.29

package/dist/shims/Table.d.ts

@@ -29,6 +29,15 @@ export type TableBodyType = {
 } | {
     type: 'filled';
     bodyRows: BodyRow[];
+} | {
+    type: 'virtual';
+    rowCount: number;
+    rows: BodyRow[];
+    range: {
+        start: number;
+        end: number;
+    };
+    onRangeChange?: (start: number, end: number) => void;
 };
 type Table = TableBodyType & {
     headRow: HeadCell[];
@@ -48,7 +57,12 @@ interface TableProps {
     className?: string;
     isLoading?: boolean;
     itemsPerPage?: number;
+    virtualize?: boolean;
+    virtualizeRowHeight?: number;
+    virtualizeOverscan?: number;
+    scrollRef?: RefObject<HTMLElement>;
+    disableSort?: boolean;
 }
-declare function Table({ sortByDirection, sortBy, updateSortParams, table, tableBodyRef, className, isLoading, itemsPerPage, }: TableProps): import("react/jsx-runtime").JSX.Element;
+declare function Table({ sortByDirection, sortBy, updateSortParams, table, tableBodyRef, className, isLoading, itemsPerPage, virtualize, virtualizeRowHeight, virtualizeOverscan, scrollRef, disableSort, }: TableProps): import("react/jsx-runtime").JSX.Element;
 export default Table;
 //# sourceMappingURL=Table.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAGZ,SAAS,EACT,aAAa,EACb,SAAS,EAGV,MAAM,OAAO,CAAC;AAUf,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,GACC;IACA,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD,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;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAEnC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA0CD,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,EACZ,UAAU,EACV,mBAAmB,EACnB,kBAAsB,EACtB,SAAS,EACT,WAAW,GACZ,EAAE,UAAU,2CA0OZ;AA2DD,eAAe,KAAK,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/shims/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AA2BD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAe1C,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/shims/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AA2BD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0C1C,CAAA"}

package/dist/workers/createFlamegraphRenderWorker.d.ts

@@ -0,0 +1,2 @@
+export declare function createFlamegraphRenderWorker(): Worker;
+//# sourceMappingURL=createFlamegraphRenderWorker.d.ts.map

package/dist/workers/createFlamegraphRenderWorker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFlamegraphRenderWorker.d.ts","sourceRoot":"","sources":["../../src/workers/createFlamegraphRenderWorker.ts"],"names":[],"mappings":"AAAA,wBAAgB,4BAA4B,IAAI,MAAM,CAMrD"}

package/dist/workers/flamegraphRenderWorker.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=flamegraphRenderWorker.d.ts.map

package/dist/workers/flamegraphRenderWorker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flamegraphRenderWorker.d.ts","sourceRoot":"","sources":["../../src/workers/flamegraphRenderWorker.ts"],"names":[],"mappings":""}

package/dist/workers/profilerTableWorker.d.ts

@@ -0,0 +1,73 @@
+export type ProfilerTableWorkerRow = {
+    type: 'single';
+    name: string;
+    self: number;
+    total: number;
+} | {
+    type: 'double';
+    name: string;
+    totalLeft: number;
+    totalRght: number;
+    leftTicks: number;
+    rightTicks: number;
+};
+export type ProfilerTableWorkerRequest = {
+    type: 'init';
+    payload: {
+        flamebearer: {
+            names: string[];
+            levels: number[][];
+            format: 'single' | 'double';
+            leftTicks?: number;
+            rightTicks?: number;
+        };
+        sortBy: string;
+        sortByDirection: 'asc' | 'desc';
+        highlightQuery: string;
+    };
+} | {
+    type: 'update';
+    payload: {
+        sortBy: string;
+        sortByDirection: 'asc' | 'desc';
+        highlightQuery: string;
+    };
+} | {
+    type: 'range';
+    payload: {
+        start: number;
+        end: number;
+        requestId: number;
+    };
+} | {
+    type: 'findNode';
+    payload: {
+        name: string;
+        requestId: number;
+    };
+};
+export type ProfilerTableWorkerResponse = {
+    type: 'ready';
+    payload: {
+        rowCount: number;
+    };
+} | {
+    type: 'range';
+    payload: {
+        rows: ProfilerTableWorkerRow[];
+        start: number;
+        end: number;
+        requestId: number;
+    };
+} | {
+    type: 'findNode';
+    payload: {
+        node: {
+            i: number;
+            j: number;
+        } | null;
+        requestId: number;
+    };
+};
+export declare function createProfilerTableWorker(): Worker;
+//# sourceMappingURL=profilerTableWorker.d.ts.map

package/dist/workers/profilerTableWorker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profilerTableWorker.d.ts","sourceRoot":"","sources":["../../src/workers/profilerTableWorker.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAC9B;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,0BAA0B,GAClC;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QACP,WAAW,EAAE;YACX,KAAK,EAAE,MAAM,EAAE,CAAC;YAChB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;YACnB,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC;YAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,MAAM,EAAE,MAAM,CAAC;QACf,eAAe,EAAE,KAAK,GAAG,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE;QACP,MAAM,EAAE,MAAM,CAAC;QACf,eAAe,EAAE,KAAK,GAAG,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEN,MAAM,MAAM,2BAA2B,GACnC;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE;QACP,IAAI,EAAE,sBAAsB,EAAE,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE;QACP,IAAI,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;QACtC,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEN,wBAAgB,yBAAyB,IAAI,MAAM,CA+RlD"}

package/package.json

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

package/src/FlameGraph/FlameGraphComponent/DiffLegend.module.css

@@ -1,7 +1,11 @@
 .flamegraph-legend {
   display: flex;
   align-items: center;
-  font-size: 11px;
+  font-size: var(--legend-font-size, 11px);
+  line-height: var(--legend-line-height, 1);
+  --legend-item-width: 37px;
+  --legend-item-padding: 0;
+  --legend-item-height: auto;
   justify-content: center;
 }
 
@@ -11,7 +15,9 @@
 }
 
 .flamegraph-legend-item {
-  width: 37px;
+  width: var(--legend-item-width, 37px);
+  height: var(--legend-item-height, auto);
+  padding: var(--legend-item-padding, 0);
   text-align: center;
 
   /* if for some reason the contents can't fit 

package/src/FlameGraph/FlameGraphComponent/DiffLegend.tsx

@@ -14,11 +14,22 @@ export default function DiffLegend(props: DiffLegendProps) {
   const values = decideLegend(showMode);
 
   const color = NewDiffColor(palette);
+  const compactLegendStyle =
+    showMode === 'small'
+      ? ({
+          '--legend-item-width': '32px',
+          '--legend-item-padding': '2px 2px',
+          '--legend-font-size': '10px',
+          '--legend-line-height': '1.1',
+          '--legend-item-height': '16px',
+        } as React.CSSProperties)
+      : undefined;
 
   return (
     <div
       data-testid="flamegraph-legend"
       className={`${styles['flamegraph-legend']} ${styles['flamegraph-legend-list']}`}
+      style={compactLegendStyle}
     >
       {values.map((v) => (
         <div
@@ -43,7 +54,7 @@ function decideLegend(showMode: sizeMode) {
     }
 
     case 'small': {
-      return [-100, -40, -20, 0, 20, 40, 100];
+      return [-100, -50, 0, 50, 100];
     }
 
     default:

package/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.module.css

@@ -10,38 +10,116 @@
 .triggerButton {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
+  gap: 4px;
+  padding: 2px 16px 2px 6px;
   border: 1px solid var(--ps-ui-border);
   border-radius: 4px;
-  background-color: var(--ps-immutable-off-white);
+  background-color: transparent;
   cursor: pointer;
-  height: 37px;
+  height: 32px;
+  margin-right: 0;
 }
 
 .triggerButton:hover {
-  background-color: var(--ps-ui-element-bg-highlight);
+  background-color: transparent;
+  border-color: #6aa27d;
+}
+
+.triggerButton:focus-visible,
+.triggerButton[aria-expanded='true'] {
+  border-color: #3c7150;
+  box-shadow: 0 0 0 3px rgba(60, 113, 80, 0.22);
+}
+
+.triggerButton::after {
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  font-size: 10px;
 }
 
 .dropdownArrow {
   font-size: 8px;
   color: var(--ps-text-secondary);
-  margin-left: 4px;
+  margin-left: 2px;
 }
 
 /* 菜单项样式 */
 .menuItem {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 200px;
-  padding: 4px 0;
+  justify-content: flex-start;
+  gap: 6px;
+  min-width: 148px;
+  padding: 4px 8px;
 }
 
 .menuItemText {
   color: var(--ps-text-primary);
   font-size: 13px;
+  line-height: 1.2;
+}
+
+.dropdownMenu :global(.szh-menu__header) {
+  padding: 6px 12px 4px;
+  color: #8a8f99;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+}
+
+.dropdownMenu :global(.szh-menu) {
+  margin-top: 4px;
+  transform-origin: top center;
+  animation: dropdownZoomIn 0.18s ease-out;
+}
+
+.menuItemWrapper {
+  background-color: transparent !important;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  margin: 2px 6px;
+  padding: 0;
+}
+
+.menuItemSelected {
+  background-color: rgba(93, 151, 111, 0.38) !important;
+  border-color: transparent;
+}
+
+.menuItemSelected .menuItemText {
+  font-weight: 600;
+}
+
+.menuItemWrapper:global(.szh-menu__item--hover),
+.menuItemWrapper:global(.szh-menu__item--focus),
+.menuItemWrapper:global(.szh-menu__item--active) {
+  background-color: #f5f5f5 !important;
+  border-color: transparent;
+}
+
+.menuItemSelected:global(.szh-menu__item--hover),
+.menuItemSelected:global(.szh-menu__item--focus),
+.menuItemSelected:global(.szh-menu__item--active) {
+  background-color: rgba(93, 151, 111, 0.38) !important;
+  border-color: transparent;
+}
+
+@keyframes dropdownZoomIn {
+  from {
+    opacity: 0;
+    transform: scaleY(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropdownMenu :global(.szh-menu) {
+    animation: none;
+  }
 }
 
 /* ========== 以下为旧样式，保留兼容性 ========== */
@@ -86,3 +164,8 @@
   height: 16px;
   flex-shrink: 0;
 }
+
+:global([data-theme='kylin']) .triggerButton {
+  height: 28px;
+  padding: 1px 14px 1px 6px;
+}

package/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx

@@ -8,7 +8,6 @@ import {
   FlamegraphPalette,
 } from './colorPalette';
 import DiffLegend from './DiffLegend';
-import CheckIcon from './CheckIcon';
 // 在把通用 UI 抽成独立包之前，临时复用 shims 目录下的 Dropdown 封装
 // eslint-disable-next-line
 import Dropdown, { MenuItem, MenuButton } from '../../shims/Dropdown';
@@ -62,6 +61,7 @@ export const DiffLegendPaletteDropdown = (
         // 下拉菜单的无障碍 label 文案（i18n）
         label={messages.diffLegendSelectPalette}
         align="end"
+        className={styles.dropdownMenu}
         menuButton={
           <MenuButton
             className={cx(
@@ -82,13 +82,18 @@ export const DiffLegendPaletteDropdown = (
         }}
       >
         {paletteList.map((p) => (
-          <MenuItem key={p.name} value={p}>
+          <MenuItem
+            key={p.name}
+            value={p}
+            className={cx(
+              styles.menuItemWrapper,
+              p.name === palette.name && styles.menuItemSelected
+            )}
+          >
             <div className={styles.menuItem}>
               <span className={styles.menuItemText}>
                 {getPaletteName(p)} {getPaletteColorDesc(p)}
               </span>
-              {/* 当前选中的调色板右侧展示对勾图标 */}
-              {p.name === palette.name && <CheckIcon />}
             </div>
           </MenuItem>
         ))}

package/src/FlameGraph/FlameGraphComponent/Flamegraph.ts

@@ -28,7 +28,7 @@ export default class Flamegraph {
 
   constructor(
     private readonly flamebearer: Flamebearer,
-    private canvas: HTMLCanvasElement,
+    private canvas: HTMLCanvasElement | OffscreenCanvas,
     /**
      * What node to be 'focused'
      * ie what node to start the tree
@@ -75,11 +75,26 @@ export default class Flamegraph {
     }
   }
 
-  public render(options?: { renderRects?: boolean; renderText?: boolean }) {
+  public render(options?: {
+    renderRects?: boolean;
+    renderText?: boolean;
+    highlightQueryOverride?: string;
+    renderMode?: 'normal' | 'highlightOnly' | 'forceGrey';
+    levelStart?: number;
+    levelEnd?: number;
+    startI?: number;
+    startJ?: number;
+    timeBudgetMs?: number;
+    skipCanvasResize?: boolean;
+    skipDprScale?: boolean;
+    devicePixelRatio?: number;
+  }): { done: boolean; nextI: number; nextJ: number } {
     const { rangeMin, rangeMax, pxPerTick } = this.updateCachedMetrics();
     const tickToX = (i: number) => {
       return (i - this.flamebearer.numTicks * rangeMin) * pxPerTick;
     };
+    const highlightQuery =
+      options?.highlightQueryOverride ?? this.highlightQuery;
 
     const props = {
       canvas: this.canvas,
@@ -99,7 +114,7 @@ export default class Flamegraph {
       rangeMin,
       rangeMax,
       fitMode: this.fitMode,
-      highlightQuery: this.highlightQuery,
+      highlightQuery,
       zoom: this.zoom,
       focusedNode: this.focusedNode,
       pxPerTick,
@@ -108,22 +123,29 @@ export default class Flamegraph {
       messages: this.messages,
       renderRects: options?.renderRects,
       renderText: options?.renderText,
+      renderMode: options?.renderMode,
+      levelStart: options?.levelStart,
+      levelEnd: options?.levelEnd,
+      startI: options?.startI,
+      startJ: options?.startJ,
+      timeBudgetMs: options?.timeBudgetMs,
+      skipCanvasResize: options?.skipCanvasResize,
+      skipDprScale: options?.skipDprScale,
+      devicePixelRatio: options?.devicePixelRatio,
     };
 
     const { format: viewType } = this.flamebearer;
 
     switch (viewType) {
       case 'single': {
-        RenderCanvas({ ...props, format: 'single' });
-        break;
+        return RenderCanvas({ ...props, format: 'single' });
       }
       case 'double': {
-        RenderCanvas({
+        return RenderCanvas({
           ...props,
           leftTicks: this.flamebearer.leftTicks,
           rightTicks: this.flamebearer.rightTicks,
         });
-        break;
       }
       default: {
         throw new Error(`Invalid format: '${viewType}'`);
@@ -256,7 +278,10 @@ export default class Flamegraph {
 
   private getCanvasWidth() {
     // bit of a hack, but clientWidth is not available in node-canvas
-    return this.canvas.clientWidth || this.canvas.width;
+    if ('clientWidth' in this.canvas && typeof this.canvas.clientWidth === 'number') {
+      return this.canvas.clientWidth;
+    }
+    return this.canvas.width;
   }
 
   private isFocused() {