From 139f0e68c4f0073aeb49f3cea69bc7ddfe11a812 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 25 Jul 2024 11:20:09 +0200
Subject: [PATCH] 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
---
 .../NewDashModal/ExampleCards.tsx             |   1 +
 .../NewDashModal/NewDashboardModal.tsx        |   6 +-
 .../DashboardList/NewDashModal/SelectCard.tsx |  39 ++--
 .../Player/MobilePlayer/MobileControls.tsx    |   6 +-
 .../EventsBlock/UserCard/UserCard.js          |   4 +-
 .../FetchBasicDetails/FetchBasicDetails.tsx   |  38 ++--
 .../Filters/FilterModal/FilterModal.tsx       |   2 +-
 frontend/app/components/ui/Icons/activity.tsx |   1 -
 .../app/components/ui/Icons/console_info.tsx  |   2 +-
 .../ui/Icons/filters_chevrons_up_down.tsx     |  19 ++
 .../components/ui/Icons/filters_screen.tsx    |  19 ++
 frontend/app/components/ui/Icons/index.ts     |   2 +
 .../app/components/ui/Icons/pdf_download.tsx  |   2 +-
 frontend/app/components/ui/Icons/pencil.tsx   |   2 +-
 frontend/app/components/ui/Icons/trash.tsx    |   2 +-
 frontend/app/components/ui/Icons/users.tsx    |   3 +-
 frontend/app/components/ui/SVG.tsx            |  10 +-
 frontend/app/duck/search.js                   |  10 +-
 .../svg/icons/filters/chevrons-up-down.svg    |   1 +
 frontend/app/svg/icons/filters/screen.svg     |   1 +
 frontend/app/types/filter/filterType.ts       |   8 +
 frontend/app/types/filter/newFilter.js        | 195 +++++++++++++-----
 22 files changed, 268 insertions(+), 105 deletions(-)
 create mode 100644 frontend/app/components/ui/Icons/filters_chevrons_up_down.tsx
 create mode 100644 frontend/app/components/ui/Icons/filters_screen.tsx
 create mode 100644 frontend/app/svg/icons/filters/chevrons-up-down.svg
 create mode 100644 frontend/app/svg/icons/filters/screen.svg

diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index f4c1bdf92..024e25c84 100644
--- 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';
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
index c974e8bf3..c1301765d 100644
--- 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'
 });
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
index 97e0e3d70..44e3d396a 100644
--- 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 />
diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx
index 8080d044a..31de09d1c 100644
--- 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);
 
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
index 791849b8c..ea13c5ba6 100644
--- 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 />}
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
index 57e750e00..bb21965ff 100644
--- 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>
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index 640134079..9126c8e96 100644
--- 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 = {
diff --git a/frontend/app/components/ui/Icons/activity.tsx b/frontend/app/components/ui/Icons/activity.tsx
index 26570ced3..284c532a2 100644
--- 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>
   );
 }
diff --git a/frontend/app/components/ui/Icons/console_info.tsx b/frontend/app/components/ui/Icons/console_info.tsx
index 787acce26..674f08c44 100644
--- 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>
   );
diff --git a/frontend/app/components/ui/Icons/filters_chevrons_up_down.tsx b/frontend/app/components/ui/Icons/filters_chevrons_up_down.tsx
new file mode 100644
index 000000000..db9bd2973
--- /dev/null
+++ 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;
diff --git a/frontend/app/components/ui/Icons/filters_screen.tsx b/frontend/app/components/ui/Icons/filters_screen.tsx
new file mode 100644
index 000000000..a03898a9c
--- /dev/null
+++ 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;
diff --git a/frontend/app/components/ui/Icons/index.ts b/frontend/app/components/ui/Icons/index.ts
index 2f57a0ebd..239193a3a 100644
--- 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';
diff --git a/frontend/app/components/ui/Icons/pdf_download.tsx b/frontend/app/components/ui/Icons/pdf_download.tsx
index f7f773277..16ea79523 100644
--- 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>
   );
 }
 
diff --git a/frontend/app/components/ui/Icons/pencil.tsx b/frontend/app/components/ui/Icons/pencil.tsx
index 1c9714adf..aa38965da 100644
--- 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>
   );
 }
 
