From 269c931111a186559129b289b90ac8878adeb79f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9=20=D0=91=D0=B0=D0=B1?= =?UTF-8?q?=D1=83=D1=88=D0=BA=D0=B8=D0=BD?= Date: Tue, 6 May 2025 13:01:54 +0200 Subject: [PATCH] revert updates --- .../Player/ReplayPlayer/PlayerBlockHeader.tsx | 20 +------- frontend/app/components/Session/WebPlayer.tsx | 16 ------ .../EventsBlock/EventGroupWrapper.tsx | 5 +- .../Session_/EventsBlock/EventsBlock.tsx | 14 ++--- .../Session_/Player/Controls/EventsList.tsx | 15 ++---- .../Player/Controls/checkEventWithFilters.ts | 51 ------------------- .../Player/Controls/timeline.module.css | 17 +++++++ frontend/app/mstore/sessionStore.ts | 10 +--- frontend/app/mstore/uiPlayerStore.ts | 10 ---- frontend/app/types/session/event.ts | 5 -- 10 files changed, 30 insertions(+), 133 deletions(-) delete mode 100644 frontend/app/components/Session_/Player/Controls/checkEventWithFilters.ts diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx index ef769ec5f..c3784794b 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx @@ -16,14 +16,12 @@ import { IFRAME } from 'App/constants/storageKeys'; import stl from './playerBlockHeader.module.css'; import UserCard from './EventsBlock/UserCard'; import { useTranslation } from 'react-i18next'; -import { Switch } from 'antd'; const SESSIONS_ROUTE = sessionsRoute(); function PlayerBlockHeader(props: any) { const { t } = useTranslation(); const [hideBack, setHideBack] = React.useState(false); - const { uiPlayerStore } = useStore(); const { player, store } = React.useContext(PlayerContext); const { uxtestingStore, customFieldStore, projectsStore, sessionStore } = useStore(); @@ -125,25 +123,9 @@ function PlayerBlockHeader(props: any) { )} - {uiPlayerStore.showSearchEventsSwitchButton ? ( -
- - - {t('Search Events Only')} - -
- ) : null}
{ - return filters.length === 1 && filters[0].key === 'location' && filters[0].value[0] === ''; -} - function WebPlayer(props: any) { const { notesStore, @@ -42,7 +38,6 @@ function WebPlayer(props: any) { uxtestingStore, uiPlayerStore, integrationsStore, - searchStore, } = useStore(); const devTools = sessionStore.devTools const session = sessionStore.current; @@ -62,17 +57,6 @@ function WebPlayer(props: any) { const [fullView, setFullView] = useState(false); React.useEffect(() => { - if (searchStore.instance.filters?.length && !isDefaultEventsFilterSearch(searchStore.instance.filters)) { - uiPlayerStore.setSearchEventsSwitchButton(true); - uiPlayerStore.setShowOnlySearchEvents(true); - } else { - uiPlayerStore.setSearchEventsSwitchButton(false); - uiPlayerStore.setShowOnlySearchEvents(false); - } - }, [searchStore.instance.filters]); - - React.useEffect(() => { - openedAt.current = Date.now(); const handleActivation = () => { if (!document.hidden) { setWindowActive(true); diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.tsx b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.tsx index 92f89bcea..2cdf6dff1 100644 --- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.tsx +++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.tsx @@ -25,7 +25,6 @@ function EventGroupWrapper(props) { isLastInGroup, isSelected, isCurrent, - isSearched, isEditing, showSelection, isFirst, @@ -100,7 +99,7 @@ function EventGroupWrapper(props) { ); }; - const shadowColor = isSearched ? '#F0A930' : props.isPrev + const shadowColor = props.isPrev ? '#A7BFFF' : props.isCurrent ? '#394EFF' @@ -128,7 +127,7 @@ function EventGroupWrapper(props) { width: 10, height: 10, transform: 'rotate(45deg) translate(0, -50%)', - background: isSearched ? '#F0A930' : '#394EFF', + background: '#394EFF', zIndex: 99, borderRadius: '.15rem', }} diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx index 7b0d24818..79f4132e7 100644 --- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx +++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx @@ -2,7 +2,7 @@ import { mergeEventLists, sortEvents } from 'Types/session'; import { TYPES } from 'Types/session/event'; import cn from 'classnames'; import { observer } from 'mobx-react-lite'; -import React, { useEffect } from 'react'; +import React from 'react'; import { VList, VListHandle } from 'virtua'; import { Button } from 'antd'; import { PlayerContext } from 'App/components/Session/playerContext'; @@ -47,7 +47,6 @@ function EventsBlock(props: IProps) { const zoomStartTs = uiPlayerStore.timelineZoom.startTs; const zoomEndTs = uiPlayerStore.timelineZoom.endTs; const { store, player } = React.useContext(PlayerContext); - const [currentTimeEventIndex, setCurrentTimeEventIndex] = React.useState(0); const { time, @@ -95,8 +94,8 @@ function EventsBlock(props: IProps) { ? 'time' in e ? e.time >= zoomStartTs && e.time <= zoomEndTs : false - : true - ).filter((e: any) => !e.noteId && e.type !== 'TABCHANGE' && uiPlayerStore.showOnlySearchEvents ? e.isHighlighted : true); + : true, + ); }, [ filteredLength, notesWithEvtsLength, @@ -104,7 +103,6 @@ function EventsBlock(props: IProps) { zoomEnabled, zoomStartTs, zoomEndTs, - uiPlayerStore.showOnlySearchEvents ]); const findLastFitting = React.useCallback( (time: number) => { @@ -129,9 +127,7 @@ function EventsBlock(props: IProps) { [usedEvents, time, endTime], ); - useEffect(() => { - setCurrentTimeEventIndex(findLastFitting(time)); - }, []) + const currentTimeEventIndex = findLastFitting(time); const write = ({ target: { value }, @@ -187,7 +183,6 @@ function EventsBlock(props: IProps) { const isTabChange = 'type' in event && event.type === 'TABCHANGE'; const isCurrent = index === currentTimeEventIndex; const isPrev = index < currentTimeEventIndex; - const isSearched = event.isHighlighted return ( Object.values(tabStates)[0]?.eventList.filter((e) => { - if (uiPlayerStore.showOnlySearchEvents) { - return e.time && (e as any).isHighlighted - } else { - return e.time - } - }) || [], - [eventCount, uiPlayerStore.showOnlySearchEvents], + () => Object.values(tabStates)[0]?.eventList.filter((e) => e.time) || [], + [eventCount], ); React.useEffect(() => { const hasDuplicates = events.some( @@ -39,7 +34,7 @@ function EventsList() {
))} @@ -59,7 +54,7 @@ function MobileEventsList() {
))} diff --git a/frontend/app/components/Session_/Player/Controls/checkEventWithFilters.ts b/frontend/app/components/Session_/Player/Controls/checkEventWithFilters.ts deleted file mode 100644 index fb39264fb..000000000 --- a/frontend/app/components/Session_/Player/Controls/checkEventWithFilters.ts +++ /dev/null @@ -1,51 +0,0 @@ -import FilterItem from '@/mstore/types/filterItem'; - -export const checkEventWithFilters = (event: Event, filters: FilterItem[]) => { - let result = false; - filters.forEach((filter) => { - if (filter.key.toUpperCase() === event.type.toUpperCase()) { - if (filter.operator) { - const operator = operators[filter.operator]; - if (operator) { - result = !!operator(event.label, filter.value); - } - } - } - }); - return result -}; - -const operators = { - is: (val: string, target: string[]) => target.some((t) => val.includes(t)), - isAny: () => true, - isNot: (val: string, target: string[]) => - !target.some((t) => val.includes(t)), - contains: (val: string, target: string[]) => - target.some((t) => val.includes(t)), - notContains: (val: string, target: string[]) => - !target.some((t) => val.includes(t)), - startsWith: (val: string, target: string[]) => - target.some((t) => val.startsWith(t)), - endsWith: (val: string, target: string[]) => - target.some((t) => val.endsWith(t)), - greaterThan: (val: number, target: number) => val > target, - greaterOrEqual: (val: number, target: number) => val >= target, - lessOrEqual: (val: number, target: number) => val <= target, - lessThan: (val: number, target: number) => val < target, - on: (val: string, target: string[]) => target.some((t) => val.includes(t)), - notOn: (val: string, target: string[]) => - !target.some((t) => val.includes(t)), - onAny: () => true, - selectorIs: (val: string, target: string[]) => target.some((t) => val.includes(t)), - selectorIsAny: () => true, - selectorIsNot: (val: string, target: string[]) => - !target.some((t) => val.includes(t)), - selectorContains: (val: string, target: string[]) => - target.some((t) => val.includes(t)), - selectorNotContains: (val: string, target: string[]) => - !target.some((t) => val.includes(t)), - selectorStartsWith: (val: string, target: string[]) => - target.some((t) => val.startsWith(t)), - selectorEndsWith: (val: string, target: string[]) => - target.some((t) => val.endsWith(t)), -}; diff --git a/frontend/app/components/Session_/Player/Controls/timeline.module.css b/frontend/app/components/Session_/Player/Controls/timeline.module.css index a067d6b8e..2cd4d476f 100644 --- a/frontend/app/components/Session_/Player/Controls/timeline.module.css +++ b/frontend/app/components/Session_/Player/Controls/timeline.module.css @@ -49,6 +49,23 @@ z-index: 2; } +.event { + position: absolute; + width: 2px; + height: 10px; + background: $main; + z-index: 3; + pointer-events: none; + /* top: 0; */ + /* bottom: 0; */ + /* &:hover { + width: 10px; + height: 10px; + margin-left: -6px; + z-index: 1; + };*/ +} + /* .event.click, .event.input { background: $green; } diff --git a/frontend/app/mstore/sessionStore.ts b/frontend/app/mstore/sessionStore.ts index cc754fb6b..c2c4b87ec 100644 --- a/frontend/app/mstore/sessionStore.ts +++ b/frontend/app/mstore/sessionStore.ts @@ -16,7 +16,6 @@ import { LAST_7_DAYS } from 'Types/app/period'; import { filterMap } from 'App/mstore/searchStore'; import { getDateRangeFromValue } from 'App/dateRange'; import { searchStore, searchStoreLive } from './index'; -import { checkEventWithFilters } from '@/components/Session_/Player/Controls/checkEventWithFilters'; const range = getDateRangeFromValue(LAST_7_DAYS); const defaultDateFilters = { @@ -341,14 +340,7 @@ export default class SessionStore { const eventsData: Record = {}; try { const evData = await sessionService.getSessionEvents(sessionId); - - Object.assign(eventsData, { - ...evData, - events: evData.events.map((e) => ({ - ...e, - isHighlighted: checkEventWithFilters(e, searchStore.instance.filters) - })) - }); + Object.assign(eventsData, evData); } catch (e) { console.error('Failed to fetch events', e); } diff --git a/frontend/app/mstore/uiPlayerStore.ts b/frontend/app/mstore/uiPlayerStore.ts index 172b85b38..3f9466b08 100644 --- a/frontend/app/mstore/uiPlayerStore.ts +++ b/frontend/app/mstore/uiPlayerStore.ts @@ -53,8 +53,6 @@ export const blockValues = [ export default class UiPlayerStore { fullscreen = false; - showOnlySearchEvents = false; - showSearchEventsSwitchButton = false; bottomBlock = 0; @@ -147,12 +145,4 @@ export default class UiPlayerStore { setZoomTab = (tab: 'overview' | 'journey' | 'issues' | 'errors') => { this.zoomTab = tab; }; - - setShowOnlySearchEvents = (show: boolean) => { - this.showOnlySearchEvents = show; - }; - - setSearchEventsSwitchButton = (show: boolean) => { - this.showSearchEventsSwitchButton = show; - }; } diff --git a/frontend/app/types/session/event.ts b/frontend/app/types/session/event.ts index 2eeb568c4..0a0db38c1 100644 --- a/frontend/app/types/session/event.ts +++ b/frontend/app/types/session/event.ts @@ -51,7 +51,6 @@ interface IEvent { path: string; label: string; }; - isHighlighted?: boolean; } interface ConsoleEvent extends IEvent { @@ -119,8 +118,6 @@ class Event { messageId: IEvent['messageId']; - isHighlighted: IEvent['isHighlighted']; - constructor(event: IEvent) { Object.assign(this, { time: event.time, @@ -128,7 +125,6 @@ class Event { key: event.key, tabId: event.tabId, messageId: event.messageId, - isHighlighted: event.isHighlighted, target: { path: event.target?.path || event.targetPath, label: event.target?.label, @@ -190,7 +186,6 @@ export class Click extends Event { this.count = evt.count; this.hesitation = evt.hesitation; this.selector = evt.selector; - this.isHighlighted = evt.isHighlighted; if (isClickRage) { this.type = CLICKRAGE; }