Spaces:
Running
Running
| import{r as d,j as e,R as h}from"./react-D_B_5QVd.js";import{V as u}from"./index-CPYWJ7h_.js";import"./jszip-C9ownNzX.js";import"./react-dom-EAO2-NBm.js";import"./scheduler-DYLXRpC5.js";import"./@google-4tyssLU_.js";import"./marked-CesSW9Du.js";import"./idb-Dob3nYDb.js";const p=`{ | |
| "name": "startApp", | |
| "duration": 500, | |
| "children": [ | |
| { | |
| "name": "fetchUserData", | |
| "duration": 300, | |
| "children": [ | |
| { "name": "authenticate", "duration": 100 }, | |
| { "name": "fetchProfile", "duration": 150 } | |
| ] | |
| }, | |
| { | |
| "name": "loadInitialAssets", | |
| "duration": 450, | |
| "children": [ | |
| { "name": "loadImage.png", "duration": 200 }, | |
| { "name": "loadScript.js", "duration": 250 } | |
| ] | |
| } | |
| ] | |
| }`,x=({node:t,level:i,maxDuration:s})=>{const[a,c]=h.useState(!0),n=t.children&&t.children.length>0;return e.jsxs("div",{className:"my-1",children:[e.jsxs("div",{className:"flex items-center p-2 rounded-md hover:bg-gray-100",style:{paddingLeft:`${i*20+8}px`},children:[n&&e.jsx("button",{onClick:()=>c(!a),className:`mr-2 text-text-secondary w-4 h-4 flex-shrink-0 transform transition-transform ${a?"rotate-90":""}`,children:"▶"}),!n&&e.jsx("div",{className:"w-6 mr-2 flex-shrink-0"}),e.jsxs("div",{className:"flex-grow flex items-center justify-between gap-4",children:[e.jsx("span",{className:"truncate",children:t.name}),e.jsxs("div",{className:"flex items-center gap-2 flex-shrink-0",children:[e.jsx("div",{className:"w-24 h-4 bg-gray-200 rounded-full overflow-hidden",children:e.jsx("div",{className:"h-4 bg-primary",style:{width:`${t.duration/s*100}%`}})}),e.jsxs("span",{className:"text-primary w-16 text-right",children:[t.duration.toFixed(0),"ms"]})]})]})]}),a&&n&&e.jsx("div",{children:t.children.map((r,l)=>e.jsx(x,{node:r,level:i+1,maxDuration:s},l))})]})},S=()=>{const[t,i]=d.useState(p),[s,a]=d.useState(""),{treeData:c,maxDuration:n}=d.useMemo(()=>{try{const r=JSON.parse(t);let l=0;const m=o=>{o.duration>l&&(l=o.duration),o.children&&o.children.forEach(m)};return m(r),a(""),{treeData:r,maxDuration:l}}catch{return a("Invalid JSON format."),{treeData:null,maxDuration:0}}},[t]);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 flex items-center",children:[e.jsx(u,{}),e.jsx("span",{className:"ml-3",children:"Async Call Tree Viewer"})]}),e.jsx("p",{className:"text-text-secondary mt-1",children:"Paste a JSON structure to visualize an asynchronous function call tree."})]}),e.jsxs("div",{className:"flex-grow flex flex-col gap-4 min-h-0",children:[e.jsxs("div",{className:"flex flex-col h-2/5 min-h-[200px]",children:[e.jsx("label",{htmlFor:"json-input",className:"text-sm font-medium text-text-secondary mb-2",children:"JSON Input"}),e.jsx("textarea",{id:"json-input",value:t,onChange:r=>i(r.target.value),className:`flex-grow p-4 bg-surface border ${s?"border-red-500":"border-border"} rounded-md resize-y font-mono text-sm`,spellCheck:"false"}),s&&e.jsx("p",{className:"text-red-500 text-xs mt-1",children:s})]}),e.jsxs("div",{className:"flex flex-col flex-grow min-h-0",children:[e.jsx("label",{className:"text-sm font-medium text-text-secondary mb-2",children:"Visual Tree"}),e.jsx("div",{className:"flex-grow bg-surface p-4 rounded-lg text-sm overflow-y-auto border border-border",children:c?e.jsx(x,{node:c,level:0,maxDuration:n}):e.jsx("div",{className:"text-text-secondary",children:s||"Enter valid JSON to see the tree."})})]})]})]})};export{S as AsyncCallTreeViewer}; | |
| //# sourceMappingURL=AsyncCallTreeViewer-BZu_Km4e.js.map | |