@kylincloud/flamegraph 0.35.6

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@kylincloud/flamegraph",
+  "version": "0.35.6",
+  "description": "KylinCloud flamegraph renderer (Pyroscope-based)",
+  "license": "Apache-2.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./dist/index.esm.css": "./dist/index.esm.css",
+    "./dist/index.cjs.css": "./dist/index.cjs.css"
+  },
+  "files": [
+    "dist/**/*",
+    "src/**/*",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "package.json"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "pnpm run clean && pnpm run build:types && pnpm run build:js",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "build:js": "node scripts/build-esbuild.mjs",
+    "type-check": "tsc -p tsconfig.build.json --noEmit",
+    "export:vendor": "npm run build && node scripts/export-vendor.mjs",
+    "lint": "eslint ./ --cache --fix"
+  },
+  "peerDependencies": {
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
+  },
+  "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
+    "@pyroscope/models": "^0.4.7",
+    "@react-hook/resize-observer": "^2.0.2",
+    "@szhsin/react-menu": "^4.5.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "color": "^5.0.3",
+    "d3-scale": "^4.0.2",
+    "graphviz-react": "^1.2.5",
+    "lodash.debounce": "^4.0.8",
+    "lodash.groupby": "^4.6.0",
+    "lodash.map": "^4.6.0",
+    "react-debounce-input": "^3.3.0",
+    "react-svg-spinner": "^1.0.4",
+    "true-myth": "^5.1.2",
+    "ts-essentials": "^10.1.1",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-common-types": "^7.1.0",
+    "@types/classnames": "^2.3.4",
+    "@types/color": "^4.2.0",
+    "@types/d3-scale": "^4.0.9",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/lodash.groupby": "^4.6.9",
+    "@types/lodash.map": "^4.6.13",
+    "@types/node": "^24.10.1",
+    "@types/react": "18.2.66",
+    "@types/react-dom": "18.2.22",
+    "esbuild": "^0.27.1",
+    "esbuild-sass-plugin": "^3.3.1",
+    "eslint": "^9.0.0",
+    "postcss": "^8.5.6",
+    "postcss-modules": "^6.0.1",
+    "rollup": "^4.53.3",
+    "sass": "^1.94.2",
+    "tslib": "^2.8.1",
+    "typescript": "5.4.5"
+  }
+}

package/src/FlameGraph/FlameGraphComponent/CheckIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+// https://www.svgrepo.com/vectors/check/
+export default function CheckIcon() {
+  return (
+    <svg
+      version="1.1"
+      id="Capa_1"
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width="12px"
+      height="12px"
+      viewBox="0 0 405.272 405.272"
+    >
+      <g>
+        <path
+          d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836
+
+		c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064
+
+		c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/FlameGraph/FlameGraphComponent/ContextMenu.module.scss

@@ -0,0 +1,10 @@
+// a dummy class is required
+// so that the component can import this class
+// and therefore the library style (index.css above) is imported
+.dummy {
+  display: block;
+
+  svg {
+    margin-right: 10px;
+  }
+}

package/src/FlameGraph/FlameGraphComponent/ContextMenu.spec.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MenuItem } from './shims/Menu';
+import userEvent from '@testing-library/user-event';
+
+import ContextMenu, { ContextMenuProps } from './ContextMenu';
+
+const { queryByRole, queryAllByRole, getByRole } = screen;
+
+function TestCanvas(props: Omit<ContextMenuProps, 'canvasRef'>) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+
+  return (
+    <>
+      <canvas data-testid="canvas" ref={canvasRef} />
+      <ContextMenu data-testid="contextmenu" canvasRef={canvasRef} {...props} />
+    </>
+  );
+}
+
+describe('ContextMenu', () => {
+  it('works', () => {
+    let hasBeenClicked = false;
+
+    const xyToMenuItems = () => {
+      return [
+        <MenuItem
+          key="test"
+          onClick={() => {
+            hasBeenClicked = true;
+          }}
+        >
+          Test
+        </MenuItem>,
+      ];
+    };
+
+    render(
+      <TestCanvas
+        xyToMenuItems={xyToMenuItems}
+        onClose={() => {}}
+        onOpen={() => {}}
+      />
+    );
+
+    expect(queryByRole('menu')).not.toBeInTheDocument();
+
+    // trigger a right click
+    userEvent.click(screen.getByTestId('canvas'), { buttons: 2 });
+
+    expect(queryByRole('menu')).toBeVisible();
+    expect(queryAllByRole('menuitem')).toHaveLength(1);
+
+    userEvent.click(getByRole('menuitem'));
+    expect(hasBeenClicked).toBe(true);
+  });
+
+  it('shows different items depending on the clicked node', () => {
+    const xyToMenuItems = jest.fn();
+
+    render(
+      <TestCanvas
+        xyToMenuItems={xyToMenuItems}
+        onClose={() => {}}
+        onOpen={() => {}}
+      />
+    );
+
+    expect(queryByRole('menu')).not.toBeInTheDocument();
+
+    // trigger a right click
+    xyToMenuItems.mockReturnValueOnce([<MenuItem key="1">1</MenuItem>]);
+    userEvent.click(screen.getByTestId('canvas'), { buttons: 2 });
+    expect(queryAllByRole('menuitem')).toHaveLength(1);
+
+    xyToMenuItems.mockReturnValueOnce([
+      <MenuItem key="1">1</MenuItem>,
+      <MenuItem key="2">2</MenuItem>,
+    ]);
+    userEvent.click(screen.getByTestId('canvas'), { buttons: 2 });
+    expect(queryAllByRole('menuitem')).toHaveLength(2);
+  });
+});

