spot: db change from dev

Revert "spot: db change"
This reverts commit b4d060476a.
2024-08-20 17:28:48 +02:00 · 2024-08-20 17:27:44 +02:00 · 2024-08-20 12:17:20 +02:00 · 2024-08-14 18:23:13 +02:00 · 2024-07-26 00:31:40 +02:00 · 2024-07-25 14:27:08 +02:00
80 changed files with 1407 additions and 392 deletions
--- a/README_AR.md
+++ b/README_AR.md
@ -55,17 +55,17 @@ OpenReplay هو مجموعة إعادة تشغيل الجلسة التي يمك
 ## الميزات

 - **إعادة تشغيل الجلسة:** تتيح لك إعادة تشغيل الجلسة إعادة عيش تجربة مستخدميك، ورؤية أين يواجهون صعوبة وكيف يؤثر ذلك على سلوكهم. يتم تحليل كل إعادة تشغيل للجلسة تلقائيًا بناءً على الأساليب الاستدلالية، لسهولة التقييم.
- **أدوات التطوير (DevTools):** إنها مثل التصحيح في متصفحك الخاص. يوفر لك OpenReplay السياق الكامل (نشاط الشبكة، أخطاء JavaScript، إجراءات/حالة التخزين وأكثر من 40 مقياسًا) حتى تتمكن من إعادة إنتاج الأخطاء فورًا وفهم مشكلات الأداء.
+- **أدوات التطوير (DevTools):** إنها مثل المصحح (debugger) في متصفحك الخاص. يوفر لك OpenReplay السياق الكامل (نشاط الشبكة، أخطاء JavaScript، إجراءات/حالة التخزين وأكثر من 40 مقياسًا) حتى تتمكن من إعادة إنتاج الأخطاء فورًا وفهم مشكلات الأداء.
 - **المساعدة (Assist):** تساعدك في دعم مستخدميك من خلال رؤية شاشتهم مباشرة والانضمام فورًا إلى مكالمة (WebRTC) معهم دون الحاجة إلى برامج مشاركة الشاشة من جهات خارجية.
- **البحث الشامل (Omni-search):** ابحث وفرز حسب أي عملية/معيار للمستخدم تقريبًا، أو سمة الجلسة أو الحدث التقني، حتى تتمكن من الرد على أي سؤال. لا يلزم تجهيز.
+- **البحث الشامل (Omni-search):** ابحث وافرز حسب أي عملية/معيار للمستخدم تقريبًا، أو سمة الجلسة أو الحدث التقني، حتى تتمكن من الرد على أي سؤال. لا يلزم تجهيز.
 - **الأنفاق (Funnels):** للكشف عن المشكلات الأكثر تأثيرًا التي تسبب في فقدان التحويل والإيرادات.
- **ضوابط الخصوصية الدقيقة:** اختر ماذا تريد التقاطه، ماذا تريد أن تخفي أو تجاهل حتى لا تصل بيانات المستخدم حتى إلى خوادمك.
- **موجهة للمكونات الإضافية (Plugins oriented):** تصل إلى السبب الجذري بشكل أسرع عن طريق تتبع حالة التطبيق (Redux، VueX، MobX، NgRx، Pinia، وZustand) وتسجيل استعلامات GraphQL (Apollo، Relay) وطلبات Fetch/Axios.
+- **ضوابط الخصوصية الدقيقة:** اختر ماذا تريد التقاطه، ماذا تريد أن تخفي أو تتجاهل حتى لا تصل بيانات المستخدم حتى إلى خوادمك.
+- **موجهة للمكونات الإضافية (Plugins oriented):** يمكنك الوصول إلى السبب الجذري بشكل أسرع عن طريق تتبع حالة التطبيق (Redux، VueX، MobX، NgRx، Pinia، وZustand) وتسجيل استعلامات GraphQL (Apollo، Relay) وطلبات Fetch/Axios.
 - **التكاملات (Integrations):** مزامنة سجلات الخادم الخلفي مع إعادات التشغيل للجلسات ورؤية ما حدث من الأمام إلى الخلف. يدعم OpenReplay Sentry وDatadog وCloudWatch وStackdriver وElastic والمزيد.

 ## خيارات النشر

-يمكن نشر OpenReplay في أي مكان. اتبع دليلنا الخطوة بالخطوة لنشره على خدمات السحابة العامة الرئيسية:
+يمكن نشر OpenReplay في أي مكان. اتبع دليلنا خطوة بخطوة لنشره على خدمات السحابة العامة الرئيسة:

 - [AWS](https://docs.openreplay.com/deployment/deploy-aws)
 - [Google Cloud](https://docs.openreplay.com/deployment/deploy-gcp)
--- a/api/chalicelib/core/autocomplete.py
+++ b/api/chalicelib/core/autocomplete.py
@ -231,7 +231,7 @@ def __search_errors_mobile(project_id, value, key=None, source=None):
        query = f"""(SELECT DISTINCT ON(lg.reason)
                        lg.reason AS value,
                        '{events.EventType.CRASH_MOBILE.ui_type}' AS type
-                    FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_id) LEFT JOIN public.sessions AS s USING(session_id)
+                    FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_ios_id) LEFT JOIN public.sessions AS s USING(session_id)
                    WHERE
                      s.project_id = %(project_id)s
                      AND lg.project_id = %(project_id)s
@ -241,7 +241,7 @@ def __search_errors_mobile(project_id, value, key=None, source=None):
                    (SELECT DISTINCT ON(lg.name)
                        lg.name AS value,
                        '{events.EventType.CRASH_MOBILE.ui_type}' AS type
-                    FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_id) LEFT JOIN public.sessions AS s USING(session_id)
+                    FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_ios_id) LEFT JOIN public.sessions AS s USING(session_id)
                    WHERE
                      s.project_id = %(project_id)s
                      AND lg.project_id = %(project_id)s
@ -251,7 +251,7 @@ def __search_errors_mobile(project_id, value, key=None, source=None):
                    (SELECT DISTINCT ON(lg.reason)
                        lg.reason AS value,
                        '{events.EventType.CRASH_MOBILE.ui_type}' AS type
-                    FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_id) LEFT JOIN public.sessions AS s USING(session_id)
+                    FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_ios_id) LEFT JOIN public.sessions AS s USING(session_id)
                    WHERE
                      s.project_id = %(project_id)s
                      AND lg.project_id = %(project_id)s
@ -261,7 +261,7 @@ def __search_errors_mobile(project_id, value, key=None, source=None):
                    (SELECT DISTINCT ON(lg.name)
                        lg.name AS value,
                        '{events.EventType.CRASH_MOBILE.ui_type}' AS type
-                    FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_id) LEFT JOIN public.sessions AS s USING(session_id)
+                    FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_ios_id) LEFT JOIN public.sessions AS s USING(session_id)
                    WHERE
                      s.project_id = %(project_id)s
                      AND lg.project_id = %(project_id)s
@ -271,7 +271,7 @@ def __search_errors_mobile(project_id, value, key=None, source=None):
        query = f"""(SELECT DISTINCT ON(lg.reason)
                            lg.reason AS value,
                            '{events.EventType.CRASH_MOBILE.ui_type}' AS type
-                        FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_id) LEFT JOIN public.sessions AS s USING(session_id)
+                        FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_ios_id) LEFT JOIN public.sessions AS s USING(session_id)
                        WHERE
                          s.project_id = %(project_id)s
                          AND lg.project_id = %(project_id)s
@ -281,7 +281,7 @@ def __search_errors_mobile(project_id, value, key=None, source=None):
                        (SELECT DISTINCT ON(lg.name)
                            lg.name AS value,
                            '{events.EventType.CRASH_MOBILE.ui_type}' AS type
-                        FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_id) LEFT JOIN public.sessions AS s USING(session_id)
+                        FROM {events.EventType.CRASH_MOBILE.table} INNER JOIN public.crashes_ios AS lg USING (crash_ios_id) LEFT JOIN public.sessions AS s USING(session_id)
                        WHERE
                          s.project_id = %(project_id)s
                          AND lg.project_id = %(project_id)s
--- a/api/chalicelib/core/custom_metrics.py
+++ b/api/chalicelib/core/custom_metrics.py
@ -319,13 +319,14 @@ def create_card(project_id, user_id, data: schemas.CardSchema, dashboard=False):
        session_data = None
        if data.metric_type == schemas.MetricType.heat_map:
            if data.session_id is not None:
-                session_data = json.dumps({"sessionId": data.session_id})
+                session_data = {"sessionId": data.session_id}
            else:
                session_data = __get_heat_map_chart(project_id=project_id, user_id=user_id,
                                                    data=data, include_mobs=False)
                if session_data is not None:
-                    session_data = json.dumps({"sessionId": session_data["sessionId"]})
-        _data = {"session_data": session_data}
+                    session_data = {"sessionId": session_data["sessionId"]}
+
+        _data = {"session_data": json.dumps(session_data) if session_data is not None else None}
        for i, s in enumerate(data.series):
            for k in s.model_dump().keys():
                _data[f"{k}_{i}"] = s.__getattribute__(k)
--- a/api/chalicelib/core/events.py
+++ b/api/chalicelib/core/events.py
@ -134,7 +134,7 @@ class EventType:
    CUSTOM_MOBILE = Event(ui_type=schemas.EventType.custom_mobile, table="events_common.customs", column="name")
    REQUEST_MOBILE = Event(ui_type=schemas.EventType.request_mobile, table="events_common.requests", column="path")
    CRASH_MOBILE = Event(ui_type=schemas.EventType.error_mobile, table="events_common.crashes",
-                      column=None)  # column=None because errors are searched by name or message
+                         column=None)  # column=None because errors are searched by name or message


 SUPPORTED_TYPES = {
@ -163,22 +163,25 @@ SUPPORTED_TYPES = {
                                                query=None),
    #     MOBILE
    EventType.CLICK_MOBILE.ui_type: SupportedFilter(get=autocomplete.__generic_autocomplete(EventType.CLICK_MOBILE),
-                                                 query=autocomplete.__generic_query(
-                                                     typename=EventType.CLICK_MOBILE.ui_type)),
+                                                    query=autocomplete.__generic_query(
+                                                        typename=EventType.CLICK_MOBILE.ui_type)),
+    EventType.SWIPE_MOBILE.ui_type: SupportedFilter(get=autocomplete.__generic_autocomplete(EventType.SWIPE_MOBILE),
+                                                    query=autocomplete.__generic_query(
+                                                        typename=EventType.SWIPE_MOBILE.ui_type)),
    EventType.INPUT_MOBILE.ui_type: SupportedFilter(get=autocomplete.__generic_autocomplete(EventType.INPUT_MOBILE),
-                                                 query=autocomplete.__generic_query(
-                                                     typename=EventType.INPUT_MOBILE.ui_type)),
+                                                    query=autocomplete.__generic_query(
+                                                        typename=EventType.INPUT_MOBILE.ui_type)),
    EventType.VIEW_MOBILE.ui_type: SupportedFilter(get=autocomplete.__generic_autocomplete(EventType.VIEW_MOBILE),
-                                                query=autocomplete.__generic_query(
-                                                    typename=EventType.VIEW_MOBILE.ui_type)),
-    EventType.CUSTOM_MOBILE.ui_type: SupportedFilter(get=autocomplete.__generic_autocomplete(EventType.CUSTOM_MOBILE),
-                                                  query=autocomplete.__generic_query(
-                                                      typename=EventType.CUSTOM_MOBILE.ui_type)),
-    EventType.REQUEST_MOBILE.ui_type: SupportedFilter(get=autocomplete.__generic_autocomplete(EventType.REQUEST_MOBILE),
                                                   query=autocomplete.__generic_query(
-                                                       typename=EventType.REQUEST_MOBILE.ui_type)),
+                                                       typename=EventType.VIEW_MOBILE.ui_type)),
+    EventType.CUSTOM_MOBILE.ui_type: SupportedFilter(get=autocomplete.__generic_autocomplete(EventType.CUSTOM_MOBILE),
+                                                     query=autocomplete.__generic_query(
+                                                         typename=EventType.CUSTOM_MOBILE.ui_type)),
+    EventType.REQUEST_MOBILE.ui_type: SupportedFilter(get=autocomplete.__generic_autocomplete(EventType.REQUEST_MOBILE),
+                                                      query=autocomplete.__generic_query(
+                                                          typename=EventType.REQUEST_MOBILE.ui_type)),
    EventType.CRASH_MOBILE.ui_type: SupportedFilter(get=autocomplete.__search_errors_mobile,
-                                                 query=None),
+                                                    query=None),
 }


