@parca/profile 0.16.398 → 0.16.399

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.399](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.398...@parca/profile@0.16.399) (2024-07-02)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.398](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.397...@parca/profile@0.16.398) (2024-07-01)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileMetricsGraph/index.d.ts

@@ -12,6 +12,7 @@ interface ProfileMetricsGraphProps {
     profile: ProfileSelection | null;
     from: number;
     to: number;
+    timeRange: DateTimeRange;
     setTimeRange: (range: DateTimeRange) => void;
     addLabelMatcher: (labels: {
         key: string;
@@ -26,8 +27,9 @@ interface ProfileMetricsGraphProps {
 export interface IQueryRangeState {
     response: QueryRangeResponse | null;
     isLoading: boolean;
+    isRefreshing?: boolean;
     error: RpcError | null;
 }
-export declare const useQueryRange: (client: QueryServiceClient, queryExpression: string, start: number, end: number, sumBy?: string[], skip?: boolean) => IQueryRangeState;
-declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing, }: ProfileMetricsGraphProps) => JSX.Element;
+export declare const useQueryRange: (client: QueryServiceClient, queryExpression: string, start: number, end: number, timeRange: DateTimeRange, sumBy?: string[], skip?: boolean) => IQueryRangeState;
+declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing, timeRange, }: ProfileMetricsGraphProps) => JSX.Element;
 export default ProfileMetricsGraph;

package/dist/ProfileMetricsGraph/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // 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, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Duration, Timestamp } from '@parca/client';
 import { MetricsGraphSkeleton, useGrpcMetadata, useParcaContext, } from '@parca/components';
@@ -19,7 +19,6 @@ import { Query } from '@parca/parser';
 import { capitalizeOnlyFirstLetter, getStepDuration } from '@parca/utilities';
 import MetricsGraph from '../MetricsGraph';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
-import useDelayedLoader from '../useDelayedLoader';
 const ErrorContent = ({ errorMessage }) => {
     return (_jsx("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: _jsx("span", { className: "block sm:inline", children: errorMessage }) }));
 };
@@ -27,7 +26,8 @@ export const ProfileMetricsEmptyState = ({ message }) => {
     return (_jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: _jsx("p", { children: message }) }));
 };
 const EMPTY_SUM_BY = [];
-export const useQueryRange = (client, queryExpression, start, end, sumBy = EMPTY_SUM_BY, skip = false) => {
+export const useQueryRange = (client, queryExpression, start, end, timeRange, sumBy = EMPTY_SUM_BY, skip = false) => {
+    const previousQueryParams = useRef({});
     const [isLoading, setLoading] = useState(!skip);
     const [state, setState] = useState({
         response: null,
@@ -40,6 +40,15 @@ export const useQueryRange = (client, queryExpression, start, end, sumBy = EMPTY
             if (skip) {
                 return;
             }
+            if (previousQueryParams.current.queryExpression !== queryExpression ||
+                previousQueryParams.current.timeRange !== timeRange) {
+                previousQueryParams.current.queryExpression = queryExpression;
+                previousQueryParams.current.timeRange = timeRange;
+                previousQueryParams.current.isRefresh = undefined;
+            }
+            else {
+                previousQueryParams.current.isRefresh = true;
+            }
             setLoading(true);
             const stepDuration = getStepDuration(start, end);
             const call = client.queryRange({
@@ -59,14 +68,18 @@ export const useQueryRange = (client, queryExpression, start, end, sumBy = EMPTY
                 .catch(error => {
                 setState({ response: null, isLoading: false, error });
                 setLoading(false);
+            })
+                .finally(() => {
+                if (previousQueryParams.current.isRefresh !== undefined) {
+                    previousQueryParams.current.isRefresh = undefined;
+                }
             });
         })();
-    }, [client, queryExpression, start, end, metadata, sumBy, skip]);
-    return { ...state, isLoading };
+    }, [client, queryExpression, start, end, metadata, timeRange, sumBy, skip]);
+    return { ...state, isLoading, isRefreshing: previousQueryParams.current.isRefresh };
 };
-const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, }) => {
-    const { isLoading, response, error } = useQueryRange(queryClient, queryExpression, from, to);
-    const isLoaderVisible = useDelayedLoader(isLoading);
+const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, timeRange, }) => {
+    const { isLoading: metricsGraphLoading, response, error, } = useQueryRange(queryClient, queryExpression, from, to, timeRange);
     const { onError, perf, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { width, height, margin, heightStyle } = useMetricsGraphDimensions(comparing);
     useEffect(() => {
@@ -82,7 +95,6 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
     }, [perf, response]);
     const series = response?.series;
     const dataAvailable = series !== null && series !== undefined && series?.length > 0;
-    const metricsGraphLoading = isLoaderVisible || (isLoading && !dataAvailable);
     if (metricsGraphLoading) {
         return _jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode });
     }

package/dist/ProfileSelector/index.js

@@ -149,7 +149,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
                                     }, id: "h-matcher-search-button", children: "Search" }) })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "rounded bg-white shadow dark:border-gray-500 dark:bg-gray-700", children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== undefined &&
                         querySelection.expression.length > 0 &&
                         querySelection.from !== undefined &&
