@parca/profile 0.19.95 → 0.19.103

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.95",
+  "version": "0.19.103",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "0.17.11",
-    "@parca/components": "0.16.386",
-    "@parca/dynamicsize": "0.16.67",
-    "@parca/hooks": "0.0.111",
-    "@parca/icons": "0.16.74",
-    "@parca/parser": "0.16.81",
-    "@parca/store": "0.16.194",
+    "@parca/client": "0.17.16",
+    "@parca/components": "0.16.392",
+    "@parca/dynamicsize": "0.16.72",
+    "@parca/hooks": "0.0.116",
+    "@parca/icons": "0.16.79",
+    "@parca/parser": "0.16.86",
+    "@parca/store": "0.16.199",
     "@parca/test-utils": "0.0.17",
-    "@parca/utilities": "0.0.117",
+    "@parca/utilities": "0.0.122",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -75,9 +75,14 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parca-dev/parca",
+    "directory": "ui/packages/shared/profile"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "3a8c3331a1a9c7f354f0c2915d822b9b0c1c5014"
+  "gitHead": "14996d0bb0fdf1193c1555e4d171aefd5138303b"
 }

package/src/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 
 import {Table} from 'apache-arrow';
 import cx from 'classnames';
@@ -101,36 +101,52 @@ export const FlameNode = React.memo(
     effectiveDepth,
     tooltipId = 'default',
   }: FlameNodeProps): React.JSX.Element {
-    // get the columns to read from
-    const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
-    const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
-    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
-    const depthColumn = table.getChild(FIELD_DEPTH);
-    const diffColumn = table.getChild(FIELD_DIFF);
-    const filenameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
-    const valueOffsetColumn = table.getChild(FIELD_VALUE_OFFSET);
-    const tsColumn = table.getChild(FIELD_TIMESTAMP);
+    // Memoize column references - only changes when table changes
+    const columns = useMemo(
+      () => ({
+        mapping: table.getChild(FIELD_MAPPING_FILE),
+        functionName: table.getChild(FIELD_FUNCTION_NAME),
+        cumulative: table.getChild(FIELD_CUMULATIVE),
+        depth: table.getChild(FIELD_DEPTH),
+        diff: table.getChild(FIELD_DIFF),
+        filename: table.getChild(FIELD_FUNCTION_FILE_NAME),
+        valueOffset: table.getChild(FIELD_VALUE_OFFSET),
+        ts: table.getChild(FIELD_TIMESTAMP),
+      }),
+      [table]
+    );
 
     // get the actual values from the columns
     const binaries = useAppSelector(selectBinaries);
 
-    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 filename: string | null = arrowToString(filenameColumn?.get(row));
-    const depth: number = depthColumn?.get(row) ?? 0;
-
-    const valueOffset: bigint =
-      valueOffsetColumn?.get(row) !== null && valueOffsetColumn?.get(row) !== undefined
-        ? BigInt(valueOffsetColumn?.get(row))
-        : 0n;
+    // Memoize row data extraction - only changes when table or row changes
+    const rowData = useMemo(() => {
+      const mappingFile: string | null = arrowToString(columns.mapping?.get(row));
+      const functionName: string | null = arrowToString(columns.functionName?.get(row));
+      const cumulative =
+        columns.cumulative?.get(row) != null ? BigInt(columns.cumulative?.get(row)) : 0n;
+      const diff: bigint | null =
+        columns.diff?.get(row) != null ? BigInt(columns.diff?.get(row)) : null;
+      const filename: string | null = arrowToString(columns.filename?.get(row));
+      const depth: number = columns.depth?.get(row) ?? 0;
+      const valueOffset: bigint =
+        columns.valueOffset?.get(row) !== null && columns.valueOffset?.get(row) !== undefined
+          ? BigInt(columns.valueOffset?.get(row))
+          : 0n;
+
+      return {mappingFile, functionName, cumulative, diff, filename, depth, valueOffset};
+    }, [columns, row]);
+
+    const {mappingFile, functionName, cumulative, diff, filename, depth, valueOffset} = rowData;
 
     const colorAttribute =
       colorBy === 'filename' ? filename : colorBy === 'binary' ? mappingFile : null;
 
-    const hoveringName =
-      hoveringRow !== undefined ? arrowToString(functionNameColumn?.get(hoveringRow)) : '';
+    // Memoize hovering name lookup
+    const hoveringName = useMemo(() => {
+      return hoveringRow !== undefined ? arrowToString(columns.functionName?.get(hoveringRow)) : '';
+    }, [columns.functionName, hoveringRow]);
+
     const shouldBeHighlighted =
       functionName != null && hoveringName != null && functionName === hoveringName;
 
@@ -147,18 +163,59 @@ export const FlameNode = React.memo(
       return row === 0 ? 'root' : nodeLabel(table, row, binaries.length > 1);
     }, [table, row, binaries]);
 
