@mcp-graph-workflow/mcp-graph 5.1.5 → 5.2.0

package/dist/web/dashboard/dist/assets/graph-tab-C09DzeZ_.js

@@ -0,0 +1 @@
+import{r as t,j as e,a as ae}from"./index-B2fTJ4AS.js";import{u as ne,a as ce,t as de,s as ie,b as xe,c as ue,i as pe,W as me,d as be,B as he,C as fe,N as ve}from"./graph-utils-D4LFspTf.js";import{A as ge,S as L,a as ye,N as _,E as je}from"./constants-BIEJOBya.js";function Ne(s,u){const p=new Map,h=(l,c)=>{let d=p.get(l);d||(d=new Set,p.set(l,d)),d.add(c)};for(const l of s)l.parentId&&h(l.parentId,l.id);for(const l of u)l.relationType==="parent_of"?h(l.from,l.to):l.relationType==="child_of"&&h(l.to,l.from);const m=new Map;for(const[l,c]of p)m.set(l,[...c]);return m}function W(s,u,p){const h=new Map,m=new Set;for(const r of s)h.set(r.id,r),m.add(r.id);const l=s.filter(r=>!r.parentId||!m.has(r.parentId)),c=[],d=new Set,a=r=>{if(d.has(r))return;d.add(r);const g=h.get(r);if(g&&c.push(g),u.has(r)){const b=p.get(r)??[];for(const i of b)a(i)}};for(const r of l)a(r.id);return c}function Ce(s,u){if(s.length===0)return[];const p=new Map,h=new Set;for(const a of s)p.set(a.id,a),h.add(a.id);const m=(a,r)=>{if(r.has(a))return null;r.add(a);const g=p.get(a);if(!g)return null;const b=u.get(a)??[],i=[];for(const y of b){const j=m(y,r);j&&i.push(j)}return{node:g,children:i}},l=s.filter(a=>!a.parentId||!h.has(a.parentId)),c=new Set,d=[];for(const a of l){const r=m(a.id,c);r&&d.push(r)}return d}const ke=t.memo(function({statuses:u,types:p,direction:h,onStatusToggle:m,onTypeToggle:l,onDirectionChange:c,onClear:d,visibleNodeCount:a,totalNodeCount:r,onExpandAll:g,onCollapseAll:b}){return e.jsxs("div",{className:"flex flex-wrap items-center gap-3 px-4 py-2 border-b border-[var(--color-border)] bg-[var(--color-bg-secondary)] text-xs",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"font-medium text-[var(--color-text-muted)]",children:"Status:"}),ge.map(i=>e.jsxs("label",{className:"flex items-center gap-1 cursor-pointer",children:[e.jsx("input",{type:"checkbox",checked:u.has(i),onChange:()=>m(i),className:"w-3 h-3"}),e.jsx("span",{className:"w-2 h-2 rounded-full inline-block",style:{background:L[i]}}),e.jsx("span",{children:i.replace("_"," ")})]},i))]}),e.jsx("div",{className:"w-px h-4 bg-[var(--color-border)]"}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"font-medium text-[var(--color-text-muted)]",children:"Type:"}),ye.map(i=>e.jsxs("label",{className:"flex items-center gap-1 cursor-pointer",children:[e.jsx("input",{type:"checkbox",checked:p.has(i),onChange:()=>l(i),className:"w-3 h-3"}),e.jsx("span",{className:"w-2 h-2 rounded-full inline-block",style:{background:_[i]}}),e.jsx("span",{children:i.replace("_"," ")})]},i))]}),e.jsx("div",{className:"w-px h-4 bg-[var(--color-border)]"}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"font-medium text-[var(--color-text-muted)]",children:"Layout:"}),e.jsxs("select",{value:h,onChange:i=>c(i.target.value),className:"bg-[var(--color-bg)] border border-[var(--color-border)] rounded px-1 py-0.5 text-xs",children:[e.jsx("option",{value:"TB",children:"Top → Down"}),e.jsx("option",{value:"LR",children:"Left → Right"})]})]}),e.jsx("div",{className:"w-px h-4 bg-[var(--color-border)]"}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("button",{onClick:g,className:"px-2 py-0.5 rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-tertiary)] transition-colors",title:r>100?`Warning: ${r} nodes — may be slow`:"Expand all nodes",children:"Expand All"}),e.jsx("button",{onClick:b,className:"px-2 py-0.5 rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-tertiary)] transition-colors",children:"Collapse All"})]}),e.jsx("div",{className:"w-px h-4 bg-[var(--color-border)]"}),e.jsxs("span",{className:"text-[var(--color-text-muted)]",children:["Showing ",a," of ",r]}),e.jsx("button",{onClick:d,className:"text-[var(--color-text-muted)] hover:text-[var(--color-text)] underline",children:"Clear"})]})}),Se=t.memo(function({tree:u,expandedIds:p,selectedNodeId:h,onToggleExpand:m,onSelectNode:l}){const[c,d]=t.useState(!1),a=t.useCallback(()=>d(r=>!r),[]);return c?e.jsx("div",{className:"w-8 border-r border-[var(--color-border)] bg-[var(--color-bg-secondary)] flex flex-col items-center pt-2",children:e.jsx("button",{onClick:a,className:"text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text)] p-1",title:"Show tree panel",children:"▸"})}):e.jsxs("div",{className:"w-64 border-r border-[var(--color-border)] bg-[var(--color-bg-secondary)] flex flex-col min-h-0",children:[e.jsxs("div",{className:"flex items-center justify-between px-3 py-2 border-b border-[var(--color-border)]",children:[e.jsx("span",{className:"text-xs font-medium text-[var(--color-text-muted)]",children:"Hierarchy"}),e.jsx("button",{onClick:a,className:"text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text)]",title:"Collapse panel",children:"◂"})]}),e.jsx("div",{className:"overflow-y-auto flex-1 py-1",children:u.length===0?e.jsx("div",{className:"px-3 py-4 text-xs text-[var(--color-text-muted)] text-center",children:"No nodes"}):u.map(r=>e.jsx($,{item:r,depth:0,expandedIds:p,selectedNodeId:h,onToggleExpand:m,onSelectNode:l},r.node.id))})]})});function $({item:s,depth:u,expandedIds:p,selectedNodeId:h,onToggleExpand:m,onSelectNode:l}){const{node:c,children:d}=s,a=p.has(c.id),r=h===c.id,g=d.length>0,b=L[c.status]||"#9e9e9e",i=_[c.type]||"#6c757d",y=t.useCallback(x=>{x.stopPropagation(),m(c.id)},[c.id,m]),j=t.useCallback(()=>{l(c.id)},[c.id,l]);return e.jsxs(e.Fragment,{children:[e.jsxs("button",{onClick:j,className:`w-full text-left flex items-center gap-1 px-2 py-1 text-xs hover:bg-[var(--color-bg-tertiary)] transition-colors ${r?"bg-[var(--color-bg-tertiary)] font-semibold":""}`,style:{paddingLeft:`${u*16+8}px`},children:[g?e.jsx("span",{onClick:y,className:"w-4 text-center text-[var(--color-text-muted)] hover:text-[var(--color-text)] cursor-pointer shrink-0",children:a?"▾":"▸"}):e.jsx("span",{className:"w-4 shrink-0"}),e.jsx("span",{className:"w-2 h-2 rounded-full shrink-0",style:{background:b},title:c.status.replace("_"," ")}),e.jsx("span",{className:"text-[9px] px-1 rounded shrink-0",style:{background:`${i}20`,color:i},children:c.type.slice(0,3)}),e.jsx("span",{className:"truncate",children:c.title}),g&&e.jsx("span",{className:"text-[9px] text-[var(--color-text-muted)] ml-auto shrink-0",children:d.length})]}),a&&d.map(x=>e.jsx($,{item:x,depth:u+1,expandedIds:p,selectedNodeId:h,onToggleExpand:m,onSelectNode:l},x.node.id))]})}const P=50,we=t.memo(function({nodes:u,allNodes:p=[],onNodeClick:h}){const m=t.useMemo(()=>{const o=new Map;for(const N of p)o.set(N.id,N.title);return o},[p]),[l,c]=t.useState("priority"),[d,a]=t.useState("asc"),[r,g]=t.useState(""),[b,i]=t.useState(0),y=t.useMemo(()=>{if(!r)return u;const o=r.toLowerCase();return u.filter(N=>N.title.toLowerCase().includes(o)||N.type.toLowerCase().includes(o)||N.status.toLowerCase().includes(o)||(N.sprint||"").toLowerCase().includes(o))},[u,r]),j=t.useMemo(()=>[...y].sort((o,N)=>{const w=o[l]??"",E=N[l]??"",C=typeof w=="number"?w-E:String(w).localeCompare(String(E));return d==="asc"?C:-C}),[y,l,d]),x=Math.max(1,Math.ceil(j.length/P)),S=t.useMemo(()=>j.slice(b*P,(b+1)*P),[j,b]),k=o=>{l===o?a(N=>N==="asc"?"desc":"asc"):(c(o),a("asc"))},T=[{key:"title",label:"Title"},{key:"type",label:"Type"},{key:"status",label:"Status"},{key:"priority",label:"Priority"},{key:"xpSize",label:"Size"},{key:"sprint",label:"Sprint"},{key:"parentId",label:"Parent"}];return e.jsxs("div",{className:"border-t border-[var(--color-border)]",children:[e.jsx("div",{className:"px-4 py-2 bg-[var(--color-bg-secondary)]",children:e.jsx("input",{type:"text",placeholder:"Search nodes...",value:r,onChange:o=>g(o.target.value),className:"w-full max-w-xs px-2 py-1 text-sm border border-[var(--color-border)] rounded bg-[var(--color-bg)]"})}),e.jsx("div",{className:"overflow-x-auto max-h-64",children:e.jsxs("table",{className:"w-full text-sm",children:[e.jsx("thead",{children:e.jsx("tr",{className:"bg-[var(--color-bg-tertiary)]",children:T.map(o=>e.jsxs("th",{onClick:()=>k(o.key),className:"px-3 py-1.5 text-left text-xs font-medium text-[var(--color-text-muted)] cursor-pointer hover:text-[var(--color-text)]",children:[o.label,l===o.key&&(d==="asc"?" ↑":" ↓")]},o.key))})}),e.jsx("tbody",{children:S.length===0?e.jsx("tr",{children:e.jsx("td",{colSpan:7,className:"px-3 py-4 text-center text-[var(--color-text-muted)]",children:"No nodes found"})}):S.map(o=>e.jsxs("tr",{onClick:()=>h(o),className:"border-t border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)] cursor-pointer",children:[e.jsx("td",{className:"px-3 py-1.5 max-w-[200px] truncate",children:o.title}),e.jsx("td",{className:"px-3 py-1.5",children:e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded font-medium",style:{background:`${_[o.type]}20`,color:_[o.type]},children:o.type})}),e.jsx("td",{className:"px-3 py-1.5",children:e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded-full font-medium",style:{background:`${L[o.status]}20`,color:L[o.status]},children:o.status.replace("_"," ")})}),e.jsx("td",{className:"px-3 py-1.5 text-center",children:o.priority}),e.jsx("td",{className:"px-3 py-1.5 text-center",children:o.xpSize||"-"}),e.jsx("td",{className:"px-3 py-1.5",children:o.sprint||"-"}),e.jsx("td",{className:"px-3 py-1.5 max-w-[150px] truncate text-[var(--color-text-muted)]",children:o.parentId?m.get(o.parentId)??"-":"-"})]},o.id))})]})}),x>1&&e.jsxs("div",{className:"flex items-center justify-between px-4 py-1.5 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border)] text-xs text-[var(--color-text-muted)]",children:[e.jsxs("span",{children:[j.length," nodes"]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{disabled:b===0,onClick:()=>i(o=>Math.max(0,o-1)),className:"px-2 py-0.5 rounded border border-[var(--color-border)] disabled:opacity-30",children:"Prev"}),e.jsxs("span",{children:[b+1,"/",x]}),e.jsx("button",{disabled:b>=x-1,onClick:()=>i(o=>Math.min(x-1,o+1)),className:"px-2 py-0.5 rounded border border-[var(--color-border)] disabled:opacity-30",children:"Next"})]})]})]})}),Te=["depends_on","blocks","parent_of","child_of","related_to","priority_over","implements","derived_from"];function Ee({fromId:s,toId:u,fromTitle:p,toTitle:h,onCreated:m,onCancel:l}){const[c,d]=t.useState("depends_on"),[a,r]=t.useState(""),[g,b]=t.useState(!1),[i,y]=t.useState(null),j=t.useCallback(async()=>{b(!0),y(null);try{await ae.createEdge({from:s,to:u,relationType:c,reason:a.trim()||void 0}),m()}catch(x){y(x instanceof Error?x.message:"Failed to create edge")}finally{b(!1)}},[s,u,c,a,m]);return e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50",children:e.jsxs("div",{className:"bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg shadow-xl w-96 p-4",children:[e.jsx("h3",{className:"text-sm font-bold mb-3",children:"Create Relationship"}),e.jsxs("div",{className:"space-y-3 text-sm",children:[e.jsxs("div",{children:[e.jsx("label",{className:"text-xs text-[var(--color-text-muted)] block mb-1",children:"From"}),e.jsx("div",{className:"text-xs bg-[var(--color-bg-tertiary)] px-2 py-1.5 rounded truncate",children:p??s})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-xs text-[var(--color-text-muted)] block mb-1",children:"To"}),e.jsx("div",{className:"text-xs bg-[var(--color-bg-tertiary)] px-2 py-1.5 rounded truncate",children:h??u})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-xs text-[var(--color-text-muted)] block mb-1",children:"Relation Type"}),e.jsx("select",{value:c,onChange:x=>d(x.target.value),className:"w-full text-xs px-2 py-1.5 rounded bg-[var(--color-bg-tertiary)] border border-[var(--color-border)] focus:outline-none focus:border-[var(--color-accent)]",children:Te.map(x=>{const S=je[x];return e.jsx("option",{value:x,children:S.label},x)})})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-xs text-[var(--color-text-muted)] block mb-1",children:"Reason (optional)"}),e.jsx("input",{type:"text",value:a,onChange:x=>r(x.target.value),placeholder:"Why this relationship exists...",className:"w-full text-xs px-2 py-1.5 rounded bg-[var(--color-bg-tertiary)] border border-[var(--color-border)] focus:outline-none focus:border-[var(--color-accent)]"})]}),i&&e.jsx("div",{className:"text-xs text-[var(--color-danger)] bg-[var(--color-bg-tertiary)] px-2 py-1.5 rounded",children:i})]}),e.jsxs("div",{className:"flex justify-end gap-2 mt-4",children:[e.jsx("button",{onClick:l,className:"text-xs px-3 py-1.5 rounded bg-[var(--color-bg-tertiary)] hover:bg-[var(--color-border)] transition-colors",children:"Cancel"}),e.jsx("button",{onClick:j,disabled:g,className:"text-xs px-3 py-1.5 rounded bg-[var(--color-accent)] text-white font-medium disabled:opacity-50 hover:opacity-90 transition-opacity",children:g?"Creating...":"Create"})]})]})})}const Le={workflowNode:be},_e={workflowEdge:me},Me={hideAttribution:!0};function Ie({graph:s}){var R,F;const[u,p,h]=ne([]),[m,l,c]=ce([]),[d,a]=t.useState(null),[r,g]=t.useState("TB"),[b,i]=t.useState(new Set),[y,j]=t.useState(new Set),[x,S]=t.useState(new Set),[k,T]=t.useState(null),o=t.useDeferredValue(b),N=t.useDeferredValue(y),w=t.useDeferredValue(r),E=t.useRef(null),C=t.useMemo(()=>Ne(s.nodes,s.edges),[s.nodes,s.edges]),G=t.useMemo(()=>Ce(s.nodes,C),[s.nodes,C]),M=t.useCallback(n=>{S(v=>{const f=new Set(v);return f.has(n)?f.delete(n):f.add(n),f})},[]),V=t.useCallback(()=>{const n=new Set;for(const[v]of C)n.add(v);S(n)},[C]),B=t.useCallback(()=>{S(new Set)},[]),D=t.useCallback((n,v,f)=>{const se=W(s.nodes,x,C),z=de(se,{statuses:n,types:v},C,x,M),I=z.map(le=>le.id);if(ie(E.current,I)&&f===w)return;E.current=I;const re=new Set(I),oe=xe(s.edges,re),O=ue(z,oe,f);p(O.nodes),l(O.edges)},[s,p,l,w,x,C,M]);t.useEffect(()=>{D(o,N,w)},[s,D,o,N,w]);const H=t.useCallback((n,v)=>{a(v.data.sourceNode)},[]),Y=t.useCallback(n=>{a(n)},[]),Z=t.useCallback(n=>{const v=s.nodes.find(f=>f.id===n);v&&a(v)},[s.nodes]),K=t.useCallback(n=>{const v=s.nodes.find(f=>f.id===n);v&&a(v)},[s.nodes]),U=t.useCallback(n=>{n.source&&n.target&&n.source!==n.target&&T({fromId:n.source,toId:n.target})},[]),q=t.useCallback(()=>{T(null)},[]),J=t.useCallback(n=>{i(v=>{const f=new Set(v);return f.has(n)?f.delete(n):f.add(n),f})},[]),Q=t.useCallback(n=>{j(v=>{const f=new Set(v);return f.has(n)?f.delete(n):f.add(n),f})},[]),X=t.useCallback(()=>{i(new Set),j(new Set)},[]),A=t.useMemo(()=>W(s.nodes,x,C).filter(v=>!(b.size&&!b.has(v.status)||y.size&&!y.has(v.type))),[s.nodes,x,C,b,y]),ee=k?(R=s.nodes.find(n=>n.id===k.fromId))==null?void 0:R.title:void 0,te=k?(F=s.nodes.find(n=>n.id===k.toId))==null?void 0:F.title:void 0;return e.jsxs("div",{className:"flex flex-col h-full",children:[e.jsx(ke,{statuses:b,types:y,direction:r,onStatusToggle:J,onTypeToggle:Q,onDirectionChange:g,onClear:X,visibleNodeCount:A.length,totalNodeCount:s.nodes.length,onExpandAll:V,onCollapseAll:B}),e.jsxs("div",{className:"flex flex-1 min-h-0",children:[e.jsx(Se,{tree:G,expandedIds:x,selectedNodeId:(d==null?void 0:d.id)??null,onToggleExpand:M,onSelectNode:K}),e.jsx("div",{className:"flex-1 relative",children:s.nodes.length===0?e.jsx("div",{className:"flex items-center justify-center h-full text-[var(--color-text-muted)]",children:e.jsxs("div",{className:"text-center",children:[e.jsx("p",{className:"text-lg mb-2",children:"No nodes in graph"}),e.jsx("p",{className:"text-sm",children:"Import a PRD to get started"})]})}):e.jsxs(pe,{nodes:u,edges:m,onNodesChange:h,onEdgesChange:c,onNodeClick:H,onConnect:U,nodeTypes:Le,edgeTypes:_e,nodesDraggable:!1,nodesConnectable:!0,fitView:!0,minZoom:.1,maxZoom:2,proOptions:Me,children:[e.jsx(he,{gap:16,size:1}),e.jsx(fe,{showInteractive:!1})]})}),d&&e.jsx(ve,{node:d,edges:s.edges,allNodes:s.nodes,childrenMap:C,onClose:()=>a(null),onNodeNavigate:Z})]}),e.jsx(we,{nodes:A,allNodes:s.nodes,onNodeClick:Y}),k&&e.jsx(Ee,{fromId:k.fromId,toId:k.toId,fromTitle:ee,toTitle:te,onCreated:q,onCancel:()=>T(null)})]})}function Fe({graph:s}){return e.jsx("div",{className:"h-full",children:e.jsx(Ie,{graph:s})})}export{Fe as GraphTab};