@kylincloud/flamegraph 0.35.19 → 0.35.21

package/package.json

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

package/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx

@@ -71,7 +71,7 @@ export const DiffLegendPaletteDropdown = (
           >
             {/* 触发按钮：当前色带预览 + 下拉箭头 */}
             <DiffLegend palette={palette} showMode="small" />
-            <span className={styles.dropdownArrow}>▼</span>
+            <span className={styles.dropdownArrow}></span>
           </MenuButton>
         }
         onItemClick={(e) => {

package/src/SharedQueryInput.module.scss

@@ -9,7 +9,6 @@
 }
 
 .search {
-  // 默认样式：白色背景，适用于 light 和 kylin 模式
   background: var(--ps-immutable-white);
   transition:
     background-color 0.1s ease-out,
@@ -23,16 +22,15 @@
   height: 37px;
   width: 100%;
 
-  // 2）文本颜色改成“偏灰”，不要纯黑
-  //   这里用一个接近 antd 的值：rgba(0, 0, 0, 0.65)
-  color: rgba(0, 0, 0, 0.65);
+  /* 2）文本颜色改成“偏灰”，不要纯黑 */
+  color: rgba(0, 0, 0, 0.85);
 
-  // 3）placeholder 再淡一点，类似 antd 的 placeholder
+  /* 3）placeholder 再淡一点，类似 antd 的 placeholder */
   &::placeholder {
     color: rgba(0, 0, 0, 0.25);
   }
 
-  // 适配 light 和 kylin 模式
+  /* 适配 light 和 kylin 模式 */
   &.light,
   &.kylin {
     background: var(--ps-immutable-white);
@@ -40,7 +38,7 @@
     border-color: var(--ps-ui-border);
   }
 
-  // 适配 dark 模式
+  /* 适配 dark 模式 */
   @media (prefers-color-scheme: dark) {
 
     &,
@@ -55,22 +53,30 @@
     }
   }
 
-  // 聚焦样式
+  /* 聚焦时的绿色框样式 */
+  &:focus-visible {
+    background: var(--ps-immutable-white);
+    border-color: rgb(93, 151, 111);
+    box-shadow: 0 0 0 3px rgba(93, 151, 111, 0.4);  /* 更强的阴影效果 */
+    outline: none; /* 确保没有其他 outline 样式 */
+  }
+
+  /* light 和 kylin 模式下的聚焦样式 */
   &.light:focus,
   &.kylin:focus {
     background: var(--ps-immutable-white);
     border-color: rgb(93, 151, 111);
-    box-shadow: 0 0 0 2px rgba(93, 151, 111, 0.2);
-    outline: none;
+    box-shadow: 0 0 0 2px rgba(93, 151, 111, 0.2);  /* 较弱的阴影效果 */
+    outline: none;  /* 确保没有其他 outline 样式 */
   }
 
-  // dark 模式下的聚焦样式
+  /* dark 模式下的聚焦样式 */
   @media (prefers-color-scheme: dark) {
     &.dark:focus {
       background: var(--ps-immutable-dark-background);
-      border-color: rgb(93, 151, 111);
-      box-shadow: 0 0 0 2px rgba(93, 151, 111, 0.2);
-      outline: none;
+      border-color: rgb(48, 48, 48);  /* 使用更深的边框颜色 */
+      box-shadow: 0 0 0 2px rgba(48, 48, 48, 0.6);  /* 更深的阴影效果 */
+      outline: none;  /* 确保没有其他 outline 样式 */
     }
   }
 }

package/src/Tooltip/Tooltip.module.scss

@@ -7,7 +7,7 @@
   color: var(--ps-tooltip-text);
   font-size: 12px;
   visibility: hidden;
-  z-index: 2;
+  z-index: 5;
   pointer-events: none;
 
   &.flamegraphDiffTooltip {

package/src/Tooltip/Tooltip.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
   useRef,
   useCallback,
+  useLayoutEffect,
   Dispatch,
   SetStateAction,
 } from 'react';
@@ -210,6 +211,52 @@ function getDiffColorByText(
   return undefined;
 }
 
