Add a flow panel.

Author: mstange

src/actions/profile-view.ts

@@ -14,13 +14,18 @@ import {
   getPreviewSelection,
   getLocalTracksByPid,
   getThreads,
+  getStringTable,
   getLastNonShiftClick,
 } from 'firefox-profiler/selectors/profile';
 import {
   getThreadSelectors,
   getThreadSelectorsFromThreadsKey,
   selectedThreadSelectors,
 } from 'firefox-profiler/selectors/per-thread';
+import {
+  getProfileFlowInfo,
+  getFullMarkerListPerThread,
+} from 'firefox-profiler/selectors/flow';
 import {
   getAllCommittedRanges,
   getImplementationFilter,
@@ -73,11 +78,13 @@ import type {
   TableViewOptions,
   SelectionContext,
   BottomBoxInfo,
+  IndexIntoFlowTable,
 } from 'firefox-profiler/types';
 import {
   funcHasDirectRecursiveCall,
   funcHasRecursiveCall,
 } from '../profile-logic/transforms';
+import { computeMarkerFlows } from '../profile-logic/marker-data';
 import { changeStoredProfileNameInDb } from 'firefox-profiler/app-logic/uploaded-profiles-db';
 import type { TabSlug } from '../app-logic/tabs-handling';
 import type { CallNodeInfo } from '../profile-logic/call-node-info';
@@ -1641,6 +1648,37 @@ export function changeHoveredMarker(
   };
 }
 
+export function changeActiveFlows(activeFlows: IndexIntoFlowTable[]): Action {
+  return {
+    type: 'CHANGE_ACTIVE_FLOWS',
+    activeFlows,
+  };
+}
+
+export function activateFlowsForMarker(
+  threadIndex: ThreadIndex,
+  markerIndex: MarkerIndex
+): ThunkAction<void> {
+  console.log('yo');
+  return (dispatch, getState) => {
+    console.log('aha');
+    const profileFlowInfo = getProfileFlowInfo(getState());
+    const fullMarkerListPerThread = getFullMarkerListPerThread(getState());
+    const stringTable = getStringTable(getState());
+    console.log('aha2');
+    const flows =
+      computeMarkerFlows(
+        threadIndex,
+        markerIndex,
+        profileFlowInfo,
+        fullMarkerListPerThread,
+        stringTable
+      ) ?? [];
+    console.log({ flows });
+    dispatch(changeActiveFlows(flows));
+  };
+}
+
 /**
  * This action is used when the user right clicks a marker, and is especially
  * used to display its context menu.

src/app-logic/url-handling.ts

@@ -173,6 +173,7 @@ type BaseQuery = {
   timelineType: string;
   sourceView: string;
   assemblyView: string;
+  activeFlows: string;
 };
 
 type CallTreeQuery = BaseQuery & {
@@ -365,6 +366,9 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
       query = baseQuery as MarkersQueryShape;
       query.markerSearch =
         urlState.profileSpecific.markersSearchString || undefined;
+      query.activeFlows =
+        encodeUintArrayForUrlComponent(urlState.profileSpecific.activeFlows) ||
+        undefined;
       break;
     case 'network-chart':
       query = baseQuery as NetworkQueryShape;
@@ -492,6 +496,8 @@ export function stateFromLocation(
     implementation = query.implementation;
   }
 
+  const activeFlows = decodeUintArrayFromUrlComponent(query.activeFlows ?? '');
+
   const transforms: { [key: string]: Transform[] } = {};
   if (selectedThreadsKey !== null) {
     transforms[selectedThreadsKey] = parseTransforms(query.transforms);
@@ -562,6 +568,7 @@ export function stateFromLocation(
       transforms,
       sourceView,
       assemblyView,
+      activeFlows,
       isBottomBoxOpenPerPanel,
       timelineType: validateTimelineType(query.timelineType),
       showJsTracerSummary: query.summary === undefined ? false : true,

src/components/app/Details.tsx

@@ -12,7 +12,7 @@ import { LocalizedErrorBoundary } from './ErrorBoundary';
 import { ProfileCallTreeView } from 'firefox-profiler/components/calltree/ProfileCallTreeView';
 import { MarkerTable } from 'firefox-profiler/components/marker-table';
 import { StackChart } from 'firefox-profiler/components/stack-chart/';
-import { MarkerChart } from 'firefox-profiler/components/marker-chart/';
+import { MarkerChartTab } from 'firefox-profiler/components/marker-chart-tab/';
 import { NetworkChart } from 'firefox-profiler/components/network-chart/';
 import { FlameGraph } from 'firefox-profiler/components/flame-graph/';
 import { JsTracer } from 'firefox-profiler/components/js-tracer/';
@@ -124,7 +124,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
                 calltree: <ProfileCallTreeView />,
                 'flame-graph': <FlameGraph />,
                 'stack-chart': <StackChart />,
-                'marker-chart': <MarkerChart />,
+                'marker-chart': <MarkerChartTab />,
                 'marker-table': <MarkerTable />,
                 'network-chart': <NetworkChart />,
                 'js-tracer': <JsTracer />,

src/components/app/DetailsContainer.css

@@ -1,10 +1,10 @@
-.DetailsContainer .layout-pane > * {
+.DetailsContainer > .layout-pane > * {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
 }
 
-.DetailsContainer .layout-pane:not(.layout-pane-primary) {
+.DetailsContainer > .layout-pane:not(.layout-pane-primary) {
   max-width: 600px;
 }
 
@@ -15,12 +15,12 @@
   position: unset;
 }
 
-.DetailsContainer .layout-splitter {
+.DetailsContainer > .layout-splitter {
   border-top: 1px solid var(--grey-30);
   border-left: 1px solid var(--grey-30);
   background: var(--grey-10); /* Same background as sidebars */
 }
 
-.DetailsContainer .layout-splitter:hover {
+.DetailsContainer > .layout-splitter:hover {
   background: var(--grey-30); /* same as the border above */
 }