Fix performance issues for the caller/callee flamegraphs in the sandw…

…ich view (#296)

This fixes two unrelated problems which together caused performance issues in the sandwich view & made hover tooltips appear to be broken.

The first issue was caused by continuously priming the `requestAnimationFrame` loop when it should be a no-op, and the second issue was caused by using different cache keys when trying to access a memoized value in the caller & callee flamegraph components. This resulted in thrash, and especially bad performance because the cache miss was resulting in us re-allocating the WebGL framebuffer on every frame, which is unsurprisingly quite slow.

Fixes #212 
Fixes #155 
Fixes #74 (though this was maybe already fixed)

src/store/getters.ts

@@ -40,10 +40,6 @@ export const getRowAtlas = memoizeByReference((canvasContext: CanvasContext) =>
   )
 })
 
-export const getProfileWithRecursionFlattened = memoizeByReference((profile: Profile) =>
-  profile.getProfileWithRecursionFlattened(),
-)
-
 export const getProfileToView = memoizeByShallowEquality(
   ({profile, flattenRecursion}: {profile: Profile; flattenRecursion: boolean}): Profile => {
     return flattenRecursion ? profile.getProfileWithRecursionFlattened() : profile

src/views/flamechart-pan-zoom-view.tsx

@@ -47,7 +47,7 @@ export interface FlamechartPanZoomViewProps {
   setConfigSpaceViewportRect: (rect: Rect) => void
 
   logicalSpaceViewportSize: Vec2
-  setLogicalSpaceViewportBounds: (size: Vec2) => void
+  setLogicalSpaceViewportSize: (size: Vec2) => void
 }
 
 export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps, {}> {
@@ -396,7 +396,11 @@ export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps,
         ),
       )
     }
-    this.props.setLogicalSpaceViewportBounds(new Vec2(width, height))
+
+    const newSize = new Vec2(width, height)
+    if (!newSize.equals(logicalSpaceViewportSize)) {
+      this.props.setLogicalSpaceViewportSize(newSize)
+    }
   }
 
   onWindowResize = () => {

src/views/flamechart-view.tsx

@@ -113,7 +113,7 @@ export class FlamechartView extends StatelessComponent<FlamechartViewProps> {
           configSpaceViewportRect={this.props.configSpaceViewportRect}
           setConfigSpaceViewportRect={this.setConfigSpaceViewportRect}
           logicalSpaceViewportSize={this.props.logicalSpaceViewportSize}
-          setLogicalSpaceViewportBounds={this.setLogicalSpaceViewportSize}
+          setLogicalSpaceViewportSize={this.setLogicalSpaceViewportSize}
         />
         {this.renderTooltip()}
         {this.props.selectedNode && (

src/views/flamechart-wrapper.tsx

@@ -83,7 +83,7 @@ export class FlamechartWrapper extends StatelessComponent<FlamechartViewProps> {
           canvasContext={this.props.canvasContext}
           renderInverted={this.props.renderInverted}
           logicalSpaceViewportSize={this.props.logicalSpaceViewportSize}
-          setLogicalSpaceViewportBounds={this.setLogicalSpaceViewportSize}
+          setLogicalSpaceViewportSize={this.setLogicalSpaceViewportSize}
         />
         {this.renderTooltip()}
       </div>

src/views/inverted-caller-flamegraph-view.tsx

@@ -10,7 +10,6 @@ import {
   getCanvasContext,
   createGetColorBucketForFrame,
   createGetCSSColorForFrame,
-  getProfileWithRecursionFlattened,
   getFrameToColorBucket,
 } from '../store/getters'
 import {FlamechartID} from '../store/flamechart-view-state'
@@ -65,8 +64,6 @@ export const InvertedCallerFlamegraphView = memo((ownProps: FlamechartViewContai
   if (!callerCallee) throw new Error('callerCallee missing')
   const {selectedFrame} = callerCallee
 
-  profile = flattenRecursion ? getProfileWithRecursionFlattened(profile) : profile
-
   const frameToColorBucket = getFrameToColorBucket(profile)
   const getColorBucketForFrame = createGetColorBucketForFrame(frameToColorBucket)
   const getCSSColorForFrame = createGetCSSColorForFrame(frameToColorBucket)