fix(ui): fix events, double notes call etc

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<Note | undefined>(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}
       /> : <Loader style={{ position: 'fixed', top: '0%', left: '50%', transform: 'translateX(-50%)' }} />}
-      <Modal open={showNoteModal} onClose={onNoteClose}>
-        {showNoteModal ? (
+      <Modal open={noteItem !== undefined} onClose={onNoteClose}>
+        {noteItem !== undefined ? (
           <ReadNote
             note={noteItem}
             onClose={onNoteClose}

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

@@ -13,7 +13,8 @@ import { observer } from 'mobx-react-lite';
 import { RootStore } from 'App/duck';
 import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache';
 import { InjectedEvent } from 'Types/session/event';
-import Session, { mergeEventLists } from 'Types/session';
+import Session, { mergeEventLists, sortEvents } from 'Types/session';
+import { useStore } from 'App/mstore';
 
 interface IProps {
   setEventFilter: (filter: { query: string }) => void;
@@ -27,6 +28,7 @@ interface IProps {
 }
 
 function EventsBlock(props: IProps) {
+  const { notesStore } = useStore();
   const [mouseOver, setMouseOver] = React.useState(true);
   const scroller = React.useRef<List>(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<HTMLInputElement>) => {
     props.setEventFilter({ query: value });

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<HTMLDivElement>(null)
   const timelineRef = useRef<HTMLDivElement>(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 ? <div className={stl.stripes} /> : null}
           </div>
 
-          {events.map((e) => (
+          {events.map((e) => {
+            if (!e || e.key == undefined) console.log(e)
+            return (
             <div
               /*@ts-ignore TODO */
               key={e.key}
               className={stl.event}
               style={{ left: `${getTimelinePosition(e.time, scale)}%` }}
             />
-          ))}
+          )})}
           {/* 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']),

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 });
               }

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) {

frontend/app/player/web/TabManager.ts

@@ -84,7 +84,6 @@ export default class TabSessionManager {
         this.locationEventManager.append(e);
       }
     })
-
     this.updateLocalState({ ...this.lists.getFullListsState() });
   }
 

frontend/app/types/session/index.js

@@ -1 +1 @@
-export { default, mergeEventLists } from './session';
+export { default, mergeEventLists, sortEvents } from './session';

frontend/app/types/session/session.ts

@@ -33,9 +33,10 @@ export function mergeEventLists<T extends Record<string, any>, Y extends Record<
 
   return merged;
 }
-function sortEvents(a: Record<string, any>, b: Record<string, any>) {
-  const aTs = a.timestamp || a.time;
-  const bTs = b.timestamp || b.time;
+export function sortEvents(a: Record<string, any>, b: Record<string, any>) {
+
+  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;
   }