@kylincloud/flamegraph 0.35.22 → 0.35.23

package/dist/shims/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7E,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;CACvH;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACE,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEN,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CAsGZ;AA2DD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAoB,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUrF,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;CACvH;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACA,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACC;IACA,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEJ,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0CD,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CAkEZ;AA2DD,eAAe,KAAK,CAAC"}

package/package.json

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

package/src/FlameGraph/FlameGraphComponent/Flamegraph.ts

@@ -12,7 +12,7 @@ import { PX_PER_LEVEL, BAR_HEIGHT, COLLAPSE_THRESHOLD } from './constants';
 import type { FlamegraphPalette } from './colorPalette';
 // there's a dependency cycle here but it should be fine
 /* eslint-disable-next-line import/no-cycle */
-import RenderCanvas from './Flamegraph_render';
+import RenderCanvas, { CanvasI18nMessages } from './Flamegraph_render';
 
 /* eslint-disable no-useless-constructor */
 
@@ -47,7 +47,10 @@ export default class Flamegraph {
     private readonly highlightQuery: string,
     private zoom: Maybe<DeepReadonly<{ i: number; j: number }>>,
 
-    private palette: FlamegraphPalette
+    private palette: FlamegraphPalette,
+
+    /** i18n messages for canvas rendering */
+    private messages?: CanvasI18nMessages
   ) {
     // TODO
     // these were only added because storybook is not setting
@@ -59,6 +62,7 @@ export default class Flamegraph {
     this.highlightQuery = highlightQuery;
     this.ff = createFF(flamebearer.format);
     this.palette = palette;
+    this.messages = messages;
 
     // don't allow to have a zoom smaller than the focus
     // since it does not make sense
@@ -96,6 +100,7 @@ export default class Flamegraph {
       pxPerTick: this.pxPerTick(),
       tickToX: this.tickToX,
       palette: this.palette,
+      messages: this.messages,
     };
 
     const { format: viewType } = this.flamebearer;

package/src/FlameGraph/FlameGraphComponent/Flamegraph_render.ts

@@ -49,6 +49,18 @@ import { isMatch } from '../../search';
 /* eslint-disable-next-line import/no-cycle */
 import Flamegraph from './Flamegraph';
 
+/** i18n messages needed for canvas rendering */
+export interface CanvasI18nMessages {
+  collapsedLevelsSingular: string;
+  collapsedLevelsPlural: string;
+}
+
+/** Default English messages (fallback) */
+const defaultCanvasMessages: CanvasI18nMessages = {
+  collapsedLevelsSingular: 'total (1 level collapsed)',
+  collapsedLevelsPlural: 'total ({n} levels collapsed)',
+};
+
 type CanvasRendererConfig = Flamebearer & {
   canvas: HTMLCanvasElement;
   focusedNode: ConstructorParameters<typeof Flamegraph>[2];
@@ -73,13 +85,30 @@ type CanvasRendererConfig = Flamebearer & {
 
   palette: FlamegraphPalette;
   maxSelf?: number;
+
+  /** i18n messages for collapsed text */
+  messages?: CanvasI18nMessages;
 };
 
+/**
+ * 生成 collapsed 层级的显示文本
+ */
+function getCollapsedText(
+  levelCount: number,
+  messages: CanvasI18nMessages
+): string {
+  if (levelCount === 1) {
+    return messages.collapsedLevelsSingular;
+  }
+  return messages.collapsedLevelsPlural.replace('{n}', String(levelCount));
+}
+
 export default function RenderCanvas(props: CanvasRendererConfig) {
   const { canvas, fitMode, units, tickToX, levels, palette } = props;
   const { numTicks, sampleRate, pxPerTick } = props;
   const { rangeMin, rangeMax } = props;
   const { focusedNode, zoom } = props;
+  const messages = props.messages || defaultCanvasMessages;
 
   const graphWidth = getCanvasWidth(canvas);
   // TODO: why is this needed? otherwise height is all messed up
@@ -134,10 +163,10 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
     ctx.fillStyle = colorGreyscale(200, 1).rgb().string();
     ctx.fill();
 
-    // TODO show the samples too?
+    // 使用 i18n 翻译的 collapsed 文本
     const shortName = focusedNode.mapOrElse(
       () => 'total',
-      (f) => `total (${f.i - 1} level(s) collapsed)`
+      (f) => getCollapsedText(f.i - 1, messages)
     );
 
     // Set the font syle

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -1,6 +1,6 @@
 // src/FlameGraph/FlameGraphComponent/index.tsx
 /* eslint-disable no-unused-expressions, import/no-extraneous-dependencies */
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
@@ -63,6 +63,15 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   const flamegraph = useRef<Flamegraph>();
   const i18n = useFlamegraphI18n();
 
+  // ====== 新增：提取 canvas 渲染需要的 i18n messages ======
+  const canvasMessages = useMemo(
+    () => ({
+      collapsedLevelsSingular: i18n.collapsedLevelsSingular,
+      collapsedLevelsPlural: i18n.collapsedLevelsPlural,
+    }),
+    [i18n.collapsedLevelsSingular, i18n.collapsedLevelsPlural]
+  );
+
   const [rightClickedNode, setRightClickedNode] = React.useState<
     Maybe<{ top: number; left: number; width: number }>
   >(Maybe.nothing());
@@ -291,17 +300,19 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         fitMode,
         highlightQuery,
         zoom,
-        palette
+        palette,
+        canvasMessages  // ====== 新增：传递 i18n messages ======
       );
 
       flamegraph.current = f;
     }
   };
 
+  // ====== 修改：添加 canvasMessages 依赖 ======
   React.useEffect(() => {
     constructCanvas();
     renderCanvas();
-  }, [palette]);
+  }, [palette, canvasMessages]);
 
   React.useEffect(() => {
     constructCanvas();

package/src/FlameGraph/FlameGraphRenderer.tsx

@@ -275,6 +275,55 @@ class FlameGraphRenderer extends Component<
     });
   };
 
