admin08077/Githubgemini
0
1import{r as l,j as e}from"./react-DKy9e2uO.js";import{N as g}from"./index-Ck8YGBbR.js";import"./bottleneck-Cpj98o6Y.js";import"./react-dom-CpxHE_eW.js";import"./scheduler-DYLXRpC5.js";import"./idb-Dob3nYDb.js";import"./@google-D80DdW2m.js";import"./marked-CesSW9Du.js";import"./jszip-s56H2EZ-.js";const d=({title:a,value:m})=>e.jsxs("div",{className:"bg-surface border border-border p-3 rounded-lg text-center",children:[e.jsx("p",{className:"text-xs text-text-secondary",children:a}),e.jsx("p",{className:"text-xl font-bold text-text-primary",children:m})]}),F=()=>{const[a,m]=l.useState([]),[i,h]=l.useState("duration"),[c,p]=l.useState("desc");l.useEffect(()=>{const t=performance.getEntriesByType("resource");m(t)},[]);const f=l.useMemo(()=>[...a].sort((t,r)=>{const s=t[i],o=r[i];return s<o?c==="asc"?-1:1:s>o?c==="asc"?1:-1:0}),[a,i,c]),{totalSize:j,totalDuration:x,maxDuration:b}=l.useMemo(()=>{const t=a.reduce((s,o)=>s+o.transferSize,0),r=Math.max(...a.map(s=>s.startTime+s.duration),0);return{totalSize:t,totalDuration:r,maxDuration:Math.max(...a.map(s=>s.duration),0)}},[a]),N=t=>{p(i===t&&c==="desc"?"asc":"desc"),h(t)},u=t=>{if(t===0)return"0 B";const r=1024,s=["B","KB","MB"],o=Math.floor(Math.log(t)/Math.log(r));return parseFloat((t/Math.pow(r,o)).toFixed(1))+" "+s[o]},n=({skey:t,label:r,className:s})=>e.jsxs("th",{onClick:()=>N(t),className:`p-2 text-left cursor-pointer hover:bg-gray-100 ${s}`,children:[r," ",i===t&&(c==="asc"?"▲":"▼")]});return e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl font-bold flex items-center",children:[e.jsx(g,{}),e.jsx("span",{className:"ml-3",children:"Network Visualizer"})]}),e.jsx("p",{className:"text-text-secondary mt-1",children:"Inspect network resources with a summary and waterfall chart."})]}),e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-4 mb-4",children:[e.jsx(d,{title:"Total Requests",value:a.length}),e.jsx(d,{title:"Total Transferred",value:u(j)}),e.jsx(d,{title:"Finish Time",value:`${x.toFixed(0)}ms`}),e.jsx(d,{title:"Longest Request",value:`${b.toFixed(0)}ms`})]}),e.jsx("div",{className:"flex-grow overflow-auto bg-surface rounded-lg border border-border",children:e.jsxs("table",{className:"w-full text-sm text-left table-fixed",children:[e.jsx("thead",{className:"sticky top-0 bg-surface z-10",children:e.jsxs("tr",{className:"border-b border-border",children:[e.jsx(n,{skey:"name",label:"Name",className:"w-2/5"}),e.jsx(n,{skey:"initiatorType",label:"Type",className:"w-1/5"}),e.jsx(n,{skey:"transferSize",label:"Size",className:"w-1/5"}),e.jsx(n,{skey:"duration",label:"Time / Waterfall",className:"w-1/5"})]})}),e.jsx("tbody",{children:f.map((t,r)=>e.jsxs("tr",{className:"border-b border-border hover:bg-gray-50",children:[e.jsx("td",{className:"p-2 text-primary truncate",title:t.name,children:t.name.split("/").pop()}),e.jsx("td",{className:"p-2",children:t.initiatorType}),e.jsx("td",{className:"p-2",children:u(t.transferSize)}),e.jsx("td",{className:"p-2",children:e.jsxs("div",{className:"flex items-center",children:[e.jsxs("span",{className:"w-12",children:[t.duration.toFixed(0),"ms"]}),e.jsx("div",{className:"flex-grow h-4 bg-gray-200 rounded overflow-hidden",children:e.jsx("div",{className:"h-4 bg-primary rounded",style:{marginLeft:`${t.startTime/x*100}%`,width:`${t.duration/x*100}%`},title:`Start: ${t.startTime.toFixed(0)}ms`})})]})})]},r))})]})})]})};export{F as NetworkVisualizer};2//# sourceMappingURL=NetworkVisualizer-Cx-AAdTT.js.map3 