change(ui) - events virutalize and sync

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

@@ -141,7 +141,7 @@ interface Props {
 function NetworkPanel(props: Props) {
   const { resources, time, domContentLoadedTime, loadTime, domBuildingTime, fetchList } = props;
   const { showModal } = useModal();
-  
+
   const [sortBy, setSortBy] = useState('time');
   const [sortAscending, setSortAscending] = useState(true);
 
@@ -161,7 +161,7 @@ function NetworkPanel(props: Props) {
   const [pauseSync, setPauseSync] = useState(activeIndex > 0);
   const synRef: any = useRef({});
 
-  const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });;
+  const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
   const onFilterChange = ({ target: { value } }: any) => {
     devTools.update(INDEX_KEY, { filter: value });
   };
@@ -172,6 +172,7 @@ function NetworkPanel(props: Props) {
   };
 
   const removePause = () => {
+    setIsDetailsModalActive(false);
     clearTimeout(timeOut);
     timeOut = setTimeout(() => {
       devTools.update(INDEX_KEY, { index: getCurrentIndex() });

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

@@ -4,7 +4,6 @@ import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
 import { getRE } from 'App/utils';
 import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
 
-import TimeTable from '../TimeTable';
 import BottomBlock from '../BottomBlock';
 import { connectPlayer, jump } from 'Player';
 import { useModal } from 'App/components/Modal';
@@ -13,6 +12,7 @@ import { useObserver } from 'mobx-react-lite';
 import { DATADOG, SENTRY, STACKDRIVER, typeList } from 'Types/session/stackEvent';
 import { connect } from 'react-redux';
 import StackEventRow from 'Shared/DevTools/StackEventRow';
+import StackEventModal from '../StackEventModal';
 
 let timeOut: any = null;
 const TIMEOUT_DURATION = 5000;
@@ -31,6 +31,7 @@ function StackEventPanel(props: Props) {
   const {
     sessionStore: { devTools },
   } = useStore();
+  const { showModal } = useModal();
   const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
   const [filteredList, setFilteredList] = useState([]);
   const filter = useObserver(() => devTools[INDEX_KEY].filter);
@@ -55,6 +56,7 @@ function StackEventPanel(props: Props) {
 
   const removePause = () => {
     clearTimeout(timeOut);
+    setIsDetailsModalActive(false);
     timeOut = setTimeout(() => {
       devTools.update(INDEX_KEY, { index: getCurrentIndex() });
       setPauseSync(false);
@@ -94,6 +96,13 @@ function StackEventPanel(props: Props) {
     keyMapper: (index: number) => filteredList[index],
   });
 
+  const showDetails = (item: any) => {
+    setIsDetailsModalActive(true);
+    showModal(<StackEventModal event={item} />, { right: true, onClose: removePause });
+    devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
+    setPauseSync(true);
+  };
+
   const _rowRenderer = ({ index, key, parent, style }: any) => {
     const item = filteredList[index];
 
@@ -106,7 +115,12 @@ function StackEventPanel(props: Props) {
             style={style}
             key={item.key}
             event={item}
-            onJump={() => jump(item.time)}
+            onJump={() => {
+              setPauseSync(true);
+              devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
+              jump(item.time);
+            }}
+            onClick={() => showDetails(item)}
           />
         )}
       </CellMeasurer>

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

@@ -3,23 +3,18 @@ import JumpButton from '../JumpButton';
 import { Icon } from 'UI';
 import cn from 'classnames';
 import { OPENREPLAY, SENTRY, DATADOG, STACKDRIVER } from 'Types/session/stackEvent';
-import { useModal } from 'App/components/Modal';
-import StackEventModal from '../StackEventModal';
 
 interface Props {
   event: any;
   onJump: any;
   style?: any;
   isActive?: boolean;
+  onClick?: any;
 }
 function StackEventRow(props: Props) {
   const { event, onJump, style, isActive } = props;
   let message = event.payload[0] || '';
   message = typeof message === 'string' ? message : JSON.stringify(message);
-  const onClickDetails = () => {
-    showModal(<StackEventModal event={event} />, { right: true });
-  };
-  const { showModal } = useModal();
 
   const iconProps: any = React.useMemo(() => {
     const { source } = event;
@@ -34,7 +29,7 @@ function StackEventRow(props: Props) {
     <div
       style={style}
       data-scroll-item={event.isRed()}
-      onClick={onClickDetails}
+      onClick={props.onClick}
       className={cn(
         'group flex items-center py-2 px-4 border-b cursor-pointer relative',
         'hover:bg-active-blue',