@rozenite/network-activity-plugin 1.10.0 → 1.12.0

package/src/ui/utils/timelineModel.ts

@@ -0,0 +1,352 @@
+import type { ProcessedRequest } from '../state/model';
+
+export const TIMELINE_LAYOUT = {
+  minVisibleBarPercent: 0.65,
+  minRangeMs: 1000,
+  liveRefreshMs: 1000,
+  maxRenderedRequests: 1000,
+  laneCount: 8,
+  laneHeightPx: 2,
+  laneGapPx: 6,
+  laneHitTargetHeightPx: 8,
+  rulerHeightPx: 22,
+  laneTopPx: 32,
+  laneBottomPaddingPx: 18,
+  tickTargetCount: 7,
+  minTickLabelGapPercent: 6,
+  rangePaddingRatio: 0.025,
+  minRangePaddingMs: 25,
+  streamingRequestMaxDurationMs: 5000,
+} as const;
+
+const NICE_TICK_FACTORS = [1, 2, 2.5, 5, 10] as const;
+
+type TimelineLayout = {
+  [Key in keyof typeof TIMELINE_LAYOUT]: number;
+};
+
+export type TimelineTick = {
+  label: string;
+  offsetPercent: number;
+};
+
+export type TimelineRangeSelection = {
+  startTime: number;
+  endTime: number;
+};
+
+export type TimelineRow = {
+  request: ProcessedRequest;
+  offsetPercent: number;
+  widthPercent: number;
+  duration: number;
+  ttfbPercent: number;
+  receivePercent: number;
+  isActive: boolean;
+  lane: number;
+  isOverflowingLane: boolean;
+};
+
+export type TimelineModel = {
+  rows: TimelineRow[];
+  ticks: TimelineTick[];
+  rangeStart: number;
+  rangeDuration: number;
+  chartHeight: number;
+  totalRequestCount: number;
+  hiddenRequestCount: number;
+};
+
+const ACTIVE_HTTP_STATUSES = new Set<ProcessedRequest['status']>([
+  'pending',
+  'loading',
+]);
+const ACTIVE_WEBSOCKET_STATUSES = new Set<ProcessedRequest['status']>([
+  'connecting',
+  'open',
+  'closing',
+]);
+const ACTIVE_SSE_STATUSES = new Set<ProcessedRequest['status']>([
+  'connecting',
+  'open',
+]);
+
+const clamp = (value: number, minimum: number, maximum: number) => {
+  return Math.min(Math.max(value, minimum), maximum);
+};
+
+export const getTimelineChartHeight = (
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  return (
+    layout.laneTopPx +
+    layout.laneCount * layout.laneHeightPx +
+    (layout.laneCount - 1) * layout.laneGapPx +
+    layout.laneBottomPaddingPx
+  );
+};
+
+export const getTimelineLaneTop = (
+  lane: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  return lane * (layout.laneHeightPx + layout.laneGapPx) + layout.laneTopPx;
+};
+
+export const getTimelineTrackTop = (
+  lane: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  const visualBarTop = getTimelineLaneTop(lane, layout);
+  return (
+    visualBarTop - (layout.laneHitTargetHeightPx - layout.laneHeightPx) / 2
+  );
+};
+
+export const getTimelineBarTopOffset = (
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  return (layout.laneHitTargetHeightPx - layout.laneHeightPx) / 2;
+};
+
+export const isRequestActive = (request: ProcessedRequest) => {
+  switch (request.type) {
+    case 'http':
+      return ACTIVE_HTTP_STATUSES.has(request.status);
+    case 'websocket':
+      return ACTIVE_WEBSOCKET_STATUSES.has(request.status);
+    case 'sse':
+      return ACTIVE_SSE_STATUSES.has(request.status);
+  }
+};
+
+export const formatTimelineOffset = (milliseconds: number) => {
+  if (milliseconds < 1000) {
+    return `${Math.round(milliseconds)} ms`;
+  }
+
+  if (milliseconds < 60000) {
+    return `${(milliseconds / 1000).toFixed(milliseconds < 10000 ? 1 : 0)} s`;
+  }
+
+  const totalSeconds = Math.round(milliseconds / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds.toString().padStart(2, '0')}s`;
+};
+
+export const getRequestEndTime = (request: ProcessedRequest, now: number) => {
+  if (typeof request.duration === 'number') {
+    return request.timestamp + Math.max(request.duration, 0);
+  }
+
+  if (isRequestActive(request)) {
+    return Math.max(now, request.timestamp);
+  }
+
+  return request.timestamp;
+};
+
+export const getTimelineRequestEndTime = (
+  request: ProcessedRequest,
+  now: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  const endTime = getRequestEndTime(request, now);
+
+  if (request.type !== 'websocket' && request.type !== 'sse') {
+    return endTime;
+  }
+
+  return Math.min(
+    endTime,
+    request.timestamp + layout.streamingRequestMaxDurationMs,
+  );
+};
+
+export const requestOverlapsTimelineRange = (
+  request: ProcessedRequest,
+  range: TimelineRangeSelection,
+  now: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  const rangeStart = Math.min(range.startTime, range.endTime);
+  const rangeEnd = Math.max(range.startTime, range.endTime);
+  const requestStart = request.timestamp;
+  const requestEnd = getTimelineRequestEndTime(request, now, layout);
+
+  return requestStart <= rangeEnd && requestEnd >= rangeStart;
+};
+
+const getNiceTickStep = (rangeDuration: number, targetTickCount: number) => {
+  const targetStep = rangeDuration / targetTickCount;
+  const exponent = Math.floor(Math.log10(targetStep));
+  const magnitude = 10 ** exponent;
+  const normalizedStep = targetStep / magnitude;
+  const factor =
+    NICE_TICK_FACTORS.find((candidate) => candidate >= normalizedStep) ??
+    NICE_TICK_FACTORS[NICE_TICK_FACTORS.length - 1];
+
+  return factor * magnitude;
+};
+
+export const getTimelineTicks = (
+  rangeDuration: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+): TimelineTick[] => {
+  const step = getNiceTickStep(rangeDuration, layout.tickTargetCount);
+  const ticks: TimelineTick[] = [];
+
+  for (let value = 0; value <= rangeDuration; value += step) {
+    ticks.push({
+      label: formatTimelineOffset(value),
+      offsetPercent: (value / rangeDuration) * 100,
+    });
+  }
+
+  if (
+    ticks.length === 0 ||
+    ticks[ticks.length - 1].offsetPercent < 100 - Number.EPSILON
+  ) {
+    const finalTick = {
+      label: formatTimelineOffset(rangeDuration),
+      offsetPercent: 100,
+    };
+    const previousTick = ticks[ticks.length - 1];
+
+    if (
+      !previousTick ||
+      (finalTick.label !== previousTick.label &&
+        finalTick.offsetPercent - previousTick.offsetPercent >=
+          layout.minTickLabelGapPercent)
+    ) {
+      ticks.push(finalTick);
+    }
+  }
+
+  return ticks;
+};
+
+const getTimelineBounds = (
+  requests: ProcessedRequest[],
+  now: number,
+  layout: TimelineLayout,
+) => {
+  return requests.reduce(
+    (result, request) => {
+      const endTime = getTimelineRequestEndTime(request, now, layout);
+
+      return {
+        start: Math.min(result.start, request.timestamp),
+        end: Math.max(result.end, endTime),
+      };
+    },
+    {
+      start: Number.POSITIVE_INFINITY,
+      end: Number.NEGATIVE_INFINITY,
+    },
+  );
+};
+
+const getEarliestLaneIndex = (laneEndTimes: number[]) => {
+  return laneEndTimes.reduce((earliestIndex, laneEndTime, index) => {
+    return laneEndTime < laneEndTimes[earliestIndex] ? index : earliestIndex;
+  }, 0);
+};
+
+const getRenderableRequests = (
+  requests: ProcessedRequest[],
+  layout: TimelineLayout,
+) => {
+  if (requests.length <= layout.maxRenderedRequests) {
+    return requests;
+  }
+
+  return [...requests]
+    .sort((a, b) => b.timestamp - a.timestamp)
+    .slice(0, layout.maxRenderedRequests);
+};
+
+export const getTimelineModel = (
+  requests: ProcessedRequest[],
+  now: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+): TimelineModel => {
+  const renderableRequests = getRenderableRequests(requests, layout);
+  const hiddenRequestCount = requests.length - renderableRequests.length;
+
+  if (renderableRequests.length === 0) {
+    return {
+      rows: [],
+      ticks: getTimelineTicks(layout.minRangeMs, layout),
+      rangeStart: 0,
+      rangeDuration: layout.minRangeMs,
+      chartHeight: getTimelineChartHeight(layout),
+      totalRequestCount: requests.length,
+      hiddenRequestCount,
+    };
+  }
+
+  const bounds = getTimelineBounds(renderableRequests, now, layout);
+  const rawRangeDuration = Math.max(
+    bounds.end - bounds.start,
+    layout.minRangeMs,
+  );
+  const rangePadding = Math.max(
+    rawRangeDuration * layout.rangePaddingRatio,
+    layout.minRangePaddingMs,
+  );
+  const rangeStart = bounds.start - rangePadding;
+  const rangeDuration = rawRangeDuration + rangePadding * 2;
+  const laneEndTimes = Array.from({ length: layout.laneCount }, () => 0);
+
+  const rows = [...renderableRequests]
+    .sort((a, b) => a.timestamp - b.timestamp)
+    .map((request): TimelineRow => {
+      const startTime = request.timestamp;
+      const endTime = getTimelineRequestEndTime(request, now, layout);
+      const duration = Math.max(endTime - startTime, 0);
+      const offsetPercent = clamp(
+        ((startTime - rangeStart) / rangeDuration) * 100,
+        0,
+        100 - layout.minVisibleBarPercent,
+      );
+      const widthPercent = Math.min(
+        Math.max((duration / rangeDuration) * 100, layout.minVisibleBarPercent),
+        100 - offsetPercent,
+      );
+      const ttfb = clamp(request.ttfb ?? 0, 0, duration);
+      const ttfbPercent = duration === 0 ? 0 : (ttfb / duration) * 100;
+      const receivePercent = Math.max(100 - ttfbPercent, 0);
+      const availableLane = laneEndTimes.findIndex(
+        (laneEndTime) => laneEndTime <= startTime,
+      );
+      const isOverflowingLane = availableLane === -1;
+      const lane = isOverflowingLane
+        ? getEarliestLaneIndex(laneEndTimes)
+        : availableLane;
+      laneEndTimes[lane] = Math.max(laneEndTimes[lane], endTime);
+
+      return {
+        request,
+        offsetPercent,
+        widthPercent,
+        duration,
+        ttfbPercent,
+        receivePercent,
+        isActive: isRequestActive(request),
+        lane,
+        isOverflowingLane,
+      };
+    });
+
+  return {
+    rows,
+    ticks: getTimelineTicks(rangeDuration, layout),
+    rangeStart,
+    rangeDuration,
+    chartHeight: getTimelineChartHeight(layout),
+    totalRequestCount: requests.length,
+    hiddenRequestCount,
+  };
+};

package/src/ui/views/InspectorView.tsx

@@ -1,19 +1,24 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Toolbar } from '../components/Toolbar';
 import { RequestList } from '../components/RequestList';
 import { SidePanel } from '../components/SidePanel';
-import {
-  createDefaultFilter,
-  FilterBar,
-  FilterState,
-} from '../components/FilterBar';
+import { FilterBar } from '../components/FilterBar';
+import { NetworkTimeline } from '../components/NetworkTimeline';
 import { NetworkActivityDevToolsClient } from '../../shared/client';
 import {
   useNetworkActivityClientManagement,
   useHasSelectedRequest,
   useNetworkActivityActions,
   useOverrides,
+  useProcessedRequests,
 } from '../state/hooks';
+import { createDefaultFilter } from '../state/filter';
+import type { FilterState } from '../state/filter';
+import { matchesRequestFilter } from '../utils/requestFilters';
+import {
+  requestOverlapsTimelineRange,
+  type TimelineRangeSelection,
+} from '../utils/timelineModel';
 
 export type InspectorViewProps = {
   client: NetworkActivityDevToolsClient;
@@ -24,9 +29,31 @@ export const InspectorView = ({ client }: InspectorViewProps) => {
   const clientManagement = useNetworkActivityClientManagement();
   const hasSelectedRequest = useHasSelectedRequest();
   const overrides = useOverrides();
+  const processedRequests = useProcessedRequests();
   const [filter, setFilter] = useState<FilterState>(() =>
     createDefaultFilter(),
   );
+  const [timelineSelection, setTimelineSelection] =
+    useState<TimelineRangeSelection | null>(null);
+
+  const filteredRequests = useMemo(() => {
+    return processedRequests.filter((request) =>
+      matchesRequestFilter(request, filter, {
+        hasOverride: overrides.has(request.name),
+      }),
+    );
+  }, [processedRequests, filter, overrides]);
+
+  const visibleRequests = useMemo(() => {
+    if (!timelineSelection) {
+      return filteredRequests;
+    }
+
+    const now = Date.now();
+    return filteredRequests.filter((request) =>
+      requestOverlapsTimelineRange(request, timelineSelection, now),
+    );
+  }, [filteredRequests, timelineSelection]);
 
   useEffect(() => {
     if (!client) {
@@ -52,13 +79,18 @@ export const InspectorView = ({ client }: InspectorViewProps) => {
       <FilterBar filter={filter} onFilterChange={setFilter} />
 
       <div className="flex flex-1 overflow-hidden">
-        {/* Request List */}
         <div
           className={`flex flex-col ${
             hasSelectedRequest ? 'w-1/2' : 'w-full'
           } border-r border-gray-700 overflow-hidden`}
         >
-          <RequestList filter={filter} />
+          <NetworkTimeline
+            requests={filteredRequests}
+            selection={timelineSelection}
+            filteredRequestCount={visibleRequests.length}
+            onSelectionChange={setTimelineSelection}
+          />
+          <RequestList requests={visibleRequests} />
         </div>
 
         {hasSelectedRequest && <SidePanel />}