@rozenite/network-activity-plugin 1.10.0 → 1.11.0

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 />}