add incidents to session config

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

@@ -61,8 +61,7 @@ function EventGroupWrapper(props) {
     if (isIncident) {
       return (
         <Incident
-          from={event.time}
-          to={event.endTime - event.startTime + event.time}
+          isCurrent={isCurrent}
           label={event.label}
           onClick={onEventClick}
         />
@@ -191,7 +190,7 @@ function TabChange({ from, to, activeUrl, onClick }) {
   );
 };
 
-function Incident({ label, onClick }) {
+function Incident({ label, onClick, isCurrent }: { label: string; onClick: () => void; isCurrent?: boolean }) {
   const { t } = useTranslation();
   return (
     <div

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

@@ -34,8 +34,9 @@ function EventsBlock(props: IProps) {
   const { notesStore, uxtestingStore, uiPlayerStore, sessionStore } =
     useStore();
   const session = sessionStore.current;
-  const { notesWithEvents } = session;
-  const { uxtVideo, incidents } = session;
+  const notesWithEvents = session.notesWithEvents;
+  const incidents = session.incidents;
+  const uxtVideo = session.uxtVideo;
   const { filteredEvents } = sessionStore;
   const query = sessionStore.eventsQuery;
   const { eventsIndex } = sessionStore;
@@ -117,6 +118,7 @@ function EventsBlock(props: IProps) {
     zoomStartTs,
     zoomEndTs,
     uiPlayerStore.showOnlySearchEvents,
+    incidents,
   ]);
 
   const findLastFitting = React.useCallback(

frontend/app/components/ui/Icons/funnel_message_circle_warning.tsx

@@ -0,0 +1,18 @@
+/* Auto-generated, do not edit */
+import React from 'react';
+
+interface Props {
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
+  fill?: string;
+}
+
+function Funnel_message_circle_warning(props: Props) {
+    const { size = 14, width = size, height = size, fill = '' } = props;
+    return (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22ZM12 8v4M12 16h.01"/></svg>
+  );
+}
+
+export default Funnel_message_circle_warning;

frontend/app/components/ui/Icons/index.ts

@@ -288,6 +288,7 @@ export { default as Funnel_hdd_fill } from './funnel_hdd_fill';
 export { default as Funnel_hourglass_top } from './funnel_hourglass_top';
 export { default as Funnel_image_fill } from './funnel_image_fill';
 export { default as Funnel_image } from './funnel_image';
+export { default as Funnel_message_circle_warning } from './funnel_message_circle_warning';
 export { default as Funnel_microchip } from './funnel_microchip';
 export { default as Funnel_mouse } from './funnel_mouse';
 export { default as Funnel_patch_exclamation_fill } from './funnel_patch_exclamation_fill';

frontend/app/types/session/session.ts

@@ -142,6 +142,7 @@ export interface ISession {
   isMobileNative?: boolean;
   audio?: string;
   assistOnly?: boolean;
+  incidents?: Array<Incident>;
 }
 
 const emptyValues = {
@@ -328,6 +329,7 @@ export default class Session {
       canvasURL = [],
       uxtVideo = [],
       videoURL = [],
+      incidents = [],
       ...session
     } = sessionData;
     const duration = Duration.fromMillis(
@@ -447,6 +449,7 @@ export default class Session {
     userTestingEvents: any[] = [],
     incidents: any[] = [],
   ) {
+    console.log('ADD EVENTS', errors, issues, sessionEvents, incidents);
     const exceptions =
       (errors as IError[])?.map((e) => new SessionError(e)) || [];
     const issuesList =
@@ -517,10 +520,12 @@ export default class Session {
     );
 
     this.events = events;
+    console.log('notesWithEvents 0', this.notesWithEvents, mixedEventsWithIssues);
     // @ts-ignore
     this.notesWithEvents = [
       ...this.notesWithEvents,
       ...mixedEventsWithIssues,
+      ...incidentsList,
     ].sort(sortEvents);
     this.errors = exceptions;
     this.issues = issuesList;
@@ -530,6 +535,7 @@ export default class Session {
     this.crashes = crashes || [];
     this.addedEvents = true;
     this.incidents = incidentsList;
+    console.log('notesWithEvents', this.notesWithEvents, mixedEventsWithIssues);
     return this;
   }