[deploy-preview] Include frame labels in JS implementation filtered threads

src/components/stack-chart/Canvas.js

@@ -40,10 +40,12 @@ import type {
 } from '../../profile-logic/stack-timing';
 import type { Viewport } from '../shared/chart/Viewport';
 import type { WrapFunctionInDispatch } from '../../utils/connect';
+import type { ImplementationFilter } from '../../types/actions';
 
 type OwnProps = {|
   +thread: Thread,
   +interval: Milliseconds,
+  +implementationFilter: ImplementationFilter,
   +rangeStart: Milliseconds,
   +rangeEnd: Milliseconds,
   +stackTimingByDepth: StackTimingByDepth,
@@ -146,6 +148,7 @@ class StackChartCanvas extends React.PureComponent<Props> {
       stackFrameHeight,
       selectedCallNodeIndex,
       categories,
+      implementationFilter,
       callNodeInfo: { callNodeTable },
       viewport: {
         containerWidth,
@@ -297,10 +300,24 @@ class StackChartCanvas extends React.PureComponent<Props> {
           // Look up information about this stack frame.
           const callNodeIndex = stackTiming.callNode[i];
           const funcIndex = callNodeTable.func[callNodeIndex];
-          const funcNameIndex = thread.funcTable.name[funcIndex];
-          const text = thread.stringTable.getString(funcNameIndex);
           const categoryIndex = callNodeTable.category[callNodeIndex];
+          const subCategoryIndex = callNodeTable.subcategory[callNodeIndex];
+          const isJS = thread.funcTable.isJS[funcIndex];
+          const relevantForJS = thread.funcTable.relevantForJS[funcIndex];
+          const funcNameIndex = thread.funcTable.name[funcIndex];
           const category = categories[categoryIndex];
+          const subcategory = category.subcategories[subCategoryIndex];
+
+          let text;
+          if (implementationFilter === 'js' && !relevantForJS && !isJS) {
+            if (subcategory === 'Other') {
+              text = category.name;
+            } else {
+              text = subcategory;
+            }
+          } else {
+            text = thread.stringTable.getString(funcNameIndex);
+          }
 
           const isHovered =
             hoveredItem &&

src/components/stack-chart/index.js

@@ -18,7 +18,10 @@ import {
   getCategories,
 } from '../../selectors/profile';
 import { selectedThreadSelectors } from '../../selectors/per-thread';
-import { getSelectedThreadIndex } from '../../selectors/url-state';
+import {
+  getSelectedThreadIndex,
+  getImplementationFilter,
+} from '../../selectors/url-state';
 import ContextMenuTrigger from '../shared/ContextMenuTrigger';
 import StackSettings from '../shared/StackSettings';
 import TransformNavigator from '../shared/TransformNavigator';
@@ -39,7 +42,10 @@ import type {
   UnitIntervalOfProfileRange,
 } from '../../types/units';
 import type { StackTimingByDepth } from '../../profile-logic/stack-timing';
-import type { PreviewSelection } from '../../types/actions';
+import type {
+  PreviewSelection,
+  ImplementationFilter,
+} from '../../types/actions';
 import type { ConnectedProps } from '../../utils/connect';
 
 require('./index.css');
@@ -48,6 +54,7 @@ const STACK_FRAME_HEIGHT = 16;
 
 type StateProps = {|
   +thread: Thread,
+  +implementationFilter: ImplementationFilter,
   +maxStackDepth: number,
   +stackTimingByDepth: StackTimingByDepth,
   +timeRange: { start: Milliseconds, end: Milliseconds },
@@ -135,6 +142,7 @@ class StackChartGraph extends React.PureComponent<Props> {
       categories,
       selectedCallNodeIndex,
       scrollToSelectionGeneration,
+      implementationFilter,
     } = this.props;
 
     const maxViewportHeight = maxStackDepth * STACK_FRAME_HEIGHT;
@@ -169,6 +177,7 @@ class StackChartGraph extends React.PureComponent<Props> {
               chartProps={{
                 interval,
                 thread,
+                implementationFilter,
                 stackTimingByDepth,
                 // $FlowFixMe Error introduced by upgrading to v0.96.0. See issue #1936.
                 updatePreviewSelection,
@@ -207,6 +216,7 @@ export default explicitConnect<{||}, StateProps, DispatchProps>({
       threadIndex: getSelectedThreadIndex(state),
       callNodeInfo: selectedThreadSelectors.getCallNodeInfo(state),
       categories: getCategories(state),
+      implementationFilter: getImplementationFilter(state),
       selectedCallNodeIndex: selectedThreadSelectors.getSelectedCallNodeIndex(
         state
       ),

src/components/tooltip/CallNode.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 
 import { getStackType } from '../../profile-logic/transforms';
-import { objectEntries } from '../../utils/flow';
+import { objectEntries, assertExhaustiveCheck } from '../../utils/flow';
 import { formatNumberDependingOnInterval } from '../../utils/format-numbers';
 import NodeIcon from '../shared/NodeIcon';
 import {
@@ -210,8 +210,11 @@ export class TooltipCallNode extends React.PureComponent<Props> {
           ? 'Unsymbolicated native'
           : 'Unsymbolicated or generated JIT instructions';
         break;
+      case 'label':
+        stackTypeLabel = 'Label';
+        break;
       default:
-        throw new Error(`Unknown stack type case "${stackType}".`);
+        throw assertExhaustiveCheck(stackType, 'Unhandled StackType.');
     }
 
     return (

src/profile-logic/profile-data.js

@@ -15,6 +15,7 @@ import type {
   IndexIntoCategoryList,
   IndexIntoSubcategoryListForCategory,
   IndexIntoFuncTable,
+  IndexIntoFrameTable,
   IndexIntoSamplesTable,
   IndexIntoStackTable,
   ThreadIndex,
@@ -667,11 +668,11 @@ export function filterThreadByImplementation(
   implementation: string,
   defaultCategory: IndexIntoCategoryList
 ): Thread {
-  const { funcTable, stringTable } = thread;
+  const { funcTable, frameTable, stringTable } = thread;
 
   switch (implementation) {
     case 'cpp':
-      return _filterThreadByFunc(
+      return _filterThreadByFuncAndFrame(
         thread,
         funcIndex => {
           // Return quickly if this is a JS frame.
@@ -693,23 +694,25 @@ export function filterThreadByImplementation(
         defaultCategory
       );
     case 'js':
-      return _filterThreadByFunc(
+      return _filterThreadByFuncAndFrame(
         thread,
-        funcIndex => {
-          return (
-            funcTable.isJS[funcIndex] || funcTable.relevantForJS[funcIndex]
-          );
-        },
+        (funcIndex, frameIndex) =>
+          // This is clearly a JS frame, keep it.
+          funcTable.isJS[funcIndex] ||
+          // This function is relevant for JS.
+          funcTable.relevantForJS[funcIndex] ||
+          // This is a label frame with a category. Preserve it.
+          frameTable.category[frameIndex] !== null,
         defaultCategory
       );
     default:
       return thread;
   }
 }
 
-function _filterThreadByFunc(
+function _filterThreadByFuncAndFrame(
   thread: Thread,
-  filter: IndexIntoFuncTable => boolean,
+  filter: (IndexIntoFuncTable, IndexIntoFrameTable) => boolean,
   defaultCategory: IndexIntoCallNodeTable
 ): Thread {
   return timeCode('filterThread', () => {
@@ -736,7 +739,7 @@ function _filterThreadByFunc(
         const prefixNewStack = convertStack(stackTable.prefix[stackIndex]);
         const frameIndex = stackTable.frame[stackIndex];
         const funcIndex = frameTable.func[frameIndex];
-        if (filter(funcIndex)) {
+        if (filter(funcIndex, frameIndex)) {
           const prefixStackAndFrameIndex =
             (prefixNewStack === null ? -1 : prefixNewStack) * frameCount +
             frameIndex;

src/profile-logic/transforms.js

@@ -1374,7 +1374,7 @@ export function getStackType(
   funcIndex: IndexIntoFuncTable
 ): StackType {
   if (FUNC_MATCHES.cpp(thread, funcIndex)) {
-    return 'native';
+    return thread.funcTable.address[funcIndex] === -1 ? 'label' : 'native';
   } else if (FUNC_MATCHES.js(thread, funcIndex)) {
     return 'js';
   }

src/types/profile-derived.js

@@ -153,7 +153,7 @@ export type AccumulatedCounterSamples = {|
   +accumulatedCounts: number[],
 |};
 
-export type StackType = 'js' | 'native' | 'unsymbolicated';
+export type StackType = 'js' | 'native' | 'unsymbolicated' | 'label';
 
 export type GlobalTrack =
   | {| +type: 'process', +pid: Pid, +mainThreadIndex: ThreadIndex | null |}