@parca/profile 0.19.122 → 0.19.124

package/src/ProfileFlameGraph/FlameGraphArrow/index.tsx

@@ -28,22 +28,27 @@ import {FlamegraphArrow} from '@parca/client';
 import {FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext} from '@parca/components';
 import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
-import {getColorForFeature, selectDarkMode, useAppSelector} from '@parca/store';
+import {getColorForFeature} from '@parca/store';
 import {type ColorConfig} from '@parca/utilities';
 
 import {ProfileSource} from '../../ProfileSource';
 import {useProfileFilters} from '../../ProfileView/components/ProfileFilters/useProfileFilters';
 import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
+import {TimelineGuide} from '../../TimelineGuide';
 import {alignedUint8Array} from '../../utils';
 import ContextMenuWrapper, {ContextMenuWrapperRef} from './ContextMenuWrapper';
 import {FlameNode, RowHeight, colorByColors} from './FlameGraphNodes';
 import {MemoizedTooltip} from './MemoizedTooltip';
+import {MiniMap} from './MiniMap';
 import {TooltipProvider} from './TooltipContext';
+import {ZoomControls} from './ZoomControls';
 import {useBatchedRendering} from './useBatchedRendering';
 import {useScrollViewport} from './useScrollViewport';
 import {useVisibleNodes} from './useVisibleNodes';
+import {useZoom} from './useZoom';
 import {
   CurrentPathFrame,
+  boundsFromProfileSource,
   extractFeature,
   extractFilenameFeature,
   getCurrentPathFrameData,
@@ -93,6 +98,7 @@ interface FlameGraphArrowProps {
   tooltipId?: string;
   maxFrameCount?: number;
   isExpanded?: boolean;
+  zoomControlsRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 export const getMappingColors = (
@@ -145,14 +151,14 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   mappingsListFromMetadata,
   filenamesListFromMetadata,
   colorBy,
+  zoomControlsRef,
 }: FlameGraphArrowProps): React.JSX.Element {
   const [highlightSimilarStacksPreference] = useUserPreference<boolean>(
     USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key
   );
   const [hoveringRow, setHoveringRow] = useState<number | undefined>(undefined);
   const [dockedMetainfo] = useUserPreference<boolean>(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
-  const isDarkMode = useAppSelector(selectDarkMode);
-  const {perf} = useParcaContext();
+  const {perf, isDarkMode} = useParcaContext();
 
   const table: Table = useMemo(() => {
     const result = tableFromIPC(alignedUint8Array(arrow.record), {useBigInt: true});
@@ -261,6 +267,18 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   // Get the viewport of the container, this is used to determine which rows are visible.
   const viewport = useScrollViewport(containerRef);
 
+  const isZoomEnabled = isFlameChart;
+
+  const {zoomLevel, zoomIn, zoomOut, resetZoom} = useZoom(
+    isZoomEnabled ? containerRef : {current: null}
+  );
+  const zoomedWidth = isZoomEnabled ? Math.round((width ?? 1) * zoomLevel) : width ?? 0;
+
+  // Reset zoom when the data changes (e.g. new query, different time range)
+  useEffect(() => {
+    resetZoom();
+  }, [table, resetZoom]);
+
   // To find the selected row, we must walk the current path and look at which
   // children of the current frame matches the path element exactly. Until the
   // end, the row we find at the end is our selected row.
@@ -290,7 +308,7 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
     table,
     viewport,
     total,
-    width: width ?? 1,
+    width: zoomedWidth,
     selectedRow,
     effectiveDepth: deferredEffectiveDepth,
   });
@@ -328,6 +346,15 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
       tooltipId={tooltipId}
     >
       <div className="relative">
+        {isZoomEnabled && (
+          <ZoomControls
+            zoomLevel={zoomLevel}
+            zoomIn={zoomIn}
+            zoomOut={zoomOut}
+            resetZoom={resetZoom}
+            portalRef={zoomControlsRef}
+          />
+        )}
         <ContextMenuWrapper
           ref={contextMenuRef}
           menuId={MENU_ID}
@@ -352,49 +379,81 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
             )}
           </div>
         )}
