@parca/profile 0.19.73 → 0.19.74

package/src/ProfileExplorer/index.tsx

@@ -11,28 +11,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo} from 'react';
 
 import {Provider} from 'react-redux';
 
 import {QueryServiceClient} from '@parca/client';
-import {DateTimeRange, KeyDownProvider, useParcaContext} from '@parca/components';
-import {Query} from '@parca/parser';
+import {KeyDownProvider, useParcaContext} from '@parca/components';
 import {createStore} from '@parca/store';
-import {capitalizeOnlyFirstLetter, safeDecode, type NavigateFunction} from '@parca/utilities';
+import {capitalizeOnlyFirstLetter, type NavigateFunction} from '@parca/utilities';
 
-import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
-import {QuerySelection} from '../ProfileSelector';
-import {useResetFlameGraphState} from '../ProfileView/hooks/useResetFlameGraphState';
-import {useResetStateOnProfileTypeChange} from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
+import {useCompareModeMeta} from '../hooks/useCompareModeMeta';
 import {useHasProfileData} from '../useHasProfileData';
-import {sumByToParam, useSumByFromParams} from '../useSumBy';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
 
 interface ProfileExplorerProps {
   queryClient: QueryServiceClient;
-  queryParams: any;
   navigateTo: NavigateFunction;
 }
 
@@ -47,73 +41,7 @@ const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
   );
 };
 
-export const getExpressionAsAString = (expression: string | []): string => {
-  const x = Array.isArray(expression) ? expression.join() : expression;
-  return x;
-};
-
-/* eslint-disable @typescript-eslint/naming-convention */
-const sanitizeDateRange = (
-  time_selection_a: string,
-  from_a: number,
-  to_a: number
-): {time_selection_a: string; from_a: number; to_a: number} => {
-  const range = DateTimeRange.fromRangeKey(time_selection_a, from_a, to_a);
-  if (from_a == null && to_a == null) {
-    from_a = range.getFromMs();
-    to_a = range.getToMs();
-  }
-  return {time_selection_a: range.getRangeKey(), from_a, to_a};
-};
-/* eslint-enable @typescript-eslint/naming-convention */
-
-export const filterEmptyParams = (o: Record<string, any>): Record<string, any> => {
-  return Object.fromEntries(
-    Object.entries(o)
-      .filter(
-        ([_, value]) =>
-          value !== '' && value !== undefined && (Array.isArray(value) ? value.length > 0 : true)
-      )
-      .map(([key, value]) => {
-        if (typeof value === 'string') {
-          return [key, value];
-        }
-        if (Array.isArray(value)) {
-          return [key, value];
-        }
-        return [key, value];
-      })
-  );
-};
-
-const filterSuffix = (
-  o: {[key: string]: string | string[] | undefined},
-  suffix: string
-): {[key: string]: string | string[] | undefined} =>
-  Object.fromEntries(
-    Object.entries(o)
-      .filter(([key]) => !key.endsWith(suffix))
-      .map(([key, value]) => {
-        return [key, value];
-      })
-  );
-
-const swapQueryParameters = (o: {
-  [key: string]: string | string[] | undefined;
-}): {[key: string]: string | string[] | undefined} => {
-  Object.entries(o).forEach(([key, value]) => {
-    if (key.endsWith('_b')) {
-      o[key.slice(0, -2) + '_a'] = value;
-    }
-  });
-  return o;
-};
-
-const ProfileExplorerApp = ({
-  queryClient,
-  queryParams,
-  navigateTo,
-}: ProfileExplorerProps): JSX.Element => {
+const ProfileExplorerApp = ({queryClient, navigateTo}: ProfileExplorerProps): JSX.Element => {
   const {
     loading: hasProfileDataLoading,
     data: hasProfileData,
@@ -121,6 +49,7 @@ const ProfileExplorerApp = ({
   } = useHasProfileData(queryClient);
 
   const {loader, noDataPrompt, onError, authenticationErrorMessage} = useParcaContext();
+  const {isCompareMode} = useCompareModeMeta();
 
   useEffect(() => {
     if (hasProfileDataError !== undefined && hasProfileDataError !== null) {
@@ -128,72 +57,6 @@ const ProfileExplorerApp = ({
     }
   }, [hasProfileDataError, onError]);
 
-  /* eslint-disable @typescript-eslint/naming-convention */
-  let {
-    from_a,
-    to_a,
-    merge_from_a,
-    merge_to_a,
-    time_selection_a,
-    compare_a,
-    sum_by_a,
-    from_b,
-    to_b,
-    merge_from_b,
-    merge_to_b,
-    time_selection_b,
-    compare_b,
-    sum_by_b,
-  } = queryParams;
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const expression_a = getExpressionAsAString(queryParams.expression_a);
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const expression_b = getExpressionAsAString(queryParams.expression_b);
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const selection_a = getExpressionAsAString(queryParams.selection_a);
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const selection_b = getExpressionAsAString(queryParams.selection_b);
-
-  /* eslint-enable @typescript-eslint/naming-convention */
-  const [profileA, setProfileA] = useState<ProfileSelection | null>(null);
-  const [profileB, setProfileB] = useState<ProfileSelection | null>(null);
-
-  const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
-  const resetFlameGraphState = useResetFlameGraphState();
-
-  const sumByA = useSumByFromParams(sum_by_a);
-  const sumByB = useSumByFromParams(sum_by_b);
-
-  useEffect(() => {
-    const mergeFrom = merge_from_a ?? undefined;
-    const mergeTo = merge_to_a ?? undefined;
-    const profileA = ProfileSelectionFromParams(
-      mergeFrom as string,
-      mergeTo as string,
-      selection_a
-    );
-
-    setProfileA(profileA);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [merge_from_a, merge_to_a, selection_a]);
-
-  useEffect(() => {
-    const mergeFrom = merge_from_b ?? undefined;
-    const mergeTo = merge_to_b ?? undefined;
-    const profileB = ProfileSelectionFromParams(
-      mergeFrom as string,
-      mergeTo as string,
-      selection_b
-    );
-
-    setProfileB(profileB);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [merge_from_b, merge_to_b, selection_b]);
-
   if (hasProfileDataLoading) {
     return <>{loader}</>;
   }
@@ -213,201 +76,14 @@ const ProfileExplorerApp = ({
     return <ErrorContent errorMessage={capitalizeOnlyFirstLetter(hasProfileDataError.message)} />;
   }
 
-  const sanitizedRange = sanitizeDateRange(time_selection_a, from_a, to_a);
-  time_selection_a = sanitizedRange.time_selection_a;
-  from_a = sanitizedRange.from_a;
-  to_a = sanitizedRange.to_a;
-
-  if ((queryParams?.expression_a ?? '') !== '') queryParams.expression_a = safeDecode(expression_a);
-  if ((queryParams?.expression_b ?? '') !== '') queryParams.expression_b = safeDecode(expression_b);
-
-  const selectProfile = (p: ProfileSelection, suffix: string): void => {
-    return navigateTo('/', {
-      ...queryParams,
-      ...SuffixParams(p.HistoryParams(), suffix),
-    });
-  };
-
-  const selectProfileA = (p: ProfileSelection): void => {
-    return selectProfile(p, '_a');
-  };
-
-  const selectProfileB = (p: ProfileSelection): void => {
-    return selectProfile(p, '_b');
-  };
-
-  const queryA = {
-    expression: expression_a,
-    from: parseInt(from_a as string),
-    to: parseInt(to_a as string),
-    timeSelection: time_selection_a as string,
-    sumBy: sumByA,
-  };
-
-  // Show the SingleProfileExplorer when not comparing
-  if (compare_a !== 'true' && compare_b !== 'true') {
-    const selectQuery = (q: QuerySelection): void => {
-      const profileNameAfter = Query.parse(q.expression).profileName();
-      if (profileA != null) {
-        if (profileA.ProfileName() !== profileNameAfter) {
-          // Reset required state when the profile type changes.
-          resetStateOnProfileTypeChange();
-        } else {
-          // Reset the state when a new search is performed.
-          resetFlameGraphState();
-        }
-      }
-
-      const mergeParams =
-        q.mergeFrom !== undefined && q.mergeTo !== undefined
-          ? {
-              merge_from_a: q.mergeFrom,
-              merge_to_a: q.mergeTo,
-              selection_a: q.expression,
-            }
-          : {};
-      return navigateTo(
-        '/',
-        // Filtering the _a suffix causes us to reset potential profile
-        // selection when running a new query.
-        filterEmptyParams({
-          ...filterSuffix(queryParams, '_a'),
-          ...{
-            expression_a: q.expression,
-            from_a: q.from.toString(),
-            to_a: q.to.toString(),
-            time_selection_a: q.timeSelection,
-            sum_by_a: sumByToParam(q.sumBy),
-            ...mergeParams,
-          },
-        })
-      );
-    };
-
-    const selectProfile = (p: ProfileSelection): void => {
-      return navigateTo('/', {
-        ...queryParams,
-        ...SuffixParams(p.HistoryParams(), '_a'),
-      });
-    };
-
-    return (
-      <ProfileExplorerSingle
-        queryClient={queryClient}
-        query={queryA}
-        profile={profileA}
-        selectQuery={selectQuery}
-        selectProfile={selectProfile}
-        navigateTo={navigateTo}
-      />
-    );
+  if (isCompareMode) {
+    return <ProfileExplorerCompare queryClient={queryClient} navigateTo={navigateTo} />;
   }
 
-  const queryB = {
-    expression: expression_b,
-    from: parseInt(from_b as string),
-    to: parseInt(to_b as string),
-    timeSelection: time_selection_b as string,
-    sumBy: sumByB,
-  };
-
-  const selectQueryA = (q: QuerySelection): void => {
-    const mergeParams =
-      q.mergeFrom !== undefined && q.mergeTo !== undefined
-        ? {
-            merge_from_a: q.mergeFrom,
-            merge_to_a: q.mergeTo,
-            selection_a: q.expression,
-          }
-        : {};
-    return navigateTo(
-      '/',
-      // Filtering the _a suffix causes us to reset potential profile
-      // selection when running a new query.
-      filterEmptyParams({
-        ...filterSuffix(queryParams, '_a'),
-        ...{
-          compare_a: 'true',
-          expression_a: q.expression,
-          expression_b,
-          selection_b,
-          from_a: q.from.toString(),
-          to_a: q.to.toString(),
-          time_selection_a: q.timeSelection,
-          sum_by_a: sumByToParam(q.sumBy),
-          ...mergeParams,
-        },
-      })
-    );
-  };
-
-  const selectQueryB = (q: QuerySelection): void => {
-    const mergeParams =
-      q.mergeFrom !== undefined && q.mergeTo !== undefined
-        ? {
-            merge_from_b: q.mergeFrom,
-            merge_to_b: q.mergeTo,
-            selection_b: q.expression,
-          }
-        : {};
-    return navigateTo(
-      '/',
-      // Filtering the _b suffix causes us to reset potential profile
-      // selection when running a new query.
-      filterEmptyParams({
-        ...filterSuffix(queryParams, '_b'),
-        ...{
-          compare_b: 'true',
-          expression_b: q.expression,
-          expression_a,
-          selection_a,
-          from_b: q.from.toString(),
-          to_b: q.to.toString(),
-          time_selection_b: q.timeSelection,
-          sum_by_b: sumByToParam(q.sumBy),
-          ...mergeParams,
-        },
-      })
-    );
-  };
-
-  const closeProfile = (card: string): void => {
-    let newQueryParameters = queryParams;
-    if (card === 'A') {
-      newQueryParameters = swapQueryParameters(queryParams);
-    }
-
-    return navigateTo('/', {
-      ...filterSuffix(newQueryParameters, '_b'),
-      ...{
-        compare_a: 'false',
-        compare_b: 'false',
-      },
-    });
-  };
-
-  return (
-    <ProfileExplorerCompare
-      queryClient={queryClient}
-      queryA={queryA}
-      queryB={queryB}
-      profileA={profileA}
-      profileB={profileB}
-      selectQueryA={selectQueryA}
-      selectQueryB={selectQueryB}
-      selectProfileA={selectProfileA}
-      selectProfileB={selectProfileB}
-      closeProfile={closeProfile}
-      navigateTo={navigateTo}
-    />
-  );
+  return <ProfileExplorerSingle queryClient={queryClient} navigateTo={navigateTo} />;
 };
 
-const ProfileExplorer = ({
-  queryClient,
-  queryParams,
-  navigateTo,
-}: ProfileExplorerProps): JSX.Element => {
+const ProfileExplorer = ({queryClient, navigateTo}: ProfileExplorerProps): JSX.Element => {
   const {additionalFlamegraphColorProfiles} = useParcaContext();
 
   const {store: reduxStore} = useMemo(() => {
@@ -417,11 +93,7 @@ const ProfileExplorer = ({
   return (
     <Provider store={reduxStore}>
       <KeyDownProvider>
-        <ProfileExplorerApp
-          queryClient={queryClient}
-          queryParams={queryParams}
-          navigateTo={navigateTo}
-        />
+        <ProfileExplorerApp queryClient={queryClient} navigateTo={navigateTo} />
       </KeyDownProvider>
     </Provider>
   );

package/src/ProfileMetricsGraph/index.tsx

@@ -77,35 +77,32 @@ const createProfileContextMenuItems = (
       label: 'Add to query',
       icon: 'material-symbols:add',
       createDynamicItems: (closestPoint, _series) => {
+        const noLabelsAvailable = [
+          {
+            id: 'no-labels-available',
+            label: 'No labels available',
+            icon: 'ph:warning',
+            disabled: () => true,
+            onClick: () => {}, // No-op for disabled item
+          },
+        ];
         if (closestPoint == null || data.length === 0 || data[closestPoint.seriesIndex] == null) {
-          return [
-            {
-              id: 'no-labels-available',
-              label: 'No labels available',
-              icon: 'ph:warning',
-              disabled: () => true,
-              onClick: () => {}, // No-op for disabled item
-            },
-          ];
+          return noLabelsAvailable;
         }
 
         const originalSeriesData = data[closestPoint.seriesIndex];
         if (originalSeriesData.labelset?.labels == null) {
-          return [
-            {
-              id: 'no-labels-available',
-              label: 'No labels available',
-              icon: 'ph:warning',
-              disabled: () => true,
-              onClick: () => {}, // No-op for disabled item
-            },
-          ];
+          return noLabelsAvailable;
         }
 
         const labels = originalSeriesData.labelset.labels.filter(
           (label: Label) => label.name !== '__name__'
         );
 
+        if (labels.length === 0) {
+          return noLabelsAvailable;
+        }
+
         return labels.map((label: Label) => ({
           id: `add-label-${label.name}`,
           label: (
@@ -207,13 +204,12 @@ const ProfileMetricsGraph = ({
   onPointClick,
   comparing = false,
   sumBy,
-  sumByLoading,
 }: ProfileMetricsGraphProps): JSX.Element => {
   const {
     isLoading: metricsGraphLoading,
     response,
     error,
-  } = useQueryRange(queryClient, queryExpression, from, to, sumBy, sumByLoading);
+  } = useQueryRange(queryClient, queryExpression, from, to, sumBy, queryExpression === '');
   const {onError, perf, authenticationErrorMessage, isDarkMode, timezone} = useParcaContext();
   const {width, height, margin, heightStyle} = useMetricsGraphDimensions(comparing);
   const [showAllSeriesForResponse, setShowAllSeriesForResponse] = useState<typeof response | null>(

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -14,10 +14,10 @@
 import cx from 'classnames';
 
 import {Label, QueryServiceClient} from '@parca/client';
-import {DateTimeRange} from '@parca/components';
+import {DateTimeRange, useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 
-import {MergedProfileSelection, ProfileSelection} from '..';
+import {ProfileSelection} from '..';
 import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
 import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
@@ -37,9 +37,9 @@ interface MetricsGraphSectionProps {
   queryExpressionString: string;
   setTimeRangeSelection: (range: DateTimeRange) => void;
   selectQuery: (query: QuerySelection) => void;
-  selectProfile: (source: ProfileSelection) => void;
+  setProfileSelection: (mergeFrom: bigint, mergeTo: bigint, query: Query) => void;
   query: Query;
-  setNewQueryExpression: (queryExpression: string) => void;
+  setNewQueryExpression: (queryExpression: string, commit?: boolean) => void;
   setQueryExpression: (updateTs?: boolean) => void;
   utilizationMetrics?: Array<{
     name: string;
@@ -63,7 +63,7 @@ export function MetricsGraphSection({
   queryExpressionString,
   setTimeRangeSelection,
   selectQuery,
-  selectProfile,
+  setProfileSelection,
   query,
   setNewQueryExpression,
   utilizationMetrics,
@@ -71,6 +71,7 @@ export function MetricsGraphSection({
   onUtilizationSeriesSelect,
 }: MetricsGraphSectionProps): JSX.Element {
   const resetStateOnSeriesChange = useResetStateOnSeriesChange();
+  const batchUpdates = useURLStateBatch();
   const handleTimeRangeChange = (range: DateTimeRange): void => {
     const from = range.getFromMs();
     const to = range.getToMs();
@@ -118,7 +119,8 @@ export function MetricsGraphSection({
 
     if (hasChanged) {
       // TODO: Change this to store the query object
-      setNewQueryExpression(newQuery.toString());
+      // Pass commit: true to immediately apply the filter when clicking on metrics graph labels
+      setNewQueryExpression(newQuery.toString(), true);
     }
   };
 
@@ -129,6 +131,7 @@ export function MetricsGraphSection({
     duration: number
   ): void => {
     let query = Query.parse(queryExpression);
+
     labels.forEach(l => {
       const [newQuery, updated] = query.setMatcher(l.name, l.value);
       if (updated) {
@@ -138,9 +141,10 @@ export function MetricsGraphSection({
 
     const mergeFrom = timestamp;
     const mergeTo = query.profileType().delta ? mergeFrom + BigInt(duration) : mergeFrom;
-
-    resetStateOnSeriesChange(); // reset some state when a new series is selected
-    selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
+    batchUpdates(() => {
+      resetStateOnSeriesChange(); // reset some state when a new series is selected
+      setProfileSelection(mergeFrom, mergeTo, query);
+    });
   };
 
   const UtilizationGraphToShow = ({
@@ -235,7 +239,7 @@ export function MetricsGraphSection({
       {showMetricsGraph && (
         <>
           <div style={{height: heightStyle}}>
-            {querySelection.expression !== '' &&
+            {(querySelection.expression !== '' || defaultSumByLoading) &&
             querySelection.from !== undefined &&
             querySelection.to !== undefined ? (
               <>