Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@pinpoint-fe/server-map

Package Overview
Dependencies
Maintainers
2
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.0.3 to 0.0.4-rc.1

8

dist/index.d.ts

@@ -13,2 +13,3 @@ import React from 'react';

bad: number;
[key: string]: any;
};

@@ -21,2 +22,5 @@ shouldNotMerge?: () => boolean;

target: string;
transactionInfo?: {
[key: string]: any;
};
}

@@ -30,3 +34,3 @@ interface MergedNode extends Node {

type ServerMapTheme = {
declare type ServerMapTheme = {
transactionStatus?: {

@@ -62,3 +66,3 @@ default?: {

type ClickEventHandler<T> = (param: {
declare type ClickEventHandler<T> = (param: {
data?: T;

@@ -65,0 +69,0 @@ eventType: 'right' | 'left';

@@ -1,13 +0,13 @@

var te=Object.defineProperty,re=Object.defineProperties;var oe=Object.getOwnPropertyDescriptors;var F=Object.getOwnPropertySymbols;var se=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable;var K=(o,n,i)=>n in o?te(o,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[n]=i,h=(o,n)=>{for(var i in n||(n={}))se.call(n,i)&&K(o,i,n[i]);if(F)for(var i of F(n))ne.call(n,i)&&K(o,i,n[i]);return o},b=(o,n)=>re(o,oe(n));import B from"react";import ee from"cytoscape";import ae from"cytoscape-dagre";import _ from"lodash";var I={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 U=.05,Y=47,G=2*Math.PI*Y,Z=o=>{let{transactionInfo:n}=o;return"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(`
import O 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(`
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink">
${ie(n,!1)}
${X(l,!1)}
</svg>
`)},$=o=>{let{stroke:n,strokeWidth:i,strokeDashOffset:f=0,strokeDashArray:y="none"}=o;return`
<circle cx="50" cy="50" r="${Y}"
`)},A=g=>{let{stroke:l,strokeWidth:i,strokeDashOffset:m=0,strokeDashArray:E="none"}=g;return`
<circle cx="50" cy="50" r="${L}"
style="fill:none;
stroke:${n};
stroke:${l};
stroke-width:${i};
stroke-dashoffset:${f};
stroke-dasharray:${y} 1000"
stroke-dashoffset:${m};
stroke-dasharray:${E} 1000"
/>
`},X=(o,n)=>n===0?0:n/o<U?G*U:n/o*G,ie=(o,n)=>{let{transactionStatus:i}=I;if(n||!o)return $({stroke:i.default.stroke,strokeWidth:i.default.strokeWidth});{let f=Object.keys(o).reduce((O,P)=>O+o[P],0),y=X(f,o.slow),M=X(f,o.bad),k=-1*(.75*G-(y+M)),T=-1*(.75*G-M);return $({stroke:i.good.stroke,strokeWidth:i.good.strokeWidth})+$({stroke:i.slow.stroke,strokeWidth:i.slow.strokeWidth,strokeDashOffset:k,strokeDashArray:y})+$({stroke:i.bad.stroke,strokeWidth:i.bad.strokeWidth,strokeDashOffset:T,strokeDashArray:M})}};var q=o=>{let{edges:n,nodes:i}=o,k=n.map(e=>e.target).filter(e=>!n.some(s=>s.source===e)).filter(e=>{var s,d;return!((d=(s=i.find(g=>e===g.id))==null?void 0:s.shouldNotMerge)!=null&&d.call(s))}).reduce((e,s)=>e[s]?b(h({},e),{[s]:e[s]+1}):b(h({},e),{[s]:1}),{}),T=Object.entries(k).reduce((e,[s,d])=>{let g=h({},e);return d>1?g.multi.push(s):g.single.push(s),g},{single:[],multi:[]}),O=T.single.reduce((e,s)=>{let{source:d}=n.find(g=>g.target===s);return e[d]?e[d].push(s):e[d]=[s],e},{}),P=T.multi.reduce((e,s)=>{let d=n.filter(g=>g.target===s).map(g=>g.source).sort().toString();return e[d]?e[d].push(s):e[d]=[s],e},{}),w=e=>Object.entries(e).reduce((s,[d,g])=>{let r=h({},s);return g.forEach(a=>{let t=i.find(c=>c.id===a);r[d]?t!=null&&t.type&&r[d][t.type]?r[d][t.type].push(a):t!=null&&t.type&&(r[d][t.type]=[a]):t!=null&&t.type&&(r[d]={},r[d][t.type]=[a])}),r},{}),m=w(O),x=w(P),l=(()=>{let e=[...i],s=[...n];return Object.entries(m).forEach(([d,g])=>{Object.entries(g).forEach(([r,a])=>{var t;if(a.length>1){let c=`${d}_${r}_MergeSingleNodesByServerMap`,u=(t=e.find(S=>S.id===a[0]))==null?void 0:t.imgPath,[N,C]=_.partition(e,S=>!a.includes(S.id));e=[...N,{id:c,imgPath:u,label:`total: ${a.length}`,nodes:C}];let[v,D]=_.partition(s,S=>!a.includes(S.target));s=[...v,{source:d,target:c,id:`${d}_${r}_MergeSingleEdgesByServerMap`,edges:D}]}})}),{nodes:e,edges:s}})(),A=(()=>{let e=[...l.nodes],s=[...l.edges];return Object.entries(x).forEach(([d,g])=>{Object.entries(g).forEach(([r,a])=>{var t;if(a.length>1){let c=`${d}_${r}_MergeMultiNodesByServerMap`,u=(t=e.find(p=>p.id===a[0]))==null?void 0:t.imgPath,[N,C]=_.partition(e,p=>!a.includes(p.id));e=[...N,{id:c,imgPath:u,label:`total: ${a.length}`,nodes:C}];let v=d.split(","),[D,S]=_.partition(s,p=>!(v.includes(p.source)&&a.includes(p.target))),W=S.reduce((p,E,H)=>(p[E.source]?p[E.source].edges.push(E):p[E.source]={target:c,source:E.source,id:`${E.source}_${r}_MergeMultiEdgesByServerMap`,edges:[E]},h({},p)),{});s=[...D,...Object.values(W)]}})}),{nodes:e,edges:s}})();return[...A.nodes.map(e=>({data:b(h({},e),{imgArr:[e==null?void 0:e.imgPath,Z(e)]})})),...A.edges.map(e=>({data:h({},e)}))]};import de from"lodash";var J=o=>de.merge(I,o),Q=({theme:o,edgeLabelRenderer:n,nodeLabelRenderer:i})=>{var f,y,M;return[{selector:"node",style:b(h({},(f=o.node)==null?void 0:f.default),{width:100,height:100,label:k=>(i==null?void 0:i(k.data()))||k.data("label"),"background-image":k=>k.data("imgArr"),"background-fit":"contain","background-offset-y":"-5px"})},{selector:"edge",style:b(h({},(y=o.edge)==null?void 0:y.default),{label:k=>(n==null?void 0:n(k.data()))||""})},{selector:"edge:loop",style:h({},(M=o.edge)==null?void 0:M.loop)}]};import{jsx as le}from"react/jsx-runtime";var ge=({data:o,customTheme:n={},baseNodeId:i,onClickNode:f,onClickEdge:y,onClickBackground:M,renderNodeLabel:k,renderEdgeLabel:T,className:O,style:P})=>{let w=B.useRef(null),m=B.useRef(),x=B.useRef(),L=q(o),l=J(n),j=Q({theme:l,edgeLabelRenderer:T,nodeLabelRenderer:k}),A=()=>{m.current=ee({zoom:1,minZoom:.1,maxZoom:3,wheelSensitivity:.2,container:w.current,style:[...j]})};B.useEffect(()=>{if(w.current){try{m.current||(ee.use(ae),A())}catch(r){console.error(r)}return()=>{m.current&&m.current.destroy()}}},[]),B.useEffect(()=>{var r;m.current&&((r=o==null?void 0:o.nodes)==null?void 0:r.length)>0&&(x.current&&(x.current.stop(),m.current.destroy()),A(),m.current.add(L),g(),x.current=m.current.elements().makeLayout({name:"dagre",fit:!1,rankDir:"LR",rankSep:200}),x.current.run())},[o]);let e=r=>{f==null||f(r)},s=r=>{y==null||y(r)},d=r=>{M==null||M(r)},g=()=>{let r=m==null?void 0:m.current;if(r){let a=r.getElementById(i);r.on("layoutready",()=>{var t,c,u;a.style((t=l.node)==null?void 0:t.main),a.style((c=l.node)==null?void 0:c.highlight),a.connectedEdges().style((u=l.edge)==null?void 0:u.highlight),r.center(a)}).on("tap",({target:t,originalEvent:c})=>{var C,v,D,S,W,p,E,H,z,R,V;let u="left",N={x:c.clientX,y:c.clientY};t===r?d({eventType:u,position:N}):t.isNode()?(r.nodes().style((C=l.node)==null?void 0:C.default),r.edges().style((v=l.edge)==null?void 0:v.default),r.getElementById(i).style((D=l.node)==null?void 0:D.main),t.style((S=l.node)==null?void 0:S.highlight),t.connectedEdges().style((W=l.edge)==null?void 0:W.highlight),e({eventType:u,position:N,data:t.data()})):t.isEdge()&&(r.nodes().style((p=l.node)==null?void 0:p.default),r.edges().style((E=l.edge)==null?void 0:E.default),r.getElementById(i).style((H=l.node)==null?void 0:H.main),t.connectedNodes().style({"border-color":(R=(z=l.node)==null?void 0:z.highlight)==null?void 0:R["border-color"]}),t.style((V=l.edge)==null?void 0:V.highlight),s({eventType:u,position:N,data:t.data()}))}).on("cxttap",({target:t,originalEvent:c})=>{let u="right",N={x:c.clientX,y:c.clientY};t===r?d({eventType:u,position:N}):t.isNode()?e({eventType:u,position:N,data:t.data()}):t.isEdge()&&s({eventType:u,position:N,data:t.data()})})}};return le("div",{style:h({width:"100%",height:"100%",overflow:"hidden"},P),className:O,ref:w})};export{ge as ServerMap};
`},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 m=Object.keys(g).reduce((f,h)=>f+g[h],0),E=j(m,g.slow),N=j(m,g.bad),x=-1*(.75*W-(E+N)),p=-1*(.75*W-N);return A({stroke:i.good.stroke,strokeWidth:i.good.strokeWidth})+A({stroke:i.slow.stroke,strokeWidth:i.slow.strokeWidth,strokeDashOffset:x,strokeDashArray:E})+A({stroke:i.bad.stroke,strokeWidth:i.bad.strokeWidth,strokeDashOffset:p,strokeDashArray:N})}};var z=g=>{let{edges:l,nodes:i}=g,x=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},{}),p=Object.entries(x).reduce((o,[s,d])=>{let e={...o};return d>1?e.multi.push(s):e.single.push(s),e},{single:[],multi:[]}),f=p.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=p.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(f),k=y(h),P=(()=>{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(T=>T.id===n[0]))==null?void 0:r.imgPath,[S,v]=$.partition(o,T=>!n.includes(T.id));o=[...S,{id:a,imgPath:M,label:`total: ${n.length}`,nodes:v}];let[u,b]=$.partition(s,T=>!n.includes(T.target));s=[...u,{source:d,target:a,id:`${d}_${t}_MergeSingleEdgesByServerMap`,edges:b}]}})}),{nodes:o,edges:s}})(),D=(()=>{let o=[...P.nodes],s=[...P.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(w=>w.id===n[0]))==null?void 0:r.imgPath,[S,v]=$.partition(o,w=>!n.includes(w.id));o=[...S,{id:a,imgPath:M,label:`total: ${n.length}`,nodes:v}];let u=d.split(","),[b,T]=$.partition(s,w=>!(u.includes(w.source)&&n.includes(w.target))),U=T.reduce((w,C,Q)=>(w[C.source]?w[C.source].edges.push(C):w[C.source]={target:a,source:C.source,id:`${C.source}_${t}_MergeMultiEdgesByServerMap`,edges:[C]},{...w}),{});s=[...b,...Object.values(U)]}})}),{nodes:o,edges:s}})();return[...D.nodes.map(o=>({data:{...o,imgArr:[o==null?void 0:o.imgPath,V(o)]}})),...D.edges.map(o=>({data:{...o}}))]};import Y from"lodash";var R=g=>Y.merge({},B,g),_=({cy:g,theme:l,edgeLabelRenderer:i,nodeLabelRenderer:m})=>{var E,N,x;return[{selector:"node",style:{...(E=l.node)==null?void 0:E.default,width:100,height:100,label:p=>{var h,y;let f=(y=g.data((h=p.data())==null?void 0:h.id))==null?void 0:y.data;return(m==null?void 0:m(f))||(f==null?void 0:f.label)},"background-image":p=>{var h,y;let f=(y=g.data((h=p.data())==null?void 0:h.id))==null?void 0:y.data;return f==null?void 0:f.imgArr},"background-fit":"contain","background-offset-y":"-5px"}},{selector:"edge",style:{...(N=l.edge)==null?void 0:N.default,label:p=>{var h,y;let f=(y=g.data((h=p.data())==null?void 0:h.id))==null?void 0:y.data;return(i==null?void 0:i(f))||""}}},{selector:"edge:loop",style:{...(x=l.edge)==null?void 0:x.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:m,onClickEdge:E,onClickBackground:N,renderNodeLabel:x,renderEdgeLabel:p,className:f,style:h})=>{let y=O.useRef(null),c=O.useRef(),k=R(l);O.useEffect(()=>()=>{var e;(e=c==null?void 0:c.current)==null||e.destroy()},[]),O.useEffect(()=>{let e=c.current;e&&e.center(e.getElementById(i))},[i]),O.useEffect(()=>{o()},[i,m,E,N]),O.useEffect(()=>{let e=c.current;e&&e.style(_({cy:e,theme:k,edgeLabelRenderer:p,nodeLabelRenderer:x}))},[x,p]),O.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:p,nodeLabelRenderer:x})),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.data(F(t,"data.id"));let a=e.nodes(),M=e.edges();a.forEach(u=>{r[u.id()]={...u.position()};let b=u.data();g.nodes.find(T=>T.id===b.id)||u.remove()}),M.forEach(u=>{let b=u.data();g.edges.find(T=>T.id===b.id)||u.remove()}),n=!a.some(u=>u.data().id===i);let S=e.nodes(),v=e.edges();t.forEach(({data:u})=>{u.source?v.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.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)}},P=e=>{m==null||m(e)},I=e=>{E==null||E(e)},D=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?D({eventType:r,position:a}):t.isNode()?(s(t),P({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?D({eventType:r,position:a}):t.isNode()?P({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,v;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((v=k.edge)==null?void 0:v.highlight)};return J("div",{style:{width:"100%",height:"100%",overflow:"hidden",...h},className:f,ref:y})};export{q as ServerMap};
{
"name": "@pinpoint-fe/server-map",
"version": "0.0.3",
"version": "0.0.4-rc.1",
"description": "Open-source network-map library, specifically for application topology, written in React.js",
"repository": "https://github.com/pinpoint-apm/pinpoint/blob/frontend-v3/web/src/main/web-frontend/packages/server-map/README.md",
"repository": "https://github.com/pinpoint-apm/pinpoint/blob/frontend-v3/web-frontend/src/main/v3/packages/server-map/README.md",
"author": "NAVER",

@@ -30,9 +30,8 @@ "license": "Apache-2.0",

"dependencies": {
"cytoscape": "^3.22.1",
"cytoscape-dagre": "^2.4.0",
"cytoscape": "^3.24.0",
"cytoscape-dagre": "^2.5.0",
"date-fns": "^2.28.0",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.3.1"
"react-cytoscapejs": "^2.0.0"
},

@@ -54,3 +53,3 @@ "devDependencies": {

"@testing-library/user-event": "^14.2.1",
"@types/cytoscape": "^3.19.7",
"@types/cytoscape": "^3.19.9",
"@types/cytoscape-dagre": "^2.3.0",

@@ -68,2 +67,2 @@ "@types/jest": "^28.1.4",

}
}
}

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc