@parca/profile 0.19.139 → 0.19.142

package/src/MatchersInput/SuggestionsList.test.tsx

@@ -0,0 +1,70 @@
+// 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 {useRef} from 'react';
+
+import {act, fireEvent, render} from '@testing-library/react';
+import {beforeAll, describe, expect, it, vi} from 'vitest';
+
+import SuggestionsList, {Suggestion, Suggestions} from './SuggestionsList';
+
+vi.mock('@parca/components', () => ({
+  RefreshButton: ({title}: {title: string}) => <button type="button">{title}</button>,
+  useParcaContext: () => ({
+    loader: <div>loading</div>,
+  }),
+}));
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn();
+});
+
+const TestHarness = ({inputKey = 'initial'}: {inputKey?: string}): JSX.Element => {
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const suggestions = new Suggestions();
+  suggestions.labelNames.push(new Suggestion('labelName', 'na', 'namespace'));
+
+  return (
+    <div>
+      <textarea key={inputKey} ref={inputRef} />
+      <SuggestionsList
+        suggestions={suggestions}
+        applySuggestion={vi.fn()}
+        inputRef={inputRef}
+        runQuery={vi.fn()}
+        focusedInput
+        isLabelNamesLoading={false}
+        isLabelValuesLoading={false}
+        shouldTrimPrefix={false}
+        refetchLabelValues={vi.fn(async () => {})}
+        refetchLabelNames={vi.fn(async () => {})}
+      />
+    </div>
+  );
+};
+
+describe('SuggestionsList', () => {
+  it('rebinds keyboard listeners when the textarea ref points to a remounted node', () => {
+    const {rerender, getByRole, getByText} = render(<TestHarness inputKey="first" />);
+
+    rerender(<TestHarness inputKey="second" />);
+
+    const textarea = getByRole('textbox');
+    act(() => {
+      fireEvent.keyDown(textarea, {key: 'ArrowDown'});
+    });
+
+    // eslint-disable-next-line jest-dom/prefer-to-have-class
+    expect(getByText('namespace').className).toContain('bg-indigo-600');
+  });
+});

package/src/MatchersInput/SuggestionsList.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Fragment, useCallback, useEffect, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useState} from 'react';
 
 import {Transition} from '@headlessui/react';
 import {usePopper} from 'react-popper';
