[deploy-preview] Prototype JIT optimizations for the sidebar

src/components/sidebar/CallTreeSidebar.js

@@ -20,7 +20,7 @@ import type {
   ConnectedProps,
   ExplicitConnectOptions,
 } from '../../utils/connect';
-import type { ThreadIndex } from '../../types/profile';
+import type { ThreadIndex, ProcessedOptimization } from '../../types/profile';
 import type {
   CallNodeTable,
   IndexIntoCallNodeTable,
@@ -79,7 +79,12 @@ function SidebarDetail({ label, children }: SidebarDetailProps) {
   return (
     <React.Fragment>
       <div className="sidebar-label">{label}:</div>
-      <div className="sidebar-value">{children}</div>
+      <div
+        className="sidebar-value"
+        title={typeof children === 'string' ? children : null}
+      >
+        {children}
+      </div>
     </React.Fragment>
   );
 }
@@ -164,11 +169,62 @@ type StateProps = {|
   +name: string,
   +lib: string,
   +timings: TimingsForPath,
+  +optimizationsList: Array<{
+    runningTime: number,
+    selfTime: number,
+    optimizations: ProcessedOptimization,
+  }>,
 |};
 
 type Props = ConnectedProps<{||}, StateProps, {||}>;
 
 class CallTreeSidebar extends React.PureComponent<Props> {
+  renderOptimizations() {
+    const { optimizationsList } = this.props;
+    if (optimizationsList.length === 0) {
+      return (
+        <div className="sidebarOptimizations">
+          <h3 className="sidebarOptimizationsTitle">JIT Optimizations</h3>
+          <div>No optimizations</div>
+        </div>
+      );
+    }
+    return optimizationsList.map(
+      ({ selfTime, runningTime, optimizations }, index) => (
+        <div className="sidebarOptimizations" key={index}>
+          <h3 className="sidebarOptimizationsTitle">
+            JIT Optimizations Frame {index + 1}
+          </h3>
+          <SidebarDetail label="Self time">{selfTime}ms</SidebarDetail>
+          <SidebarDetail label="Running time">{runningTime}ms</SidebarDetail>
+          {optimizations.types.length === 0 ? null : <h3>Types</h3>}
+          {optimizations.types.map(({ site, mirType, typeset }, index) => (
+            <React.Fragment key={index}>
+              <SidebarDetail label="Site">{site}</SidebarDetail>
+              <SidebarDetail label="MIRType">{mirType}</SidebarDetail>
+              {typeset.map(({ keyedBy, name, location, line }, index) => (
+                <React.Fragment key={index}>
+                  <h3>Typeset</h3>
+                  <SidebarDetail label="Keyed">{keyedBy}</SidebarDetail>
+                  <SidebarDetail label="Name">{name}</SidebarDetail>
+                  <SidebarDetail label="Location">{location}</SidebarDetail>
+                  <SidebarDetail label="Line">{line}</SidebarDetail>
+                </React.Fragment>
+              ))}
+            </React.Fragment>
+          ))}
+          {optimizations.attempts.length === 0 ? null : <h3>Attempts</h3>}
+          {optimizations.attempts.map(({ strategy, outcome }, index) => (
+            <React.Fragment key={index}>
+              <SidebarDetail label="Strategy">{strategy}</SidebarDetail>
+              <SidebarDetail label="Outcome">{outcome}</SidebarDetail>
+            </React.Fragment>
+          ))}
+        </div>
+      )
+    );
+  }
+
   render() {
     const { selectedNodeIndex, name, lib, timings } = this.props;
     const {
@@ -210,6 +266,7 @@ class CallTreeSidebar extends React.PureComponent<Props> {
             />
           ) : null}
         </header>
+        {this.renderOptimizations()}
         <h3 className="sidebar-title2">This selected call node</h3>
         <SidebarDetail label="Running Time">
           {totalTime.value}ms ({totalTimePercent}%)
@@ -271,6 +328,9 @@ const options: ExplicitConnectOptions<{||}, StateProps, {||}> = {
     name: getFunctionName(selectedNodeSelectors.getName(state)),
     lib: selectedNodeSelectors.getLib(state),
     timings: selectedNodeSelectors.getTimingsForSidebar(state),
+    optimizationsList: selectedNodeSelectors.getJitOptimizationsForSidebar(
+      state
+    ),
   }),
   component: CallTreeSidebar,
 };

src/components/sidebar/sidebar.css

@@ -70,10 +70,57 @@
 .sidebar-label {
   color: var(--grey-50);
   white-space: nowrap;
-  text-align: right;
 }
 
 .sidebar-value {
   white-space: nowrap;
-  text-align: right;
+}
+
+.sidebarOptimizations {
+  border: 1px solid #aaf;
+  padding: 10px;
+}
+
+.sidebarOptimizationsTitle {
+  grid-column-start: span 2;
+}
+
+.sidebarOptimizations {
+  padding: 1em;
+  margin-bottom: 1em;
+
+  font-size: 11px;
+  background: #fff;
+  border: 1px solid var(--grey-30);
+
+  display: grid;
+  grid-column-start: span 2;
+  grid-template-columns: 75px 1fr;
+  grid-gap: 2px 5px;
+  align-content: start; /* the grid isn't vertically stretched */
+
+  line-height: 1.5;
+}
+
+.sidebarOptimizations h1,
+.sidebarOptimizations h2,
+.sidebarOptimizations h3,
+.sidebarOptimizations h4,
+.sidebarOptimizations h5 {
+  grid-column-start: span 2;
+}
+
+.sidebarOptimizationsTitle:first-child {
+  margin-top: 0;
+}
+
+.sidebarOptimizations h3 {
+  margin-bottom: 0;
+  margin-top: 0.3em;
+}
+
+.sidebarOptimizations .sidebar-label,
+.sidebarOptimizations .sidebar-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

src/profile-logic/profile-data.js

@@ -21,6 +21,8 @@ import type {
   IndexIntoMarkersTable,
   IndexIntoStackTable,
   ThreadIndex,
+  UnprocessedOptimization,
+  ProcessedOptimization,
 } from '../types/profile';
 import type {
   CallNodeInfo,
@@ -1636,3 +1638,117 @@ export function getOriginAnnotationForFunc(
 
   return '';
 }
+
+function _applySchema({ data, schema }) {
+  return data.map(tuple => {
+    const obj = {};
+    for (const key in schema) {
+      if (schema.hasOwnProperty(key)) {
+        obj[key] = tuple[schema[key]];
+      }
+    }
+    return obj;
+  });
+}
+
+// TODO - This function is making it convenient to work with this data, perhaps we should
+// only process out the schema information, and leave the string indexes. This stuff
+// should go in the processing step anyway.
+export function getProcessedOptimizations(
+  stringTable: UniqueStringArray,
+  optimization: UnprocessedOptimization | null
+): ProcessedOptimization | null {
+  if (optimization === null) {
+    return null;
+  }
+  const { types, attempts, line, column } = optimization;
+  const typesProcessed = types.map(entry => {
+    return {
+      mirType: stringTable.getString(entry.mirType),
+      site: stringTable.getString(entry.site),
+      typeset: entry.typeset
+        ? entry.typeset.map(typeset => ({
+            keyedBy: stringTable.getString(typeset.keyedBy),
+            location: typeset.location
+              ? stringTable.getString(typeset.location)
+              : '',
+            name: typeset.name ? stringTable.getString(typeset.name) : '',
+            line: typeset.line,
+          }))
+        : [],
+    };
+  });
+  return {
+    types: typesProcessed,
+    attempts: _applySchema(attempts).map(entry => ({
+      strategy: stringTable.getString(entry.strategy),
+      outcome: stringTable.getString(entry.outcome),
+    })),
+    line,
+    column,
+  };
+}
+
+export function getJitOptimizationsAtCallNode(
+  thread: Thread,
+  callNodeIndex: IndexIntoCallNodeTable | null,
+  interval: Milliseconds,
+  { stackIndexToCallNodeIndex }: CallNodeInfo
+): Array<{
+  selfTime: number,
+  runningTime: number,
+  optimizations: ProcessedOptimization,
+}> {
+  if (callNodeIndex === null) {
+    return [];
+  }
+  const stacks = [];
+  for (
+    let stackIndex = 0;
+    stackIndex < stackIndexToCallNodeIndex.length;
+    stackIndex++
+  ) {
+    if (stackIndexToCallNodeIndex[stackIndex] === callNodeIndex) {
+      stacks.push(stackIndex);
+    }
+  }
+  const results = [];
+  for (const stackIndex of stacks) {
+    const frameIndex = thread.stackTable.frame[stackIndex];
+    const optimizations = getProcessedOptimizations(
+      thread.stringTable,
+      // TODO Make this any, since it's not properly typed.
+      (thread.frameTable.optimizations[frameIndex]: any)
+    );
+    if (optimizations === null) {
+      continue;
+    }
+    let selfTime = 0;
+    let runningTime = 0;
+    const isChildOfStack = new Set([stackIndex]);
+    for (let i = stackIndex + 1; i < thread.stackTable.length; i++) {
+      if (isChildOfStack.has(thread.stackTable.prefix[i])) {
+        isChildOfStack.add(i);
+      }
+    }
+    for (
+      let sampleIndex = 0;
+      sampleIndex < thread.samples.length;
+      sampleIndex++
+    ) {
+      // TODO - This feels like a O(n^2) problem.
+      if (thread.samples.stack[sampleIndex] === stackIndex) {
+        selfTime += interval;
+      }
+      if (isChildOfStack.has(thread.samples.stack[sampleIndex])) {
+        runningTime += interval;
+      }
+    }
+    results.push({
+      selfTime,
+      runningTime,
+      optimizations,
+    });
+  }
+  return results;
+}

src/reducers/app.js

@@ -79,7 +79,7 @@ function isSidebarOpenPerPanel(
 ): IsSidebarOpenPerPanelState {
   if (state === undefined) {
     state = {};
-    tabSlugs.forEach(tabSlug => (state[tabSlug] = false));
+    tabSlugs.forEach(tabSlug => (state[tabSlug] = true));
   }
 
   switch (action.type) {

src/reducers/profile-view.js

@@ -32,6 +32,7 @@ import type {
   SamplesTable,
   MarkersTable,
   Pid,
+  ProcessedOptimization,
 } from '../types/profile';
 import type {
   TracingMarker,
@@ -1113,6 +1114,11 @@ export type SelectorsForNode = {
   getIsJS: State => boolean,
   getLib: State => string,
   getTimingsForSidebar: State => TimingsForPath,
+  getJitOptimizationsForSidebar: State => Array<{
+    selfTime: number,
+    runningTime: number,
+    optimizations: ProcessedOptimization,
+  }>,
 };
 
 export const selectedNodeSelectors: SelectorsForNode = (() => {
@@ -1182,10 +1188,19 @@ export const selectedNodeSelectors: SelectorsForNode = (() => {
     }
   );
 
+  const getJitOptimizationsForSidebar = createSelector(
+    selectedThreadSelectors.getPreviewFilteredThread,
+    selectedThreadSelectors.getSelectedCallNodeIndex,
+    getProfileInterval,
+    selectedThreadSelectors.getCallNodeInfo,
+    ProfileData.getJitOptimizationsAtCallNode
+  );
+
   return {
     getName,
     getIsJS,
     getLib,
     getTimingsForSidebar,
+    getJitOptimizationsForSidebar,
   };
 })();