@rozenite/network-activity-plugin 1.10.0 → 1.12.0

package/src/ui/components/NetworkTimeline.tsx

@@ -0,0 +1,422 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { CSSProperties, PointerEvent } from 'react';
+import { X } from 'lucide-react';
+import type { RequestId } from '../../shared/client';
+import type { ProcessedRequest } from '../state/model';
+import {
+  useNetworkActivityActions,
+  useSelectedRequestId,
+} from '../state/hooks';
+import {
+  formatTimelineOffset,
+  getTimelineBarTopOffset,
+  getTimelineModel,
+  getTimelineTrackTop,
+  isRequestActive,
+  TIMELINE_LAYOUT,
+} from '../utils/timelineModel';
+import type {
+  TimelineModel,
+  TimelineRangeSelection,
+  TimelineRow,
+  TimelineTick,
+} from '../utils/timelineModel';
+
+const REQUEST_TIMELINE_COLORS = {
+  error: 'bg-red-400',
+  primary: 'bg-gray-400',
+  active: 'bg-gray-500',
+  httpTtfb: 'bg-gray-200',
+} as const;
+
+const getPrimaryBarClassName = (request: ProcessedRequest) => {
+  if (request.status === 'failed' || request.status === 'error') {
+    return REQUEST_TIMELINE_COLORS.error;
+  }
+
+  return REQUEST_TIMELINE_COLORS.primary;
+};
+
+const getStyle = (
+  offsetPercent: number,
+  widthPercent: number,
+): CSSProperties => ({
+  left: `${offsetPercent}%`,
+  width: `${widthPercent}%`,
+});
+
+const GridLines = ({ ticks }: { ticks: TimelineTick[] }) => {
+  return (
+    <div className="pointer-events-none absolute inset-0">
+      {ticks.map((tick) => (
+        <div
+          key={`${tick.label}-${tick.offsetPercent}`}
+          className="absolute inset-y-0 border-l border-gray-800"
+          style={{ left: `${tick.offsetPercent}%` }}
+        />
+      ))}
+    </div>
+  );
+};
+
+const getTickLabelStyle = (tick: TimelineTick): CSSProperties => {
+  if (tick.offsetPercent === 0) {
+    return {
+      left: 4,
+    };
+  }
+
+  if (tick.offsetPercent === 100) {
+    return {
+      right: 4,
+    };
+  }
+
+  return {
+    left: `${tick.offsetPercent}%`,
+  };
+};
+
+const TimelineTrack = ({
+  row,
+  isSelected,
+  onSelect,
+  shouldSuppressSelect,
+}: {
+  row: TimelineRow;
+  isSelected: boolean;
+  onSelect: (requestId: RequestId) => void;
+  shouldSuppressSelect: () => boolean;
+}) => {
+  const primaryBarClassName = row.isActive
+    ? REQUEST_TIMELINE_COLORS.active
+    : getPrimaryBarClassName(row.request);
+  const isSplitHttpBar =
+    row.request.type === 'http' &&
+    row.ttfbPercent > 0 &&
+    row.receivePercent > 0;
+  const trackTop = getTimelineTrackTop(row.lane);
+  const barTop = getTimelineBarTopOffset();
+  const positionStyle = {
+    ...getStyle(row.offsetPercent, row.widthPercent),
+    top: trackTop,
+  };
+  const durationLabel = row.isActive
+    ? `${formatTimelineOffset(row.duration)}+`
+    : formatTimelineOffset(row.duration);
+  const label = `${row.request.method} ${row.request.name} - ${durationLabel}`;
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      data-timeline-track="true"
+      className="absolute rounded-sm text-left transition-opacity hover:opacity-80"
+      style={{
+        ...positionStyle,
+        height: TIMELINE_LAYOUT.laneHitTargetHeightPx,
+      }}
+      onClick={(event) => {
+        if (shouldSuppressSelect()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+
+        onSelect(row.request.id);
+      }}
+    >
+      {isSplitHttpBar ? (
+        <div
+          className={`absolute flex w-full overflow-hidden rounded-sm ${
+            isSelected
+              ? 'ring-1 ring-blue-300 ring-offset-1 ring-offset-gray-950'
+              : ''
+          }`}
+          style={{
+            top: barTop,
+            height: TIMELINE_LAYOUT.laneHeightPx,
+          }}
+        >
+          <div
+            className={`h-full ${REQUEST_TIMELINE_COLORS.httpTtfb}`}
+            style={{ width: `${row.ttfbPercent}%` }}
+          />
+          <div
+            className={`h-full ${REQUEST_TIMELINE_COLORS.primary}`}
+            style={{ width: `${row.receivePercent}%` }}
+          />
+        </div>
+      ) : (
+        <div
+          className={`absolute w-full rounded-sm ${primaryBarClassName} ${
+            isSelected
+              ? 'ring-1 ring-blue-300 ring-offset-1 ring-offset-gray-950'
+              : ''
+          }`}
+          style={{
+            top: barTop,
+            height: TIMELINE_LAYOUT.laneHeightPx,
+          }}
+        />
+      )}
+    </button>
+  );
+};
+
+type DraftSelection = {
+  anchorPercent: number;
+  currentPercent: number;
+  startedOnTrack: boolean;
+};
+
+const clampPercent = (value: number) => Math.min(Math.max(value, 0), 100);
+
+const getPointerPercent = (
+  event: PointerEvent<HTMLDivElement>,
+  element: HTMLDivElement,
+) => {
+  const rect = element.getBoundingClientRect();
+
+  if (rect.width === 0) {
+    return 0;
+  }
+
+  return clampPercent(((event.clientX - rect.left) / rect.width) * 100);
+};
+
+const getSelectionStyle = (
+  range: TimelineRangeSelection,
+  timeline: TimelineModel,
+): CSSProperties => {
+  const startPercent = clampPercent(
+    ((range.startTime - timeline.rangeStart) / timeline.rangeDuration) * 100,
+  );
+  const endPercent = clampPercent(
+    ((range.endTime - timeline.rangeStart) / timeline.rangeDuration) * 100,
+  );
+  const left = Math.min(startPercent, endPercent);
+  const width = Math.abs(endPercent - startPercent);
+
+  return {
+    left: `${left}%`,
+    width: `${width}%`,
+    top: TIMELINE_LAYOUT.rulerHeightPx,
+  };
+};
+
+const getDraftSelectionStyle = (draft: DraftSelection): CSSProperties => {
+  const left = Math.min(draft.anchorPercent, draft.currentPercent);
+  const width = Math.abs(draft.currentPercent - draft.anchorPercent);
+
+  return {
+    left: `${left}%`,
+    width: `${width}%`,
+    top: TIMELINE_LAYOUT.rulerHeightPx,
+  };
+};
+
+export type NetworkTimelineProps = {
+  requests: ProcessedRequest[];
+  selection: TimelineRangeSelection | null;
+  filteredRequestCount: number;
+  onSelectionChange: (selection: TimelineRangeSelection | null) => void;
+};
+
+export const NetworkTimeline = ({
+  requests,
+  selection,
+  filteredRequestCount,
+  onSelectionChange,
+}: NetworkTimelineProps) => {
+  const actions = useNetworkActivityActions();
+  const selectedRequestId = useSelectedRequestId();
+  const [now, setNow] = useState(() => Date.now());
+  const [draftSelection, setDraftSelection] = useState<DraftSelection | null>(
+    null,
+  );
+  const chartRef = useRef<HTMLDivElement | null>(null);
+  const suppressTrackClickRef = useRef(false);
+
+  const hasActiveRequests = requests.some(isRequestActive);
+
+  useEffect(() => {
+    if (!hasActiveRequests) {
+      return;
+    }
+
+    const interval = window.setInterval(() => {
+      setNow(Date.now());
+    }, TIMELINE_LAYOUT.liveRefreshMs);
+
+    return () => window.clearInterval(interval);
+  }, [hasActiveRequests]);
+
+  const timeline = useMemo(() => {
+    return getTimelineModel(requests, now);
+  }, [requests, now]);
+
+  const onRequestSelect = (requestId: RequestId) => {
+    actions.setSelectedRequest(requestId);
+  };
+
+  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || requests.length === 0) {
+      return;
+    }
+
+    const chartElement = chartRef.current;
+
+    if (!chartElement) {
+      return;
+    }
+
+    const percent = getPointerPercent(event, chartElement);
+    const target = event.target;
+    const startedOnTrack =
+      target instanceof Element &&
+      target.closest('[data-timeline-track="true"]') !== null;
+
+    setDraftSelection({
+      anchorPercent: percent,
+      currentPercent: percent,
+      startedOnTrack,
+    });
+    chartElement.setPointerCapture(event.pointerId);
+  };
+
+  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (!draftSelection) {
+      return;
+    }
+
+    const chartElement = chartRef.current;
+
+    if (!chartElement) {
+      return;
+    }
+
+    event.preventDefault();
+    const percent = getPointerPercent(event, chartElement);
+
+    setDraftSelection((current) =>
+      current ? { ...current, currentPercent: percent } : current,
+    );
+  };
+
+  const onPointerUp = (event: PointerEvent<HTMLDivElement>) => {
+    if (!draftSelection) {
+      return;
+    }
+
+    const chartElement = chartRef.current;
+    const currentPercent = chartElement
+      ? getPointerPercent(event, chartElement)
+      : draftSelection.currentPercent;
+    const distance = Math.abs(currentPercent - draftSelection.anchorPercent);
+
+    if (distance > 1) {
+      const startOffset =
+        (Math.min(draftSelection.anchorPercent, currentPercent) / 100) *
+        timeline.rangeDuration;
+      const endOffset =
+        (Math.max(draftSelection.anchorPercent, currentPercent) / 100) *
+        timeline.rangeDuration;
+
+      onSelectionChange({
+        startTime: timeline.rangeStart + startOffset,
+        endTime: timeline.rangeStart + endOffset,
+      });
+
+      suppressTrackClickRef.current = true;
+      window.setTimeout(() => {
+        suppressTrackClickRef.current = false;
+      }, 0);
+    } else if (!draftSelection.startedOnTrack) {
+      onSelectionChange(null);
+    }
+
+    setDraftSelection(null);
+
+    if (chartElement?.hasPointerCapture(event.pointerId)) {
+      chartElement.releasePointerCapture(event.pointerId);
+    }
+  };
+
+  return (
+    <div className="border-b border-gray-700 bg-gray-900 p-1.5">
+      <div
+        ref={chartRef}
+        className="relative overflow-hidden border border-gray-800 bg-gray-950"
+        style={{ height: timeline.chartHeight }}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <GridLines ticks={timeline.ticks} />
+
+        <div
+          className="pointer-events-none absolute inset-x-0 border-b border-gray-800"
+          style={{ top: TIMELINE_LAYOUT.rulerHeightPx }}
+        />
+
+        {timeline.ticks.map((tick) => (
+          <div
+            key={`${tick.label}-${tick.offsetPercent}`}
+            className="absolute top-1 whitespace-nowrap tabular-nums text-xs text-gray-200"
+            style={getTickLabelStyle(tick)}
+          >
+            {tick.label}
+          </div>
+        ))}
+
+        {selection && (
+          <div
+            className="pointer-events-none absolute bottom-0 border-x border-blue-300/70 bg-blue-400/10"
+            style={getSelectionStyle(selection, timeline)}
+          />
+        )}
+
+        {draftSelection && (
+          <div
+            className="pointer-events-none absolute bottom-0 border-x border-blue-300/70 bg-blue-400/15"
+            style={getDraftSelectionStyle(draftSelection)}
+          />
+        )}
+
+        {timeline.rows.map((row) => (
+          <TimelineTrack
+            key={row.request.id}
+            row={row}
+            isSelected={selectedRequestId === row.request.id}
+            onSelect={onRequestSelect}
+            shouldSuppressSelect={() => suppressTrackClickRef.current}
+          />
+        ))}
+
+        {selection && (
+          <div className="absolute bottom-1 right-1 flex items-center gap-1 rounded border border-gray-700 bg-gray-900/95 px-1.5 py-0.5 text-xs text-gray-400">
+            <span>{filteredRequestCount} in range</span>
+            <button
+              type="button"
+              title="Clear timeline selection"
+              aria-label="Clear timeline selection"
+              className="rounded p-0.5 text-gray-400 hover:bg-gray-800 hover:text-gray-100"
+              onClick={() => onSelectionChange(null)}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </div>
+        )}
+
+        {timeline.hiddenRequestCount > 0 && (
+          <div className="absolute bottom-1 left-1 rounded border border-gray-700 bg-gray-900/95 px-1.5 py-0.5 text-xs text-gray-400">
+            Showing latest {timeline.rows.length} of{' '}
+            {timeline.totalRequestCount}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/ui/components/RequestList.tsx

@@ -10,7 +10,6 @@ import {
 } from '@tanstack/react-table';
 import type { ProcessedRequest } from '../state/model';
 import type {
-  HttpMethod,
   NetworkEventSource,
   RequestId,
   RequestOverride,
@@ -18,12 +17,10 @@ import type {
 import {
   useNetworkActivityActions,
   useOverrides,
-  useProcessedRequests,
   useSelectedRequestId,
   useClientUISettings,
 } from '../state/hooks';
 import { getStatusColor } from '../utils/getStatusColor';
-import { FilterState } from './FilterBar';
 import { isNumber } from '../../utils/typeChecks';
 
 type NetworkRequest = {
@@ -31,7 +28,6 @@ type NetworkRequest = {
   name: string;
   status: string | number;
   statusCode?: number;
-  statusState: ProcessedRequest['status'];
   method: ProcessedRequest['method'];
   domain: string;
   path: string;
@@ -114,7 +110,6 @@ const sortSize: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   const a = rowA.getValue(columnId) as string;
   const b = rowB.getValue(columnId) as string;
 
-  // Extract numeric values from formatted strings like "1.2 kB", "500 B", etc.
   const getNumericValue = (str: string) => {
     const match = str.match(/^([\d.]+)\s*([KMGT]?B)$/);
     if (!match) return 0;
@@ -136,7 +131,6 @@ const sortTime: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   const a = rowA.getValue(columnId) as string;
   const b = rowB.getValue(columnId) as string;
 
-  // Extract numeric values from formatted strings like "150 ms", "1.2 s", etc.
   const getNumericValue = (str: string) => {
     const match = str.match(/^([\d.]+)\s*(ms|s)$/);
     if (!match) return 0;
@@ -148,175 +142,6 @@ const sortTime: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   return getNumericValue(a) - getNumericValue(b);
 };
 
-const parseThreshold = (value: string): number | null => {
-  const normalizedValue = value.trim();
-  if (!normalizedValue) {
-    return null;
-  }
-
-  const parsedValue = Number(normalizedValue);
-  return Number.isFinite(parsedValue) ? parsedValue : null;
-};
-
-const matchesStatusFilter = (
-  statusCode: number | undefined,
-  statusFilter: string,
-) => {
-  const normalizedFilter = statusFilter.trim().toLowerCase();
-  if (!normalizedFilter) {
-    return true;
-  }
-
-  if (statusCode === undefined) {
-    return false;
-  }
-
-  const statusRangeMatch = normalizedFilter.match(/^(\d{3})\s*-\s*(\d{3})$/);
-  if (statusRangeMatch) {
-    const min = Number(statusRangeMatch[1]);
-    const max = Number(statusRangeMatch[2]);
-    return statusCode >= min && statusCode <= max;
-  }
-
-  const statusClassMatch = normalizedFilter.match(/^([1-5])xx$/);
-  if (statusClassMatch) {
-    return Math.floor(statusCode / 100) === Number(statusClassMatch[1]);
-  }
-
-  const comparisonMatch = normalizedFilter.match(/^(>=|<=|>|<)\s*(\d{3})$/);
-  if (comparisonMatch) {
-    const value = Number(comparisonMatch[2]);
-    switch (comparisonMatch[1]) {
-      case '>=':
-        return statusCode >= value;
-      case '<=':
-        return statusCode <= value;
-      case '>':
-        return statusCode > value;
-      case '<':
-        return statusCode < value;
-    }
-  }
-
-  return statusCode === Number(normalizedFilter);
-};
-
-const isInFlightStatus = (status: string) => {
-  return ['pending', 'loading', 'connecting', 'open'].includes(status);
-};
-
-const isFailedStatus = (status: string) => {
-  return ['failed', 'error'].includes(status);
-};
-
-const isHttpMethod = (method: NetworkRequest['method']): method is HttpMethod =>
-  method !== 'WS' && method !== 'SSE';
-
-const filterNetworkRequests = (
-  requests: NetworkRequest[],
-  filter: FilterState,
-) => {
-  const searchText = filter.text.trim().toLowerCase();
-  const domainFilter = filter.advanced.domain.trim().toLowerCase();
-  const contentTypeFilter = filter.advanced.contentType.trim().toLowerCase();
-  const minSize = parseThreshold(filter.advanced.minSize);
-  const maxSize = parseThreshold(filter.advanced.maxSize);
-  const minDuration = parseThreshold(filter.advanced.minDuration);
-  const maxDuration = parseThreshold(filter.advanced.maxDuration);
-
-  return requests.filter((request) => {
-    if (filter.types.size > 0 && !filter.types.has(request.type)) {
-      return false;
-    }
-
-    if (
-      filter.advanced.methods.size > 0 &&
-      (!isHttpMethod(request.method) ||
-        !filter.advanced.methods.has(request.method))
-    ) {
-      return false;
-    }
-
-    if (
-      filter.advanced.sources.size > 0 &&
-      (!request.source || !filter.advanced.sources.has(request.source))
-    ) {
-      return false;
-    }
-
-    if (!matchesStatusFilter(request.statusCode, filter.advanced.status)) {
-      return false;
-    }
-
-    if (domainFilter && !request.domain.toLowerCase().includes(domainFilter)) {
-      return false;
-    }
-
-    if (
-      contentTypeFilter &&
-      !request.contentType?.toLowerCase().includes(contentTypeFilter)
-    ) {
-      return false;
-    }
-
-    if (filter.advanced.failedOnly && !isFailedStatus(request.statusState)) {
-      return false;
-    }
-
-    if (
-      filter.advanced.inFlightOnly &&
-      !isInFlightStatus(request.statusState)
-    ) {
-      return false;
-    }
-
-    if (filter.advanced.overriddenOnly && !request.hasOverride) {
-      return false;
-    }
-
-    if (
-      minSize !== null &&
-      (request.sizeBytes === null || request.sizeBytes < minSize)
-    ) {
-      return false;
-    }
-
-    if (
-      maxSize !== null &&
-      (request.sizeBytes === null || request.sizeBytes > maxSize)
-    ) {
-      return false;
-    }
-
-    if (minDuration !== null && request.durationMs < minDuration) {
-      return false;
-    }
-
-    if (maxDuration !== null && request.durationMs > maxDuration) {
-      return false;
-    }
-
-    if (searchText) {
-      const searchableFields = [
-        request.name,
-        request.method,
-        request.status,
-        request.domain,
-        request.path,
-        request.source,
-        request.type,
-        request.contentType,
-      ]
-        .join(' ')
-        .toLowerCase();
-
-      return searchableFields.includes(searchText);
-    }
-
-    return true;
-  });
-};
-
 const processNetworkRequests = (
   processedRequests: ProcessedRequest[],
   overrides: Map<string, RequestOverride>,
@@ -340,7 +165,6 @@ const processNetworkRequests = (
       name: generateName(request.name, showEntirePathAsName),
       status: statusDisplay,
       statusCode: request.httpStatus || undefined,
-      statusState: request.status,
       method: request.method,
       domain,
       path,
@@ -352,7 +176,7 @@ const processNetworkRequests = (
       type: request.type,
       source: request.source,
       startTime: formatStartTime(request.timestamp),
-      hasOverride: hasOverride,
+      hasOverride,
     };
   });
 };
@@ -428,25 +252,23 @@ const columns = [
 ];
 
 export type RequestListProps = {
-  filter: FilterState;
+  requests: ProcessedRequest[];
 };
 
-export const RequestList = ({ filter }: RequestListProps) => {
+export const RequestList = ({ requests: filteredRequests }: RequestListProps) => {
   const actions = useNetworkActivityActions();
-  const processedRequests = useProcessedRequests();
   const selectedRequestId = useSelectedRequestId();
   const [sorting, setSorting] = useState<SortingState>([]);
   const overrides = useOverrides();
   const clientUISettings = useClientUISettings();
 
   const requests = useMemo(() => {
-    const allRequests = processNetworkRequests(
-      processedRequests,
+    return processNetworkRequests(
+      filteredRequests,
       overrides,
       clientUISettings?.showUrlAsName,
     );
-    return filterNetworkRequests(allRequests, filter);
-  }, [processedRequests, overrides, clientUISettings?.showUrlAsName, filter]);
+  }, [filteredRequests, overrides, clientUISettings?.showUrlAsName]);
 
   const table = useReactTable({
     data: requests,
@@ -527,7 +349,6 @@ export const RequestList = ({ filter }: RequestListProps) => {
   );
 };
 
-// Export helper functions for use in other components
 export {
   formatSize,
   formatDuration,