ui: Handle undefined BigInt values properly (#5961)

Author: yomete

ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.tsx

@@ -116,9 +116,8 @@ export const FlameNode = React.memo(
 
     const mappingFile: string | null = arrowToString(mappingColumn?.get(row));
     const functionName: string | null = arrowToString(functionNameColumn?.get(row));
-    const cumulative =
-      cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
-    const diff: bigint | null = diffColumn?.get(row) !== null ? BigInt(diffColumn?.get(row)) : null;
+    const cumulative = cumulativeColumn?.get(row) != null ? BigInt(cumulativeColumn?.get(row)) : 0n;
+    const diff: bigint | null = diffColumn?.get(row) != null ? BigInt(diffColumn?.get(row)) : null;
     const filename: string | null = arrowToString(filenameColumn?.get(row));
     const depth: number = depthColumn?.get(row) ?? 0;
 

ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/useVisibleNodes.ts

@@ -87,7 +87,9 @@ export const useVisibleNodes = ({
 
   return useMemo(() => {
     // Create a stable key for memoization to prevent unnecessary recalculations
-    const memoKey = `${viewport.scrollTop}-${viewport.containerHeight}-${selectedRow}-${effectiveDepth}-${width}`;
+    const memoKey = `${viewport.scrollTop}-${
+      viewport.containerHeight
+    }-${selectedRow}-${effectiveDepth}-${width}-${Number(total)}-${table.numRows}`;
 
     // Return cached result if viewport hasn't meaningfully changed
     if (lastResultRef.current.key === memoKey) {
@@ -117,7 +119,7 @@ export const useVisibleNodes = ({
         ? BigInt(valueOffsetColumn?.get(selectedRow))
         : 0n;
     const selectionCumulative =
-      cumulativeColumn?.get(selectedRow) !== null ? BigInt(cumulativeColumn?.get(selectedRow)) : 0n;
+      cumulativeColumn?.get(selectedRow) != null ? BigInt(cumulativeColumn?.get(selectedRow)) : 0n;
 
     const totalNumber = Number(total);
     const selectionOffsetNumber = Number(selectionOffset);
@@ -134,7 +136,7 @@ export const useVisibleNodes = ({
 
       for (const row of rowsAtDepth) {
         const cumulative =
-          cumulativeColumn?.get(row) !== null ? Number(cumulativeColumn?.get(row)) : 0;
+          cumulativeColumn?.get(row) != null ? Number(cumulativeColumn?.get(row)) : 0;
 
         const valueOffset =
           valueOffsetColumn?.get(row) !== null && valueOffsetColumn?.get(row) !== undefined

ui/packages/shared/profile/src/ProfileView/components/InvertCallStack/index.tsx

@@ -15,17 +15,26 @@ import {Icon} from '@iconify/react';
 
 import {Button, useURLState} from '@parca/components';
 
+import {useResetFlameGraphState} from '../../hooks/useResetFlameGraphState';
+
 const InvertCallStack = (): JSX.Element => {
   const [invertStack = '', setInvertStack] = useURLState('invert_call_stack');
   const isInvert = invertStack === 'true';
+  const resetFlameGraphState = useResetFlameGraphState();
+
+  const handleSetInvert = (value: boolean): void => {
+    setInvertStack(value ? 'true' : '');
+
+    resetFlameGraphState();
+  };
 
   return (
     <div className="flex flex-col">
       <label className="text-sm">&nbsp;</label>
       <Button
         variant="neutral"
         className="flex items-center gap-2 whitespace-nowrap"
-        onClick={() => setInvertStack(isInvert ? '' : 'true')}
+        onClick={() => handleSetInvert(!isInvert)}
         id="h-invert-call-stack"
       >
         <Icon icon={isInvert ? 'ph:sort-ascending' : 'ph:sort-descending'} className="h-4 w-4" />