@pinpoint-fe/server-map
Advanced tools
Comparing version 0.0.8 to 0.0.9-rc.1
@@ -69,4 +69,4 @@ import * as react_jsx_runtime from 'react/jsx-runtime'; | ||
data?: T; | ||
eventType: 'right' | 'left' | 'programmatic'; | ||
position: Partial<cytoscape.Position>; | ||
eventType: 'right' | 'left'; | ||
position: cytoscape.Position; | ||
}) => void; | ||
@@ -86,6 +86,5 @@ interface ServerMapProps extends Pick<React.HTMLProps<HTMLDivElement>, 'className' | 'style'> { | ||
renderEdgeLabel?: (edge: MergedEdge) => string | undefined; | ||
cy?: (cy: cytoscape.Core) => void; | ||
} | ||
declare const ServerMap: ({ data, customTheme, baseNodeId, onClickNode, onClickEdge, onClickBackground, onDataMerged, renderNodeLabel, renderEdgeLabel, className, style, cy, }: ServerMapProps) => react_jsx_runtime.JSX.Element; | ||
declare const ServerMap: ({ data, customTheme, baseNodeId, onClickNode, onClickEdge, onClickBackground, onDataMerged, renderNodeLabel, renderEdgeLabel, className, style, }: ServerMapProps) => react_jsx_runtime.JSX.Element; | ||
export { Edge, MergeInfo, MergedEdge, MergedNode, Node, ServerMap, ServerMapProps }; |
@@ -1,13 +0,13 @@ | ||
var Ee=Object.defineProperty,Ne=Object.defineProperties;var Me=Object.getOwnPropertyDescriptors;var se=Object.getOwnPropertySymbols;var ke=Object.prototype.hasOwnProperty,be=Object.prototype.propertyIsEnumerable;var re=(i,r,o)=>r in i?Ee(i,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[r]=o,S=(i,r)=>{for(var o in r||(r={}))ke.call(r,o)&&re(i,o,r[o]);if(se)for(var o of se(r))be.call(r,o)&&re(i,o,r[o]);return i},R=(i,r)=>Ne(i,Me(r));import C from"react";import le from"cytoscape";import xe from"cytoscape-dagre";import F from"lodash";var L={transactionStatus:{default:{stroke:"transparent",strokeWidth:10},good:{stroke:"#32BA94",strokeWidth:10},slow:{stroke:"#E48022",strokeWidth:10},bad:{stroke:"#F0515B",strokeWidth:10}},node:{default:{"background-color":"#FFF","border-width":"3","border-color":"#ddd","text-valign":"bottom","text-halign":"center","text-margin-y":4,"overlay-opacity":0,"font-family":"Helvetica, Arial, avn85, NanumGothic, ng, dotum, AppleGothic, sans-serif","font-size":12,"font-weight":"normal","text-wrap":"wrap","text-max-width":"200","line-height":1.5,color:"#000"},highlight:{"font-weight":"bold","font-size":14,"border-color":"#4A61D1"},main:{"font-weight":"bold","font-size":14}},edge:{default:{width:1.5,"font-size":"12px","font-weight":"normal","line-color":"#C0C3C8","target-arrow-color":"#C0C3C8","target-arrow-shape":"triangle","curve-style":"bezier","text-background-color":"white","text-background-opacity":.7,"text-background-padding":"5px","text-background-shape":"roundrectangle","overlay-opacity":0},highlight:{"font-size":"14px","font-weight":"bold","line-color":"#4763d0","target-arrow-color":"#4763d0"},loop:{"control-point-step-size":70,"loop-direction":"0deg","loop-sweep":"-90deg"}}};var ne=.05,de=47,K=2*Math.PI*de,ae=i=>{let{transactionInfo:r}=i;return"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(` | ||
var ye=Object.defineProperty,Ee=Object.defineProperties;var Ne=Object.getOwnPropertyDescriptors;var oe=Object.getOwnPropertySymbols;var Me=Object.prototype.hasOwnProperty,ke=Object.prototype.propertyIsEnumerable;var se=(i,r,s)=>r in i?ye(i,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[r]=s,S=(i,r)=>{for(var s in r||(r={}))Me.call(r,s)&&se(i,s,r[s]);if(oe)for(var s of oe(r))ke.call(r,s)&&se(i,s,r[s]);return i},P=(i,r)=>Ee(i,Ne(r));import A from"react";import ge from"cytoscape";import we from"cytoscape-dagre";import L from"lodash";var V={transactionStatus:{default:{stroke:"transparent",strokeWidth:10},good:{stroke:"#32BA94",strokeWidth:10},slow:{stroke:"#E48022",strokeWidth:10},bad:{stroke:"#F0515B",strokeWidth:10}},node:{default:{"background-color":"#FFF","border-width":"3","border-color":"#ddd","text-valign":"bottom","text-halign":"center","text-margin-y":4,"overlay-opacity":0,"font-family":"Helvetica, Arial, avn85, NanumGothic, ng, dotum, AppleGothic, sans-serif","font-size":12,"font-weight":"normal","text-wrap":"wrap","text-max-width":"200","line-height":1.5,color:"#000"},highlight:{"font-weight":"bold","font-size":14,"border-color":"#4A61D1"},main:{"font-weight":"bold","font-size":14}},edge:{default:{width:1.5,"font-size":"12px","font-weight":"normal","line-color":"#C0C3C8","target-arrow-color":"#C0C3C8","target-arrow-shape":"triangle","curve-style":"bezier","text-background-color":"white","text-background-opacity":.7,"text-background-padding":"5px","text-background-shape":"roundrectangle","overlay-opacity":0},highlight:{"font-size":"14px","font-weight":"bold","line-color":"#4763d0","target-arrow-color":"#4763d0"},loop:{"control-point-step-size":70,"loop-direction":"0deg","loop-sweep":"-90deg"}}};var re=.05,ie=47,G=2*Math.PI*ie,de=i=>{let{transactionInfo:r}=i;return"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(` | ||
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||
${Se(r,!r)} | ||
${be(r,!r)} | ||
</svg> | ||
`)},U=i=>{let{stroke:r,strokeWidth:o,strokeDashOffset:y=0,strokeDashArray:T="none"}=i;return` | ||
<circle cx="50" cy="50" r="${de}" | ||
`)},z=i=>{let{stroke:r,strokeWidth:s,strokeDashOffset:y=0,strokeDashArray:T="none"}=i;return` | ||
<circle cx="50" cy="50" r="${ie}" | ||
style="fill:none; | ||
stroke:${r}; | ||
stroke-width:${o}; | ||
stroke-width:${s}; | ||
stroke-dashoffset:${y}; | ||
stroke-dasharray:${T} 1000" | ||
/> | ||
`},ie=(i,r)=>r===0?0:r/i<ne?K*ne:r/i*K,Se=(i,r)=>{let{transactionStatus:o}=L;if(r||!i)return U({stroke:o.default.stroke,strokeWidth:o.default.strokeWidth});{let y=Object.keys(i).reduce((p,b)=>p+i[b],0),T=ie(y,i.slow),v=ie(y,i.bad),B=-1*(.75*K-(T+v)),w=-1*(.75*K-v);return U({stroke:o.good.stroke,strokeWidth:o.good.strokeWidth})+U({stroke:o.slow.stroke,strokeWidth:o.slow.strokeWidth,strokeDashOffset:B,strokeDashArray:T})+U({stroke:o.bad.stroke,strokeWidth:o.bad.strokeWidth,strokeDashOffset:w,strokeDashArray:v})}};var ce=i=>{let{edges:r,nodes:o}=i,y=new Set,w=r.map(t=>t.target).filter(t=>!r.some(n=>n.source===t)).filter(t=>{var n,d;return!((d=(n=o.find(u=>t===u.id))==null?void 0:n.shouldNotMerge)!=null&&d.call(n))}).reduce((t,n)=>t[n]?R(S({},t),{[n]:t[n]+1}):R(S({},t),{[n]:1}),{}),p=Object.entries(w).reduce((t,[n,d])=>{let u=S({},t);return d>1?u.multi.push(n):u.single.push(n),u},{single:[],multi:[]}),b=p.single.reduce((t,n)=>{let{source:d}=r.find(u=>u.target===n);return t[d]?t[d].push(n):t[d]=[n],t},{}),D=p.multi.reduce((t,n)=>{let d=r.filter(u=>u.target===n).map(u=>u.source).sort().toString();return t[d]?t[d].push(n):t[d]=[n],t},{}),W=t=>Object.entries(t).reduce((n,[d,u])=>{let E=S({},n);return u.forEach(m=>{let g=o.find(e=>e.id===m);E[d]?g!=null&&g.type&&E[d][g.type]?E[d][g.type].push(m):g!=null&&g.type&&(E[d][g.type]=[m]):g!=null&&g.type&&(E[d]={},E[d][g.type]=[m])}),E},{}),j=W(b),X=W(D),_=(()=>{let t=[...o],n=[...r];return Object.entries(j).forEach(([d,u])=>{Object.entries(u).forEach(([E,m])=>{var g;if(m.length>1){y.add(E);let e=`${d}_${E}_MergeSingleNodesByServerMap`,s=(g=t.find(h=>h.id===m[0]))==null?void 0:g.imgPath,[M,c]=F.partition(t,h=>!m.includes(h.id));t=[...M,{id:e,imgPath:s,label:`total: ${m.length}`,nodes:c}];let[a,f]=F.partition(n,h=>!m.includes(h.target));n=[...a,{source:d,target:e,id:`${d}_${E}_MergeSingleEdgesByServerMap`,edges:f}]}})}),{nodes:t,edges:n}})(),Y=(()=>{let t=[..._.nodes],n=[..._.edges];return Object.entries(X).forEach(([d,u])=>{Object.entries(u).forEach(([E,m])=>{var g;if(m.length>1){y.add(E);let e=`${d}_${E}_MergeMultiNodesByServerMap`,s=(g=t.find(k=>k.id===m[0]))==null?void 0:g.imgPath,[M,c]=F.partition(t,k=>!m.includes(k.id));t=[...M,{id:e,imgPath:s,label:`total: ${m.length}`,nodes:c}];let a=d.split(","),[f,h]=F.partition(n,k=>!(a.includes(k.source)&&m.includes(k.target))),N=h.reduce((k,O,P)=>(k[O.source]?k[O.source].edges.push(O):k[O.source]={target:e,source:O.source,id:`${O.source}_${E}_MergeMultiEdgesByServerMap`,edges:[O]},S({},k)),{});n=[...f,...Object.values(N)]}})}),{nodes:t,edges:n}})();return{nodes:[...Y.nodes.map(t=>({data:R(S({},t),{imgArr:[t==null?void 0:t.imgPath,ae(t)]})}))],edges:[...Y.edges.map(t=>({data:S({},t)}))],mergeInfo:{types:Array.from(y)}}};import we from"lodash";var ge=i=>we.merge({},L,i),Q=({cy:i,theme:r,edgeLabelRenderer:o,nodeLabelRenderer:y})=>{var T,v,B;return[{selector:"node",style:R(S({},(T=r.node)==null?void 0:T.default),{width:100,height:100,label:w=>{var b,D;let p=(D=i.data((b=w.data())==null?void 0:b.id))==null?void 0:D.data;return(y==null?void 0:y(p))||(p==null?void 0:p.label)||""},"background-image":w=>{var b,D;let p=(D=i.data((b=w.data())==null?void 0:b.id))==null?void 0:D.data;return p==null?void 0:p.imgArr},"background-fit":"contain","background-offset-y":"-5px"})},{selector:"edge",style:R(S({},(v=r.edge)==null?void 0:v.default),{label:w=>{var b,D;let p=(D=i.data((b=w.data())==null?void 0:b.id))==null?void 0:D.data;return(o==null?void 0:o(p))||""}})},{selector:"edge:loop",style:S({},(B=r.edge)==null?void 0:B.loop)}]};import{keyBy as ve}from"lodash";import{jsx as Oe}from"react/jsx-runtime";le.use(xe);var De=({data:i,customTheme:r={},baseNodeId:o,onClickNode:y,onClickEdge:T,onClickBackground:v,onDataMerged:B,renderNodeLabel:w,renderEdgeLabel:p,className:b,style:D,cy:W})=>{let j=C.useRef(null),X=C.useRef(),l=C.useRef(),_=C.useRef(),x=ge(r),[Y,t]=C.useState(o);C.useEffect(()=>()=>{var e;(e=l==null?void 0:l.current)==null||e.destroy()},[]),C.useEffect(()=>{var e,s;X.current=o,l.current&&((e=_.current)==null||e.removeAllListeners(),(s=_.current)==null||s.stop(),_.current=void 0,l.current.removeData(),l.current.removeAllListeners(),l.current.destroy(),l.current=void 0),l.current=le({zoom:1,minZoom:.1,maxZoom:3,wheelSensitivity:.2,container:j.current}),W==null||W(l.current),l.current.style(Q({cy:l.current,theme:x,edgeLabelRenderer:p,nodeLabelRenderer:w})),E()},[o]),C.useEffect(()=>{let e=l.current;e&&e.style(Q({cy:e,theme:x,edgeLabelRenderer:p,nodeLabelRenderer:w}))},[w,p]),C.useEffect(()=>{if(i){let e=l.current;if(e){let{nodes:s,edges:M,mergeInfo:c}=ce(i),a;if(B==null||B(c),e.batch(()=>{e.removeData(),e.data(ve([...s,...M],"data.id"));let f=e.nodes().map(N=>N.id()),h=s.map(({data:N})=>N.id);new Set([...f,...h]).forEach(N=>{let k=f.includes(N),O=h.includes(N),P=k&&!O,$=!k&&O;if(P){let I=e.getElementById(N);I.remove(),I.connectedEdges().remove()}else if($){let{data:I}=s.find(({data:A})=>A.id===N),V=M.filter(({data:A})=>A.source===N||A.target===N);a=a?[...a,e.add({data:I})]:[e.add({data:I})],V.forEach(({data:A})=>{let z=e.getElementById(A.source),ee=e.getElementById(A.target);z.inside()&&ee.inside()&&e.add({data:A})})}else return})}),!_.current)_.current=e==null?void 0:e.layout({name:"dagre",fit:!1,rankDir:"LR",rankSep:200}),_.current.run();else if(a&&a.length>0){let f=e.getElementById(o),{x:h,y:N}=f.position(),{y1:k,y2:O}=f.boundingBox(),P;a.forEach(I=>{P=0;let V=I.predecessors(),A=I.successors(),z=V.contains(f);P=(z?V:A).nodes().toArray().findIndex(H=>H.id()===o)+1;let te=h+P*(200+100)*(z?1:-1),{y:ue}=I.position(),{h:Z,y1:me}=I.boundingBox(),fe=Z-(ue-me)*2,oe=e.nodes().filter(H=>{let G=H.same(I),{x:J}=H.position(),he=H.width(),ye=Math.abs(te-J)<=he;return!G&&ye}),q;Math.random()>=.5?q=Math.min(...oe.map(J=>J.position().y-50),N-50)-50-Z:q=Math.max(...oe.map(G=>G.boundingBox().y2),O)+50;let pe=(Z-fe)/2+q;I.position({x:te,y:pe})});let $=e.getElementById(Y);$.isNode()?m($):g($)}}}},[i]);let n=e=>{y==null||y(e)},d=e=>{T==null||T(e)},u=e=>{v==null||v(e)},E=C.useCallback(()=>{let e=l==null?void 0:l.current;e&&e.on("layoutready",()=>{m(e.getElementById(o));let s=e.getElementById(o);e.resize(),e.center(s)}).on("mouseover",({target:s})=>{e.container().style.cursor=s===e?"default":"pointer"}).on("mouseout",()=>{e.container().style.cursor="default"}).on("tap",({target:s,originalEvent:M,renderedPosition:c})=>{let a=c?"left":"programmatic",f={x:c==null?void 0:c.x,y:c==null?void 0:c.y};s===e?u({eventType:a,position:f}):s.isNode()?(m(s),n({eventType:a,position:f,data:s.data()})):s.isEdge()&&(g(s),d({eventType:a,position:f,data:s.data()}))}).on("cxttap",({target:s,renderedPosition:M})=>{let c="right",a={x:M.x,y:M.y};s===e?u({eventType:c,position:a}):s.isNode()?n({eventType:c,position:a,data:s.data()}):s.isEdge()&&d({eventType:c,position:a,data:s.data()})})},[y,T,v]),m=e=>{var M,c,a,f,h;let s=l.current;s.nodes().style((M=x.node)==null?void 0:M.default),s.edges().style((c=x.edge)==null?void 0:c.default),s.getElementById(o).style((a=x.node)==null?void 0:a.main),e.style((f=x.node)==null?void 0:f.highlight),e.connectedEdges().style((h=x.edge)==null?void 0:h.highlight)},g=e=>{var M,c,a,f,h,N;let s=l.current;s.nodes().style((M=x.node)==null?void 0:M.default),s.edges().style((c=x.edge)==null?void 0:c.default),s.getElementById(o).style((a=x.node)==null?void 0:a.main),e.connectedNodes().style({"border-color":(h=(f=x.node)==null?void 0:f.highlight)==null?void 0:h["border-color"]}),e.style((N=x.edge)==null?void 0:N.highlight)};return Oe("div",{style:S({width:"100%",height:"100%",overflow:"hidden"},D),className:b,ref:j})};export{De as ServerMap}; | ||
`},ne=(i,r)=>r===0?0:r/i<re?G*re:r/i*G,be=(i,r)=>{let{transactionStatus:s}=V;if(r||!i)return z({stroke:s.default.stroke,strokeWidth:s.default.strokeWidth});{let y=Object.keys(i).reduce((m,k)=>m+i[k],0),T=ne(y,i.slow),v=ne(y,i.bad),C=-1*(.75*G-(T+v)),w=-1*(.75*G-v);return z({stroke:s.good.stroke,strokeWidth:s.good.strokeWidth})+z({stroke:s.slow.stroke,strokeWidth:s.slow.strokeWidth,strokeDashOffset:C,strokeDashArray:T})+z({stroke:s.bad.stroke,strokeWidth:s.bad.strokeWidth,strokeDashOffset:w,strokeDashArray:v})}};var ae=i=>{let{edges:r,nodes:s}=i,y=new Set,w=r.map(t=>t.target).filter(t=>!r.some(n=>n.source===t)).filter(t=>{var n,d;return!((d=(n=s.find(f=>t===f.id))==null?void 0:n.shouldNotMerge)!=null&&d.call(n))}).reduce((t,n)=>t[n]?P(S({},t),{[n]:t[n]+1}):P(S({},t),{[n]:1}),{}),m=Object.entries(w).reduce((t,[n,d])=>{let f=S({},t);return d>1?f.multi.push(n):f.single.push(n),f},{single:[],multi:[]}),k=m.single.reduce((t,n)=>{let{source:d}=r.find(f=>f.target===n);return t[d]?t[d].push(n):t[d]=[n],t},{}),D=m.multi.reduce((t,n)=>{let d=r.filter(f=>f.target===n).map(f=>f.source).sort().toString();return t[d]?t[d].push(n):t[d]=[n],t},{}),R=t=>Object.entries(t).reduce((n,[d,f])=>{let g=S({},n);return f.forEach(p=>{let e=s.find(o=>o.id===p);g[d]?e!=null&&e.type&&g[d][e.type]?g[d][e.type].push(p):e!=null&&e.type&&(g[d][e.type]=[p]):e!=null&&e.type&&(g[d]={},g[d][e.type]=[p])}),g},{}),U=R(k),l=R(D),M=(()=>{let t=[...s],n=[...r];return Object.entries(U).forEach(([d,f])=>{Object.entries(f).forEach(([g,p])=>{var e;if(p.length>1){y.add(g);let o=`${d}_${g}_MergeSingleNodesByServerMap`,E=(e=t.find(c=>c.id===p[0]))==null?void 0:e.imgPath,[h,a]=L.partition(t,c=>!p.includes(c.id));t=[...h,{id:o,imgPath:E,type:g,label:`total: ${p.length}`,nodes:a}];let[u,b]=L.partition(n,c=>!p.includes(c.target));n=[...u,{source:d,target:o,id:`${d}_${g}_MergeSingleEdgesByServerMap`,edges:b}]}})}),{nodes:t,edges:n}})(),K=(()=>{let t=[...M.nodes],n=[...M.edges];return Object.entries(l).forEach(([d,f])=>{Object.entries(f).forEach(([g,p])=>{var e;if(p.length>1){y.add(g);let o=`${d}_${g}_MergeMultiNodesByServerMap`,E=(e=t.find(N=>N.id===p[0]))==null?void 0:e.imgPath,[h,a]=L.partition(t,N=>!p.includes(N.id));t=[...h,{id:o,imgPath:E,type:g,label:`total: ${p.length}`,nodes:a}];let u=d.split(","),[b,c]=L.partition(n,N=>!(u.includes(N.source)&&p.includes(N.target))),W=c.reduce((N,x,H)=>(N[x.source]?N[x.source].edges.push(x):N[x.source]={target:o,source:x.source,id:`${x.source}_${g}_MergeMultiEdgesByServerMap`,edges:[x]},S({},N)),{});n=[...b,...Object.values(W)]}})}),{nodes:t,edges:n}})();return{nodes:[...K.nodes.map(t=>({data:P(S({},t),{imgArr:[t==null?void 0:t.imgPath,de(t)]})}))],edges:[...K.edges.map(t=>({data:S({},t)}))],mergeInfo:{types:Array.from(y)}}};import Te from"lodash";var ce=i=>Te.merge({},V,i),q=({cy:i,theme:r,edgeLabelRenderer:s,nodeLabelRenderer:y})=>{var T,v,C;return[{selector:"node",style:P(S({},(T=r.node)==null?void 0:T.default),{width:100,height:100,label:w=>{var k,D;let m=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(y==null?void 0:y(m))||(m==null?void 0:m.label)||""},"background-image":w=>{var k,D;let m=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return m==null?void 0:m.imgArr},"background-fit":"contain","background-offset-y":"-5px"})},{selector:"edge",style:P(S({},(v=r.edge)==null?void 0:v.default),{label:w=>{var k,D;let m=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(s==null?void 0:s(m))||""}})},{selector:"edge:loop",style:S({},(C=r.edge)==null?void 0:C.loop)}]};import{keyBy as xe}from"lodash";import{jsx as De}from"react/jsx-runtime";ge.use(we);var ve=({data:i,customTheme:r={},baseNodeId:s,onClickNode:y,onClickEdge:T,onClickBackground:v,onDataMerged:C,renderNodeLabel:w,renderEdgeLabel:m,className:k,style:D})=>{let R=A.useRef(null),U=A.useRef(),l=A.useRef(),B=A.useRef(),M=ce(r),[J,K]=A.useState(s);A.useEffect(()=>()=>{var e;(e=l==null?void 0:l.current)==null||e.destroy()},[]),A.useEffect(()=>{var e,o;U.current=s,l.current&&((e=B.current)==null||e.removeAllListeners(),(o=B.current)==null||o.stop(),B.current=void 0,l.current.removeData(),l.current.removeAllListeners(),l.current.destroy(),l.current=void 0),l.current=ge({zoom:1,minZoom:.1,maxZoom:3,wheelSensitivity:.2,container:R.current}),l.current.style(q({cy:l.current,theme:M,edgeLabelRenderer:m,nodeLabelRenderer:w})),f()},[s]),A.useEffect(()=>{let e=l.current;e&&e.style(q({cy:e,theme:M,edgeLabelRenderer:m,nodeLabelRenderer:w}))},[w,m]),A.useEffect(()=>{if(i){let e=l.current;if(e){let{nodes:o,edges:E,mergeInfo:h}=ae(i),a;if(C==null||C(h),e.batch(()=>{e.removeData(),e.data(xe([...o,...E],"data.id"));let u=e.nodes().map(c=>c.id()),b=o.map(({data:c})=>c.id);new Set([...u,...b]).forEach(c=>{let W=u.includes(c),N=b.includes(c),x=W&&!N,H=!W&&N;if(x){let O=e.getElementById(c);O.remove(),O.connectedEdges().remove()}else if(H){let{data:O}=o.find(({data:I})=>I.id===c),$=E.filter(({data:I})=>I.source===c||I.target===c);a=a?[...a,e.add({data:O})]:[e.add({data:O})],$.forEach(({data:I})=>{let j=e.getElementById(I.source),Q=e.getElementById(I.target);j.inside()&&Q.inside()&&e.add({data:I})})}else return})}),!B.current)B.current=e==null?void 0:e.layout({name:"dagre",fit:!1,rankDir:"LR",rankSep:200}),B.current.run();else if(a&&a.length>0){let u=e.getElementById(s),{x:b,y:c}=u.position(),{y1:W,y2:N}=u.boundingBox(),x;a.forEach(O=>{x=0;let $=O.predecessors(),I=O.successors(),j=$.contains(u);x=(j?$:I).nodes().toArray().findIndex(_=>_.id()===s)+1;let ee=b+x*(200+100)*(j?1:-1),{y:le}=O.position(),{h:F,y1:ue}=O.boundingBox(),me=F-(le-ue)*2,te=e.nodes().filter(_=>{let Y=_.same(O),{x:Z}=_.position(),pe=_.width(),he=Math.abs(ee-Z)<=pe;return!Y&&he}),X;Math.random()>=.5?X=Math.min(...te.map(Z=>Z.position().y-50),c-50)-50-F:X=Math.max(...te.map(Y=>Y.boundingBox().y2),N)+50;let fe=(F-me)/2+X;O.position({x:ee,y:fe})});let H=e.getElementById(J);H.isNode()?g(H):p(H)}}}},[i]);let t=e=>{y==null||y(e)},n=e=>{T==null||T(e)},d=e=>{v==null||v(e)},f=A.useCallback(()=>{let e=l==null?void 0:l.current;e&&e.on("layoutready",()=>{g(e.getElementById(s));let o=e.getElementById(s);e.resize(),e.center(o)}).on("mouseover",({target:o})=>{e.container().style.cursor=o===e?"default":"pointer"}).on("mouseout",()=>{e.container().style.cursor="default"}).on("tap",({target:o,originalEvent:E,renderedPosition:h})=>{let a="left",u={x:h.x,y:h.y};o===e?d({eventType:a,position:u}):o.isNode()?(g(o),t({eventType:a,position:u,data:o.data()})):o.isEdge()&&(p(o),n({eventType:a,position:u,data:o.data()}))}).on("cxttap",({target:o,renderedPosition:E})=>{let h="right",a={x:E.x,y:E.y};o===e?d({eventType:h,position:a}):o.isNode()?t({eventType:h,position:a,data:o.data()}):o.isEdge()&&n({eventType:h,position:a,data:o.data()})})},[y,T,v]),g=e=>{var E,h,a,u,b;let o=l.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((h=M.edge)==null?void 0:h.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.style((u=M.node)==null?void 0:u.highlight),e.connectedEdges().style((b=M.edge)==null?void 0:b.highlight)},p=e=>{var E,h,a,u,b,c;let o=l.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((h=M.edge)==null?void 0:h.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.connectedNodes().style({"border-color":(b=(u=M.node)==null?void 0:u.highlight)==null?void 0:b["border-color"]}),e.style((c=M.edge)==null?void 0:c.highlight)};return De("div",{style:S({width:"100%",height:"100%",overflow:"hidden"},D),className:k,ref:R})};export{ve as ServerMap}; |
{ | ||
"name": "@pinpoint-fe/server-map", | ||
"version": "0.0.8", | ||
"version": "0.0.9-rc.1", | ||
"description": "Open-source network-map library, specifically for application topology, written in React.js", | ||
@@ -5,0 +5,0 @@ "repository": "https://github.com/pinpoint-apm/pinpoint/blob/frontend-v3/web-frontend/src/main/v3/packages/server-map/README.md", |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
27265
184