Merge remote-tracking branch 'origin/flamecharts-zoom-feature' into flamecharts-zoom-feature

manojVivek · manojVivek · commit 7a341cdd6263 · 2026-02-12T20:30:39.000+05:30
diff --git a/ui/packages/shared/profile/src/ProfileFlameChart/index.tsx b/ui/packages/shared/profile/src/ProfileFlameChart/index.tsx
@@ -278,19 +278,24 @@ export const ProfileFlameChart = ({
       )}
 
       {/* Selected timeframe description + zoom controls */}
-      {selectedTimeframe != null && (() => {
-        const labels = selectedTimeframe.labels.labels.map(l => `${l.name} = ${l.value}`).join(', ');
-        const durationMs = selectedTimeframe.bounds[1] - selectedTimeframe.bounds[0];
-        const duration = formatDuration({[TimeUnits.Milliseconds]: durationMs});
-        return (
-          <div className="flex items-center justify-between px-2 py-1">
-            <div className="text-xs font-medium text-gray-500 dark:text-gray-400">
-              Samples matching {labels} over {duration} from {formatDateTimeDownToMS(selectedTimeframe.bounds[0])} to {formatDateTimeDownToMS(selectedTimeframe.bounds[1])}
+      {selectedTimeframe != null &&
+        (() => {
+          const labels = selectedTimeframe.labels.labels
+            .map(l => `${l.name} = ${l.value}`)
+            .join(', ');
+          const durationMs = selectedTimeframe.bounds[1] - selectedTimeframe.bounds[0];
+          const duration = formatDuration({[TimeUnits.Milliseconds]: durationMs});
+          return (
+            <div className="flex items-center justify-between px-2 py-1">
+              <div className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                Samples matching {labels} over {duration} from{' '}
+                {formatDateTimeDownToMS(selectedTimeframe.bounds[0])} to{' '}
+                {formatDateTimeDownToMS(selectedTimeframe.bounds[1])}
+              </div>
+              <div ref={zoomControlsRef} />
             </div>
-            <div ref={zoomControlsRef} />
-          </div>
-        );
-      })()}
+          );
+        })()}
 
       {/* Flamegraph visualization - only shown when a time range is selected in the strips */}
       {selectedTimeframe != null && filteredProfileSource != null ? (
diff --git a/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/MiniMap.tsx b/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/MiniMap.tsx
@@ -11,23 +11,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 
-import { Table } from '@uwdata/flechette';
+import {Table} from '@uwdata/flechette';
 
-import { EVERYTHING_ELSE } from '@parca/store';
-import { getLastItem } from '@parca/utilities';
+import {EVERYTHING_ELSE} from '@parca/store';
+import {getLastItem} from '@parca/utilities';
 
-import { ProfileSource } from '../../ProfileSource';
-import { RowHeight, type colorByColors } from './FlameGraphNodes';
+import {ProfileSource} from '../../ProfileSource';
+import {RowHeight, type colorByColors} from './FlameGraphNodes';
 import {
   FIELD_CUMULATIVE,
   FIELD_DEPTH,
   FIELD_FUNCTION_FILE_NAME,
   FIELD_MAPPING_FILE,
   FIELD_TIMESTAMP,
 } from './index';
-import { arrowToString, boundsFromProfileSource } from './utils';
+import {arrowToString, boundsFromProfileSource} from './utils';
 
 const MINIMAP_HEIGHT = 20;
 
@@ -122,14 +122,24 @@ export const MiniMap = React.memo(function MiniMap({
         colorBy === 'filename'
           ? arrowToString(filenameCol?.get(row))
           : colorBy === 'binary'
-            ? arrowToString(mappingCol?.get(row))
-            : null;
+          ? arrowToString(mappingCol?.get(row))
+          : null;
 
       const color = colors[getLastItem(colorAttribute ?? '') ?? EVERYTHING_ELSE];
       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]);
+  }, [
+    table,
+    width,
+    zoomedWidth,
+    totalHeight,
+    maxDepth,
+    colorBy,
+    colors,
+    isDarkMode,
+    profileSource,
+  ]);
 
   const isZoomed = zoomedWidth > width;
   const sliderWidth = Math.max(20, (width / zoomedWidth) * width);
@@ -212,7 +222,7 @@ export const MiniMap = React.memo(function MiniMap({
       );
     };
 
-    el.addEventListener('wheel', handleWheel, { passive: false });
+    el.addEventListener('wheel', handleWheel, {passive: false});
     return () => {
       el.removeEventListener('wheel', handleWheel);
     };
@@ -224,29 +234,34 @@ export const MiniMap = React.memo(function MiniMap({
     <div
       ref={containerElRef}
       className="relative select-none"
-      style={{ width, height: MINIMAP_HEIGHT, cursor: isZoomed ? 'pointer' : 'default' }}
+      style={{width, height: MINIMAP_HEIGHT, cursor: isZoomed ? 'pointer' : 'default'}}
       onMouseDown={isZoomed ? handleMouseDown : undefined}
     >
       <canvas
         ref={canvasRef}
-        style={{ width, height: MINIMAP_HEIGHT, display: 'block', visibility: isZoomed ? 'visible' : 'hidden' }}
+        style={{
+          width,
+          height: MINIMAP_HEIGHT,
+          display: 'block',
+          visibility: isZoomed ? 'visible' : 'hidden',
+        }}
       />
       {isZoomed && (
         <>
           {/* Left overlay */}
           <div
             className="absolute top-0 bottom-0 bg-black/30 dark:bg-black/50"
-            style={{ left: 0, width: Math.max(0, sliderLeft) }}
+            style={{left: 0, width: Math.max(0, sliderLeft)}}
           />
           {/* Viewport slider */}
           <div
             className="absolute top-0 bottom-0 border-x-2 border-gray-500"
-            style={{ left: sliderLeft, width: sliderWidth }}
+            style={{left: sliderLeft, width: sliderWidth}}
           />
           {/* Right overlay */}
           <div
             className="absolute top-0 bottom-0 bg-black/30 dark:bg-black/50"
-            style={{ left: sliderLeft + sliderWidth, right: 0 }}
+            style={{left: sliderLeft + sliderWidth, right: 0}}
           />
         </>
       )}
diff --git a/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/ZoomControls.tsx b/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/ZoomControls.tsx
@@ -12,9 +12,9 @@
 // limitations under the License.
 
 import React from 'react';
-import {createPortal} from 'react-dom';
 
 import {Icon} from '@iconify/react';
+import {createPortal} from 'react-dom';
 
 interface ZoomControlsProps {
   zoomLevel: number;
@@ -33,30 +33,30 @@ export const ZoomControls = ({
 }: ZoomControlsProps): React.JSX.Element => {
   const controls = (
     <div className="flex items-center gap-1 rounded-md border border-gray-200 bg-white/90 px-1 py-0.5 shadow-sm backdrop-blur-sm dark:border-gray-600 dark:bg-gray-800/90">
-    <button
-      onClick={zoomOut}
-      disabled={zoomLevel <= 1}
-      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 out"
-    >
-      <Icon icon="mdi:minus" width={16} height={16} />
-    </button>
-    <button
-      onClick={resetZoom}
-      className="min-w-[3rem] px-1 text-center text-xs text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 rounded"
-      title="Reset zoom"
-    >
-      {Math.round(zoomLevel * 100)}%
-    </button>
-    <button
-      onClick={zoomIn}
-      disabled={zoomLevel >= 20}
-      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"
-    >
-      <Icon icon="mdi:plus" width={16} height={16} />
-    </button>
-  </div>
+      <button
+        onClick={zoomOut}
+        disabled={zoomLevel <= 1}
+        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 out"
+      >
+        <Icon icon="mdi:minus" width={16} height={16} />
+      </button>
+      <button
+        onClick={resetZoom}
+        className="min-w-[3rem] px-1 text-center text-xs text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 rounded"
+        title="Reset zoom"
+      >
+        {Math.round(zoomLevel * 100)}%
+      </button>
+      <button
+        onClick={zoomIn}
+        disabled={zoomLevel >= 20}
+        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"
+      >
+        <Icon icon="mdi:plus" width={16} height={16} />
+      </button>
+    </div>
   );
 
   if (portalRef?.current != null) {
diff --git a/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/index.tsx b/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/index.tsx
@@ -34,18 +34,18 @@ 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 {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 {MiniMap} from './MiniMap';
 import {TooltipProvider} from './TooltipContext';
-import { ZoomControls } from './ZoomControls';
+import {ZoomControls} from './ZoomControls';
 import {useBatchedRendering} from './useBatchedRendering';
 import {useScrollViewport} from './useScrollViewport';
 import {useVisibleNodes} from './useVisibleNodes';
-import { useZoom } from './useZoom';
+import {useZoom} from './useZoom';
 import {
   CurrentPathFrame,
   boundsFromProfileSource,
@@ -269,8 +269,10 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
 
   const isZoomEnabled = isFlameChart;
 
-  const { zoomLevel, zoomIn, zoomOut, resetZoom } = useZoom(isZoomEnabled ? containerRef : { current: null });
-  const zoomedWidth = isZoomEnabled ? Math.round((width ?? 1) * zoomLevel) : (width ?? 0);
+  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(() => {
@@ -394,10 +396,14 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
         )}
         <div
           ref={containerRef}
-          className={`${isZoomEnabled ? '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden' : ''} will-change-transform webkit-overflow-scrolling-touch contain ${!isZoomEnabled ? 'overflow-auto' : ''}`}
+          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 } : {}),
+            ...(isZoomEnabled ? {overflowX: 'scroll' as const, overflowY: 'auto' as const} : {}),
             contain: 'layout style paint',
             visibility: !showSkeleton ? 'visible' : 'hidden',
           }}
