feat: invert call stack in flame graph to render as icicle graph

src/actions/profile-view.ts

@@ -1696,6 +1696,7 @@ export function changeInvertCallstack(
     dispatch({
       type: 'CHANGE_INVERT_CALLSTACK',
       invertCallstack,
+      selectedTab: getSelectedTab(getState()),
       selectedThreadIndexes: getSelectedThreadIndexes(getState()),
       newSelectedCallNodePath,
     });

src/app-logic/url-handling.ts

@@ -184,6 +184,7 @@ type BaseQuery = {
 type CallTreeQuery = BaseQuery & {
   search: string; // "js::RunScript"
   invertCallstack: null | undefined;
+  invertFlameGraph: null | undefined;
   hideIdleSamples: null | undefined;
   ctSummary: string;
 };
@@ -201,6 +202,7 @@ type NetworkQuery = BaseQuery & {
 type StackChartQuery = BaseQuery & {
   search: string; // "js::RunScript"
   invertCallstack: null | undefined;
+  invertFlameGraph: null | undefined;
   hideIdleSamples: null | undefined;
   showUserTimings: null | undefined;
   sameWidths: null | undefined;
@@ -216,6 +218,7 @@ type Query = BaseQuery & {
   // CallTree/StackChart specific
   search?: string;
   invertCallstack?: null | undefined;
+  invertFlameGraph?: null | undefined;
   hideIdleSamples?: null | undefined;
   ctSummary?: string;
   transforms?: string;
@@ -342,7 +345,10 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
       query = baseQuery as CallTreeQueryShape;
 
       query.search = urlState.profileSpecific.callTreeSearchString || undefined;
-      query.invertCallstack = urlState.profileSpecific.invertCallstack
+      query.invertCallstack = urlState.profileSpecific.invertCallTree
+        ? null
+        : undefined;
+      query.invertFlameGraph = urlState.profileSpecific.invertFlameGraph
         ? null
         : undefined;
       // The URL param is inverted (`hideIdleSamples`) so the default-on state
@@ -605,7 +611,8 @@ export function stateFromLocation(
       lastSelectedCallTreeSummaryStrategy: toValidCallTreeSummaryStrategy(
         query.ctSummary || undefined
       ),
-      invertCallstack: query.invertCallstack === undefined ? false : true,
+      invertCallTree: query.invertCallstack === undefined ? false : true,
+      invertFlameGraph: query.invertFlameGraph === undefined ? false : true,
       includeIdleSamples: query.hideIdleSamples === undefined,
       showUserTimings: query.showUserTimings === undefined ? false : true,
       stackChartSameWidths: query.sameWidths === undefined ? false : true,

src/components/flame-graph/Canvas.tsx

@@ -18,6 +18,7 @@ import {
 } from 'firefox-profiler/utils/format-numbers';
 import { TooltipCallNode } from 'firefox-profiler/components/tooltip/CallNode';
 import { getTimingsForCallNodeIndex } from 'firefox-profiler/profile-logic/profile-data';
+import { getSelfAndTotalForCallNode } from 'firefox-profiler/profile-logic/call-tree';
 import MixedTupleMap from 'mixedtuplemap';
 
 import type {
@@ -49,7 +50,7 @@ import type {
 
 import type {
   CallTree,
-  CallTreeTimingsNonInverted,
+  CallTreeTimings,
 } from 'firefox-profiler/profile-logic/call-tree';
 
 export type OwnProps = {
@@ -74,7 +75,7 @@ export type OwnProps = {
   readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
   readonly ctssSamples: SamplesLikeTable;
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
-  readonly tracedTiming: CallTreeTimingsNonInverted | null;
+  readonly tracedTiming: CallTreeTimings | null;
   readonly displayStackType: boolean;
 };
 
@@ -397,11 +398,12 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
 
     let percentage = formatPercent(ratio);
     if (tracedTiming) {
-      const time = formatCallNodeNumberWithUnit(
-        'tracing-ms',
-        false,
-        tracedTiming.total[callNodeIndex]
+      const { total } = getSelfAndTotalForCallNode(
+        callNodeIndex,
+        callNodeInfo,
+        tracedTiming
       );
+      const time = formatCallNodeNumberWithUnit('tracing-ms', false, total);
       percentage = `${time} (${percentage})`;
     }
 

src/components/flame-graph/ConnectedFlameGraph.tsx

@@ -16,7 +16,10 @@ import {
   getProfileUsesMultipleStackTypes,
 } from 'firefox-profiler/selectors/profile';
 import { selectedThreadSelectors } from 'firefox-profiler/selectors/per-thread';
-import { getSelectedThreadsKey } from '../../selectors/url-state';
+import {
+  getInvertCallstack,
+  getSelectedThreadsKey,
+} from '../../selectors/url-state';
 import {
   changeSelectedCallNode,
   changeRightClickedCallNode,
@@ -56,7 +59,6 @@ type StateProps = {
   readonly thread: Thread;
   readonly weightType: WeightType;
   readonly innerWindowIDToPageMap: Map<InnerWindowID, Page> | null;
-  readonly maxStackDepthPlusOne: number;
   readonly timeRange: StartEndRange;
   readonly previewSelection: PreviewSelection | null;
   readonly flameGraphTiming: FlameGraphTiming;
@@ -68,6 +70,7 @@ type StateProps = {
   readonly scrollToSelectionGeneration: number;
   readonly categories: CategoryList;
   readonly interval: Milliseconds;
+  readonly startsAtBottom: boolean;
   readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
   readonly ctssSamples: SamplesLikeTable;
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
@@ -139,7 +142,6 @@ class ConnectedFlameGraphImpl
     const {
       thread,
       threadsKey,
-      maxStackDepthPlusOne,
       flameGraphTiming,
       callTree,
       callNodeInfo,
@@ -151,6 +153,7 @@ class ConnectedFlameGraphImpl
       callTreeSummaryStrategy,
       categories,
       interval,
+      startsAtBottom,
       innerWindowIDToPageMap,
       weightType,
       ctssSamples,
@@ -165,7 +168,7 @@ class ConnectedFlameGraphImpl
         thread={thread}
         weightType={weightType}
         innerWindowIDToPageMap={innerWindowIDToPageMap}
-        maxStackDepthPlusOne={maxStackDepthPlusOne}
+        maxStackDepthPlusOne={flameGraphTiming.rowCount}
         timeRange={timeRange}
         previewSelection={previewSelection}
         flameGraphTiming={flameGraphTiming}
@@ -177,7 +180,7 @@ class ConnectedFlameGraphImpl
         scrollToSelectionGeneration={scrollToSelectionGeneration}
         categories={categories}
         interval={interval}
-        startsAtBottom={true}
+        startsAtBottom={startsAtBottom}
         callTreeSummaryStrategy={callTreeSummaryStrategy}
         ctssSamples={ctssSamples}
         ctssSampleCategoriesAndSubcategories={
@@ -203,10 +206,6 @@ export const ConnectedFlameGraph = explicitConnectWithForwardRef<
   mapStateToProps: (state) => ({
     thread: selectedThreadSelectors.getFilteredThread(state),
     weightType: selectedThreadSelectors.getWeightTypeForCallTree(state),
-    // Use the filtered call node max depth, rather than the preview filtered one, so
-    // that the viewport height is stable across preview selections.
-    maxStackDepthPlusOne:
-      selectedThreadSelectors.getFilteredCallNodeMaxDepthPlusOne(state),
     flameGraphTiming: selectedThreadSelectors.getFlameGraphTiming(state),
     callTree: selectedThreadSelectors.getCallTree(state),
     timeRange: getCommittedRange(state),
@@ -220,6 +219,7 @@ export const ConnectedFlameGraph = explicitConnectWithForwardRef<
       selectedThreadSelectors.getRightClickedCallNodeIndex(state),
     scrollToSelectionGeneration: getScrollToSelectionGeneration(state),
     interval: getProfileInterval(state),
+    startsAtBottom: !getInvertCallstack(state),
     callTreeSummaryStrategy:
       selectedThreadSelectors.getCallTreeSummaryStrategy(state),
     innerWindowIDToPageMap: getInnerWindowIDToPageMap(state),

src/components/flame-graph/FlameGraph.tsx

@@ -3,10 +3,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import * as React from 'react';
 
-import { FlameGraphCanvas } from './Canvas';
+import {
+  FlameGraphCanvas,
+  type OwnProps as FlameGraphCanvasProps,
+} from './Canvas';
 import { ContextMenuTrigger } from 'firefox-profiler/components/shared/ContextMenuTrigger';
-import { extractNonInvertedCallTreeTimings } from 'firefox-profiler/profile-logic/call-tree';
-import { ensureExists } from 'firefox-profiler/utils/types';
 
 import type {
   Thread,
@@ -288,19 +289,6 @@ export class FlameGraph
       onCallNodeEnterOrDoubleClick,
     } = this.props;
 
-    // Get the CallTreeTimingsNonInverted out of tracedTiming. We pass this
-    // along rather than the more generic CallTreeTimings type so that the
-    // FlameGraphCanvas component can operate on the more specialized type.
-    // (CallTreeTimingsNonInverted and CallTreeTimingsInverted are very
-    // different, and the flame graph is only used with non-inverted timings.)
-    const tracedTimingNonInverted =
-      tracedTiming !== null
-        ? ensureExists(
-            extractNonInvertedCallTreeTimings(tracedTiming),
-            'The flame graph should only ever see non-inverted timings, see UrlState.getInvertCallstack'
-          )
-        : null;
-
     const maxViewportHeight = maxStackDepthPlusOne * STACK_FRAME_HEIGHT;
 
     return (
@@ -349,7 +337,7 @@ export class FlameGraph
               startsAtBottom,
               ctssSamples,
               ctssSampleCategoriesAndSubcategories,
-              tracedTiming: tracedTimingNonInverted,
+              tracedTiming,
               displayStackType,
             }}
           />
@@ -359,10 +347,14 @@ export class FlameGraph
   }
 }
 
-function viewportNeedsUpdate() {
-  // By always returning false we prevent the viewport from being
+function viewportNeedsUpdate(
+  prevProps: FlameGraphCanvasProps,
+  nextProps: FlameGraphCanvasProps
+) {
+  // By returning false we prevent the viewport from being
   // reset and scrolled all the way to the bottom when doing
   // operations like changing the time selection or applying a
   // transform.
-  return false;
+  // We only reset the viewport if the layout direction changes.
+  return prevProps.startsAtBottom !== nextProps.startsAtBottom;
 }

src/components/flame-graph/index.tsx

@@ -40,7 +40,7 @@ class FlameGraphViewImpl extends React.PureComponent<Props> {
         role="tabpanel"
         aria-labelledby="flame-graph-tab-button"
       >
-        <StackSettings hideInvertCallstack={true} />
+        <StackSettings />
         <TransformNavigator />
         {isPreviewSelectionEmpty ? (
           <FlameGraphEmptyReasons />