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

Comparing version 0.0.4-rc.2 to 0.0.4-rc.3

dist/index.js

@@ -1,13 +0,13 @@
-import D from"react";import K from"cytoscape";import Z from"cytoscape-dagre";import $ from"lodash";var B={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 H=.05,L=47,W=2*Math.PI*L,V=g=>{let{transactionInfo:l}=g;return"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(`
+import x from"react";import F from"cytoscape";import q from"cytoscape-dagre";import W from"lodash";var O={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 _=.05,j=47,B=2*Math.PI*j,z=d=>{let{transactionInfo:g}=d;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">
-      ${X(l,!l)}
+      ${U(g,!g)}
     </svg>
-  `)},A=g=>{let{stroke:l,strokeWidth:i,strokeDashOffset:p=0,strokeDashArray:E="none"}=g;return`
-    <circle cx="50" cy="50" r="${L}"
+  `)},P=d=>{let{stroke:g,strokeWidth:i,strokeDashOffset:h=0,strokeDashArray:N="none"}=d;return`
+    <circle cx="50" cy="50" r="${j}"
       style="fill:none;
-      stroke:${l};
+      stroke:${g};
       stroke-width:${i};
-      stroke-dashoffset:${p};
-      stroke-dasharray:${E} 1000" 
+      stroke-dashoffset:${h};
+      stroke-dasharray:${N} 1000" 
     />
-  `},j=(g,l)=>l===0?0:l/g<H?W*H:l/g*W,X=(g,l)=>{let{transactionStatus:i}=B;if(l||!g)return A({stroke:i.default.stroke,strokeWidth:i.default.strokeWidth});{let p=Object.keys(g).reduce((m,h)=>m+g[h],0),E=j(p,g.slow),N=j(p,g.bad),w=-1*(.75*W-(E+N)),f=-1*(.75*W-N);return A({stroke:i.good.stroke,strokeWidth:i.good.strokeWidth})+A({stroke:i.slow.stroke,strokeWidth:i.slow.strokeWidth,strokeDashOffset:w,strokeDashArray:E})+A({stroke:i.bad.stroke,strokeWidth:i.bad.strokeWidth,strokeDashOffset:f,strokeDashArray:N})}};var z=g=>{let{edges:l,nodes:i}=g,w=l.map(o=>o.target).filter(o=>!l.some(s=>s.source===o)).filter(o=>{var s,d;return!((d=(s=i.find(e=>o===e.id))==null?void 0:s.shouldNotMerge)!=null&&d.call(s))}).reduce((o,s)=>o[s]?{...o,[s]:o[s]+1}:{...o,[s]:1},{}),f=Object.entries(w).reduce((o,[s,d])=>{let e={...o};return d>1?e.multi.push(s):e.single.push(s),e},{single:[],multi:[]}),m=f.single.reduce((o,s)=>{let{source:d}=l.find(e=>e.target===s);return o[d]?o[d].push(s):o[d]=[s],o},{}),h=f.multi.reduce((o,s)=>{let d=l.filter(e=>e.target===s).map(e=>e.source).sort().toString();return o[d]?o[d].push(s):o[d]=[s],o},{}),y=o=>Object.entries(o).reduce((s,[d,e])=>{let t={...s};return e.forEach(n=>{let r=i.find(a=>a.id===n);t[d]?(r==null?void 0:r.type)&&t[d][r.type]?t[d][r.type].push(n):r!=null&&r.type&&(t[d][r.type]=[n]):r!=null&&r.type&&(t[d]={},t[d][r.type]=[n])}),t},{}),c=y(m),k=y(h),O=(()=>{let o=[...i],s=[...l];return Object.entries(c).forEach(([d,e])=>{Object.entries(e).forEach(([t,n])=>{var r;if(n.length>1){let a=`${d}_${t}_MergeSingleNodesByServerMap`,M=(r=o.find(v=>v.id===n[0]))==null?void 0:r.imgPath,[S,x]=$.partition(o,v=>!n.includes(v.id));o=[...S,{id:a,imgPath:M,label:`total: ${n.length}`,nodes:x}];let[u,b]=$.partition(s,v=>!n.includes(v.target));s=[...u,{source:d,target:a,id:`${d}_${t}_MergeSingleEdgesByServerMap`,edges:b}]}})}),{nodes:o,edges:s}})(),P=(()=>{let o=[...O.nodes],s=[...O.edges];return Object.entries(k).forEach(([d,e])=>{Object.entries(e).forEach(([t,n])=>{var r;if(n.length>1){let a=`${d}_${t}_MergeMultiNodesByServerMap`,M=(r=o.find(T=>T.id===n[0]))==null?void 0:r.imgPath,[S,x]=$.partition(o,T=>!n.includes(T.id));o=[...S,{id:a,imgPath:M,label:`total: ${n.length}`,nodes:x}];let u=d.split(","),[b,v]=$.partition(s,T=>!(u.includes(T.source)&&n.includes(T.target))),U=v.reduce((T,C,Q)=>(T[C.source]?T[C.source].edges.push(C):T[C.source]={target:a,source:C.source,id:`${C.source}_${t}_MergeMultiEdgesByServerMap`,edges:[C]},{...T}),{});s=[...b,...Object.values(U)]}})}),{nodes:o,edges:s}})();return[...P.nodes.map(o=>({data:{...o,imgArr:[o==null?void 0:o.imgPath,V(o)]}})),...P.edges.map(o=>({data:{...o}}))]};import Y from"lodash";var R=g=>Y.merge({},B,g),_=({cy:g,theme:l,edgeLabelRenderer:i,nodeLabelRenderer:p})=>{var E,N,w;return[{selector:"node",style:{...(E=l.node)==null?void 0:E.default,width:100,height:100,label:f=>{var h,y;let m=(y=g.data((h=f.data())==null?void 0:h.id))==null?void 0:y.data;return(p==null?void 0:p(m))||(m==null?void 0:m.label)||""},"background-image":f=>{var h,y;let m=(y=g.data((h=f.data())==null?void 0:h.id))==null?void 0:y.data;return m==null?void 0:m.imgArr},"background-fit":"contain","background-offset-y":"-5px"}},{selector:"edge",style:{...(N=l.edge)==null?void 0:N.default,label:f=>{var h,y;let m=(y=g.data((h=f.data())==null?void 0:h.id))==null?void 0:y.data;return(i==null?void 0:i(m))||""}}},{selector:"edge:loop",style:{...(w=l.edge)==null?void 0:w.loop}}]};import{keyBy as F}from"lodash";import{jsx as J}from"react/jsx-runtime";K.use(Z);var q=({data:g,customTheme:l={},baseNodeId:i,onClickNode:p,onClickEdge:E,onClickBackground:N,renderNodeLabel:w,renderEdgeLabel:f,className:m,style:h})=>{let y=D.useRef(null),c=D.useRef(),k=R(l);D.useEffect(()=>()=>{var e;(e=c==null?void 0:c.current)==null||e.destroy()},[]),D.useEffect(()=>{let e=c.current;e&&e.center(e.getElementById(i))},[i]),D.useEffect(()=>{o()},[i,p,E,N]),D.useEffect(()=>{let e=c.current;e&&e.style(_({cy:e,theme:k,edgeLabelRenderer:f,nodeLabelRenderer:w}))},[w,f]),D.useEffect(()=>{if(g){let e=c.current,t=z(g);if(!e)console.time(),c.current=K({zoom:1,minZoom:.1,maxZoom:3,wheelSensitivity:.2,container:y.current}),c.current.style(_({cy:c.current,theme:k,edgeLabelRenderer:f,nodeLabelRenderer:w})),c.current.data(F(t,"data.id")),c.current.add(t),o(),G(!0),console.timeEnd();else{console.time();let n=!1,r={};e.batch(()=>{e.removeData(),e.data(F(t,"data.id"));let a=e.nodes(),M=e.edges();a.forEach(u=>{r[u.id()]={...u.position()};let b=u.data();e.data()[b.id]||u.remove()}),M.forEach(u=>{let b=u.data();e.data()[b.id]||u.remove()}),n=!a.some(u=>u.data().id===i);let S=e.nodes(),x=e.edges();t.forEach(({data:u})=>{u.source?x.some(b=>b.data().id===u.id)||e.add({data:u}):S.some(b=>b.data().id===u.id)||e.add({data:u})})}),G(n),e.batch(()=>{e.nodes().forEach(a=>{let M=a.id();r[M]&&a.position(r[M])})}),console.timeEnd()}}},[g,i]);let G=e=>{let t=c==null?void 0:c.current;if(t==null||t.layout({name:"dagre",fit:!1,rankDir:"LR",rankSep:200}).run(),e){let n=t==null?void 0:t.getElementById(i);t==null||t.center(n)}},O=e=>{p==null||p(e)},I=e=>{E==null||E(e)},P=e=>{N==null||N(e)},o=()=>{let e=c==null?void 0:c.current;e&&e.on("layoutready",()=>{s(e.getElementById(i))}).on("tap",({target:t,originalEvent:n})=>{let r="left",a={x:n.clientX,y:n.clientY};t===e?P({eventType:r,position:a}):t.isNode()?(s(t),O({eventType:r,position:a,data:t.data()})):t.isEdge()&&(d(t),I({eventType:r,position:a,data:t.data()}))}).on("cxttap",({target:t,originalEvent:n})=>{let r="right",a={x:n.clientX,y:n.clientY};t===e?P({eventType:r,position:a}):t.isNode()?O({eventType:r,position:a,data:t.data()}):t.isEdge()&&I({eventType:r,position:a,data:t.data()})})},s=e=>{var n,r,a,M,S;let t=c.current;t.nodes().style((n=k.node)==null?void 0:n.default),t.edges().style((r=k.edge)==null?void 0:r.default),t.getElementById(i).style((a=k.node)==null?void 0:a.main),e.style((M=k.node)==null?void 0:M.highlight),e.connectedEdges().style((S=k.edge)==null?void 0:S.highlight)},d=e=>{var n,r,a,M,S,x;let t=c.current;t.nodes().style((n=k.node)==null?void 0:n.default),t.edges().style((r=k.edge)==null?void 0:r.default),t.getElementById(i).style((a=k.node)==null?void 0:a.main),e.connectedNodes().style({"border-color":(S=(M=k.node)==null?void 0:M.highlight)==null?void 0:S["border-color"]}),e.style((x=k.edge)==null?void 0:x.highlight)};return J("div",{style:{width:"100%",height:"100%",overflow:"hidden",...h},className:m,ref:y})};export{q as ServerMap};
+  `},H=(d,g)=>g===0?0:g/d<_?B*_:g/d*B,U=(d,g)=>{let{transactionStatus:i}=O;if(g||!d)return P({stroke:i.default.stroke,strokeWidth:i.default.strokeWidth});{let h=Object.keys(d).reduce((m,k)=>m+d[k],0),N=H(h,d.slow),S=H(h,d.bad),w=-1*(.75*B-(N+S)),y=-1*(.75*B-S);return P({stroke:i.good.stroke,strokeWidth:i.good.strokeWidth})+P({stroke:i.slow.stroke,strokeWidth:i.slow.strokeWidth,strokeDashOffset:w,strokeDashArray:N})+P({stroke:i.bad.stroke,strokeWidth:i.bad.strokeWidth,strokeDashOffset:y,strokeDashArray:S})}};var L=d=>{let{edges:g,nodes:i}=d,w=g.map(r=>r.target).filter(r=>!g.some(o=>o.source===r)).filter(r=>{var o,n;return!((n=(o=i.find(u=>r===u.id))==null?void 0:o.shouldNotMerge)!=null&&n.call(o))}).reduce((r,o)=>r[o]?{...r,[o]:r[o]+1}:{...r,[o]:1},{}),y=Object.entries(w).reduce((r,[o,n])=>{let u={...r};return n>1?u.multi.push(o):u.single.push(o),u},{single:[],multi:[]}),m=y.single.reduce((r,o)=>{let{source:n}=g.find(u=>u.target===o);return r[n]?r[n].push(o):r[n]=[o],r},{}),k=y.multi.reduce((r,o)=>{let n=g.filter(u=>u.target===o).map(u=>u.source).sort().toString();return r[n]?r[n].push(o):r[n]=[o],r},{}),M=r=>Object.entries(r).reduce((o,[n,u])=>{let e={...o};return u.forEach(t=>{let s=i.find(a=>a.id===t);e[n]?(s==null?void 0:s.type)&&e[n][s.type]?e[n][s.type].push(t):s!=null&&s.type&&(e[n][s.type]=[t]):s!=null&&s.type&&(e[n]={},e[n][s.type]=[t])}),e},{}),$=M(m),l=M(k),p=(()=>{let r=[...i],o=[...g];return Object.entries($).forEach(([n,u])=>{Object.entries(u).forEach(([e,t])=>{var s;if(t.length>1){let a=`${n}_${e}_MergeSingleNodesByServerMap`,f=(s=r.find(C=>C.id===t[0]))==null?void 0:s.imgPath,[b,c]=W.partition(r,C=>!t.includes(C.id));r=[...b,{id:a,imgPath:f,label:`total: ${t.length}`,nodes:c}];let[E,G]=W.partition(o,C=>!t.includes(C.target));o=[...E,{source:n,target:a,id:`${n}_${e}_MergeSingleEdgesByServerMap`,edges:G}]}})}),{nodes:r,edges:o}})(),A=(()=>{let r=[...p.nodes],o=[...p.edges];return Object.entries(l).forEach(([n,u])=>{Object.entries(u).forEach(([e,t])=>{var s;if(t.length>1){let a=`${n}_${e}_MergeMultiNodesByServerMap`,f=(s=r.find(T=>T.id===t[0]))==null?void 0:s.imgPath,[b,c]=W.partition(r,T=>!t.includes(T.id));r=[...b,{id:a,imgPath:f,label:`total: ${t.length}`,nodes:c}];let E=n.split(","),[G,C]=W.partition(o,T=>!(E.includes(T.source)&&t.includes(T.target))),K=C.reduce((T,D,Y)=>(T[D.source]?T[D.source].edges.push(D):T[D.source]={target:a,source:D.source,id:`${D.source}_${e}_MergeMultiEdgesByServerMap`,edges:[D]},{...T}),{});o=[...G,...Object.values(K)]}})}),{nodes:r,edges:o}})();return[...A.nodes.map(r=>({data:{...r,imgArr:[r==null?void 0:r.imgPath,z(r)]}})),...A.edges.map(r=>({data:{...r}}))]};import Z from"lodash";var V=d=>Z.merge({},O,d),R=({cy:d,theme:g,edgeLabelRenderer:i,nodeLabelRenderer:h})=>{var N,S,w;return[{selector:"node",style:{...(N=g.node)==null?void 0:N.default,width:100,height:100,label:y=>{var k,M;let m=(M=d.data((k=y.data())==null?void 0:k.id))==null?void 0:M.data;return(h==null?void 0:h(m))||(m==null?void 0:m.label)||""},"background-image":y=>{var k,M;let m=(M=d.data((k=y.data())==null?void 0:k.id))==null?void 0:M.data;return m==null?void 0:m.imgArr},"background-fit":"contain","background-offset-y":"-5px"}},{selector:"edge",style:{...(S=g.edge)==null?void 0:S.default,label:y=>{var k,M;let m=(M=d.data((k=y.data())==null?void 0:k.id))==null?void 0:M.data;return(i==null?void 0:i(m))||""}}},{selector:"edge:loop",style:{...(w=g.edge)==null?void 0:w.loop}}]};import{keyBy as J}from"lodash";import{jsx as X}from"react/jsx-runtime";F.use(q);var Q=({data:d,customTheme:g={},baseNodeId:i,onClickNode:h,onClickEdge:N,onClickBackground:S,renderNodeLabel:w,renderEdgeLabel:y,className:m,style:k})=>{let M=x.useRef(null),$=x.useRef(),l=x.useRef(),v=x.useRef(),p=V(g);x.useEffect(()=>()=>{var e;(e=l==null?void 0:l.current)==null||e.destroy()},[]),x.useEffect(()=>{var e,t;$.current=i,l.current&&((e=v.current)==null||e.removeAllListeners(),(t=v.current)==null||t.stop(),v.current=void 0,l.current.removeData(),l.current.removeAllListeners(),l.current.destroy(),l.current=void 0),l.current=F({zoom:1,minZoom:.1,maxZoom:3,wheelSensitivity:.2,container:M.current}),l.current.style(R({cy:l.current,theme:p,edgeLabelRenderer:y,nodeLabelRenderer:w})),o()},[i]),x.useEffect(()=>{let e=l.current;e&&e.style(R({cy:e,theme:p,edgeLabelRenderer:y,nodeLabelRenderer:w}))},[w,y]),x.useEffect(()=>{if(d){let e=l.current;if(e){let t=L(d);console.time(),e.batch(()=>{e.removeData(),e.data(J(t,"data.id"));let s=e.nodes(),a=e.edges();s.forEach(c=>{let E=c.data();e.data()[E.id]||c.remove()}),a.forEach(c=>{let E=c.data();e.data()[E.id]||c.remove()});let f=e.nodes(),b=e.edges();t.forEach(({data:c})=>{c.source?b.some(E=>E.data().id===c.id)||e.add({data:c}):f.some(E=>E.data().id===c.id)||e.add({data:c})})}),v.current||(v.current=e==null?void 0:e.layout({name:"dagre",fit:!1,rankDir:"LR",rankSep:200}),v.current.run()),console.timeEnd()}}},[d]);let I=e=>{h==null||h(e)},A=e=>{N==null||N(e)},r=e=>{S==null||S(e)},o=x.useCallback(()=>{let e=l==null?void 0:l.current;e&&e.on("layoutready",()=>{n(e.getElementById(i));let t=e.getElementById(i);e.resize(),e.center(t)}).on("tap",({target:t,originalEvent:s})=>{let a="left",f={x:s.x,y:s.y};t===e?r({eventType:a,position:f}):t.isNode()?(n(t),I({eventType:a,position:f,data:t.data()})):t.isEdge()&&(u(t),A({eventType:a,position:f,data:t.data()}))}).on("cxttap",({target:t,originalEvent:s})=>{let a="right",f={x:s.x,y:s.y};t===e?r({eventType:a,position:f}):t.isNode()?I({eventType:a,position:f,data:t.data()}):t.isEdge()&&A({eventType:a,position:f,data:t.data()})})},[h,N,S]),n=e=>{var s,a,f,b,c;let t=l.current;t.nodes().style((s=p.node)==null?void 0:s.default),t.edges().style((a=p.edge)==null?void 0:a.default),t.getElementById(i).style((f=p.node)==null?void 0:f.main),e.style((b=p.node)==null?void 0:b.highlight),e.connectedEdges().style((c=p.edge)==null?void 0:c.highlight)},u=e=>{var s,a,f,b,c,E;let t=l.current;t.nodes().style((s=p.node)==null?void 0:s.default),t.edges().style((a=p.edge)==null?void 0:a.default),t.getElementById(i).style((f=p.node)==null?void 0:f.main),e.connectedNodes().style({"border-color":(c=(b=p.node)==null?void 0:b.highlight)==null?void 0:c["border-color"]}),e.style((E=p.edge)==null?void 0:E.highlight)};return X("div",{style:{width:"100%",height:"100%",overflow:"hidden",...k},className:m,ref:M})};export{Q as ServerMap};

package.json

 {
   "name": "@pinpoint-fe/server-map",
-  "version": "0.0.4-rc.2",
+  "version": "0.0.4-rc.3",
   "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",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

23550

decreased by-0.84%

No dependency changes