diff --git a/packages/trace-viewer/src/ui/networkTab.tsx b/packages/trace-viewer/src/ui/networkTab.tsx index ecab8cacf0..311af733a9 100644 --- a/packages/trace-viewer/src/ui/networkTab.tsx +++ b/packages/trace-viewer/src/ui/networkTab.tsx @@ -76,7 +76,7 @@ export const NetworkTab: React.FunctionComponent<{ return { renderedEntries }; }, [networkModel.resources, networkModel.contextIdMap, sorting, boundaries]); - const [widths, setWidths] = React.useState>(() => { + const [columnWidths, setColumnWidths] = React.useState>(() => { return new Map(allColumns().map(column => [column, columnWidth(column)])); }); @@ -91,8 +91,8 @@ export const NetworkTab: React.FunctionComponent<{ onHighlighted={item => onEntryHovered(item?.resource)} columns={visibleColumns(!!selectedEntry, renderedEntries)} columnTitle={columnTitle} - columnWidths={widths} - setColumnWidths={setWidths} + columnWidths={columnWidths} + setColumnWidths={setColumnWidths} isError={item => item.status.code >= 400} isInfo={item => !!item.route} render={(item, column) => renderCell(item, column)} @@ -101,7 +101,7 @@ export const NetworkTab: React.FunctionComponent<{ />; return <> {!selectedEntry && grid} - {selectedEntry && + {selectedEntry && setSelectedEntry(undefined)} /> {grid} } @@ -145,8 +145,12 @@ const columnWidth = (column: ColumnName) => { }; function visibleColumns(entrySelected: boolean, renderedEntries: RenderedEntry[]): (keyof RenderedEntry)[] { - if (entrySelected) - return ['name']; + if (entrySelected) { + const columns: (keyof RenderedEntry)[] = ['name']; + if (hasMultipleContexts(renderedEntries)) + columns.unshift('contextId'); + return columns; + } let columns: (keyof RenderedEntry)[] = allColumns(); if (!hasMultipleContexts(renderedEntries)) columns = columns.filter(name => name !== 'contextId'); diff --git a/packages/web/src/components/gridView.tsx b/packages/web/src/components/gridView.tsx index d5f0f905fb..43a40d55b4 100644 --- a/packages/web/src/components/gridView.tsx +++ b/packages/web/src/components/gridView.tsx @@ -49,7 +49,7 @@ export function GridView(model: GridViewProps) { setOffsets(offsets); }, [model.columns, model.columnWidths]); - function updateWidths(offsets: number[]) { + function updateColumnWidths(offsets: number[]) { const widths = new Map(model.columnWidths.entries()); for (let i = 0; i < offsets.length; ++i) { const width = offsets[i] - (offsets[i - 1] || 0); @@ -67,7 +67,7 @@ export function GridView(model: GridViewProps) { diff --git a/packages/web/src/shared/resizeView.tsx b/packages/web/src/shared/resizeView.tsx index e575866de0..401867f223 100644 --- a/packages/web/src/shared/resizeView.tsx +++ b/packages/web/src/shared/resizeView.tsx @@ -58,7 +58,7 @@ export const ResizeView: React.FC<{ right: 0, bottom: 0, left: -(7 - resizerWidth) / 2, - zIndex: 1000, + zIndex: 100, // Above the content, but below the film strip hover. pointerEvents: 'none', }} ref={ref}>