+        {isZoomEnabled && (
+          <MiniMap
+            containerRef={containerRef}
+            table={table}
+            width={width ?? 0}
+            zoomedWidth={zoomedWidth}
+            totalHeight={totalHeight}
+            maxDepth={deferredEffectiveDepth}
+            colorByColors={colorByColors}
+            colorBy={colorByValue}
+            profileSource={profileSource}
+            isDarkMode={isDarkMode}
+            scrollLeft={viewport.scrollLeft}
+          />
+        )}
         <div
           ref={containerRef}
-          className="overflow-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 will-change-transform scroll-smooth webkit-overflow-scrolling-touch contain"
+          className={`${
+            isZoomEnabled ? '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden' : ''
+          } will-change-transform webkit-overflow-scrolling-touch contain ${
+            !isZoomEnabled ? 'overflow-auto' : ''
+          }`}
           style={{
             width: width ?? '100%',
+            ...(isZoomEnabled ? {overflowX: 'scroll' as const, overflowY: 'auto' as const} : {}),
             contain: 'layout style paint',
             visibility: !showSkeleton ? 'visible' : 'hidden',
           }}
         >
-          <svg
-            className="font-robotoMono"
-            width={width ?? 0}
-            height={totalHeight}
-            preserveAspectRatio="xMinYMid"
-            ref={svg}
-          >
-            {batchedNodes.map(row => (
-              <FlameNode
-                key={row}
-                table={table}
-                row={row}
-                colors={colorByColors}
-                colorBy={colorByValue}
-                totalWidth={width ?? 1}
-                height={RowHeight}
-                darkMode={isDarkMode}
-                compareMode={compareMode}
-                colorForSimilarNodes={colorForSimilarNodes}
-                selectedRow={selectedRow}
-                onClick={() => handleRowClick(row)}
-                onContextMenu={displayMenu}
-                hoveringRow={highlightSimilarStacksPreference ? hoveringRow : undefined}
-                setHoveringRow={highlightSimilarStacksPreference ? setHoveringRow : noop}
-                isFlameChart={isFlameChart}
-                profileSource={profileSource}
-                isRenderedAsFlamegraph={isRenderedAsFlamegraph}
-                isInSandwichView={isInSandwichView}
-                maxDepth={maxDepth}
-                effectiveDepth={deferredEffectiveDepth}
-                tooltipId={tooltipId}
+          <div>
+            {isFlameChart && (
+              <TimelineGuide
+                bounds={boundsFromProfileSource(profileSource)}
+                width={zoomedWidth}
+                height={totalHeight}
+                margin={0}
+                ticks={12}
+                timeUnit="nanoseconds"
               />
-            ))}
-          </svg>
+            )}
+            <svg
+              className="relative font-robotoMono"
+              width={zoomedWidth}
+              height={totalHeight}
+              preserveAspectRatio="xMinYMid"
+              ref={svg}
+            >
+              {batchedNodes.map(row => (
+                <FlameNode
+                  key={row}
+                  table={table}
+                  row={row}
+                  colors={colorByColors}
+                  colorBy={colorByValue}
+                  totalWidth={zoomedWidth}
+                  height={RowHeight}
+                  darkMode={isDarkMode}
+                  compareMode={compareMode}
+                  colorForSimilarNodes={colorForSimilarNodes}
+                  selectedRow={selectedRow}
+                  onClick={() => handleRowClick(row)}
+                  onContextMenu={displayMenu}
+                  hoveringRow={highlightSimilarStacksPreference ? hoveringRow : undefined}
+                  setHoveringRow={highlightSimilarStacksPreference ? setHoveringRow : noop}
+                  isFlameChart={isFlameChart}
+                  profileSource={profileSource}
+                  isRenderedAsFlamegraph={isRenderedAsFlamegraph}
+                  isInSandwichView={isInSandwichView}
+                  maxDepth={maxDepth}
+                  effectiveDepth={deferredEffectiveDepth}
+                  tooltipId={tooltipId}
+                />
+              ))}
+            </svg>
+          </div>
         </div>
       </div>
     </TooltipProvider>

package/src/ProfileFlameGraph/FlameGraphArrow/useZoom.ts

