[deploy preview] Experimental UI for flows

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';
@@ -903,6 +910,53 @@ export function showProvidedTracks(
   };
 }
 
+export function showProvidedThreads(
+  threadsToShow: Set<ThreadIndex>
+): ThunkAction<void> {
+  return (dispatch, getState) => {
+    const globalTracks = getGlobalTracks(getState());
+    const localTracksByPid = getLocalTracksByPid(getState());
+
+    const globalTracksToShow: Set<TrackIndex> = new Set();
+    const localTracksByPidToShow: Map<Pid, Set<TrackIndex>> = new Map();
+
+    for (const [globalTrackIndex, globalTrack] of globalTracks.entries()) {
+      if (globalTrack.type !== 'process') {
+        continue;
+      }
+      const { mainThreadIndex, pid } = globalTrack;
+      if (mainThreadIndex !== null && threadsToShow.has(mainThreadIndex)) {
+        globalTracksToShow.add(globalTrackIndex);
+      }
+      const localTracks = localTracksByPid.get(pid);
+      if (localTracks === undefined) {
+        continue;
+      }
+
+      for (const [localTrackIndex, localTrack] of localTracks.entries()) {
+        if (localTrack.type !== 'thread') {
+          continue;
+        }
+        if (threadsToShow.has(localTrack.threadIndex)) {
+          const localTracksToShow = localTracksByPidToShow.get(pid);
+          if (localTracksToShow === undefined) {
+            localTracksByPidToShow.set(pid, new Set([localTrackIndex]));
+          } else {
+            localTracksToShow.add(localTrackIndex);
+          }
+          globalTracksToShow.add(globalTrackIndex);
+        }
+      }
+    }
+
+    dispatch({
+      type: 'SHOW_PROVIDED_TRACKS',
+      globalTracksToShow,
+      localTracksByPidToShow,
+    });
+  };
+}
+
 /**
  * This action makes the tracks that are provided hidden.
  */
@@ -1594,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/constants.ts

@@ -121,7 +121,7 @@ export const PROFILER_SERVER_ORIGIN = 'https://api.profiler.firefox.com';
 // [1] https://github.com/mstange/profiler-symbol-server/
 
 // This is the default server.
-export const SYMBOL_SERVER_URL = 'https://symbolication.services.mozilla.com';
+export const SYMBOL_SERVER_URL = 'https://mozilla.symbols.samplyprofiler.com';
 
 // See the MarkerPhase type for more information.
 export const INSTANT: MarkerPhase = 0;

src/app-logic/url-handling.ts

@@ -174,6 +174,7 @@ type BaseQuery = {
   timelineType: string;
   sourceViewIndex: number;
   assemblyView: string;
+  activeFlows: string;
 };
 
 type CallTreeQuery = BaseQuery & {
@@ -366,6 +367,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;
@@ -493,6 +497,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);
@@ -563,6 +569,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 */
 }