working version

packages/replay-next/src/suspense/NetworkRequestsCache.ts

@@ -16,11 +16,12 @@ import {
   ResponseBodyData,
   TimeStampedPoint,
 } from "@replayio/protocol";
+import { transformSupplementalId } from "protocol/utils"
 import { StreamingCacheLoadOptions, createStreamingCache } from "suspense";
 
 import { comparePoints } from "protocol/execution-point-utils";
 import { assert } from "protocol/utils";
-import { ReplayClientInterface } from "shared/client/types";
+import { ReplayClientInterface, TargetPoint } from "shared/client/types";
 
 export type NetworkEventWithTime<EventType> = EventType & {
   time: number;
@@ -41,7 +42,7 @@ export type NetworkRequestsData = {
   };
   timeStampedPoint: TimeStampedPoint;
   triggerPoint: TimeStampedPoint | null;
-  serverPoint: TimeStampedPoint | null;
+  targetPoint: TargetPoint | null;
 };
 
 export type NetworkRequestsCacheData = {
@@ -81,6 +82,7 @@ export const networkRequestsCache = createStreamingCache<
         ids.push(id);
 
         const targetPoint = replayClient.getTargetPoint(point, 0);
+        console.log(`TARGET`, transformSupplementalId(targetPoint?.point?.point ?? "", targetPoint?.supplementalIndex ?? 0))
 
         records[id] = {
           id,
@@ -95,13 +97,13 @@ export const networkRequestsCache = createStreamingCache<
             responseEvent: null,
             responseRawHeaderEvent: null,
           },
-          serverPoint: targetPoint?.point ?? null,
           requestBodyData: null,
           responseBodyData: null,
           timeStampedPoint: {
             point,
             time,
           },
+          targetPoint: targetPoint ?? null,
           triggerPoint: triggerPoint ?? null,
         } as NetworkRequestsData;
       });

packages/shared/client/ReplayClient.ts

@@ -93,6 +93,7 @@ import {
   SupplementalSession,
   SupplementalRecordingConnection,
   TimeStampedPointWithPaintHash,
+  TargetPoint,
 } from "./types";
 
 export const MAX_POINTS_TO_FIND = 10_000;
@@ -611,9 +612,7 @@ export class ReplayClient implements ReplayClientInterface {
     });
   }
 
-  getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): {
-    point: TimeStampedPoint, supplementalIndex: number
-  } | null {
+  getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): TargetPoint | null {
     const recordingId = this.getSupplementalIndexRecordingId(pointSupplementalIndex);
 
     let targetPoint: TimeStampedPoint | undefined;
@@ -642,7 +641,6 @@ export class ReplayClient implements ReplayClientInterface {
   }
 
   private async maybeGetConnectionStepTarget(point: ExecutionPoint, pointSupplementalIndex: number): Promise<PauseDescription | null> {
-
     const targetPoint = this.getTargetPoint(point, pointSupplementalIndex);
     if (!targetPoint) {
       return null;

packages/shared/client/types.ts

@@ -178,6 +178,11 @@ export interface SupplementalSession extends SupplementalRecording {
   sessionId: string;
 }
 
+export interface TargetPoint {
+  point: TimeStampedPoint;
+  supplementalIndex: number
+}
+
 export interface ReplayClientInterface {
   get loadedRegions(): LoadedRegions | null;
   addEventListener(type: ReplayClientEvents, handler: Function): void;
@@ -207,7 +212,7 @@ export interface ReplayClientInterface {
     events: RequestEventInfo[];
     requests: RequestInfo[];
   }>;
-  getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): { point: TimeStampedPoint | undefined, supplementalIndex: number } | null;
+  getTargetPoint(point: ExecutionPoint, pointSupplementalIndex: number): TargetPoint | null;
   findPaints(): Promise<TimeStampedPointWithPaintHash[]>;
   findPoints(selector: PointSelector, limits?: PointLimits): Promise<PointDescription[]>;
 

src/ui/components/NetworkMonitor/NetworkMonitorListRow.tsx

@@ -20,6 +20,10 @@ import {
   URLEncodedToPlaintext,
 } from "./content";
 import styles from "./NetworkMonitorListRow.module.css";
+import { transformSupplementalId } from "protocol/utils"
+
+import { useAppDispatch } from "ui/setup/hooks";
+import { seek } from "ui/actions/timeline";
 
 export const LIST_ROW_HEIGHT = 26;
 
@@ -117,13 +121,13 @@ function RequestRow({
     start: startTime,
     status,
     triggerPoint,
-    serverPoint,
+    targetPoint,
     url,
   } = request;
 
 
-  if (serverPoint) {
-    console.log("serverPoint!!", serverPoint);
+  if (targetPoint) {
+    console.log("targetPoint!!", targetPoint);
   }
 
 
@@ -151,6 +155,9 @@ function RequestRow({
     }
   }
 
+
+  const dispatch = useAppDispatch();
+
   const [, dismissJumpToNetworkRequestNag] = useNag(Nag.JUMP_TO_NETWORK_REQUEST);
 
   useEffect(() => {
@@ -233,7 +240,7 @@ function RequestRow({
         )}
         {columns.name && (
           <div className={styles.Column} data-name="name">
-            {serverPoint && (
+            {targetPoint && (
               <span style={{ color: "red" }}>Server</span>
             )}
             {name} {graphqlOperationName && `(${graphqlOperationName})`}
@@ -265,11 +272,19 @@ function RequestRow({
           </div>
         )}
 
-        {serverPoint && (
+        {targetPoint && (
           <button
             className={styles.ServerSeekButton}
             data-test-name="Network-RequestRow-SeekButton"
-            onClick={() => seekToRequestWrapper({point: serverPoint, id: id})}
+            onClick={() => {
+              dispatch(
+                seek({
+                  executionPoint: transformSupplementalId(targetPoint.point.point, targetPoint.supplementalIndex),
+                  openSource: true,
+                  time: targetPoint.point.time,
+                })
+              );
+            }}
             tabIndex={0}
             style={{
               backgroundColor: "red !important",
@@ -285,7 +300,7 @@ function RequestRow({
           </button>
         )}
 
-        {!serverPoint && triggerPoint && triggerPoint.time !== currentTime && (
+        {!targetPoint && triggerPoint && triggerPoint.time !== currentTime && (
           <button
             className={styles.SeekButton}
             data-test-name="Network-RequestRow-SeekButton"

src/ui/components/NetworkMonitor/utils.ts

@@ -14,6 +14,7 @@ import keyBy from "lodash/keyBy";
 
 import { assert, compareExecutionPoints } from "protocol/utils";
 import { NetworkRequestsCacheData } from "replay-next/src/suspense/NetworkRequestsCache";
+import { TargetPoint } from "shared/client/types";
 
 export enum CanonicalRequestType {
   CSS,
@@ -47,7 +48,7 @@ export type RequestSummary = {
   requestHeaders: Header[];
   responseHeaders: Header[];
   start: number;
-  serverPoint: TimeStampedPoint | null;
+  targetPoint: TargetPoint | null;
   status: number | undefined;
   type: CanonicalRequestType;
   url: string;
@@ -170,7 +171,7 @@ export const partialRequestsToCompleteSummaries = (
         start: record.timeStampedPoint.time,
         status: responseEvent?.responseStatus,
         triggerPoint: record.triggerPoint,
-        serverPoint: record.serverPoint,
+        targetPoint: record.targetPoint,
         type: REQUEST_TYPES[openEvent.requestCause || ""] ?? CanonicalRequestType.OTHER,
         url: openEvent.requestUrl,
       };