From e8b4cf257dbfd5a1d5c625e2abaec343e4a99262 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 12 Jun 2023 15:58:38 +0200 Subject: [PATCH] fix(ui): fix events, double notes call etc --- frontend/app/components/Session/WebPlayer.tsx | 14 +++++------- .../Session_/EventsBlock/EventsBlock.tsx | 11 +++++++--- .../Session_/Player/Controls/Timeline.tsx | 22 ++++++++++++------- frontend/app/duck/sessions.ts | 12 ++++------ frontend/app/mstore/notesStore.ts | 1 + frontend/app/player/web/TabManager.ts | 1 - frontend/app/types/session/index.js | 2 +- frontend/app/types/session/session.ts | 13 ++++++----- 8 files changed, 42 insertions(+), 34 deletions(-) diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx index 923b2efd7..b9a4763d3 100644 --- a/frontend/app/components/Session/WebPlayer.tsx +++ b/frontend/app/components/Session/WebPlayer.tsx @@ -33,7 +33,6 @@ function WebPlayer(props: any) { } = props; const { notesStore } = useStore(); const [activeTab, setActiveTab] = useState(''); - const [showNoteModal, setShowNote] = useState(false); const [noteItem, setNoteItem] = useState(undefined); const [visuallyAdjusted, setAdjusted] = useState(false); // @ts-ignore @@ -57,7 +56,6 @@ function WebPlayer(props: any) { const note = props.query.get('note'); if (note) { setNoteItem(notesStore.getNoteById(parseInt(note, 10), r)); - setShowNote(true); WebPlayerInst.pause(); } }) @@ -77,11 +75,11 @@ function WebPlayer(props: any) { const { firstVisualEvent: visualOffset, messagesProcessed } = contextValue.store?.get() || {} React.useEffect(() => { - if (showNoteModal) { + if (noteItem !== undefined) { contextValue.player.pause() } - if (activeTab === '' && !showNoteModal && messagesProcessed && contextValue.player) { + if (activeTab === '' && !noteItem !== undefined && messagesProcessed && contextValue.player) { const jumpToTime = props.query.get('jumpto'); const shouldAdjustOffset = visualOffset !== 0 && !visuallyAdjusted @@ -96,7 +94,7 @@ function WebPlayer(props: any) { contextValue.player.play() } - }, [activeTab, showNoteModal, visualOffset, messagesProcessed]) + }, [activeTab, noteItem, visualOffset, messagesProcessed]) React.useEffect(() => { if (activeTab === 'Click Map') { @@ -118,7 +116,7 @@ function WebPlayer(props: any) { ); const onNoteClose = () => { - setShowNote(false); + setNoteItem(undefined) contextValue.player.play(); }; @@ -140,8 +138,8 @@ function WebPlayer(props: any) { setActiveTab={setActiveTab} session={session} /> : } - - {showNoteModal ? ( + + {noteItem !== undefined ? ( void; @@ -27,6 +28,7 @@ interface IProps { } function EventsBlock(props: IProps) { + const { notesStore } = useStore(); const [mouseOver, setMouseOver] = React.useState(true); const scroller = React.useRef(null); const cache = useCellMeasurerCache({ @@ -46,9 +48,11 @@ function EventsBlock(props: IProps) { setActiveTab, notesWithEvents = [], } = props; + const notes = notesStore.sessionNotes; const filteredLength = filteredEvents?.length || 0; const notesWithEvtsLength = notesWithEvents?.length || 0; + const notesLength = notes.length; const eventListNow = Object.values(tabStates).reduce((acc: any[], tab) => { return acc.concat(tab.eventListNow) }, []) @@ -68,8 +72,9 @@ function EventsBlock(props: IProps) { i--; } }) - return mergeEventLists(filteredEvents || notesWithEvents, tabChangeEvents); - }, [filteredLength, notesWithEvtsLength]) + const eventsWithMobxNotes = [...notesWithEvents, ...notes].sort(sortEvents); + return mergeEventLists(filteredLength > 0 ? filteredEvents : eventsWithMobxNotes, tabChangeEvents); + }, [filteredLength, notesWithEvtsLength, notesLength]) const write = ({ target: { value } }: React.ChangeEvent) => { props.setEventFilter({ query: value }); diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.tsx b/frontend/app/components/Session_/Player/Controls/Timeline.tsx index 31cde2d87..5d8b764e0 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.tsx +++ b/frontend/app/components/Session_/Player/Controls/Timeline.tsx @@ -13,7 +13,6 @@ import { observer } from 'mobx-react-lite'; import { useStore } from 'App/mstore'; import { DateTime, Duration } from 'luxon'; import Issue from "Types/session/issue"; -import { toJS } from 'mobx' function getTimelinePosition(value: number, scale: number) { const pos = value * scale; @@ -23,6 +22,7 @@ function getTimelinePosition(value: number, scale: number) { interface IProps { issues: Issue[] + eventsLength: number setTimelineHoverTime: (t: number) => void startedAt: number tooltipVisible: boolean @@ -44,14 +44,17 @@ function Timeline(props: IProps) { domLoading, tabStates, } = store.get() - const { issues } = props; - const notes = notesStore.sessionNotes + const { issues, eventsLength } = props; + const notes = notesStore.sessionNotes; const progressRef = useRef(null) const timelineRef = useRef(null) - const events = Object.keys(tabStates).length > 0 ? Object.keys(tabStates).reduce((acc, tabId) => { - return acc.concat(tabStates[tabId].eventList) - }, []) : [] + const events = React.useMemo(() => { + // console.log(eventsLength, tabStates) + return Object.keys(tabStates).length > 0 ? Object.keys(tabStates).reduce((acc, tabId) => { + return acc.concat(tabStates[tabId].eventList) + }, []) : [] + }, [eventsLength]) const scale = 100 / endTime; @@ -177,14 +180,16 @@ function Timeline(props: IProps) { {devtoolsLoading || domLoading || !ready ?
: null}
- {events.map((e) => ( + {events.map((e) => { + if (!e || e.key == undefined) console.log(e) + return (
- ))} + )})} {/* TODO: refactor and make any sense out of this */} {/* {issues.map((i: Issue) => (*/} @@ -217,6 +222,7 @@ function Timeline(props: IProps) { export default connect( (state: any) => ({ + eventsLength: state.getIn(['sessions', 'current'])?.notesWithEvents?.length || 0, issues: state.getIn(['sessions', 'current']).issues || [], startedAt: state.getIn(['sessions', 'current']).startedAt || 0, tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']), diff --git a/frontend/app/duck/sessions.ts b/frontend/app/duck/sessions.ts index f68d84119..d7920ba0d 100644 --- a/frontend/app/duck/sessions.ts +++ b/frontend/app/duck/sessions.ts @@ -60,6 +60,7 @@ const initObj = { list: [], sessionIds: [], current: new Session(), + eventsAsked: false, total: 0, keyMap: Map(), wdTypeCount: Map(), @@ -246,7 +247,8 @@ const reducer = (state = initialState, action: IAction) => { if (notes.length > 0) { const session = state.get('current') as Session; const newSession = session.addNotes(notes); - return state.set('current', newSession); + const forceUpdate = state.set('current', {}) + return forceUpdate.set('current', newSession); } return state } @@ -436,13 +438,7 @@ export const fetchV2 = (sessionId: string) => } else { dispatch({ type: FETCHV2.SUCCESS, data, ...filter }); - let [events, notes] = await Promise.all([ - apiGet(`/sessions/${sessionId}/events`, dispatch), - apiGet(`/sessions/${sessionId}/notes`, dispatch), - ]); - if (notes) { - dispatch({ type: FETCH_NOTES.SUCCESS, data: notes.data }); - } + const events = await apiGet(`/sessions/${sessionId}/events`, dispatch); if (events) { dispatch({ type: FETCH_EVENTS.SUCCESS, data: events.data, filter }); } diff --git a/frontend/app/mstore/notesStore.ts b/frontend/app/mstore/notesStore.ts index ea52cb2e7..cfd00411d 100644 --- a/frontend/app/mstore/notesStore.ts +++ b/frontend/app/mstore/notesStore.ts @@ -44,6 +44,7 @@ export default class NotesStore { this.loading = true try { const notes = await notesService.getNotesBySessionId(sessionId) + notes.forEach(note => note.time = note.timestamp) this.setNotes(notes) return notes; } catch (e) { diff --git a/frontend/app/player/web/TabManager.ts b/frontend/app/player/web/TabManager.ts index fe69b5513..10ccf11c8 100644 --- a/frontend/app/player/web/TabManager.ts +++ b/frontend/app/player/web/TabManager.ts @@ -84,7 +84,6 @@ export default class TabSessionManager { this.locationEventManager.append(e); } }) - this.updateLocalState({ ...this.lists.getFullListsState() }); } diff --git a/frontend/app/types/session/index.js b/frontend/app/types/session/index.js index 57b0fc61f..1b5bf9ee7 100644 --- a/frontend/app/types/session/index.js +++ b/frontend/app/types/session/index.js @@ -1 +1 @@ -export { default, mergeEventLists } from './session'; \ No newline at end of file +export { default, mergeEventLists, sortEvents } from './session'; \ No newline at end of file diff --git a/frontend/app/types/session/session.ts b/frontend/app/types/session/session.ts index 448e93225..3b08a7ff5 100644 --- a/frontend/app/types/session/session.ts +++ b/frontend/app/types/session/session.ts @@ -33,9 +33,10 @@ export function mergeEventLists, Y extends Record< return merged; } -function sortEvents(a: Record, b: Record) { - const aTs = a.timestamp || a.time; - const bTs = b.timestamp || b.time; +export function sortEvents(a: Record, b: Record) { + + const aTs = a.time || a.timestamp; + const bTs = b.time || b.timestamp; return aTs - bTs; } @@ -375,16 +376,18 @@ export default class Session { this.stackEvents = stackEventsList; // @ts-ignore this.frustrations = frustrationList; - return this; } addNotes(sessionNotes: Note[]) { + sessionNotes.forEach((note) => { + note.time = note.timestamp + }) // @ts-ignore this.notesWithEvents = [...this.notesWithEvents, ...sessionNotes].sort(sortEvents) || []; this.notes = sessionNotes; - console.log(this.notesWithEvents, sessionNotes) + return this; }