@@ -0,0 +1,116 @@
+// 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 {useCallback, useEffect, useRef, useState} from 'react';
+
+import {flushSync} from 'react-dom';
+
+const MIN_ZOOM = 1.0;
+const MAX_ZOOM = 20.0;
+const BUTTON_ZOOM_STEP = 1.5;
+// Sensitivity for trackpad/wheel zoom - smaller = smoother
+const WHEEL_ZOOM_SENSITIVITY = 0.01;
+
+interface UseZoomResult {
+  zoomLevel: number;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  resetZoom: () => void;
+}
+
+const clampZoom = (zoom: number): number => {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+};
+
+export const useZoom = (containerRef: React.RefObject<HTMLDivElement | null>): UseZoomResult => {
+  const [zoomLevel, setZoomLevel] = useState(MIN_ZOOM);
+  const zoomLevelRef = useRef(MIN_ZOOM);
+
+  // Adjust scrollLeft so the content under focalX stays fixed after zoom change.
+  const adjustScroll = useCallback(
+    (oldZoom: number, newZoom: number, focalX: number) => {
+      const container = containerRef.current;
+      if (container === null) return;
+
+      const contentX = container.scrollLeft + focalX;
+      const ratio = contentX / oldZoom;
+      container.scrollLeft = ratio * newZoom - focalX;
+    },
+    [containerRef]
+  );
+
+  // Apply a new zoom level around a focal point
+  const applyZoom = useCallback(
+    (newZoom: number, focalX: number) => {
+      const oldZoom = zoomLevelRef.current;
+      if (newZoom === oldZoom) return;
+      zoomLevelRef.current = newZoom;
+
+      // flushSync ensures the DOM updates with the new content width before adjustScroll reads it
+      flushSync(() => setZoomLevel(newZoom));
+      adjustScroll(oldZoom, newZoom, focalX);
+    },
+    [adjustScroll]
+  );
+
+  const zoomIn = useCallback(() => {
+    const newZoom = clampZoom(zoomLevelRef.current * BUTTON_ZOOM_STEP);
+    const container = containerRef.current;
+    applyZoom(newZoom, container !== null ? container.clientWidth / 2 : 0);
+  }, [containerRef, applyZoom]);
+
+  const zoomOut = useCallback(() => {
+    const newZoom = clampZoom(zoomLevelRef.current / BUTTON_ZOOM_STEP);
+    const container = containerRef.current;
+    applyZoom(newZoom, container !== null ? container.clientWidth / 2 : 0);
+  }, [containerRef, applyZoom]);
+
+  const resetZoom = useCallback(() => {
+    zoomLevelRef.current = MIN_ZOOM;
+    setZoomLevel(MIN_ZOOM);
+    const container = containerRef.current;
+    if (container !== null) {
+      container.scrollLeft = 0;
+    }
+  }, [containerRef]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null) return;
+
+    const handleWheel = (e: WheelEvent): void => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+
+      let delta = e.deltaY;
+      if (e.deltaMode === 1) {
+        delta *= 20;
+      }
+
+      // Limiting the max zoom step per event to 15%, so to fix the huge jumps in Linux OS.
+      const MAX_FACTOR = 0.15;
+      const rawFactor = -delta * WHEEL_ZOOM_SENSITIVITY;
+      const zoomFactor = 1 + Math.max(-MAX_FACTOR, Math.min(MAX_FACTOR, rawFactor));
+
+      const newZoom = clampZoom(zoomLevelRef.current * zoomFactor);
+      applyZoom(newZoom, e.clientX - container.getBoundingClientRect().left);
+    };
+
+    container.addEventListener('wheel', handleWheel, {passive: false});
+    return () => {
+      container.removeEventListener('wheel', handleWheel);
+    };
+  }, [containerRef, applyZoom]);
+
+  return {zoomLevel, zoomIn, zoomOut, resetZoom};
+};

package/src/ProfileFlameGraph/index.tsx

@@ -33,9 +33,8 @@ import DiffLegend from '../ProfileView/components/DiffLegend';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
 import {useProfileMetadata} from '../ProfileView/hooks/useProfileMetadata';
 import {useVisualizationState} from '../ProfileView/hooks/useVisualizationState';