+    // Memoize selection data - only changes when selectedRow changes
+    const selectionData = useMemo(() => {
+      const selectionOffset =
+        columns.valueOffset?.get(selectedRow) !== null &&
+        columns.valueOffset?.get(selectedRow) !== undefined
+          ? BigInt(columns.valueOffset?.get(selectedRow))
+          : 0n;
+      const selectionCumulative =
+        columns.cumulative?.get(selectedRow) !== null
+          ? BigInt(columns.cumulative?.get(selectedRow))
+          : 0n;
+      const selectedDepth = columns.depth?.get(selectedRow);
+      const total = columns.cumulative?.get(selectedRow);
+      return {selectionOffset, selectionCumulative, selectedDepth, total};
+    }, [columns, selectedRow]);
+
+    const {selectionOffset, selectionCumulative, selectedDepth, total} = selectionData;
+
+    // Memoize tsBounds - only changes when profileSource changes
+    const tsBounds = useMemo(() => boundsFromProfileSource(profileSource), [profileSource]);
+
+    // Memoize event handlers
+    const onMouseEnter = useCallback((): void => {
+      setHoveringRow(row);
+      window.dispatchEvent(
+        new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
+          detail: {row},
+        })
+      );
+    }, [setHoveringRow, row, tooltipId]);
+
+    const onMouseLeave = useCallback((): void => {
+      setHoveringRow(undefined);
+      window.dispatchEvent(
+        new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
+          detail: {row: null},
+        })
+      );
+    }, [setHoveringRow, tooltipId]);
+
+    const handleContextMenu = useCallback(
+      (e: React.MouseEvent): void => {
+        onContextMenu(e, row);
+      },
+      [onContextMenu, row]
+    );
+
+    // Early returns - all hooks must be called before this point
     // Hide frames beyond effective depth limit
     if (effectiveDepth !== undefined && depth > effectiveDepth) {
       return <></>;
     }
 
-    const selectionOffset =
-      valueOffsetColumn?.get(selectedRow) !== null &&
-      valueOffsetColumn?.get(selectedRow) !== undefined
-        ? BigInt(valueOffsetColumn?.get(selectedRow))
-        : 0n;
-    const selectionCumulative =
-      cumulativeColumn?.get(selectedRow) !== null ? BigInt(cumulativeColumn?.get(selectedRow)) : 0n;
     if (
       valueOffset + cumulative <= selectionOffset ||
       valueOffset >= selectionOffset + selectionCumulative
@@ -173,8 +230,6 @@ export const FlameNode = React.memo(
     }
 
     // Cumulative can be larger than total when a selection is made. All parents of the selection are likely larger, but we want to only show them as 100% in the graph.
-    const tsBounds = boundsFromProfileSource(profileSource);
-    const total = cumulativeColumn?.get(selectedRow);
     const totalRatio = cumulative > total ? 1 : Number(cumulative) / Number(total);
     const width: number = isFlameChart
       ? (Number(cumulative) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
@@ -184,35 +239,12 @@ export const FlameNode = React.memo(
       return <></>;
     }
 
-    const selectedDepth = depthColumn?.get(selectedRow);
     const styles =
       selectedDepth !== undefined && selectedDepth > depth ? fadedFlameRectStyles : flameRectStyles;
 
-    const onMouseEnter = (): void => {
-      setHoveringRow(row);
-      window.dispatchEvent(
-        new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
-          detail: {row},
-        })
-      );
-    };
-
-    const onMouseLeave = (): void => {
-      setHoveringRow(undefined);
-      window.dispatchEvent(
-        new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
-          detail: {row: null},
-        })
-      );
-    };
-
-    const handleContextMenu = (e: React.MouseEvent): void => {
-      onContextMenu(e, row);
-    };
-
-    const ts = tsColumn !== null ? Number(tsColumn.get(row)) : 0;
+    const ts = columns.ts !== null ? Number(columns.ts.get(row)) : 0;
     const x =