-                        querySelection.to !== undefined ? (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, setTimeRange: (range) => {
+                        querySelection.to !== undefined ? (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, timeRange: timeRangeSelection, setTimeRange: (range) => {
                                 const from = range.getFromMs();
                                 const to = range.getToMs();
                                 let mergedProfileParams = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.398",
+  "version": "0.16.399",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -73,5 +73,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "cf52d4ef66a1bb394cb5e0b4da16f84935a34784"
+  "gitHead": "d1ea81e3ff9abe8c3cbb6a49ce2fed6217db407f"
 }

package/src/ProfileMetricsGraph/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {AnimatePresence, motion} from 'framer-motion';
@@ -29,7 +29,6 @@ import {capitalizeOnlyFirstLetter, getStepDuration} from '@parca/utilities';
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MetricsGraph from '../MetricsGraph';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
-import useDelayedLoader from '../useDelayedLoader';
 
 interface ProfileMetricsEmptyStateProps {
   message: string;
@@ -60,6 +59,7 @@ interface ProfileMetricsGraphProps {
   profile: ProfileSelection | null;
   from: number;
   to: number;
+  timeRange: DateTimeRange;
   setTimeRange: (range: DateTimeRange) => void;
   addLabelMatcher: (
     labels: {key: string; value: string} | Array<{key: string; value: string}>
@@ -76,6 +76,7 @@ interface ProfileMetricsGraphProps {
 export interface IQueryRangeState {
   response: QueryRangeResponse | null;
   isLoading: boolean;
+  isRefreshing?: boolean;
   error: RpcError | null;
 }
 
@@ -86,9 +87,15 @@ export const useQueryRange = (
   queryExpression: string,
   start: number,
   end: number,
+  timeRange: DateTimeRange,
   sumBy: string[] = EMPTY_SUM_BY,
   skip = false
 ): IQueryRangeState => {
+  const previousQueryParams = useRef<{
+    queryExpression?: string;
+    timeRange?: DateTimeRange;
+    isRefresh?: boolean;
+  }>({});
   const [isLoading, setLoading] = useState<boolean>(!skip);
   const [state, setState] = useState<IQueryRangeState>({
     response: null,
@@ -102,6 +109,18 @@ export const useQueryRange = (
       if (skip) {
         return;
       }
+
+      if (
+        previousQueryParams.current.queryExpression !== queryExpression ||
+        previousQueryParams.current.timeRange !== timeRange
+      ) {
+        previousQueryParams.current.queryExpression = queryExpression;
+        previousQueryParams.current.timeRange = timeRange;
+        previousQueryParams.current.isRefresh = undefined;
+      } else {
+        previousQueryParams.current.isRefresh = true;
+      }
+
       setLoading(true);
 
       const stepDuration = getStepDuration(start, end);
@@ -126,11 +145,16 @@ export const useQueryRange = (
         .catch(error => {
           setState({response: null, isLoading: false, error});
           setLoading(false);
+        })
+        .finally(() => {
+          if (previousQueryParams.current.isRefresh !== undefined) {
+            previousQueryParams.current.isRefresh = undefined;
+          }
         });
     })();
-  }, [client, queryExpression, start, end, metadata, sumBy, skip]);
+  }, [client, queryExpression, start, end, metadata, timeRange, sumBy, skip]);
 
-  return {...state, isLoading};
+  return {...state, isLoading, isRefreshing: previousQueryParams.current.isRefresh};
 };
 
 const ProfileMetricsGraph = ({
@@ -143,9 +167,13 @@ const ProfileMetricsGraph = ({
   addLabelMatcher,
   onPointClick,
   comparing = false,
+  timeRange,
 }: ProfileMetricsGraphProps): JSX.Element => {
-  const {isLoading, response, error} = useQueryRange(queryClient, queryExpression, from, to);
-  const isLoaderVisible = useDelayedLoader(isLoading);
+  const {
+    isLoading: metricsGraphLoading,
+    response,
+    error,
+  } = useQueryRange(queryClient, queryExpression, from, to, timeRange);
   const {onError, perf, authenticationErrorMessage, isDarkMode} = useParcaContext();
   const {width, height, margin, heightStyle} = useMetricsGraphDimensions(comparing);
 
@@ -166,8 +194,6 @@ const ProfileMetricsGraph = ({
   const series = response?.series;
   const dataAvailable = series !== null && series !== undefined && series?.length > 0;
 
-  const metricsGraphLoading = isLoaderVisible || (isLoading && !dataAvailable);
-
   if (metricsGraphLoading) {
     return <MetricsGraphSkeleton heightStyle={heightStyle} isDarkMode={isDarkMode} />;
   }

package/src/ProfileSelector/index.tsx

@@ -287,6 +287,7 @@ const ProfileSelector = ({
                 to={querySelection.to}
                 profile={profileSelection}
                 comparing={comparing}
+                timeRange={timeRangeSelection}
                 setTimeRange={(range: DateTimeRange) => {
                   const from = range.getFromMs();
                   const to = range.getToMs();