@pinpoint-fe/server-map - npm Package Compare versions

Comparing version 0.0.10-rc.5 to 0.0.10-rc.6

dist/index.js

		@@ -13,2 +13,2 @@ 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},W=(i,r)=>Ee(i,Ne(r));import C from"react";import le from"cytoscape";import we from"cytoscape-dagre";import K from"lodash";var G={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,U=2Math.PIie,de=i=>{let{transactionInfo:r}=i;return"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(`
		/>
		`},ne=(i,r)=>r===0?0:r/i<re?Ure:r/iU,be=(i,r)=>{let{transactionStatus:s}=G;if(r\|\|!i)return L({stroke:s.default.stroke,strokeWidth:s.default.strokeWidth});{let y=Object.keys(i).reduce((f,k)=>f+i[k],0),T=ne(y,i.slow),v=ne(y,i.bad),A=-1(.75U-(T+v)),w=-1(.75U-v);return L({stroke:s.good.stroke,strokeWidth:s.good.strokeWidth})+L({stroke:s.slow.stroke,strokeWidth:s.slow.strokeWidth,strokeDashOffset:A,strokeDashArray:T})+L({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(p=>t===p.id))==null?void 0:n.shouldNotMerge)!=null&&d.call(n))}).reduce((t,n)=>t[n]?W(S({},t),{[n]:t[n]+1}):W(S({},t),{[n]:1}),{}),f=Object.entries(w).reduce((t,[n,d])=>{let p=S({},t);return d>1?p.multi.push(n):p.single.push(n),p},{single:[],multi:[]}),k=f.single.reduce((t,n)=>{let{source:d}=r.find(p=>p.target===n);return t[d]?t[d].push(n):t[d]=[n],t},{}),D=f.multi.reduce((t,n)=>{let d=r.filter(p=>p.target===n).map(p=>p.source).sort().toString();return t[d]?t[d].push(n):t[d]=[n],t},{}),R=t=>Object.entries(t).reduce((n,[d,p])=>{let u=S({},n);return p.forEach(h=>{let e=s.find(o=>o.id===h);u[d]?e!=null&&e.type&&u[d][e.type]?u[d][e.type].push(h):e!=null&&e.type&&(u[d][e.type]=[h]):e!=null&&e.type&&(u[d]={},u[d][e.type]=[h])}),u},{}),j=R(k),g=R(D),M=(()=>{let t=[...s],n=[...r];return Object.entries(j).forEach(([d,p])=>{Object.entries(p).forEach(([u,h])=>{var e;if(h.length>1){y.add(u);let o=`${d}_${u}_MergeSingleNodesByServerMap`,E=(e=t.find(l=>l.id===h[0]))==null?void 0:e.imgPath,[c,a]=K.partition(t,l=>!h.includes(l.id));t=[...c,{id:o,imgPath:E,type:u,label:`total: ${h.length}`,nodes:a}];let[m,b]=K.partition(n,l=>!h.includes(l.target));n=[...m,{source:d,target:o,id:`${d}_${u}_MergeSingleEdgesByServerMap`,edges:b}]}})}),{nodes:t,edges:n}})(),P=(()=>{let t=[...M.nodes],n=[...M.edges];return Object.entries(g).forEach(([d,p])=>{Object.entries(p).forEach(([u,h])=>{var e;if(h.length>1){y.add(u);let o=`${d}_${u}_MergeMultiNodesByServerMap`,E=(e=t.find(N=>N.id===h[0]))==null?void 0:e.imgPath,[c,a]=K.partition(t,N=>!h.includes(N.id));t=[...c,{id:o,imgPath:E,type:u,label:`total: ${h.length}`,nodes:a}];let m=d.split(","),[b,l]=K.partition(n,N=>!(m.includes(N.source)&&h.includes(N.target))),$=l.reduce((N,x,_)=>(N[x.source]?N[x.source].edges.push(x):N[x.source]={target:o,source:x.source,id:`${x.source}_${u}_MergeMultiEdgesByServerMap`,edges:[x]},S({},N)),{});n=[...b,...Object.values($)]}})}),{nodes:t,edges:n}})();return{nodes:[...P.nodes.map(t=>({data:W(S({},t),{imgArr:[t==null?void 0:t.imgPath,de(t)]})}))],edges:[...P.edges.map(t=>({data:S({},t)}))],mergeInfo:{types:Array.from(y)}}};import Te from"lodash";var ce=i=>Te.merge({},G,i),q=({cy:i,theme:r,edgeLabelRenderer:s,nodeLabelRenderer:y})=>{var T,v,A;return[{selector:"node",style:W(S({},(T=r.node)==null?void 0:T.default),{width:100,height:100,label:w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(y==null?void 0:y(f))\|\|(f==null?void 0:f.label)\|\|""},"background-image":w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return f==null?void 0:f.imgArr},"background-fit":"contain","background-offset-y":"-5px"})},{selector:"edge",style:W(S({},(v=r.edge)==null?void 0:v.default),{label:w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(s==null?void 0:s(f))\|\|""}})},{selector:"edge:loop",style:S({},(A=r.edge)==null?void 0:A.loop)}]};import{keyBy as xe}from"lodash";import{jsx as De}from"react/jsx-runtime";le.use(we);var ve=({data:i,customTheme:r={},baseNodeId:s,onClickNode:y,onClickEdge:T,onClickBackground:v,onDataMerged:A,renderNodeLabel:w,renderEdgeLabel:f,className:k,style:D,cy:R})=>{let j=C.useRef(null),g=C.useRef(),B=C.useRef(),M=ce(r),[J,P]=C.useState("");C.useEffect(()=>()=>{var e;(e=g==null?void 0:g.current)==null\|\|e.destroy()},[]),C.useEffect(()=>{var e,o;P(s),g.current&&((e=B.current)==null\|\|e.removeAllListeners(),(o=B.current)==null\|\|o.stop(),B.current=void 0,g.current.removeData(),g.current.removeAllListeners(),g.current.destroy(),g.current=void 0),g.current=le({zoom:1,minZoom:.1,maxZoom:3,wheelSensitivity:.2,container:j.current}),R==null\|\|R(g.current),g.current.style(q({cy:g.current,theme:M,edgeLabelRenderer:f,nodeLabelRenderer:w})),p()},[s]),C.useEffect(()=>{let e=g.current;e&&e.style(q({cy:e,theme:M,edgeLabelRenderer:f,nodeLabelRenderer:w}))},[w,f]),C.useEffect(()=>{if(i){let e=g.current;if(e){let{nodes:o,edges:E,mergeInfo:c}=ae(i),a;if(A==null\|\|A(c),e.batch(()=>{e.removeData(),e.data(xe([...o,...E],"data.id"));let m=e.nodes().map(l=>l.id()),b=o.map(({data:l})=>l.id);new Set([...m,...b]).forEach(l=>{let $=m.includes(l),N=b.includes(l),x=$&&!N,_=!$&&N;if(x){let O=e.getElementById(l);O.remove(),O.connectedEdges().remove()}else if(_){let{data:O}=o.find(({data:I})=>I.id===l),Y=E.filter(({data:I})=>I.source===l\|\|I.target===l);a=a?[...a,e.add({data:O})]:[e.add({data:O})],Y.forEach(({data:I})=>{let V=e.getElementById(I.source),Q=e.getElementById(I.target);V.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 m=e.getElementById(s),{x:b,y:l}=m.position(),{y1:$,y2:N}=m.boundingBox(),x;a.forEach(O=>{x=0;let Y=O.predecessors(),I=O.successors(),V=Y.contains(m);x=(V?Y:I).nodes().toArray().findIndex(H=>H.id()===s)+1;let ee=b+x(200+100)(V?1:-1),{y:ge}=O.position(),{h:F,y1:ue}=O.boundingBox(),me=F-(ge-ue)*2,te=e.nodes().filter(H=>{let z=H.same(O),{x:Z}=H.position(),pe=H.width(),he=Math.abs(ee-Z)<=pe;return!z&&he}),X;Math.random()>=.5?X=Math.min(...te.map(Z=>Z.position().y-50),l-50)-50-F:X=Math.max(...te.map(z=>z.boundingBox().y2),N)+50;let fe=(F-me)/2+X;O.position({x:ee,y:fe})});let _=e.getElementById(J);_.inside()?_.isNode()?u(_):h(_):e.getElementById(s).emit("tap")}}}},[i]);let t=e=>{y==null\|\|y(e)},n=e=>{T==null\|\|T(e)},d=e=>{v==null\|\|v(e)},p=C.useCallback(()=>{let e=g==null?void 0:g.current;e&&e.on("layoutready",()=>{u(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:c})=>{let a=c?"left":"programmatic",m={x:c==null?void 0:c.x,y:c==null?void 0:c.y};o===e?d({eventType:a,position:m}):o.isNode()?(u(o),t({eventType:a,position:m,data:o.data()}),P(o.id())):o.isEdge()&&(h(o),n({eventType:a,position:m,data:o.data()}),P(o.id()))}).on("cxttap",({target:o,renderedPosition:E})=>{let c="right",a={x:E.x,y:E.y};o===e?d({eventType:c,position:a}):o.isNode()?t({eventType:c,position:a,data:o.data()}):o.isEdge()&&n({eventType:c,position:a,data:o.data()})})},[y,T,v]),u=e=>{var E,c,a,m,b;let o=g.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((c=M.edge)==null?void 0:c.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.style((m=M.node)==null?void 0:m.highlight),e.connectedEdges().style((b=M.edge)==null?void 0:b.highlight)},h=e=>{var E,c,a,m,b,l;let o=g.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((c=M.edge)==null?void 0:c.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.connectedNodes().style({"border-color":(b=(m=M.node)==null?void 0:m.highlight)==null?void 0:b["border-color"]}),e.style((l=M.edge)==null?void 0:l.highlight)};return De("div",{style:S({width:"100%",height:"100%",overflow:"hidden"},D),className:k,ref:j})};export{ve as ServerMap};
		`},ne=(i,r)=>r===0?0:r/i<re?Ure:r/iU,be=(i,r)=>{let{transactionStatus:s}=G;if(r\|\|!i)return L({stroke:s.default.stroke,strokeWidth:s.default.strokeWidth});{let y=Object.keys(i).reduce((f,k)=>f+i[k],0),T=ne(y,i.slow),v=ne(y,i.bad),A=-1(.75U-(T+v)),w=-1(.75U-v);return L({stroke:s.good.stroke,strokeWidth:s.good.strokeWidth})+L({stroke:s.slow.stroke,strokeWidth:s.slow.strokeWidth,strokeDashOffset:A,strokeDashArray:T})+L({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(p=>t===p.id))==null?void 0:n.shouldNotMerge)!=null&&d.call(n))}).reduce((t,n)=>t[n]?W(S({},t),{[n]:t[n]+1}):W(S({},t),{[n]:1}),{}),f=Object.entries(w).reduce((t,[n,d])=>{let p=S({},t);return d>1?p.multi.push(n):p.single.push(n),p},{single:[],multi:[]}),k=f.single.reduce((t,n)=>{let{source:d}=r.find(p=>p.target===n);return t[d]?t[d].push(n):t[d]=[n],t},{}),D=f.multi.reduce((t,n)=>{let d=r.filter(p=>p.target===n).map(p=>p.source).sort().toString();return t[d]?t[d].push(n):t[d]=[n],t},{}),R=t=>Object.entries(t).reduce((n,[d,p])=>{let u=S({},n);return p.forEach(h=>{let e=s.find(o=>o.id===h);u[d]?e!=null&&e.type&&u[d][e.type]?u[d][e.type].push(h):e!=null&&e.type&&(u[d][e.type]=[h]):e!=null&&e.type&&(u[d]={},u[d][e.type]=[h])}),u},{}),j=R(k),g=R(D),M=(()=>{let t=[...s],n=[...r];return Object.entries(j).forEach(([d,p])=>{Object.entries(p).forEach(([u,h])=>{var e;if(h.length>1){y.add(u);let o=`${d}_${u}_MergeSingleNodesByServerMap`,E=(e=t.find(l=>l.id===h[0]))==null?void 0:e.imgPath,[c,a]=K.partition(t,l=>!h.includes(l.id));t=[...c,{id:o,imgPath:E,type:u,label:`total: ${h.length}`,nodes:a}];let[m,b]=K.partition(n,l=>!h.includes(l.target));n=[...m,{source:d,target:o,id:`${d}_${u}_MergeSingleEdgesByServerMap`,edges:b}]}})}),{nodes:t,edges:n}})(),P=(()=>{let t=[...M.nodes],n=[...M.edges];return Object.entries(g).forEach(([d,p])=>{Object.entries(p).forEach(([u,h])=>{var e;if(h.length>1){y.add(u);let o=`${d}_${u}_MergeMultiNodesByServerMap`,E=(e=t.find(N=>N.id===h[0]))==null?void 0:e.imgPath,[c,a]=K.partition(t,N=>!h.includes(N.id));t=[...c,{id:o,imgPath:E,type:u,label:`total: ${h.length}`,nodes:a}];let m=d.split(","),[b,l]=K.partition(n,N=>!(m.includes(N.source)&&h.includes(N.target))),$=l.reduce((N,x,_)=>(N[x.source]?N[x.source].edges.push(x):N[x.source]={target:o,source:x.source,id:`${x.source}_${u}_MergeMultiEdgesByServerMap`,edges:[x]},S({},N)),{});n=[...b,...Object.values($)]}})}),{nodes:t,edges:n}})();return{nodes:[...P.nodes.map(t=>({data:W(S({},t),{imgArr:[t==null?void 0:t.imgPath,de(t)]})}))],edges:[...P.edges.map(t=>({data:S({},t)}))],mergeInfo:{types:Array.from(y)}}};import Te from"lodash";var ce=i=>Te.merge({},G,i),q=({cy:i,theme:r,edgeLabelRenderer:s,nodeLabelRenderer:y})=>{var T,v,A;return[{selector:"node",style:W(S({},(T=r.node)==null?void 0:T.default),{width:100,height:100,label:w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(y==null?void 0:y(f))\|\|(f==null?void 0:f.label)\|\|""},"background-image":w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return f==null?void 0:f.imgArr},"background-fit":"contain","background-offset-y":"-5px"})},{selector:"edge",style:W(S({},(v=r.edge)==null?void 0:v.default),{label:w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(s==null?void 0:s(f))\|\|""}})},{selector:"edge:loop",style:S({},(A=r.edge)==null?void 0:A.loop)}]};import{keyBy as xe}from"lodash";import{jsx as De}from"react/jsx-runtime";le.use(we);var ve=({data:i,customTheme:r={},baseNodeId:s,onClickNode:y,onClickEdge:T,onClickBackground:v,onDataMerged:A,renderNodeLabel:w,renderEdgeLabel:f,className:k,style:D,cy:R})=>{let j=C.useRef(null),g=C.useRef(),B=C.useRef(),M=ce(r),[J,P]=C.useState("");C.useEffect(()=>()=>{var e;(e=g==null?void 0:g.current)==null\|\|e.destroy()},[]),C.useEffect(()=>{var e,o;P(s),g.current&&((e=B.current)==null\|\|e.removeAllListeners(),(o=B.current)==null\|\|o.stop(),B.current=void 0,g.current.removeData(),g.current.removeAllListeners(),g.current.destroy(),g.current=void 0),g.current=le({zoom:1,minZoom:.1,maxZoom:3,wheelSensitivity:.2,container:j.current}),R==null\|\|R(g.current),g.current.style(q({cy:g.current,theme:M,edgeLabelRenderer:f,nodeLabelRenderer:w})),p()},[s]),C.useEffect(()=>{let e=g.current;e&&e.style(q({cy:e,theme:M,edgeLabelRenderer:f,nodeLabelRenderer:w}))},[w,f]),C.useEffect(()=>{if(i){let e=g.current;if(e){let{nodes:o,edges:E,mergeInfo:c}=ae(i),a;if(A==null\|\|A(c),e.batch(()=>{e.removeData(),e.data(xe([...o,...E],"data.id"));let m=e.nodes().map(l=>l.id()),b=o.map(({data:l})=>l.id);new Set([...m,...b]).forEach(l=>{let $=m.includes(l),N=b.includes(l),x=$&&!N,_=!$&&N;if(x){let O=e.getElementById(l);O.remove(),O.connectedEdges().remove()}else if(_){let{data:O}=o.find(({data:I})=>I.id===l),Y=E.filter(({data:I})=>I.source===l\|\|I.target===l);a=a?[...a,e.add({data:O})]:[e.add({data:O})],Y.forEach(({data:I})=>{let V=e.getElementById(I.source),Q=e.getElementById(I.target);V.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 m=e.getElementById(s),{x:b,y:l}=m.position(),{y1:$,y2:N}=m.boundingBox(),x;a.forEach(O=>{x=0;let Y=O.predecessors(),I=O.successors(),V=Y.contains(m);x=(V?Y:I).nodes().toArray().findIndex(H=>H.id()===s)+1;let ee=b+x(200+100)(V?1:-1),{y:ge}=O.position(),{h:F,y1:ue}=O.boundingBox(),me=F-(ge-ue)*2,te=e.nodes().filter(H=>{let z=H.same(O),{x:Z}=H.position(),pe=H.width(),he=Math.abs(ee-Z)<=pe;return!z&&he}),X;Math.random()>=.5?X=Math.min(...te.map(Z=>Z.position().y-50),l-50)-50-F:X=Math.max(...te.map(z=>z.boundingBox().y2),N)+50;let fe=(F-me)/2+X;O.position({x:ee,y:fe})});let _=e.getElementById(J);_.inside()?_.isNode()?u(_):h(_):e.getElementById(s).emit("tap")}}}},[i]);let t=e=>{y==null\|\|y(e)},n=e=>{T==null\|\|T(e)},d=e=>{v==null\|\|v(e)},p=C.useCallback(()=>{let e=g==null?void 0:g.current;e&&e.on("layoutready",()=>{let o=e.getElementById(s);o.emit("tap"),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:c})=>{let a=c?"left":"programmatic",m={x:c==null?void 0:c.x,y:c==null?void 0:c.y};o===e?d({eventType:a,position:m}):o.isNode()?(u(o),t({eventType:a,position:m,data:o.data()}),P(o.id())):o.isEdge()&&(h(o),n({eventType:a,position:m,data:o.data()}),P(o.id()))}).on("cxttap",({target:o,renderedPosition:E})=>{let c="right",a={x:E.x,y:E.y};o===e?d({eventType:c,position:a}):o.isNode()?t({eventType:c,position:a,data:o.data()}):o.isEdge()&&n({eventType:c,position:a,data:o.data()})})},[y,T,v]),u=e=>{var E,c,a,m,b;let o=g.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((c=M.edge)==null?void 0:c.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.style((m=M.node)==null?void 0:m.highlight),e.connectedEdges().style((b=M.edge)==null?void 0:b.highlight)},h=e=>{var E,c,a,m,b,l;let o=g.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((c=M.edge)==null?void 0:c.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.connectedNodes().style({"border-color":(b=(m=M.node)==null?void 0:m.highlight)==null?void 0:b["border-color"]}),e.style((l=M.edge)==null?void 0:l.highlight)};return De("div",{style:S({width:"100%",height:"100%",overflow:"hidden"},D),className:k,ref:j})};export{ve as ServerMap};

package.json

		{
		"name": "@pinpoint-fe/server-map",
		"version": "0.0.10-rc.5",
		"version": "0.0.10-rc.6",
		"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",

dist/index.cjs

Sorry, the diff of this file is not supported yet

		@@ -13,2 +13,2 @@ 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},W=(i,r)=>Ee(i,Ne(r));import C from"react";import le from"cytoscape";import we from"cytoscape-dagre";import K from"lodash";var G={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,U=2Math.PIie,de=i=>{let{transactionInfo:r}=i;return"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(`
		/>
		`},ne=(i,r)=>r===0?0:r/i<re?Ure:r/iU,be=(i,r)=>{let{transactionStatus:s}=G;if(r\|\|!i)return L({stroke:s.default.stroke,strokeWidth:s.default.strokeWidth});{let y=Object.keys(i).reduce((f,k)=>f+i[k],0),T=ne(y,i.slow),v=ne(y,i.bad),A=-1(.75U-(T+v)),w=-1(.75U-v);return L({stroke:s.good.stroke,strokeWidth:s.good.strokeWidth})+L({stroke:s.slow.stroke,strokeWidth:s.slow.strokeWidth,strokeDashOffset:A,strokeDashArray:T})+L({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(p=>t===p.id))==null?void 0:n.shouldNotMerge)!=null&&d.call(n))}).reduce((t,n)=>t[n]?W(S({},t),{[n]:t[n]+1}):W(S({},t),{[n]:1}),{}),f=Object.entries(w).reduce((t,[n,d])=>{let p=S({},t);return d>1?p.multi.push(n):p.single.push(n),p},{single:[],multi:[]}),k=f.single.reduce((t,n)=>{let{source:d}=r.find(p=>p.target===n);return t[d]?t[d].push(n):t[d]=[n],t},{}),D=f.multi.reduce((t,n)=>{let d=r.filter(p=>p.target===n).map(p=>p.source).sort().toString();return t[d]?t[d].push(n):t[d]=[n],t},{}),R=t=>Object.entries(t).reduce((n,[d,p])=>{let u=S({},n);return p.forEach(h=>{let e=s.find(o=>o.id===h);u[d]?e!=null&&e.type&&u[d][e.type]?u[d][e.type].push(h):e!=null&&e.type&&(u[d][e.type]=[h]):e!=null&&e.type&&(u[d]={},u[d][e.type]=[h])}),u},{}),j=R(k),g=R(D),M=(()=>{let t=[...s],n=[...r];return Object.entries(j).forEach(([d,p])=>{Object.entries(p).forEach(([u,h])=>{var e;if(h.length>1){y.add(u);let o=`${d}_${u}_MergeSingleNodesByServerMap`,E=(e=t.find(l=>l.id===h[0]))==null?void 0:e.imgPath,[c,a]=K.partition(t,l=>!h.includes(l.id));t=[...c,{id:o,imgPath:E,type:u,label:`total: ${h.length}`,nodes:a}];let[m,b]=K.partition(n,l=>!h.includes(l.target));n=[...m,{source:d,target:o,id:`${d}_${u}_MergeSingleEdgesByServerMap`,edges:b}]}})}),{nodes:t,edges:n}})(),P=(()=>{let t=[...M.nodes],n=[...M.edges];return Object.entries(g).forEach(([d,p])=>{Object.entries(p).forEach(([u,h])=>{var e;if(h.length>1){y.add(u);let o=`${d}_${u}_MergeMultiNodesByServerMap`,E=(e=t.find(N=>N.id===h[0]))==null?void 0:e.imgPath,[c,a]=K.partition(t,N=>!h.includes(N.id));t=[...c,{id:o,imgPath:E,type:u,label:`total: ${h.length}`,nodes:a}];let m=d.split(","),[b,l]=K.partition(n,N=>!(m.includes(N.source)&&h.includes(N.target))),$=l.reduce((N,x,_)=>(N[x.source]?N[x.source].edges.push(x):N[x.source]={target:o,source:x.source,id:`${x.source}_${u}_MergeMultiEdgesByServerMap`,edges:[x]},S({},N)),{});n=[...b,...Object.values($)]}})}),{nodes:t,edges:n}})();return{nodes:[...P.nodes.map(t=>({data:W(S({},t),{imgArr:[t==null?void 0:t.imgPath,de(t)]})}))],edges:[...P.edges.map(t=>({data:S({},t)}))],mergeInfo:{types:Array.from(y)}}};import Te from"lodash";var ce=i=>Te.merge({},G,i),q=({cy:i,theme:r,edgeLabelRenderer:s,nodeLabelRenderer:y})=>{var T,v,A;return[{selector:"node",style:W(S({},(T=r.node)==null?void 0:T.default),{width:100,height:100,label:w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(y==null?void 0:y(f))\|\|(f==null?void 0:f.label)\|\|""},"background-image":w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return f==null?void 0:f.imgArr},"background-fit":"contain","background-offset-y":"-5px"})},{selector:"edge",style:W(S({},(v=r.edge)==null?void 0:v.default),{label:w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(s==null?void 0:s(f))\|\|""}})},{selector:"edge:loop",style:S({},(A=r.edge)==null?void 0:A.loop)}]};import{keyBy as xe}from"lodash";import{jsx as De}from"react/jsx-runtime";le.use(we);var ve=({data:i,customTheme:r={},baseNodeId:s,onClickNode:y,onClickEdge:T,onClickBackground:v,onDataMerged:A,renderNodeLabel:w,renderEdgeLabel:f,className:k,style:D,cy:R})=>{let j=C.useRef(null),g=C.useRef(),B=C.useRef(),M=ce(r),[J,P]=C.useState("");C.useEffect(()=>()=>{var e;(e=g==null?void 0:g.current)==null\|\|e.destroy()},[]),C.useEffect(()=>{var e,o;P(s),g.current&&((e=B.current)==null\|\|e.removeAllListeners(),(o=B.current)==null\|\|o.stop(),B.current=void 0,g.current.removeData(),g.current.removeAllListeners(),g.current.destroy(),g.current=void 0),g.current=le({zoom:1,minZoom:.1,maxZoom:3,wheelSensitivity:.2,container:j.current}),R==null\|\|R(g.current),g.current.style(q({cy:g.current,theme:M,edgeLabelRenderer:f,nodeLabelRenderer:w})),p()},[s]),C.useEffect(()=>{let e=g.current;e&&e.style(q({cy:e,theme:M,edgeLabelRenderer:f,nodeLabelRenderer:w}))},[w,f]),C.useEffect(()=>{if(i){let e=g.current;if(e){let{nodes:o,edges:E,mergeInfo:c}=ae(i),a;if(A==null\|\|A(c),e.batch(()=>{e.removeData(),e.data(xe([...o,...E],"data.id"));let m=e.nodes().map(l=>l.id()),b=o.map(({data:l})=>l.id);new Set([...m,...b]).forEach(l=>{let $=m.includes(l),N=b.includes(l),x=$&&!N,_=!$&&N;if(x){let O=e.getElementById(l);O.remove(),O.connectedEdges().remove()}else if(_){let{data:O}=o.find(({data:I})=>I.id===l),Y=E.filter(({data:I})=>I.source===l\|\|I.target===l);a=a?[...a,e.add({data:O})]:[e.add({data:O})],Y.forEach(({data:I})=>{let V=e.getElementById(I.source),Q=e.getElementById(I.target);V.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 m=e.getElementById(s),{x:b,y:l}=m.position(),{y1:$,y2:N}=m.boundingBox(),x;a.forEach(O=>{x=0;let Y=O.predecessors(),I=O.successors(),V=Y.contains(m);x=(V?Y:I).nodes().toArray().findIndex(H=>H.id()===s)+1;let ee=b+x(200+100)(V?1:-1),{y:ge}=O.position(),{h:F,y1:ue}=O.boundingBox(),me=F-(ge-ue)*2,te=e.nodes().filter(H=>{let z=H.same(O),{x:Z}=H.position(),pe=H.width(),he=Math.abs(ee-Z)<=pe;return!z&&he}),X;Math.random()>=.5?X=Math.min(...te.map(Z=>Z.position().y-50),l-50)-50-F:X=Math.max(...te.map(z=>z.boundingBox().y2),N)+50;let fe=(F-me)/2+X;O.position({x:ee,y:fe})});let _=e.getElementById(J);_.inside()?_.isNode()?u(_):h(_):e.getElementById(s).emit("tap")}}}},[i]);let t=e=>{y==null\|\|y(e)},n=e=>{T==null\|\|T(e)},d=e=>{v==null\|\|v(e)},p=C.useCallback(()=>{let e=g==null?void 0:g.current;e&&e.on("layoutready",()=>{u(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:c})=>{let a=c?"left":"programmatic",m={x:c==null?void 0:c.x,y:c==null?void 0:c.y};o===e?d({eventType:a,position:m}):o.isNode()?(u(o),t({eventType:a,position:m,data:o.data()}),P(o.id())):o.isEdge()&&(h(o),n({eventType:a,position:m,data:o.data()}),P(o.id()))}).on("cxttap",({target:o,renderedPosition:E})=>{let c="right",a={x:E.x,y:E.y};o===e?d({eventType:c,position:a}):o.isNode()?t({eventType:c,position:a,data:o.data()}):o.isEdge()&&n({eventType:c,position:a,data:o.data()})})},[y,T,v]),u=e=>{var E,c,a,m,b;let o=g.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((c=M.edge)==null?void 0:c.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.style((m=M.node)==null?void 0:m.highlight),e.connectedEdges().style((b=M.edge)==null?void 0:b.highlight)},h=e=>{var E,c,a,m,b,l;let o=g.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((c=M.edge)==null?void 0:c.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.connectedNodes().style({"border-color":(b=(m=M.node)==null?void 0:m.highlight)==null?void 0:b["border-color"]}),e.style((l=M.edge)==null?void 0:l.highlight)};return De("div",{style:S({width:"100%",height:"100%",overflow:"hidden"},D),className:k,ref:j})};export{ve as ServerMap};
		`},ne=(i,r)=>r===0?0:r/i<re?Ure:r/iU,be=(i,r)=>{let{transactionStatus:s}=G;if(r\|\|!i)return L({stroke:s.default.stroke,strokeWidth:s.default.strokeWidth});{let y=Object.keys(i).reduce((f,k)=>f+i[k],0),T=ne(y,i.slow),v=ne(y,i.bad),A=-1(.75U-(T+v)),w=-1(.75U-v);return L({stroke:s.good.stroke,strokeWidth:s.good.strokeWidth})+L({stroke:s.slow.stroke,strokeWidth:s.slow.strokeWidth,strokeDashOffset:A,strokeDashArray:T})+L({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(p=>t===p.id))==null?void 0:n.shouldNotMerge)!=null&&d.call(n))}).reduce((t,n)=>t[n]?W(S({},t),{[n]:t[n]+1}):W(S({},t),{[n]:1}),{}),f=Object.entries(w).reduce((t,[n,d])=>{let p=S({},t);return d>1?p.multi.push(n):p.single.push(n),p},{single:[],multi:[]}),k=f.single.reduce((t,n)=>{let{source:d}=r.find(p=>p.target===n);return t[d]?t[d].push(n):t[d]=[n],t},{}),D=f.multi.reduce((t,n)=>{let d=r.filter(p=>p.target===n).map(p=>p.source).sort().toString();return t[d]?t[d].push(n):t[d]=[n],t},{}),R=t=>Object.entries(t).reduce((n,[d,p])=>{let u=S({},n);return p.forEach(h=>{let e=s.find(o=>o.id===h);u[d]?e!=null&&e.type&&u[d][e.type]?u[d][e.type].push(h):e!=null&&e.type&&(u[d][e.type]=[h]):e!=null&&e.type&&(u[d]={},u[d][e.type]=[h])}),u},{}),j=R(k),g=R(D),M=(()=>{let t=[...s],n=[...r];return Object.entries(j).forEach(([d,p])=>{Object.entries(p).forEach(([u,h])=>{var e;if(h.length>1){y.add(u);let o=`${d}_${u}_MergeSingleNodesByServerMap`,E=(e=t.find(l=>l.id===h[0]))==null?void 0:e.imgPath,[c,a]=K.partition(t,l=>!h.includes(l.id));t=[...c,{id:o,imgPath:E,type:u,label:`total: ${h.length}`,nodes:a}];let[m,b]=K.partition(n,l=>!h.includes(l.target));n=[...m,{source:d,target:o,id:`${d}_${u}_MergeSingleEdgesByServerMap`,edges:b}]}})}),{nodes:t,edges:n}})(),P=(()=>{let t=[...M.nodes],n=[...M.edges];return Object.entries(g).forEach(([d,p])=>{Object.entries(p).forEach(([u,h])=>{var e;if(h.length>1){y.add(u);let o=`${d}_${u}_MergeMultiNodesByServerMap`,E=(e=t.find(N=>N.id===h[0]))==null?void 0:e.imgPath,[c,a]=K.partition(t,N=>!h.includes(N.id));t=[...c,{id:o,imgPath:E,type:u,label:`total: ${h.length}`,nodes:a}];let m=d.split(","),[b,l]=K.partition(n,N=>!(m.includes(N.source)&&h.includes(N.target))),$=l.reduce((N,x,_)=>(N[x.source]?N[x.source].edges.push(x):N[x.source]={target:o,source:x.source,id:`${x.source}_${u}_MergeMultiEdgesByServerMap`,edges:[x]},S({},N)),{});n=[...b,...Object.values($)]}})}),{nodes:t,edges:n}})();return{nodes:[...P.nodes.map(t=>({data:W(S({},t),{imgArr:[t==null?void 0:t.imgPath,de(t)]})}))],edges:[...P.edges.map(t=>({data:S({},t)}))],mergeInfo:{types:Array.from(y)}}};import Te from"lodash";var ce=i=>Te.merge({},G,i),q=({cy:i,theme:r,edgeLabelRenderer:s,nodeLabelRenderer:y})=>{var T,v,A;return[{selector:"node",style:W(S({},(T=r.node)==null?void 0:T.default),{width:100,height:100,label:w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(y==null?void 0:y(f))\|\|(f==null?void 0:f.label)\|\|""},"background-image":w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return f==null?void 0:f.imgArr},"background-fit":"contain","background-offset-y":"-5px"})},{selector:"edge",style:W(S({},(v=r.edge)==null?void 0:v.default),{label:w=>{var k,D;let f=(D=i.data((k=w.data())==null?void 0:k.id))==null?void 0:D.data;return(s==null?void 0:s(f))\|\|""}})},{selector:"edge:loop",style:S({},(A=r.edge)==null?void 0:A.loop)}]};import{keyBy as xe}from"lodash";import{jsx as De}from"react/jsx-runtime";le.use(we);var ve=({data:i,customTheme:r={},baseNodeId:s,onClickNode:y,onClickEdge:T,onClickBackground:v,onDataMerged:A,renderNodeLabel:w,renderEdgeLabel:f,className:k,style:D,cy:R})=>{let j=C.useRef(null),g=C.useRef(),B=C.useRef(),M=ce(r),[J,P]=C.useState("");C.useEffect(()=>()=>{var e;(e=g==null?void 0:g.current)==null\|\|e.destroy()},[]),C.useEffect(()=>{var e,o;P(s),g.current&&((e=B.current)==null\|\|e.removeAllListeners(),(o=B.current)==null\|\|o.stop(),B.current=void 0,g.current.removeData(),g.current.removeAllListeners(),g.current.destroy(),g.current=void 0),g.current=le({zoom:1,minZoom:.1,maxZoom:3,wheelSensitivity:.2,container:j.current}),R==null\|\|R(g.current),g.current.style(q({cy:g.current,theme:M,edgeLabelRenderer:f,nodeLabelRenderer:w})),p()},[s]),C.useEffect(()=>{let e=g.current;e&&e.style(q({cy:e,theme:M,edgeLabelRenderer:f,nodeLabelRenderer:w}))},[w,f]),C.useEffect(()=>{if(i){let e=g.current;if(e){let{nodes:o,edges:E,mergeInfo:c}=ae(i),a;if(A==null\|\|A(c),e.batch(()=>{e.removeData(),e.data(xe([...o,...E],"data.id"));let m=e.nodes().map(l=>l.id()),b=o.map(({data:l})=>l.id);new Set([...m,...b]).forEach(l=>{let $=m.includes(l),N=b.includes(l),x=$&&!N,_=!$&&N;if(x){let O=e.getElementById(l);O.remove(),O.connectedEdges().remove()}else if(_){let{data:O}=o.find(({data:I})=>I.id===l),Y=E.filter(({data:I})=>I.source===l\|\|I.target===l);a=a?[...a,e.add({data:O})]:[e.add({data:O})],Y.forEach(({data:I})=>{let V=e.getElementById(I.source),Q=e.getElementById(I.target);V.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 m=e.getElementById(s),{x:b,y:l}=m.position(),{y1:$,y2:N}=m.boundingBox(),x;a.forEach(O=>{x=0;let Y=O.predecessors(),I=O.successors(),V=Y.contains(m);x=(V?Y:I).nodes().toArray().findIndex(H=>H.id()===s)+1;let ee=b+x(200+100)(V?1:-1),{y:ge}=O.position(),{h:F,y1:ue}=O.boundingBox(),me=F-(ge-ue)*2,te=e.nodes().filter(H=>{let z=H.same(O),{x:Z}=H.position(),pe=H.width(),he=Math.abs(ee-Z)<=pe;return!z&&he}),X;Math.random()>=.5?X=Math.min(...te.map(Z=>Z.position().y-50),l-50)-50-F:X=Math.max(...te.map(z=>z.boundingBox().y2),N)+50;let fe=(F-me)/2+X;O.position({x:ee,y:fe})});let _=e.getElementById(J);_.inside()?_.isNode()?u(_):h(_):e.getElementById(s).emit("tap")}}}},[i]);let t=e=>{y==null\|\|y(e)},n=e=>{T==null\|\|T(e)},d=e=>{v==null\|\|v(e)},p=C.useCallback(()=>{let e=g==null?void 0:g.current;e&&e.on("layoutready",()=>{let o=e.getElementById(s);o.emit("tap"),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:c})=>{let a=c?"left":"programmatic",m={x:c==null?void 0:c.x,y:c==null?void 0:c.y};o===e?d({eventType:a,position:m}):o.isNode()?(u(o),t({eventType:a,position:m,data:o.data()}),P(o.id())):o.isEdge()&&(h(o),n({eventType:a,position:m,data:o.data()}),P(o.id()))}).on("cxttap",({target:o,renderedPosition:E})=>{let c="right",a={x:E.x,y:E.y};o===e?d({eventType:c,position:a}):o.isNode()?t({eventType:c,position:a,data:o.data()}):o.isEdge()&&n({eventType:c,position:a,data:o.data()})})},[y,T,v]),u=e=>{var E,c,a,m,b;let o=g.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((c=M.edge)==null?void 0:c.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.style((m=M.node)==null?void 0:m.highlight),e.connectedEdges().style((b=M.edge)==null?void 0:b.highlight)},h=e=>{var E,c,a,m,b,l;let o=g.current;o.nodes().style((E=M.node)==null?void 0:E.default),o.edges().style((c=M.edge)==null?void 0:c.default),o.getElementById(s).style((a=M.node)==null?void 0:a.main),e.connectedNodes().style({"border-color":(b=(m=M.node)==null?void 0:m.highlight)==null?void 0:b["border-color"]}),e.style((l=M.edge)==null?void 0:l.highlight)};return De("div",{style:S({width:"100%",height:"100%",overflow:"hidden"},D),className:k,ref:j})};export{ve as ServerMap};

@pinpoint-fe/server-map - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics