react-native-inapp-inspector 2.3.24 → 2.3.25

package/dist/commonjs/components/Inspector/AnalyticsTab.js

@@ -1,332 +1,64 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(a,l,r,s){s===void 0&&(s=r);var p=Object.getOwnPropertyDescriptor(l,r);(!p||("get"in p?!l.__esModule:p.writable||p.configurable))&&(p={enumerable:!0,get:function(){return l[r]}}),Object.defineProperty(a,s,p)}):(function(a,l,r,s){s===void 0&&(s=r),a[s]=l[r]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(a,l){Object.defineProperty(a,"default",{enumerable:!0,value:l})}):function(a,l){a.default=l}),__importStar=this&&this.__importStar||(function(){var a=function(l){return a=Object.getOwnPropertyNames||function(r){var s=[];for(var p in r)Object.prototype.hasOwnProperty.call(r,p)&&(s[s.length]=p);return s},a(l)};return function(l){if(l&&l.__esModule)return l;var r={};if(l!=null)for(var s=a(l),p=0;p<s.length;p++)s[p]!=="default"&&__createBinding(r,l,s[p]);return __setModuleDefault(r,l),r}})(),__importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),AnalyticsEventCard_1=__importDefault(require("../AnalyticsEventCard")),AnalyticsFilterModal_1=__importDefault(require("./AnalyticsFilterModal")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),EmptyState_1=__importDefault(require("../EmptyState")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),react_native_svg_1=__importStar(require("react-native-svg")),TouchableScale_1=__importDefault(require("../TouchableScale")),analyticsLogger_1=require("../../customHooks/analyticsLogger"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),AnalyticsHeader=react_1.default.memo(()=>{const{t:a}=(0,i18n_1.useTranslation)(),{analyticsEvents:l,filteredAnalyticsEvents:r,analyticsHeaderExpanded:s,setAnalyticsHeaderExpanded:p}=(0,InspectorContext_1.useInspector)(),[f,R]=(0,react_1.useState)(!1),L=(0,analyticsLogger_1.getCurrentUserId)(),B=(0,analyticsLogger_1.getCurrentUserProperties)(),S=(0,analyticsLogger_1.getDefaultEventParameters)(),v=(0,analyticsLogger_1.getCollectionEnabled)();if(l.length===0)return null;const I=Object.keys(B).length>0,D=Object.keys(S).length>0,b=r.length,k=(0,react_1.useMemo)(()=>{let e=0,o=0;for(const d of l){const n=(0,helpers_1.getEventCategory)(d.name),c=d.count||1;if(n==="ecommerce"){e+=c;const _=d.params?.value??d.params?.price;_&&!isNaN(Number(_))&&(o+=Number(_))}}return{ecommerce:e,totalRevenue:o}},[l]),E=(0,react_1.useMemo)(()=>{const e=new Map;for(const n of r){const c=n.screenName||n.params?.firebase_screen||n.params?.screen_name||n.params?.firebase_screen_class||n.screenClass;c&&typeof c=="string"&&c.trim()!==""&&e.set(c,(e.get(c)||0)+(n.count||1))}const o=Array.from(e.entries()).sort((n,c)=>c[1]-n[1]),d=o.length>0?o[0][1]:1;return o.slice(0,3).map(([n,c])=>({name:n,count:c,pct:Math.round(c/(r.length||1)*100),barWidthPct:Math.round(c/d*100)}))},[r]),h=12,u=64,A=320,[T,V]=(0,react_1.useState)(null),[F,$]=(0,react_1.useState)(0);(0,react_1.useEffect)(()=>{if(!v)return;const e=setInterval(()=>{$(o=>(o+1)%1e5)},1e3);return()=>clearInterval(e)},[v]);const y=(0,react_1.useMemo)(()=>{const e=[],o=Date.now(),d=6e4,n=d/h;for(let i=0;i<h;i++){const g=Math.round((h-1-i)*n/1e3);e.push({index:i,ecommerce:0,page_view:0,system:0,custom:0,total:0,x:i/(h-1)*(A-24)+12,y:u-12,isLatest:i===h-1,ageLabel:i===h-1?a("analytics.timeNow"):`-${g}s`})}for(const i of r){const g=o-i.timestamp;if(g>=0&&g<d){const m=Math.floor((d-1-g)/n);if(m>=0&&m<h){const C=(0,helpers_1.getEventCategory)(i.name),x=i.count||1;e[m].total+=x,C==="ecommerce"?e[m].ecommerce+=x:C==="page_view"?e[m].page_view+=x:C==="system"?e[m].system+=x:e[m].custom+=x}}}const c=Math.max(...e.map(i=>i.total),4);e.forEach(i=>{const g=i.total/c*(u-22);i.y=u-10-g});let _=`M ${e[0].x.toFixed(1)} ${e[0].y.toFixed(1)}`;for(let i=0;i<e.length-1;i++){const g=e[Math.max(0,i-1)],m=e[i],C=e[i+1],x=e[Math.min(e.length-1,i+2)],H=m.x+(C.x-g.x)/6,W=m.y+(C.y-g.y)/6,N=C.x-(x.x-m.x)/6,j=C.y-(x.y-m.y)/6;_+=` C ${H.toFixed(1)} ${W.toFixed(1)}, ${N.toFixed(1)} ${j.toFixed(1)}, ${C.x.toFixed(1)} ${C.y.toFixed(1)}`}const w=e[e.length-1],O=e[0],P=`${_} L ${w.x.toFixed(1)} ${u-4} L ${O.x.toFixed(1)} ${u-4} Z`,z=Math.max(...e.map(i=>i.total),0),M=Math.round(e.reduce((i,g)=>i+g.total,0));return{buckets:e,linePath:_,areaPath:P,peakVal:z,eventRate:M}},[r,u,A,F,a]),t=T!=null?y.buckets[T]:null;return<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(n,l,r,a){a===void 0&&(a=r);var s=Object.getOwnPropertyDescriptor(l,r);(!s||("get"in s?!l.__esModule:s.writable||s.configurable))&&(s={enumerable:!0,get:function(){return l[r]}}),Object.defineProperty(n,a,s)}):(function(n,l,r,a){a===void 0&&(a=r),n[a]=l[r]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(n,l){Object.defineProperty(n,"default",{enumerable:!0,value:l})}):function(n,l){n.default=l}),__importStar=this&&this.__importStar||(function(){var n=function(l){return n=Object.getOwnPropertyNames||function(r){var a=[];for(var s in r)Object.prototype.hasOwnProperty.call(r,s)&&(a[a.length]=s);return a},n(l)};return function(l){if(l&&l.__esModule)return l;var r={};if(l!=null)for(var a=n(l),s=0;s<a.length;s++)a[s]!=="default"&&__createBinding(r,l,a[s]);return __setModuleDefault(r,l),r}})(),__importDefault=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),AnalyticsEventCard_1=__importDefault(require("../AnalyticsEventCard")),AnalyticsFilterModal_1=__importDefault(require("./AnalyticsFilterModal")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),EmptyState_1=__importDefault(require("../EmptyState")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),TouchableScale_1=__importDefault(require("../TouchableScale")),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),AnalyticsTab=react_1.default.memo(()=>{const{t:n}=(0,i18n_1.useTranslation)(),{analyticsEvents:l,filteredAnalyticsEvents:r,analyticsSearch:a,setAnalyticsSearch:s,analyticsFilters:v,setAnalyticsFilters:x,handleDelete:z,selectedEvent:L,setSelectedEvent:O,newEventIds:P,logRouteMapRef:V,isAnalyticsLayoutReady:B,setIsAnalyticsLayoutReady:E,isAnalyticsPaused:w,setIsAnalyticsPaused:N,isAnalyticsFilterApplied:A}=(0,InspectorContext_1.useInspector)(),R=(0,react_1.useRef)(null),[q,F]=(0,react_1.useState)(!1),[M,D]=(0,react_1.useState)(100),S=(0,react_1.useMemo)(()=>r.slice(0,M),[r,M]),u=(0,react_1.useMemo)(()=>{let e=0,o=0,t=0,i=0;for(const m of l){const C=(0,helpers_1.getEventCategory)(m.name),c=m.count||1;C==="ecommerce"?e+=c:C==="page_view"?o+=c:C==="system"?t+=c:i+=c}const _=e+o+t+i;return{ecommerce:e,page_view:o,system:t,custom:i,totalCount:_}},[l]),$=(0,react_1.useCallback)(e=>{(0,InspectorContext_1.animateNextLayout)(),x(o=>{if(e==="all")return{...o,categories:new Set(["all"])};const t=new Set(o.categories);if(t.has("all"))t.delete("all"),t.add(e);else if(t.has(e))t.delete(e),t.size===0&&t.add("all");else if(t.add(e),t.has("ecommerce")&&t.has("page_view")&&t.has("system")&&t.has("custom"))return{...o,categories:new Set(["all"])};return{...o,categories:t}})},[x]),j=(0,react_1.useCallback)((e,o)=>e?.id?.toString()??o.toString(),[]),H=(0,react_1.useCallback)(({item:e,index:o})=>{const t=r[o+1],i=r[o-1],_=t?e.timestamp-t.timestamp:void 0,m=Math.floor(e.timestamp/6e4),C=i?Math.floor(i.timestamp/6e4):-1,c=o===0||m!==C;return<AnalyticsEventCard_1.default event={e}onPress={()=>{O(e)}}isNew={P.has(e.id)}searchStr={a}isFirst={o===0}isLast={o===r.length-1}msSincePrev={_}showTimestamp={c}computedScreenName={(()=>{if(!e)return"";const b=e.screenName||e.screenClass||e.pageTitle||e.pageLocation||e.params?.firebase_screen||e.params?.screen_name||e.params?.firebase_screen_class||e.params?.screen_class;let I=typeof b=="string"?b:b?JSON.stringify(b):"";const T=V.current.get(e.id+1e6);if(!I&&T&&T.path!=="Navigators"){const k=T.path.split(" \u2794 ");I=k[k.length-1]}return I})()}/>},[r,a,P,O,V]),W=(0,react_1.useCallback)((e,o)=>({length:86,offset:86*o,index:o}),[]);return<>
       
-      <react_native_1.TouchableOpacity activeOpacity={.7}onPress={()=>{(0,InspectorContext_1.animateNextLayout)(),R(e=>!e)}}style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:2}}>
-        <react_native_1.View style={{flex:1}}>
-          <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-            <react_native_1.Text style={styles_1.default.analyticsHeaderTitle}>{a("analytics.realtimeStream")}</react_native_1.Text>
-            <react_native_1.View style={[styles_1.default.statusDot,{backgroundColor:v?AppColors_1.AppColors.greenColor:AppColors_1.AppColors.errorColor}]}/>
-            <react_native_1.Text style={[styles_1.default.statusText,{color:v?AppColors_1.AppColors.greenColor:AppColors_1.AppColors.errorColor,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-              {a(v?"performance.live":"common.pause")}
-            </react_native_1.Text>
-          </react_native_1.View>
-          <react_native_1.Text style={styles_1.default.analyticsHeaderSubtitle}numberOfLines={1}>
-            {L?`${a("analytics.userId")}: ${L}`:a("analytics.emptySubtitle")}
-          </react_native_1.Text>
-        </react_native_1.View>
-
-        <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:8}}>
-          {f?<react_native_1.TouchableOpacity style={styles_1.default.analyticsHeaderToggle}activeOpacity={.7}onPress={e=>{e.stopPropagation(),(0,InspectorContext_1.animateNextLayout)(),p(!s)}}>
-              <react_native_1.Text style={styles_1.default.analyticsHeaderToggleText}>
-                {a(s?"common.close":"analytics.eventDetails")}
-              </react_native_1.Text>
-            </react_native_1.TouchableOpacity>:<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${AppColors_1.AppColors.purple}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}25`}}>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.purple}}>
-                {b} {b===1?"event":"events"}
-              </react_native_1.Text>
-            </react_native_1.View>}
-
-          <NetworkIcons_1.ChevronIcon direction={f?"up":"down"}size={16}color={AppColors_1.AppColors.grayTextWeak}/>
-        </react_native_1.View>
-      </react_native_1.TouchableOpacity>
-
-      
-      {f&&<react_native_1.View style={{marginTop:10}}>
-          
-          <react_native_1.View style={{marginBottom:8,backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,padding:10}}>
-            
-            <react_native_1.View style={{flexDirection:"row",justifyContent:"space-between",alignItems:"flex-start",marginBottom:6}}>
-              <react_native_1.View>
-                <react_native_1.View style={{flexDirection:"row",alignItems:"baseline",gap:6}}>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:22,color:AppColors_1.AppColors.primaryBlack,lineHeight:26}}>
-                    {b}
-                  </react_native_1.Text>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.grayTextWeak}}>
-                    {a("analytics.eventsInWindow")}
-                  </react_native_1.Text>
-                </react_native_1.View>
-              </react_native_1.View>
-
-              
-              <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5}}>
-                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${AppColors_1.AppColors.purple}14`,paddingHorizontal:6,paddingVertical:2.5,borderRadius:4,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}2E`}}>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.purple}}>
-                    {a("analytics.eventVelocity",{rate:y.eventRate})}
-                  </react_native_1.Text>
-                </react_native_1.View>
-
-                {k.totalRevenue>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${AppColors_1.AppColors.emerald600}15`,paddingHorizontal:6,paddingVertical:2.5,borderRadius:4,borderWidth:1,borderColor:`${AppColors_1.AppColors.emerald600}30`}}>
-                    <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600}size={10}/>
-                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.emerald600}}>
-                      ${k.totalRevenue.toFixed(2)}
-                    </react_native_1.Text>
-                  </react_native_1.View>}
-              </react_native_1.View>
-            </react_native_1.View>
-
-            
-            <react_native_1.View style={{height:u,position:"relative",overflow:"hidden",borderRadius:8}}>
-              <react_native_svg_1.default width="100%"height={u}viewBox={`0 0 ${A} ${u}`}preserveAspectRatio="none">
-                <react_native_svg_1.Defs>
-                  <react_native_svg_1.LinearGradient id="crashlyticsBarGrad"x1="0"y1="0"x2="0"y2="1">
-                    <react_native_svg_1.Stop offset="0%"stopColor="#8B5CF6"stopOpacity="0.9"/>
-                    <react_native_svg_1.Stop offset="100%"stopColor="#6366F1"stopOpacity="0.6"/>
-                  </react_native_svg_1.LinearGradient>
-                  <react_native_svg_1.LinearGradient id="crashlyticsAreaGrad"x1="0"y1="0"x2="0"y2="1">
-                    <react_native_svg_1.Stop offset="0%"stopColor="#8B5CF6"stopOpacity="0.25"/>
-                    <react_native_svg_1.Stop offset="80%"stopColor="#8B5CF6"stopOpacity="0.04"/>
-                    <react_native_svg_1.Stop offset="100%"stopColor="#8B5CF6"stopOpacity="0.0"/>
-                  </react_native_svg_1.LinearGradient>
-                </react_native_svg_1.Defs>
-
-                
-                <react_native_svg_1.Line x1="6"y1={u-6}x2={A-6}y2={u-6}stroke="#E2E8F0"strokeWidth="1"/>
-                <react_native_svg_1.Line x1="6"y1={u/2}x2={A-6}y2={u/2}stroke="#F1F5F9"strokeWidth="1"strokeDasharray="4,4"/>
-
-                
-                <react_native_svg_1.Path d={y.areaPath}fill="url(#crashlyticsAreaGrad)"/>
-
-                
-                {y.buckets.map((e,o)=>{const d=T===o,n=10,c=e.x-n/2,_=Math.max(3,u-8-e.y),w=u-8-_;return<react_native_svg_1.G key={`bar-${e.index}`}>
-                      
-                      <react_native_svg_1.Rect x={c}y={6}width={n}height={u-14}rx={3}fill={d?"#EDE9FE":"#F8FAFC"}/>
-
-                      
-                      {e.total>0&&<react_native_svg_1.Rect x={c}y={w}width={n}height={_}rx={3}fill="url(#crashlyticsBarGrad)"/>}
-
-                      
-                      {d&&<react_native_svg_1.Line x1={e.x}y1={4}x2={e.x}y2={u-6}stroke="#8B5CF6"strokeWidth="1.5"strokeDasharray="2,2"/>}
-                    </react_native_svg_1.G>})}
-
-                
-                <react_native_svg_1.Path d={y.linePath}fill="none"stroke="#8B5CF6"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-
-                
-                {y.buckets.length>0&&<react_native_svg_1.G>
-                    <react_native_svg_1.Circle cx={y.buckets[y.buckets.length-1].x}cy={y.buckets[y.buckets.length-1].y}r="5.5"fill="#8B5CF6"opacity="0.25"/>
-                    <react_native_svg_1.Circle cx={y.buckets[y.buckets.length-1].x}cy={y.buckets[y.buckets.length-1].y}r="3"fill="#7C3AED"/>
-                  </react_native_svg_1.G>}
-              </react_native_svg_1.default>
-
-              
-              <react_native_1.View style={{position:"absolute",top:0,left:0,right:0,bottom:0,flexDirection:"row"}}>
-                {y.buckets.map((e,o)=><react_native_1.TouchableOpacity key={e.index}style={{flex:1,height:"100%"}}activeOpacity={.8}onPress={()=>V(T===o?null:o)}/>)}
-              </react_native_1.View>
-            </react_native_1.View>
-
-            
-            {t&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:AppColors_1.AppColors.white,borderRadius:6,paddingHorizontal:8,paddingVertical:4,marginTop:4,borderWidth:1,borderColor:AppColors_1.AppColors.brandPurple}}>
-                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.primaryBlack}}>
-                  {a("analytics.selectedBucket",{time:t.ageLabel,count:t.total})}
-                </react_native_1.Text>
-                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                  {t.ecommerce>0&&<react_native_1.Text style={{fontSize:9,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.amber700}}>
-                      Ecom: {t.ecommerce}
-                    </react_native_1.Text>}
-                  {t.page_view>0&&<react_native_1.Text style={{fontSize:9,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.sky500}}>
-                      Screen: {t.page_view}
-                    </react_native_1.Text>}
-                  {t.custom>0&&<react_native_1.Text style={{fontSize:9,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.brandPurple}}>
-                      Custom: {t.custom}
-                    </react_native_1.Text>}
-                </react_native_1.View>
-              </react_native_1.View>}
-
-            
-            <react_native_1.View style={{flexDirection:"row",justifyContent:"space-between",marginTop:4,paddingHorizontal:4}}>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:8.5,color:AppColors_1.AppColors.grayTextWeak}}>
-                -60s
-              </react_native_1.Text>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:8.5,color:AppColors_1.AppColors.grayTextWeak}}>
-                -40s
-              </react_native_1.Text>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:8.5,color:AppColors_1.AppColors.grayTextWeak}}>
-                -20s
-              </react_native_1.Text>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.brandPurple}}>
-                {a("analytics.timeNow")}
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_1.View>
-
-          
-          {E.length>0&&<react_native_1.View style={{marginTop:4,backgroundColor:`${AppColors_1.AppColors.sky500}0A`,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.sky500}22`,padding:8}}>
-              <react_native_1.View style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6}}>
-                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                  <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.sky600}size={11}/>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.sky600,letterSpacing:.3}}>
-                    TOP SCREENS (REALTIME)
-                  </react_native_1.Text>
-                </react_native_1.View>
-                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:9,color:AppColors_1.AppColors.grayTextWeak}}>
-                  Views
-                </react_native_1.Text>
-              </react_native_1.View>
-
-              <react_native_1.View style={{gap:4}}>
-                {E.map(e=><react_native_1.View key={e.name}>
-                    <react_native_1.View style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:2}}>
-                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.primaryBlack}}numberOfLines={1}>
-                        {e.name}
-                      </react_native_1.Text>
-                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.sky600}}>
-                        {e.count} ({e.pct}%)
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                    
-                    <react_native_1.View style={{height:3,borderRadius:1.5,backgroundColor:`${AppColors_1.AppColors.sky500}22`,overflow:"hidden"}}>
-                      <react_native_1.View style={{height:"100%",width:`${e.barWidthPct}%`,backgroundColor:AppColors_1.AppColors.sky500}}/>
-                    </react_native_1.View>
-                  </react_native_1.View>)}
-              </react_native_1.View>
-            </react_native_1.View>}
-
-          
-          {s&&<>
-              
-              <react_native_1.View style={styles_1.default.analyticsStatsRow}>
-                <react_native_1.View style={styles_1.default.analyticsStatBox}>
-                  <react_native_1.Text style={styles_1.default.analyticsStatValue}>{b}</react_native_1.Text>
-                  <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{a("analytics.eventCount",{count:b})}</react_native_1.Text>
-                </react_native_1.View>
-                <react_native_1.View style={styles_1.default.analyticsStatBox}>
-                  <react_native_1.Text style={styles_1.default.analyticsStatValue}>
-                    {Object.keys(B).length}
-                  </react_native_1.Text>
-                  <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{a("analytics.props")}</react_native_1.Text>
-                </react_native_1.View>
-                <react_native_1.View style={styles_1.default.analyticsStatBox}>
-                  <react_native_1.Text style={styles_1.default.analyticsStatValue}>
-                    {Object.keys(S).length}
-                  </react_native_1.Text>
-                  <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{a("analytics.defaultParameters")}</react_native_1.Text>
-                </react_native_1.View>
-              </react_native_1.View>
-
-              
-              {(I||D)&&<react_native_1.View style={styles_1.default.analyticsHeaderDetails}>
-                  {I&&<react_native_1.View style={{marginBottom:10}}>
-                      <react_native_1.Text style={styles_1.default.detailsGroupTitle}>{a("analytics.userProperties")}</react_native_1.Text>
-                      {Object.entries(B).map(([e,o])=><react_native_1.View key={e}style={styles_1.default.detailsRow}>
-                          <react_native_1.Text style={styles_1.default.detailsKey}selectable={!0}>{e}</react_native_1.Text>
-                          <react_native_1.Text style={styles_1.default.detailsValue}selectable={!0}>{String(o)}</react_native_1.Text>
-                        </react_native_1.View>)}
-                    </react_native_1.View>}
-
-                  {D&&<react_native_1.View>
-                      <react_native_1.Text style={styles_1.default.detailsGroupTitle}>{a("analytics.defaultParameters")}</react_native_1.Text>
-                      {Object.entries(S).map(([e,o])=><react_native_1.View key={e}style={styles_1.default.detailsRow}>
-                          <react_native_1.Text style={styles_1.default.detailsKey}selectable={!0}>{e}</react_native_1.Text>
-                          <react_native_1.Text style={styles_1.default.detailsValue}selectable={!0}>{String(o)}</react_native_1.Text>
-                        </react_native_1.View>)}
-                    </react_native_1.View>}
-                </react_native_1.View>}
-            </>}
-        </react_native_1.View>}
-    </react_native_1.View>}),AnalyticsTab=react_1.default.memo(()=>{const{t:a}=(0,i18n_1.useTranslation)(),{analyticsEvents:l,filteredAnalyticsEvents:r,analyticsSearch:s,setAnalyticsSearch:p,analyticsFilters:f,setAnalyticsFilters:R,handleDelete:L,selectedEvent:B,setSelectedEvent:S,newEventIds:v,logRouteMapRef:I,isAnalyticsLayoutReady:D,setIsAnalyticsLayoutReady:b,isAnalyticsPaused:k,setIsAnalyticsPaused:E,isAnalyticsFilterApplied:h}=(0,InspectorContext_1.useInspector)(),u=(0,react_1.useRef)(null),[A,T]=(0,react_1.useState)(!1),V=(0,react_1.useMemo)(()=>{let t=0,e=0,o=0,d=0;for(const c of l){const _=(0,helpers_1.getEventCategory)(c.name),w=c.count||1;_==="ecommerce"?t+=w:_==="page_view"?e+=w:_==="system"?o+=w:d+=w}const n=t+e+o+d;return{ecommerce:t,page_view:e,system:o,custom:d,totalCount:n}},[l]),F=(0,react_1.useCallback)(t=>{(0,InspectorContext_1.animateNextLayout)(),R(e=>{if(t==="all")return{...e,categories:new Set(["all"])};const o=new Set(e.categories);if(o.has("all"))o.delete("all"),o.add(t);else if(o.has(t))o.delete(t),o.size===0&&o.add("all");else if(o.add(t),o.has("ecommerce")&&o.has("page_view")&&o.has("system")&&o.has("custom"))return{...e,categories:new Set(["all"])};return{...e,categories:o}})},[R]),$=(0,react_1.useCallback)((t,e)=>t?.id?.toString()??e.toString(),[]),y=(0,react_1.useCallback)(({item:t,index:e})=>{const o=r[e+1],d=r[e-1],n=o?t.timestamp-o.timestamp:void 0,c=Math.floor(t.timestamp/6e4),_=d?Math.floor(d.timestamp/6e4):-1,w=e===0||c!==_;return<AnalyticsEventCard_1.default event={t}onPress={()=>{S(t)}}isNew={v.has(t.id)}searchStr={s}isFirst={e===0}isLast={e===r.length-1}msSincePrev={n}showTimestamp={w}computedScreenName={(()=>{if(!t)return"";const O=t.screenName||t.screenClass||t.pageTitle||t.pageLocation||t.params?.firebase_screen||t.params?.screen_name||t.params?.firebase_screen_class||t.params?.screen_class;let P=typeof O=="string"?O:O?JSON.stringify(O):"";const z=I.current.get(t.id+1e6);if(!P&&z&&z.path!=="Navigators"){const M=z.path.split(" \u2794 ");P=M[M.length-1]}return P})()}/>},[r,s,v,S,I]);return<>
-      
-      {B==null&&<react_native_1.View style={{backgroundColor:AppColors_1.AppColors.white,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,paddingBottom:6}}>
+      {L==null&&<react_native_1.View style={{backgroundColor:AppColors_1.AppColors.white,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,paddingBottom:6}}>
           <react_native_1.View style={[styles_1.default.toolbarRow,{marginTop:12,marginBottom:8}]}>
             <react_native_1.View style={styles_1.default.searchContainer}>
               <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak}size={16}/>
-              <react_native_1.TextInput placeholder="Search events..."placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={s}onChangeText={p}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
-              {s.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
+              <react_native_1.TextInput placeholder={n("analytics.searchPlaceholder","Search events...")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={a}onChangeText={s}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              {a.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
                   <react_native_1.View style={{backgroundColor:`${AppColors_1.AppColors.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
                     <react_native_1.Text style={{color:AppColors_1.AppColors.purple,fontSize:9.5,fontFamily:AppFonts_1.AppFonts.interBold}}>
                       {r.length}
                     </react_native_1.Text>
                   </react_native_1.View>
-                  <react_native_1.Pressable onPress={()=>p("")}hitSlop={10}style={styles_1.default.clearBtn}>
+                  <react_native_1.Pressable onPress={()=>s("")}hitSlop={10}style={styles_1.default.clearBtn}>
                     <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak}size={13}/>
                   </react_native_1.Pressable>
                 </react_native_1.View>}
             </react_native_1.View>
             <react_native_1.View style={styles_1.default.toolbarRight}>
-              <react_native_1.TouchableOpacity style={[styles_1.default.toolbarBtn,k&&{borderColor:`${AppColors_1.AppColors.darkOrange}50`,backgroundColor:`${AppColors_1.AppColors.darkOrange}18`}]}onPress={()=>E(t=>!t)}hitSlop={6}>
-                <NetworkIcons_1.HeaderPauseIcon isPaused={k}color={k?AppColors_1.AppColors.darkOrange:AppColors_1.AppColors.grayTextStrong}size={16}/>
+              <react_native_1.TouchableOpacity style={[styles_1.default.toolbarBtn,w&&{borderColor:`${AppColors_1.AppColors.darkOrange}50`,backgroundColor:`${AppColors_1.AppColors.darkOrange}18`}]}onPress={()=>N(e=>!e)}hitSlop={6}>
+                <NetworkIcons_1.HeaderPauseIcon isPaused={w}color={w?AppColors_1.AppColors.darkOrange:AppColors_1.AppColors.grayTextStrong}size={16}/>
               </react_native_1.TouchableOpacity>
 
               
-              <react_native_1.TouchableOpacity style={[styles_1.default.toolbarBtn,h&&{borderColor:`${AppColors_1.AppColors.brandPurple}60`,backgroundColor:`${AppColors_1.AppColors.brandPurple}15`}]}onPress={()=>T(!0)}hitSlop={6}>
-                <NetworkIcons_1.FilterIcon color={h?AppColors_1.AppColors.brandPurple:AppColors_1.AppColors.grayTextStrong}size={15}/>
-                {h&&<react_native_1.View style={{position:"absolute",top:2,right:2,width:7,height:7,borderRadius:3.5,backgroundColor:AppColors_1.AppColors.darkOrange,borderWidth:1,borderColor:AppColors_1.AppColors.white}}/>}
+              <react_native_1.TouchableOpacity style={[styles_1.default.toolbarBtn,A&&{borderColor:`${AppColors_1.AppColors.brandPurple}60`,backgroundColor:`${AppColors_1.AppColors.brandPurple}15`}]}onPress={()=>F(!0)}hitSlop={6}>
+                <NetworkIcons_1.FilterIcon color={A?AppColors_1.AppColors.brandPurple:AppColors_1.AppColors.grayTextStrong}size={15}/>
+                {A&&<react_native_1.View style={{position:"absolute",top:2,right:2,width:7,height:7,borderRadius:3.5,backgroundColor:AppColors_1.AppColors.darkOrange,borderWidth:1,borderColor:AppColors_1.AppColors.white}}/>}
               </react_native_1.TouchableOpacity>
 
-              <react_native_1.TouchableOpacity style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={L}hitSlop={6}>
+              <react_native_1.TouchableOpacity style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={z}hitSlop={6}>
                 <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor}size={15}/>
               </react_native_1.TouchableOpacity>
             </react_native_1.View>
           </react_native_1.View>
 
           