+  /**
+   * 检查指定名称的函数是否在当前聚焦节点的子树中
+   */
+  isNameInFocusedSubtree = (name: string): boolean => {
+    const { focusedNode } = this.state.flamegraphConfigs;
+
+    // 如果没有聚焦节点，任何 name 都算"在子树中"
+    if (focusedNode.isNothing) {
+      return true;
+    }
+
+    const { flamebearer } = this.state;
+    if (!flamebearer || !flamebearer.levels) {
+      return true;
+    }
+
+    const { names, levels, format } = flamebearer;
+    const ff = createFF(format);
+    const focusedI = (focusedNode as any).value.i;
+    const focusedJ = (focusedNode as any).value.j;
+
+    // 获取聚焦节点的范围
+    const focusedLevel = levels[focusedI];
+    if (!focusedLevel) return true;
+
+    const focusedOffset = ff.getBarOffset(focusedLevel, focusedJ);
+    const focusedTotal = ff.getBarTotal(focusedLevel, focusedJ);
+    const focusedEnd = focusedOffset + focusedTotal;
+
+    // 遍历聚焦节点及其下面的所有层级，检查是否有匹配的函数名
+    for (let i = focusedI; i < levels.length; i++) {
+      const level = levels[i];
+      for (let j = 0; j < level.length; j += ff.jStep) {
+        const offset = ff.getBarOffset(level, j);
+        const total = ff.getBarTotal(level, j);
+
+        // 检查这个节点是否在聚焦范围内
+        if (offset >= focusedOffset && offset + total <= focusedEnd) {
+          const nameIndex = ff.getBarName(level, j);
+          if (names[nameIndex] === name) {
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  };
+
   setActiveItem = (item: { name: string }) => {
     const { name } = item;
 
@@ -288,10 +337,25 @@ class FlameGraphRenderer extends Component<
       }
     }
 
-    // clicking for the first time
-    this.setState({
-      selectedItem: Maybe.just(name),
-    });
+    // 检查选中的 item 是否在当前聚焦的子树中
+    // 如果不在，需要重置聚焦状态，以便在火焰图中正确显示高亮
+    const isInSubtree = this.isNameInFocusedSubtree(name);
+
+    if (isInSubtree) {
+      // 在子树中，只更新选中项
+      this.setState({
+        selectedItem: Maybe.just(name),
+      });
+    } else {
+      // 不在子树中，重置聚焦并更新选中项
+      this.setState({
+        selectedItem: Maybe.just(name),
+        flamegraphConfigs: {
+          ...this.state.flamegraphConfigs,
+          focusedNode: this.resetFlamegraphState.focusedNode,
+        },
+      });
+    }
   };
 
   getHighlightQuery = () => {
@@ -607,4 +671,4 @@ function decidePanesOrder(
   }
 }
 
-export default FlameGraphRenderer;
+export default FlameGraphRenderer;

package/src/ProfilerTable.module.scss

@@ -1,7 +1,6 @@
 // src/ProfilerTable.module.scss
 
 .tableContextMenu {
-
   // 继承 react-menu 的基础样式
   :global(.szh-menu) {
     background-color: var(--ps-ui-background, #fff);
@@ -40,4 +39,4 @@
     width: 16px;
     height: 16px;
   }
-}
+}

package/src/ProfilerTable.tsx

@@ -426,11 +426,11 @@ const getTableBody = ({
   return rows.length > 0
     ? { bodyRows: rows, type: 'filled' as const }
     : {
-        value: (
-          <div className="unsupported-format">{messages.noItemsFound}</div>
-        ),
-        type: 'not-filled' as const,
-      };
+      value: (
+        <div className="unsupported-format">{messages.noItemsFound}</div>
+      ),
+      type: 'not-filled' as const,
+    };
 };
 
 export interface ProfilerTableProps {
@@ -469,9 +469,15 @@ function Table({
   const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 });
   const [contextMenuTarget, setContextMenuTarget] = useState<string | null>(null);
 
-  // 双击处理：聚焦到火焰图
+  // 双击处理：高亮 + 聚焦到火焰图
   const handleDoubleClick = useCallback(
     (name: string) => {
+      // 先确保该项被高亮（如果未高亮则高亮，如果已高亮则保持）
+      if (!selectedItem.isJust || selectedItem.value !== name) {
+        handleTableItemClick({ name });
+      }
+
+      // 然后聚焦到火焰图
       if (!onFocusOnNode) return;
 
       const node = findNodeByName(flamebearer, name);
@@ -479,7 +485,7 @@ function Table({
         onFocusOnNode(node.i, node.j);
       }
     },
-    [flamebearer, onFocusOnNode]
+    [flamebearer, onFocusOnNode, selectedItem, handleTableItemClick]
   );
 
   // 右键菜单处理
@@ -535,46 +541,46 @@ function Table({
     () =>
       isDoubles
         ? [
-            {
-              sortable: 1,
-              name: 'name' as const,
-              label: i18n.location,
-            },
-            {
-              sortable: 1,
-              name: 'baseline' as const,
-              label: i18n.baseline,
-              default: true,
-            },
-            {
-              sortable: 1,
-              name: 'comparison' as const,
-              label: i18n.comparison,
-            },
-            {
-              sortable: 1,
-              name: 'diff' as const,
-              label: i18n.diff,
-            },
-          ]
+          {
+            sortable: 1,
+            name: 'name' as const,
+            label: i18n.location,
+          },
+          {
+            sortable: 1,
+            name: 'baseline' as const,
+            label: i18n.baseline,
+            default: true,
+          },
+          {
+            sortable: 1,
+            name: 'comparison' as const,
+            label: i18n.comparison,
+          },
+          {
+            sortable: 1,
+            name: 'diff' as const,
+            label: i18n.diff,
+          },
+        ]
         : [
-            {
-              sortable: 1,
-              name: 'name' as const,
-              label: i18n.location,
-            },
-            {
-              sortable: 1,
-              name: 'self' as const,
-              label: i18n.self,
-              default: true,
-            },
-            {
-              sortable: 1,
-              name: 'total' as const,
-              label: i18n.total,
-            },
-          ],
+          {
+            sortable: 1,
+            name: 'name' as const,
+            label: i18n.location,
+          },
+          {
+            sortable: 1,
+            name: 'self' as const,
+            label: i18n.self,
+            default: true,
+          },
+          {
+            sortable: 1,
+            name: 'total' as const,
+            label: i18n.total,
+          },
+        ],
     [i18n, isDoubles]
   );
 

package/src/i18n.tsx

@@ -73,6 +73,10 @@ export type FlamegraphMessages = {
   focusOnThisFunction: string;
   tableDoubleClickToFocus: string;
   tableRightClickForOptions: string;
+
+  // 火焰图聚焦时的 collapsed 提示
+  collapsedLevelsSingular: string; // "total (1 level collapsed)"
+  collapsedLevelsPlural: string;   // "total (n levels collapsed)"
 };
 
 const defaultTooltipUnitTitles: Record<Units, TooltipUnitMessages> = {
@@ -227,6 +231,10 @@ export const defaultMessages: FlamegraphMessages = {
   focusOnThisFunction: 'Focus on this function',
   tableDoubleClickToFocus: 'Double-click to focus in flamegraph',
   tableRightClickForOptions: 'Right-click for more options',
+
+  // 火焰图聚焦时的 collapsed 提示
+  collapsedLevelsSingular: 'total (1 level collapsed)',
+  collapsedLevelsPlural: 'total ({n} levels collapsed)',
 };
 
 export const zhCNMessages: FlamegraphMessages = {
@@ -286,6 +294,10 @@ export const zhCNMessages: FlamegraphMessages = {
   focusOnThisFunction: '聚焦到此函数',
   tableDoubleClickToFocus: '双击可聚焦到火焰图',
   tableRightClickForOptions: '右键查看更多选项',
+
+  // 火焰图聚焦时的 collapsed 提示
+  collapsedLevelsSingular: '总计（已折叠 1 层）',
+  collapsedLevelsPlural: '总计（已折叠 {n} 层）',
 };
 
 const I18nContext = createContext<FlamegraphMessages>(defaultMessages);

package/src/shims/Table.module.scss

@@ -49,10 +49,17 @@
     }
 
     tr {
+      /* 选中行样式 - 使用更明显的 antd 风格蓝色 */
       &.isRowSelected {
         cursor: pointer;
-        background: var(--ps-table-highlight-row-bg) !important;
-        color: var(--ps-table-highlight-row-text);
+        /* antd 选中蓝色，更明显但不会与红绿/红蓝火焰图冲突 */
+        background: var(--ps-table-highlight-row-bg, #bae0ff) !important;
+        color: var(--ps-table-highlight-row-text, #0958d9);
+        
+        /* 左侧添加强调边框 */
+        td:first-child {
+          box-shadow: inset 3px 0 0 0 var(--ps-table-highlight-border, #1677ff);
+        }
       }
 
       &.isRowDisabled td {

package/src/shims/Table.tsx

@@ -1,6 +1,6 @@
 // src/shims/Table.tsx
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useState, ReactNode, CSSProperties, RefObject } from 'react';
+import React, { useState, useRef, ReactNode, CSSProperties, RefObject } from 'react';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import clsx from 'clsx';
@@ -94,6 +94,46 @@ interface TableProps {
   itemsPerPage?: number;
 }
 
+/**
+ * 表格行组件
+ * 单击立即高亮，双击同时触发高亮和聚焦
+ */
+function TableRow({ row }: { row: BodyRow }) {
+  const {
+    cells,
+    isRowSelected,
+    isRowDisabled,
+    className,
+    onClick,
+    onDoubleClick,
+    onContextMenu,
+    ...rest
+  } = row;
+
+  const renderID = useRef(Math.random()).current;
+
+  return (
+    <tr
+      {...rest}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onContextMenu={onContextMenu}
+      className={clsx(className, {
+        [styles.isRowSelected]: isRowSelected,
+        [styles.isRowDisabled]: isRowDisabled,
+      })}
+    >
+      {cells &&
+        cells.map(({ style, value, ...cellRest }: Cell, index: number) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <td key={renderID + index} style={style} {...cellRest}>
+            {value}
+          </td>
+        ))}
+    </tr>
+  );
+}
+
 function Table({
   sortByDirection,
   sortBy,
@@ -154,45 +194,9 @@ function Table({
             </tr>
           ) : (
             paginate(table.bodyRows, currPage, itemsPerPage).map(
-              ({
-                cells,
-                isRowSelected,
-                isRowDisabled,
-                className,
-                onClick,
-                onDoubleClick,
-                onContextMenu,
-                ...rest
-              }) => {
-                // The problem is that when you switch apps or time-range and the function
-                // names stay the same it leads to an issue where rows don't get re-rendered
-                // So we force a rerender each time.
-                const renderID = Math.random();
-
-                return (
-                  <tr
-                    key={renderID}
-                    {...rest}
-                    onClick={onClick}
-                    onDoubleClick={onDoubleClick}
-                    onContextMenu={onContextMenu}
-                    className={clsx(className, {
-                      [styles.isRowSelected]: isRowSelected,
-                      [styles.isRowDisabled]: isRowDisabled,
-                    })}
-                  >
-                    {cells &&
-                      cells.map(
-                        ({ style, value, ...rest }: Cell, index: number) => (
-                          // eslint-disable-next-line react/no-array-index-key
-                          <td key={renderID + index} style={style} {...rest}>
-                            {value}
-                          </td>
-                        )
-                      )}
-                  </tr>
-                );
-              }
+              (row, idx) => (
+                <TableRow key={row['data-row'] ?? `row-${idx}`} row={row} />
+              )
             )
           )}
         </tbody>