scroll correctly for reverse flamegraphs

commit_hash:230e3533185c184110a3f2608ab3caec9fe8c98a

Author: gearoffortune

perforator/ui/packages/flamegraph/lib/components/Flamegraph/Flamegraph.tsx

@@ -103,7 +103,7 @@ export const Flamegraph: React.FC<FlamegraphProps> = ({
     const isDiffSwitchingSupported = profileData.meta.version > 1;
     const [shouldTrim, setShouldTrim] = React.useState(false);
     const shouldOmitHighlight = React.useRef(true);
-
+    const shouldScroll = React.useRef(false);
     const setQuery = React.useCallback<SetStateFromQuery<QueryKeys>>((q) => {
         outerSetQuery(q);
         shouldOmitHighlight.current = true;
@@ -187,6 +187,7 @@ export const Flamegraph: React.FC<FlamegraphProps> = ({
                 // by default, we show highlight, e.g. after clicks
                 // and don't show it only on first render
                 disableHighlightRender: shouldOmitHighlight.current,
+                shouldScroll: shouldScroll.current,
                 scrollParent: useSelfAsScrollParent ? flamegraphContainer.current : document.documentElement,
             };
 
@@ -197,6 +198,9 @@ export const Flamegraph: React.FC<FlamegraphProps> = ({
                     shouldOmitHighlight.current = false;
                 }
 
+                if (!shouldScroll.current) {
+                    shouldScroll.current = true;
+                }
                 return () => {
                     destructor();
                     shouldOmitHighlight.current = true;

perforator/ui/packages/flamegraph/lib/renderer.ts

@@ -63,6 +63,7 @@ export type RenderFlamegraphOptions = {
     reverse: boolean;
     keepOnlyFound: boolean;
     disableHighlightRender: boolean;
+    shouldScroll: boolean;
     scrollParent: HTMLElement;
 }
 
@@ -481,7 +482,20 @@ export const renderFlamegraph: RenderFlamegraphType = (
     flamegraphContainer,
     profileData,
     fg,
-    { getState, setState, theme, isDiff, onFinishRendering, shortenFrameTexts, excludeSearchPattern, searchPattern, reverse, keepOnlyFound, disableHighlightRender, scrollParent },
+    {
+        getState, setState,
+        theme,
+        isDiff,
+        onFinishRendering,
+        shortenFrameTexts,
+        excludeSearchPattern,
+        searchPattern,
+        reverse,
+        keepOnlyFound,
+        disableHighlightRender,
+        scrollParent,
+        shouldScroll,
+    },
 ) => {
     const shouldSwapDiff = getState('flameBase') === 'diff';
 
@@ -902,7 +916,7 @@ export const renderFlamegraph: RenderFlamegraphType = (
 
     {
         const layerCount = fg.prerenderOffsets(canvasWidth!, [h, pos], omittedStacks, foundCoords, shouldSwapDiff);
-        initCanvasVertical(layerCount, !reverse && !disableHighlightRender, scrollParent);
+        initCanvasVertical(layerCount, !reverse && shouldScroll, scrollParent);
     }
     render({ pattern: searchPattern });
     if (!disableHighlightRender) {