Merge pull request #390 from FormidableLabs/event-duration

Display event duration in the side panel

Author: kadikraman

src/panel/__image_snapshots__/TimelinePane - event (without metadata)-landscape-snap.png

@@ -16,7 +16,7 @@ import { DebugEvent } from "@urql/core";
 import { DevtoolsContext } from "./Devtools";
 
 interface TimelineContextValue {
-  selectedEvent?: DebugEvent;
+  selectedEvent?: DebugEvent & { duration?: number };
   setSelectedEvent: Dispatch<SetStateAction<DebugEvent | undefined>>;
   container: HTMLDivElement;
   setContainer: (e: HTMLDivElement) => void;
@@ -278,9 +278,9 @@ export const TimelineProvider: FC = ({ children }) => {
   const [eventOrder, setEventOrder] = useState<
     TimelineContextValue["eventOrder"]
   >([]);
-  const [selectedEvent, setSelectedEvent] = useState<DebugEvent | undefined>(
-    undefined
-  );
+  const [selectedEvent, setSelectedEvent] = useState<
+    (DebugEvent & { duration?: number }) | undefined
+  >(undefined);
 
   useEffect(() => {
     return addMessageHandler((message) => {

src/panel/__image_snapshots__/TimelinePane - event-landscape-snap.png

@@ -2,7 +2,11 @@ import React, { FC, ComponentProps, useMemo } from "react";
 import styled from "styled-components";
 import { DebugEvent, Operation } from "@urql/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQuoteLeft, faStopwatch } from "@fortawesome/free-solid-svg-icons";
+import {
+  faQuoteLeft,
+  faStopwatch,
+  faClock,
+} from "@fortawesome/free-solid-svg-icons";
 import { print } from "graphql";
 import { Pane, CodeHighlight } from "../../../../components";
 import { useTimelineContext } from "../../../../context";
@@ -46,10 +50,12 @@ export const TimelinePane: FC<
 };
 
 /** Info about the event clicked by the user. */
-const EventSection: FC<{ event: DebugEvent }> = ({ event }) => {
+const EventSection: FC<{ event: DebugEvent & { duration?: number } }> = ({
+  event,
+}) => {
   const { startTime } = useTimelineContext();
 
-  const timestamp = useMemo(() => `${event.timestamp - startTime}ms`, [
+  const timestamp = useMemo(() => `${event.timestamp - startTime} ms`, [
     startTime,
   ]);
 
@@ -80,6 +86,15 @@ const EventSection: FC<{ event: DebugEvent }> = ({ event }) => {
             {timestamp}
           </p>
         </Pane.Item>
+        {event.duration && (
+          <Pane.Item>
+            <Pane.ItemTitle>Duration</Pane.ItemTitle>
+            <p>
+              <Icon icon={faClock} />
+              {(event.duration / 1000).toFixed(2)} seconds
+            </p>
+          </Pane.Item>
+        )}
         {event.data && (
           <Pane.Item>
             <Pane.ItemTitle>Metadata</Pane.ItemTitle>

src/panel/context/Timeline.tsx

@@ -103,8 +103,10 @@ export const TimelineRow: FC<
       p: ReduceState,
       e: DebugEvent<T>
     ) => {
-      const handleClick = () =>
-        setSelectedEvent((event) => (event === e ? undefined : e));
+      const handleClick = (duration: number) => () =>
+        setSelectedEvent((event) =>
+          event?.timestamp === e.timestamp ? undefined : { ...e, duration }
+        );
 
       // Request started
       if (p.start === undefined && e.type === "fetchRequest") {
@@ -130,7 +132,7 @@ export const TimelineRow: FC<
               right: container.clientWidth - scale(e.timestamp),
               bottom: 0,
             }}
-            onClick={handleClick}
+            onClick={handleClick(e.timestamp - p.start.timestamp)}
           />
         );
         p.start = undefined;
@@ -149,7 +151,7 @@ export const TimelineRow: FC<
               right: container.clientWidth - scale(e.timestamp),
               bottom: 0,
             }}
-            onClick={handleClick}
+            onClick={handleClick(e.timestamp - p.start.timestamp)}
           />
         );
         p.start = undefined;