diff --git a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
index 36bc580e0..03ef25f0a 100644
--- a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
@@ -135,7 +135,6 @@ function WebOverviewPanelCont() {
'ERRORS',
'NETWORK',
]);
- const globalTabs = ['FRUSTRATIONS', 'ERRORS']
const { endTime, currentTab, tabStates } = store.get();
@@ -347,7 +346,7 @@ function PanelComponent({
list={selectedFeatures}
updateList={setSelectedFeatures}
/>
-
+ {!isMobile ? : null}
)}
@@ -370,7 +369,14 @@ function PanelComponent({
}
>
- {isSpot ? : }
+ {isSpot ? (
+
+ ) : (
+
+ )}
{selectedFeatures.map((feature: any, index: number) => (
(
showDetails(log)}
+ showSingleTab
/>
))}
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index 26a0f47d8..fb37e67be 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -604,7 +604,7 @@ export const NetworkPanelComp = observer(
)}
-
+ {!isMobile ?
: null}
({ text: tab, key: tab }));
-type EventsList = Array
;
+type EventsList = Array<
+ Timed & { name: string; source: string; key: string; payload?: string[] }
+>;
-const WebStackEventPanelComp = observer(
- () => {
- const { uiPlayerStore } = useStore();
- const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
- const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
- const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
- const { player, store } = React.useContext(PlayerContext);
- const jump = (t: number) => player.jump(t);
- const { currentTab, tabStates } = store.get();
+const WebStackEventPanelComp = observer(() => {
+ const { uiPlayerStore } = useStore();
+ const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+ const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+ const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
+ const { player, store } = React.useContext(PlayerContext);
+ const jump = (t: number) => player.jump(t);
+ const { currentTab, tabStates } = store.get();
- const { stackList: list = [], stackListNow: listNow = [] } = tabStates[currentTab];
+ const { stackList: list = [], stackListNow: listNow = [] } =
+ tabStates[currentTab];
- return (
-
- );
- }
-);
+ return (
+
+ );
+});
export const WebStackEventPanel = WebStackEventPanelComp;
-const MobileStackEventPanelComp = observer(
- () => {
- const { uiPlayerStore } = useStore();
- const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
- const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
- const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
- const { player, store } = React.useContext(MobilePlayerContext);
- const jump = (t: number) => player.jump(t);
- const { eventList: list = [], eventListNow: listNow = [] } = store.get();
+const MobileStackEventPanelComp = observer(() => {
+ const { uiPlayerStore } = useStore();
+ const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+ const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+ const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
+ const { player, store } = React.useContext(MobilePlayerContext);
+ const jump = (t: number) => player.jump(t);
+ const { eventList: list = [], eventListNow: listNow = [] } = store.get();
- return (
-
- );
- }
-);
+ return (
+
+ );
+});
export const MobileStackEventPanel = MobileStackEventPanelComp;
-const EventsPanel = observer(({
- list,
- listNow,
- jump,
- zoomEnabled,
- zoomStartTs,
- zoomEndTs,
-}: {
- list: EventsList;
- listNow: EventsList;
- jump: (t: number) => void;
- zoomEnabled: boolean;
- zoomStartTs: number;
- zoomEndTs: number;
-}) => {
- const {
- sessionStore: { devTools },
- } = useStore();
- const { showModal } = useModal();
- const [isDetailsModalActive, setIsDetailsModalActive] = useState(false); // TODO:embed that into useModal
- const filter = devTools[INDEX_KEY].filter;
- const activeTab = devTools[INDEX_KEY].activeTab;
- const activeIndex = devTools[INDEX_KEY].index;
+const EventsPanel = observer(
+ ({
+ list,
+ listNow,
+ jump,
+ zoomEnabled,
+ zoomStartTs,
+ zoomEndTs,
+ isMobile,
+ }: {
+ list: EventsList;
+ listNow: EventsList;
+ jump: (t: number) => void;
+ zoomEnabled: boolean;
+ zoomStartTs: number;
+ zoomEndTs: number;
+ isMobile?: boolean;
+ }) => {
+ const {
+ sessionStore: { devTools },
+ } = useStore();
+ const { showModal } = useModal();
+ const [isDetailsModalActive, setIsDetailsModalActive] = useState(false); // TODO:embed that into useModal
+ const filter = devTools[INDEX_KEY].filter;
+ const activeTab = devTools[INDEX_KEY].activeTab;
+ const activeIndex = devTools[INDEX_KEY].index;
- const inZoomRangeList = list.filter(({ time }) =>
- zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
- );
- const inZoomRangeListNow = listNow.filter(({ time }) =>
- zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
- );
+ const inZoomRangeList = list.filter(({ time }) =>
+ zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
+ );
+ const inZoomRangeListNow = listNow.filter(({ time }) =>
+ zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
+ );
- let filteredList = useRegExListFilterMemo(inZoomRangeList, (it) => {
- const searchBy = [it.name]
- if (it.payload) {
- const payload = Array.isArray(it.payload) ? it.payload.join(',') : JSON.stringify(it.payload);
- searchBy.push(payload);
- }
- return searchBy
- }, filter);
- filteredList = useTabListFilterMemo(filteredList, (it) => it.source, ALL, activeTab);
-
- const onTabClick = (activeTab: (typeof TAB_KEYS)[number]) =>
- devTools.update(INDEX_KEY, { activeTab });
- const onFilterChange = ({ target: { value } }: React.ChangeEvent) => devTools.update(INDEX_KEY, { filter: value });
- const tabs = useMemo(
- () => TABS.filter(({ key }) => key === ALL || inZoomRangeList.some(({ source }) => key === source)),
- [inZoomRangeList.length]
- );
-
- const [timeoutStartAutoscroll, stopAutoscroll] = useAutoscroll(
- filteredList,
- getLastItemTime(inZoomRangeListNow),
- activeIndex,
- (index) => devTools.update(INDEX_KEY, { index })
- );
- const onMouseEnter = stopAutoscroll;
- const onMouseLeave = () => {
- if (isDetailsModalActive) {
- return;
- }
- timeoutStartAutoscroll();
- };
-
- const showDetails = (item: any) => {
- setIsDetailsModalActive(true);
- showModal(, {
- right: true,
- width: 500,
- onClose: () => {
- setIsDetailsModalActive(false);
- timeoutStartAutoscroll();
+ let filteredList = useRegExListFilterMemo(
+ inZoomRangeList,
+ (it) => {
+ const searchBy = [it.name];
+ if (it.payload) {
+ const payload = Array.isArray(it.payload)
+ ? it.payload.join(',')
+ : JSON.stringify(it.payload);
+ searchBy.push(payload);
+ }
+ return searchBy;
},
- });
- devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
- stopAutoscroll();
- };
+ filter
+ );
+ filteredList = useTabListFilterMemo(
+ filteredList,
+ (it) => it.source,
+ ALL,
+ activeTab
+ );
- const _list = React.useRef(null);
- useEffect(() => {
- if (_list.current) {
- _list.current.scrollToIndex(activeIndex);
- }
- }, [activeIndex]);
+ const onTabClick = (activeTab: (typeof TAB_KEYS)[number]) =>
+ devTools.update(INDEX_KEY, { activeTab });
+ const onFilterChange = ({
+ target: { value },
+ }: React.ChangeEvent) =>
+ devTools.update(INDEX_KEY, { filter: value });
+ const tabs = useMemo(
+ () =>
+ TABS.filter(
+ ({ key }) =>
+ key === ALL || inZoomRangeList.some(({ source }) => key === source)
+ ),
+ [inZoomRangeList.length]
+ );
- return (
-
-
-
- Stack Events
-
-
-
-
- Current Tab
- ),
- value: 'current', disabled: true},
- ]}
- defaultValue="all"
- size="small"
- className="rounded-full font-medium"
- />
- }
- />
-
-
-
-
-
- No Data
-
- }
- size="small"
- show={filteredList.length === 0}
- >
-
- {filteredList.map((item, index) => (
- {
- stopAutoscroll();
- devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
- jump(item.time);
- }}
- onClick={() => showDetails(item)}
+ const [timeoutStartAutoscroll, stopAutoscroll] = useAutoscroll(
+ filteredList,
+ getLastItemTime(inZoomRangeListNow),
+ activeIndex,
+ (index) => devTools.update(INDEX_KEY, { index })
+ );
+ const onMouseEnter = stopAutoscroll;
+ const onMouseLeave = () => {
+ if (isDetailsModalActive) {
+ return;
+ }
+ timeoutStartAutoscroll();
+ };
+
+ const showDetails = (item: any) => {
+ setIsDetailsModalActive(true);
+ showModal(, {
+ right: true,
+ width: 500,
+ onClose: () => {
+ setIsDetailsModalActive(false);
+ timeoutStartAutoscroll();
+ },
+ });
+ devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
+ stopAutoscroll();
+ };
+
+ const _list = React.useRef(null);
+ useEffect(() => {
+ if (_list.current) {
+ _list.current.scrollToIndex(activeIndex);
+ }
+ }, [activeIndex]);
+
+ return (
+
+
+
+
+ Stack Events
+
+
+
+
+ {isMobile ? null : (
+
+ Current Tab
+
+ ),
+ value: 'current',
+ disabled: true,
+ },
+ ]}
+ defaultValue="all"
+ size="small"
+ className="rounded-full font-medium"
/>
- ))}
-
-
-
-
- );
-});
+ )}
+ }
+ />
+
+
+
+
+
+ No Data
+
+ }
+ size="small"
+ show={filteredList.length === 0}
+ >
+
+ {filteredList.map((item, index) => (
+ {
+ stopAutoscroll();
+ devTools.update(INDEX_KEY, {
+ index: filteredList.indexOf(item),
+ });
+ jump(item.time);
+ }}
+ onClick={() => showDetails(item)}
+ />
+ ))}
+
+
+
+
+ );
+ }
+);