-          <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={{marginVertical:4,maxHeight:46}}contentContainerStyle={{paddingHorizontal:16,paddingBottom:4,flexDirection:"row",alignItems:"center",gap:8}}>
-            
-            {(()=>{const t=f.categories.has("all");return<TouchableScale_1.default onPress={()=>F("all")}>
-                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.indigo600Alt:AppColors_1.AppColors.indigo50,borderColor:t?AppColors_1.AppColors.indigo600:AppColors_1.AppColors.indigo400,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.indigo600Alt,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
-                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                      <NetworkIcons_1.LayersIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.indigo600Alt}/>
-                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.indigo600Alt,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-                        {a("common.all","All")} ({V.totalCount})
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                  </react_native_1.View>
-                </TouchableScale_1.default>})()}
-
-            
-            {(()=>{const t=!f.categories.has("all")&&f.categories.has("ecommerce");return<TouchableScale_1.default onPress={()=>F("ecommerce")}>
-                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.amber600:AppColors_1.AppColors.amber100,borderColor:t?AppColors_1.AppColors.amber700:AppColors_1.AppColors.amber200,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.amber600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
-                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                      <NetworkIcons_1.CartIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.amber700}/>
-                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.amber800Warm,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-                        Ecommerce ({V.ecommerce})
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                  </react_native_1.View>
-                </TouchableScale_1.default>})()}
-
-            
-            {(()=>{const t=!f.categories.has("all")&&f.categories.has("page_view");return<TouchableScale_1.default onPress={()=>F("page_view")}>
-                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.sky600:AppColors_1.AppColors.sky100,borderColor:t?AppColors_1.AppColors.blue700:AppColors_1.AppColors.sky400,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.sky600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
-                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                      <NetworkIcons_1.GlobeIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.sky600}/>
-                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.sky600,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-                        Screens ({V.page_view})
+          <react_native_1.View style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
+            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+              {[{id:"all",label:n("common.all","All"),count:u.totalCount,color:AppColors_1.AppColors.purple,Icon:NetworkIcons_1.LayersIcon},{id:"ecommerce",label:"Ecommerce",count:u.ecommerce,color:AppColors_1.AppColors.amber600,Icon:NetworkIcons_1.CartIcon},{id:"page_view",label:"Screens",count:u.page_view,color:AppColors_1.AppColors.sky600,Icon:NetworkIcons_1.GlobeIcon},{id:"system",label:"System",count:u.system,color:AppColors_1.AppColors.violet600,Icon:NetworkIcons_1.BoltIcon},{id:"custom",label:"Custom",count:u.custom,color:AppColors_1.AppColors.teal600,Icon:NetworkIcons_1.SparkleIcon}].map(e=>{const o=e.id==="all"?v.categories.has("all"):!v.categories.has("all")&&v.categories.has(e.id),t=e.color||AppColors_1.AppColors.purple,i=o?AppColors_1.AppColors.white:t,_=e.Icon;return<TouchableScale_1.default key={e.id}onPress={()=>$(e.id)}>
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:o?t:`${t}12`,borderWidth:1,borderColor:o?t:`${t}30`,gap:5}}>
+                      <_ size={11}color={i}/>
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:o?AppColors_1.AppColors.white:AppColors_1.AppColors.primaryBlack}}>
+                        {e.label}
                       </react_native_1.Text>
+                      <react_native_1.View style={{backgroundColor:o?"rgba(255,255,255,0.25)":`${t}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8,alignItems:"center",justifyContent:"center"}}>
+                        <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:o?AppColors_1.AppColors.white:t}}>
+                          {e.count}
+                        </react_native_1.Text>
+                      </react_native_1.View>
                     </react_native_1.View>
-                  </react_native_1.View>
-                </TouchableScale_1.default>})()}
-
-            
-            {(()=>{const t=!f.categories.has("all")&&f.categories.has("system");return<TouchableScale_1.default onPress={()=>F("system")}>
-                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.violet600:AppColors_1.AppColors.purple100,borderColor:t?AppColors_1.AppColors.purpleShade700:AppColors_1.AppColors.purple200,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.violet600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
-                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                      <NetworkIcons_1.BoltIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.purple}/>
-                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-                        System ({V.system})
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                  </react_native_1.View>
-                </TouchableScale_1.default>})()}
-
-            
-            {(()=>{const t=!f.categories.has("all")&&f.categories.has("custom");return<TouchableScale_1.default onPress={()=>F("custom")}>
-                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.pink600:AppColors_1.AppColors.pink100,borderColor:t?AppColors_1.AppColors.rose700:AppColors_1.AppColors.roseBorder,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.pink600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
-                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                      <NetworkIcons_1.SparkleIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple}/>
-                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.pink600,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-                        Custom ({V.custom})
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                  </react_native_1.View>
-                </TouchableScale_1.default>})()}
-          </react_native_1.ScrollView>
+                  </TouchableScale_1.default>})}
+            </react_native_1.ScrollView>
+          </react_native_1.View>
         </react_native_1.View>}
 
       
-      <AnalyticsFilterModal_1.default visible={A}onClose={()=>T(!1)}/>
+      <AnalyticsFilterModal_1.default visible={q}onClose={()=>F(!1)}/>
 
-      <react_native_1.View style={{flex:1}}onLayout={()=>b(!0)}>
-        {D?<>
-            <react_native_1.FlatList ref={u}data={r}keyExtractor={$}ListHeaderComponent={AnalyticsHeader}renderItem={y}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={react_native_1.Platform.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<EmptyState_1.default isSearch={s.length>0}searchQuery={s}customTitle={s.length>0?"No matching analytics events":"No analytics events yet"}customSub={s.length>0?`No events matched "${s}"`:"Call setupAnalyticsLogger(analytics()) at app start."}onClearSearch={()=>p("")}/>}ListFooterComponent={r.length>0?<EndOfListFooter_1.default count={r.length}label="events"/>:null}contentContainerStyle={[styles_1.default.listContent,r.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+      <react_native_1.View style={{flex:1}}onLayout={()=>E(!0)}>
+        {B?<>
+            <react_native_1.FlatList ref={R}data={S}keyExtractor={j}renderItem={H}getItemLayout={W}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={react_native_1.Platform.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<EmptyState_1.default isSearch={a.length>0}searchQuery={a}customTitle={a.length>0?"No matching analytics events":"No analytics events yet"}customSub={a.length>0?`No events matched "${a}"`:"Call setupAnalyticsLogger(analytics()) at app start."}onClearSearch={()=>s("")}/>}ListFooterComponent={r.length>0?<EndOfListFooter_1.default count={S.length}totalCount={r.length}label="events"hasMore={S.length<r.length}onLoadMore={()=>D(e=>e+10)}/>:null}contentContainerStyle={[styles_1.default.listContent,r.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
           </>:null}
       </react_native_1.View>
     </>});exports.default=AnalyticsTab;