@kylincloud/flamegraph 0.35.14 → 0.35.17

package/src/Tooltip/Tooltip.tsx

@@ -11,13 +11,14 @@ import React, {
   SetStateAction,
 } from 'react';
 import clsx from 'clsx';
-import type { Units } from '../models';
+import { Units } from '../models/units';
 
 import RightClickIcon from './RightClickIcon';
 import LeftClickIcon from './LeftClickIcon';
 
 import styles from './Tooltip.module.scss';
 import { useFlamegraphI18n } from '../i18n';
+import type { FlamegraphPalette } from '../FlameGraph/FlameGraphComponent/colorPalette';
 
 export type TooltipData = {
   units: Units;
@@ -30,13 +31,12 @@ export type TooltipData = {
 };
 
 export interface TooltipProps {
-  // canvas or table body ref
   dataSourceRef: RefObject<HTMLCanvasElement | HTMLTableSectionElement>;
-
   shouldShowFooter?: boolean;
   shouldShowTitle?: boolean;
   clickInfoSide?: 'left' | 'right';
-
+  // 新增：当前使用的调色板（包含普通模式 / 色盲模式等）
+  palette?: FlamegraphPalette;
   setTooltipContent: (
     setContent: Dispatch<
       SetStateAction<{
@@ -55,12 +55,168 @@ export interface TooltipProps {
   ) => void;
 }
 
+/** 解析各种带单位的字符串，例如：
+ *  "0.63 seconds" / "0.63 分钟" / "< 1 ms" / "+0.24minutes"
+ */
+function parseNumericWithUnit(
+  input?: string | number
+): { value: number; unit: string; hasLessThan: boolean; sign: string } | null {
+  if (input == null) return null;
+
+  if (typeof input === 'number') {
+    return { value: input, unit: '', hasLessThan: false, sign: '' };
+  }
+
+  // 统一 Unicode 减号
+  let s = String(input).trim().replace(/\u2212/g, '-');
+  if (!s) return null;
+
+  let hasLessThan = false;
+  if (s.startsWith('<')) {
+    hasLessThan = true;
+    s = s.slice(1).trim();
+  }
+
+  const m = s.match(/^([+\-]?)(\d*\.?\d+)\s*(.*)$/);
+  if (!m) return null;
+
+  const sign = m[1] || '';
+  const numStr = m[2];
+  const unit = (m[3] || '').trim();
+
+  const value = parseFloat(numStr);
+  if (!Number.isFinite(value)) return null;
+
+  return { value, unit, hasLessThan, sign };
+}
+
+/** 把 DurationFormatter 输出的英文单位翻译成中文，并保证数字和单位之间有空格 */
+function localizeDurationString(
+  input?: string,
+  isZh = false
+): string | undefined {
+  if (!input || !isZh) return input;
+
+  const parsed = parseNumericWithUnit(input);
+  if (!parsed) return input;
+
+  const { hasLessThan, unit, sign, value } = parsed;
+
+  let unitZh = unit;
+  const u = unit.toLowerCase();
+
+  if (u === 'ms') unitZh = '毫秒';
+  else if (u === 'μs' || u === 'µs' || u === 'us') unitZh = '微秒';
+  else if (u === 'second' || u === 'seconds') unitZh = '秒';
+  else if (u === 'minute' || u === 'minutes' || u === 'min' || u === 'mins')
+    unitZh = '分钟';
+  else if (u === 'hour' || u === 'hours') unitZh = '小时';
+  else if (u === 'day' || u === 'days') unitZh = '天';
+  else if (u === 'month' || u === 'months') unitZh = '月';
+  else if (u === 'year' || u === 'years') unitZh = '年';
+
+  // 尽量保留原来的数值部分
+  const m = String(input)
+    .trim()
+    .replace(/\u2212/g, '-')
+    .match(/^<?\s*([+\-]?)(\d*\.?\d+)/);
+  const valueStr =
+    m && m[2] ? `${m[1] || ''}${m[2]}` : `${sign}${Math.abs(value)}`;
+
+  const prefix = hasLessThan ? '< ' : '';
+  if (!unitZh) {
+    return `${prefix}${valueStr}`.trim();
+  }
+  return `${prefix}${valueStr} ${unitZh}`.trim();
+}
+
+/** CPU 时间差异：构造 "+0.24 minutes" / "-0.12 s" 这种文本（注意带空格） */
+function formatTimeDiff(
+  baselineFormatted?: string,
+  comparisonFormatted?: string
+): string {
+  const baseline = parseNumericWithUnit(baselineFormatted);
+  const comparison = parseNumericWithUnit(comparisonFormatted);
+
+  if (!baseline || !comparison) return '';
+
+  const diff = comparison.value - baseline.value;
+  if (diff === 0) {
+    return '0';
+  }
+
+  const sign = diff > 0 ? '+' : '-';
+  const abs = Math.abs(diff);
+
+  let valueText: string;
+  if (abs >= 100) valueText = abs.toFixed(0);
+  else if (abs >= 10) valueText = abs.toFixed(1);
+  else valueText = abs.toFixed(2);
+
+  const unit = baseline.unit || comparison.unit;
+  if (!unit) return `${sign}${valueText}`;
+  return `${sign}${valueText} ${unit}`;
+}
+
+/** "133,328" → 133328 */
+function parseSamples(input?: string): number | null {
+  if (!input) return null;
+  const cleaned = input.replace(/,/g, '').trim();
+  if (!cleaned) return null;
+  const value = Number(cleaned);
+  if (!Number.isFinite(value)) return null;
+  return value;
+}
+
+/** 样本数差异 "+1,430" / "-16,666" */
+function formatSamplesDiff(
+  baselineSamples?: string,
+  comparisonSamples?: string
+): string {
+  const baseline = parseSamples(baselineSamples);
+  const comparison = parseSamples(comparisonSamples);
+
+  if (baseline == null || comparison == null) return '';
+
+  const diff = comparison - baseline;
+  if (diff === 0) {
+    return '0';
+  }
+
+  const sign = diff > 0 ? '+' : '-';
+  const abs = Math.abs(diff);
+
+  const valueText = abs.toLocaleString();
+  return `${sign}${valueText}`;
+}
+
+/** 按差异文本的正负号，结合 palette 计算颜色（支持色盲模式） */
+function getDiffColorByText(
+  text: string | undefined,
+  palette?: FlamegraphPalette
+): string | undefined {
+  if (!text || !palette) return undefined;
+  const normalized = text.trim().replace(/\u2212/g, '-');
+  if (!normalized || normalized === '0') return undefined;
+
+  if (normalized.startsWith('+')) {
+    // “变多”：使用 badColor（普通模式是红，色盲模式可能是红/蓝里代表“多”的那个）
+    return palette.badColor.rgb().string();
+  }
+  if (normalized.startsWith('-')) {
+    // “变少”：使用 goodColor
+    return palette.goodColor.rgb().string();
+  }
+  return undefined;
+}
+
 export function Tooltip({
   shouldShowFooter = true,
   shouldShowTitle = true,
   dataSourceRef,
   clickInfoSide,
   setTooltipContent,
+  palette,
 }: TooltipProps) {
   const tooltipRef = useRef<HTMLDivElement>(null);
   const [content, setContent] = React.useState({
@@ -76,24 +232,16 @@ export function Tooltip({
   const [style, setStyle] = useState<CSSProperties>();
 
   const onMouseOut = () => {
-    setStyle({
-      visibility: 'hidden',
-    });
+    setStyle({ visibility: 'hidden' });
     setContent({
-      title: {
-        text: '',
-        diff: {
-          text: '',
-          color: '',
-        },
-      },
+      title: { text: '', diff: { text: '', color: '' } },
       tooltipData: [],
     });
   };
 
   const memoizedOnMouseMove = useCallback(
     (e: MouseEvent) => {
-      if (!tooltipRef || !tooltipRef.current) {
+      if (!tooltipRef.current) {
         throw new Error('Missing tooltipElement');
       }
 
@@ -103,25 +251,16 @@ export function Tooltip({
       );
       const top = e.clientY + 20;
 
-      const style: React.CSSProperties = {
-        top,
-        left,
-        visibility: 'visible',
-      };
-
       setTooltipContent(setContent, onMouseOut, e);
-      setStyle(style);
+      setStyle({ top, left, visibility: 'visible' });
     },
-
-    // these are the dependencies from props
-    // that are going to be used in onMouseMove
-    [tooltipRef, setTooltipContent]
+    [setTooltipContent]
   );
 
   useEffect(() => {
     const dataSourceEl = dataSourceRef.current;
     if (!dataSourceEl) {
-      return () => {};
+      return () => { };
     }
 
     dataSourceEl.addEventListener(
@@ -145,7 +284,7 @@ export function Tooltip({
       className={clsx(styles.tooltip, {
         [styles.flamegraphDiffTooltip]: content.tooltipData.length > 1,
       })}
-      style={style}
+      style={{ ...style, textAlign: 'center' }}
       ref={tooltipRef}
     >
       {content.tooltipData.length > 0 && (
@@ -165,9 +304,10 @@ export function Tooltip({
             <TooltipTable
               data={content.tooltipData}
               diff={content.title.diff}
+              palette={palette}
             />
           ) : (
-            <TooltipTable data={content.tooltipData} />
+            <TooltipTable data={content.tooltipData} palette={palette} />
           )}
           {shouldShowFooter && <TooltipFooter clickInfoSide={clickInfoSide} />}
         </>
@@ -179,12 +319,15 @@ export function Tooltip({
 function TooltipTable({
   data,
   diff,
+  palette,
 }: {
   data: TooltipData[];
   diff?: { text: string; color: string };
+  palette?: FlamegraphPalette;
 }) {
   const i18n = useFlamegraphI18n();
   const [baselineData, comparisonData] = data;
+  const isZh = i18n.location !== 'Location';
 
   if (!baselineData) {
     return null;
@@ -194,65 +337,121 @@ function TooltipTable({
 
   switch (baselineData.tooltipType) {
     case 'flamegraph':
-      renderTable = () => (
-        <>
-          {comparisonData && (
-            <thead>
+      renderTable = () => {
+        const timeDiffTextRaw =
+          comparisonData &&
+          formatTimeDiff(
+            baselineData.formattedValue,
+            comparisonData.formattedValue
+          );
+        const timeDiffText = localizeDurationString(timeDiffTextRaw, isZh);
+
+        const samplesDiffText =
+          comparisonData &&
+          formatSamplesDiff(baselineData.samples, comparisonData.samples);
+
+        const baselineFormattedValue = localizeDurationString(
+          baselineData.formattedValue,
+          isZh
+        );
+        const comparisonFormattedValue = localizeDurationString(
+          comparisonData?.formattedValue,
+          isZh
+        );
+
+        const percentDiffColor = diff?.color;
+        const timeDiffColor = getDiffColorByText(timeDiffTextRaw, palette);
+        const samplesDiffColor = getDiffColorByText(samplesDiffText, palette);
+
+        return (
+          <>
+            {comparisonData && (
+              <thead>
+                <tr>
+                  <th />
+                  <th>{i18n.baseline}</th>
+                  <th>{i18n.comparison}</th>
+                  <th>{i18n.diff}</th>
+                </tr>
+              </thead>
+            )}
+            <tbody>
+              {/* CPU 占比行：沿用 formatDouble 计算的 diff.color */}
               <tr>
-                <th />
-                <th>{i18n.baseline}</th>
-                <th>{i18n.comparison}</th>
-                <th>{i18n.diff}</th>
+                <td>
+                  {i18n.tooltipUnitTitles[baselineData.units].percent}:
+                </td>
+                <td>{baselineData.percent}</td>
+                {comparisonData && (
+                  <>
+                    <td>{comparisonData.percent}</td>
+                    <td style={{ textAlign: 'center' }}>
+                      {diff && (
+                        <span
+                          data-testid="tooltip-diff"
+                          style={{ color: percentDiffColor }}
+                        >
+                          {diff.text}
+                        </span>
+                      )}
+                    </td>
+                  </>
+                )}
               </tr>
-            </thead>
-          )}
-          <tbody>
-            <tr>
-              <td>
-                {i18n.tooltipUnitTitles[baselineData.units].percent}:
-              </td>
-              <td>{baselineData.percent}</td>
-              {comparisonData && (
-                <>
-                  <td>{comparisonData.percent}</td>
-                  <td>
-                    {diff && (
-                      <span
-                        data-testid="tooltip-diff"
-                        style={{ color: diff.color }}
-                      >
-                        {diff.text}
-                      </span>
-                    )}
-                  </td>
-                </>
-              )}
-            </tr>
-            <tr>
-              <td>
-                {i18n.tooltipUnitTitles[baselineData.units].formattedValue}:
-              </td>
-              <td>{baselineData.formattedValue}</td>
-              {comparisonData && (
-                <>
-                  <td>{comparisonData.formattedValue}</td>
-                  <td />
-                </>
-              )}
-            </tr>
-            <tr>
-              <td>{i18n.tooltipSamples}</td>
-              <td>{baselineData.samples}</td>
-              {comparisonData && (
-                <>
-                  <td>{comparisonData.samples}</td>
-                  <td />
-                </>
-              )}
-            </tr>
-          </tbody>
-        </>
-      );
+
+              {/* CPU 时间行：按自己行的 diff 文本和 palette 决定颜色 */}
+              <tr>
+                <td>
+                  {i18n.tooltipUnitTitles[baselineData.units].formattedValue}:
+                </td>
+                <td>{baselineFormattedValue}</td>
+                {comparisonData && (
+                  <>
+                    <td>{comparisonFormattedValue}</td>
+                    <td style={{ textAlign: 'center' }}>
+                      {timeDiffText && (
+                        <span
+                          data-testid="tooltip-time-diff"
+                          style={
+                            timeDiffColor ? { color: timeDiffColor } : undefined
+                          }
+                        >
+                          {timeDiffText}
+                        </span>
+                      )}
+                    </td>
+                  </>
+                )}
+              </tr>
+
+              {/* 样本数行：同样按自身的 diff 文本和 palette 决定颜色 */}
+              <tr>
+                <td>{i18n.tooltipSamples}</td>
+                <td>{baselineData.samples}</td>
+                {comparisonData && (
+                  <>
+                    <td>{comparisonData.samples}</td>
+                    <td style={{ textAlign: 'center' }}>
+                      {samplesDiffText && (
+                        <span
+                          data-testid="tooltip-samples-diff"
+                          style={
+                            samplesDiffColor
+                              ? { color: samplesDiffColor }
+                              : undefined
+                          }
+                        >
+                          {samplesDiffText}
+                        </span>
+                      )}
+                    </td>
+                  </>
+                )}
+              </tr>
+            </tbody>
+          </>
+        );
+      };
       break;
     case 'table':
       renderTable = () => (
@@ -293,6 +492,7 @@ function TooltipTable({
         [styles[`${baselineData.tooltipType}${comparisonData ? 'Diff' : ''}`]]:
           baselineData.tooltipType,
       })}
+      style={{ textAlign: 'center', margin: '0 auto' }}
     >
       {renderTable()}
     </table>

package/src/i18n.tsx

@@ -176,8 +176,8 @@ export const defaultMessages: FlamegraphMessages = {
 
   noItemsFound: 'No items found',
 
-  diffNew: '(new)',
-  diffRemoved: '(removed)',
+  diffNew: 'new',
+  diffRemoved: 'removed',
 
   tooltipSamples: 'Samples:',
   tooltipUnitTitles: defaultTooltipUnitTitles,
@@ -230,8 +230,8 @@ export const zhCNMessages: FlamegraphMessages = {
 
   noItemsFound: '没有找到任何条目',
 
-  diffNew: '(新增)',
-  diffRemoved: '(移除)',
+  diffNew: '新增',
+  diffRemoved: '移除',
 
   tooltipSamples: '样本数:',
   tooltipUnitTitles: zhCNTooltipUnitTitles,

package/src/sass/_common.scss

@@ -104,13 +104,6 @@ tt {
       white-space: nowrap;
     }
 
-    &:first-child .color-reference {
-      position: absolute;
-      left: 10px;
-      bottom: 0;
-      top: 0;
-      margin: auto;
-    }
   }
 
   // Double column variant
@@ -149,11 +142,6 @@ tt {
       position: relative;
     }
 
-    // element right next the color reference
-    &:first-child .color-reference + div {
-      margin-left: 15px;
-    }
-
     .table-item-button {
       border: none;
       display: flex;
@@ -171,18 +159,6 @@ tt {
   }
 }
 
-// --------------------------------------------------------------------------
-// Color Reference
-// --------------------------------------------------------------------------
-
-.color-reference {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-  display: inline-block;
-  margin-right: 5px;
-}
-
 // --------------------------------------------------------------------------
 // Button Group
 // --------------------------------------------------------------------------

package/src/sass/_sanitize.scss

@@ -403,5 +403,5 @@ pre {
 // --------------------------------------------------------------------------
 
 :focus-visible {
-  outline: revert !important;
+  outline: revert;
 }