--- a/api/chalicelib/core/sessions.py
+++ b/api/chalicelib/core/sessions.py
@ -359,12 +359,12 @@ def search2_table(data: schemas.SessionsSearchPayloadSchema, project_id: int, de
                distinct_on += ",path"
            if metric_format == schemas.MetricExtendedFormatType.session_count:
                main_query = f"""SELECT COUNT(*) AS count,
-                                    COALESCE(SUM(users_sessions.session_count),0) AS total_sessions,
+                                    COALESCE(SUM(users_sessions.session_count),0) AS count,
                                    COALESCE(JSONB_AGG(users_sessions) 
                                            FILTER ( WHERE rn > %(limit_s)s 
                                                        AND rn <= %(limit_e)s ), '[]'::JSONB) AS values
                                 FROM (SELECT {main_col} AS name,
-                                     count(DISTINCT session_id)                                   AS session_count,
+                                     count(DISTINCT session_id)                                   AS total,
                                     ROW_NUMBER() OVER (ORDER BY count(full_sessions) DESC) AS rn
                                       FROM (SELECT *
                                             FROM (SELECT DISTINCT ON({distinct_on}) s.session_id, s.user_uuid, 
@ -379,7 +379,7 @@ def search2_table(data: schemas.SessionsSearchPayloadSchema, project_id: int, de
                                 ORDER BY session_count DESC) AS users_sessions;"""
            else:
                main_query = f"""SELECT COUNT(*) AS count,
-                                    COALESCE(SUM(users_sessions.user_count),0) AS total_users,
+                                    COALESCE(SUM(users_sessions.user_count),0) AS count,
                                    COALESCE(JSONB_AGG(users_sessions) FILTER ( WHERE rn <= 200 ), '[]'::JSONB) AS values
                                 FROM (SELECT {main_col} AS name,
                                         count(DISTINCT user_id)                                AS user_count,
@ -420,12 +420,12 @@ def search_table_of_individual_issues(data: schemas.SessionsSearchPayloadSchema,
        full_args["issues_limit_s"] = (data.page - 1) * data.limit
        full_args["issues_limit_e"] = data.page * data.limit
        main_query = cur.mogrify(f"""SELECT COUNT(1) AS count,
-                                            COALESCE(SUM(session_count), 0) AS total_sessions,
+                                            COALESCE(SUM(session_count), 0) AS count,
                                            COALESCE(JSONB_AGG(ranked_issues) 
                                                FILTER ( WHERE rn > %(issues_limit_s)s 
                                                            AND rn <= %(issues_limit_e)s ), '[]'::JSONB) AS values
                                      FROM (SELECT *, ROW_NUMBER() OVER (ORDER BY session_count DESC) AS rn
-                                            FROM (SELECT type AS name, context_string AS value, COUNT(DISTINCT session_id) AS session_count
+                                            FROM (SELECT type AS name, context_string AS value, COUNT(DISTINCT session_id) AS total
                                                  FROM (SELECT session_id
                                                        {query_part}) AS filtered_sessions
                                                     INNER JOIN events_common.issues USING (session_id)
@ -814,12 +814,6 @@ def search_query_parts(data: schemas.SessionsSearchPayloadSchema, error_status,
                        event_where.append(
                            sh.multi_conditions(f"main.{events.EventType.VIEW_MOBILE.column} {op} %({e_k})s",
                                                event.value, value_key=e_k))
-            elif event_type == events.EventType.SWIPE_MOBILE.ui_type and platform == "ios":
-                event_from = event_from % f"{events.EventType.SWIPE_MOBILE.table} AS main "
-                if not is_any:
-                    event_where.append(
-                        sh.multi_conditions(f"main.{events.EventType.SWIPE_MOBILE.column} {op} %({e_k})s",
-                                            event.value, value_key=e_k))
            elif event_type == events.EventType.CUSTOM.ui_type:
                event_from = event_from % f"{events.EventType.CUSTOM.table} AS main "
                if not is_any:
@ -855,7 +849,7 @@ def search_query_parts(data: schemas.SessionsSearchPayloadSchema, error_status,
                    event_where.append(sh.multi_conditions(f"main1.source = %({s_k})s", event.source, value_key=s_k))


-            # ----- IOS
+            # ----- Mobile
            elif event_type == events.EventType.CLICK_MOBILE.ui_type:
                event_from = event_from % f"{events.EventType.CLICK_MOBILE.table} AS main "
                if not is_any:
@ -892,11 +886,18 @@ def search_query_parts(data: schemas.SessionsSearchPayloadSchema, error_status,
                        sh.multi_conditions(f"main.{events.EventType.REQUEST_MOBILE.column} {op} %({e_k})s",
                                            event.value, value_key=e_k))
            elif event_type == events.EventType.CRASH_MOBILE.ui_type:
-                event_from = event_from % f"{events.EventType.CRASH_MOBILE.table} AS main INNER JOIN public.crashes_ios AS main1 USING(crash_id)"
+                event_from = event_from % f"{events.EventType.CRASH_MOBILE.table} AS main INNER JOIN public.crashes_ios AS main1 USING(crash_ios_id)"
                if not is_any and event.value not in [None, "*", ""]:
                    event_where.append(
                        sh.multi_conditions(f"(main1.reason {op} %({e_k})s OR main1.name {op} %({e_k})s)",
                                            event.value, value_key=e_k))
+            elif event_type == events.EventType.SWIPE_MOBILE.ui_type and platform != "web":
+                event_from = event_from % f"{events.EventType.SWIPE_MOBILE.table} AS main "
+                if not is_any:
+                    event_where.append(
+                        sh.multi_conditions(f"main.{events.EventType.SWIPE_MOBILE.column} {op} %({e_k})s",
+                                            event.value, value_key=e_k))
+
            elif event_type == schemas.PerformanceEventType.fetch_failed:
                event_from = event_from % f"{events.EventType.REQUEST.table} AS main "
                if not is_any:
--- a/api/routers/core.py
+++ b/api/routers/core.py
@ -19,6 +19,7 @@ from routers.base import get_routers
 public_app, app, app_apikey = get_routers()


+@app.get('/{projectId}/autocomplete', tags=["events"])
@app.get('/{projectId}/events/search', tags=["events"])
 def events_search(projectId: int, q: str,
                  type: Union[schemas.FilterType, schemas.EventType,
--- a/api/schemas/schemas.py
+++ b/api/schemas/schemas.py
@ -48,12 +48,12 @@ def transform_old_filter_type(cls, values):
        "GRAPHQL": EventType.graphql.value,
        "STATEACTION": EventType.state_action.value,
        "ERROR": EventType.error.value,
-        "CLICK_MOBILE": EventType.click_mobile.value,
-        "INPUT_MOBILE": EventType.input_mobile.value,
-        "VIEW_MOBILE": EventType.view_mobile.value,
-        "CUSTOM_MOBILE": EventType.custom_mobile.value,
-        "REQUEST_MOBILE": EventType.request_mobile.value,
-        "ERROR_MOBILE": EventType.error_mobile.value,
+        "CLICK_IOS": EventType.click_mobile.value,
+        "INPUT_IOS": EventType.input_mobile.value,
+        "VIEW_IOS": EventType.view_mobile.value,
+        "CUSTOM_IOS": EventType.custom_mobile.value,
+        "REQUEST_IOS": EventType.request_mobile.value,
+        "ERROR_IOS": EventType.error_mobile.value,
        "DOM_COMPLETE": PerformanceEventType.location_dom_complete.value,
        "LARGEST_CONTENTFUL_PAINT_TIME": PerformanceEventType.location_largest_contentful_paint_time.value,
        "TTFB": PerformanceEventType.location_ttfb.value,
@ -471,13 +471,13 @@ class EventType(str, Enum):
    state_action = "stateAction"
    error = "error"
    tag = "tag"
-    click_mobile = "tapIos"
-    input_mobile = "inputIos"
-    view_mobile = "viewIos"
-    custom_mobile = "customIos"
-    request_mobile = "requestIos"
-    error_mobile = "errorIos"
-    swipe_mobile = "swipeIos"
+    click_mobile = "clickMobile"
+    input_mobile = "inputMobile"
+    view_mobile = "viewMobile"
+    custom_mobile = "customMobile"
+    request_mobile = "requestMobile"
+    error_mobile = "errorMobile"
+    swipe_mobile = "swipeMobile"


 class PerformanceEventType(str, Enum):
@ -1459,7 +1459,7 @@ class LiveSessionSearchFilterSchema(BaseModel):
    operator: Literal[SearchEventOperator._is, \
        SearchEventOperator._contains] = Field(default=SearchEventOperator._contains)

-    transform = model_validator(mode='before')(transform_old_filter_type)
+    _transform = model_validator(mode='before')(transform_old_filter_type)

    @model_validator(mode='after')
    def __validator(cls, values):
--- a/backend/internal/db/datasaver/saver.go
+++ b/backend/internal/db/datasaver/saver.go
@ -81,13 +81,13 @@ func (s *saverImpl) handleMobileMessage(msg Message) error {
 		if err = s.sessions.UpdateUserID(session.SessionID, m.ID); err != nil {
 			return err
 		}
-		s.pg.InsertAutocompleteValue(session.SessionID, session.ProjectID, "USERID_Mobile", m.ID)
+		s.pg.InsertAutocompleteValue(session.SessionID, session.ProjectID, "USERIDMOBILE", m.ID)
 		return nil
 	case *MobileUserAnonymousID:
 		if err = s.sessions.UpdateAnonymousID(session.SessionID, m.ID); err != nil {
 			return err
 		}
-		s.pg.InsertAutocompleteValue(session.SessionID, session.ProjectID, "USERANONYMOUSID_Mobile", m.ID)
+		s.pg.InsertAutocompleteValue(session.SessionID, session.ProjectID, "USERANONYMOUSIDMOBILE", m.ID)
 		return nil
 	case *MobileMetadata:
 		return s.sessions.UpdateMetadata(m.SessionID(), m.Key, m.Value)
--- a/backend/pkg/db/postgres/events.go
+++ b/backend/pkg/db/postgres/events.go
@ -132,8 +132,15 @@ func (conn *Conn) InsertWebClickEvent(sess *sessions.Session, e *messages.MouseC
 	}
 	var host, path string
 	host, path, _, _ = url.GetURLParts(e.Url)
-	if e.NormalizedX <= 100 && e.NormalizedY <= 100 {
-		if err := conn.bulks.Get("webClickXYEvents").Append(sess.SessionID, truncSqIdx(e.MsgID()), e.Timestamp, e.Label, e.Selector, host+path, path, e.HesitationTime, e.NormalizedX, e.NormalizedY); err != nil {
+	if e.NormalizedX != 101 && e.NormalizedY != 101 {
+		// To support previous versions of tracker
+		if e.NormalizedX <= 100 && e.NormalizedY <= 100 {
+			e.NormalizedX *= 100
+			e.NormalizedY *= 100
+		}
+		normalizedX := float32(e.NormalizedX) / 100.0
+		normalizedY := float32(e.NormalizedY) / 100.0
+		if err := conn.bulks.Get("webClickXYEvents").Append(sess.SessionID, truncSqIdx(e.MsgID()), e.Timestamp, e.Label, e.Selector, host+path, path, e.HesitationTime, normalizedX, normalizedY); err != nil {
 			sessCtx := context.WithValue(context.Background(), "sessionID", sess.SessionID)
 			conn.log.Error(sessCtx, "insert web click event in bulk err: %s", err)
 		}
--- a/backend/pkg/db/postgres/mobile.go
+++ b/backend/pkg/db/postgres/mobile.go
@ -13,14 +13,14 @@ func (conn *Conn) InsertMobileEvent(session *sessions.Session, e *messages.Mobil
 	if err := conn.InsertCustomEvent(session.SessionID, e.Timestamp, truncSqIdx(e.Index), e.Name, e.Payload); err != nil {
 		return err
 	}
-	conn.InsertAutocompleteValue(session.SessionID, session.ProjectID, "CUSTOM_Mobile", e.Name)
+	conn.InsertAutocompleteValue(session.SessionID, session.ProjectID, "CUSTOMMOBILE", e.Name)
 	return nil
 }

 func (conn *Conn) InsertMobileNetworkCall(sess *sessions.Session, e *messages.MobileNetworkCall) error {
 	err := conn.InsertRequest(sess.SessionID, e.Timestamp, truncSqIdx(e.Index), e.URL, e.Duration, e.Status < 400)
 	if err == nil {
-		conn.InsertAutocompleteValue(sess.SessionID, sess.ProjectID, "REQUEST_Mobile", url.DiscardURLQuery(e.URL))
+		conn.InsertAutocompleteValue(sess.SessionID, sess.ProjectID, "REQUESTMOBILE", url.DiscardURLQuery(e.URL))
 	}
 	return err
 }
@ -36,7 +36,7 @@ func (conn *Conn) InsertMobileClickEvent(sess *sessions.Session, clickEvent *mes
 	); err != nil {
 		return err
 	}
-	conn.InsertAutocompleteValue(sess.SessionID, sess.ProjectID, "CLICK_Mobile", clickEvent.Label)
+	conn.InsertAutocompleteValue(sess.SessionID, sess.ProjectID, "CLICKMOBILE", clickEvent.Label)
 	return nil
 }

@ -51,7 +51,7 @@ func (conn *Conn) InsertMobileSwipeEvent(sess *sessions.Session, swipeEvent *mes
 	); err != nil {
 		return err
 	}
-	conn.InsertAutocompleteValue(sess.SessionID, sess.ProjectID, "SWIPE_Mobile", swipeEvent.Label)
+	conn.InsertAutocompleteValue(sess.SessionID, sess.ProjectID, "SWIPEMOBILE", swipeEvent.Label)
 	return nil
 }

@ -66,7 +66,7 @@ func (conn *Conn) InsertMobileInputEvent(sess *sessions.Session, inputEvent *mes
 	); err != nil {
 		return err
 	}
-	conn.InsertAutocompleteValue(sess.SessionID, sess.ProjectID, "INPUT_Mobile", inputEvent.Label)
+	conn.InsertAutocompleteValue(sess.SessionID, sess.ProjectID, "INPUTMOBILE", inputEvent.Label)
 	return nil
 }

--- a/ee/api/auth/auth_jwt.py
+++ b/ee/api/auth/auth_jwt.py
@ -29,6 +29,11 @@ def _get_current_auth_context(request: Request, jwt_payload: dict) -> schemas.Cu
    return request.state.currentContext


+def _allow_access_to_endpoint(request: Request, current_context: schemas.CurrentContext) -> bool:
+    return not current_context.service_account \
+        or request.url.path not in ["/logout", "/api/logout", "/refresh", "/api/refresh"]
+
+
 class JWTAuth(HTTPBearer):
    def __init__(self, auto_error: bool = True):
        super(JWTAuth, self).__init__(auto_error=auto_error)
@ -68,7 +73,10 @@ class JWTAuth(HTTPBearer):
                        or old_jwt_payload.get("userId") != jwt_payload.get("userId"):
                    raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Invalid token or expired token.")

-                return _get_current_auth_context(request=request, jwt_payload=jwt_payload)
+                ctx = _get_current_auth_context(request=request, jwt_payload=jwt_payload)
+                if not _allow_access_to_endpoint(request=request, current_context=ctx):
+                    raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Unauthorized endpoint.")
+                return ctx

        else:
            credentials: HTTPAuthorizationCredentials = await super(JWTAuth, self).__call__(request)
@ -95,7 +103,10 @@ class JWTAuth(HTTPBearer):

                    raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Invalid token or expired token.")

-                return _get_current_auth_context(request=request, jwt_payload=jwt_payload)
+                ctx = _get_current_auth_context(request=request, jwt_payload=jwt_payload)
+                if not _allow_access_to_endpoint(request=request, current_context=ctx):
+                    raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Unauthorized endpoint.")
+                return ctx

        logger.warning("Invalid authorization code.")
        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="Invalid authorization code.")
--- a/ee/api/chalicelib/core/custom_metrics.py
+++ b/ee/api/chalicelib/core/custom_metrics.py
@ -339,10 +339,13 @@ def create_card(project_id, user_id, data: schemas.CardSchema, dashboard=False):
        session_data = None
        if data.metric_type == schemas.MetricType.heat_map:
            if data.session_id is not None:
-                session_data = json.dumps({"sessionId": data.session_id})
+                session_data = {"sessionId": data.session_id}
            else:
                session_data = __get_heat_map_chart(project_id=project_id, user_id=user_id,
                                                    data=data, include_mobs=False)
+                if session_data is not None:
+                    session_data = {"sessionId": session_data["sessionId"]}
+
            if session_data is not None:
                # for EE only
                keys = sessions_mobs. \
@ -356,8 +359,8 @@ def create_card(project_id, user_id, data: schemas.CardSchema, dashboard=False):
                    except Exception as e:
                        logger.warning(f"!!!Error while tagging: {k} to {tag} for heatMap")
                        logger.error(str(e))
-                session_data = json.dumps(session_data)
-        _data = {"session_data": session_data}
+
+        _data = {"session_data": json.dumps(session_data) if session_data is not None else None}
        for i, s in enumerate(data.series):
            for k in s.model_dump().keys():
                _data[f"{k}_{i}"] = s.__getattribute__(k)
--- a/ee/api/chalicelib/core/heatmaps.py
+++ b/ee/api/chalicelib/core/heatmaps.py
@ -57,16 +57,16 @@ def get_by_url(project_id, data: schemas.GetHeatMapPayloadSchema):
    #                                                    f.value, value_key=f_k))

    if data.click_rage and not has_click_rage_filter:
-        constraints.append("""(issues.session_id IS NULL 
-                                OR (issues.datetime >= toDateTime(%(startDate)s/1000)
-                                    AND issues.datetime <= toDateTime(%(endDate)s/1000)
-                                    AND issues.project_id = toUInt16(%(project_id)s)
-                                    AND issues.event_type = 'ISSUE'
-                                    AND issues.project_id = toUInt16(%(project_id)s
-                                    AND mis.project_id = toUInt16(%(project_id)s
-                                    AND mis.type='click_rage'))))""")
-        query_from += """ LEFT JOIN experimental.events AS issues ON (main_events.session_id=issues.session_id)
-                       LEFT JOIN experimental.issues AS mis ON (issues.issue_id=mis.issue_id)"""
+        constraints.append("""(issues_t.session_id IS NULL 
+                                OR (issues_t.datetime >= toDateTime(%(startDate)s/1000)
+                                    AND issues_t.datetime <= toDateTime(%(endDate)s/1000)
+                                    AND issues_t.project_id = toUInt16(%(project_id)s)
+                                    AND issues_t.event_type = 'ISSUE'
+                                    AND issues_t.project_id = toUInt16(%(project_id)s)
+                                    AND mis.project_id = toUInt16(%(project_id)s)
+                                    AND mis.type='click_rage'))""")
+        query_from += """ LEFT JOIN experimental.events AS issues_t ON (main_events.session_id=issues_t.session_id)
+                       LEFT JOIN experimental.issues AS mis ON (issues_t.issue_id=mis.issue_id)"""
    with ch_client.ClickHouseClient() as cur:
        query = cur.format(f"""SELECT main_events.normalized_x AS normalized_x, 
                                            main_events.normalized_y AS normalized_y
--- a/ee/api/chalicelib/core/sessions_exp.py
+++ b/ee/api/chalicelib/core/sessions_exp.py
@ -442,7 +442,8 @@ def search2_table(data: schemas.SessionsSearchPayloadSchema, project_id: int, de
            if metric_format == schemas.MetricExtendedFormatType.session_count:
                main_query = f"""SELECT COUNT(DISTINCT {main_col}) OVER () AS main_count, 
                                     {main_col} AS name,
-                                     count(DISTINCT session_id) AS session_count
+                                     count(DISTINCT session_id) AS session_count,
+                                     COALESCE(SUM(count(DISTINCT session_id)) OVER (), 0) AS total_sessions
                                FROM (SELECT s.session_id AS session_id, 
                                            {extra_col}
                                {query_part}) AS filtred_sessions
@ -470,11 +471,14 @@ def search2_table(data: schemas.SessionsSearchPayloadSchema, project_id: int, de
            logging.debug("--------------------")
            sessions = cur.execute(main_query)
            count = 0
+            total_sessions = 0
            if len(sessions) > 0:
                count = sessions[0]["main_count"]
+                total_sessions = sessions[0]["total_sessions"]
                for s in sessions:
                    s.pop("main_count")
-            sessions = {"count": count, "values": helper.list_to_camel_case(sessions)}
+                    s.pop("total_sessions")
+            sessions = {"total": count, "count": total_sessions, "values": helper.list_to_camel_case(sessions)}

        return sessions

@ -520,7 +524,7 @@ def search_table_of_individual_issues(data: schemas.SessionsSearchPayloadSchema,
            total_sessions = 0
            issues_count = 0

-        return {"count": issues_count, "totalSessions": total_sessions, "values": issues}
+        return {"total": issues_count, "count": total_sessions, "values": issues}


 def __is_valid_event(is_any: bool, event: schemas.SessionSearchEventSchema2):
@ -563,7 +567,7 @@ def __get_event_type(event_type: Union[schemas.EventType, schemas.PerformanceEve
        schemas.PerformanceEventType.fetch_failed: "REQUEST",
        schemas.EventType.error: "CRASH",
    }
-    if platform == "ios" and event_type in defs_mobile:
+    if platform != "web" and event_type in defs_mobile:
        return defs_mobile.get(event_type)
    if event_type not in defs:
        raise Exception(f"unsupported EventType:{event_type}")
@ -964,7 +968,7 @@ def search_query_parts_ch(data: schemas.SessionsSearchPayloadSchema, error_statu
                                                                value_key=f"custom{i}"))
                        full_args = {**full_args, **_multiple_values(event.source, value_key=f"custom{i}")}
                else:
-                    _column = events.EventType.INPUT_IOS.column
+                    _column = events.EventType.INPUT_MOBILE.column
                    event_where.append(f"main.event_type='{__get_event_type(event_type, platform=platform)}'")
                    events_conditions.append({"type": event_where[-1]})
                    if not is_any:
@ -997,7 +1001,7 @@ def search_query_parts_ch(data: schemas.SessionsSearchPayloadSchema, error_statu
                                                                    event.value, value_key=e_k))
                            events_conditions[-1]["condition"] = event_where[-1]
                else:
-                    _column = events.EventType.VIEW_IOS.column
+                    _column = events.EventType.VIEW_MOBILE.column
                    event_where.append(f"main.event_type='{__get_event_type(event_type, platform=platform)}'")
                    events_conditions.append({"type": event_where[-1]})
                    if not is_any:
@ -1089,6 +1093,114 @@ def search_query_parts_ch(data: schemas.SessionsSearchPayloadSchema, error_statu

                events_conditions[-1]["condition"] = " AND ".join(events_conditions[-1]["condition"])

+            # ----- Mobile
+            elif event_type == events.EventType.CLICK_MOBILE.ui_type:
+                _column = events.EventType.CLICK_MOBILE.column
+                event_where.append(f"main.event_type='{__get_event_type(event_type, platform=platform)}'")
+                events_conditions.append({"type": event_where[-1]})
+                if not is_any:
+                    if is_not:
+                        event_where.append(_multiple_conditions(f"sub.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions_not.append(
+                            {"type": f"sub.event_type='{__get_event_type(event_type, platform=platform)}'"})
+                        events_conditions_not[-1]["condition"] = event_where[-1]
+                    else:
+                        event_where.append(_multiple_conditions(f"main.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions[-1]["condition"] = event_where[-1]
+            elif event_type == events.EventType.INPUT_MOBILE.ui_type:
+                _column = events.EventType.INPUT_MOBILE.column
+                event_where.append(f"main.event_type='{__get_event_type(event_type, platform=platform)}'")
+                events_conditions.append({"type": event_where[-1]})
+                if not is_any:
+                    if is_not:
+                        event_where.append(_multiple_conditions(f"sub.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions_not.append(
+                            {"type": f"sub.event_type='{__get_event_type(event_type, platform=platform)}'"})
+                        events_conditions_not[-1]["condition"] = event_where[-1]
+                    else:
+                        event_where.append(_multiple_conditions(f"main.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions[-1]["condition"] = event_where[-1]
+            elif event_type == events.EventType.VIEW_MOBILE.ui_type:
+                _column = events.EventType.VIEW_MOBILE.column
+                event_where.append(f"main.event_type='{__get_event_type(event_type, platform=platform)}'")
+                events_conditions.append({"type": event_where[-1]})
+                if not is_any:
+                    if is_not:
+                        event_where.append(_multiple_conditions(f"sub.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions_not.append(
+                            {"type": f"sub.event_type='{__get_event_type(event_type, platform=platform)}'"})
+                        events_conditions_not[-1]["condition"] = event_where[-1]
+                    else:
+                        event_where.append(_multiple_conditions(f"main.{_column} {op} %({e_k})s",
+                                                                event.value, value_key=e_k))
+                        events_conditions[-1]["condition"] = event_where[-1]
+            elif event_type == events.EventType.CUSTOM_MOBILE.ui_type:
+                _column = events.EventType.CUSTOM_MOBILE.column
+                event_where.append(f"main.event_type='{__get_event_type(event_type, platform=platform)}'")
+                events_conditions.append({"type": event_where[-1]})
+                if not is_any:
+                    if is_not:
+                        event_where.append(_multiple_conditions(f"sub.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions_not.append(
+                            {"type": f"sub.event_type='{__get_event_type(event_type, platform=platform)}'"})
+                        events_conditions_not[-1]["condition"] = event_where[-1]
+                    else:
+                        event_where.append(_multiple_conditions(f"main.{_column} {op} %({e_k})s",
+                                                                event.value, value_key=e_k))
+                        events_conditions[-1]["condition"] = event_where[-1]
+            elif event_type == events.EventType.REQUEST_MOBILE.ui_type:
+                event_from = event_from % f"{MAIN_EVENTS_TABLE} AS main "
+                _column = 'url_path'
+                event_where.append(f"main.event_type='{__get_event_type(event_type, platform=platform)}'")
+                events_conditions.append({"type": event_where[-1]})
+                if not is_any:
+                    if is_not:
+                        event_where.append(_multiple_conditions(f"sub.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions_not.append(
+                            {"type": f"sub.event_type='{__get_event_type(event_type, platform=platform)}'"})
+                        events_conditions_not[-1]["condition"] = event_where[-1]
+                    else:
+                        event_where.append(_multiple_conditions(f"main.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions[-1]["condition"] = event_where[-1]
+            elif event_type == events.EventType.CRASH_MOBILE.ui_type:
+                _column = events.EventType.CRASH_MOBILE.column
+                event_where.append(f"main.event_type='{__get_event_type(event_type, platform=platform)}'")
+                events_conditions.append({"type": event_where[-1]})
+                if not is_any:
+                    if is_not:
+                        event_where.append(_multiple_conditions(f"sub.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions_not.append(
+                            {"type": f"sub.event_type='{__get_event_type(event_type, platform=platform)}'"})
+                        events_conditions_not[-1]["condition"] = event_where[-1]
+                    else:
+                        event_where.append(_multiple_conditions(f"main.{_column} {op} %({e_k})s",
+                                                                event.value, value_key=e_k))
+                        events_conditions[-1]["condition"] = event_where[-1]
+            elif event_type == events.EventType.SWIPE_MOBILE.ui_type and platform != "web":
+                _column = events.EventType.SWIPE_MOBILE.column
+                event_where.append(f"main.event_type='{__get_event_type(event_type, platform=platform)}'")
+                events_conditions.append({"type": event_where[-1]})
+                if not is_any:
+                    if is_not:
+                        event_where.append(_multiple_conditions(f"sub.{_column} {op} %({e_k})s", event.value,
+                                                                value_key=e_k))
+                        events_conditions_not.append(
+                            {"type": f"sub.event_type='{__get_event_type(event_type, platform=platform)}'"})
+                        events_conditions_not[-1]["condition"] = event_where[-1]
+                    else:
+                        event_where.append(_multiple_conditions(f"main.{_column} {op} %({e_k})s",
+                                                                event.value, value_key=e_k))
+                        events_conditions[-1]["condition"] = event_where[-1]
+
            elif event_type == schemas.PerformanceEventType.fetch_failed:
                event_from = event_from % f"{MAIN_EVENTS_TABLE} AS main "
                _column = 'url_path'
--- a/ee/api/chalicelib/core/sessions_insights.py
+++ b/ee/api/chalicelib/core/sessions_insights.py
@ -185,8 +185,9 @@ def __filter_subquery(project_id: int, filters: Optional[schemas.SessionsSearchP
                                                                  errors_only=True, favorite_only=None,
                                                                  issue=None, user_id=None)
        params = {**params, **qp_params}
-        # TODO: test if this line impacts other cards beside insights
-        # sub_query = f"INNER JOIN {sub_query} USING(session_id)"
+        # This line was added because insights is failing when you add filter steps,
+        # for example when you add a LOCATION filter
+        sub_query = f"INNER JOIN {sub_query} USING(session_id)"
    return params, sub_query


--- a/ee/backend/pkg/db/clickhouse/connector.go
+++ b/ee/backend/pkg/db/clickhouse/connector.go
@ -397,12 +397,19 @@ func (c *connectorImpl) InsertWebClickEvent(session *sessions.Session, msg *mess
 	if msg.Label == "" {
 		return nil
 	}
-	var nX *uint8 = nil
-	var nY *uint8 = nil
-	if msg.NormalizedX <= 100 && msg.NormalizedY <= 100 {
-		nXVal := uint8(msg.NormalizedX)
+	var nX *float32 = nil
+	var nY *float32 = nil
+	if msg.NormalizedX != 101 && msg.NormalizedY != 101 {
+		// To support previous versions of tracker
+		if msg.NormalizedX <= 100 && msg.NormalizedY <= 100 {
+			msg.NormalizedX *= 100
+			msg.NormalizedY *= 100
+		}
+		normalizedX := float32(msg.NormalizedX) / 100.0
+		normalizedY := float32(msg.NormalizedY) / 100.0
+		nXVal := normalizedX
 		nX = &nXVal
-		nYVal := uint8(msg.NormalizedY)
+		nYVal := normalizedY
 		nY = &nYVal
 	}
 	if err := c.batches["clicks"].Append(
--- a/ee/scripts/schema/db/init_dbs/clickhouse/1.19.0/1.19.0.sql
+++ b/ee/scripts/schema/db/init_dbs/clickhouse/1.19.0/1.19.0.sql
@ -3,8 +3,8 @@ CREATE OR REPLACE FUNCTION openreplay_version AS() -> 'v1.19.0-ee';
 DROP TABLE IF EXISTS experimental.events_l7d_mv;

 ALTER TABLE experimental.events
-    ADD COLUMN IF NOT EXISTS normalized_x Nullable(UInt8),
-    ADD COLUMN IF NOT EXISTS normalized_y Nullable(UInt8),
+    ADD COLUMN IF NOT EXISTS normalized_x Nullable(Float32),
+    ADD COLUMN IF NOT EXISTS normalized_y Nullable(Float32),
    DROP COLUMN IF EXISTS coordinate;

 CREATE MATERIALIZED VIEW IF NOT EXISTS experimental.events_l7d_mv
--- a/ee/scripts/schema/db/init_dbs/clickhouse/create/init_schema.sql
+++ b/ee/scripts/schema/db/init_dbs/clickhouse/create/init_schema.sql
@ -81,8 +81,8 @@ CREATE TABLE IF NOT EXISTS experimental.events
    error_tags_values              Array(Nullable(String)),
    transfer_size                  Nullable(UInt32),
    selector                       Nullable(String),
-    normalized_x                   Nullable(UInt8),
-    normalized_y                   Nullable(UInt8),
+    normalized_x                   Nullable(Float32),
+    normalized_y                   Nullable(Float32),
    message_id                     UInt64                               DEFAULT 0,
    _timestamp                     DateTime                             DEFAULT now()
 ) ENGINE = ReplacingMergeTree(_timestamp)
--- a/ee/scripts/schema/db/init_dbs/postgresql/1.19.0/1.19.0.sql
+++ b/ee/scripts/schema/db/init_dbs/postgresql/1.19.0/1.19.0.sql
@ -19,8 +19,8 @@ $fn_def$, :'next_version')

 --
 ALTER TABLE IF EXISTS events.clicks
-    ADD COLUMN IF NOT EXISTS normalized_x smallint NULL,
-    ADD COLUMN IF NOT EXISTS normalized_y smallint NULL,
+    ADD COLUMN IF NOT EXISTS normalized_x decimal NULL,
+    ADD COLUMN IF NOT EXISTS normalized_y decimal NULL,
    DROP COLUMN IF EXISTS x,
    DROP COLUMN IF EXISTS y;

--- a/ee/scripts/schema/db/init_dbs/postgresql/init_schema.sql
+++ b/ee/scripts/schema/db/init_dbs/postgresql/init_schema.sql
@ -659,16 +659,16 @@ CREATE INDEX pages_query_nn_gin_idx ON events.pages USING GIN (query gin_trgm_op

 CREATE TABLE events.clicks
 (
-    session_id   bigint              NOT NULL REFERENCES public.sessions (session_id) ON DELETE CASCADE,
-    message_id   bigint              NOT NULL,
-    timestamp    bigint              NOT NULL,
-    label        text     DEFAULT NULL,
-    url          text     DEFAULT '' NOT NULL,
+    session_id   bigint             NOT NULL REFERENCES public.sessions (session_id) ON DELETE CASCADE,
+    message_id   bigint             NOT NULL,
+    timestamp    bigint             NOT NULL,
+    label        text    DEFAULT NULL,
+    url          text    DEFAULT '' NOT NULL,
    path         text,
-    selector     text     DEFAULT '' NOT NULL,
-    hesitation   integer  DEFAULT NULL,
-    normalized_x smallint DEFAULT NULL,
-    normalized_y smallint DEFAULT NULL,
+    selector     text    DEFAULT '' NOT NULL,
+    hesitation   integer DEFAULT NULL,
+    normalized_x decimal DEFAULT NULL,
+    normalized_y decimal DEFAULT NULL,
    PRIMARY KEY (session_id, message_id)
 );
 CREATE INDEX clicks_session_id_idx ON events.clicks (session_id);
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@ -62,9 +62,9 @@ function ClickMapCard({
        if (mapUrl) return evt.path.includes(mapUrl)
        return evt
    }) || { timestamp: metricStore.instance.data.startTs }
-
-    const jumpTimestamp = (jumpToEvent.timestamp - metricStore.instance.data.startTs) + jumpToEvent.domBuildingTime + 99 // 99ms safety margin to give some time for the DOM to load
-
+    const ts = jumpToEvent.timestamp ?? metricStore.instance.data.startTs
+    const domTime = jumpToEvent.domBuildingTime ?? 0
+    const jumpTimestamp = (ts - metricStore.instance.data.startTs) + domTime + 99 // 99ms safety margin to give some time for the DOM to load
    return (
        <div id="clickmap-render">
            <ClickMapRenderer
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@ -1,3 +1,4 @@
+
 import ExampleFunnel from './Examples/Funnel';
 import ExamplePath from './Examples/Path';
 import ExampleTrend from './Examples/Trend';
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
@ -10,13 +10,15 @@ interface NewDashboardModalProps {
  open: boolean;
  isAddingFromLibrary?: boolean;
  isEnterprise?: boolean;
+  isMobile?: boolean;
 }

 const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
                                                               onClose,
                                                               open,
                                                               isAddingFromLibrary = false,
-                                                               isEnterprise = false
+                                                               isEnterprise = false,
+                                                               isMobile = false
                                                             }) => {
  const [step, setStep] = React.useState<number>(0);
  const [selectedCategory, setSelectedCategory] = React.useState<string>('product-analytics');
@ -53,6 +55,7 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
                                     setSelectedCategory={setSelectedCategory}
                                     onCard={() => setStep(step + 1)}
                                     isLibrary={isAddingFromLibrary}
+                                     isMobile={isMobile}
                                     isEnterprise={isEnterprise} />}
          {step === 1 && <CreateCard onBack={() => setStep(0)} />}
        </div>
@ -63,6 +66,7 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
 };

 const mapStateToProps = (state: any) => ({
+  isMobile: state.getIn(['site', 'instance', 'platform']) === 'ios',
  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' ||
    state.getIn(['user', 'account', 'edition']) === 'msaas'
 });
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
@ -1,6 +1,6 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import { Button, Input, Segmented, Space } from 'antd';
-import { RightOutlined } from '@ant-design/icons'
+import { RightOutlined } from '@ant-design/icons';
 import { ArrowRight, Info } from 'lucide-react';
 import { CARD_LIST, CARD_CATEGORIES, CardType } from './ExampleCards';
 import { useStore } from 'App/mstore';
@ -8,6 +8,7 @@ import Option from './Option';
 import CardsLibrary from 'Components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary';
 import { FUNNEL } from 'App/constants/card';
 import { useHistory } from 'react-router';
+import { FilterKey } from 'Types/filter/filterType';

 interface SelectCardProps {
  onClose: (refresh?: boolean) => void;
@ -16,10 +17,11 @@ interface SelectCardProps {
  selected?: string;
  setSelectedCategory?: React.Dispatch<React.SetStateAction<string>>;
  isEnterprise?: boolean;
+  isMobile?: boolean;
 }

 const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
-  const { onCard, isLibrary = false, selected, setSelectedCategory, isEnterprise } = props;
+  const { onCard, isLibrary = false, selected, setSelectedCategory, isEnterprise, isMobile } = props;
  const [selectedCards, setSelectedCards] = React.useState<number[]>([]);
  const { metricStore, dashboardStore } = useStore();
  const siteId: string = location.pathname.split('/')[1];
@ -74,20 +76,23 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
  };

  const cardItems = useMemo(() => {
-    return CARD_LIST.filter((card) => card.category === selected && (!card.isEnterprise || (card.isEnterprise && isEnterprise)))
-      .map((card) => (
-        <div key={card.key} className={card.width ? `col-span-${card.width}` : 'col-span-2'}>
-          <card.example
-            onCard={handleCardSelection}
-            type={card.key}
-            title={card.title}
-            data={card.data}
-            height={card.height}
-            hideLegend={card.data?.hideLegend}
-          />
-        </div>
-      ));
-  }, [selected]);
+    return CARD_LIST.filter((card) =>
+      card.category === selected &&
+      (!card.isEnterprise || (card.isEnterprise && isEnterprise)) &&
+      (!isMobile || (isMobile && ![FilterKey.USER_BROWSER].includes(card.key)))
+    ).map((card) => (
+      <div key={card.key} className={card.width ? `col-span-${card.width}` : 'col-span-2'}>
+        <card.example
+          onCard={handleCardSelection}
+          type={card.key}
+          title={card.title}
+          data={card.data}
+          height={card.height}
+          hideLegend={card.data?.hideLegend}
+        />
+      </div>
+    ));
+  }, [selected, isEnterprise, isMobile]);

  const onCardClick = (cardId: number) => {
    if (selectedCards.includes(cardId)) {
@ -119,7 +124,7 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
          )}
        </div>
        {isCreatingDashboard && (
-          <Button type="link" onClick={createNewDashboard} loading={dashboardCreating} className='gap-2'>
+          <Button type="link" onClick={createNewDashboard} loading={dashboardCreating} className="gap-2">
            <Space>
              Create Blank
              <RightOutlined />
--- a/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx
+++ b/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx
@ -51,8 +51,8 @@ function WebPlayer(props: any) {
  const isPlayerReady = contextValue.store?.get().ready

  React.useEffect(() => {
-    contextValue.player && contextValue.player.play()
-    if (isPlayerReady && insights.size > 0) {
+      contextValue.player && contextValue.player.play()
+    if (isPlayerReady && insights.size > 0 && jumpTimestamp) {
      setTimeout(() => {
        contextValue.player.pause()
        contextValue.player.jump(jumpTimestamp)
--- a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx
@ -169,10 +169,10 @@ interface DevtoolsButtonsProps {
  bottomBlock: number;
 }

-function DevtoolsButtons({
+const DevtoolsButtons = observer(({
  toggleBottomTools,
  bottomBlock,
-}: DevtoolsButtonsProps) {
+}: DevtoolsButtonsProps) => {
  const { aiSummaryStore } = useStore();
  const { store, player } = React.useContext(MobilePlayerContext);

@ -277,7 +277,7 @@ function DevtoolsButtons({
      />
    </>
  );
-}
+})

 const ControlPlayer = observer(Controls);

--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
@ -36,6 +36,8 @@ function UserCard({ className, request, session, width, height, similarSessions,
        userDisplayName,
        userDeviceType,
        revId,
+        screenWidth,
+        screenHeight
    } = session;

    const hasUserDetails = !!userId || !!userAnonymousId;
@ -137,7 +139,7 @@ function UserCard({ className, request, session, width, height, similarSessions,
                    <SessionInfoItem
                      icon={deviceTypeIcon(userDeviceType)}
                      label={userDeviceType}
-                      value={getDimension(width, height)}
+                      value={getDimension(width || screenWidth, height || screenHeight)}
                      isLast={!revId}
                    />
                    {revId && <SessionInfoItem icon="info" label="Rev ID:" value={revId} isLast />}
--- a/frontend/app/components/Session_/Player/player.module.css
+++ b/frontend/app/components/Session_/Player/player.module.css
@ -9,7 +9,7 @@
  height: 100%;
  /* border: solid thin $gray-light; */
  /* border-radius: 3px; */
-  overflow: hidden;
+  overflow-y: scroll;
 }

 .checkers {
--- a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
@ -1,13 +1,14 @@
 import React, { useMemo } from 'react';
 import { formatBytes } from 'App/utils';
 import CopyText from 'Shared/CopyText';
-import {Tag} from 'antd';
+import { Tag } from 'antd';
 import cn from 'classnames';

 interface Props {
  resource: any;
  timestamp?: string;
 }
+
 function FetchBasicDetails({ resource, timestamp }: Props) {
  const _duration = parseInt(resource.duration);
  const text = useMemo(() => {
@ -22,14 +23,16 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
    <div>
      <div className="flex items-start py-1">
        <div className="font-medium w-36">Name</div>
-        <Tag className='text-base max-w-96 rounded-lg text-clip bg-indigo-50 whitespace-nowrap overflow-hidden text-clip cursor-pointer word-break' bordered={false}>
+        <Tag
+          className="text-base max-w-96 rounded-lg text-clip bg-indigo-50 whitespace-nowrap overflow-hidden text-clip cursor-pointer word-break"
+          bordered={false}>
          <CopyText content={resource.url}>{resource.url}</CopyText>
        </Tag>
      </div>

      <div className="flex items-center py-1">
        <div className="font-medium w-36">Type</div>
-        <Tag className='text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip' bordered={false}>
+        <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
          {resource.type}
        </Tag>
      </div>
@ -37,7 +40,8 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
      {resource.method && (
        <div className="flex items-center py-1">
          <div className="font-medium w-36">Request Method</div>
-          <Tag className='text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip' bordered={false}>
+          <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip"
+               bordered={false}>
            {resource.method}
          </Tag>
        </div>
@ -47,15 +51,12 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
        <div className="flex items-center py-1">
          <div className="text-base font-medium w-36">Status Code</div>
          <Tag
-          bordered={false}
+            bordered={false}
            className={cn(
              'text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip flex items-center',
              { 'error color-red': !resource.success }
            )}
          >
-            {resource.status === '200' && (
-              <Tag  bordered={false} className="text-base bg-emerald-100 rounded-full mr-2"></Tag>
-            )}
            {resource.status}
          </Tag>
        </div>
@ -63,7 +64,8 @@ function FetchBasicDetails({ resource, timestamp }: Props) {

      <div className="flex items-center py-1">
        <div className="font-medium w-36">Type</div>
-        <Tag className="text-base capitalize rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
+        <Tag className="text-base capitalize rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip"
+             bordered={false}>
          {resource.type}
        </Tag>
      </div>
@ -71,18 +73,19 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
      {!!resource.decodedBodySize && (
        <div className="flex items-center py-1">
          <div className="font-medium w-36">Size</div>
-          <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
+          <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip"
+               bordered={false}>
            {formatBytes(resource.decodedBodySize)}
          </Tag>
        </div>
      )}

-      

      {!!_duration && (
        <div className="flex items-center py-1">
          <div className="font-medium w-36">Duration</div>
-          <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
+          <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip"
+               bordered={false}>
            {_duration} ms
          </Tag>
        </div>
@ -90,11 +93,12 @@ function FetchBasicDetails({ resource, timestamp }: Props) {

      {timestamp && (
        <div className="flex items-center py-1">
-        <div className="font-medium w-36">Time</div>
-        <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
-          {timestamp}
-        </Tag>
-      </div>
+          <div className="font-medium w-36">Time</div>
+          <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip"
+               bordered={false}>
+            {timestamp}
+          </Tag>
+        </div>

      )}
    </div>
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@ -32,7 +32,7 @@ import { connect } from 'react-redux';
 import { Icon, Loader } from 'UI';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';

-import { FilterKey } from '../../../../types/filter/filterType';
+import { FilterKey } from 'Types/filter/filterType';
 import stl from './FilterModal.module.css';

 const IconMap = {
--- a/frontend/app/components/ui/Icons/activity.tsx
+++ b/frontend/app/components/ui/Icons/activity.tsx
@ -12,7 +12,6 @@ interface Props {
 function Activity(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      
      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/></svg>
  );
 }
--- a/frontend/app/components/ui/Icons/console_info.tsx
+++ b/frontend/app/components/ui/Icons/console_info.tsx
@ -10,7 +10,7 @@ interface Props {
 }

 function Console_info(props: Props) {
-  const { size = 14, width = size, height = size, fill = '' } = props;
+    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>
  );
--- a/frontend/app/components/ui/Icons/filters_chevrons_up_down.tsx
+++ b/frontend/app/components/ui/Icons/filters_chevrons_up_down.tsx
@ -0,0 +1,19 @@
+
+/* Auto-generated, do not edit */
+import React from 'react';
+
+interface Props {
+    size?: number | string;
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+}
+
+function Filters_chevrons_up_down(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 15 5 5 5-5M7 9l5-5 5 5"/></svg>
+  );
+}
+
+export default Filters_chevrons_up_down;
--- a/frontend/app/components/ui/Icons/filters_screen.tsx
+++ b/frontend/app/components/ui/Icons/filters_screen.tsx
@ -0,0 +1,19 @@
+
+/* Auto-generated, do not edit */
+import React from 'react';
+
+interface Props {
+    size?: number | string;
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+}
+
+function Filters_screen(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="M21 17v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2M21 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>
+  );
+}
+
+export default Filters_screen;
--- a/frontend/app/components/ui/Icons/index.ts
+++ b/frontend/app/components/ui/Icons/index.ts
@ -275,6 +275,7 @@ export { default as Filetype_pdf } from './filetype_pdf';
 export { default as Filter } from './filter';
 export { default as Filters_arrow_return_right } from './filters_arrow_return_right';
 export { default as Filters_browser } from './filters_browser';
+export { default as Filters_chevrons_up_down } from './filters_chevrons_up_down';
 export { default as Filters_click } from './filters_click';
 export { default as Filters_clickrage } from './filters_clickrage';
 export { default as Filters_code } from './filters_code';
@ -303,6 +304,7 @@ export { default as Filters_platform } from './filters_platform';
 export { default as Filters_referrer } from './filters_referrer';
 export { default as Filters_resize } from './filters_resize';
 export { default as Filters_rev_id } from './filters_rev_id';
+export { default as Filters_screen } from './filters_screen';
 export { default as Filters_state_action } from './filters_state_action';
 export { default as Filters_tag_element } from './filters_tag_element';
 export { default as Filters_ttfb } from './filters_ttfb';
--- a/frontend/app/components/ui/Icons/pdf_download.tsx
+++ b/frontend/app/components/ui/Icons/pdf_download.tsx
@ -12,7 +12,7 @@ interface Props {
 function Pdf_download(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg xmlns="http://www.w3.org/2000/svg" width={ `${ width }px` } height={ `${ height }px` }  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-down"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>
+      <svg viewBox="0 0 19 19" width={ `${ width }px` } height={ `${ height }px` } ><path d="M10.094 5.249a.594.594 0 0 0-1.188 0v4.504l-1.36-1.362a.595.595 0 0 0-.841.84l2.375 2.376a.596.596 0 0 0 .84 0l2.375-2.375a.595.595 0 0 0-.84-.841l-1.361 1.362V5.249Z"/><path d="M16.625 16.625V5.344L11.281 0H4.75a2.375 2.375 0 0 0-2.375 2.375v14.25A2.375 2.375 0 0 0 4.75 19h9.5a2.375 2.375 0 0 0 2.375-2.375ZM11.281 3.562a1.781 1.781 0 0 0 1.781 1.782h2.376v11.281a1.188 1.188 0 0 1-1.188 1.188h-9.5a1.187 1.187 0 0 1-1.188-1.188V2.375A1.188 1.188 0 0 1 4.75 1.187h6.531v2.375Z"/><path clipRule="evenodd" d="M15.58 13.49H3.42v4.37h1.789v-3.512H6.61c.282 0 .524.051.726.154.205.103.361.245.47.425.11.178.165.383.165.613 0 .226-.055.424-.164.593-.11.169-.266.3-.47.396-.203.093-.445.14-.727.14h-.554v1.191h2.37v-3.512h1.13c.238 0 .455.041.653.123a1.537 1.537 0 0 1 .854.88c.08.205.12.431.12.68v.148c0 .247-.04.474-.12.68a1.512 1.512 0 0 1-.849.88c-.193.08-.404.12-.635.121h2.046v-3.512h2.35v.654h-1.503v.808h1.365v.651h-1.365v1.399h3.108v-4.37Zm-9.524 1.512v1.013h.554c.12 0 .216-.02.29-.06a.367.367 0 0 0 .161-.167.547.547 0 0 0 .054-.244.668.668 0 0 0-.054-.267.431.431 0 0 0-.161-.198.496.496 0 0 0-.29-.077h-.554Zm3.512 2.207h-.295v-2.207h.283c.123 0 .233.021.328.065a.604.604 0 0 1 .24.195.88.88 0 0 1 .146.321c.033.127.05.275.05.444v.152c0 .225-.03.415-.089.569a.707.707 0 0 1-.256.345.696.696 0 0 1-.407.116Z"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/pencil.tsx
+++ b/frontend/app/components/ui/Icons/pencil.tsx
@ -12,7 +12,7 @@ interface Props {
 function Pencil(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg xmlns="http://www.w3.org/2000/svg" width={ `${ width }px` } height={ `${ height }px` } viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-pen-line"><path d="m18 5-2.414-2.414A2 2 0 0 0 14.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2"/><path d="M21.378 12.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><path d="M8 18h1"/></svg>
+      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/trash.tsx
+++ b/frontend/app/components/ui/Icons/trash.tsx
@ -12,7 +12,7 @@ interface Props {
 function Trash(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg xmlns="http://www.w3.org/2000/svg" width={ `${ width }px` } height={ `${ height }px` } viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/users.tsx
+++ b/frontend/app/components/ui/Icons/users.tsx
@ -12,8 +12,7 @@ interface Props {
 function Users(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      
-      <svg xmlns="http://www.w3.org/2000/svg"  width={ `${ width }px` } height={ `${ height }px` } viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-round"><path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/></svg>
+      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
  );
 }

--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
--- a/frontend/app/duck/search.js
+++ b/frontend/app/duck/search.js
@ -76,7 +76,7 @@ function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case REFRESH_FILTER_OPTIONS:
      return state
-        .set('filterList', generateFilterOptions(filtersMap))
+        .set('filterList', generateFilterOptions(filtersMap, action.isMobile))
        .set('filterListLive', generateFilterOptions(liveFiltersMap))
        .set(
          'filterListConditional',
@ -466,10 +466,12 @@ export const editSavedSearch = (instance) => {
  };
 };

-export const refreshFilterOptions = () => {
-  return {
+export const refreshFilterOptions = () => (dispatch, getState) => {
+  const currentProject = getState().getIn(['site', 'instance']);
+  return dispatch({
    type: REFRESH_FILTER_OPTIONS,
-  };
+    isMobile: currentProject?.platform === 'ios'
+  });
 };

 export const setScrollPosition = (scrollPosition) => {
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@ -302,8 +302,8 @@ export default class Widget {
        } else if (this.metricType === FUNNEL) {
            _data.funnel = new Funnel().fromJSON(_data);
        } else if (this.metricType === TABLE) {
-            const totalSessions = data[0]['totalSessions'];
-            _data[0]['values'] = data[0]['values'].map((s: any) => new SessionsByRow().fromJson(s, totalSessions, this.metricOf));
+            const count = data[0]['count'];
+            _data[0]['values'] = data[0]['values'].map((s: any) => new SessionsByRow().fromJson(s, count, this.metricOf));
        } else {
            if (data.hasOwnProperty('chart')) {
                _data['value'] = data.value;
--- a/frontend/app/player/mobile/IOSMessageManager.ts
+++ b/frontend/app/player/mobile/IOSMessageManager.ts
@ -78,10 +78,10 @@ export interface State extends ScreenState, ListsState {
 }

 const userEvents = [
-  MType.IosSwipeEvent,
-  MType.IosClickEvent,
-  MType.IosInputEvent,
-  MType.IosScreenChanges,
+  MType.MobileSwipeEvent,
+  MType.MobileClickEvent,
+  MType.MobileInputEvent,
+  MType.MobileScreenChanges,
 ];

 export default class IOSMessageManager implements IMessageManager {
@ -233,7 +233,7 @@ export default class IOSMessageManager implements IMessageManager {
    }

    switch (msg.tp) {
-      case MType.IosPerformanceEvent:
+      case MType.MobilePerformanceEvent:
        const performanceStats = ['background', 'memoryUsage', 'mainThreadCPU'];
        if (performanceStats.includes(msg.name)) {
          this.performanceManager.append(msg);
@ -253,21 +253,21 @@ export default class IOSMessageManager implements IMessageManager {
      // case MType.IosInputEvent:
      //   console.log('input', msg)
      //   break;
-      case MType.IosNetworkCall:
+      case MType.MobileNetworkCall:
        this.lists.lists.fetch.insert(getResourceFromNetworkRequest(msg, this.sessionStart));
        break;
      case MType.WsChannel:
        this.lists.lists.websocket.insert(msg);
        break;
-      case MType.IosEvent:
+      case MType.MobileEvent:
        // @ts-ignore
        this.lists.lists.event.insert({ ...msg, source: 'openreplay' });
        break;
-      case MType.IosSwipeEvent:
-      case MType.IosClickEvent:
+      case MType.MobileSwipeEvent:
+      case MType.MobileClickEvent:
        this.touchManager.append(msg);
        break;
-      case MType.IosLog:
+      case MType.MobileLog:
        const log = { ...msg, level: msg.severity };
        // @ts-ignore
        this.lists.lists.log.append(Log(log));
--- a/frontend/app/player/mobile/managers/TouchManager.ts
+++ b/frontend/app/player/mobile/managers/TouchManager.ts
@ -31,7 +31,7 @@ export default class TouchManager extends ListWalker<IosClickEvent | IosSwipeEve
  public move(t: number) {
    const lastTouch = this.moveGetLast(t)
    if (!!lastTouch) {
-      if (lastTouch.tp === MType.IosSwipeEvent) {
+      if (lastTouch.tp === MType.MobileSwipeEvent) {
        return
        // not using swipe rn
        // this.touchTrail?.createSwipeTrail({
--- a/frontend/app/player/web/Screen/Screen.ts
+++ b/frontend/app/player/web/Screen/Screen.ts
@ -233,10 +233,10 @@ export default class Screen {
        break;
      case ScaleMode.AdjustParentHeight:
        // we want to scale the document with true height so the clickmap will be scrollable
-        const usedHeight =
-          this.document?.body.scrollHeight && this.document?.body.scrollHeight > height
-            ? this.document.body.scrollHeight + 'px'
-            : height + 'px';
+        const usedHeight = height + 'px';
+          // this.document?.body.scrollHeight && this.document?.body.scrollHeight > height
+          //   ? this.document.body.scrollHeight + 'px'
+          //   : height + 'px';
        this.scaleRatio = offsetWidth / width;
        translate = 'translate(-50%, 0)';
        posStyles = { top: 0, height: usedHeight };
--- a/frontend/app/player/web/addons/TargetMarker.ts
+++ b/frontend/app/player/web/addons/TargetMarker.ts
@ -146,39 +146,37 @@ export default class TargetMarker {
    if (clicks && this.screen.document) {
      this.clickMapOverlay?.remove();
      const overlay = document.createElement('canvas');
-      const iframeSize = this.screen.iframeStylesRef;
      const scrollHeight = this.screen.document?.documentElement.scrollHeight || 0;
      const scrollWidth = this.screen.document?.documentElement.scrollWidth || 0;
-      const scaleRatio = this.screen.getScale();
+
      Object.assign(
        overlay.style,
        clickmapStyles.overlayStyle({
-          height: iframeSize.height,
-          width: iframeSize.width,
-          scale: scaleRatio,
+          height: scrollHeight + 'px',
+          width: scrollWidth + 'px',
        })
      );

      this.clickMapOverlay = overlay;
-      this.screen.getParentElement()?.appendChild(overlay);
+      this.screen.document.body.appendChild(overlay);

      const pointMap: Record<string, { times: number; data: number[], original: any }> = {};
-      const ovWidth = parseInt(iframeSize.width);
-      const ovHeight = parseInt(iframeSize.height);
-      overlay.width = ovWidth;
-      overlay.height = ovHeight;
+      overlay.width = scrollWidth;
+      overlay.height = scrollHeight;
      let maxIntensity = 0;

      clicks.forEach((point) => {
-        const key = `${point.normalizedY}-${point.normalizedX}`;
+        const y = roundToSecond(point.normalizedY);
+        const x = roundToSecond(point.normalizedX);
+        const key = `${y}-${x}`;
        if (pointMap[key]) {
          const times = pointMap[key].times + 1;
          maxIntensity = Math.max(maxIntensity, times);
          pointMap[key].times = times;
        } else {
          const clickData = [
-            (point.normalizedX / 100) * scrollWidth,
-            (point.normalizedY / 100) * scrollHeight,
+            (x / 100) * scrollWidth,
+            (y / 100) * scrollHeight,
          ];
          pointMap[key] = { times: 1, data: clickData, original: point };
        }
@ -204,3 +202,7 @@ export default class TargetMarker {
    }
  }
 }
+
+function roundToSecond(num: number) {
+  return Math.round(num * 100) / 100;
+}
--- a/frontend/app/player/web/addons/clickmapStyles.ts
+++ b/frontend/app/player/web/addons/clickmapStyles.ts
@ -1,14 +1,12 @@
 export const clickmapStyles = {
-  overlayStyle: ({ height, width, scale }: { height: string, width: string, scale: number }) => ({
-    transform: `scale(${scale}) translate(-50%, 0)`,
+  overlayStyle: ({ height, width }: { height: string, width: string }) => ({
    position: 'absolute',
    top: '0px',
-    left: '50%',
+    left: 0,
    width,
    height,
    background: 'rgba(0,0,0, 0.15)',
    zIndex: 9 * 10e3,
-    transformOrigin: 'left top',
  }),
  totalClicks: {
    fontSize: '16px',
--- a/frontend/app/svg/icons/filters/chevrons-up-down.svg
+++ b/frontend/app/svg/icons/filters/chevrons-up-down.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
--- a/frontend/app/svg/icons/filters/screen.svg
+++ b/frontend/app/svg/icons/filters/screen.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-view"><path d="M21 17v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2"/><path d="M21 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>
--- a/frontend/app/types/filter/filterType.ts
+++ b/frontend/app/types/filter/filterType.ts
@ -196,6 +196,14 @@ export enum FilterType {
 }

 export enum FilterKey {
+  CLICK_MOBILE = 'clickMobile',
+  INPUT_MOBILE = 'inputMobile',
+  VIEW_MOBILE = 'viewMobile',
+  CUSTOM_MOBILE = 'customMobile',
+  REQUEST_MOBILE = 'requestMobile',
+  ERROR_MOBILE = 'errorMobile',
+  SWIPE_MOBILE = 'swipeMobile',
+
  ERROR = 'error',
  MISSING_RESOURCE = 'missingResource',
  SLOW_SESSION = 'slowSession',
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@ -1,4 +1,4 @@
-import { stringConditional, tagElementOperators, targetConditional } from "App/constants/filterOptions";
+import { stringConditional, tagElementOperators, targetConditional } from 'App/constants/filterOptions';
 import { KEYS } from 'Types/filter/customFilter';
 import Record from 'Types/Record';
 import { FilterType, FilterKey, FilterCategory } from './filterType';
@ -13,10 +13,78 @@ const filterOrder = {
  [FilterCategory.TECHNICAL]: 1,
  [FilterCategory.PERFORMANCE]: 2,
  [FilterCategory.USER]: 3,
-  [FilterCategory.GEAR]: 4,
-}
+  [FilterCategory.GEAR]: 4
+};
+
+export const mobileFilters = [
+  {
+    key: FilterKey.CLICK_MOBILE,
+    type: FilterType.MULTIPLE,
+    category: FilterCategory.INTERACTIONS,
+    label: 'Tap',
+    operator: 'on',
+    operatorOptions: filterOptions.targetOperators,
+    icon: 'filters/click',
+    isEvent: true
+  },
+  {
+    key: FilterKey.INPUT_MOBILE,
+    type: FilterType.MULTIPLE,
+    category: FilterCategory.INTERACTIONS,
+    label: 'Text Input',
+    placeholder: 'Enter input label name',
+    operator: 'is',
+    operatorOptions: filterOptions.stringOperators,
+    icon: 'filters/input',
+    isEvent: true
+  },
+  {
+    key: FilterKey.VIEW_MOBILE,
+    type: FilterType.MULTIPLE,
+    category: FilterCategory.INTERACTIONS,
+    label: 'Screen',
+    placeholder: 'Enter screen name',
+    operator: 'is',
+    operatorOptions: filterOptions.stringOperators,
+    icon: 'filters/screen',
+    isEvent: true
+  },
+  {
+    key: FilterKey.CUSTOM_MOBILE,
+    type: FilterType.MULTIPLE,
+    category: FilterCategory.TECHNICAL,
+    label: 'Custom Events',
+    placeholder: 'Enter event key',
+    operator: 'is',
+    operatorOptions: filterOptions.stringOperators,
+    icon: 'filters/custom',
+    isEvent: true
+  },
+  {
+    key: FilterKey.ERROR_MOBILE,
+    type: FilterType.MULTIPLE,
+    category: FilterCategory.TECHNICAL,
+    label: 'Error Message',
+    placeholder: 'E.g. Uncaught SyntaxError',
+    operator: 'is',
+    operatorOptions: filterOptions.stringOperators,
+    icon: 'filters/error',
+    isEvent: true
+  },
+  {
+    key: FilterKey.SWIPE_MOBILE,
+    type: FilterType.MULTIPLE,
+    category: FilterCategory.INTERACTIONS,
+    label: 'Swipe',
+    operator: 'on',
+    operatorOptions: filterOptions.targetOperators,
+    icon: 'filters/chevrons-up-down',
+    isEvent: true
+  }
+];

 export const filters = [
+  ...mobileFilters,
  {
    key: FilterKey.CLICK,
    type: FilterType.MULTIPLE,
@ -96,7 +164,7 @@ export const filters = [
        operator: 'is',
        placeholder: 'Select method type',
        operatorOptions: filterOptions.stringOperatorsLimited,
-      icon: 'filters/fetch',
+        icon: 'filters/fetch',
        options: filterOptions.methodOptions
      },
      {
@ -232,7 +300,7 @@ export const filters = [
    isEvent: true,
    icon: 'filters/tag-element',
    operatorOptions: filterOptions.tagElementOperators,
-    options: [],
+    options: []
  },
  {
    key: FilterKey.UTM_SOURCE,
@ -241,7 +309,7 @@ export const filters = [
    label: 'UTM Source',
    operator: 'is',
    operatorOptions: filterOptions.stringOperators,
-    icon: 'filters/country',
+    icon: 'filters/country'
  },
  {
    key: FilterKey.UTM_MEDIUM,
@ -250,7 +318,7 @@ export const filters = [
    label: 'UTM Medium',
    operator: 'is',
    operatorOptions: filterOptions.stringOperators,
-    icon: 'filters/country',
+    icon: 'filters/country'
  },
  {
    key: FilterKey.UTM_CAMPAIGN,
@ -259,7 +327,7 @@ export const filters = [
    label: 'UTM Campaign',
    operator: 'is',
    operatorOptions: filterOptions.stringOperators,
-    icon: 'filters/country',
+    icon: 'filters/country'
  },
  {
    key: FilterKey.USER_COUNTRY,
@ -471,12 +539,12 @@ export const filters = [
    operator: 'is',
    operatorOptions: filterOptions.stringOperators,
    icon: 'collection'
-  },
+  }
 ].sort((a, b) => {
-  const aOrder = filterOrder[a.category] ?? 9
-  const bOrder = filterOrder[b.category] ?? 9
-  return aOrder - bOrder
-})
+  const aOrder = filterOrder[a.category] ?? 9;
+  const bOrder = filterOrder[b.category] ?? 9;
+  return aOrder - bOrder;
+});

 export const flagConditionFilters = [
  {
@ -559,10 +627,10 @@ export const flagConditionFilters = [
    icon: 'filters/userid'
  }
 ].sort((a, b) => {
-  const aOrder = filterOrder[a.category] ?? 9
-  const bOrder = filterOrder[b.category] ?? 9
-  return aOrder - bOrder
-})
+  const aOrder = filterOrder[a.category] ?? 9;
+  const bOrder = filterOrder[b.category] ?? 9;
+  return aOrder - bOrder;
+});

 export const conditionalFilters = [
  {
@ -612,7 +680,7 @@ export const conditionalFilters = [
        placeholder: 'Enter path or URL',
        operator: 'is',
        operatorOptions: filterOptions.stringConditional,
-        icon: "filters/fetch"
+        icon: 'filters/fetch'
      },
      {
        key: FilterKey.FETCH_STATUS_CODE,
@ -622,7 +690,7 @@ export const conditionalFilters = [
        placeholder: 'Enter status code',
        operator: '=',
        operatorOptions: filterOptions.customOperators,
-        icon: "filters/fetch"
+        icon: 'filters/fetch'
      },
      {
        key: FilterKey.FETCH_METHOD,
@ -643,8 +711,8 @@ export const conditionalFilters = [
        placeholder: 'E.g. 12',
        operator: '=',
        operatorOptions: filterOptions.customOperators,
-        icon: "filters/fetch"
-      },
+        icon: 'filters/fetch'
+      }
    ],
    icon: 'filters/fetch',
    isEvent: true
@ -667,7 +735,7 @@ export const conditionalFilters = [
    label: 'Duration',
    operator: 'is',
    operatorOptions: filterOptions.getOperatorsByKeys(['is']),
-    icon: "filters/duration",
+    icon: 'filters/duration',
    isEvent: false
  },
  {
@ -690,10 +758,10 @@ export const conditionalFilters = [
    icon: 'filters/userid'
  }
 ].sort((a, b) => {
-  const aOrder = filterOrder[a.category] ?? 9
-  const bOrder = filterOrder[b.category] ?? 9
-  return aOrder - bOrder
-})
+  const aOrder = filterOrder[a.category] ?? 9;
+  const bOrder = filterOrder[b.category] ?? 9;
+  return aOrder - bOrder;
+});

 export const mobileConditionalFilters = [
  {
@ -703,7 +771,7 @@ export const mobileConditionalFilters = [
    label: 'Duration',
    operator: 'is',
    operatorOptions: filterOptions.getOperatorsByKeys(['is']),
-    icon: "filters/duration",
+    icon: 'filters/duration',
    isEvent: false
  },
  {
@ -721,7 +789,7 @@ export const mobileConditionalFilters = [
        placeholder: 'Enter path or URL',
        operator: 'is',
        operatorOptions: filterOptions.stringConditional,
-        icon: "filters/fetch"
+        icon: 'filters/fetch'
      },
      {
        key: FilterKey.FETCH_STATUS_CODE,
@ -731,7 +799,7 @@ export const mobileConditionalFilters = [
        placeholder: 'Enter status code',
        operator: '=',
        operatorOptions: filterOptions.customOperators,
-        icon: "filters/fetch"
+        icon: 'filters/fetch'
      },
      {
        key: FilterKey.FETCH_METHOD,
@ -752,8 +820,8 @@ export const mobileConditionalFilters = [
        placeholder: 'E.g. 12',
        operator: '=',
        operatorOptions: filterOptions.customOperators,
-        icon: "filters/fetch"
-      },
+        icon: 'filters/fetch'
+      }
    ],
    icon: 'filters/fetch',
    isEvent: true
@ -779,11 +847,11 @@ export const mobileConditionalFilters = [
    operatorOptions: filterOptions.getOperatorsByKeys(['is']),
    icon: 'filters/cpu-load',
    options: [
-      { label: 'nominal', value: "0" },
-      { label: 'warm', value: "1" },
-      { label: 'hot', value: "2" },
-      { label: 'critical', value: "3" }
-    ],
+      { label: 'nominal', value: '0' },
+      { label: 'warm', value: '1' },
+      { label: 'hot', value: '2' },
+      { label: 'critical', value: '3' }
+    ]
  },
  {
    key: 'mainThreadCPU',
@ -793,7 +861,7 @@ export const mobileConditionalFilters = [
    placeholder: '0 .. 100',
    operator: '=',
    operatorOptions: filterOptions.customOperators,
-    icon: 'filters/cpu-load',
+    icon: 'filters/cpu-load'
  },
  {
    key: 'viewComponent',
@ -803,7 +871,7 @@ export const mobileConditionalFilters = [
    placeholder: 'View Name',
    operator: 'is',
    operatorOptions: filterOptions.getOperatorsByKeys(['is']),
-    icon: 'filters/view',
+    icon: 'filters/view'
  },
  {
    key: FilterKey.USERID,
@ -833,7 +901,7 @@ export const mobileConditionalFilters = [
    placeholder: 'logged value',
    operator: 'is',
    operatorOptions: filterOptions.stringOperators,
-    icon: 'filters/console',
+    icon: 'filters/console'
  },
  {
    key: 'clickEvent',
@ -854,7 +922,7 @@ export const mobileConditionalFilters = [
    operatorOptions: filterOptions.customOperators,
    icon: 'filters/memory-load'
  }
-]
+];

 export const eventKeys = filters.filter((i) => i.isEvent).map(i => i.key);
 export const nonFlagFilters = filters.filter(i => {
@ -955,12 +1023,12 @@ export const addElementToFiltersMap = (

 export const addOptionsToFilter = (
  key,
-  options,
+  options
 ) => {
  if (filtersMap[key] && filtersMap[key].options) {
-    filtersMap[key].options = options
+    filtersMap[key].options = options;
  }
-}
+};

 function getMetadataLabel(key) {
  return key.replace(/^_/, '').charAt(0).toUpperCase() + key.slice(2);
@ -1008,11 +1076,11 @@ export const addElementToConditionalFiltersMap = (

 export const addElementToMobileConditionalFiltersMap = (
  category = FilterCategory.METADATA,
-    key,
-    type = FilterType.MULTIPLE,
-    operator = 'is',
-    operatorOptions = filterOptions.stringOperators,
-    icon = 'filters/metadata'
+  key,
+  type = FilterType.MULTIPLE,
+  operator = 'is',
+  operatorOptions = filterOptions.stringOperators,
+  icon = 'filters/metadata'
 ) => {
  mobileConditionalFiltersMap[key] = {
    key,
@ -1023,8 +1091,8 @@ export const addElementToMobileConditionalFiltersMap = (
    operatorOptions,
    icon,
    isLive: true
-  }
-}
+  };
+};

 export const addElementToLiveFiltersMap = (
  category = FilterCategory.METADATA,
@ -1094,7 +1162,7 @@ export default Record({
        _filter = filtersMap[`_${filter.source}`];
      } else {
        if (filtersMap[filter.key]) {
-          _filter = filtersMap[filter.key]
+          _filter = filtersMap[filter.key];
        } else {
          _filter = filtersMap[type];
        }
@ -1118,14 +1186,35 @@ export default Record({
  }
 });

+const WEB_EXCLUDE = [
+  FilterKey.CLICK_MOBILE, FilterKey.SWIPE_MOBILE, FilterKey.INPUT_MOBILE,
+  FilterKey.VIEW_MOBILE, FilterKey.CUSTOM_MOBILE, FilterKey.REQUEST_MOBILE, FilterKey.ERROR_MOBILE
+];
+
+const MOBILE_EXCLUDE = [
+  FilterKey.CLICK, FilterKey.INPUT, FilterKey.ERROR, FilterKey.CUSTOM,
+  FilterKey.LOCATION, FilterKey.FETCH, FilterKey.DOM_COMPLETE,
+  FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, FilterKey.TTFB, FilterKey.USER_BROWSER,
+  FilterKey.PLATFORM
+];
+
 /**
 * Group filters by category
- * @param {*} filtersMap
 * @returns
+ * @param map
+ * @param isMobile
 */
-export const generateFilterOptions = (map) => {
+export const generateFilterOptions = (map, isMobile = false) => {
  const filterSection = {};
  Object.keys(map).forEach(key => {
+    if (isMobile && MOBILE_EXCLUDE.includes(key)) {
+      return;
+    }
+
+    if (!isMobile && WEB_EXCLUDE.includes(key)) {
+      return;
+    }
+
    const filter = map[key];
    if (filterSection.hasOwnProperty(filter.category)) {
      filterSection[filter.category].push(filter);
--- a/scripts/helmcharts/openreplay/charts/chalice/Chart.yaml
+++ b/scripts/helmcharts/openreplay/charts/chalice/Chart.yaml
@ -1,7 +1,6 @@
 apiVersion: v2
 name: chalice
 description: A Helm chart for Kubernetes
-
 # A chart can be either an 'application' or a 'library' chart.
 #
 # Application charts are a collection of templates that can be packaged into versioned archives
@ -11,14 +10,12 @@ description: A Helm chart for Kubernetes
 # a dependency of application charts to inject those utilities and functions into the rendering
 # pipeline. Library charts do not define any templates and therefore cannot be deployed.
 type: application
-
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 version: 0.1.7
-
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to
 # follow Semantic Versioning. They should reflect the version the application is using.
 # It is recommended to use it with quotes.
-AppVersion: "v1.19.0"
+AppVersion: "v1.19.7"
--- a/scripts/helmcharts/openreplay/charts/chalice/templates/deployment.yaml
+++ b/scripts/helmcharts/openreplay/charts/chalice/templates/deployment.yaml
@ -113,6 +113,8 @@ spec:
              value: {{ .Values.global.s3.assistRecordsBucket }}
            - name: sessions_bucket
              value: {{ .Values.global.s3.recordingsBucket }}
+            - name: IOS_VIDEO_BUCKET
+              value: {{ .Values.global.s3.recordingsBucket }}
            - name: sourcemaps_bucket
              value: {{ .Values.global.s3.sourcemapsBucket }} 
            - name: js_cache_bucket
--- a/scripts/helmcharts/openreplay/charts/db/Chart.yaml
+++ b/scripts/helmcharts/openreplay/charts/db/Chart.yaml
@ -1,7 +1,6 @@
 apiVersion: v2
 name: db
 description: A Helm chart for Kubernetes
-
 # A chart can be either an 'application' or a 'library' chart.
 #
 # Application charts are a collection of templates that can be packaged into versioned archives
@ -11,14 +10,12 @@ description: A Helm chart for Kubernetes
 # a dependency of application charts to inject those utilities and functions into the rendering
 # pipeline. Library charts do not define any templates and therefore cannot be deployed.
 type: application
-
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 version: 0.1.1
-
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to
 # follow Semantic Versioning. They should reflect the version the application is using.
 # It is recommended to use it with quotes.
-AppVersion: "v1.19.0"
+AppVersion: "v1.19.2"
--- a/scripts/helmcharts/openreplay/charts/frontend/Chart.yaml
+++ b/scripts/helmcharts/openreplay/charts/frontend/Chart.yaml
@ -1,7 +1,6 @@
 apiVersion: v2
 name: frontend
 description: A Helm chart for Kubernetes
-
 # A chart can be either an 'application' or a 'library' chart.
 #
 # Application charts are a collection of templates that can be packaged into versioned archives
@ -11,14 +10,12 @@ description: A Helm chart for Kubernetes
 # a dependency of application charts to inject those utilities and functions into the rendering
 # pipeline. Library charts do not define any templates and therefore cannot be deployed.
 type: application
-
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (frontends://semver.org/)
 version: 0.1.10
-
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to
 # follow Semantic Versioning. They should reflect the version the application is using.
 # It is recommended to use it with quotes.
-AppVersion: "v1.19.0"
+AppVersion: "v1.19.3"
--- a/scripts/helmcharts/openreplay/charts/spot/.helmignore
+++ b/scripts/helmcharts/openreplay/charts/spot/.helmignore
@ -0,0 +1,23 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/
--- a/scripts/helmcharts/openreplay/charts/spot/Chart.yaml
+++ b/scripts/helmcharts/openreplay/charts/spot/Chart.yaml
@ -0,0 +1,24 @@
+apiVersion: v2
+name: spot
+description: A Helm chart for Kubernetes
+
+# A chart can be either an 'application' or a 'library' chart.
+#
+# Application charts are a collection of templates that can be packaged into versioned archives
+# to be deployed.
+#
+# Library charts provide useful utilities or functions for the chart developer. They're included as
+# a dependency of application charts to inject those utilities and functions into the rendering
+# pipeline. Library charts do not define any templates and therefore cannot be deployed.
+type: application
+
+# This is the chart version. This version number should be incremented each time you make changes
+# to the chart and its templates, including the app version.
+# Versions are expected to follow Semantic Versioning (https://semver.org/)
+version: 0.1.1
+
+# This is the version number of the application being deployed. This version number should be
+# incremented each time you make changes to the application. Versions are not expected to
+# follow Semantic Versioning. They should reflect the version the application is using.
+# It is recommended to use it with quotes.
+AppVersion: "v1.18.0"
--- a/scripts/helmcharts/openreplay/charts/spot/templates/NOTES.txt
+++ b/scripts/helmcharts/openreplay/charts/spot/templates/NOTES.txt
@ -0,0 +1,22 @@
+1. Get the application URL by running these commands:
+{{- if .Values.ingress.enabled }}
+{{- range $host := .Values.ingress.hosts }}
+  {{- range .paths }}
+  http{{ if $.Values.ingress.tls }}s{{ end }}://{{ $host.host }}{{ .path }}
+  {{- end }}
+{{- end }}
+{{- else if contains "NodePort" .Values.service.type }}
+  export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ include "http.fullname" . }})
+  export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}")
+  echo http://$NODE_IP:$NODE_PORT
+{{- else if contains "LoadBalancer" .Values.service.type }}
+     NOTE: It may take a few minutes for the LoadBalancer IP to be available.
+           You can watch the status of by running 'kubectl get --namespace {{ .Release.Namespace }} svc -w {{ include "spot.fullname" . }}'
+  export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ include "spot.fullname" . }} --template "{{"{{ range (index .status.loadBalancer.ingress 0) }}{{.}}{{ end }}"}}")
+  echo http://$SERVICE_IP:{{ .Values.service.port }}
+{{- else if contains "ClusterIP" .Values.service.type }}
+  export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/name={{ include "spot.name" . }},app.kubernetes.io/instance={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}")
+  export CONTAINER_PORT=$(kubectl get pod --namespace {{ .Release.Namespace }} $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}")
+  echo "Visit http://127.0.0.1:8080 to use your application"
+  kubectl --namespace {{ .Release.Namespace }} port-forward $POD_NAME 8080:$CONTAINER_PORT
+{{- end }}
--- a/scripts/helmcharts/openreplay/charts/spot/templates/_helpers.tpl
+++ b/scripts/helmcharts/openreplay/charts/spot/templates/_helpers.tpl
@ -0,0 +1,62 @@
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "spot.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "spot.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "spot.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "spot.labels" -}}
+helm.sh/chart: {{ include "spot.chart" . }}
+{{ include "spot.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "spot.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "spot.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "spot.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "spot.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}
--- a/scripts/helmcharts/openreplay/charts/spot/templates/deployment.yaml
+++ b/scripts/helmcharts/openreplay/charts/spot/templates/deployment.yaml
@ -0,0 +1,140 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "spot.fullname" . }}
+  namespace: {{ .Release.Namespace }}
+  labels:
+    {{- include "spot.labels" . | nindent 4 }}
+spec:
+  {{- if not .Values.autoscaling.enabled }}
+  replicas: {{ .Values.replicaCount }}
+  {{- end }}
+  selector:
+    matchLabels:
+      {{- include "spot.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      {{- with .Values.podAnnotations }}
+      annotations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "spot.selectorLabels" . | nindent 8 }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "spot.serviceAccountName" . }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      shareProcessNamespace: true
+      containers:
+        - name: {{ .Chart.Name }}
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          {{- if .Values.global.enterpriseEditionLicense }}
+          image: "{{ tpl .Values.image.repository . }}:{{ .Values.image.tag | default .Chart.AppVersion }}-ee"
+          {{- else }}
+          image: "{{ tpl .Values.image.repository . }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          {{- end }}
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          {{- if .Values.healthCheck}}
+          {{- .Values.healthCheck | toYaml | nindent 10}}
+          {{- end}}
+          env:
+            {{- range $key, $val := .Values.env }}
+            - name: {{ $key }}
+              value: '{{ $val }}'
+            {{- end}}
+            {{- range $key, $val := .Values.global.env }}
+            - name: {{ $key }}
+              value: '{{ $val }}'
+            {{- end }}
+            - name: AWS_ACCESS_KEY_ID
+              {{- if .Values.global.s3.existingSecret }}
+              valueFrom:
+                secretKeyRef:
+                  name: {{ .Values.global.s3.existingSecret }}
+                  key: access-key
+              {{- else }}
+              value: {{ .Values.global.s3.accessKey }}
+              {{- end }}
+            - name: AWS_SECRET_ACCESS_KEY
+              {{- if .Values.global.s3.existingSecret }}
+              valueFrom:
+                secretKeyRef:
+                  name: {{ .Values.global.s3.existingSecret }}
+                  key: secret-key
+              {{- else }}
+              value: {{ .Values.global.s3.secretKey }}
+              {{- end }}
+            - name: AWS_REGION
+              value: '{{ .Values.global.s3.region }}'
+            - name: AWS_ENDPOINT
+              value: '{{- include "openreplay.s3Endpoint" . }}'
+            - name: LICENSE_KEY
+              value: '{{ .Values.global.enterpriseEditionLicense }}'
+            - name: KAFKA_SERVERS
+              value: '{{ .Values.global.kafka.kafkaHost }}:{{ .Values.global.kafka.kafkaPort }}'
+            - name: KAFKA_USE_SSL
+              value: '{{ .Values.global.kafka.kafkaUseSsl }}'
+            - name: pg_password
+              {{- if .Values.global.postgresql.existingSecret }}
+              valueFrom:
+                secretKeyRef:
+                  name: {{ .Values.global.postgresql.existingSecret }}
+                  key: postgresql-postgres-password
+              {{- else }}
+              value: '{{ .Values.global.postgresql.postgresqlPassword }}'
+              {{- end}}
+            - name: POSTGRES_STRING
+              value: 'postgres://{{ .Values.global.postgresql.postgresqlUser }}:$(pg_password)@{{ .Values.global.postgresql.postgresqlHost }}:{{ .Values.global.postgresql.postgresqlPort }}/{{ .Values.global.postgresql.postgresqlDatabase }}'
+            {{- include "openreplay.env.redis_string" .Values.global.redis | nindent 12 }}
+          ports:
+            {{- range $key, $val := .Values.service.ports }}
+            - name: {{ $key }}
+              containerPort: {{ $val }}
+              protocol: TCP
+            {{- end }}
+          volumeMounts:
+          - name: datadir
+            mountPath: /mnt/efs
+          {{- include "openreplay.volume.redis_ca_certificate.mount" .Values.global.redis | nindent 12 }}
+          {{- with .Values.persistence.mounts  }}
+            {{- toYaml . | nindent 12 }}
+          {{- end }}
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+      {{- if eq (tpl .Values.pvc.name . ) "hostPath" }}
+      volumes:
+      {{- with .Values.persistence.volumes }}
+        {{- toYaml . | nindent 6 }}
+      {{- end }}
+      - name: datadir
+        hostPath:
+          # Ensure the file directory is created.
+          path: {{ tpl .Values.pvc.hostMountPath . }}
+          type: DirectoryOrCreate
+      {{- else }}
+      volumes:
+      {{- with .Values.persistence.volumes }}
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      - name: datadir
+        persistentVolumeClaim:
+          claimName: "{{ tpl .Values.pvc.name . }}"
+      {{- end }}
+      {{- include "openreplay.volume.redis_ca_certificate" .Values.global.redis | nindent 6 }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
--- a/scripts/helmcharts/openreplay/charts/spot/templates/hpa.yaml
+++ b/scripts/helmcharts/openreplay/charts/spot/templates/hpa.yaml
@ -0,0 +1,29 @@
+{{- if .Values.autoscaling.enabled }}
+apiVersion: autoscaling/v2beta1
+kind: HorizontalPodAutoscaler
+metadata:
+  name: {{ include "spot.fullname" . }}
+  namespace: {{ .Release.Namespace }}
+  labels:
+    {{- include "spot.labels" . | nindent 4 }}
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: {{ include "spot.fullname" . }}
+  minReplicas: {{ .Values.autoscaling.minReplicas }}
+  maxReplicas: {{ .Values.autoscaling.maxReplicas }}
+  metrics:
+    {{- if .Values.autoscaling.targetCPUUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: cpu
+        targetAverageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
+    {{- end }}
+    {{- if .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: memory
+        targetAverageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    {{- end }}
+{{- end }}
--- a/scripts/helmcharts/openreplay/charts/spot/templates/ingress.yaml
+++ b/scripts/helmcharts/openreplay/charts/spot/templates/ingress.yaml
@ -0,0 +1,36 @@
+{{- if .Values.ingress.enabled }}
+{{- $fullName := include "spot.fullname" . -}}
+{{- $svcPort := .Values.service.ports.http -}}
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: {{ $fullName }}
+  namespace: {{ .Release.Namespace }}
+  labels:
+    {{- include "spot.labels" . | nindent 4 }}
+  annotations:
+  {{- with .Values.ingress.annotations }}
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+    nginx.ingress.kubernetes.io/rewrite-target: /$1
+    nginx.ingress.kubernetes.io/upstream-hash-by: $http_x_forwarded_for
+spec:
+  ingressClassName: "{{ tpl .Values.ingress.className . }}" 
+  tls:
+    - hosts:
+        - {{ .Values.global.domainName }}
+      {{- if .Values.ingress.tls.secretName}}
+      secretName: {{ .Values.ingress.tls.secretName }}
+      {{- end}}
+  rules:
+    - host: {{ .Values.global.domainName }} 
+      http:
+        paths:
+          - pathType: Prefix
+            backend:
+              service:
+                name: {{ $fullName }}
+                port:
+                  number: {{ $svcPort }}
+            path: /spot/(.*)
+{{- end }}
--- a/scripts/helmcharts/openreplay/charts/spot/templates/service.yaml
+++ b/scripts/helmcharts/openreplay/charts/spot/templates/service.yaml
@ -0,0 +1,18 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "spot.fullname" . }}
+  namespace: {{ .Release.Namespace }}
+  labels:
+    {{- include "spot.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    {{- range $key, $val := .Values.service.ports }}
+    - port: {{ $val }}
+      targetPort: {{ $key }}
+      protocol: TCP
+      name: {{ $key }}
+    {{- end}}
+  selector:
+    {{- include "spot.selectorLabels" . | nindent 4 }}
--- a/scripts/helmcharts/openreplay/charts/spot/templates/serviceMonitor.yaml
+++ b/scripts/helmcharts/openreplay/charts/spot/templates/serviceMonitor.yaml
@ -0,0 +1,18 @@
+{{- if and ( .Capabilities.APIVersions.Has "monitoring.coreos.com/v1" ) ( .Values.serviceMonitor.enabled ) }}
+apiVersion: monitoring.coreos.com/v1
+kind: ServiceMonitor
+metadata:
+  name: {{ include "spot.fullname" . }}
+  namespace: {{ .Release.Namespace }}
+  labels:
+    {{- include "spot.labels" . | nindent 4 }}
+  {{- if .Values.serviceMonitor.additionalLabels }}
+    {{- toYaml .Values.serviceMonitor.additionalLabels | nindent 4 }}
+  {{- end }}
+spec:
+  endpoints:
+    {{- .Values.serviceMonitor.scrapeConfigs | toYaml | nindent 4 }}
+  selector:
+    matchLabels:
+      {{- include "spot.selectorLabels" . | nindent 6 }}
+{{- end }}
--- a/scripts/helmcharts/openreplay/charts/spot/templates/serviceaccount.yaml
+++ b/scripts/helmcharts/openreplay/charts/spot/templates/serviceaccount.yaml
@ -0,0 +1,13 @@
+{{- if .Values.serviceAccount.create -}}
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: {{ include "spot.serviceAccountName" . }}
+  namespace: {{ .Release.Namespace }}
+  labels:
+    {{- include "spot.labels" . | nindent 4 }}
+  {{- with .Values.serviceAccount.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+{{- end }}
--- a/scripts/helmcharts/openreplay/charts/spot/templates/tests/test-connection.yaml
+++ b/scripts/helmcharts/openreplay/charts/spot/templates/tests/test-connection.yaml
@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Pod
+metadata:
+  name: "{{ include "spot.fullname" . }}-test-connection"
+  labels:
+    {{- include "spot.labels" . | nindent 4 }}
+  annotations:
+    "helm.sh/hook": test
+spec:
+  containers:
+    - name: wget
+      image: busybox
+      command: ['wget']
+      args: ['{{ include "spot.fullname" . }}:{{ .Values.service.port }}']
+  restartPolicy: Never
--- a/scripts/helmcharts/openreplay/charts/spot/values.yaml
+++ b/scripts/helmcharts/openreplay/charts/spot/values.yaml
@ -0,0 +1,133 @@
+# Default values for openreplay.
+# This is a YAML-formatted file.
+# Declare variables to be passed into your templates.
+
+replicaCount: 1
+
+image:
+  repository: "{{ .Values.global.openReplayContainerRegistry }}/spot"
+  pullPolicy: IfNotPresent
+  # Overrides the image tag whose default is the chart appVersion.
+  tag: ""
+
+imagePullSecrets: []
+nameOverride: "spot"
+fullnameOverride: "spot-openreplay"
+
+serviceAccount:
+  # Specifies whether a service account should be created
+  create: true
+  # Annotations to add to the service account
+  annotations: {}
+  # The name of the service account to use.
+  # If not set and create is true, a name is generated using the fullname template
+  name: ""
+
+podAnnotations: {}
+
+securityContext:
+  runAsUser: 1001
+  runAsGroup: 1001
+podSecurityContext:
+  runAsUser: 1001
+  runAsGroup: 1001
+  fsGroup: 1001
+  fsGroupChangePolicy: "OnRootMismatch"
+# podSecurityContext: {}
+  # fsGroup: 2000
+
+# securityContext: {}
+  # capabilities:
+  #   drop:
+  #   - ALL
+  # readOnlyRootFilesystem: true
+  # runAsNonRoot: true
+  # runAsUser: 1000
+
+service:
+  type: ClusterIP
+  ports:
+    http: 8080
+    metrics: 8888
+
+serviceMonitor:
+  enabled: true
+  additionalLabels:
+    release: observability
+  scrapeConfigs:
+    - port: metrics
+      honorLabels: true
+      interval: 15s
+      path: /metrics
+      scheme: http
+      scrapeTimeout: 10s
+
+ingress:
+  enabled: true
+  className: "{{ .Values.global.ingress.controller.ingressClassResource.name }}"
+  annotations:
+    cert-manager.io/cluster-issuer: "letsencrypt-prod"
+    nginx.ingress.kubernetes.io/proxy-connect-timeout: "120"
+    nginx.ingress.kubernetes.io/proxy-send-timeout: "300"
+    nginx.ingress.kubernetes.io/proxy-read-timeout: "300"
+    nginx.ingress.kubernetes.io/cors-allow-methods: POST,PATCH,DELETE
+    nginx.ingress.kubernetes.io/cors-allow-headers: Content-Type,Authorization,Content-Encoding,X-Openreplay-Batch
+    nginx.ingress.kubernetes.io/cors-allow-origin: '*'
+    nginx.ingress.kubernetes.io/enable-cors: "true"
+    nginx.ingress.kubernetes.io/cors-expose-headers: "Content-Length"
+    # kubernetes.io/ingress.class: nginx
+    # kubernetes.io/tls-acme: "true"
+  tls:
+    secretName: openreplay-ssl
+
+resources: {}
+  # We usually recommend not to specify default resources and to leave this as a conscious
+  # choice for the user. This also increases chances charts run on environments with little
+  # resources, such as Minikube. If you do want to specify resources, uncomment the following
+  # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
+  # limits:
+  #   cpu: 100m
+  #   memory: 128Mi
+  # requests:
+  #   cpu: 100m
+  #   memory: 128Mi
+
+autoscaling:
+  enabled: false
+  minReplicas: 1
+  maxReplicas: 5
+  targetCPUUtilizationPercentage: 80
+  # targetMemoryUtilizationPercentage: 80
+
+env:
+  TOKEN_SECRET: secret_token_string # TODO: generate on build
+  CACHE_ASSETS: true
+  FS_CLEAN_HRS: 24
+
+
+pvc:
+  # This can be either persistentVolumeClaim or hostPath.
+  # In case of pvc, you'll have to provide the pvc name.
+  # For example
+  # name: openreplay-efs
+  name: "{{ .Values.global.pvcRWXName }}"
+  hostMountPath: "{{ .Values.global.orTmpDir }}"
+
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}
+
+
+persistence: {}
+  # # Spec of spec.template.spec.containers[*].volumeMounts
+  # mounts:
+  # - name: kafka-ssl
+  #   mountPath: /opt/kafka/ssl
+  # # Spec of spec.template.spec.volumes
+  # volumes:
+  # - name: kafka-ssl
+  #   secret:
+  #     secretName: kafka-ssl
--- a/scripts/helmcharts/openreplay/files/kafka.sh
+++ b/scripts/helmcharts/openreplay/files/kafka.sh
@ -8,7 +8,11 @@ RETENTION_TIME=${RETENTION_TIME:-345600000}
 topics=(
    "raw"
    "raw-ios"
+    "raw-images"
+    "canvas-images"
    "trigger"
+    "canvas-trigger"
+    "mobile-trigger"
    "cache"
    "analytics"
    "storage-failover"
--- a/scripts/schema/db/init_dbs/postgresql/1.19.0/1.19.0.sql
+++ b/scripts/schema/db/init_dbs/postgresql/1.19.0/1.19.0.sql
@ -19,8 +19,8 @@ $fn_def$, :'next_version')

 --
 ALTER TABLE IF EXISTS events.clicks
-    ADD COLUMN IF NOT EXISTS normalized_x smallint NULL,
-    ADD COLUMN IF NOT EXISTS normalized_y smallint NULL,
+    ADD COLUMN IF NOT EXISTS normalized_x decimal NULL,
+    ADD COLUMN IF NOT EXISTS normalized_y decimal NULL,
    DROP COLUMN IF EXISTS x,
    DROP COLUMN IF EXISTS y;

--- a/scripts/schema/db/init_dbs/postgresql/1.20.0/1.20.0.sql
+++ b/scripts/schema/db/init_dbs/postgresql/1.20.0/1.20.0.sql
@ -0,0 +1,51 @@
+\set previous_version 'v1.19.0'
+\set next_version 'v1.20.0'
+SELECT openreplay_version()                       AS current_version,
+       openreplay_version() = :'previous_version' AS valid_previous,
+       openreplay_version() = :'next_version'     AS is_next
+\gset
+
+\if :valid_previous
+\echo valid previous DB version :'previous_version', starting DB upgrade to :'next_version'
+BEGIN;
+SELECT format($fn_def$
+CREATE OR REPLACE FUNCTION openreplay_version()
+    RETURNS text AS
+$$
+SELECT '%1$s'
+$$ LANGUAGE sql IMMUTABLE;
+$fn_def$, :'next_version')
+\gexec
+
+--
+ALTER TABLE IF EXISTS events.clicks
+    ALTER COLUMN normalized_x SET DATA TYPE decimal,
+    ALTER COLUMN normalized_y SET DATA TYPE decimal;
+
+ALTER TABLE IF EXISTS public.users
+    ADD COLUMN IF NOT EXISTS spot_jwt_iat         timestamp without time zone NULL DEFAULT NULL,
+    ADD COLUMN IF NOT EXISTS spot_jwt_refresh_jti integer                     NULL DEFAULT NULL,
+    ADD COLUMN IF NOT EXISTS spot_jwt_refresh_iat timestamp without time zone NULL DEFAULT NULL;
+
+CREATE SCHEMA IF NOT EXISTS or_cache;
+CREATE TABLE IF NOT EXISTS or_cache.autocomplete_top_values
+(
+    project_id     integer                                        NOT NULL REFERENCES public.projects (project_id) ON DELETE CASCADE,
+    event_type     text                                           NOT NULL,
+    event_key      text                                           NULL,
+    result         jsonb                                          NULL,
+    execution_time integer                                        NULL,
+    created_at     timestamp DEFAULT timezone('utc'::text, now()) NOT NULL,
+    UNIQUE NULLS NOT DISTINCT (project_id, event_type, event_key)
+);
+
+ALTER TABLE IF EXISTS public.tenants
+    ADD COLUMN IF NOT EXISTS scope text NOT NULL DEFAULT 'full';
+
+COMMIT;
+
+\elif :is_next
+\echo new version detected :'next_version', nothing to do
+\else
+\warn skipping DB upgrade of :'next_version', expected previous version :'previous_version', found :'current_version'
+\endif
--- a/scripts/schema/db/init_dbs/postgresql/init_schema.sql
+++ b/scripts/schema/db/init_dbs/postgresql/init_schema.sql
@ -17,6 +17,7 @@ BEGIN;
 CREATE SCHEMA IF NOT EXISTS events_common;
 CREATE SCHEMA IF NOT EXISTS events;
 CREATE SCHEMA IF NOT EXISTS events_ios;
+CREATE SCHEMA IF NOT EXISTS or_cache;
 CREATE EXTENSION IF NOT EXISTS pg_trgm;
 CREATE EXTENSION IF NOT EXISTS pgcrypto;

@ -102,27 +103,31 @@ CREATE TABLE public.tenants
    t_sessions     bigint                      NOT NULL DEFAULT 0,
    t_users        integer                     NOT NULL DEFAULT 1,
    t_integrations integer                     NOT NULL DEFAULT 0,
-    last_telemetry bigint                      NOT NULL DEFAULT CAST(EXTRACT(epoch FROM date_trunc('day', now())) * 1000 AS BIGINT)
-        CONSTRAINT onerow_uni CHECK (tenant_id = 1)
+    last_telemetry bigint                      NOT NULL DEFAULT CAST(EXTRACT(epoch FROM date_trunc('day', now())) * 1000 AS BIGINT),
+    scope          text                        NOT NULL DEFAULT 'full',
+    CONSTRAINT onerow_uni CHECK (tenant_id = 1)
 );

 CREATE TYPE user_role AS ENUM ('owner', 'admin', 'member');

 CREATE TABLE public.users
 (
-    user_id         integer generated BY DEFAULT AS IDENTITY PRIMARY KEY,
-    email           text                        NOT NULL UNIQUE,
-    role            user_role                   NOT NULL DEFAULT 'member',
-    name            text                        NOT NULL,
-    created_at      timestamp without time zone NOT NULL DEFAULT (now() at time zone 'utc'),
-    deleted_at      timestamp without time zone NULL     DEFAULT NULL,
-    api_key         text UNIQUE                          DEFAULT generate_api_key(20) NOT NULL,
-    jwt_iat         timestamp without time zone NULL     DEFAULT NULL,
-    jwt_refresh_jti integer                     NULL     DEFAULT NULL,
-    jwt_refresh_iat timestamp without time zone NULL     DEFAULT NULL,
-    data            jsonb                       NOT NULL DEFAULT '{}'::jsonb,
-    weekly_report   boolean                     NOT NULL DEFAULT TRUE,
-    settings        jsonb                                DEFAULT NULL
+    user_id              integer generated BY DEFAULT AS IDENTITY PRIMARY KEY,
+    email                text                        NOT NULL UNIQUE,
+    role                 user_role                   NOT NULL DEFAULT 'member',
+    name                 text                        NOT NULL,
+    created_at           timestamp without time zone NOT NULL DEFAULT (now() at time zone 'utc'),
+    deleted_at           timestamp without time zone NULL     DEFAULT NULL,
+    api_key              text UNIQUE                          DEFAULT generate_api_key(20) NOT NULL,
+    jwt_iat              timestamp without time zone NULL     DEFAULT NULL,
+    jwt_refresh_jti      integer                     NULL     DEFAULT NULL,
+    jwt_refresh_iat      timestamp without time zone NULL     DEFAULT NULL,
+    spot_jwt_iat         timestamp without time zone NULL     DEFAULT NULL,
+    spot_jwt_refresh_jti integer                     NULL     DEFAULT NULL,
+    spot_jwt_refresh_iat timestamp without time zone NULL     DEFAULT NULL,
+    data                 jsonb                       NOT NULL DEFAULT '{}'::jsonb,
+    weekly_report        boolean                     NOT NULL DEFAULT TRUE,
+    settings             jsonb                                DEFAULT NULL
 );

 CREATE TABLE public.basic_authentication
@ -620,16 +625,16 @@ CREATE INDEX pages_query_nn_gin_idx ON events.pages USING GIN (query gin_trgm_op

 CREATE TABLE events.clicks
 (
-    session_id   bigint              NOT NULL REFERENCES public.sessions (session_id) ON DELETE CASCADE,
-    message_id   bigint              NOT NULL,
-    timestamp    bigint              NOT NULL,
-    label        text     DEFAULT NULL,
-    url          text     DEFAULT '' NOT NULL,
+    session_id   bigint             NOT NULL REFERENCES public.sessions (session_id) ON DELETE CASCADE,
+    message_id   bigint             NOT NULL,
+    timestamp    bigint             NOT NULL,
+    label        text    DEFAULT NULL,
+    url          text    DEFAULT '' NOT NULL,
    path         text,
-    selector     text     DEFAULT '' NOT NULL,
-    hesitation   integer  DEFAULT NULL,
-    normalized_x smallint DEFAULT NULL,
-    normalized_y smallint DEFAULT NULL,
+    selector     text    DEFAULT '' NOT NULL,
+    hesitation   integer DEFAULT NULL,
+    normalized_x decimal DEFAULT NULL,
+    normalized_y decimal DEFAULT NULL,
    PRIMARY KEY (session_id, message_id)
 );
 CREATE INDEX clicks_session_id_idx ON events.clicks (session_id);
@ -1187,4 +1192,16 @@ CREATE TABLE public.projects_conditions
    filters      jsonb        NOT NULL DEFAULT '[]'::jsonb
 );

+CREATE TABLE or_cache.autocomplete_top_values
+(
+    project_id     integer                                        NOT NULL REFERENCES public.projects (project_id) ON DELETE CASCADE,
+    event_type     text                                           NOT NULL,
+    event_key      text                                           NULL,
+    result         jsonb                                          NULL,
+    execution_time integer                                        NULL,
+    created_at     timestamp DEFAULT timezone('utc'::text, now()) NOT NULL,
+    UNIQUE NULLS NOT DISTINCT (project_id, event_type, event_key)
+);
+
+
 COMMIT;
--- a/scripts/schema/db/rollback_dbs/postgresql/1.20.0/1.20.0.sql
+++ b/scripts/schema/db/rollback_dbs/postgresql/1.20.0/1.20.0.sql
@ -0,0 +1,34 @@
+\set previous_version 'v1.20.0'
+\set next_version 'v1.19.0'
+SELECT openreplay_version()                       AS current_version,
+       openreplay_version() = :'previous_version' AS valid_previous,
+       openreplay_version() = :'next_version'     AS is_next
+\gset
+
+\if :valid_previous
+\echo valid previous DB version :'previous_version', starting DB downgrade to :'next_version'
+BEGIN;
+SELECT format($fn_def$
+CREATE OR REPLACE FUNCTION openreplay_version()
+    RETURNS text AS
+$$
+SELECT '%1$s'
+$$ LANGUAGE sql IMMUTABLE;
+$fn_def$, :'next_version')
+\gexec
+
+--
+ALTER TABLE IF EXISTS public.users
+    DROP COLUMN IF EXISTS spot_jwt_iat,
+    DROP COLUMN IF EXISTS spot_jwt_refresh_jti,
+    DROP COLUMN IF EXISTS spot_jwt_refresh_iat;
+
+DROP SCHEMA or_cache CASCADE;
+
+COMMIT;
+
+\elif :is_next
+\echo new version detected :'next_version', nothing to do
+\else
+\warn skipping DB downgrade of :'next_version', expected previous version :'previous_version', found :'current_version'
+\endif
--- a/tracker/tracker-graphql/README.md
+++ b/tracker/tracker-graphql/README.md
@ -18,13 +18,13 @@ returns `result` without changes.

 ```js
 import Tracker from '@openreplay/tracker';
-import trackerGraphQL from '@openreplay/tracker-graphql';
+import { createGraphqlMiddleware } from '@openreplay/tracker-graphql';

 const tracker = new Tracker({
  projectKey: YOUR_PROJECT_KEY,
 });

-export const recordGraphQL = tracker.plugin(trackerGraphQL());
+export const recordGraphQL = tracker.use(createGraphqlMiddleware());
 ```

 ### Relay
@ -33,15 +33,28 @@ If you're using [Relay network tools](https://github.com/relay-tools/react-relay
 you can simply [create a middleware](https://github.com/relay-tools/react-relay-network-modern/tree/master?tab=readme-ov-file#example-of-injecting-networklayer-with-middlewares-on-the-client-side)

 ```js
-import { createRelayMiddleware } from '@openreplay/tracker-graphql'
+import { createRelayMiddleware } from '@openreplay/tracker-graphql';

-const trackerMiddleware = createRelayMiddleware(tracker)
+const trackerMiddleware = tracker.use(createRelayMiddleware());

 const network = new RelayNetworkLayer([
  // your middleware
  // ,
-  trackerMiddleware
-])
+  trackerMiddleware,
+]);
+```
+
+You can pass a Sanitizer function to `createRelayMiddleware` to sanitize the variables and data before sending them to OpenReplay.
+
+```js
+const trackerLink = tracker.use(
+  createRelayMiddleware((variables) => {
+    return {
+      ...variables,
+      password: '***',
+    };
+  }),
+);
 ```

 Or you can manually put `recordGraphQL` call
@ -52,22 +65,22 @@ then you should do something like below
 import { createGraphqlMiddleware } from '@openreplay/tracker-graphql'; // see above for recordGraphQL definition
 import { Environment } from 'relay-runtime';

-const handler = createGraphqlMiddleware(tracker)
+const handler = tracker.use(createGraphqlMiddleware());

 function fetchQuery(operation, variables, cacheConfig, uploadables) {
  return fetch('www.myapi.com/resource', {
    // ...
  })
-    .then(response => response.json())
-    .then(result =>
-        handler(
-          // op kind, name, variables, response, duration (default 0)
-          operation.operationKind,
-          operation.name,
-          variables,
-          result,
-          duration,
-        ),
+    .then((response) => response.json())
+    .then((result) =>
+      handler(
+        // op kind, name, variables, response, duration (default 0)
+        operation.operationKind,
+        operation.name,
+        variables,
+        result,
+        duration,
+      ),
    );
 }

@ -81,10 +94,23 @@ See [Relay Network Layer](https://relay.dev/docs/en/network-layer) for details.
 For [Apollo](https://www.apollographql.com/) you should create a new `ApolloLink`

 ```js
-import { createTrackerLink } from '@openreplay/tracker-graphql'
+import { createTrackerLink } from '@openreplay/tracker-graphql';

-const trackerLink = createTrackerLink(tracker);
-const yourLink = new ApolloLink(trackerLink)
+const trackerLink = tracker.use(createTrackerLink());
+const yourLink = new ApolloLink(trackerLink);
+```
+
+You can pass a Sanitizer function to `createRelayMiddleware` to sanitize the variables and data before sending them to OpenReplay.
+
+```js
+const trackerLink = tracker.use(
+  createTrackerLink((variables) => {
+    return {
+      ...variables,
+      password: '***',
+    };
+  }),
+);
 ```

 Alternatively you can use generic graphql handler:
@ -93,18 +119,21 @@ Alternatively you can use generic graphql handler:
 import { createGraphqlMiddleware } from '@openreplay/tracker-graphql'; // see above for recordGraphQL definition
 import { ApolloLink } from 'apollo-link';

-const handler = createGraphqlMiddleware(tracker)
+const handler = tracker.use(createGraphqlMiddleware());

 const trackerApolloLink = new ApolloLink((operation, forward) => {
-  return forward(operation).map(result =>
-    handler(
+  operation.setContext({ start: performance.now() });
+  return forward(operation).map((result) => {
+    const time = performance.now() - operation.getContext().start;
+    return handler(
      // op kind, name, variables, response, duration (default 0)
      operation.query.definitions[0].operation,
      operation.operationName,
      operation.variables,
      result,
-    ),
-  );
+      time,
+    );
+  });
 });

 const link = ApolloLink.from([
--- a/tracker/tracker-graphql/src/apolloMiddleware.ts
+++ b/tracker/tracker-graphql/src/apolloMiddleware.ts
@ -1,5 +1,6 @@
 import { App, Messages } from '@openreplay/tracker';
 import Observable from 'zen-observable';
+import { Sanitizer } from './types';

 type Operation = {
  query: Record<string, any>;
@ -9,48 +10,63 @@ type Operation = {
 };
 type NextLink = (operation: Operation) => Observable<Record<string, any>>;

-export const createTrackerLink = (app: App | null) => {
-  if (!app) {
-    return (operation: Operation, forward: NextLink) => forward(operation);
-  }
-  return (operation: Operation, forward: NextLink) => {
-    return new Observable((observer) => {
-      const start = app.timestamp();
-      const observable = forward(operation);
-      const subscription = observable.subscribe({
-        next(value) {
-          const end = app.timestamp();
-          app.send(
-            Messages.GraphQL(
-              operation.query.definitions[0].kind,
-              operation.operationName,
-              JSON.stringify(operation.variables),
-              JSON.stringify(value.data),
-              end - start,
-            ),
-          );
-          observer.next(value);
-        },
-        error(error) {
-          const end = app.timestamp();
-          app.send(
-            Messages.GraphQL(
-              operation.query.definitions[0].kind,
-              operation.operationName,
-              JSON.stringify(operation.variables),
-              JSON.stringify(error),
-              end - start,
-            ),
-          );
-          observer.error(error);
-        },
-        complete() {
-          observer.complete();
-        },
-      });
+export const createTrackerLink = (
+  sanitizer?: Sanitizer<Record<string, any> | undefined | null>,
+) => {
+  return (app: App | null) => {
+    if (!app) {
+      return (operation: Operation, forward: NextLink) => forward(operation);
+    }
+    return (operation: Operation, forward: NextLink) => {
+      return new Observable((observer) => {
+        const start = app.timestamp();
+        const observable = forward(operation);
+        const subscription = observable.subscribe({
+          next(value) {
+            const end = app.timestamp();
+            const operationDefinition = operation.query.definitions[0];
+            app.send(
+              Messages.GraphQL(
+                operationDefinition.kind === 'OperationDefinition'
+                  ? operationDefinition.operation
+                  : 'unknown?',
+                operation.operationName,
+                JSON.stringify(
+                  sanitizer
+                    ? sanitizer(operation.variables)
+                    : operation.variables,
+                ),
+                JSON.stringify(sanitizer ? sanitizer(value.data) : value.data),
+                end - start,
+              ),
+            );
+            observer.next(value);
+          },
+          error(error) {
+            const end = app.timestamp();
+            app.send(
+              Messages.GraphQL(
+                operation.query.definitions[0].kind,
+                operation.operationName,
+                JSON.stringify(
+                  sanitizer
+                    ? sanitizer(operation.variables)
+                    : operation.variables,
+                ),
+                JSON.stringify(error),
+                end - start,
+              ),
+            );
+            observer.error(error);
+          },
+          complete() {
+            observer.complete();
+          },
+        });

-      return () => subscription.unsubscribe();
-    });
+        return () => subscription.unsubscribe();
+      });
+    };
  };
 };

--- a/tracker/tracker-graphql/src/graphqlMiddleware.ts
+++ b/tracker/tracker-graphql/src/graphqlMiddleware.ts
@ -1,4 +1,4 @@
-import { App, Messages } from "@openreplay/tracker";
+import { App, Messages } from '@openreplay/tracker';

 function createGraphqlMiddleware() {
  return (app: App | null) => {
@ -10,7 +10,7 @@ function createGraphqlMiddleware() {
      operationName: string,
      variables: any,
      result: any,
-      duration = 0
+      duration = 0,
    ) => {
      try {
        app.send(
@ -30,4 +30,4 @@ function createGraphqlMiddleware() {
  };
 }

-export default createGraphqlMiddleware
+export default createGraphqlMiddleware;
--- a/tracker/tracker-graphql/src/index.ts
+++ b/tracker/tracker-graphql/src/index.ts
@ -1,9 +1,11 @@
 import createTrackerLink from './apolloMiddleware.js';
 import createRelayMiddleware from './relayMiddleware.js';
 import createGraphqlMiddleware from './graphqlMiddleware.js';
+import { Sanitizer } from './types.js';

 export {
  createTrackerLink,
  createRelayMiddleware,
  createGraphqlMiddleware,
-}
+  Sanitizer,
+};
--- a/tracker/tracker-graphql/src/relayMiddleware.ts
+++ b/tracker/tracker-graphql/src/relayMiddleware.ts
@ -1,37 +1,55 @@
 import { App, Messages } from '@openreplay/tracker';
 import type { Middleware, RelayRequest } from './relaytypes';
+import { Sanitizer } from './types';

-const createRelayMiddleware = (app: App | null): Middleware => {
-  if (!app) {
-    return (next) => async (req) => await next(req);
-  }
-  return (next) => async (req) => {
-    const start = app.timestamp();
-    const resp = await next(req)
-    const end = app.timestamp();
-    if ('requests' in req) {
-      req.requests.forEach((request) => {
-        app.send(getMessage(request, resp.json as Record<string, any>, end - start))
-      })
-    } else {
-      app.send(getMessage(req, resp.json as Record<string, any>, end - start))
+const createRelayMiddleware = (sanitizer?: Sanitizer<Record<string, any>>) => {
+  return (app: App | null): Middleware => {
+    if (!app) {
+      return (next) => async (req) => await next(req);
    }
-    return resp;
-  }
+    return (next) => async (req) => {
+      const start = app.timestamp();
+      const resp = await next(req);
+      const end = app.timestamp();
+      if ('requests' in req) {
+        req.requests.forEach((request) => {
+          app.send(
+            getMessage(
+              request,
+              resp.json as Record<string, any>,
+              end - start,
+              sanitizer,
+            ),
+          );
+        });
+      } else {
+        app.send(
+          getMessage(
+            req,
+            resp.json as Record<string, any>,
+            end - start,
+            sanitizer,
+          ),
+        );
+      }
+      return resp;
+    };
+  };
 };

-function getMessage(request: RelayRequest, json: Record<string, any>, duration: number) {
+function getMessage(
+  request: RelayRequest,
+  json: Record<string, any>,
+  duration: number,
+  sanitizer?: Sanitizer<Record<string, any>>,
+) {
  const opKind = request.operation.kind;
  const opName = request.operation.name;
-  const vars = JSON.stringify(request.variables)
-  const opResp = JSON.stringify(json)
-  return Messages.GraphQL(
-    opKind,
-    opName,
-    vars,
-    opResp,
-    duration
-  )
+  const vars = JSON.stringify(
+    sanitizer ? sanitizer(request.variables) : request.variables,
+  );
+  const opResp = JSON.stringify(sanitizer ? sanitizer(json) : json);
+  return Messages.GraphQL(opKind, opName, vars, opResp, duration);
 }

-export default createRelayMiddleware
+export default createRelayMiddleware;
--- a/tracker/tracker-graphql/src/relaytypes.ts
+++ b/tracker/tracker-graphql/src/relaytypes.ts
@ -1,4 +1,3 @@
-
 type ConcreteBatch = {
  kind: 'Batch';
  fragment: any;
@ -9,7 +8,7 @@ type ConcreteBatch = {
  text: string | null;
  operationKind: string;
 };
-type Variables = { [name: string]: any };
+export type Variables = { [name: string]: any };
 interface FetchOpts {
  url?: string;
  method: 'POST' | 'GET';
@ -17,7 +16,13 @@ interface FetchOpts {
  body: string | FormData;
  credentials?: 'same-origin' | 'include' | 'omit';
  mode?: 'cors' | 'websocket' | 'navigate' | 'no-cors' | 'same-origin';
-  cache?: 'default' | 'no-store' | 'reload' | 'no-cache' | 'force-cache' | 'only-if-cached';
+  cache?:
+    | 'default'
+    | 'no-store'
+    | 'reload'
+    | 'no-cache'
+    | 'force-cache'
+    | 'only-if-cached';
  redirect?: 'follow' | 'error' | 'manual';
  signal?: AbortSignal;
  [name: string]: any;
--- a/tracker/tracker-graphql/src/types.ts
+++ b/tracker/tracker-graphql/src/types.ts
@ -0,0 +1 @@
+export type Sanitizer<T> = (values: T) => Partial<T>;
--- a/tracker/tracker/src/main/app/index.ts
+++ b/tracker/tracker/src/main/app/index.ts
@ -963,8 +963,8 @@ export default class App {
        deviceMemory,
        jsHeapSizeLimit,
        timezone: getTimezone(),
-        width: window.innerWidth,
-        height: window.innerHeight,
+        width: window.screen.width,
+        height: window.screen.height,
      }),
    })
    const {
@ -1220,7 +1220,9 @@ export default class App {
          timezone: getTimezone(),
          condition: conditionName,
          assistOnly: startOpts.assistOnly ?? this.socketMode,
-        }),
+          width: window.screen.width,
+          height: window.screen.height
+    }),
      })
      if (r.status !== 200) {
        const error = await r.text()
Author	SHA1	Message	Date
rjshrjndrn	4af13b64af	spot: db change from dev	2024-08-20 17:28:48 +02:00
rjshrjndrn	d52dec3188	Revert "spot: db change" This reverts commit `b4d060476a`.	2024-08-20 17:27:44 +02:00
rjshrjndrn	b4d060476a	spot: db change	2024-08-20 12:17:20 +02:00
rjshrjndrn	e40f095249	helm: spots	2024-08-14 18:23:13 +02:00
Mehdi Osman	67063363a8	Inject mobile bucket (#2432 )	2024-07-26 00:31:40 +02:00
Mehdi Osman	2b0b5d6106	Updated patch build from main `64a746873b` (#2429 ) * Increment chalice chart version * Increment frontend chart version * Increment db chart version --------- Co-authored-by: GitHub Action <action@github.com>	2024-07-25 14:27:08 +02:00
Kraiem Taha Yassine	64a746873b	Patch/api v1.19.0 (#2428 ) * fix(chalice): changed mobile autocomplete * fix(chalice): fixed mobile errors search fix(chalice): fixed mobile errors autocomplete fix(chalice): fixed mobile swipe autocomplete	2024-07-25 11:51:31 +02:00
Shekar Siri	139f0e68c4	Mobile UI updates (#2427 ) * change(ui): mobile resolution * change(ui): removed empty tag that showign as green icon * change(ui): mobile specific filters * change(ui): remove browser card for mobile * change(ui): summary ai toggle	2024-07-25 11:20:09 +02:00
Mehdi Osman	69e8fab2cc	Added mobile and canvas related topics (#2424 )	2024-07-25 10:29:48 +02:00
Kraiem Taha Yassine	9db416dcde	fix(chalice): changed mobile autocomplete (#2426 )	2024-07-25 10:26:37 +02:00
Alexander	f28a7fbcfb	feat(backend): changed mobile autocomplete naming (#2425 )	2024-07-25 10:23:27 +02:00
Atef Ben Ali	6e2a772e7f	docs: update README_AR.md file (#2421 )	2024-07-24 09:44:21 -04:00
Mehdi Osman	dcce3569fb	Increment chalice chart version (#2417 ) Co-authored-by: GitHub Action <action@github.com>	2024-07-23 13:17:48 +02:00
Kraiem Taha Yassine	867247dbc0	fix(chalice): fixed insights with filter steps (#2416 )	2024-07-23 13:01:48 +02:00
PiR	754293e29d	Tracker GrahpQL: update doc and tracker initialization + add option to pass sanitizer function (#2402 ) * fix(graphQL): update doc and tracker initialization + add option to pass sanitizer function * improvement(graphQL): improve sanitizer type & apollo operation name	2024-07-22 16:07:12 +02:00
Mehdi Osman	ddd037ce79	Increment chalice chart version (#2411 ) Co-authored-by: GitHub Action <action@github.com>	2024-07-19 15:09:47 +02:00
Kraiem Taha Yassine	66f4c5c93b	fix(chalice): stop SA from logout (#2410 )	2024-07-19 15:03:59 +02:00
Mehdi Osman	66e4d133ad	Increment chalice chart version (#2407 ) Co-authored-by: GitHub Action <action@github.com>	2024-07-18 13:17:27 +02:00
Kraiem Taha Yassine	f9f8853ab0	fix(chalice): fixed search mobile sessions (#2406 ) fix(chalice): fixed autocomplete mobile sessions	2024-07-18 13:08:05 +02:00
Mehdi Osman	e0bb6fea9d	Updated patch build from main `4e7efaecde` (#2405 ) * Increment frontend chart version * Increment db chart version --------- Co-authored-by: GitHub Action <action@github.com>	2024-07-18 12:46:42 +02:00
Alexander	4e7efaecde	Heatmaps fix (float coordinates) (#2403 ) (#2404 ) * feat(spot): use float click coordinates instead of ints in PG * feat(db): added support for float clicks in CH * feat(db): fix float instead of uint8 * feat(mobile): new naming for mobile autocomplete types	2024-07-18 12:38:47 +02:00
Delirium	54a9624332	Heatmaps patch 2 (#2400 ) * fix ui: move clickmap overlay inside replay vdom, refactor renderer scaling * fix ui: fix first event calculation	2024-07-17 18:57:21 +02:00
Mehdi Osman	1ddffca572	Increment frontend chart version (#2395 ) Co-authored-by: GitHub Action <action@github.com>	2024-07-16 17:38:25 +02:00
Delirium	c91881413a	fix manager event reads for mobile (#2394 )	2024-07-16 17:34:12 +02:00
Mehdi Osman	ba2d9eb81c	Increment chalice chart version (#2393 ) Co-authored-by: GitHub Action <action@github.com>	2024-07-16 17:20:59 +02:00
Kraiem Taha Yassine	c845415e1e	Patch/api v1.19.0 (#2392 ) * fix(chalice): reversed count&total for card-tables to confuse devs * fix(DB): changed normalized_x&y col-type	2024-07-16 17:15:38 +02:00
Mehdi Osman	ee0ede8478	Increment chalice chart version (#2391 ) Co-authored-by: GitHub Action <action@github.com>	2024-07-16 14:26:47 +02:00
Kraiem Taha Yassine	72afae226b	fix(chalice): fixed missing totalSessions in card-tables in EE (#2390 ) * fix(chalice): fixed missing totalSessions in card-tables in EE * fix(chalice): fixed missing totalSessions in card-tables in EE	2024-07-16 14:16:26 +02:00
Shekar Siri	b3f545849a	fix(ui): use count instead of totalSessions (#2387 )	2024-07-12 17:38:44 +02:00
Mehdi Osman	cd2966fb9f	Increment chalice chart version (#2384 ) Co-authored-by: GitHub Action <action@github.com>	2024-07-11 11:50:42 +02:00
Kraiem Taha Yassine	4b91dcded0	Patch/api v1.19.0 (#2383 ) * fix(chalice): fixed create heatmap card EE * fix(chalice): fixed click_rage-heatmap card EE * fix(chalice): fixed click_rage-heatmap ambiguous alias EE	2024-07-11 11:36:07 +02:00
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`
				`@ -0,0 +1 @@`
				`export type Sanitizer<T> = (values: T) => Partial<T>;`