From 815ac936e2cef55d83575c22cc4de3073dd7ee1d Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 20 Jun 2022 14:49:27 +0200
Subject: [PATCH 1/2] Prevent showing child exception while parent is still
 playing

---
 addons/interactions/src/Panel.tsx | 36 ++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
index fcd6918cfcf5..c2d5f6672872 100644
--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@@ -140,6 +140,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
   const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
 
   const [log, setLog] = React.useState<LogItem[]>([]);
+  const callsById = new Map<Call['id'], Call>();
   const childCallMap = new Map<Call['id'], Call['id'][]>();
   const interactions = log
     .filter((call) => {
@@ -147,18 +148,29 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
       childCallMap.set(call.parentId, (childCallMap.get(call.parentId) || []).concat(call.callId));
       return !collapsed.has(call.parentId);
     })
-    .map(({ callId, status }) => ({
-      ...calls.current.get(callId),
-      status,
-      childCallIds: childCallMap.get(callId),
-      isCollapsed: collapsed.has(callId),
-      toggleCollapsed: () =>
-        setCollapsed((ids) => {
-          if (ids.has(callId)) ids.delete(callId);
-          else ids.add(callId);
-          return new Set(ids);
-        }),
-    }));
+    .map(({ callId, status }) => {
+      const call = calls.current.get(callId);
+      const value = {
+        ...call,
+        status,
+        childCallIds: childCallMap.get(callId),
+        isCollapsed: collapsed.has(callId),
+        toggleCollapsed: () =>
+          setCollapsed((ids) => {
+            if (ids.has(callId)) ids.delete(callId);
+            else ids.add(callId);
+            return new Set(ids);
+          }),
+      };
+      if (
+        status === CallStates.ERROR &&
+        callsById.get(call.parentId)?.status === CallStates.ACTIVE
+      ) {
+        value.status = CallStates.ACTIVE;
+      }
+      callsById.set(callId, value);
+      return value;
+    });
 
   const endRef = React.useRef();
   React.useEffect(() => {

From f45a51cbcebf545cb8e2bb7d761b270a7d8a143d Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 20 Jun 2022 15:25:35 +0200
Subject: [PATCH 2/2] Small refactor

---
 addons/interactions/src/Panel.tsx | 66 +++++++++++++++----------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
index c2d5f6672872..0b8325166ace 100644
--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@@ -134,44 +134,12 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
   const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
   const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
   const [collapsed, setCollapsed] = React.useState<Set<Call['id']>>(new Set());
+  const [log, setLog] = React.useState<LogItem[]>([]);
 
   // Calls are tracked in a ref so we don't needlessly rerender.
   const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
   const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
 
-  const [log, setLog] = React.useState<LogItem[]>([]);
-  const callsById = new Map<Call['id'], Call>();
-  const childCallMap = new Map<Call['id'], Call['id'][]>();
-  const interactions = log
-    .filter((call) => {
-      if (!call.parentId) return true;
-      childCallMap.set(call.parentId, (childCallMap.get(call.parentId) || []).concat(call.callId));
-      return !collapsed.has(call.parentId);
-    })
-    .map(({ callId, status }) => {
-      const call = calls.current.get(callId);
-      const value = {
-        ...call,
-        status,
-        childCallIds: childCallMap.get(callId),
-        isCollapsed: collapsed.has(callId),
-        toggleCollapsed: () =>
-          setCollapsed((ids) => {
-            if (ids.has(callId)) ids.delete(callId);
-            else ids.add(callId);
-            return new Set(ids);
-          }),
-      };
-      if (
-        status === CallStates.ERROR &&
-        callsById.get(call.parentId)?.status === CallStates.ACTIVE
-      ) {
-        value.status = CallStates.ACTIVE;
-      }
-      callsById.set(callId, value);
-      return value;
-    });
-
   const endRef = React.useRef();
   React.useEffect(() => {
     let observer: IntersectionObserver;
@@ -224,6 +192,38 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
   const showStatus = log.length > 0 && !isPlaying;
   const hasException = log.some((item) => item.status === CallStates.ERROR);
 
+  const interactions = React.useMemo(() => {
+    const callsById = new Map<Call['id'], Call>();
+    const childCallMap = new Map<Call['id'], Call['id'][]>();
+    return log
+      .filter(({ callId, parentId }) => {
+        if (!parentId) return true;
+        childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId));
+        return !collapsed.has(parentId);
+      })
+      .map(({ callId, status }) => ({ ...calls.current.get(callId), status } as Call))
+      .map((call) => {
+        const status =
+          call.status === CallStates.ERROR &&
+          callsById.get(call.parentId)?.status === CallStates.ACTIVE
+            ? CallStates.ACTIVE
+            : call.status;
+        callsById.set(call.id, { ...call, status });
+        return {
+          ...call,
+          status,
+          childCallIds: childCallMap.get(call.id),
+          isCollapsed: collapsed.has(call.id),
+          toggleCollapsed: () =>
+            setCollapsed((ids) => {
+              if (ids.has(call.id)) ids.delete(call.id);
+              else ids.add(call.id);
+              return new Set(ids);
+            }),
+        };
+      });
+  }, [log, collapsed]);
+
   return (
     <React.Fragment key="interactions">
       <TabStatus>