package/src/FlameGraph/FlameGraphComponent/ContextMenu.tsx

@@ -0,0 +1,86 @@
+import '@szhsin/react-menu/dist/index.css';
+/* eslint-disable react/jsx-props-no-spreading, import/no-extraneous-dependencies */
+import React from 'react';
+import { ControlledMenu, useMenuState } from '../../shims/Menu';
+import styles from './ContextMenu.module.scss';
+
+type xyToMenuItems = (x: number, y: number) => JSX.Element[];
+
+export interface ContextMenuProps {
+  canvasRef: React.RefObject<HTMLCanvasElement>;
+
+  /**
+   * The menu is built dynamically
+   * Based on the cell's contents
+   * only MenuItem and SubMenu should be supported
+   */
+  xyToMenuItems: xyToMenuItems;
+
+  onClose: () => void;
+  onOpen: (x: number, y: number) => void;
+}
+
+export default function ContextMenu(props: ContextMenuProps) {
+  const [menuProps, toggleMenu] = useMenuState({ transition: true });
+  const [anchorPoint, setAnchorPoint] = React.useState({ x: 0, y: 0 });
+  const { canvasRef } = props;
+  const [menuItems, setMenuItems] = React.useState<JSX.Element[]>([]);
+  const {
+    xyToMenuItems,
+    onClose: onCloseCallback,
+    onOpen: onOpenCallback,
+  } = props;
+
+  const onClose = () => {
+    toggleMenu(false);
+
+    onCloseCallback();
+  };
+
+  React.useEffect(() => {
+    toggleMenu(false);
+
+    // use closure to "cache" the current canvas reference
+    // so that when cleaning up, it points to a valid canvas
+    // (otherwise it would be null)
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) {
+      return () => {};
+    }
+
+    const onContextMenu = (e: MouseEvent) => {
+      e.preventDefault();
+
+      const items = xyToMenuItems(e.offsetX, e.offsetY);
+      setMenuItems(items);
+
+      // TODO
+      // if the menu becomes too large, it may overflow to outside the screen
+      const x = e.clientX;
+      const y = e.clientY + 20;
+
+      setAnchorPoint({ x, y });
+      toggleMenu(true);
+
+      onOpenCallback(e.offsetX, e.offsetY);
+    };
+
+    // watch for mouse events on the bar
+    canvasEl.addEventListener('contextmenu', onContextMenu);
+
+    return () => {
+      canvasEl.removeEventListener('contextmenu', onContextMenu);
+    };
+  }, [xyToMenuItems]);
+
+  return (
+    <ControlledMenu
+      {...menuProps}
+      className={styles.dummy}
+      anchorPoint={anchorPoint}
+      onClose={onClose}
+    >
+      {menuItems}
+    </ControlledMenu>
+  );
+}

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

@@ -0,0 +1,8 @@
+.highlightContextMenu {
+  position: absolute;
+  pointer-events: none;
+  /* make it a bit lighter so that it's easier to distinguish when both highlights are on */
+  background: #ffffff8c;
+  mix-blend-mode: overlay;
+  z-index: 2;
+}

