refactor(trace-viewer): Use resource id instead of ordinal for resource hover

packages/trace-viewer/src/ui/networkTab.tsx

@@ -34,7 +34,6 @@ type NetworkTabModel = {
 };
 
 type RenderedEntry = {
-  ordinal: number,
   name: { name: string, url: string },
   method: string,
   status: { code: number, text: string },
@@ -67,15 +66,15 @@ export function useNetworkTabModel(model: TraceModel | undefined, selectedTime:
 export const NetworkTab: React.FunctionComponent<{
   boundaries: Boundaries,
   networkModel: NetworkTabModel,
-  onResourceHovered?: (ordinal: number | undefined) => void,
+  onResourceHovered?: (key: string | undefined) => void,
   sdkLanguage: Language,
 }> = ({ boundaries, networkModel, onResourceHovered, sdkLanguage }) => {
   const [sorting, setSorting] = React.useState<Sorting | undefined>(undefined);
   const [selectedResourceKey, setSelectedResourceKey] = React.useState<string | undefined>(undefined);
   const [filterState, setFilterState] = React.useState(defaultFilterState);
 
   const { renderedEntries } = React.useMemo(() => {
-    const renderedEntries = networkModel.resources.map((entry, i) => renderEntry(entry, boundaries, networkModel.contextIdMap, i)).filter(filterEntry(filterState));
+    const renderedEntries = networkModel.resources.map(entry => renderEntry(entry, boundaries, networkModel.contextIdMap)).filter(filterEntry(filterState));
     if (sorting)
       sort(renderedEntries, sorting);
     return { renderedEntries };
@@ -101,7 +100,7 @@ export const NetworkTab: React.FunctionComponent<{
     items={renderedEntries}
     selectedItem={visibleSelectedEntry}
     onSelected={item => setSelectedResourceKey(item.resource.id)}
-    onHighlighted={item => onResourceHovered?.(item?.ordinal)}
+    onHighlighted={item => onResourceHovered?.(item?.resource.id)}
     columns={visibleColumns(!!visibleSelectedEntry, renderedEntries)}
     columnTitle={columnTitle}
     columnWidths={columnWidths}
@@ -264,7 +263,7 @@ function hasMultipleContexts(renderedEntries: RenderedEntry[]): boolean {
   return false;
 }
 
-const renderEntry = (resource: ResourceEntry, boundaries: Boundaries, contextIdGenerator: ContextIdMap, ordinal: number): RenderedEntry => {
+const renderEntry = (resource: ResourceEntry, boundaries: Boundaries, contextIdGenerator: ContextIdMap): RenderedEntry => {
   const routeStatus = formatRouteStatus(resource);
   let resourceName: string;
   try {
@@ -283,7 +282,6 @@ const renderEntry = (resource: ResourceEntry, boundaries: Boundaries, contextIdG
     contentType = charset[1];
 
   return {
-    ordinal,
     name: { name: resourceName, url: resource.request.url },
     method: resource.request.method,
     status: { code: resource.response.status, text: resource.response.statusText },

packages/trace-viewer/src/ui/timeline.tsx

@@ -20,16 +20,15 @@ import * as React from 'react';
 import type { Boundaries } from './geometry';
 import { FilmStrip } from './filmStrip';
 import type { FilmStripPreviewPoint } from './filmStrip';
-import type { ActionTraceEventInContext, TraceModel } from '@isomorphic/trace/traceModel';
+import type { ActionTraceEventInContext, ResourceEntry, TraceModel } from '@isomorphic/trace/traceModel';
 import './timeline.css';
 import type { Language } from '@isomorphic/locatorGenerators';
-import type { Entry } from '@trace/har';
 import type { ConsoleEntry } from './consoleTab';
 import type { ActionGroup } from '@isomorphic/protocolFormatter';
 
 type TimelineBar = {
   action?: ActionTraceEventInContext;
-  resource?: Entry;
+  resourceKey?: string;
   consoleMessage?: ConsoleEntry;
   leftPosition: number;
   rightPosition: number;
@@ -42,16 +41,16 @@ type TimelineBar = {
 export const Timeline: React.FunctionComponent<{
   model: TraceModel | undefined,
   consoleEntries: ConsoleEntry[] | undefined,
-  networkResources: Entry[] | undefined,
+  networkResources: ResourceEntry[] | undefined,
   boundaries: Boundaries,
   highlightedAction: ActionTraceEventInContext | undefined,
-  highlightedResourceOrdinal: number | undefined,
+  highlightedResourceKey: string | undefined,
   highlightedConsoleEntryOrdinal: number | undefined,
   onSelected: (action: ActionTraceEventInContext) => void,
   selectedTime: Boundaries | undefined,
   setSelectedTime: (time: Boundaries | undefined) => void,
   sdkLanguage: Language,
-}> = ({ model, boundaries, consoleEntries, networkResources, onSelected, highlightedAction, highlightedResourceOrdinal, highlightedConsoleEntryOrdinal, selectedTime, setSelectedTime, sdkLanguage }) => {
+}> = ({ model, boundaries, consoleEntries, networkResources, onSelected, highlightedAction, highlightedResourceKey, highlightedConsoleEntryOrdinal, selectedTime, setSelectedTime, sdkLanguage }) => {
   const [measure, ref] = useMeasure<HTMLDivElement>();
   const [dragWindow, setDragWindow] = React.useState<{ startX: number, endX: number, pivot?: number, type: 'resize' | 'move' } | undefined>();
   const [previewPoint, setPreviewPoint] = React.useState<FilmStripPreviewPoint | undefined>();
@@ -90,7 +89,7 @@ export const Timeline: React.FunctionComponent<{
       const startTime = resource._monotonicTime!;
       const endTime = resource._monotonicTime! + resource.time;
       bars.push({
-        resource,
+        resourceKey: resource.id,
         leftTime: startTime,
         rightTime: endTime,
         leftPosition: timeToPosition(measure.width, boundaries, startTime),
@@ -119,14 +118,14 @@ export const Timeline: React.FunctionComponent<{
     for (const bar of bars) {
       if (highlightedAction)
         bar.active = bar.action === highlightedAction;
-      else if (highlightedResourceOrdinal !== undefined)
-        bar.active = bar.resource === networkResources?.[highlightedResourceOrdinal];
+      else if (highlightedResourceKey)
+        bar.active = bar.resourceKey === highlightedResourceKey;
       else if (highlightedConsoleEntryOrdinal !== undefined)
         bar.active = bar.consoleMessage === consoleEntries?.[highlightedConsoleEntryOrdinal];
       else
         bar.active = false;
     }
-  }, [bars, highlightedAction, highlightedResourceOrdinal, highlightedConsoleEntryOrdinal, consoleEntries, networkResources]);
+  }, [bars, highlightedAction, highlightedResourceKey, highlightedConsoleEntryOrdinal, consoleEntries]);
 
   const onMouseDown = React.useCallback((event: React.MouseEvent) => {
     setPreviewPoint(undefined);
@@ -259,7 +258,7 @@ export const Timeline: React.FunctionComponent<{
               return <div key={index}
                 className={clsx('timeline-bar',
                     bar.action && 'action',
-                    bar.resource && 'network',
+                    bar.resourceKey && 'network',
                     bar.consoleMessage && 'console-message',
                     bar.active && 'active',
                     bar.error && 'error')}
@@ -328,5 +327,5 @@ function positionToTime(clientWidth: number, boundaries: Boundaries, x: number):
 }
 
 function barTop(bar: TimelineBar): number {
-  return bar.resource ? 25 : 20;
+  return bar.resourceKey ? 25 : 20;
 }

packages/trace-viewer/src/ui/workbench.tsx

@@ -86,7 +86,7 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
   const [revealedErrorKey, setRevealedErrorKey] = usePartitionedState<string | undefined>('revealedErrorKey');
   const [highlightedConsoleMessageOrdinal, setHighlightedConsoleMessageOrdinal] = usePartitionedState<number | undefined>('highlightedConsoleMessageOrdinal');
   const [revealedAttachmentCallId, setRevealedAttachmentCallId] = usePartitionedState<{ callId: string } | undefined>('revealedAttachmentCallId');
-  const [highlightedResourceOrdinal, setHighlightedResourceOrdinal] = usePartitionedState<number | undefined>('highlightedResourceOrdinal');
+  const [highlightedResourceKey, setHighlightedResourceKey] = usePartitionedState<string | undefined>('highlightedResourceKey');
   const [treeState, setTreeState] = usePartitionedState<TreeState>('treeState', { expandedItems: new Map() });
 
   togglePartition(partition);
@@ -258,7 +258,7 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
     id: 'network',
     title: 'Network',
     count: networkModel.resources.length,
-    render: () => <NetworkTab boundaries={boundaries} networkModel={networkModel} onResourceHovered={setHighlightedResourceOrdinal} sdkLanguage={model?.sdkLanguage ?? 'javascript'} />
+    render: () => <NetworkTab boundaries={boundaries} networkModel={networkModel} onResourceHovered={setHighlightedResourceKey} sdkLanguage={model?.sdkLanguage ?? 'javascript'} />
   };
   const attachmentsTab: TabbedPaneTabModel = {
     id: 'attachments',
@@ -352,7 +352,7 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
       networkResources={networkModel.resources}
       boundaries={boundaries}
       highlightedAction={highlightedAction}
-      highlightedResourceOrdinal={highlightedResourceOrdinal}
+      highlightedResourceKey={highlightedResourceKey}
       highlightedConsoleEntryOrdinal={highlightedConsoleMessageOrdinal}
       onSelected={onActionSelected}
       sdkLanguage={sdkLanguage}