@parca/profile 0.19.121 → 0.19.123

package/src/ProfileFlameGraph/FlameGraphArrow/MiniMap.tsx

@@ -0,0 +1,270 @@
+// 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 React, {useCallback, useEffect, useRef} from 'react';
+
+import {Table} from '@uwdata/flechette';
+
+import {EVERYTHING_ELSE} from '@parca/store';
+import {getLastItem} from '@parca/utilities';
+
+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';
+
+const MINIMAP_HEIGHT = 20;
+
+interface MiniMapProps {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  table: Table;
+  width: number;
+  zoomedWidth: number;
+  totalHeight: number;
+  maxDepth: number;
+  colorByColors: colorByColors;
+  colorBy: string;
+  profileSource: ProfileSource;
+  isDarkMode: boolean;
+  scrollLeft: number;
+}
+
+export const MiniMap = React.memo(function MiniMap({
+  containerRef,
+  table,
+  width,
+  zoomedWidth,
+  totalHeight,
+  maxDepth,
+  colorByColors: colors,
+  colorBy,
+  profileSource,
+  isDarkMode,
+  scrollLeft,
+}: MiniMapProps): React.JSX.Element | null {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerElRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+  const dragStartX = useRef(0);
+  const dragStartScrollLeft = useRef(0);
+
+  // Render minimap canvas
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas == null || width <= 0 || zoomedWidth <= 0) return;
+
+    const dpr = window.devicePixelRatio !== 0 ? window.devicePixelRatio : 1;
+    canvas.width = width * dpr;
+    canvas.height = MINIMAP_HEIGHT * dpr;
+
+    const ctx = canvas.getContext('2d');
+    if (ctx == null) return;
+
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, width, MINIMAP_HEIGHT);
+
+    // Background
+    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);
+    const tsRange = Number(tsBounds[1]) - Number(tsBounds[0]);
+    if (tsRange <= 0) return;
+
+    const depthCol = table.getChild(FIELD_DEPTH);
+    const cumulativeCol = table.getChild(FIELD_CUMULATIVE);
+    const tsCol = table.getChild(FIELD_TIMESTAMP);
+    const mappingCol = table.getChild(FIELD_MAPPING_FILE);
+    const filenameCol = table.getChild(FIELD_FUNCTION_FILE_NAME);
+
+    if (depthCol == null || cumulativeCol == null) return;
+
+    const numRows = table.numRows;
+
+    for (let row = 0; row < numRows; row++) {
+      const depth = depthCol.get(row) ?? 0;
+      if (depth === 0) continue; // skip root
+
+      if (depth > maxDepth) continue;
+
+      const cumulative = Number(cumulativeCol.get(row) ?? 0n);
+      if (cumulative <= 0) continue;
+
+      const nodeWidth = (cumulative / tsRange) * zoomedWidth * xScale;
+      if (nodeWidth < 0.5) continue;
+
+      const ts = tsCol != null ? Number(tsCol.get(row)) : 0;
+      const x = ((ts - Number(tsBounds[0])) / tsRange) * zoomedWidth * xScale;
+      const y = (depth - 1) * RowHeight * yScale;
+      const h = Math.max(1, RowHeight * yScale);
+
+      // Get color using same logic as useNodeColor
+      const colorAttribute =
+        colorBy === 'filename'
+          ? arrowToString(filenameCol?.get(row))
+          : colorBy === 'binary'
+          ? 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,
+  ]);
+
+  const isZoomed = zoomedWidth > width;
+  const sliderWidth = Math.max(20, (width / zoomedWidth) * width);
+  const sliderLeft = Math.min((scrollLeft / zoomedWidth) * width, width - sliderWidth);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      const rect = containerElRef.current?.getBoundingClientRect();
+      if (rect == null) return;
+
+      const clickX = e.clientX - rect.left;
+
+      // Check if clicking inside the slider
+      if (clickX >= sliderLeft && clickX <= sliderLeft + sliderWidth) {
+        // Start dragging
+        isDragging.current = true;
+        dragStartX.current = e.clientX;
+        dragStartScrollLeft.current = scrollLeft;
+      } else {
+        // Click-to-jump: center viewport at click position
+        const targetCenter = (clickX / width) * zoomedWidth;
+        const containerWidth = containerRef.current?.clientWidth ?? width;
+        const newScrollLeft = targetCenter - containerWidth / 2;
+        if (containerRef.current != null) {
+          containerRef.current.scrollLeft = Math.max(
+            0,
+            Math.min(newScrollLeft, zoomedWidth - containerWidth)
+          );
+        }
+        // Also start dragging from new position
+        isDragging.current = true;
+        dragStartX.current = e.clientX;
+        dragStartScrollLeft.current = containerRef.current?.scrollLeft ?? 0;
+      }
+
+      const handleMouseMove = (moveEvent: MouseEvent): void => {
+        if (!isDragging.current) return;
+        const delta = moveEvent.clientX - dragStartX.current;
+        const scrollDelta = delta * (zoomedWidth / width);
+        const containerWidth = containerRef.current?.clientWidth ?? width;
+        if (containerRef.current != null) {
+          containerRef.current.scrollLeft = Math.max(
+            0,
+            Math.min(dragStartScrollLeft.current + scrollDelta, zoomedWidth - containerWidth)
+          );
+        }
+      };
+
+      const handleMouseUp = (): void => {
+        isDragging.current = false;
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    },
+    [sliderLeft, sliderWidth, scrollLeft, width, zoomedWidth, containerRef]
+  );
+
+  // Forward wheel events to the container so zoom (Ctrl+scroll) works on the minimap
+  useEffect(() => {
+    const el = containerElRef.current;
+    if (el == null) return;
+
+    const handleWheel = (e: WheelEvent): void => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      containerRef.current?.dispatchEvent(
+        new WheelEvent('wheel', {
+          deltaY: e.deltaY,
+          deltaX: e.deltaX,
+          ctrlKey: e.ctrlKey,
+          metaKey: e.metaKey,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          bubbles: true,
+        })
+      );
+    };
+
+    el.addEventListener('wheel', handleWheel, {passive: false});
+    return () => {
+      el.removeEventListener('wheel', handleWheel);
+    };
+  }, [containerRef]);
+
+  if (width <= 0) return null;
+
+  return (
+    <div
+      ref={containerElRef}
+      className="relative select-none"
+      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',
+        }}
+      />
+      {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)}}
+          />
+          {/* Viewport slider */}
+          <div
+            className="absolute top-0 bottom-0 border-x-2 border-gray-500"
+            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}}
+          />
+        </>
+      )}
+    </div>
+  );
+});

package/src/ProfileFlameGraph/FlameGraphArrow/ZoomControls.tsx

@@ -0,0 +1,67 @@
+// 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 React from 'react';
+
+import {Icon} from '@iconify/react';
+import {createPortal} from 'react-dom';
+
+interface ZoomControlsProps {
+  zoomLevel: number;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  resetZoom: () => void;
+  portalRef?: React.RefObject<HTMLDivElement | null>;
+}
+
+export const ZoomControls = ({
+  zoomLevel,
+  zoomIn,
+  zoomOut,
+  resetZoom,
+  portalRef,
+}: 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>
+  );
+
+  if (portalRef?.current != null) {
+    return createPortal(controls, portalRef.current);
+  }
+
+  return controls;
+};

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};
+};