@kylincloud/flamegraph 0.35.10 → 0.35.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kylincloud/flamegraph",
-  "version": "0.35.10",
+  "version": "0.35.15",
   "description": "KylinCloud flamegraph renderer (Pyroscope-based)",
   "license": "Apache-2.0",
   "main": "dist/index.node.cjs.js",
@@ -26,6 +26,20 @@
     "LICENSE",
     "package.json"
   ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "pnpm run clean && pnpm run build:types && pnpm run build:js && pnpm run build:assets",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "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",
+    "release": "bash -c 'source .env && export GITLAB_TOKEN=\"glpat-$RELEASE_TOKEN\" && release-it'",
+    "publish": "npm login --registry=https://registry.npmjs.org/ && pnpm publish --access public --registry=https://registry.npmjs.org/"
+  },
   "peerDependencies": {
     "graphviz-react": "^1.2.5",
     "react": ">=16.14.0",
@@ -51,6 +65,7 @@
   },
   "devDependencies": {
     "@fortawesome/fontawesome-common-types": "^7.1.0",
+    "@release-it/conventional-changelog": "^10.0.2",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -65,24 +80,14 @@
     "@types/node": "^24.10.1",
     "@types/react": "18.2.66",
     "@types/react-dom": "18.2.22",
+    "compare-func": "^2.0.0",
     "eslint": "^9.0.0",
     "postcss": "^8.5.6",
+    "release-it": "^19.0.6",
     "rollup": "^4.53.3",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.94.2",
     "tslib": "^2.8.1",
     "typescript": "5.4.5"
-  },
-  "scripts": {
-    "clean": "rm -rf dist",
-    "build": "pnpm run clean && pnpm run build:types && pnpm run build:js && pnpm run build:assets",
-    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
-    "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/ProfilerTable.tsx

@@ -1,5 +1,5 @@
 // src/ProfilerTable.tsx
-import React, { useRef, RefObject, CSSProperties } from 'react';
+import React, { useRef, RefObject } from 'react';
 import type Color from 'color';
 import cl from 'classnames';
 import type { Maybe } from 'true-myth';
@@ -15,7 +15,6 @@ import TableTooltip from './Tooltip/TableTooltip';
 import { getFormatter, ratioToPercent, diffPercent } from './format/format';
 import {
   colorBasedOnPackageName,
-  defaultColor,
   getPackageNameFromStackTrace,
 } from './FlameGraph/FlameGraphComponent/color';
 import { fitIntoTableCell, FitModes } from './fitMode/fitMode';
@@ -200,7 +199,6 @@ interface GetTableBodyRowsProps
   extends Omit<ProfilerTableProps, 'tableBodyRef'> {
   sortBy: string;
   sortByDirection: string;
-  isDoubles: boolean;
   messages: FlamegraphMessages;
 }
 
@@ -208,7 +206,6 @@ const getTableBody = ({
   flamebearer,
   sortBy,
   sortByDirection,
-  isDoubles,
   fitMode,
   handleTableItemClick,
   highlightQuery,
@@ -280,9 +277,8 @@ const getTableBody = ({
     return false;
   };
 
-  const nameCell = (x: { name: string }, style: CSSProperties) => (
+  const nameCell = (x: { name: string }) => (
     <button className="table-item-button">
-      <span className="color-reference" style={style} />
       <div className="symbol-name" style={fitIntoTableCell(fitMode)}>
         {x.name}
       </div>
@@ -291,14 +287,13 @@ const getTableBody = ({
 
   const getSingleRow = (
     x: SingleCell & { name: string },
-    color: InstanceType<typeof Color>,
-    style: CSSProperties
+    color: InstanceType<typeof Color>
   ): BodyRow => ({
     'data-row': `${x.type};${x.name};${x.self};${x.total}`,
     isRowSelected: isRowSelected(x.name),
     onClick: () => handleTableItemClick(x),
     cells: [
-      { value: nameCell(x, style) },
+      { value: nameCell(x) },
       {
         value: formatter.format(x.self, sampleRate),
         style: backgroundImageStyle(x.self, maxSelf, color),
@@ -311,8 +306,7 @@ const getTableBody = ({
   });
 
   const getDoubleRow = (
-    x: DoubleCell & { name: string },
-    style: CSSProperties
+    x: DoubleCell & { name: string }
   ): BodyRow => {
     const leftPercent = ratioToPercent(x.totalLeft / x.leftTicks);
     const rghtPercent = ratioToPercent(x.totalRght / x.rightTicks);
@@ -334,9 +328,9 @@ const getTableBody = ({
       // this function has been removed
       diffValue = messages.diffRemoved;
     } else if (totalDiff > 0) {
-      diffValue = `(+${totalDiff.toFixed(2)}%)`;
+      diffValue = `+${totalDiff.toFixed(2)}%`;
     } else if (totalDiff < 0) {
-      diffValue = `(${totalDiff.toFixed(2)}%)`;
+      diffValue = `${totalDiff.toFixed(2)}%`;
     }
 
     return {
@@ -344,7 +338,7 @@ const getTableBody = ({
       isRowSelected: isRowSelected(x.name),
       onClick: () => handleTableItemClick(x),
       cells: [
-        { value: nameCell(x, style) },
+        { value: nameCell(x) },
         { value: `${leftPercent} %` },
         { value: `${rghtPercent} %` },
         {
@@ -366,19 +360,14 @@ const getTableBody = ({
       return isMatch(highlightQuery, x.name);
     })
     .map((x) => {
-      const pn = getPackageNameFromStackTrace(spyName, x.name);
-      const color = isDoubles
-        ? defaultColor
-        : colorBasedOnPackageName(palette, pn);
-      const style = {
-        backgroundColor: color.rgb().toString(),
-      };
-
       if (x.type === 'double') {
-        return getDoubleRow(x as DoubleCell & { name: string }, style);
+        return getDoubleRow(x as DoubleCell & { name: string });
       }
 
-      return getSingleRow(x as SingleCell & { name: string }, color, style);
+      const pn = getPackageNameFromStackTrace(spyName, x.name);
+      const color = colorBasedOnPackageName(palette, pn);
+
+      return getSingleRow(x as SingleCell & { name: string }, color);
     });
 
   return rows.length > 0
@@ -468,7 +457,6 @@ function Table({
       flamebearer,
       sortBy: tableSortProps.sortBy,
       sortByDirection: tableSortProps.sortByDirection,
-      isDoubles,
       fitMode,
       handleTableItemClick,
       highlightQuery,

package/src/SharedQueryInput.tsx

@@ -98,7 +98,7 @@ const SharedQueryInput = ({
         type="search"
         name="flamegraph-search"
         placeholder={messages.searchPlaceholder}
-        minLength={2}
+        minLength={1}
         debounceTimeout={100}
         onChange={onQueryChange}
         value={inputValue}

package/src/Tooltip/FlamegraphTooltip.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, RefObject, Dispatch, SetStateAction } from 'react';
+// src/Tooltip/FlamegraphTooltip.tsx
+import React, {
+  useCallback,
+  RefObject,
+  Dispatch,
+  SetStateAction,
+} from 'react';
 import { Maybe } from 'true-myth';
 import type { Unwrapped } from 'true-myth/maybe';
 import { Units } from '../models/units';
@@ -15,6 +21,10 @@ import {
 } from '../FlameGraph/FlameGraphComponent/colorPalette';
 
 import { Tooltip, TooltipData } from './Tooltip';
+import {
+  useFlamegraphI18n,
+  type FlamegraphMessages,
+} from '../i18n';
 
 type xyToDataSingle = (
   x: number,
@@ -43,14 +53,14 @@ export type FlamegraphTooltipProps = {
 
   palette: FlamegraphPalette;
 } & (
-  | { format: 'single'; xyToData: xyToDataSingle }
-  | {
+    | { format: 'single'; xyToData: xyToDataSingle }
+    | {
       format: 'double';
       leftTicks: number;
       rightTicks: number;
       xyToData: xyToDataDouble;
     }
-);
+  );
 
 export default function FlamegraphTooltip(props: FlamegraphTooltipProps) {
   const {
@@ -64,6 +74,7 @@ export default function FlamegraphTooltip(props: FlamegraphTooltipProps) {
     rightTicks,
     palette,
   } = props;
+  const i18n = useFlamegraphI18n();
 
   const setTooltipContent = useCallback(
     (
@@ -87,8 +98,7 @@ export default function FlamegraphTooltip(props: FlamegraphTooltipProps) {
 
       let data: Unwrapped<typeof opt>;
 
-      // waiting on
-      // https://github.com/true-myth/true-myth/issues/279
+      // true-myth Maybe 解包
       if (opt.isJust) {
         data = opt.value;
       } else {
@@ -96,13 +106,14 @@ export default function FlamegraphTooltip(props: FlamegraphTooltipProps) {
         return;
       }
 
-      // set the content for tooltip
       switch (data.format) {
         case 'single': {
           const newLeftContent: TooltipData = {
             percent: formatPercent(data.total / numTicks),
             samples:
-              units === 'trace_samples' ? '' : numberWithCommas(data.total),
+              units === 'trace_samples'
+                ? ''
+                : numberWithCommas(data.total),
             units,
             formattedValue: formatter.format(data.total, sampleRate),
             tooltipType: 'flamegraph',
@@ -139,7 +150,8 @@ export default function FlamegraphTooltip(props: FlamegraphTooltipProps) {
               title: data.name,
               units,
             },
-            palette
+            palette,
+            i18n
           );
 
           setContent({
@@ -150,10 +162,10 @@ export default function FlamegraphTooltip(props: FlamegraphTooltipProps) {
           break;
         }
         default:
-          throw new Error(`Unsupported format:'`);
+          throw new Error(`Unsupported format: '${(data as any).format}'`);
       }
     },
-    [numTicks, sampleRate, units, leftTicks, rightTicks, palette]
+    [numTicks, sampleRate, units, leftTicks, rightTicks, palette, xyToData, format, i18n]
   );
 
   return (
@@ -161,6 +173,7 @@ export default function FlamegraphTooltip(props: FlamegraphTooltipProps) {
       dataSourceRef={canvasRef}
       clickInfoSide="right"
       setTooltipContent={setTooltipContent}
+      palette={palette}
     />
   );
 }
@@ -189,7 +202,8 @@ export function formatDouble(
     title: string;
     units: Units;
   },
-  palette: FlamegraphPalette = DefaultPalette
+  palette: FlamegraphPalette = DefaultPalette,
+  i18n?: FlamegraphMessages
 ): {
   tooltipData: TooltipData[];
   title: {
@@ -231,17 +245,20 @@ export function formatDouble(
     tooltipDiffColor = palette.goodColor.rgb().string();
   }
 
+  // 这里同时处理：
+  // - new / removed 走 i18n，带安全兜底
+  // - 百分比 diff 不再带括号，直接 "+12.34%" / "-5.67%"
   let tooltipDiffText = '';
   if (!totalLeft) {
-    // this is a new function
-    tooltipDiffText = '(new)';
+    // 新函数
+    tooltipDiffText = i18n?.diffNew ?? '新增';
   } else if (!totalRight) {
-    // this function has been removed
-    tooltipDiffText = '(removed)';
+    // 被移除的函数
+    tooltipDiffText = i18n?.diffRemoved ?? '移除';
   } else if (totalDiff > 0) {
-    tooltipDiffText = `(+${totalDiff.toFixed(2)}%)`;
+    tooltipDiffText = `+${totalDiff.toFixed(2)}%`;
   } else if (totalDiff < 0) {
-    tooltipDiffText = `(${totalDiff.toFixed(2)}%)`;
+    tooltipDiffText = `${totalDiff.toFixed(2)}%`;
   }
 
   return {

package/src/Tooltip/TableTooltip.tsx

@@ -1,10 +1,17 @@
-import React, { useCallback, RefObject, Dispatch, SetStateAction } from 'react';
+// src/Tooltip/TableTooltip.tsx
+import React, {
+  useCallback,
+  RefObject,
+  Dispatch,
+  SetStateAction,
+} from 'react';
 import { Units } from '../models/units';
 
 import type { FlamegraphPalette } from '../FlameGraph/FlameGraphComponent/colorPalette';
 import { Tooltip, TooltipData } from './Tooltip';
 import { formatDouble } from './FlamegraphTooltip';
 import { getFormatter } from '../format/format';
+import { useFlamegraphI18n } from '../i18n';
 
 export interface TableTooltipProps {
   tableBodyRef: RefObject<HTMLTableSectionElement>;
@@ -23,6 +30,7 @@ export default function TableTooltip({
 }: TableTooltipProps) {
   const formatter = getFormatter(numTicks, sampleRate, units);
   const totalFlamebearer = formatter.format(numTicks, sampleRate);
+  const i18n = useFlamegraphI18n();
 
   const setTooltipContent = useCallback(
     (
@@ -58,11 +66,12 @@ export default function TableTooltip({
             parseInt(self, 10),
             sampleRate
           );
-          const totalFormated = formatter.format(
+          const totalFormatted = formatter.format(
             parseInt(total, 10),
             sampleRate
           );
-          // todo: i think it will be good to decrease number of calculations here
+
+          // 保持原有百分比计算逻辑
           const totalFlamebearerSplitted = totalFlamebearer.split(' ');
           const totalFlamebearerNoUnitsValue =
             totalFlamebearerSplitted[0] === '<'
@@ -73,7 +82,7 @@ export default function TableTooltip({
           const selfNoUnitsValue =
             selfSplitted[0] === '<' ? selfSplitted[1] : selfSplitted[0];
 
-          const totalSplitted = totalFormated.split(' ');
+          const totalSplitted = totalFormatted.split(' ');
           const totalNoUnitsValue =
             totalSplitted[0] === '<' ? totalSplitted[1] : totalSplitted[0];
 
@@ -84,7 +93,7 @@ export default function TableTooltip({
                 parseFloat(totalFlamebearerNoUnitsValue)) *
               100
             ).toFixed(2)}%)`,
-            total: `${totalFormated}(${(
+            total: `${totalFormatted}(${(
               (parseFloat(totalNoUnitsValue) /
                 parseFloat(totalFlamebearerNoUnitsValue)) *
               100
@@ -117,7 +126,8 @@ export default function TableTooltip({
               title: functionName,
               units,
             },
-            palette
+            palette,
+            i18n
           );
 
           setContent({
@@ -131,7 +141,7 @@ export default function TableTooltip({
           break;
       }
     },
-    [tableBodyRef, numTicks, formatter, sampleRate]
+    [formatter, sampleRate, units, totalFlamebearer, palette, i18n]
   );
 
   return (
@@ -140,6 +150,7 @@ export default function TableTooltip({
       shouldShowTitle={false}
       clickInfoSide="left"
       setTooltipContent={setTooltipContent}
+      palette={palette}
     />
   );
 }