ui: fix events filtering, net panel scroll and default tab

frontend/app/components/Session/WebPlayer.tsx

@@ -38,8 +38,8 @@ function WebPlayer(props: any) {
     uxtestingStore,
     uiPlayerStore,
     integrationsStore,
-    userStore,
   } = useStore();
+  const devTools = sessionStore.devTools
   const session = sessionStore.current;
   const { prefetched } = sessionStore;
   const startedAt = sessionStore.current.startedAt || 0;
@@ -66,6 +66,10 @@ function WebPlayer(props: any) {
       };
       document.addEventListener('visibilitychange', handleActivation);
     }
+
+    return () => {
+      devTools.update('network', { activeTab: 'ALL' });
+    }
   }, []);
 
   useEffect(() => {

frontend/app/components/Session_/EventsBlock/EventsBlock.tsx

@@ -85,19 +85,30 @@ function EventsBlock(props: IProps) {
         }
       });
     }
-    const eventsWithMobxNotes = [...notesWithEvents, ...notes].sort(sortEvents);
-    return mergeEventLists(
-      filteredLength > 0 ? filteredEvents : eventsWithMobxNotes,
-      tabChangeEvents,
-    ).filter((e) =>
-      zoomEnabled
+    const eventsWithMobxNotes = [...notesWithEvents, ...notes]
+      .sort(sortEvents);
+    const filteredTabEvents = query.length
+                              ? tabChangeEvents
+                                .filter((e => (e.activeUrl as string).includes(query)))
+                              : tabChangeEvents;
+    const list = mergeEventLists(
+      query.length > 0 ? filteredEvents : eventsWithMobxNotes,
+      filteredTabEvents
+    )
+    if (zoomEnabled) {
+      return list.filter((e) =>
+        zoomEnabled
         ? 'time' in e
           ? e.time >= zoomStartTs && e.time <= zoomEndTs
           : false
-        : true,
-    );
+        : true
+      );
+    } else {
+      return list
+    }
   }, [
     filteredLength,
+    query,
     notesWithEvtsLength,
     notesLength,
     zoomEnabled,

frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx

@@ -145,7 +145,7 @@ function TimeTable(props: Props) {
   ]);
   React.useEffect(() => {
     if (props.activeIndex && props.activeIndex >= 0 && scroller.current) {
-      scroller.current.scrollToIndex(props.activeIndex);
+      scroller.current.scrollToIndex(props.activeIndex, { align: 'center', smooth: false });
       setFirstVisibleRowIndex(props.activeIndex ?? 0);
     }
   }, [props.activeIndex]);