CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
NetworkVisualizer-D-9CF2tO.js3 linesDownload Raw Back to assets
1import{r as a,j as t}from"./react-CIdJ77ke.js";import{af as g}from"./index-CX7Qxd1D.js";import"./@braintree-DzxiOROe.js";import"./react-dom-R9L8nDNe.js";import"./scheduler-CoSDG3-6.js";import"./@google-CcUHq7Ay.js";import"./idb-Dob3nYDb.js";import"./marked-BrGMJkBT.js";import"./mermaid-KwKZWwy0.js";import"./dayjs-CeEF-NGT.js";import"./d3-transition-CiCB8KJE.js";import"./d3-timer-DdKHrDhs.js";import"./d3-dispatch-kxCwF96_.js";import"./d3-interpolate-CtIaNujU.js";import"./d3-color-amxIadob.js";import"./d3-selection-C52G7wmG.js";import"./d3-ease-DRPgKoYJ.js";import"./d3-zoom-BYoC3mS3.js";import"./dompurify-J5RlrwSC.js";import"./dagre-d3-es-CTpFWynZ.js";import"./lodash-es-Dt6r0yiR.js";import"./d3-shape-CX8xTzfR.js";import"./d3-path-CimkQT29.js";import"./d3-fetch-BOsq7VnW.js";import"./khroma-DUX6PT6k.js";import"./uuid-DhYbOkY1.js";import"./d3-scale-DRZz3QW5.js";import"./internmap-BkD7Hj8s.js";import"./d3-array-DGRYoJHh.js";import"./d3-format-CzD4bSOQ.js";import"./d3-time-format-CUNN4Ell.js";import"./d3-time-6cSPyVSY.js";import"./d3-axis-DSWTncID.js";import"./elkjs-oKFFZvz7.js";import"./cytoscape-DtBltrT8.js";import"./cytoscape-cose-bilkent-Cgr1thlj.js";import"./cose-base-CwCxnKwh.js";import"./layout-base-CMXQqlmj.js";import"./d3-sankey-DgqkLiUE.js";import"./d3-scale-chromatic-B-NsZVaP.js";import"./ts-dedent-DrFu-skq.js";import"./stylis-D5iaQeiq.js";import"./mdast-util-from-markdown-CLAsVoWb.js";import"./micromark-CTBPIv-_.js";import"./micromark-util-combine-extensions-Bka6Sc1c.js";import"./micromark-util-chunked-DrRIdSP-.js";import"./micromark-factory-space-x2vfxbz5.js";import"./micromark-util-character-Bcm1tP9o.js";import"./micromark-core-commonmark-AH8VCgT7.js";import"./micromark-util-classify-character-Cq7Fg3xE.js";import"./micromark-util-resolve-all-PQCKh0dx.js";import"./decode-named-character-reference-C3-224fz.js";import"./micromark-util-subtokenize-QwsxNXk2.js";import"./micromark-factory-destination-CypD_wgM.js";import"./micromark-factory-label-CRHH4ZHP.js";import"./micromark-factory-title-B7kCBvC9.js";import"./micromark-factory-whitespace-B322EA6O.js";import"./micromark-util-normalize-identifier-C9ANKk3v.js";import"./micromark-util-html-tag-name-DbKNfynz.js";import"./micromark-util-decode-numeric-character-reference-DRnCnno4.js";import"./micromark-util-decode-string-DJl8Y_PO.js";import"./unist-util-stringify-position-Ch_qCilz.js";import"./mdast-util-to-string-C_aolqmU.js";import"./jszip-CFFhfFtd.js";import"./octokit-B6bKu3NB.js";import"./@octokit-MBEWYTsi.js";import"./bottleneck-D_vuF9V7.js";import"./universal-user-agent-CLgqIJsR.js";import"./before-after-hook-y8XtM9xW.js";import"./fast-content-type-parse-3SwieiST.js";const c=({title:o,value:n})=>t.jsxs("div",{className:"bg-surface border border-border p-3 rounded-lg text-center",children:[t.jsx("p",{className:"text-xs text-text-secondary",children:o}),t.jsx("p",{className:"text-xl font-bold text-text-primary",children:n})]}),It=()=>{const[o,n]=a.useState([]),[m,u]=a.useState("duration"),[l,h]=a.useState("desc");a.useEffect(()=>{const r=performance.getEntriesByType("resource");n(r)},[]);const f=a.useMemo(()=>[...o].sort((r,s)=>{const e=r[m],i=s[m];return e<i?l==="asc"?-1:1:e>i?l==="asc"?1:-1:0}),[o,m,l]),{totalSize:j,totalDuration:d,maxDuration:b}=a.useMemo(()=>{const r=o.reduce((e,i)=>e+i.transferSize,0),s=Math.max(...o.map(e=>e.startTime+e.duration),0);return{totalSize:r,totalDuration:s,maxDuration:Math.max(...o.map(e=>e.duration),0)}},[o]),N=r=>{h(m===r&&l==="desc"?"asc":"desc"),u(r)},x=r=>{if(r===0)return"0 B";const s=1024,e=["B","KB","MB"],i=Math.floor(Math.log(r)/Math.log(s));return parseFloat((r/Math.pow(s,i)).toFixed(1))+" "+e[i]},p=({skey:r,label:s,className:e})=>t.jsxs("th",{onClick:()=>N(r),className:`p-2 text-left cursor-pointer hover:bg-gray-100 ${e}`,children:[s," ",m===r&&(l==="asc"?"▲":"▼")]});return t.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary",children:[t.jsxs("header",{className:"mb-6",children:[t.jsxs("h1",{className:"text-3xl font-bold flex items-center",children:[t.jsx(g,{}),t.jsx("span",{className:"ml-3",children:"Network Visualizer"})]}),t.jsx("p",{className:"text-text-secondary mt-1",children:"Inspect network resources with a summary and waterfall chart."})]}),t.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-4 mb-4",children:[t.jsx(c,{title:"Total Requests",value:o.length}),t.jsx(c,{title:"Total Transferred",value:x(j)}),t.jsx(c,{title:"Finish Time",value:`${d.toFixed(0)}ms`}),t.jsx(c,{title:"Longest Request",value:`${b.toFixed(0)}ms`})]}),t.jsx("div",{className:"flex-grow overflow-auto bg-surface rounded-lg border border-border",children:t.jsxs("table",{className:"w-full text-sm text-left table-fixed",children:[t.jsx("thead",{className:"sticky top-0 bg-surface z-10",children:t.jsxs("tr",{className:"border-b border-border",children:[t.jsx(p,{skey:"name",label:"Name",className:"w-2/5"}),t.jsx(p,{skey:"initiatorType",label:"Type",className:"w-1/5"}),t.jsx(p,{skey:"transferSize",label:"Size",className:"w-1/5"}),t.jsx(p,{skey:"duration",label:"Time / Waterfall",className:"w-1/5"})]})}),t.jsx("tbody",{children:f.map((r,s)=>t.jsxs("tr",{className:"border-b border-border hover:bg-gray-50",children:[t.jsx("td",{className:"p-2 text-primary truncate",title:r.name,children:r.name.split("/").pop()}),t.jsx("td",{className:"p-2",children:r.initiatorType}),t.jsx("td",{className:"p-2",children:x(r.transferSize)}),t.jsx("td",{className:"p-2",children:t.jsxs("div",{className:"flex items-center",children:[t.jsxs("span",{className:"w-12",children:[r.duration.toFixed(0),"ms"]}),t.jsx("div",{className:"flex-grow h-4 bg-gray-200 rounded overflow-hidden",children:t.jsx("div",{className:"h-4 bg-primary rounded",style:{marginLeft:`${r.startTime/d*100}%`,width:`${r.duration/d*100}%`},title:`Start: ${r.startTime.toFixed(0)}ms`})})]})})]},s))})]})})]})};export{It as NetworkVisualizer};2//# sourceMappingURL=NetworkVisualizer-D-9CF2tO.js.map3