-      isFlameChart && tsColumn !== null
+      isFlameChart && columns.ts !== null
         ? ((ts - Number(tsBounds[0])) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
         : selectedDepth > depth
         ? 0

package/src/ProfileFlameGraph/FlameGraphArrow/index.tsx

@@ -25,7 +25,7 @@ import {Table, tableFromIPC} from 'apache-arrow';
 import {useContextMenu} from 'react-contexify';
 
 import {FlamegraphArrow} from '@parca/client';
-import {useParcaContext} from '@parca/components';
+import {FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext} from '@parca/components';
 import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 import {getColorForFeature, selectDarkMode, useAppSelector} from '@parca/store';
@@ -38,6 +38,7 @@ import ContextMenuWrapper, {ContextMenuWrapperRef} from './ContextMenuWrapper';
 import {FlameNode, RowHeight, colorByColors} from './FlameGraphNodes';
 import {MemoizedTooltip} from './MemoizedTooltip';
 import {TooltipProvider} from './TooltipContext';
+import {useBatchedRendering} from './useBatchedRendering';
 import {useScrollViewport} from './useScrollViewport';
 import {useVisibleNodes} from './useVisibleNodes';
 import {
@@ -136,6 +137,7 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   isFlameChart = false,
   isRenderedAsFlamegraph = false,
   isInSandwichView = false,
+  isHalfScreen,
   tooltipId = 'default',
   maxFrameCount,
   isExpanded = false,
@@ -163,6 +165,7 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   const svg = useRef(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const renderStartTime = useRef<number>(0);
+  const hasInitialRenderCompleted = useRef(false);
 
   const [svgElement, setSvgElement] = useState<SVGSVGElement | null>(null);
 
@@ -291,6 +294,18 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
     effectiveDepth: deferredEffectiveDepth,
   });
 
+  // Add nodes in incremental batches to avoid blocking the UI
+  const {items: batchedNodes, isComplete: isBatchingComplete} = useBatchedRendering(visibleNodes, {
+    batchSize: 500,
+  });
+  if (isBatchingComplete) {
+    hasInitialRenderCompleted.current = true;
+  }
+
+  // Show skeleton only during initial load, not during scroll updates
+  const showSkeleton =
+    !hasInitialRenderCompleted.current && batchedNodes.length !== visibleNodes.length;
+
   useEffect(() => {
     if (perf?.markInteraction != null) {
       renderStartTime.current = performance.now();
@@ -327,12 +342,22 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
           isInSandwichView={isInSandwichView}
         />
         <MemoizedTooltip contextElement={svgElement} dockedMetainfo={dockedMetainfo} />
+        {showSkeleton && (
+          <div className="absolute inset-0 z-10">
+            {isRenderedAsFlamegraph ? (
+              <SandwichFlameGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
+            ) : (
+              <FlameGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
+            )}
+          </div>
+        )}
         <div
           ref={containerRef}
           className="overflow-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 will-change-transform scroll-smooth webkit-overflow-scrolling-touch contain"
           style={{
             width: width ?? '100%',
             contain: 'layout style paint',
+            visibility: !showSkeleton ? 'visible' : 'hidden',
           }}
         >
           <svg
@@ -342,7 +367,7 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
             preserveAspectRatio="xMinYMid"
             ref={svg}
           >
-            {visibleNodes.map(row => (
+            {batchedNodes.map(row => (
               <FlameNode
                 key={row}
                 table={table}

package/src/ProfileFlameGraph/FlameGraphArrow/useBatchedRendering.ts

@@ -0,0 +1,84 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {useEffect, useRef, useState} from 'react';
+
+interface UseBatchedRenderingOptions {
+  batchSize?: number;
+  // Delay between batches in ms (0 = next animation frame)
+  batchDelay?: number;
+}
+
+interface UseBatchedRenderingResult<T> {
+  items: T[];
+  isComplete: boolean;
+}
+
+// useBatchedRendering - Helps in incrementally rendering items in batches to avoid UI blocking.
+export const useBatchedRendering = <T>(
+  items: T[],
+  options: UseBatchedRenderingOptions = {}
+): UseBatchedRenderingResult<T> => {
+  const {batchSize = 500, batchDelay = 0} = options;
+
+  const [renderedCount, setRenderedCount] = useState(0);
+  const itemsRef = useRef(items);
+  const rafRef = useRef<number | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (itemsRef.current !== items) {
+      itemsRef.current = items;
+      setRenderedCount(prev => {
+        if (items.length === 0) return 0;
+        // If new items were added (scrolling down), keep current progress
+        if (items.length > prev) return prev;
+        // If items reduced, cap to new length
+        return Math.min(prev, items.length);
+      });
+    }
+  }, [items]);
+
+  // Progressively render more items
+  useEffect(() => {
+    if (renderedCount === items.length) {
+      return;
+    }
+
+    const scheduleNextBatch = (): void => {
+      const incrementState = (): void => {
+        setRenderedCount(prev => Math.min(prev + batchSize, items.length));
+      };
+      if (batchDelay > 0) {
+        timeoutRef.current = setTimeout(incrementState, batchDelay);
+      } else {
+        rafRef.current = requestAnimationFrame(incrementState);
+      }
+    };
+    scheduleNextBatch();
+
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [renderedCount, items.length, batchSize, batchDelay]);
+
+  return {
+    items: items.slice(0, renderedCount),
+    isComplete: renderedCount === items.length,
+  };
+};

package/src/ProfileFlameGraph/FlameGraphArrow/useScrollViewport.ts

@@ -20,6 +20,21 @@ export interface ViewportState {
   containerWidth: number;
 }
 
+// Find the scrollable ancestor (the element with overflow: auto/scroll)
+const findScrollableParent = (element: HTMLElement | null): HTMLElement | undefined => {
+  if (element === null) return undefined;
+  let current: HTMLElement | null = element.parentElement;
+  while (current !== null) {
+    const style = window.getComputedStyle(current);
+    const overflowY = style.overflowY;
+    if (overflowY === 'auto' || overflowY === 'scroll') {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return undefined;
+};
+
 export const useScrollViewport = (containerRef: React.RefObject<HTMLDivElement>): ViewportState => {
   const [viewport, setViewport] = useState<ViewportState>({
     scrollTop: 0,
@@ -33,11 +48,25 @@ export const useScrollViewport = (containerRef: React.RefObject<HTMLDivElement>)
   const updateViewport = useCallback(() => {
     if (containerRef.current !== null) {
       const container = containerRef.current;
+      const rect = container.getBoundingClientRect();
+
+      // Restrict container height to the visible portion on screen
+      // This handles cases where the container is partially off-screen
+      // We only want to consider the visible part for culling calculations
+
+      const containerTop = rect.top;
+      const containerBottom = rect.bottom;
+      const viewportTop = 0;
+      const viewportBottom = window.innerHeight;
+      const visibleTop = Math.max(containerTop, viewportTop);
+      const visibleBottom = Math.min(containerBottom, viewportBottom);
+      const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+      const scrollOffset = Math.max(0, viewportTop - containerTop);
 
       const newViewport = {
-        scrollTop: container.scrollTop,
+        scrollTop: scrollOffset,
         scrollLeft: container.scrollLeft,
-        containerHeight: container.clientHeight,
+        containerHeight: visibleHeight, // Only the visible portion
         containerWidth: container.clientWidth,
       };
 
@@ -59,6 +88,8 @@ export const useScrollViewport = (containerRef: React.RefObject<HTMLDivElement>)
     const container = containerRef.current;
     if (container === null) return;
 
+    const scrollableParent = findScrollableParent(container);
+
     // ResizeObserver Strategy:
     // Monitor container size changes (window resize, layout shifts)
     // to update viewport dimensions for accurate culling calculations
@@ -66,10 +97,12 @@ export const useScrollViewport = (containerRef: React.RefObject<HTMLDivElement>)
       throttledUpdateViewport();
     });
 
-    // Container Scroll Event Strategy:
-    // Use passive event listeners for better scroll performance
-    // Throttle with requestAnimationFrame to maintain 60fps target
+    // Listen to scroll on the actual scrollable parent
+
+    scrollableParent?.addEventListener('scroll', throttledUpdateViewport, {passive: true});
     container.addEventListener('scroll', throttledUpdateViewport, {passive: true});
+    window.addEventListener('scroll', throttledUpdateViewport, {passive: true});
+
     resizeObserver.observe(container);
 
     // Initialize viewport state on mount
@@ -77,7 +110,9 @@ export const useScrollViewport = (containerRef: React.RefObject<HTMLDivElement>)
 
     return () => {
       // Cleanup: Remove event listeners and cancel pending animations
+      scrollableParent?.removeEventListener('scroll', throttledUpdateViewport);
       container.removeEventListener('scroll', throttledUpdateViewport);
+      window.removeEventListener('scroll', throttledUpdateViewport);
       resizeObserver.disconnect();
       if (throttleRef.current !== null) {
         cancelAnimationFrame(throttleRef.current);

package/src/ProfileFlameGraph/FlameGraphArrow/useVisibleNodes.ts

@@ -85,7 +85,19 @@ export const useVisibleNodes = ({
     result: number[];
   }>({key: '', result: []});
 
+  const renderedRangeRef = useRef<{minDepth: number; maxDepth: number; table: Table<any> | null}>({
+    minDepth: Infinity,
+    maxDepth: -Infinity,
+    table: null,
+  });
+
   return useMemo(() => {
+    // This happens when the continer is scrolled off screen, in this case we return all previously rendered nodes
+    // to avoid trimming the rendered nodes to zero which would cause jank when scrolling back into view
+    if (viewport.containerHeight === 0 && lastResultRef.current.result.length > 0) {
+      return lastResultRef.current.result;
+    }
+
     // Create a stable key for memoization to prevent unnecessary recalculations
     const memoKey = `${viewport.scrollTop}-${
       viewport.containerHeight
@@ -96,7 +108,7 @@ export const useVisibleNodes = ({
       return lastResultRef.current.result;
     }
 
-    if (table === null || viewport.containerHeight === 0) return [];
+    if (table === null) return [];
 
     const visibleRows: number[] = [];
     const {scrollTop, containerHeight} = viewport;
@@ -104,11 +116,35 @@ export const useVisibleNodes = ({
     // Viewport Culling Algorithm:
     // 1. Calculate visible depth range based on scroll position and container height
     // 2. Add 5-row buffer above/below for smooth scrolling experience
-    const startDepth = Math.max(0, Math.floor(scrollTop / RowHeight) - 5);
-    const endDepth = Math.min(
-      effectiveDepth,
-      Math.ceil((scrollTop + containerHeight) / RowHeight) + 5
+    // Note: We never shrink the rendered range to avoid back and forth node removals (and in turn additions when scrolled down again) to the dom.
+
+    const BUFFER = 15; // Buffer for smoother scrolling
+
+    const visibleStartDepth = Math.max(0, Math.floor(scrollTop / RowHeight) - BUFFER);
+    const visibleDepths = Math.ceil(containerHeight / RowHeight);
+    const visibleEndDepth = Math.min(effectiveDepth, visibleStartDepth + visibleDepths + BUFFER);
+
+    // Reset range if table changed (new data loaded) as this is new data
+    if (renderedRangeRef.current.table !== table) {
+      renderedRangeRef.current = {
+        minDepth: Infinity,
+        maxDepth: -Infinity,
+        table: table,
+      };
+    }
+
+    // Expand the rendered range (never shrink when scrolling up/down)
+    renderedRangeRef.current.minDepth = Math.min(
+      renderedRangeRef.current.minDepth,
+      visibleStartDepth
     );
+    renderedRangeRef.current.maxDepth = Math.max(
+      renderedRangeRef.current.maxDepth,
+      visibleEndDepth
+    );
+
+    const startDepth = renderedRangeRef.current.minDepth;
+    const endDepth = renderedRangeRef.current.maxDepth;
 
     const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
     const valueOffsetColumn = table.getChild(FIELD_VALUE_OFFSET);

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -29,7 +29,7 @@ interface MetricsGraphSectionProps {
   querySelection: QuerySelection;
   profileSelection: ProfileSelection | null;
   comparing: boolean;
-  sumBy: string[] | null;
+  sumBy: string[] | undefined;
   defaultSumByLoading: boolean;
   queryClient: QueryServiceClient;
   queryExpressionString: string;
@@ -170,7 +170,7 @@ export function MetricsGraphSection({
                   to={querySelection.to}
                   profile={profileSelection}
                   comparing={comparing}
-                  sumBy={querySelection.sumBy ?? sumBy ?? []}
+                  sumBy={sumBy ?? []}
                   sumByLoading={defaultSumByLoading}
                   setTimeRange={handleTimeRangeChange}
                   addLabelMatcher={addLabelMatcher}

package/src/ProfileSelector/index.tsx

@@ -209,10 +209,6 @@ const ProfileSelector = ({
         const currentTo = timeRangeSelection.getToMs(true);
         const currentRangeKey = timeRangeSelection.getRangeKey();
         // Commit with refreshed time range
-        console.log(
-          '[draftExpression] setQueryExpression: committing with refreshed time range:',
-          draftSelection.expression
-        );
         commitDraft({
           from: currentFrom,
           to: currentTo,
@@ -332,7 +328,7 @@ const ProfileSelector = ({
         querySelection={querySelection}
         profileSelection={profileSelection}
         comparing={comparing}
-        sumBy={querySelection.sumBy ?? []}
+        sumBy={querySelection.sumBy}
         defaultSumByLoading={sumByLoading}
         queryClient={queryClient}
         queryExpressionString={queryExpressionString}

package/src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts

@@ -18,6 +18,8 @@ import {useProfileFilters} from '../components/ProfileFilters/useProfileFilters'
 export const useResetStateOnProfileTypeChange = (): (() => void) => {
   const [groupBy, setGroupBy] = useURLState('group_by');
   const [curPath, setCurPath] = useURLState('cur_path');
+  const [sumByA, setSumByA] = useURLState('sum_by_a');
+  const [sumByB, setSumByB] = useURLState('sum_by_b');
   const {resetFilters} = useProfileFilters();
   const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
   const batchUpdates = useURLStateBatch();
@@ -34,6 +36,12 @@ export const useResetStateOnProfileTypeChange = (): (() => void) => {
       if (sandwichFunctionName !== undefined) {
         setSandwichFunctionName(undefined);
       }
+      if (sumByA !== undefined) {
+        setSumByA(undefined);
+      }
+      if (sumByB !== undefined) {
+        setSumByB(undefined);
+      }
 
       resetFilters();
     });

package/src/SimpleMatchers/Select.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
@@ -350,7 +350,7 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
                 </div>
               ) : (
                 groupedFilteredItems.map(group => (
-                  <>
+                  <Fragment key={group.type}>
                     {groupedFilteredItems.length > 1 &&
                     groupedFilteredItems.every(g => g.type !== '') &&
                     group.type !== '' ? (
@@ -369,7 +369,7 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
                         handleSelection={handleSelection}
                       />
                     ))}
-                  </>
+                  </Fragment>
                 ))
               )}
             </div>