-import {TimelineGuide} from '../TimelineGuide';
 import {FlameGraphArrow} from './FlameGraphArrow';
-import {CurrentPathFrame, boundsFromProfileSource} from './FlameGraphArrow/utils';
+import {CurrentPathFrame} from './FlameGraphArrow/utils';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
 
@@ -62,6 +61,7 @@ interface ProfileFlameGraphProps {
   tooltipId?: string;
   maxFrameCount?: number;
   isExpanded?: boolean;
+  zoomControlsRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string | ReactNode}): JSX.Element => {
@@ -101,11 +101,12 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   maxFrameCount,
   isExpanded = false,
   metadataLoading = false,
+  zoomControlsRef,
 }: ProfileFlameGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode, flamechartHelpText} = useParcaContext();
   const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [flameChartRef, {height: flameChartHeight}] = useMeasure();
+  const [flameChartRef] = useMeasure();
   const {colorBy, setColorBy} = useVisualizationState();
 
   // Create local state for paths when in sandwich view to avoid URL updates
@@ -263,16 +264,6 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
     if (arrow !== undefined) {
       return (
         <div className="relative">
-          {isFlameChart ? (
-            <TimelineGuide
-              bounds={boundsFromProfileSource(profileSource)}
-              width={width}
-              height={flameChartHeight ?? 420}
-              margin={0}
-              ticks={12}
-              timeUnit="nanoseconds"
-            />
-          ) : null}
           <div ref={flameChartRef as LegacyRef<HTMLDivElement>}>
             <FlameGraphArrow
               width={width}
@@ -294,6 +285,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
               maxFrameCount={maxFrameCount}
               isExpanded={isExpanded}
               colorBy={colorBy}
+              zoomControlsRef={zoomControlsRef}
             />
           </div>
         </div>
@@ -312,7 +304,6 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
     isCompareAbsolute,
     isFlameChart,
     profileSource,
-    flameChartHeight,
     flameChartRef,
     flamechartHelpText,
     isRenderedAsFlamegraph,
@@ -325,6 +316,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
     mappingsList,
     filenamesList,
     colorBy,
+    zoomControlsRef,
   ]);
 
   useEffect(() => {

package/src/ProfileSelector/index.tsx

@@ -276,6 +276,7 @@ const ProfileSelector = ({
     querySelection,
     navigateTo,
     loading: sumByLoading,
+    defaultProfileType: viewComponent?.defaultProfileType,
   });
 
   const searchDisabled =

package/src/ProfileSelector/useAutoQuerySelector.ts

@@ -29,6 +29,7 @@ interface Props {
   querySelection: QuerySelection;
   navigateTo: NavigateFunction;
   loading: boolean;
+  defaultProfileType?: string;
 }
 
 export const useAutoQuerySelector = ({
@@ -39,6 +40,7 @@ export const useAutoQuerySelector = ({
   querySelection,
   navigateTo,
   loading,
+  defaultProfileType,
 }: Props): void => {
   const autoQuery = useAppSelector(selectAutoQuery);
   const dispatch = useAppDispatch();
@@ -136,6 +138,12 @@ export const useAutoQuerySelector = ({
         return;
       }
       dispatch(setAutoQuery('true'));
+
+      if (defaultProfileType != null && defaultProfileType.length > 0) {
+        setProfileName(defaultProfileType);
+        return;
+      }
+
       let profileType = profileTypesData.types.find(
         type => type.name === 'parca_agent' && type.sampleType === 'samples' && type.delta
       );
@@ -166,6 +174,7 @@ export const useAutoQuerySelector = ({
     dispatch,
     setQueryExpression,
     setProfileName,
+    defaultProfileType,
   ]);
 
   useEffect(() => {

package/src/TimelineGuide/index.tsx

@@ -49,8 +49,8 @@ export const TimelineGuide = ({
 
   return (
     <div className="relative h-5">
-      <div className="absolute" style={{width, height}}>
-        <svg style={{width: '100%', height: '100%'}} className="z-[5]">
+      <div className="pointer-events-none absolute" style={{width, height}}>
+        <svg style={{width: '100%', height: '100%'}}>
           <g
             className="x axis"
             fill="none"