@parca/profile 0.16.402 → 0.16.403

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.403](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.402...@parca/profile@0.16.403) (2024-07-05)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.402](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.401...@parca/profile@0.16.402) (2024-07-04)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileMetricsGraph/index.js

@@ -11,10 +11,10 @@ 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, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Duration, Timestamp } from '@parca/client';
-import { MetricsGraphSkeleton, useGrpcMetadata, useParcaContext, } from '@parca/components';
+import { MetricsGraphSkeleton, useGrpcMetadata, useParcaContext, useURLState, } from '@parca/components';
 import { Query } from '@parca/parser';
 import { capitalizeOnlyFirstLetter, getStepDuration } from '@parca/utilities';
 import MetricsGraph from '../MetricsGraph';
@@ -25,6 +25,14 @@ const ErrorContent = ({ errorMessage }) => {
 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 getStepCountFromScreenWidth = (pixelsPerPoint) => {
+    let width = 
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    // subtract the padding around the graph
+    width = width - (20 + 24 + 68) * 2;
+    return Math.round(width / pixelsPerPoint);
+};
 const EMPTY_SUM_BY = [];
 export const useQueryRange = (client, queryExpression, start, end, timeRange, sumBy = EMPTY_SUM_BY, skip = false) => {
     const previousQueryParams = useRef({});
@@ -35,6 +43,22 @@ export const useQueryRange = (client, queryExpression, start, end, timeRange, su
         error: null,
     });
     const metadata = useGrpcMetadata();
+    const { navigateTo } = useParcaContext();
+    const [stepCountStr, setStepCount] = useURLState({ param: 'step_count', navigateTo });
+    const defaultStepCount = useMemo(() => {
+        return getStepCountFromScreenWidth(10);
+    }, []);
+    const stepCount = useMemo(() => {
+        if (stepCountStr != null) {
+            return parseInt(stepCountStr, 10);
+        }
+        return defaultStepCount;
+    }, [stepCountStr, defaultStepCount]);
+    useEffect(() => {
+        if (stepCountStr == null) {
+            setStepCount(defaultStepCount.toString());
+        }
+    }, [stepCountStr, defaultStepCount, setStepCount]);
     useEffect(() => {
         void (async () => {
             if (skip) {
@@ -50,7 +74,7 @@ export const useQueryRange = (client, queryExpression, start, end, timeRange, su
                 previousQueryParams.current.isRefresh = true;
             }
             setLoading(true);
-            const stepDuration = getStepDuration(start, end);
+            const stepDuration = getStepDuration(start, end, stepCount);
             const call = client.queryRange({
                 query: queryExpression,
                 start: Timestamp.fromDate(new Date(start)),
@@ -75,7 +99,7 @@ export const useQueryRange = (client, queryExpression, start, end, timeRange, su
                 }
             });
         })();
-    }, [client, queryExpression, start, end, metadata, timeRange, sumBy, skip]);
+    }, [client, queryExpression, start, end, metadata, timeRange, sumBy, skip, stepCount]);
     return { ...state, isLoading, isRefreshing: previousQueryParams.current.isRefresh };
 };
 const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, timeRange, }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.402",
+  "version": "0.16.403",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -73,5 +73,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "25851d40d2630dbb542747d3a09718363212ad0e"
+  "gitHead": "a29408aa67b9e9791fd62789420cbfc7503adb46"
 }

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, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {AnimatePresence, motion} from 'framer-motion';
@@ -22,6 +22,7 @@ import {
   MetricsGraphSkeleton,
   useGrpcMetadata,
   useParcaContext,
+  useURLState,
 } from '@parca/components';
 import {Query} from '@parca/parser';
 import {capitalizeOnlyFirstLetter, getStepDuration} from '@parca/utilities';
@@ -80,6 +81,16 @@ export interface IQueryRangeState {
   error: RpcError | null;
 }
 
+const getStepCountFromScreenWidth = (pixelsPerPoint: number): number => {
+  let width =
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+  // subtract the padding around the graph
+  width = width - (20 + 24 + 68) * 2;
+  return Math.round(width / pixelsPerPoint);
+};
+
 const EMPTY_SUM_BY: string[] = [];
 
 export const useQueryRange = (
@@ -103,6 +114,26 @@ export const useQueryRange = (
     error: null,
   });
   const metadata = useGrpcMetadata();
+  const {navigateTo} = useParcaContext();
+  const [stepCountStr, setStepCount] = useURLState({param: 'step_count', navigateTo});
+
+  const defaultStepCount = useMemo(() => {
+    return getStepCountFromScreenWidth(10);
+  }, []);
+
+  const stepCount = useMemo(() => {
+    if (stepCountStr != null) {
+      return parseInt(stepCountStr as string, 10);
+    }
+
+    return defaultStepCount;
+  }, [stepCountStr, defaultStepCount]);
+
+  useEffect(() => {
+    if (stepCountStr == null) {
+      setStepCount(defaultStepCount.toString());
+    }
+  }, [stepCountStr, defaultStepCount, setStepCount]);
 
   useEffect(() => {
     void (async () => {
@@ -123,7 +154,7 @@ export const useQueryRange = (
 
       setLoading(true);
 
-      const stepDuration = getStepDuration(start, end);
+      const stepDuration = getStepDuration(start, end, stepCount);
       const call = client.queryRange(
         {
           query: queryExpression,
@@ -152,7 +183,7 @@ export const useQueryRange = (
           }
         });
     })();
-  }, [client, queryExpression, start, end, metadata, timeRange, sumBy, skip]);
+  }, [client, queryExpression, start, end, metadata, timeRange, sumBy, skip, stepCount]);
 
   return {...state, isLoading, isRefreshing: previousQueryParams.current.isRefresh};
 };