@kylincloud/flamegraph 0.35.8 → 0.35.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kylincloud/flamegraph",
-  "version": "0.35.8",
+  "version": "0.35.10",
   "description": "KylinCloud flamegraph renderer (Pyroscope-based)",
   "license": "Apache-2.0",
   "main": "dist/index.node.cjs.js",
@@ -80,6 +80,9 @@
     "build:js": "rollup -c",
     "build:assets": "cp src/logo-v3-small.svg dist/logo-v3-small.svg || true",
     "type-check": "tsc -p tsconfig.build.json --noEmit",
+    "dev:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --watch",
+    "dev:js": "rollup -c -w",
+    "dev": "pnpm run dev:js",
     "lint": "eslint ./ --cache --fix"
   }
 }

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

@@ -1,40 +1,88 @@
-.diffPaletteDropdown {
-  max-width: 510px;
-  min-width: 292px;
-  width: inherit;
-  padding-right: 20px !important;
-}
+/* src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.module.css */
 
-.dropdownWrapper {
+/* 容器 */
+.container {
   display: flex;
   align-items: center;
-  flex-direction: column;
 }
 
-.diffPaletteDropdown > div {
-  margin-bottom: 0px;
+/* 触发按钮：色带 + 下拉箭头 */
+.triggerButton {
   display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid var(--ps-ui-border);
+  border-radius: 4px;
+  background-color: var(--ps-immutable-off-white);
+  cursor: pointer;
+  height: 37px;
 }
 
-.diffPaletteDropdown::after {
-  top: 0px;
+.triggerButton:hover {
+  background-color: var(--ps-ui-element-bg-highlight);
 }
 
-.dropdownItem {
-  width: 100%;
+.dropdownArrow {
+  font-size: 8px;
+  color: var(--ps-text-secondary);
+  margin-left: 4px;
+}
+
+/* 菜单项样式 */
+.menuItem {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 200px;
+  padding: 4px 0;
 }
 
-.dropdownItem svg {
-  margin-left: 1em;
-  fill: var(--ps-neutral-2);
+.menuItemText {
+  color: var(--ps-text-primary);
+  font-size: 13px;
 }
 
+/* ========== 以下为旧样式，保留兼容性 ========== */
+
 .row {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
-  margin-left: auto;
-  margin-right: auto;
-  width: 300px;
-  height: 45px;
+  padding-bottom: 2px;
+}
+
+.row p {
+  font-size: 13px;
+  margin: 0;
+}
+
+.dropdownWrapper {
+  display: flex;
+}
+
+.diffPaletteDropdown {
+  cursor: pointer;
+  border: 1px solid var(--ps-ui-border);
+  border-radius: 4px;
+  padding: 4px 8px;
+  background-color: var(--ps-immutable-off-white);
+}
+
+.diffPaletteDropdown:hover {
+  background-color: var(--ps-ui-element-bg-highlight);
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.dropdownItem svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
 }

package/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx

@@ -1,7 +1,7 @@
 // src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx
+// 差分火焰图图例区域的「调色板选择下拉框」组件，用于切换色带样式
 import React from 'react';
 import cx from 'classnames';
-import useResizeObserver from '@react-hook/resize-observer';
 import {
   ColorBlindPalette,
   DefaultPalette,
@@ -9,7 +9,7 @@ import {
 } from './colorPalette';
 import DiffLegend from './DiffLegend';
 import CheckIcon from './CheckIcon';
-// Until we migrate ui to its own package this should do it
+// 在把通用 UI 抽成独立包之前，临时复用 shims 目录下的 Dropdown 封装
 // eslint-disable-next-line
 import Dropdown, { MenuItem, MenuButton } from '../../shims/Dropdown';
 // eslint-disable-next-line
@@ -18,10 +18,13 @@ import dropdownStyles from '../../shims/Dropdown.module.scss';
 import styles from './DiffLegendPaletteDropdown.module.css';
 import { useFlamegraphI18n } from '../../i18n';
 
+// 当前支持的调色板列表（默认 + 色盲友好）
 const paletteList = [DefaultPalette, ColorBlindPalette];
 
 interface DiffLegendPaletteDropdownProps {
+  // 当前选中的调色板
   palette: FlamegraphPalette;
+  // 调色板变化回调
   onChange: (p: FlamegraphPalette) => void;
 }
 
@@ -29,101 +32,69 @@ export const DiffLegendPaletteDropdown = (
   props: DiffLegendPaletteDropdownProps
 ) => {
   const { palette = DefaultPalette, onChange } = props;
-  const legendRef = React.useRef<HTMLDivElement>(null);
-  const showMode = useSizeMode(legendRef);
-
   const messages = useFlamegraphI18n();
 
-  const renderPaletteLabel = (name: string) => {
-    if (name === 'Default') {
+  // 获取调色板的显示名称（优先走 i18n 文案）
+  const getPaletteName = (p: FlamegraphPalette) => {
+    if (p.name === 'Default') {
       return messages.paletteDefaultName;
     }
-    if (name === 'Color Blind') {
+    if (p.name === 'Color Blind') {
       return messages.paletteColorBlindName;
     }
-    // 兜底：未知名字直接原样展示
-    return name;
+    return p.name;
   };
 
-  return (
-    <>
-      <div className={styles.row} role="heading" aria-level={2}>
-        <p style={{ color: palette.goodColor.rgb().string() }}>
-          {messages.diffLegendRemovedLabel}
-        </p>
-        <p style={{ color: palette.badColor.rgb().string() }}>
-          {messages.diffLegendAddedLabel}
-        </p>
-      </div>
-
-      <div ref={legendRef} className={styles.dropdownWrapper}>
-        <Dropdown
-          label={messages.diffLegendSelectPalette}
-          align="end"
-          menuButton={
-            <MenuButton
-              className={cx(
-                // eslint-disable-next-line
-                dropdownStyles.dropdownMenuButton,
-                styles.diffPaletteDropdown
-              )}
-            >
-              <DiffLegend palette={palette} showMode={showMode} />
-            </MenuButton>
-          }
-          onItemClick={(e) => onChange(e.value)}
-        >
-          {paletteList.map((p) => (
-            <MenuItem key={p.name} value={p}>
-              <div>
-                <label>{renderPaletteLabel(p.name)}</label>
-                <div className={styles.dropdownItem}>
-                  <DiffLegend palette={p} showMode={showMode} />
-
-                  {p === palette ? <CheckIcon /> : null}
-                </div>
-              </div>
-            </MenuItem>
-          ))}
-        </Dropdown>
-      </div>
-    </>
-  );
-};
-
-/**
- * TODO: unify this and toolbar's
- * Custom hook that returns the size ('large' | 'small')
- * that should be displayed
- * based on the toolbar width
- */
-// arbitrary value
-// as a simple heuristic, try to run the comparison view
-// and see when the buttons start to overlap
-const WIDTH_THRESHOLD = 13 * 37;
-const useSizeMode = (target: React.RefObject<HTMLDivElement>) => {
-  const [size, setSize] = React.useState<'large' | 'small'>('large');
-
-  const calcMode = (width: number) => {
-    if (width < WIDTH_THRESHOLD) {
-      return 'small';
+  // 获取调色板的颜色描述（用于下拉菜单中的辅助说明，同样走 i18n）
+  const getPaletteColorDesc = (p: FlamegraphPalette) => {
+    if (p.name === 'Default') {
+      return messages.paletteDefaultDesc;
     }
-    return 'large';
-  };
-
-  React.useLayoutEffect(() => {
-    if (target.current) {
-      const { width } = target.current.getBoundingClientRect();
-
-      setSize(calcMode(width));
+    if (p.name === 'Color Blind') {
+      return messages.paletteColorBlindDesc;
     }
-  }, [target.current]);
-
-  useResizeObserver(target, (entry: ResizeObserverEntry) => {
-    setSize(calcMode(entry.contentRect.width));
-  });
+    return '';
+  };
 
-  return size;
+  return (
+    <div className={styles.container}>
+      <Dropdown
+        // 下拉菜单的无障碍 label 文案（i18n）
+        label={messages.diffLegendSelectPalette}
+        align="end"
+        menuButton={
+          <MenuButton
+            className={cx(
+              dropdownStyles.dropdownMenuButton,
+              styles.triggerButton
+            )}
+          >
+            {/* 触发按钮：当前色带预览 + 下拉箭头 */}
+            <DiffLegend palette={palette} showMode="small" />
+            <span className={styles.dropdownArrow}>▼</span>
+          </MenuButton>
+        }
+        onItemClick={(e) => {
+          // e.value 是可选值，点击菜单项时带出的 palette 对象
+          if (e.value) {
+            onChange(e.value as FlamegraphPalette);
+          }
+        }}
+      >
+        {paletteList.map((p) => (
+          <MenuItem key={p.name} value={p}>
+            <div className={styles.menuItem}>
+              <span className={styles.menuItemText}>
+                {getPaletteName(p)} {getPaletteColorDesc(p)}
+              </span>
+              {/* 当前选中的调色板右侧展示对勾图标 */}
+              {p.name === palette.name && <CheckIcon />}
+            </div>
+          </MenuItem>
+        ))}
+      </Dropdown>
+    </div>
+  );
 };
 
 export default DiffLegendPaletteDropdown;

package/src/FlameGraph/FlameGraphComponent/Header.tsx

@@ -1,19 +1,16 @@
+// src/FlameGraph/FlameGraphComponent/Header.tsx
 import React from 'react';
 import { Flamebearer } from '../../models';
 import styles from './Header.module.css';
-import { FlamegraphPalette } from './colorPalette';
-import { DiffLegendPaletteDropdown } from './DiffLegendPaletteDropdown';
 
 interface HeaderProps {
   format: Flamebearer['format'];
   units: Flamebearer['units'];
-
-  palette: FlamegraphPalette;
-  setPalette: (p: FlamegraphPalette) => void;
   toolbarVisible?: boolean;
 }
+
 export default function Header(props: HeaderProps) {
-  const { format, units, palette, setPalette, toolbarVisible } = props;
+  const { format, units, toolbarVisible } = props;
 
   const unitsToFlamegraphTitle = {
     objects: 'number of objects in RAM per function',
@@ -28,41 +25,31 @@ export default function Header(props: HeaderProps) {
   };
 
   const getTitle = () => {
-    switch (format) {
-      case 'single': {
-        return (
-          <div>
-            <div
-              className={`${styles.row} ${styles.flamegraphTitle}`}
-              role="heading"
-              aria-level={2}
-            >
-              {unitsToFlamegraphTitle[units] && (
-                <>Frame width represents {unitsToFlamegraphTitle[units]}</>
-              )}
-            </div>
-          </div>
-        );
-      }
-
-      case 'double': {
-        return (
-          <>
-            <DiffLegendPaletteDropdown
-              palette={palette}
-              onChange={setPalette}
-            />
-          </>
-        );
-      }
-
-      default:
-        throw new Error(`unexpected format ${format}`);
+    // 只有 single 模式才显示标题
+    // double 模式的 DiffLegend 已移到 Toolbar
+    if (format === 'single') {
+      return (
+        <div
+          className={`${styles.row} ${styles.flamegraphTitle}`}
+          role="heading"
+          aria-level={2}
+        >
+          {unitsToFlamegraphTitle[units] && (
+            <>Frame width represents {unitsToFlamegraphTitle[units]}</>
+          )}
+        </div>
+      );
     }
+    return null;
   };
 
   const title = toolbarVisible ? getTitle() : null;
 
+  // 如果没有内容要显示，返回 null 避免占用空间
+  if (!title) {
+    return null;
+  }
+
   return (
     <div className={styles.flamegraphHeader}>
       <div>{title}</div>

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -53,6 +53,9 @@ interface FlamegraphProps {
   headerVisible?: boolean;
   disableClick?: boolean;
   showSingleLevel?: boolean;
+
+  /** 是否显示右键菜单中的「打开 Sandwich 视图」项，默认 true */
+  enableSandwichView?: boolean;
 }
 
 export default function FlameGraphComponent(props: FlamegraphProps) {
@@ -79,6 +82,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     setActiveItem,
     selectedItem,
     updateView,
+    enableSandwichView = true,
   } = props;
 
   const { onZoom, onReset, isDirty, onFocusOnNode } = props;
@@ -105,7 +109,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     );
 
     opt.match({
-      Nothing: () => {},
+      Nothing: () => { },
       Just: (bar) => {
         zoom.match({
           Nothing: () => {
@@ -160,7 +164,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         );
 
         const onClick = bar.mapOrElse(
-          () => () => {},
+          () => () => { },
           (f) => onFocusOnNode.bind(null, f.i, f.j)
         );
 
@@ -210,15 +214,14 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       };
 
       const OpenInSandwichViewItem = () => {
-        if (!updateView) {
+        // 如果没有 updateView，或者不开启三明治视图菜单，直接不渲染
+        if (!updateView || !enableSandwichView) {
           return null;
         }
 
         const handleClick = () => {
-          if (updateView) {
-            updateView('sandwich');
-            setActiveItem({ name: barName });
-          }
+          updateView('sandwich');
+          setActiveItem({ name: barName });
         };
 
         return (
@@ -275,6 +278,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       setActiveItem,
       updateView,
       i18n,
+      enableSandwichView,
     ]
   );
 
@@ -341,12 +345,12 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         'vertical-orientation': flamebearer.format === 'double',
       })}
     >
+      {/* Header 已简化，仅在 single 模式下显示标题 */}
+      {/* DiffLegend 已移到 Toolbar */}
       {headerVisible && (
         <Header
           format={flamebearer.format}
           units={flamebearer.units}
-          palette={palette}
-          setPalette={setPalette}
           toolbarVisible={toolbarVisible}
         />
       )}

package/src/FlameGraph/FlameGraphRenderer.tsx

@@ -1,3 +1,4 @@
+// src/FlameGraph/FlameGraphRenderer.tsx
 /* eslint-disable react/no-unused-state */
 /* eslint-disable no-bitwise */
 /* eslint-disable react/no-access-state-in-setstate */
@@ -60,6 +61,7 @@ export interface FlamegraphRendererProps {
   };
 
   children?: ReactNode;
+  enableSandwichView?: boolean;
 }
 
 interface FlamegraphRendererState {
@@ -101,7 +103,7 @@ class FlameGraphRenderer extends Component<
 
   // eslint-disable-next-line react/static-property-placement
   static defaultProps = {
-    showCredit: true,
+    showCredit: false,
   };
 
   constructor(props: FlamegraphRendererProps) {
@@ -344,6 +346,11 @@ class FlameGraphRenderer extends Component<
     return this.props.showToolbar !== undefined ? this.props.showToolbar : true;
   }
 
+  // 统一的 setPalette 方法
+  handleSetPalette = (p: typeof DefaultPalette) => {
+    this.setState({ palette: p });
+  };
+
   render = () => {
     // This is necessary because the order switches depending on single vs comparison view
     const tablePane = (
@@ -390,11 +397,8 @@ class FlameGraphRenderer extends Component<
         isDirty={this.isDirty}
         palette={this.state.palette}
         toolbarVisible={toolbarVisible}
-        setPalette={(p) =>
-          this.setState({
-            palette: p,
-          })
-        }
+        setPalette={this.handleSetPalette}
+        enableSandwichView={this.props.enableSandwichView}
       />
     );
 
@@ -446,11 +450,7 @@ class FlameGraphRenderer extends Component<
           isDirty={this.isDirty}
           palette={this.state.palette}
           toolbarVisible={toolbarVisible}
-          setPalette={(p) =>
-            this.setState({
-              palette: p,
-            })
-          }
+          setPalette={this.handleSetPalette}
           {...myCustomParams}
         />
       );
@@ -535,6 +535,9 @@ class FlameGraphRenderer extends Component<
               highlightQuery={this.state.searchQuery}
               onFocusOnSubtree={this.onFocusOnNode}
               ExportData={this.props.ExportData}
+              // 添加 palette 和 setPalette props
+              palette={this.state.palette}
+              setPalette={this.handleSetPalette}
             />
           )}
           {this.props.children}