admin08077/Githubgemini

1{"version":3,"file":"NetworkVisualizer-D-9CF2tO.js","sources":["../../components/features/NetworkVisualizer.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { ChartBarIcon } from '../icons.tsx';\n\ntype SortKey = 'name' | 'initiatorType' | 'transferSize' | 'duration';\ntype SortDirection = 'asc' | 'desc';\n\nconst SummaryCard: React.FC<{ title: string, value: string | number }> = ({ title, value }) => (\n    <div className=\"bg-surface border border-border p-3 rounded-lg text-center\">\n        <p className=\"text-xs text-text-secondary\">{title}</p>\n        <p className=\"text-xl font-bold text-text-primary\">{value}</p>\n    </div>\n);\n\nexport const NetworkVisualizer: React.FC = () => {\n    const [requests, setRequests] = useState<PerformanceResourceTiming[]>([]);\n    const [sortKey, setSortKey] = useState<SortKey>('duration');\n    const [sortDirection, setSortDirection] = useState<SortDirection>('desc');\n\n    useEffect(() => {\n        const entries = performance.getEntriesByType(\"resource\") as PerformanceResourceTiming[];\n        setRequests(entries);\n    }, []);\n    \n    const sortedRequests = useMemo(() => {\n        return [...requests].sort((a, b) => {\n            const valA = a[sortKey];\n            const valB = b[sortKey];\n            if (valA < valB) return sortDirection === 'asc' ? -1 : 1;\n            if (valA > valB) return sortDirection === 'asc' ? 1 : -1;\n            return 0;\n        });\n    }, [requests, sortKey, sortDirection]);\n\n    const { totalSize, totalDuration, maxDuration } = useMemo(() => {\n        const totalSize = requests.reduce((acc, req) => acc + req.transferSize, 0);\n        const maxFinish = Math.max(...requests.map(r => r.startTime + r.duration), 0);\n        return { totalSize, totalDuration: maxFinish, maxDuration: Math.max(...requests.map(r => r.duration), 0) };\n    }, [requests]);\n\n    const handleSort = (key: SortKey) => {\n        setSortDirection(sortKey === key && sortDirection === 'desc' ? 'asc' : 'desc');\n        setSortKey(key);\n    };\n    \n    const formatBytes = (bytes: number) => {\n        if (bytes === 0) return '0 B';\n        const k = 1024; const sizes = ['B', 'KB', 'MB'];\n        const i = Math.floor(Math.log(bytes) / Math.log(k));\n        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];\n    };\n\n    const SortableHeader: React.FC<{ skey: SortKey, label: string; className?: string }> = ({ skey, label, className }) => (\n        <th onClick={() => handleSort(skey)} className={`p-2 text-left cursor-pointer hover:bg-gray-100 ${className}`}>\n            {label} {sortKey === skey && (sortDirection === 'asc' ? '▲' : '▼')}\n        </th>\n    );\n\n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\"><h1 className=\"text-3xl font-bold flex items-center\"><ChartBarIcon /><span className=\"ml-3\">Network Visualizer</span></h1><p className=\"text-text-secondary mt-1\">Inspect network resources with a summary and waterfall chart.</p></header>\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-4\">\n                <SummaryCard title=\"Total Requests\" value={requests.length} />\n                <SummaryCard title=\"Total Transferred\" value={formatBytes(totalSize)} />\n                <SummaryCard title=\"Finish Time\" value={`${totalDuration.toFixed(0)}ms`} />\n                <SummaryCard title=\"Longest Request\" value={`${maxDuration.toFixed(0)}ms`} />\n            </div>\n            <div className=\"flex-grow overflow-auto bg-surface rounded-lg border border-border\">\n                <table className=\"w-full text-sm text-left table-fixed\">\n                    <thead className=\"sticky top-0 bg-surface z-10\"><tr className=\"border-b border-border\">\n                        <SortableHeader skey=\"name\" label=\"Name\" className=\"w-2/5\"/>\n                        <SortableHeader skey=\"initiatorType\" label=\"Type\" className=\"w-1/5\" />\n                        <SortableHeader skey=\"transferSize\" label=\"Size\" className=\"w-1/5\"/>\n                        <SortableHeader skey=\"duration\" label=\"Time / Waterfall\" className=\"w-1/5\"/>\n                    </tr></thead>\n                    <tbody>{sortedRequests.map((req, i) => (<tr key={i} className=\"border-b border-border hover:bg-gray-50\">\n                        <td className=\"p-2 text-primary truncate\" title={req.name}>{req.name.split('/').pop()}</td>\n                        <td className=\"p-2\">{req.initiatorType}</td>\n                        <td className=\"p-2\">{formatBytes(req.transferSize)}</td>\n                        <td className=\"p-2\"><div className=\"flex items-center\">\n                            <span className=\"w-12\">{req.duration.toFixed(0)}ms</span>\n                            <div className=\"flex-grow h-4 bg-gray-200 rounded overflow-hidden\">\n                                <div className=\"h-4 bg-primary rounded\" style={{ marginLeft: `${(req.startTime / totalDuration) * 100}%`, width: `${(req.duration / totalDuration) * 100}%` }} title={`Start: ${req.startTime.toFixed(0)}ms`}></div>\n                            </div>\n                        </div></td>\n                    </tr>))}</tbody>\n                </table>\n            </div>\n        </div>\n    );\n};"],"names":["SummaryCard","title","value","jsxs","jsx","NetworkVisualizer","requests","setRequests","useState","sortKey","setSortKey","sortDirection","setSortDirection","useEffect","entries","sortedRequests","useMemo","a","b","valA","valB","totalSize","totalDuration","maxDuration","acc","req","maxFinish","r","handleSort","key","formatBytes","bytes","k","sizes","SortableHeader","skey","label","className","ChartBarIcon","i"],"mappings":"6mFAMA,MAAMA,EAAmE,CAAC,CAAE,MAAAC,EAAO,MAAAC,KAC/EC,OAAC,MAAA,CAAI,UAAU,6DACX,SAAA,CAAAC,EAAAA,IAAC,IAAA,CAAE,UAAU,8BAA+B,SAAAH,EAAM,EAClDG,EAAAA,IAAC,IAAA,CAAE,UAAU,sCAAuC,SAAAF,CAAA,CAAM,CAAA,EAC9D,EAGSG,GAA8B,IAAM,CAC7C,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAsC,CAAA,CAAE,EAClE,CAACC,EAASC,CAAU,EAAIF,EAAAA,SAAkB,UAAU,EACpD,CAACG,EAAeC,CAAgB,EAAIJ,EAAAA,SAAwB,MAAM,EAExEK,EAAAA,UAAU,IAAM,CACZ,MAAMC,EAAU,YAAY,iBAAiB,UAAU,EACvDP,EAAYO,CAAO,CACvB,EAAG,CAAA,CAAE,EAEL,MAAMC,EAAiBC,EAAAA,QAAQ,IACpB,CAAC,GAAGV,CAAQ,EAAE,KAAK,CAACW,EAAGC,IAAM,CAChC,MAAMC,EAAOF,EAAER,CAAO,EAChBW,EAAOF,EAAET,CAAO,EACtB,OAAIU,EAAOC,EAAaT,IAAkB,MAAQ,GAAK,EACnDQ,EAAOC,EAAaT,IAAkB,MAAQ,EAAI,GAC/C,CACX,CAAC,EACF,CAACL,EAAUG,EAASE,CAAa,CAAC,EAE/B,CAAE,UAAAU,EAAW,cAAAC,EAAe,YAAAC,CAAA,EAAgBP,EAAAA,QAAQ,IAAM,CAC5D,MAAMK,EAAYf,EAAS,OAAO,CAACkB,EAAKC,IAAQD,EAAMC,EAAI,aAAc,CAAC,EACnEC,EAAY,KAAK,IAAI,GAAGpB,EAAS,IAAIqB,GAAKA,EAAE,UAAYA,EAAE,QAAQ,EAAG,CAAC,EAC5E,MAAO,CAAE,UAAAN,EAAW,cAAeK,EAAW,YAAa,KAAK,IAAI,GAAGpB,EAAS,IAAIqB,GAAKA,EAAE,QAAQ,EAAG,CAAC,CAAA,CAC3G,EAAG,CAACrB,CAAQ,CAAC,EAEPsB,EAAcC,GAAiB,CACjCjB,EAAiBH,IAAYoB,GAAOlB,IAAkB,OAAS,MAAQ,MAAM,EAC7ED,EAAWmB,CAAG,CAClB,EAEMC,EAAeC,GAAkB,CACnC,GAAIA,IAAU,EAAG,MAAO,MACxB,MAAMC,EAAI,KAAYC,EAAQ,CAAC,IAAK,KAAM,IAAI,EACxC,EAAI,KAAK,MAAM,KAAK,IAAIF,CAAK,EAAI,KAAK,IAAIC,CAAC,CAAC,EAClD,OAAO,YAAYD,EAAQ,KAAK,IAAIC,EAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAI,IAAMC,EAAM,CAAC,CAC1E,EAEMC,EAAiF,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,KACnGlC,EAAAA,KAAC,KAAA,CAAG,QAAS,IAAMyB,EAAWO,CAAI,EAAG,UAAW,kDAAkDE,CAAS,GACtG,SAAA,CAAAD,EAAM,IAAE3B,IAAY0B,IAASxB,IAAkB,MAAQ,IAAM,IAAA,EAClE,EAGJ,OACIR,EAAAA,KAAC,MAAA,CAAI,UAAU,2DACX,SAAA,CAAAA,EAAAA,KAAC,SAAA,CAAO,UAAU,OAAO,SAAA,CAAAA,EAAAA,KAAC,KAAA,CAAG,UAAU,uCAAuC,SAAA,CAAAC,EAAAA,IAACkC,EAAA,EAAa,EAAElC,EAAAA,IAAC,OAAA,CAAK,UAAU,OAAO,SAAA,oBAAA,CAAkB,CAAA,EAAO,EAAKA,EAAAA,IAAC,IAAA,CAAE,UAAU,2BAA2B,SAAA,+DAAA,CAA6D,CAAA,EAAI,EAC5PD,EAAAA,KAAC,MAAA,CAAI,UAAU,6CACX,SAAA,CAAAC,EAAAA,IAACJ,EAAA,CAAY,MAAM,iBAAiB,MAAOM,EAAS,OAAQ,QAC3DN,EAAA,CAAY,MAAM,oBAAoB,MAAO8B,EAAYT,CAAS,EAAG,EACtEjB,EAAAA,IAACJ,EAAA,CAAY,MAAM,cAAc,MAAO,GAAGsB,EAAc,QAAQ,CAAC,CAAC,IAAA,CAAM,EACzElB,EAAAA,IAACJ,EAAA,CAAY,MAAM,kBAAkB,MAAO,GAAGuB,EAAY,QAAQ,CAAC,CAAC,IAAA,CAAM,CAAA,EAC/E,QACC,MAAA,CAAI,UAAU,qEACX,SAAApB,EAAAA,KAAC,QAAA,CAAM,UAAU,uCACb,SAAA,CAAAC,EAAAA,IAAC,SAAM,UAAU,+BAA+B,SAAAD,EAAAA,KAAC,KAAA,CAAG,UAAU,yBAC1D,SAAA,CAAAC,MAAC8B,GAAe,KAAK,OAAO,MAAM,OAAO,UAAU,QAAO,QACzDA,EAAA,CAAe,KAAK,gBAAgB,MAAM,OAAO,UAAU,QAAQ,QACnEA,EAAA,CAAe,KAAK,eAAe,MAAM,OAAO,UAAU,QAAO,QACjEA,EAAA,CAAe,KAAK,WAAW,MAAM,mBAAmB,UAAU,OAAA,CAAO,CAAA,CAAA,CAC9E,CAAA,CAAK,EACL9B,EAAAA,IAAC,QAAA,CAAO,SAAAW,EAAe,IAAI,CAACU,EAAKc,IAAOpC,EAAAA,KAAC,KAAA,CAAW,UAAU,0CAC1D,SAAA,CAAAC,EAAAA,IAAC,KAAA,CAAG,UAAU,4BAA4B,MAAOqB,EAAI,KAAO,SAAAA,EAAI,KAAK,MAAM,GAAG,EAAE,IAAA,EAAM,EACtFrB,EAAAA,IAAC,KAAA,CAAG,UAAU,MAAO,WAAI,cAAc,QACtC,KAAA,CAAG,UAAU,MAAO,SAAA0B,EAAYL,EAAI,YAAY,EAAE,QAClD,KAAA,CAAG,UAAU,MAAM,SAAAtB,EAAAA,KAAC,MAAA,CAAI,UAAU,oBAC/B,SAAA,CAAAA,EAAAA,KAAC,OAAA,CAAK,UAAU,OAAQ,SAAA,CAAAsB,EAAI,SAAS,QAAQ,CAAC,EAAE,IAAA,EAAE,EAClDrB,EAAAA,IAAC,MAAA,CAAI,UAAU,oDACX,eAAC,MAAA,CAAI,UAAU,yBAAyB,MAAO,CAAE,WAAY,GAAIqB,EAAI,UAAYH,EAAiB,GAAG,IAAK,MAAO,GAAIG,EAAI,SAAWH,EAAiB,GAAG,KAAO,MAAO,UAAUG,EAAI,UAAU,QAAQ,CAAC,CAAC,KAAM,CAAA,CAClN,CAAA,CAAA,CACJ,CAAA,CAAM,CAAA,CAAA,EATuCc,CAUjD,CAAM,CAAA,CAAE,CAAA,CAAA,CACZ,CAAA,CACJ,CAAA,EACJ,CAER"}