+/**
+ * Tooltip 位置计算：默认右下；若越界则翻到左/上；最终 clamp 到视口内。
+ * 注意：Tooltip 使用 position: fixed，因此用 innerWidth/innerHeight 做视口碰撞检测最直接。
+ */
+const TOOLTIP_GAP_X = 12;
+const TOOLTIP_GAP_Y = 20;
+const TOOLTIP_PAD = 8;
+
+function clamp(v: number, min: number, max: number) {
+  if (max < min) return min;
+  return Math.max(min, Math.min(max, v));
+}
+
+function computeSafeTooltipPos(
+  x: number,
+  y: number,
+  tipW: number,
+  tipH: number
+) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  const w = Math.max(0, tipW || 0);
+  const h = Math.max(0, tipH || 0);
+
+  // 默认：右下
+  let left = x + TOOLTIP_GAP_X;
+  let top = y + TOOLTIP_GAP_Y;
+
+  // 右侧溢出：翻到左边
+  if (left + w + TOOLTIP_PAD > vw) {
+    left = x - w - TOOLTIP_GAP_X;
+  }
+
+  // 底部溢出：翻到上边
+  if (top + h + TOOLTIP_PAD > vh) {
+    top = y - h - TOOLTIP_GAP_Y;
+  }
+
+  // 最终夹取到视口内
+  left = clamp(left, TOOLTIP_PAD, vw - w - TOOLTIP_PAD);
+  top = clamp(top, TOOLTIP_PAD, vh - h - TOOLTIP_PAD);
+
+  return { left, top };
+}
+
 export function Tooltip({
   shouldShowFooter = true,
   shouldShowTitle = true,
@@ -219,6 +266,8 @@ export function Tooltip({
   palette,
 }: TooltipProps) {
   const tooltipRef = useRef<HTMLDivElement>(null);
+  const lastPosRef = useRef<{ x: number; y: number } | null>(null);
+
   const [content, setContent] = React.useState({
     title: {
       text: '',
@@ -245,13 +294,17 @@ export function Tooltip({
         throw new Error('Missing tooltipElement');
       }
 
-      const left = Math.min(
-        e.clientX + 12,
-        window.innerWidth - tooltipRef.current.clientWidth - 20
-      );
-      const top = e.clientY + 20;
+      // 记录最后鼠标位置（给 useLayoutEffect 二次校正用）
+      lastPosRef.current = { x: e.clientX, y: e.clientY };
 
+      // 先更新内容（tooltip 高度可能因此变化）
       setTooltipContent(setContent, onMouseOut, e);
+
+      // 用当前已渲染的尺寸先算一次位置（内容变化后的真实尺寸会在 useLayoutEffect 再校正）
+      const w = tooltipRef.current.clientWidth || 0;
+      const h = tooltipRef.current.clientHeight || 0;
+
+      const { left, top } = computeSafeTooltipPos(e.clientX, e.clientY, w, h);
       setStyle({ top, left, visibility: 'visible' });
     },
     [setTooltipContent]
@@ -278,6 +331,24 @@ export function Tooltip({
     };
   }, [dataSourceRef.current, memoizedOnMouseMove]);
 
+  // 内容变化后用真实 DOM 尺寸做二次校正，避免“首次显示尺寸尚未更新导致仍越界”
+  useLayoutEffect(() => {
+    if (!tooltipRef.current) return;
+    if (!lastPosRef.current) return;
+    if (content.tooltipData.length === 0) return;
+
+    const { x, y } = lastPosRef.current;
+    const rect = tooltipRef.current.getBoundingClientRect();
+    const { left, top } = computeSafeTooltipPos(x, y, rect.width, rect.height);
+
+    setStyle((prev) => {
+      if (prev && prev.left === left && prev.top === top && prev.visibility === 'visible') {
+        return prev;
+      }
+      return { ...(prev || {}), left, top, visibility: 'visible' };
+    });
+  }, [content.tooltipData.length, content.title.text]);
+
   return (
     <div
       data-testid="tooltip"
@@ -460,12 +531,10 @@ function TooltipTable({
             <tr>
               <td />
               <td>
-                {i18n.self} (
-                {i18n.tooltipUnitTitles[baselineData.units].total})
+                {i18n.self} ({i18n.tooltipUnitTitles[baselineData.units].total})
               </td>
               <td>
-                {i18n.total} (
-                {i18n.tooltipUnitTitles[baselineData.units].total})
+                {i18n.total} ({i18n.tooltipUnitTitles[baselineData.units].total})
               </td>
             </tr>
           </thead>