Loading
function(e,t,n){n.d(t,{Ay:()=>R,DQ:()=>C,Dj:()=>j,F5:()=>T,Jc:()=>E,L6:()=>f,ZX:()=>_,km:()=>v});var i=n(627968),s=n(64700),r=n(503698),l=n.n(r),a=n(17928),o=n(990078),d=n(834730),u=n(821609),c=n(150934),h=n(364522),m=n(964486),g=n(617710),p=n(127819),x=n(505206);let f=1e3/60,A=1e3/30,E=5e3,S=1e3/60*3,I=Math.ceil(3e3/(1e3/60));function v(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:window,i=s.useRef(null),r=s.useRef(null),l=s.useRef(null),a=s.useRef(n??window);s.useEffect(()=>{a.current=n??window},[n]);let o=s.useCallback(()=>{null!=i.current&&a.current.clearInterval(i.current),null!=r.current&&a.current.cancelIdleCallback(r.current),null!=l.current&&a.current.cancelAnimationFrame(l.current)},[]),d=s.useCallback(()=>{i.current=a.current.setTimeout(()=>{r.current=a.current.requestIdleCallback(e),l.current=a.current.requestAnimationFrame(()=>{t(),d()})},12)},[e,t]);return[s.useCallback(()=>{o(),d()},[o,d]),o]}function T(e){let t=s.useRef(Array(I).fill(0)),n=s.useRef(performance.now()),i=s.useRef(0),r=s.useRef(0),l=s.useRef(0),a=e.dispatcher.getIsSchedulerBackgrounded(),o=s.useRef(a);o.current=a;let d=s.useRef(a?performance.now():0);return s.useEffect(()=>{e.dispatcher.getIsSchedulerBackgrounded()&&(d.current=performance.now())}),[s.useCallback(function(){let e=performance.now(),s=e-n.current;n.current=e,o.current||(i.current-=t.current[l.current],t.current[l.current]=s,i.current+=s,r.current<I&&(r.current+=1),l.current=(l.current+1)%I)},[]),(e,t)=>{let n=r.current??1;return Math.abs(e*t-i.current/n*n)/t},()=>{i.current=0,r.current=0,t.current.fill(0),n.current=performance.now(),l.current=0}]}function j(e,t){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=s.useRef(Array(I).fill(0)),r=s.useRef(performance.now()),l=s.useRef(0),a=s.useRef(0),o=s.useRef(0),d=s.useRef(0),u=s.useRef(0),c=s.useRef(0),h=s.useCallback(()=>{i.current.fill(0),l.current=0,a.current=0,d.current=0,u.current=0,r.current=performance.now(),o.current=0},[]),m=s.useCallback(function(){let s=performance.now(),h=s-r.current;if(r.current=s,t.current&&!n)return;if(a.current-=i.current[u.current],i.current[u.current]=h,a.current+=h,d.current<I&&(d.current+=1),u.current=(u.current+1)%I,h>S){let t=0===d.current?f:a.current/d.current,n=Math.min(2*f,t),i=Math.floor(h/(e?n:f));i>0&&(c.current=performance.now()),l.current+=i}let m=0===d.current?f:a.current/d.current;o.current+=h/m},[e,t,n]),g=0===d.current?0:a.current/d.current;return{currentFPS:0===g?0:f/g*60,averageFrameTime:g,timeSinceLastDrop:(performance.now()-c.current)/1e3,droppedFramesRef:l,bufferFramecountRef:d,renderedFrameCount:o,frameCheckerEffect:m,onResetFrameData:h}}function C(e){let t=e.dispatcher.getIsSchedulerBackgrounded(),n=s.useRef(t);n.current=t;let i=s.useRef(t?performance.now():0);return s.useEffect(()=>{e.dispatcher.getIsSchedulerBackgrounded()&&(i.current=performance.now())}),[n,i]}function y(e){let{socket:t,isAverageFrameTime:n}=e,[r,l]=C(t),{currentFPS:a,averageFrameTime:c,timeSinceLastDrop:h,onResetFrameData:g,droppedFramesRef:x,renderedFrameCount:A,bufferFramecountRef:S,frameCheckerEffect:I}=j(n,r),[y,w,b]=T(t),[N,_]=v(y,I),R=performance.now()-l.current<E,O=w(c,S.current);(0,m.Ay)(()=>(N(),()=>{_()}));let M=s.useCallback(()=>{g(),b(),N()},[g,b,N]);return(0,i.jsxs)("div",{className:p.st,children:[(0,i.jsxs)(d.E,{variant:"text-md/normal",color:"text-muted",children:["FPS (~3sec):"," ",(0,i.jsx)(d.E,{tag:"span",variant:"text-md/bold",color:a<30?"text-feedback-critical":a<45?"text-feedback-warning":"text-strong",children:a.toFixed(2)})]}),(0,i.jsxs)(d.E,{variant:"text-md/normal",color:"text-muted",children:["Dropped Frames:"," ",(0,i.jsx)(d.E,{tag:"span",variant:"text-md/bold",color:h<2?"text-feedback-critical":h<5?"text-feedback-warning":"text-strong",children:x.current}),(0,i.jsxs)(d.E,{tag:"span",variant:"text-sm/normal",color:"text-muted",className:p.af,children:["(Dropped: ",(x.current/A.current*100).toFixed(4),"%)"]}),R&&(0,i.jsx)(o.m,{position:"left",text:"We don't track frames while the app is in the background, because requestAnimationFrame doesn't fire in the background",asContainer:!0,children:(0,i.jsx)(d.E,{tag:"span",variant:"text-xs/bold",color:"text-feedback-critical",className:p.af,children:"(Backgrounded)"})})]}),(0,i.jsxs)(d.E,{variant:"text-md/normal",color:"text-muted",children:["Rendered Frames:"," ",(0,i.jsx)(d.E,{tag:"span",variant:"text-md/semibold",color:"text-subtle",children:A.current.toFixed(0)})]}),(0,i.jsxs)(d.E,{variant:"text-md/normal",color:"text-muted",children:["Frame Times (~3sec):"," ",(0,i.jsxs)(d.E,{tag:"span",variant:"text-md/semibold",color:c>1.1*f?"text-feedback-warning":"text-subtle",children:[c.toFixed(2),"ms"]})]}),(0,i.jsx)(o.m,{position:"left",text:"The average amount of 'lag' between us rendering a frame and being able to process background tasks. Values constantly above 1-2ms means our main thread is being burried by work and is taking all of its time in animation frames, most likely producing user interaciton blocking jank. (This doesn't work when the app is backgrounded though)",asContainer:!0,children:(0,i.jsxs)(d.E,{variant:"text-md/normal",color:"text-muted",children:["Idle Frame Delta (~3sec):"," ",(0,i.jsxs)(d.E,{tag:"span",variant:"text-md/semibold",color:O>1?"text-feedback-critical":"text-subtle",children:[O.toFixed(2),"ms"]}),R&&(0,i.jsx)(o.m,{position:"left",text:"We don't track frames while the app is in the background, because requestAnimationFrame doesn't fire in the background",asContainer:!0,children:(0,i.jsx)(d.E,{tag:"span",variant:"text-xs/bold",color:"text-feedback-critical",className:p.af,children:"(Backgrounded)"})})]})}),(0,i.jsx)("div",{className:p.m8,children:(0,i.jsx)(u.$,{variant:"primary",size:"sm",text:"Reset Frame Data",onClick:M})})]})}function w(e){let{socket:t,isAverageFrameTime:n,onToggleAverageFrameTime:r}=e,[l,a]=s.useState(t.dispatcher.getIsRequestIdleCallbackEnabled()),d=s.useRef(null);return s.useEffect(()=>(d.current=setInterval(()=>{a(t.dispatcher.getIsRequestIdleCallbackEnabled())},A),()=>{null!=d.current&&clearInterval(d.current)}),[t.dispatcher]),(0,i.jsxs)("div",{className:p.st,children:[(0,i.jsx)(o.m,{position:"left",text:"Instead of using 60fps to calculate the number of dropped frames, we use the average framerate to more accurately determine the number of actual dropped frames. Turn this off when benchmarking to get better comparsion between two different runtimes, where higher FPS might result in a higher dropped frame count.",asContainer:!0,children:(0,i.jsx)(c.S,{label:"Use Average Frame Time",checked:n,onChange:()=>r(!n)})}),(0,i.jsx)(c.S,{label:"Enable New Dispatch Scheduler (requestIdleCallback)",checked:l,onChange:()=>{var e;return e=!l,void(t.dispatcher.toggleRequestIdleCallback(e),a(e))}})]})}function b(e){let{socket:t}=e,n=t.dispatcher.getDispatchTimings(),[r,a]=s.useState(!1);return(0,i.jsxs)("div",{className:p.st,children:[(0,i.jsx)("div",{className:l()(r&&p.Mq),children:(0,i.jsx)(c.S,{label:"Show Dispatch Timings",checked:r,onChange:()=>a(e=>!e)})}),r?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(d.E,{variant:"text-md/medium",color:"text-muted",children:"Gateway Dispatch Timings:"}),(0,i.jsx)("table",{cellPadding:4,children:Object.entries(n).map(e=>{let[t,[n,s]]=e;return(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)(d.E,{variant:"text-xs/normal",color:"text-default",children:t})}),(0,i.jsx)("td",{children:(0,i.jsxs)(d.E,{tag:"span",variant:"text-xs/bold",color:"text-default",children:[n.toFixed(2),"ms"]})}),(0,i.jsx)("td",{children:(0,i.jsxs)(d.E,{tag:"span",variant:"text-xs/normal",color:"text-muted",children:["(count: ",s,")"]})})]},t)})})]}):null]})}function N(e){let{socket:t}=e,n=t.dispatcher.getSchedulerTelemetry(),[r,a]=s.useState(n.isTelemetryEnabled),[o,h]=s.useState(n.isTelemetryEnabled),m=e=>{h(e),n.toggleTelemetry(e)};return(0,i.jsxs)("div",{className:p.st,children:[(0,i.jsx)(c.S,{label:"Enable Dispatch Telemetry",checked:o,onChange:()=>m(!o)}),(0,i.jsx)("div",{className:l()(r&&p.Mq),children:(0,i.jsx)(c.S,{label:"Show Dispatch Scheduler Telemetry",checked:r,onChange:()=>{a(e=>{let t=!e;return t&&m(!0),t})}})}),r?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(d.E,{variant:"text-md/medium",color:"text-muted",children:"Dispatch Scheduler Telemetry:"}),(0,i.jsx)("table",{cellPadding:4,children:Object.entries(n.generateTelemetry()).map(e=>{let[t,n]=e;return(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)(d.E,{variant:"text-xs/normal",color:"text-default",children:t})}),(0,i.jsx)("td",{children:(0,i.jsx)(d.E,{tag:"span",variant:"text-xs/bold",color:"text-default",children:n})})]},t)})}),(0,i.jsx)("div",{className:p.m8,children:(0,i.jsx)(u.$,{variant:"primary",size:"sm",text:"Reset Scheduler Telemetry",onClick:()=>{n.reset()}})})]}):null]})}function _(){let[,e]=s.useState({});s.useEffect(()=>{let t=setInterval(()=>{e({})},A);return()=>{clearInterval(t)}},[])}function R(){let e=(0,a.bG)([g.A],()=>g.A.getSocket()),[t,n]=s.useState(!1);return _(),(0,i.jsx)("div",{className:l()(x.nd,p.nd),children:(0,i.jsxs)(h.Ip,{className:p.nd,children:[(0,i.jsx)(y,{socket:e,isAverageFrameTime:t}),(0,i.jsx)(w,{socket:e,isAverageFrameTime:t,onToggleAverageFrameTime:n}),(0,i.jsx)(b,{socket:e}),(0,i.jsx)(N,{socket:e})]})})}}