@@ -48,7 +48,7 @@ export class Suggestions {
 interface Props {
   suggestions: Suggestions;
   applySuggestion: (suggestion: Suggestion) => void;
-  inputRef: HTMLTextAreaElement | null;
+  inputRef: React.RefObject<HTMLTextAreaElement | null>;
   runQuery: () => void;
   focusedInput: boolean;
   isLabelNamesLoading: boolean;
@@ -82,7 +82,7 @@ const SuggestionsList = ({
   refetchLabelNames,
 }: Props): JSX.Element => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const {styles, attributes} = usePopper(inputRef, popperElement, {
+  const {styles, attributes} = usePopper(inputRef.current, popperElement, {
     placement: 'bottom-start',
   });
   const [highlightedSuggestionIndex, setHighlightedSuggestionIndex] = useState<number>(-1);
@@ -227,18 +227,19 @@ const SuggestionsList = ({
   );
 
   useEffect(() => {
-    if (inputRef == null) {
+    const el = inputRef.current;
+    if (el == null) {
       return;
     }
 
-    inputRef.addEventListener('keydown', handleKeyDown);
-    inputRef.addEventListener('keypress', handleKeyPress as any);
+    el.addEventListener('keydown', handleKeyDown);
+    el.addEventListener('keypress', handleKeyPress as any);
 
     return () => {
-      inputRef.removeEventListener('keydown', handleKeyDown);
-      inputRef.removeEventListener('keypress', handleKeyPress as any);
+      el.removeEventListener('keydown', handleKeyDown);
+      el.removeEventListener('keypress', handleKeyPress as any);
     };
-  }, [inputRef, highlightedSuggestionIndex, suggestions, handleKeyPress, handleKeyDown]);
+  });
 
   useEffect(() => {
     if (suggestionsLength > 0 && focusedInput) {
@@ -263,7 +264,7 @@ const SuggestionsList = ({
             leaveTo="opacity-0"
           >
             <div
-              style={{width: inputRef?.offsetWidth}}
+              style={{width: inputRef.current?.offsetWidth}}
               className="absolute z-10 mt-1 max-h-[400px] rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 sm:text-sm flex flex-col"
             >
               <div className="flex-1 overflow-auto min-h-0">

package/src/MatchersInput/index.tsx

@@ -211,7 +211,7 @@ const MatchersInput = ({setDraftMatchers, draftParsedQuery, commitDraft}: Props)
         isLabelNamesLoading={isLabelNamesLoading}
         suggestions={suggestionSections}
         applySuggestion={applySuggestion}
-        inputRef={inputRef.current}
+        inputRef={inputRef}
         runQuery={commitDraft}
         focusedInput={focusedInput}
         isLabelValuesLoading={

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -11,7 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo, useState} from 'react';
+/* eslint-disable react-hooks/refs */
+
+import {useLayoutEffect, useRef, useState} from 'react';
 
 import {usePopper} from 'react-popper';
 
@@ -28,21 +30,16 @@ interface Props {
   content: React.ReactNode;
 }
 
-const virtualElement: VirtualElement = {
-  getBoundingClientRect: () => {
-    const emptyRect: DOMRect = {
-      width: 0,
-      height: 0,
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      x: 0,
-      y: 0,
-      toJSON: () => ({}),
-    };
-    return emptyRect;
-  },
+const emptyRect: DOMRect = {
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
 };
 
 const createDomRect = (x: number, y: number): DOMRect => {
@@ -61,9 +58,13 @@ const createDomRect = (x: number, y: number): DOMRect => {
 };
 
 const MetricsTooltip = ({x, y, contextElement, content}: Props): JSX.Element => {
+  'use no memo';
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const virtualElementRef = useRef<VirtualElement>({
+    getBoundingClientRect: () => emptyRect,
+  });
 
-  const {styles, attributes, update} = usePopper(virtualElement, popperElement, {
+  const {styles, attributes, update} = usePopper(virtualElementRef.current, popperElement, {
     placement: 'auto-start',
     strategy: 'absolute',
     modifiers: [
@@ -82,26 +83,13 @@ const MetricsTooltip = ({x, y, contextElement, content}: Props): JSX.Element =>
     ],
   });
 
-  useMemo(() => {
-    virtualElement.getBoundingClientRect = (): DOMRect => {
-      const domRect: DOMRect = (contextElement as Element)?.getBoundingClientRect() ?? {
-        width: 0,
-        height: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        x: 0,
-        y: 0,
-        toJSON: () => ({}),
-      };
+  useLayoutEffect(() => {
+    virtualElementRef.current.getBoundingClientRect = (): DOMRect => {
+      const domRect: DOMRect = (contextElement as Element)?.getBoundingClientRect() ?? emptyRect;
       return createDomRect(domRect.x + x, domRect.y + y);
     };
-  }, [x, y, contextElement]);
-
-  useEffect(() => {
     void update?.();
-  }, [x, y, update]);
+  }, [x, y, contextElement, update]);
 
   // Don't render anything if content is null or undefined
   if (content == null) {

package/src/PreSelectedMatchers/index.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/refs */
+
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 import {Icon} from '@iconify/react';
@@ -29,6 +31,7 @@ interface Props {
 }
 
 const PreSelectedMatchers: React.FC<Props> = ({labelNames}) => {
+  'use no memo';
   const [labelValuesMap, setLabelValuesMap] = useState<Record<string, string[]>>({});
   const [isLoading, setIsLoading] = useState<Record<string, boolean>>({});
   const metadata = useGrpcMetadata();

package/src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/set-state-in-effect */
+
 import {useEffect, useRef, useState} from 'react';
 
 import {useURLState} from '@parca/components';
@@ -64,6 +66,7 @@ function calculateTruncatedText(
 }
 
 function TextWithEllipsis({text, x, y, width}: Props): JSX.Element {
+  'use no memo';
   const textRef = useRef<SVGTextElement>(null);
   const [displayText, setDisplayText] = useState(text);
   const [alignFunctionName] = useURLState('align_function_name');

package/src/ProfileFlameGraph/FlameGraphArrow/TooltipContext.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/refs */
+
 import React, {createContext, useCallback, useContext, useMemo, useRef} from 'react';
 
 import {Table} from '@uwdata/flechette';
@@ -68,6 +70,7 @@ export const TooltipProvider: React.FC<TooltipProviderProps> = ({
   onTooltipUpdate,
   tooltipId = 'default',
 }) => {
+  'use no memo';
   const tooltipStateRef = useRef<TooltipState>({row: null, x: 0, y: 0});
 
   const updateTooltip = useCallback(

package/src/ProfileFlameGraph/FlameGraphArrow/ZoomControls.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/refs */
+
 import React from 'react';
 
 import {Icon} from '@iconify/react';
@@ -33,6 +35,7 @@ export const ZoomControls = ({
   resetZoom,
   portalRef,
 }: ZoomControlsProps): React.JSX.Element => {
+  'use no memo';
   const controls = (
     <div className="flex items-center gap-1 rounded-md border border-gray-200 bg-white/90 px-1 py-0.5 shadow-sm backdrop-blur-sm dark:border-gray-600 dark:bg-gray-800/90">
       <button

package/src/ProfileFlameGraph/FlameGraphArrow/useBatchedRendering.ts

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/set-state-in-effect */
+
 import {useEffect, useRef, useState} from 'react';
 
 interface UseBatchedRenderingOptions {
@@ -29,6 +31,7 @@ export const useBatchedRendering = <T>(
   items: T[],
   options: UseBatchedRenderingOptions = {}
 ): UseBatchedRenderingResult<T> => {
+  'use no memo';
   const {batchSize = 500, batchDelay = 0} = options;
 
   const [renderedCount, setRenderedCount] = useState(0);

package/src/ProfileSelector/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {Dispatch, SetStateAction, useCallback, useMemo, useRef, useState} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 
@@ -154,7 +154,20 @@ const ProfileSelector = ({
   );
 
   // Sync local timeRangeSelection when URL state changes externally (e.g., "Switch to 1 minute" button)
-  useEffect(() => {
+  const [prevQueryTimeSelection, setPrevQueryTimeSelection] = useState(
+    querySelection.timeSelection
+  );
+  const [prevQueryFrom, setPrevQueryFrom] = useState(querySelection.from);
+  const [prevQueryTo, setPrevQueryTo] = useState(querySelection.to);
+
+  if (
+    prevQueryTimeSelection !== querySelection.timeSelection ||
+    prevQueryFrom !== querySelection.from ||
+    prevQueryTo !== querySelection.to
+  ) {
+    setPrevQueryTimeSelection(querySelection.timeSelection);
+    setPrevQueryFrom(querySelection.from);
+    setPrevQueryTo(querySelection.to);
     setTimeRangeSelection(
       DateTimeRange.fromRangeKey(
         querySelection.timeSelection,
@@ -162,7 +175,7 @@ const ProfileSelector = ({
         querySelection.to
       )
     );
-  }, [querySelection.timeSelection, querySelection.from, querySelection.to]);
+  }
 
   const [queryExpressionString, setQueryExpressionString] = useState(draftSelection.expression);
 
@@ -198,18 +211,28 @@ const ProfileSelector = ({
     return result.response?.labelNames === undefined ? [] : result.response.labelNames;
   }, [result]);
 
-  useEffect(() => {
+  const [prevEnforcedProfileName, setPrevEnforcedProfileName] = useState(enforcedProfileName);
+  const [prevQueryExpression, setPrevQueryExpression] = useState(querySelection.expression);
+
+  if (
+    prevEnforcedProfileName !== enforcedProfileName ||
+    prevQueryExpression !== querySelection.expression
+  ) {
+    setPrevEnforcedProfileName(enforcedProfileName);
+    setPrevQueryExpression(querySelection.expression);
     if (enforcedProfileName !== '') {
       const [q, changed] = Query.parse(querySelection.expression).setProfileName(
         enforcedProfileName
       );
       if (changed) {
         setQueryExpressionString(q.toString());
-        return;
+      } else {
+        setQueryExpressionString(querySelection.expression);
       }
+    } else {
+      setQueryExpressionString(querySelection.expression);
     }
-    setQueryExpressionString(querySelection.expression);
-  }, [enforcedProfileName, querySelection.expression]);
+  }
 
   const enforcedProfileNameQuery = (): Query => {
     const pq = Query.parse(queryExpressionString);

package/src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/set-state-in-effect */
+
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 import {Menu} from '@headlessui/react';
@@ -73,6 +75,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
   customSubmenu,
   renderAsDiv = false,
 }) => {
+  'use no memo';
   const menuRef = useRef<HTMLDivElement>(null);
   const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
 

package/src/ProfileView/components/VisualizationContainer/index.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/refs */
+
 import {FC} from 'react';
 
 import cx from 'classnames';
@@ -42,6 +44,7 @@ export const VisualizationContainer: FC<VisualizationContainerProps> = ({
   index,
   actionButtons,
 }) => {
+  'use no memo';
   const {handleClosePanel} = useDashboard();
 
   return (

package/src/Table/hooks/useTableConfiguration.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo, useState} from 'react';
+import {useMemo} from 'react';
 
 import {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
 
@@ -47,8 +47,8 @@ export function useTableConfiguration({
     alwaysReturnArray: true,
   });
 
-  const [columnVisibility, setColumnVisibility] = useState(() => {
-    return {
+  const columnVisibility = useMemo(() => {
+    const defaults: Record<string, boolean> = {
       color: true,
       flat: true,
       flatPercentage: false,
@@ -63,19 +63,13 @@ export function useTableConfiguration({
       functionFileName: false,
       mappingFile: false,
     };
-  });
-
-  useEffect(() => {
     if (Array.isArray(tableColumns)) {
-      setColumnVisibility(prevState => {
-        const newState = {...prevState};
-        (Object.keys(newState) as ColumnName[]).forEach(column => {
-          newState[column] = tableColumns.includes(column);
-        });
-        return newState;
+      (Object.keys(defaults) as ColumnName[]).forEach(column => {
+        defaults[column] = tableColumns.includes(column);
       });
     }
-  }, [tableColumns]);
+    return defaults;
+  }, [tableColumns, compareMode]);
 
   const columns = useMemo<Array<ColumnDef<Row>>>(() => {
     const baseColumns: Array<ColumnDef<Row>> = [

package/src/useDelayedLoader.ts

@@ -18,20 +18,20 @@ interface DelayedLoaderOptions {
 }
 
 const useDelayedLoader = (isLoading = false, options?: DelayedLoaderOptions): boolean => {
+  'use no memo';
   const {delay = 500} = options ?? {};
   const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
   useEffect(() => {
-    let showLoaderTimeout: ReturnType<typeof setTimeout>;
-    if (isLoading && !isLoaderVisible) {
-      // if the request takes longer than half a second, show the loading icon
-      showLoaderTimeout = setTimeout(() => {
-        setIsLoaderVisible(true);
-      }, delay);
-    } else if (!isLoading && isLoaderVisible) {
+    if (!isLoading) return;
+    // if the request takes longer than half a second, show the loading icon
+    const showLoaderTimeout = setTimeout(() => {
+      setIsLoaderVisible(true);
+    }, delay);
+    return () => {
+      clearTimeout(showLoaderTimeout);
       setIsLoaderVisible(false);
-    }
-    return () => clearTimeout(showLoaderTimeout);
-  }, [isLoading, isLoaderVisible, delay]);
+    };
+  }, [isLoading, delay]);
 
   return isLoaderVisible;
 };

package/src/useSumBy.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 
 import {QueryServiceClient} from '@parca/client';
 import {DateTimeRange} from '@parca/components';
@@ -70,14 +70,19 @@ export const useSumBySelection = (
   );
 
   // Update userSelectedSumBy when defaultValue changes (e.g., during navigation)
-  useEffect(() => {
+  const [prevProfileType, setPrevProfileType] = useState(profileType);
+  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);
+
+  if (prevProfileType !== profileType || prevDefaultValue !== defaultValue) {
+    setPrevProfileType(profileType);
+    setPrevDefaultValue(defaultValue);
     if (profileType != null && defaultValue !== undefined) {
       setUserSelectedSumBy(prev => ({
         ...prev,
         [profileType.toString()]: defaultValue,
       }));
     }
-  }, [profileType, defaultValue]);
+  }
 
   const setSumBy = useCallback(
     (sumBy: string[]) => {
@@ -97,19 +102,11 @@ export const useSumBySelection = (
 
   const {defaultSumBy} = useDefaultSumBy(profileType, labelNamesLoading, labels);
 
-  // Store the last valid sumBy value to return during loading
-  const lastValidSumByRef = useRef<string[]>(DEFAULT_EMPTY_SUM_BY);
-
   const sumBy = useMemo(() => {
-    if (labelNamesLoading) {
-      // For smoother UX, return draftSumBy first if available during loading
-      // as this must be recently computed with the draft time range labels.
-      if (draftSumBy !== undefined) {
-        return draftSumBy;
-      }
-      if (lastValidSumByRef.current == null) {
-        return lastValidSumByRef.current;
-      }
+    // For smoother UX, return draftSumBy first if available during loading
+    // as this must be recently computed with the draft time range labels.
+    if (labelNamesLoading && draftSumBy !== undefined) {
+      return draftSumBy;
     }
 
     // Prefer non-empty URL default over auto-computed default to avoid a
@@ -125,9 +122,6 @@ export const useSumBySelection = (
       result = DEFAULT_EMPTY_SUM_BY;
     }
 
-    // Store the computed value for next loading state
-    lastValidSumByRef.current = result;
-
     return result;
   }, [userSelectedSumBy, profileType, defaultSumBy, labelNamesLoading, draftSumBy, defaultValue]);