@parca/profile 0.19.133 → 0.19.134

package/src/ProfileFlameGraph/FlameGraphArrow/MiniMap.tsx

@@ -43,6 +43,9 @@ interface MiniMapProps {
   profileSource: ProfileSource;
   isDarkMode: boolean;
   scrollLeft: number;
+  scrollLeftRef: React.RefObject<number>;
+  onZoomToPosition?: (normalizedX: number, targetZoom: number) => void;
+  onSetZoomWithScroll?: (zoom: number, scrollLeft: number) => void;
 }
 
 export const MiniMap = React.memo(function MiniMap({
@@ -56,7 +59,10 @@ export const MiniMap = React.memo(function MiniMap({
   colorBy,
   profileSource,
   isDarkMode,
-  scrollLeft,
+  scrollLeft: _scrollLeft,
+  scrollLeftRef,
+  onZoomToPosition,
+  onSetZoomWithScroll,
 }: MiniMapProps): React.JSX.Element | null {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerElRef = useRef<HTMLDivElement>(null);
@@ -83,7 +89,6 @@ export const MiniMap = React.memo(function MiniMap({
     ctx.fillStyle = isDarkMode ? '#374151' : '#f3f4f6';
     ctx.fillRect(0, 0, width, MINIMAP_HEIGHT);
 
-    const xScale = width / zoomedWidth;
     const yScale = MINIMAP_HEIGHT / totalHeight;
 
     const tsBounds = boundsFromProfileSource(profileSource);
@@ -109,11 +114,11 @@ export const MiniMap = React.memo(function MiniMap({
       const cumulative = Number(cumulativeCol.get(row) ?? 0n);
       if (cumulative <= 0) continue;
 
-      const nodeWidth = (cumulative / tsRange) * zoomedWidth * xScale;
+      const nodeWidth = (cumulative / tsRange) * width;
       if (nodeWidth < 0.5) continue;
 
       const ts = tsCol != null ? Number(tsCol.get(row)) : 0;
-      const x = ((ts - Number(tsBounds[0])) / tsRange) * zoomedWidth * xScale;
+      const x = ((ts - Number(tsBounds[0])) / tsRange) * width;
       const y = (depth - 1) * RowHeight * yScale;
       const h = Math.max(1, RowHeight * yScale);
 
@@ -129,21 +134,17 @@ export const MiniMap = React.memo(function MiniMap({
       ctx.fillStyle = color ?? (isDarkMode ? '#6b7280' : '#9ca3af');
       ctx.fillRect(x, y, Math.max(0.5, nodeWidth), h);
     }
-  }, [
-    table,
-    width,
-    zoomedWidth,
-    totalHeight,
-    maxDepth,
-    colorBy,
-    colors,
-    isDarkMode,
-    profileSource,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- zoomedWidth intentionally excluded: canvas is zoom-independent
+  }, [table, width, totalHeight, maxDepth, colorBy, colors, isDarkMode, profileSource]);
 
   const isZoomed = zoomedWidth > width;
   const sliderWidth = Math.max(20, (width / zoomedWidth) * width);
-  const sliderLeft = Math.min((scrollLeft / zoomedWidth) * width, width - sliderWidth);
+  // Use scrollLeftRef for positioning — it's pre-set before flushSync during zoom changes,
+  // avoiding the 1-frame lag where viewport.scrollLeft is stale but zoomedWidth is already updated.
+  const currentScrollLeft = scrollLeftRef.current ?? 0;
+  const sliderLeft = Math.min((currentScrollLeft / zoomedWidth) * width, width - sliderWidth);
+
+  const EDGE_HIT_ZONE = 6;
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
@@ -153,12 +154,86 @@ export const MiniMap = React.memo(function MiniMap({
 
       const clickX = e.clientX - rect.left;
 
-      // Check if clicking inside the slider
-      if (clickX >= sliderLeft && clickX <= sliderLeft + sliderWidth) {
-        // Start dragging
+      // When not zoomed, clicking the minimap zooms into a +-50px region
+      if (!isZoomed) {
+        const regionPx = 100; // 50px on each side of the click
+        const targetZoom = width / regionPx;
+        onZoomToPosition?.(clickX / width, targetZoom);
+        return;
+      }
+
+      const sliderRight = sliderLeft + sliderWidth;
+      const isNearLeftEdge =
+        Math.abs(clickX - sliderLeft) <= EDGE_HIT_ZONE && clickX <= sliderLeft + EDGE_HIT_ZONE;
+      const isNearRightEdge =
+        Math.abs(clickX - sliderRight) <= EDGE_HIT_ZONE && clickX >= sliderRight - EDGE_HIT_ZONE;
+
+      // Edge drag: resize the zoomed region by dragging one bound
+      if (isNearLeftEdge || isNearRightEdge) {
+        const edge = isNearLeftEdge ? 'left' : 'right';
+        // The opposite edge stays fixed in minimap coordinates
+        const anchorPx = edge === 'left' ? sliderRight : sliderLeft;
+        const MIN_SLIDER_PX = 10;
+
+        let edgeRafId: number | null = null;
+        let pendingEdgeEvent: MouseEvent | null = null;
+
+        const applyEdgeMove = (): void => {
+          edgeRafId = null;
+          const moveEvent = pendingEdgeEvent;
+          if (moveEvent == null) return;
+          pendingEdgeEvent = null;
+
+          const moveRect = containerElRef.current?.getBoundingClientRect();
+          if (moveRect == null) return;
+
+          let edgePx = moveEvent.clientX - moveRect.left;
+          edgePx = Math.max(0, Math.min(edgePx, width));
+
+          let newLeft: number;
+          let newRight: number;
+
+          if (edge === 'left') {
+            newLeft = Math.min(edgePx, anchorPx - MIN_SLIDER_PX);
+            newRight = anchorPx;
+          } else {
+            newLeft = anchorPx;
+            newRight = Math.max(edgePx, anchorPx + MIN_SLIDER_PX);
+          }
+
+          const newSliderWidth = newRight - newLeft;
+          const newZoom = width / newSliderWidth;
+          const newScrollLeft = newLeft * newZoom;
+          onSetZoomWithScroll?.(newZoom, newScrollLeft);
+        };
+
+        const handleEdgeMove = (moveEvent: MouseEvent): void => {
+          pendingEdgeEvent = moveEvent;
+          if (edgeRafId === null) {
+            edgeRafId = requestAnimationFrame(applyEdgeMove);
+          }
+        };
+
+        const handleEdgeUp = (): void => {
+          if (edgeRafId !== null) {
+            cancelAnimationFrame(edgeRafId);
+            // Apply final position immediately on mouse up
+            applyEdgeMove();
+          }
+          document.removeEventListener('mousemove', handleEdgeMove);
+          document.removeEventListener('mouseup', handleEdgeUp);
+        };
+
+        document.addEventListener('mousemove', handleEdgeMove);
+        document.addEventListener('mouseup', handleEdgeUp);
+        return;
+      }
+
+      // Check if clicking inside the slider — start pan drag
+      if (clickX >= sliderLeft && clickX <= sliderRight) {
         isDragging.current = true;
         dragStartX.current = e.clientX;
-        dragStartScrollLeft.current = scrollLeft;
+        dragStartScrollLeft.current = currentScrollLeft;
       } else {
         // Click-to-jump: center viewport at click position
         const targetCenter = (clickX / width) * zoomedWidth;
@@ -198,7 +273,17 @@ export const MiniMap = React.memo(function MiniMap({
       document.addEventListener('mousemove', handleMouseMove);
       document.addEventListener('mouseup', handleMouseUp);
     },
-    [sliderLeft, sliderWidth, scrollLeft, width, zoomedWidth, containerRef]
+    [
+      sliderLeft,
+      sliderWidth,
+      currentScrollLeft,
+      width,
+      zoomedWidth,
+      containerRef,
+      isZoomed,
+      onZoomToPosition,
+      onSetZoomWithScroll,
+    ]
   );
 
   // Forward wheel events to the container so zoom (Ctrl+scroll) works on the minimap
@@ -233,9 +318,9 @@ export const MiniMap = React.memo(function MiniMap({
   return (
     <div
       ref={containerElRef}
-      className="relative select-none"
-      style={{width, height: MINIMAP_HEIGHT, cursor: isZoomed ? 'pointer' : 'default'}}
-      onMouseDown={isZoomed ? handleMouseDown : undefined}
+      className="relative select-none cursor-pointer"
+      style={{width, height: MINIMAP_HEIGHT}}
+      onMouseDown={handleMouseDown}
     >
       <canvas
         ref={canvasRef}
@@ -243,7 +328,6 @@ export const MiniMap = React.memo(function MiniMap({
           width,
           height: MINIMAP_HEIGHT,
           display: 'block',
-          visibility: isZoomed ? 'visible' : 'hidden',
         }}
       />
       {isZoomed && (
@@ -258,6 +342,16 @@ export const MiniMap = React.memo(function MiniMap({
             className="absolute top-0 bottom-0 border-x-2 border-gray-500"
             style={{left: sliderLeft, width: sliderWidth}}
           />
+          {/* Left edge drag handle */}
+          <div
+            className="absolute top-0 bottom-0 cursor-col-resize"
+            style={{left: sliderLeft - EDGE_HIT_ZONE, width: EDGE_HIT_ZONE * 2}}
+          />
+          {/* Right edge drag handle */}
+          <div
+            className="absolute top-0 bottom-0 cursor-col-resize"
+            style={{left: sliderLeft + sliderWidth - EDGE_HIT_ZONE, width: EDGE_HIT_ZONE * 2}}
+          />
           {/* Right overlay */}
           <div
             className="absolute top-0 bottom-0 bg-black/30 dark:bg-black/50"

package/src/ProfileFlameGraph/FlameGraphArrow/ZoomControls.tsx

@@ -16,6 +16,8 @@ import React from 'react';
 import {Icon} from '@iconify/react';
 import {createPortal} from 'react-dom';
 
+import {MAX_ZOOM} from './useZoom';
+
 interface ZoomControlsProps {
   zoomLevel: number;
   zoomIn: () => void;
@@ -50,7 +52,7 @@ export const ZoomControls = ({
       </button>
       <button
         onClick={zoomIn}
-        disabled={zoomLevel >= 20}
+        disabled={zoomLevel >= MAX_ZOOM}
         className="rounded p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-30 dark:text-gray-300 dark:hover:bg-gray-700"
         title="Zoom in"
       >

package/src/ProfileFlameGraph/FlameGraphArrow/index.tsx

@@ -273,9 +273,8 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
 
   const isZoomEnabled = isFlameChart;
 
-  const {zoomLevel, zoomIn, zoomOut, resetZoom} = useZoom(
-    isZoomEnabled ? containerRef : {current: null}
-  );
+  const {zoomLevel, zoomIn, zoomOut, resetZoom, zoomToPosition, setZoomWithScroll, scrollLeftRef} =
+    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)
@@ -400,6 +399,9 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
             profileSource={profileSource}
             isDarkMode={isDarkMode}
             scrollLeft={viewport.scrollLeft}
+            scrollLeftRef={scrollLeftRef}
+            onZoomToPosition={zoomToPosition}
+            onSetZoomWithScroll={setZoomWithScroll}
           />
         )}
         <div

package/src/ProfileFlameGraph/FlameGraphArrow/useZoom.ts

@@ -16,7 +16,7 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import {flushSync} from 'react-dom';
 
 const MIN_ZOOM = 1.0;
-const MAX_ZOOM = 20.0;
+export const MAX_ZOOM = 100.0;
 const BUTTON_ZOOM_STEP = 1.5;
 // Sensitivity for trackpad/wheel zoom - smaller = smoother
 const WHEEL_ZOOM_SENSITIVITY = 0.01;
@@ -26,6 +26,9 @@ interface UseZoomResult {
   zoomIn: () => void;
   zoomOut: () => void;
   resetZoom: () => void;
+  zoomToPosition: (normalizedX: number, targetZoom: number) => void;
+  setZoomWithScroll: (zoom: number, scrollLeft: number) => void;
+  scrollLeftRef: React.RefObject<number>;
 }
 
 const clampZoom = (zoom: number): number => {
@@ -35,32 +38,42 @@ const clampZoom = (zoom: number): number => {
 export const useZoom = (containerRef: React.RefObject<HTMLDivElement | null>): UseZoomResult => {
   const [zoomLevel, setZoomLevel] = useState(MIN_ZOOM);
   const zoomLevelRef = useRef(MIN_ZOOM);
+  const scrollLeftRef = useRef(0);
 
-  // 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;
+  // Keep scrollLeftRef in sync with actual scroll position during regular scrolling
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null) return;
 
-      const contentX = container.scrollLeft + focalX;
-      const ratio = contentX / oldZoom;
-      container.scrollLeft = ratio * newZoom - focalX;
-    },
-    [containerRef]
-  );
+    const onScroll = (): void => {
+      scrollLeftRef.current = container.scrollLeft;
+    };
+    container.addEventListener('scroll', onScroll, {passive: true});
+    return () => container.removeEventListener('scroll', onScroll);
+  }, [containerRef]);
 
   // Apply a new zoom level around a focal point
   const applyZoom = useCallback(
     (newZoom: number, focalX: number) => {
+      const container = containerRef.current;
+      if (container === null) return;
+
       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
+      // Pre-compute intended scrollLeft BEFORE flushSync so MiniMap reads correct value during render
+      const contentX = container.scrollLeft + focalX;
+      const ratio = contentX / oldZoom;
+      const newScrollLeft = ratio * newZoom - focalX;
+      scrollLeftRef.current = newScrollLeft;
+
+      zoomLevelRef.current = newZoom;
       flushSync(() => setZoomLevel(newZoom));
-      adjustScroll(oldZoom, newZoom, focalX);
+
+      // Apply scroll to DOM after render (content is now wide enough)
+      container.scrollLeft = newScrollLeft;
     },
-    [adjustScroll]
+    [containerRef]
   );
 
   const zoomIn = useCallback(() => {
@@ -77,6 +90,7 @@ export const useZoom = (containerRef: React.RefObject<HTMLDivElement | null>): U
 
   const resetZoom = useCallback(() => {
     zoomLevelRef.current = MIN_ZOOM;
+    scrollLeftRef.current = 0;
     setZoomLevel(MIN_ZOOM);
     const container = containerRef.current;
     if (container !== null) {
@@ -112,5 +126,52 @@ export const useZoom = (containerRef: React.RefObject<HTMLDivElement | null>): U
     };
   }, [containerRef, applyZoom]);
 
-  return {zoomLevel, zoomIn, zoomOut, resetZoom};
+  const zoomToPosition = useCallback(
+    (normalizedX: number, targetZoom: number) => {
+      const container = containerRef.current;
+      if (container === null) return;
+
+      const newZoom = clampZoom(targetZoom);
+      if (newZoom === zoomLevelRef.current) return;
+
+      const containerWidth = container.clientWidth;
+      const contentWidth = containerWidth * newZoom;
+      const targetScrollLeft = Math.max(
+        0,
+        Math.min(normalizedX * contentWidth - containerWidth / 2, contentWidth - containerWidth)
+      );
+
+      // Pre-set scrollLeftRef before flushSync so MiniMap reads correct value during render
+      scrollLeftRef.current = targetScrollLeft;
+      zoomLevelRef.current = newZoom;
+      flushSync(() => setZoomLevel(newZoom));
+
+      container.scrollLeft = targetScrollLeft;
+    },
+    [containerRef]
+  );
+
+  const setZoomWithScroll = useCallback(
+    (zoom: number, newScrollLeft: number) => {
+      const container = containerRef.current;
+      if (container === null) return;
+
+      const clamped = clampZoom(zoom);
+      const contentWidth = container.clientWidth * clamped;
+      const clampedScroll = Math.max(
+        0,
+        Math.min(newScrollLeft, contentWidth - container.clientWidth)
+      );
+
+      // Pre-set scrollLeftRef before flushSync so MiniMap reads correct value during render
+      scrollLeftRef.current = clampedScroll;
+      zoomLevelRef.current = clamped;
+      flushSync(() => setZoomLevel(clamped));
+
+      container.scrollLeft = clampedScroll;
+    },
+    [containerRef]
+  );
+
+  return {zoomLevel, zoomIn, zoomOut, resetZoom, zoomToPosition, setZoomWithScroll, scrollLeftRef};
 };

package/src/ProfileFlameGraph/index.tsx

@@ -74,11 +74,9 @@ const ErrorContent = ({errorMessage}: {errorMessage: string | ReactNode}): JSX.E
 
 export const validateFlameChartQuery = (
   profileSource: MergedProfileSource
-): {isValid: boolean; isNonDelta: boolean; isDurationTooLong: boolean} => {
+): {isValid: boolean; isNonDelta: boolean} => {
   const isNonDelta = !profileSource.ProfileType().delta;
-  const duration = profileSource.mergeTo - profileSource.mergeFrom;
-  const isDurationTooLong = duration > 60_000_000_000n; // 60 seconds in nanoseconds
-  return {isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong};
+  return {isValid: !isNonDelta, isNonDelta};
 };
 
 const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
@@ -194,13 +192,9 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   }, [loadingState]);
 
   const flameGraph = useMemo(() => {
-    const {
-      isValid: isFlameChartValid,
-      isNonDelta,
-      isDurationTooLong,
-    } = isFlameChart
+    const {isValid: isFlameChartValid, isNonDelta} = isFlameChart
       ? validateFlameChartQuery(profileSource as MergedProfileSource)
-      : {isValid: true, isNonDelta: false, isDurationTooLong: false};
+      : {isValid: true, isNonDelta: false};
     const isInvalidFlameChartQuery = isFlameChart && !isFlameChartValid;
 
     if (isLoading && !isInvalidFlameChartQuery) {
@@ -228,20 +222,6 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
             }
           />
         );
-      } else if (isDurationTooLong) {
-        return (
-          <ErrorContent
-            errorMessage={
-              <>
-                <span>
-                  Flame chart is unavailable for queries longer than one minute. Please select a
-                  point in the metrics graph to continue.
-                </span>
-                {flamechartHelpText ?? null}
-              </>
-            }
-          />
-        );
       } else {
         return (
           <ErrorContent

package/src/ProfileView/components/DashboardItems/index.tsx

@@ -50,7 +50,6 @@ interface GetDashboardItemProps {
     onRender?: ProfilerOnRenderCallback;
   };
   queryClient: QueryServiceClient;
-  onSwitchToOneMinute?: () => void;
 }
 
 export const getDashboardItem = ({
@@ -69,7 +68,6 @@ export const getDashboardItem = ({
   setNewCurPathArrow,
   perf,
   queryClient,
-  onSwitchToOneMinute,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
     case 'flamegraph':
@@ -124,7 +122,6 @@ export const getDashboardItem = ({
           isHalfScreen={isHalfScreen}
           metadataMappingFiles={flamegraphData.metadataMappingFiles}
           metadataLoading={flamegraphData.metadataLoading}
-          onSwitchToOneMinute={onSwitchToOneMinute}
         />
       );
     case 'table':

package/src/ProfileView/index.tsx

@@ -46,7 +46,6 @@ export const ProfileView = ({
   compare,
   showVisualizationSelector,
   sandwichData,
-  onSwitchToOneMinute,
 }: ProfileViewProps): JSX.Element => {
   const {
     timezone,
@@ -116,7 +115,6 @@ export const ProfileView = ({
       setNewCurPathArrow: setCurPathArrow,
       perf,
       queryClient,
-      onSwitchToOneMinute,
     });
   };
 

package/src/ProfileView/types/visualization.ts

@@ -84,5 +84,4 @@ export interface ProfileViewProps {
   onDownloadPProf: () => void;
   pprofDownloading?: boolean;
   showVisualizationSelector?: boolean;
-  onSwitchToOneMinute?: () => void;
 }

package/src/ProfileViewWithData.tsx

@@ -43,14 +43,12 @@ interface ProfileViewWithDataProps {
   profileSource: ProfileSource;
   compare?: boolean;
   showVisualizationSelector?: boolean;
-  onSwitchToOneMinute?: () => void;
 }
 
 export const ProfileViewWithData = ({
   queryClient,
   profileSource,
   showVisualizationSelector,
-  onSwitchToOneMinute,
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
   const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
@@ -380,7 +378,6 @@ export const ProfileViewWithData = ({
       onDownloadPProf={() => void downloadPProfClick()}
       pprofDownloading={pprofDownloading}
       showVisualizationSelector={showVisualizationSelector}
-      onSwitchToOneMinute={onSwitchToOneMinute}
     />
   );
 };

package/src/TimelineGuide/index.tsx

@@ -48,7 +48,7 @@ export const TimelineGuide = ({
   const xScale = scaleLinear(bounds, [0, width]);
 
   return (
-    <div className="relative h-5">
+    <div className="relative h-5 z-40">
       <div className="pointer-events-none absolute" style={{width, height}}>
         <svg style={{width: '100%', height: '100%'}}>
           <g