diff --git a/frontend/app/components/ui/Icons/trash.tsx b/frontend/app/components/ui/Icons/trash.tsx
index ded64f33b..286f4a6e0 100644
--- 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>
   );
 }
 
diff --git a/frontend/app/components/ui/Icons/users.tsx b/frontend/app/components/ui/Icons/users.tsx
index b5bc58d21..bc6a852d6 100644
--- 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>
   );
 }
 
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index b46650f1f..d5ee94fb3 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -277,6 +277,7 @@ import {
   Filter,
   Filters_arrow_return_right,
   Filters_browser,
+  Filters_chevrons_up_down,
   Filters_click,
   Filters_clickrage,
   Filters_code,
@@ -305,6 +306,7 @@ import {
   Filters_referrer,
   Filters_resize,
   Filters_rev_id,
+  Filters_screen,
   Filters_state_action,
   Filters_tag_element,
   Filters_ttfb,
@@ -555,7 +557,7 @@ import {
   Zoom_in
 } from './Icons'
 
-export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down-up' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_avatar1' | 'avatar/icn_avatar10' | 'avatar/icn_avatar11' | 'avatar/icn_avatar12' | 'avatar/icn_avatar13' | 'avatar/icn_avatar14' | 'avatar/icn_avatar15' | 'avatar/icn_avatar16' | 'avatar/icn_avatar17' | 'avatar/icn_avatar18' | 'avatar/icn_avatar19' | 'avatar/icn_avatar2' | 'avatar/icn_avatar20' | 'avatar/icn_avatar21' | 'avatar/icn_avatar22' | 'avatar/icn_avatar23' | 'avatar/icn_avatar3' | 'avatar/icn_avatar4' | 'avatar/icn_avatar5' | 'avatar/icn_avatar6' | 'avatar/icn_avatar7' | 'avatar/icn_avatar8' | 'avatar/icn_avatar9' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'battery-charging' | 'battery' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'bookmark' | 'broadcast' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-list' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-left-text' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-check' | 'clipboard-list-check' | 'clock-history' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection-play' | 'collection' | 'color/apple' | 'color/browser/Tor' | 'color/browser/applebot' | 'color/browser/chrome' | 'color/browser/chrome_mobile' | 'color/browser/chrome_mobile_ios' | 'color/browser/duck_duck_go' | 'color/browser/duckduckgo_mobile' | 'color/browser/edge' | 'color/browser/edge_mobile' | 'color/browser/facebook' | 'color/browser/firefox' | 'color/browser/firefox_ios' | 'color/browser/firefox_mobile' | 'color/browser/google' | 'color/browser/googlebot' | 'color/browser/huawei_browser' | 'color/browser/internet_explorer' | 'color/browser/miui_browser' | 'color/browser/mobile_safari' | 'color/browser/mobile_safari_ui' | 'color/browser/opera' | 'color/browser/safari' | 'color/browser/samsung_internet' | 'color/browser/uc_browser' | 'color/browser/unknown' | 'color/browser/whale' | 'color/browser/yandex_browser' | 'color/chrome' | 'color/country/de' | 'color/country/fr' | 'color/country/gb' | 'color/country/in' | 'color/country/us' | 'color/de' | 'color/device/desktop' | 'color/device/mobile' | 'color/device/other_phone' | 'color/device/tablet' | 'color/device/unkown' | 'color/edge' | 'color/fedora' | 'color/firefox' | 'color/fr' | 'color/gb' | 'color/in' | 'color/issues/bad_request' | 'color/issues/click_rage' | 'color/issues/cpu' | 'color/issues/crash' | 'color/issues/custom' | 'color/issues/dead_click' | 'color/issues/errors' | 'color/issues/excessive_scrolling' | 'color/issues/js_exception' | 'color/issues/memory' | 'color/issues/missing_resource' | 'color/issues/mouse_thrashing' | 'color/issues/slow_page_load' | 'color/microsoft' | 'color/opera' | 'color/os/android' | 'color/os/apple' | 'color/os/blackberry' | 'color/os/chrome_os' | 'color/os/elementary' | 'color/os/fedora' | 'color/os/freebsd' | 'color/os/gnome' | 'color/os/ios' | 'color/os/linux' | 'color/os/linux_mint' | 'color/os/macos' | 'color/os/microsoft' | 'color/os/ubuntu' | 'color/os/unkown' | 'color/safari' | 'color/ubuntu' | 'color/us' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-2-back' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'db-icons/icn-card-clickMap' | 'db-icons/icn-card-errors' | 'db-icons/icn-card-funnel' | 'db-icons/icn-card-funnels' | 'db-icons/icn-card-insights' | 'db-icons/icn-card-library' | 'db-icons/icn-card-mapchart' | 'db-icons/icn-card-pathAnalysis' | 'db-icons/icn-card-performance' | 'db-icons/icn-card-resources' | 'db-icons/icn-card-table' | 'db-icons/icn-card-timeseries' | 'db-icons/icn-card-webVitals' | 'desktop' | 'device' | 'diagram-3' | 'dice-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'emoji-dizzy' | 'enter' | 'envelope-check' | 'envelope-paper' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'exclamation-triangle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'fflag-multi' | 'fflag-single' | 'file-bar-graph' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filetype-js' | 'filetype-pdf' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/tag-element' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'integrations/zustand' | 'journal-code' | 'key' | 'keyboard' | 'layer-group' | 'layers-half' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'low-disc-space' | 'magic' | 'map-marker-alt' | 'memory-ios' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'mouse-pointer-click' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-circle-fill' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-btn' | 'record-circle-fill' | 'record-circle' | 'record2' | 'redo-back' | 'redo' | 'redux' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'side_menu_closed' | 'side_menu_open' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'sparkles' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'terminal' | 'text-paragraph' | 'thermometer-sun' | 'toggles' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'user-switch' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in';
+export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down-up' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_avatar1' | 'avatar/icn_avatar10' | 'avatar/icn_avatar11' | 'avatar/icn_avatar12' | 'avatar/icn_avatar13' | 'avatar/icn_avatar14' | 'avatar/icn_avatar15' | 'avatar/icn_avatar16' | 'avatar/icn_avatar17' | 'avatar/icn_avatar18' | 'avatar/icn_avatar19' | 'avatar/icn_avatar2' | 'avatar/icn_avatar20' | 'avatar/icn_avatar21' | 'avatar/icn_avatar22' | 'avatar/icn_avatar23' | 'avatar/icn_avatar3' | 'avatar/icn_avatar4' | 'avatar/icn_avatar5' | 'avatar/icn_avatar6' | 'avatar/icn_avatar7' | 'avatar/icn_avatar8' | 'avatar/icn_avatar9' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'battery-charging' | 'battery' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'bookmark' | 'broadcast' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-list' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-left-text' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-check' | 'clipboard-list-check' | 'clock-history' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection-play' | 'collection' | 'color/apple' | 'color/browser/Tor' | 'color/browser/applebot' | 'color/browser/chrome' | 'color/browser/chrome_mobile' | 'color/browser/chrome_mobile_ios' | 'color/browser/duck_duck_go' | 'color/browser/duckduckgo_mobile' | 'color/browser/edge' | 'color/browser/edge_mobile' | 'color/browser/facebook' | 'color/browser/firefox' | 'color/browser/firefox_ios' | 'color/browser/firefox_mobile' | 'color/browser/google' | 'color/browser/googlebot' | 'color/browser/huawei_browser' | 'color/browser/internet_explorer' | 'color/browser/miui_browser' | 'color/browser/mobile_safari' | 'color/browser/mobile_safari_ui' | 'color/browser/opera' | 'color/browser/safari' | 'color/browser/samsung_internet' | 'color/browser/uc_browser' | 'color/browser/unknown' | 'color/browser/whale' | 'color/browser/yandex_browser' | 'color/chrome' | 'color/country/de' | 'color/country/fr' | 'color/country/gb' | 'color/country/in' | 'color/country/us' | 'color/de' | 'color/device/desktop' | 'color/device/mobile' | 'color/device/other_phone' | 'color/device/tablet' | 'color/device/unkown' | 'color/edge' | 'color/fedora' | 'color/firefox' | 'color/fr' | 'color/gb' | 'color/in' | 'color/issues/bad_request' | 'color/issues/click_rage' | 'color/issues/cpu' | 'color/issues/crash' | 'color/issues/custom' | 'color/issues/dead_click' | 'color/issues/errors' | 'color/issues/excessive_scrolling' | 'color/issues/js_exception' | 'color/issues/memory' | 'color/issues/missing_resource' | 'color/issues/mouse_thrashing' | 'color/issues/slow_page_load' | 'color/microsoft' | 'color/opera' | 'color/os/android' | 'color/os/apple' | 'color/os/blackberry' | 'color/os/chrome_os' | 'color/os/elementary' | 'color/os/fedora' | 'color/os/freebsd' | 'color/os/gnome' | 'color/os/ios' | 'color/os/linux' | 'color/os/linux_mint' | 'color/os/macos' | 'color/os/microsoft' | 'color/os/ubuntu' | 'color/os/unkown' | 'color/safari' | 'color/ubuntu' | 'color/us' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-2-back' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'db-icons/icn-card-clickMap' | 'db-icons/icn-card-errors' | 'db-icons/icn-card-funnel' | 'db-icons/icn-card-funnels' | 'db-icons/icn-card-insights' | 'db-icons/icn-card-library' | 'db-icons/icn-card-mapchart' | 'db-icons/icn-card-pathAnalysis' | 'db-icons/icn-card-performance' | 'db-icons/icn-card-resources' | 'db-icons/icn-card-table' | 'db-icons/icn-card-timeseries' | 'db-icons/icn-card-webVitals' | 'desktop' | 'device' | 'diagram-3' | 'dice-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'emoji-dizzy' | 'enter' | 'envelope-check' | 'envelope-paper' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'exclamation-triangle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'fflag-multi' | 'fflag-single' | 'file-bar-graph' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filetype-js' | 'filetype-pdf' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/chevrons-up-down' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/screen' | 'filters/state-action' | 'filters/tag-element' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'integrations/zustand' | 'journal-code' | 'key' | 'keyboard' | 'layer-group' | 'layers-half' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'low-disc-space' | 'magic' | 'map-marker-alt' | 'memory-ios' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'mouse-pointer-click' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-circle-fill' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-btn' | 'record-circle-fill' | 'record-circle' | 'record2' | 'redo-back' | 'redo' | 'redux' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'side_menu_closed' | 'side_menu_open' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'sparkles' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'terminal' | 'text-paragraph' | 'thermometer-sun' | 'toggles' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'user-switch' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in';
 
 interface Props {
     name: IconNames;
@@ -1395,6 +1397,9 @@ const SVG = (props: Props) => {
     // case 'filters/browser':
     case 'filters/browser': return <Filters_browser width={ width } height={ height } fill={ fill } />;
   
+    // case 'filters/chevrons-up-down':
+    case 'filters/chevrons-up-down': return <Filters_chevrons_up_down width={ width } height={ height } fill={ fill } />;
+  
     // case 'filters/click':
     case 'filters/click': return <Filters_click width={ width } height={ height } fill={ fill } />;
   
@@ -1479,6 +1484,9 @@ const SVG = (props: Props) => {
     // case 'filters/rev-id':
     case 'filters/rev-id': return <Filters_rev_id width={ width } height={ height } fill={ fill } />;
   
+    // case 'filters/screen':
+    case 'filters/screen': return <Filters_screen width={ width } height={ height } fill={ fill } />;
+  
     // case 'filters/state-action':
     case 'filters/state-action': return <Filters_state_action width={ width } height={ height } fill={ fill } />;
   
diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js
index 9a2c9bf07..274b1030c 100644
--- 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) => {
diff --git a/frontend/app/svg/icons/filters/chevrons-up-down.svg b/frontend/app/svg/icons/filters/chevrons-up-down.svg
new file mode 100644
index 000000000..b538d60da
--- /dev/null
+++ 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>
diff --git a/frontend/app/svg/icons/filters/screen.svg b/frontend/app/svg/icons/filters/screen.svg
new file mode 100644
index 000000000..ebe2fd223
--- /dev/null
+++ 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>
diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts
index ca1a0b869..2fbefcc57 100644
--- 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',
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 1add570a4..810241ce5 100644
--- 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);