@parca/profile 0.16.91 → 0.16.93

package/src/ProfileExplorer/index.tsx

@@ -12,22 +12,14 @@
 // limitations under the License.
 
 import {QuerySelection} from '../ProfileSelector';
-import {ProfileSelection, ProfileSelectionFromParams, SuffixParams, NavigateFunction} from '..';
+import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
 import {QueryServiceClient} from '@parca/client';
-import {
-  useAppSelector,
-  useAppDispatch,
-  setCompare,
-  selectCompareMode,
-  setSearchNodeString,
-  store,
-  selectFilterByFunction,
-} from '@parca/store';
-import {Provider, batch} from 'react-redux';
+import {store} from '@parca/store';
+import {Provider} from 'react-redux';
 import {DateTimeRange} from '@parca/components';
-import {useEffect} from 'react';
+import {NavigateFunction} from '@parca/functions';
 
 interface ProfileExplorerProps {
   queryClient: QueryServiceClient;
@@ -40,6 +32,8 @@ const getExpressionAsAString = (expression: string | []): string => {
   return x;
 };
 
+const DEFAULT_DASHBOARD_ITEMS = ['icicle'];
+
 /* eslint-disable @typescript-eslint/naming-convention */
 const sanitizeDateRange = (
   time_selection_a: string,
@@ -77,9 +71,6 @@ const ProfileExplorerApp = ({
   queryParams,
   navigateTo,
 }: ProfileExplorerProps): JSX.Element => {
-  const dispatch = useAppDispatch();
-  const compareMode = useAppSelector(selectCompareMode);
-
   /* eslint-disable @typescript-eslint/naming-convention */
   let {
     from_a,
@@ -98,9 +89,10 @@ const ProfileExplorerApp = ({
     time_b,
     time_selection_b,
     compare_b,
+    filter_by_function,
+    dashboard_items,
   } = queryParams;
   /* eslint-enable @typescript-eslint/naming-convention */
-  const filterByFunction = useAppSelector(selectFilterByFunction);
 
   const sanitizedRange = sanitizeDateRange(time_selection_a, from_a, to_a);
   time_selection_a = sanitizedRange.time_selection_a;
@@ -116,20 +108,13 @@ const ProfileExplorerApp = ({
   if ((queryParams?.expression_a ?? '') !== '') queryParams.expression_a = expression_a;
   if ((queryParams?.expression_b ?? '') !== '') queryParams.expression_b = expression_b;
 
-  useEffect(() => {
-    if (compare_a === 'true' && compare_b === 'true') {
-      dispatch(setCompare(true));
-    } else {
-      dispatch(setCompare(false));
-    }
-  }, [dispatch, compare_a, compare_b]);
-
   const selectProfile = (p: ProfileSelection, suffix: string): void => {
     queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
     queryParams.expression_b = encodeURIComponent(queryParams.expression_b);
     return navigateTo('/', {
       ...queryParams,
       ...SuffixParams(p.HistoryParams(), suffix),
+      dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
     });
   };
 
@@ -160,7 +145,7 @@ const ProfileExplorerApp = ({
       labels_a as string[],
       profile_name_a as string,
       time_a as string,
-      filterByFunction
+      filter_by_function
     );
 
     const selectQuery = (q: QuerySelection): void => {
@@ -176,7 +161,7 @@ const ProfileExplorerApp = ({
             to_a: q.to.toString(),
             merge_a: q.merge,
             time_selection_a: q.timeSelection,
-            currentProfileView: 'icicle',
+            dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
           },
         }
       );
@@ -187,6 +172,7 @@ const ProfileExplorerApp = ({
       return navigateTo('/', {
         ...queryParams,
         ...SuffixParams(p.HistoryParams(), '_a'),
+        dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
       });
     };
 
@@ -216,19 +202,11 @@ const ProfileExplorerApp = ({
         };
       }
 
-      compareQuery = {
+      void navigateTo('/', {
         ...compareQuery,
-        ...{
-          currentProfileView: 'icicle',
-        },
-      };
-
-      batch(() => {
-        dispatch(setCompare(!compareMode));
-        dispatch(setSearchNodeString(undefined));
+        search_string: '',
+        dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
       });
-
-      void navigateTo('/', compareQuery);
     };
 
     return (
@@ -295,7 +273,8 @@ const ProfileExplorerApp = ({
           to_a: q.to.toString(),
           merge_a: q.merge,
           time_selection_a: q.timeSelection,
-          filterByFunction,
+          filter_by_function: filter_by_function ?? '',
+          dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
         },
       }
     );
@@ -316,7 +295,8 @@ const ProfileExplorerApp = ({
           to_b: q.to.toString(),
           merge_b: q.merge,
           time_selection_b: q.timeSelection,
-          filterByFunction,
+          filter_by_function: filter_by_function ?? '',
+          dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
         },
       }
     );
@@ -328,15 +308,12 @@ const ProfileExplorerApp = ({
       newQueryParameters = swapQueryParameters(queryParams);
     }
 
-    batch(() => {
-      dispatch(setCompare(!compareMode));
-      dispatch(setSearchNodeString(undefined));
-    });
-
     return navigateTo('/', {
       ...filterSuffix(newQueryParameters, '_b'),
       ...{
         compare_a: 'false',
+        compare_b: 'false',
+        search_string: '',
       },
     });
   };

package/src/ProfileIcicleGraph/index.tsx

@@ -12,11 +12,11 @@
 // limitations under the License.
 
 import {Flamegraph} from '@parca/client';
-import {useAppSelector, selectCompareMode} from '@parca/store';
 import {useContainerDimensions} from '@parca/dynamicsize';
 
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from '../IcicleGraph';
+import {selectQueryParam} from '@parca/functions';
 import {useEffect, useMemo} from 'react';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
@@ -39,7 +39,8 @@ const ProfileIcicleGraph = ({
   sampleUnit,
   onContainerResize,
 }: ProfileIcicleGraphProps): JSX.Element => {
-  const compareMode = useAppSelector(selectCompareMode);
+  const compareMode: boolean =
+    Boolean(selectQueryParam('compare_a')) && Boolean(selectQueryParam('compare_b'));
   const {ref, dimensions} = useContainerDimensions();
 
   useEffect(() => {

package/src/ProfileView/FilterByFunctionButton.tsx

@@ -12,39 +12,39 @@
 // limitations under the License.
 
 import {Input} from '@parca/components';
-import {
-  selectFilterByFunction,
-  setFilterByFunction,
-  useAppDispatch,
-  useAppSelector,
-} from '@parca/store';
+import {useURLState, NavigateFunction} from '@parca/functions';
 import {Icon} from '@iconify/react';
 import {useCallback, useMemo, useState} from 'react';
 
-const FilterByFunctionButton = (): JSX.Element => {
-  const dispatch = useAppDispatch();
-  const storeVal = useAppSelector(selectFilterByFunction);
-  const [value, setValue] = useState<string>(storeVal ?? '');
+const FilterByFunctionButton = ({
+  navigateTo,
+}: {
+  navigateTo: NavigateFunction | undefined;
+}): JSX.Element => {
+  const [storeValue, setStoreValue] = useURLState({param: 'filter_by_function', navigateTo});
+  const [localValue, setLocalValue] = useState(storeValue as string);
 
   const isClearAction = useMemo(() => {
-    return value === storeVal && value != null;
-  }, [value, storeVal]);
+    return localValue === storeValue && localValue != null && localValue !== '';
+  }, [localValue, storeValue]);
 
   const onAction = useCallback((): void => {
-    dispatch(setFilterByFunction(isClearAction ? undefined : value));
     if (isClearAction) {
-      setValue('');
+      setLocalValue('');
+      setStoreValue('');
+    } else {
+      setStoreValue(localValue);
     }
-  }, [dispatch, isClearAction, value]);
+  }, [localValue, isClearAction, setStoreValue]);
 
   return (
     <Input
       placeholder="Filter by function"
       className="text-sm"
       onAction={onAction}
-      onChange={e => setValue(e.target.value)}
-      value={value}
-      onBlur={() => setValue(storeVal ?? '')}
+      onChange={e => setLocalValue(e.target.value)}
+      value={localValue ?? ''}
+      onBlur={() => setLocalValue(storeValue as string)}
       actionIcon={isClearAction ? <Icon icon="ep:circle-close" /> : <Icon icon="ep:arrow-right" />}
     />
   );

package/src/ProfileView/ViewSelector.tsx

@@ -0,0 +1,117 @@
+// 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 {Select, SelectElement} from '@parca/components';
+import {useURLState, NavigateFunction} from '@parca/functions';
+import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
+
+interface Props {
+  position: number;
+  defaultValue: string;
+  navigateTo?: NavigateFunction;
+  placeholderText?: string;
+  primary?: boolean;
+  addView?: boolean;
+  disabled?: boolean;
+}
+
+const ViewSelector = ({
+  defaultValue,
+  navigateTo,
+  position,
+  placeholderText,
+  primary = false,
+  addView = false,
+  disabled = false,
+}: Props): JSX.Element => {
+  const [callgraphEnabled] = useUIFeatureFlag('callgraph');
+  const [dashboardItems, setDashboardItems] = useURLState({
+    param: 'dashboard_items',
+    navigateTo,
+  });
+
+  const allItems: Array<{key: string; canBeSelected: boolean; supportingText?: string}> = [
+    {key: 'table', canBeSelected: !dashboardItems.includes('table')},
+    {key: 'icicle', canBeSelected: !dashboardItems.includes('icicle')},
+  ];
+  if (callgraphEnabled) {
+    allItems.push({
+      key: 'callgraph',
+      canBeSelected: !dashboardItems.includes('callgraph'),
+    });
+  }
+
+  const getOption = ({
+    key,
+    supportingText,
+  }: {
+    key: string;
+    supportingText?: string;
+  }): SelectElement => {
+    const capitalizeFirstLetter = (string: string): string => {
+      return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
+    };
+
+    const title = capitalizeFirstLetter(key);
+
+    return {
+      active: <>{title}</>,
+      expanded: (
+        <>
+          <span>{title}</span>
+          {supportingText !== null && <span className="text-xs">{supportingText}</span>}
+        </>
+      ),
+    };
+  };
+
+  const items = allItems.map(item => ({
+    key: item.key,
+    disabled: !item.canBeSelected,
+    element: getOption(item),
+  }));
+
+  const onSelection = (value: string): void => {
+    if (addView) {
+      setDashboardItems([dashboardItems[0], value]);
+      return;
+    }
+
+    const isOnlyChart = dashboardItems.length === 1;
+    if (isOnlyChart) {
+      setDashboardItems([value]);
+      return;
+    }
+
+    // Note: this will need to be updated if we ever have more more than 2 panels
+    const isFirstChart = position === 0;
+    const newDashboardItems = isFirstChart
+      ? [value, dashboardItems[1]]
+      : [dashboardItems[0], value];
+
+    setDashboardItems(newDashboardItems);
+  };
+
+  return (
+    <Select
+      items={items}
+      selectedKey={defaultValue}
+      onSelection={onSelection}
+      placeholder={placeholderText ?? 'Select view type...'}
+      primary={primary}
+      disabled={disabled}
+    />
+  );
+};
+
+export default ViewSelector;