package/src/FlameGraph/FlameGraphComponent/ContextMenuHighlight.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Maybe } from 'true-myth';
+import styles from './ContextMenuHighlight.module.css';
+
+export interface HighlightProps {
+  // probably the same as the bar height
+  barHeight: number;
+
+  node: Maybe<{ top: number; left: number; width: number }>;
+}
+
+const initialSyle: React.CSSProperties = {
+  height: '0px',
+  visibility: 'hidden',
+};
+
+/**
+ * Highlight on the node that triggered the context menu
+ */
+export default function ContextMenuHighlight(props: HighlightProps) {
+  const { node, barHeight } = props;
+  const [style, setStyle] = React.useState(initialSyle);
+
+  React.useEffect(
+    () => {
+      node.match({
+        Nothing: () => setStyle(initialSyle),
+        Just: (data) =>
+          setStyle({
+            visibility: 'visible',
+            height: `${barHeight}px`,
+            ...data,
+          }),
+      });
+    },
+    // refresh callback functions when they change
+    [node]
+  );
+
+  return (
+    <div
+      className={styles.highlightContextMenu}
+      style={style}
+      data-testid="flamegraph-highlight-contextmenu"
+    />
+  );
+}

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

@@ -0,0 +1,21 @@
+.flamegraph-legend {
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  justify-content: center;
+}
+
+.flamegraph-legend-list {
+  display: flex;
+  justify-content: center;
+}
+
+.flamegraph-legend-item {
+  width: 37px;
+  text-align: center;
+
+  /* if for some reason the contents can't fit 
+   * don't break into 2 lines */
+  white-space: nowrap;
+  overflow: hidden;
+}

package/src/FlameGraph/FlameGraphComponent/DiffLegend.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { NewDiffColor } from './color';
+import { FlamegraphPalette } from './colorPalette';
+import styles from './DiffLegend.module.css';
+
+export type sizeMode = 'small' | 'large';
+interface DiffLegendProps {
+  palette: FlamegraphPalette;
+  showMode: sizeMode;
+}
+
+export default function DiffLegend(props: DiffLegendProps) {
+  const { palette, showMode } = props;
+  const values = decideLegend(showMode);
+
+  const color = NewDiffColor(palette);
+
+  return (
+    <div
+      data-testid="flamegraph-legend"
+      className={`${styles['flamegraph-legend']} ${styles['flamegraph-legend-list']}`}
+    >
+      {values.map((v) => (
+        <div
+          key={v}
+          className={styles['flamegraph-legend-item']}
+          style={{
+            backgroundColor: color(v).rgb().toString(),
+          }}
+        >
+          {v > 0 ? '+' : ''}
+          {v}%
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function decideLegend(showMode: sizeMode) {
+  switch (showMode) {
+    case 'large': {
+      return [-100, -80, -60, -40, -20, -10, 0, 10, 20, 40, 60, 80, 100];
+    }
+
+    case 'small': {
+      return [-100, -40, -20, 0, 20, 40, 100];
+    }
+
+    default:
+      throw new Error(`Unsupported ${showMode}`);
+  }
+}

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

@@ -0,0 +1,40 @@
+.diffPaletteDropdown {
+  max-width: 510px;
+  min-width: 292px;
+  width: inherit;
+  padding-right: 20px !important;
+}
+
+.dropdownWrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.diffPaletteDropdown > div {
+  margin-bottom: 0px;
+  display: flex;
+}
+
+.diffPaletteDropdown::after {
+  top: 0px;
+}
+
+.dropdownItem {
+  width: 100%;
+  display: flex;
+}
+
+.dropdownItem svg {
+  margin-left: 1em;
+  fill: var(--ps-neutral-2);
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  margin-left: auto;
+  margin-right: auto;
+  width: 300px;
+  height: 45px;
+}

package/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx

@@ -0,0 +1,129 @@
+// src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx
+import React from 'react';
+import cx from 'classnames';
+import useResizeObserver from '@react-hook/resize-observer';
+import {
+  ColorBlindPalette,
+  DefaultPalette,
+  FlamegraphPalette,
+} from './colorPalette';
+import DiffLegend from './DiffLegend';
+import CheckIcon from './CheckIcon';
+// Until we migrate ui to its own package this should do it
+// eslint-disable-next-line
+import Dropdown, { MenuItem, MenuButton } from '../../shims/Dropdown';
+// eslint-disable-next-line
+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;
+}
+
+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') {
+      return messages.paletteDefaultName;
+    }
+    if (name === 'Color Blind') {
+      return messages.paletteColorBlindName;
+    }
+    // 兜底：未知名字直接原样展示
+    return 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';
+    }
+    return 'large';
+  };
+
+  React.useLayoutEffect(() => {
+    if (target.current) {
+      const { width } = target.current.getBoundingClientRect();
+
+      setSize(calcMode(width));
+    }
+  }, [target.current]);
+
+  useResizeObserver(target, (entry: ResizeObserverEntry) => {
+    setSize(calcMode(entry.contentRect.width));
+  });
+
+  return size;
+};
+
+export default DiffLegendPaletteDropdown;