@parca/profile 0.16.59 → 0.16.60

package/dist/styles.css

@@ -1 +1 @@
-/*! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.right-0{right:0}.z-50{z-index:50}.z-10{z-index:10}.m-auto{margin:auto}.m-0{margin:0}.m-2{margin:.5rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-20{margin-bottom:5rem;margin-top:5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mr-3{margin-right:.75rem}.ml-auto{margin-left:auto}.ml-2{margin-left:.5rem}.mr-6{margin-right:1.5rem}.mt-2{margin-top:.5rem}.mt-1{margin-top:.25rem}.mb-2{margin-bottom:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.h-36{height:9rem}.h-1{height:.25rem}.h-4{height:1rem}.max-h-\[400px\]{max-height:400px}.w-full{width:100%}.w-2\/5{width:40%}.w-auto{width:auto}.w-1\/2{width:50%}.w-\[150px\]{width:150px}.w-1\/5{width:20%}.w-4\/5{width:80%}.w-fit{width:-moz-fit-content;width:fit-content}.w-1\/4{width:25%}.w-3\/4{width:75%}.w-40{width:10rem}.w-8{width:2rem}.w-16{width:4rem}.w-\[420px\]{width:420px}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.table-fixed{table-layout:fixed}.translate-y-1{--tw-translate-y:0.25rem}.translate-y-0,.translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-scroll{overflow-x:scroll}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded{border-radius:.25rem}.rounded-none{border-radius:0}.rounded-l{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.rounded-r{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.rounded-tr-none{border-top-right-radius:0}.rounded-br-none{border-bottom-right-radius:0}.rounded-tl-none{border-top-left-radius:0}.rounded-bl-none{border-bottom-left-radius:0}.border{border-width:1px}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-b{border-bottom-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.fill-\[\#161616\]{fill:#161616}.fill-transparent{fill:transparent}.fill-current{fill:currentColor}.p-10{padding:2.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-20{padding-bottom:5rem;padding-top:5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-1{padding-left:.25rem;padding-right:.25rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pr-2{padding-right:.5rem}.pb-4{padding-bottom:1rem}.pl-3{padding-left:.75rem}.pr-9{padding-right:2.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.\!text-indigo-600{--tw-text-opacity:1!important;color:rgb(79 70 229/var(--tw-text-opacity))!important}.opacity-90{opacity:.9}.opacity-100{opacity:1}.opacity-0{opacity:0}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}.ring-opacity-5{--tw-ring-opacity:0.05}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-200{transition-duration:.2s}.duration-150{transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:bg-\[\#62626212\]:hover{background-color:#62626212}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-indigo-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(55 48 163/var(--tw-ring-opacity))}[class~=theme-dark] .dark\:divide-gray-700>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(55 65 81/var(--tw-divide-opacity))}[class~=theme-dark] .dark\:border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}[class~=theme-dark] .dark\:border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}[class~=theme-dark] .dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:fill-\[\#ffffff\]{fill:#fff}[class~=theme-dark] .dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}[class~=theme-dark] .dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}[class~=theme-dark] .dark\:text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity))}[class~=theme-dark] .dark\:\!text-indigo-400{--tw-text-opacity:1!important;color:rgb(129 140 248/var(--tw-text-opacity))!important}[class~=theme-dark] .dark\:hover\:bg-\[\#ffffff12\]:hover{background-color:#ffffff12}@media (min-width:640px){.sm\:inline{display:inline}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
+/*! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.right-0{right:0}.z-50{z-index:50}.z-10{z-index:10}.m-auto{margin:auto}.m-0{margin:0}.m-2{margin:.5rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-20{margin-bottom:5rem;margin-top:5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mr-3{margin-right:.75rem}.ml-auto{margin-left:auto}.ml-2{margin-left:.5rem}.mr-6{margin-right:1.5rem}.mt-2{margin-top:.5rem}.mt-1{margin-top:.25rem}.mb-2{margin-bottom:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.h-36{height:9rem}.h-1{height:.25rem}.h-4{height:1rem}.max-h-\[400px\]{max-height:400px}.w-full{width:100%}.w-2\/5{width:40%}.w-auto{width:auto}.w-1\/2{width:50%}.w-\[150px\]{width:150px}.w-1\/5{width:20%}.w-4\/5{width:80%}.w-fit{width:-moz-fit-content;width:fit-content}.w-1\/4{width:25%}.w-3\/4{width:75%}.w-40{width:10rem}.w-8{width:2rem}.w-16{width:4rem}.w-\[420px\]{width:420px}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.table-fixed{table-layout:fixed}.translate-y-1{--tw-translate-y:0.25rem}.translate-y-0,.translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-scroll{overflow-x:scroll}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-l{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.rounded-r{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.rounded-tr-none{border-top-right-radius:0}.rounded-br-none{border-bottom-right-radius:0}.rounded-tl-none{border-top-left-radius:0}.rounded-bl-none{border-bottom-left-radius:0}.border{border-width:1px}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-b{border-bottom-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.fill-\[\#161616\]{fill:#161616}.fill-transparent{fill:transparent}.fill-current{fill:currentColor}.p-10{padding:2.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-20{padding-bottom:5rem;padding-top:5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-1{padding-left:.25rem;padding-right:.25rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pr-2{padding-right:.5rem}.pb-4{padding-bottom:1rem}.pl-3{padding-left:.75rem}.pr-9{padding-right:2.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.\!text-indigo-600{--tw-text-opacity:1!important;color:rgb(79 70 229/var(--tw-text-opacity))!important}.opacity-90{opacity:.9}.opacity-100{opacity:1}.opacity-0{opacity:0}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}.ring-opacity-5{--tw-ring-opacity:0.05}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-200{transition-duration:.2s}.duration-150{transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:bg-\[\#62626212\]:hover{background-color:#62626212}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-indigo-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(55 48 163/var(--tw-ring-opacity))}[class~=theme-dark] .dark\:divide-gray-700>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(55 65 81/var(--tw-divide-opacity))}[class~=theme-dark] .dark\:border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}[class~=theme-dark] .dark\:border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}[class~=theme-dark] .dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:fill-\[\#ffffff\]{fill:#fff}[class~=theme-dark] .dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}[class~=theme-dark] .dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}[class~=theme-dark] .dark\:text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity))}[class~=theme-dark] .dark\:\!text-indigo-400{--tw-text-opacity:1!important;color:rgb(129 140 248/var(--tw-text-opacity))!important}[class~=theme-dark] .dark\:hover\:bg-\[\#ffffff12\]:hover{background-color:#ffffff12}@media (min-width:640px){.sm\:inline{display:inline}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.59",
+  "version": "0.16.60",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
     "@parca/client": "^0.16.53",
-    "@parca/components": "^0.16.55",
+    "@parca/components": "^0.16.56",
     "@parca/dynamicsize": "^0.16.51",
     "@parca/functions": "^0.16.51",
     "@parca/parser": "^0.16.49",
@@ -20,10 +20,11 @@
     "react-konva": "18.2.3"
   },
   "devDependencies": {
-    "@types/cytoscape": "3.19.9",
     "@types/d3": "7.4.0",
-    "@types/react-copy-to-clipboard": "5.0.4",
-    "@types/react-cytoscapejs": "1.2.2"
+    "@types/react-copy-to-clipboard": "5.0.4"
+  },
+  "resolutions": {
+    "konva": "8.3.13"
   },
   "main": "dist/index.js",
   "scripts": {
@@ -39,5 +40,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "d1389b648874097c3eeb9143c94469847fedede2"
+  "gitHead": "6b4746c5144bd8473a7f2f2bfc44963df8eacb3e"
 }

package/src/Callgraph/constants.ts

@@ -0,0 +1,15 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export const DEFAULT_NODE_HEIGHT = 20;
+export const GRAPH_MARGIN = 15;

package/src/Callgraph/index.tsx

@@ -14,50 +14,182 @@
 import {useState, useEffect, useRef} from 'react';
 import graphviz from 'graphviz-wasm';
 import * as d3 from 'd3';
-import {Stage, Layer} from 'react-konva';
-import Tooltip from '../GraphTooltip';
+import {Stage, Layer, Rect, Arrow, Text, Label} from 'react-konva';
+import {KonvaEventObject} from 'konva/lib/Node';
 import {CallgraphNode, CallgraphEdge, Callgraph as CallgraphType} from '@parca/client';
-import {jsonToDot} from './utils';
-import Node, {INode} from './Node';
-import Edge, {IEdge} from './Edge';
+import {jsonToDot, getCurvePoints} from './utils';
 import type {HoveringNode} from '../GraphTooltip';
+import {useAppSelector, selectSearchNodeString} from '@parca/store';
+import {isSearchMatch} from '@parca/functions';
+import Tooltip from '../GraphTooltip';
+import {DEFAULT_NODE_HEIGHT, GRAPH_MARGIN} from './constants';
 
+interface NodeProps {
+  node: INode;
+  hoveredNode: INode | null;
+  setHoveredNode: (node: INode | null) => void;
+  isCurrentSearchMatch: boolean;
+}
+interface EdgeProps {
+  edge: GraphvizEdge;
+  sourceNode: {x: number; y: number};
+  targetNode: {x: number; y: number};
+  xScale: (x: number) => number;
+  yScale: (y: number) => number;
+  isCurrentSearchMatch: boolean;
+}
 export interface Props {
   graph: CallgraphType;
   sampleUnit: string;
   width: number;
+  colorRange: [string, string];
 }
 
-interface graphvizObject extends CallgraphNode {
+interface GraphvizNode extends CallgraphNode {
   _gvid: number;
   name: string;
   pos: string;
+  functionName: string;
+  color: string;
+  width: string | number;
+  height: string | number;
 }
 
-interface graphvizEdge extends CallgraphEdge {
+interface INode extends GraphvizNode {
+  x: number;
+  y: number;
+  data: {id: string};
+  mouseX?: number;
+  mouseY?: number;
+}
+
+interface GraphvizEdge extends CallgraphEdge {
   _gvid: number;
   tail: number;
   head: number;
   pos: string;
+  color: string;
+  opacity: string;
+  boxHeight: number;
 }
 
-interface graphvizType {
-  edges: graphvizEdge[];
-  objects: graphvizObject[];
+interface GraphvizType {
+  edges: GraphvizEdge[];
+  objects: GraphvizNode[];
   bb: string;
 }
 
-const Callgraph = ({graph, sampleUnit, width}: Props): JSX.Element => {
+const Node = ({
+  node,
+  hoveredNode,
+  setHoveredNode,
+  isCurrentSearchMatch,
+}: NodeProps): JSX.Element => {
+  const {
+    data: {id},
+    x,
+    y,
+    color,
+    functionName,
+    width: widthString,
+    height: heightString,
+  } = node;
+  const isHovered = Boolean(hoveredNode) && hoveredNode?.data.id === id;
+  const width = Number(widthString);
+  const height = Number(heightString);
+  const textPadding = 6;
+  const opacity = isCurrentSearchMatch ? 1 : 0.1;
+
+  return (
+    <Label x={x - width / 2} y={y - height / 2}>
+      <Rect
+        width={width}
+        height={height}
+        fill={color}
+        opacity={opacity}
+        cornerRadius={3}
+        stroke={isHovered ? 'black' : color}
+        strokeWidth={2}
+        onMouseOver={e => {
+          setHoveredNode({...node, mouseX: e.evt.clientX, mouseY: e.evt.clientY});
+        }}
+        onMouseOut={() => {
+          setHoveredNode(null);
+        }}
+      />
+      {width > DEFAULT_NODE_HEIGHT + 10 && (
+        <Text
+          text={functionName}
+          fontSize={10}
+          fill="white"
+          width={width - textPadding}
+          height={height - textPadding}
+          x={textPadding / 2}
+          y={textPadding / 2}
+          align="center"
+          verticalAlign="middle"
+          listening={false}
+        />
+      )}
+    </Label>
+  );
+};
+
+const Edge = ({
+  edge,
+  sourceNode,
+  targetNode,
+  xScale,
+  yScale,
+  isCurrentSearchMatch,
+}: EdgeProps): JSX.Element => {
+  const {pos, color, head, tail, opacity, boxHeight} = edge;
+
+  const points = getCurvePoints({
+    pos,
+    xScale,
+    yScale,
+    source: [sourceNode.x, sourceNode.y],
+    target: [targetNode.x, targetNode.y],
+    offset: boxHeight / 2,
+    isSelfLoop: head === tail,
+  });
+
+  return (
+    <Arrow
+      points={points}
+      bezier={true}
+      stroke={color}
+      strokeWidth={3}
+      pointerLength={10}
+      pointerWidth={10}
+      fill={color}
+      opacity={isCurrentSearchMatch ? Number(opacity) : 0}
+    />
+  );
+};
+
+const Callgraph = ({graph, sampleUnit, width, colorRange}: Props): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [graphData, setGraphData] = useState<string | null>(null);
+  const [graphData, setGraphData] = useState<any>(null);
   const [hoveredNode, setHoveredNode] = useState<INode | null>(null);
+  const [stage, setStage] = useState<{scale: {x: number; y: number}; x: number; y: number}>({
+    scale: {x: 1, y: 1},
+    x: 0,
+    y: 0,
+  });
   const {nodes: rawNodes, cumulative: total} = graph;
-  const nodeRadius = 12;
+  const currentSearchString = useAppSelector(selectSearchNodeString);
+  const isSearchEmpty = currentSearchString === undefined;
 
   useEffect(() => {
     const getDataWithPositions = async (): Promise<void> => {
       // 1. Translate JSON to 'dot' graph string
-      const dataAsDot = jsonToDot({graph, width, nodeRadius});
+      const dataAsDot = jsonToDot({
+        graph,
+        width,
+        colorRange,
+      });
 
       // 2. Use Graphviz-WASM to translate the 'dot' graph to a 'JSON' graph
       await graphviz.loadWASM(); // need to load the WASM instance and wait for it
@@ -70,86 +202,120 @@ const Callgraph = ({graph, sampleUnit, width}: Props): JSX.Element => {
     if (width !== null) {
       void getDataWithPositions();
     }
-  }, [graph, width]);
+  }, [graph, width, colorRange]);
 
   // 3. Render the graph with calculated layout in Canvas container
   if (width == null || graphData == null) return <></>;
+  const {objects: gvizNodes, edges, bb: boundingBox} = JSON.parse(graphData) as GraphvizType;
 
-  const height = width;
-  const {objects, edges: gvizEdges, bb: boundingBox} = JSON.parse(graphData) as graphvizType;
-
-  const cumulatives: string[] = objects
-    .filter(node => node !== undefined)
-    .map(node => node.cumulative);
-  if (cumulatives.length === 0) {
-    cumulatives.push('0');
-  }
-
-  const valueRange = (d3.extent(cumulatives) as [string, string]).map(value => parseInt(value));
-
-  const colorScale = d3
-    .scaleSequentialLog(d3.interpolateRdGy)
-    .domain(valueRange)
-    .range(['lightgrey', 'red']);
   const graphBB = boundingBox.split(',');
+  const bbWidth = Number(graphBB[2]);
+  const bbHeight = Number(graphBB[3]);
+  const height = (width * bbHeight) / bbWidth;
   const xScale = d3
     .scaleLinear()
-    .domain([0, Number(graphBB[2])])
-    .range([0, width]);
+    .domain([0, bbWidth])
+    .range([0, width - 2 * GRAPH_MARGIN]);
   const yScale = d3
     .scaleLinear()
-    .domain([0, Number(graphBB[3])])
-    .range([0, height]);
+    .domain([0, bbHeight])
+    .range([0, height - 2 * GRAPH_MARGIN]);
 
-  const nodes: INode[] = objects.map(object => {
-    const pos = object.pos.split(',');
+  const nodes: INode[] = gvizNodes.map((node: GraphvizNode) => {
+    const [x, y] = node.pos.split(',');
     return {
-      ...object,
-      id: object._gvid,
-      x: xScale(parseInt(pos[0])),
-      y: yScale(parseInt(pos[1])),
-      color: colorScale(Number(object.cumulative)),
-      data: rawNodes.find(n => n.id === object.name) ?? {id: 'n0'},
+      ...node,
+      x: xScale(Number(x)),
+      y: yScale(Number(y)),
+      data: rawNodes.find(n => n.id === node.name) ?? {id: 'n0'},
     };
   });
 
-  const edges: IEdge[] = gvizEdges.map(edge => ({
-    ...edge,
-    source: edge.head,
-    target: edge.tail,
-    points: edge.pos,
-    color: colorScale(+edge.cumulative),
-  }));
+  // 4. Add zooming
+  const handleWheel: (e: KonvaEventObject<WheelEvent>) => void = e => {
+    e.evt.preventDefault();
+
+    const scaleXBy = 0.95;
+    const scaleYBy = 1.05;
+    const stage = e.target.getStage();
+
+    if (stage !== null) {
+      const oldScale = stage.scaleX();
+      const {x, y} = stage.getPointerPosition() ?? {x: 0, y: 0};
+      const mousePointTo = {
+        x: x / oldScale - stage.x() / oldScale,
+        y: y / oldScale - stage.y() / oldScale,
+      };
+
+      const newXScale = e.evt.deltaX > 0 ? oldScale * scaleXBy : oldScale / scaleXBy;
+      const newYScale = e.evt.deltaY > 0 ? oldScale * scaleYBy : oldScale / scaleYBy;
+
+      stage.scale({x: newXScale, y: newYScale});
+
+      setStage({
+        scale: {x: newXScale, y: newYScale},
+        x: -(mousePointTo.x - x / newXScale) * newXScale,
+        y: -(mousePointTo.y - y / newYScale) * newYScale,
+      });
+    }
+  };
 
   return (
     <div className="relative">
       <div className={`w-[${width}px] h-[${height}px]`} ref={containerRef}>
-        <Stage width={width} height={height}>
-          <Layer>
-            {edges.map(edge => {
-              const sourceNode = nodes.find(n => n.id === edge.source) ?? {x: 0, y: 0};
-              const targetNode = nodes.find(n => n.id === edge.target) ?? {x: 0, y: 0};
+        <Stage
+          width={width}
+          height={height}
+          onWheel={handleWheel}
+          scaleX={stage.scale.x}
+          scaleY={stage.scale.y}
+          x={stage.x}
+          y={stage.y}
+          draggable
+        >
+          <Layer offsetX={-GRAPH_MARGIN} offsetY={-GRAPH_MARGIN}>
+            {edges.map((edge: GraphvizEdge) => {
+              // 'tail' in graphviz-wasm means 'source' and 'head' means 'target'
+              const sourceNode = nodes.find(n => n._gvid === edge.tail) ?? {
+                x: 0,
+                y: 0,
+                functionName: '',
+              };
+              const targetNode = nodes.find(n => n._gvid === edge.head) ?? {
+                x: 0,
+                y: 0,
+                functionName: '',
+              };
+              const isCurrentSearchMatch = isSearchEmpty
+                ? true
+                : isSearchMatch(currentSearchString, sourceNode.functionName) &&
+                  isSearchMatch(currentSearchString, targetNode.functionName);
               return (
                 <Edge
-                  key={`edge-${edge.source}-${edge.target}`}
+                  key={`edge-${edge.tail}-${edge.head}`}
                   edge={edge}
                   xScale={xScale}
                   yScale={yScale}
                   sourceNode={sourceNode}
                   targetNode={targetNode}
-                  nodeRadius={nodeRadius}
+                  isCurrentSearchMatch={isCurrentSearchMatch}
+                />
+              );
+            })}
+            {nodes.map(node => {
+              const isCurrentSearchMatch = isSearchEmpty
+                ? true
+                : isSearchMatch(currentSearchString, node.functionName);
+              return (
+                <Node
+                  key={`node-${node._gvid}`}
+                  node={node}
+                  hoveredNode={hoveredNode}
+                  setHoveredNode={setHoveredNode}
+                  isCurrentSearchMatch={isCurrentSearchMatch}
                 />
               );
             })}
-            {nodes.map(node => (
-              <Node
-                key={`node-${node.data.id}`}
-                node={node}
-                hoveredNode={hoveredNode}
-                setHoveredNode={setHoveredNode}
-                nodeRadius={nodeRadius}
-              />
-            ))}
           </Layer>
         </Stage>
         <Tooltip

package/src/Callgraph/utils.ts

@@ -11,77 +11,99 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import * as d3 from 'd3';
 import {CallgraphNode, CallgraphEdge} from '@parca/client';
+import {DEFAULT_NODE_HEIGHT} from './constants';
 
 export const pixelsToInches = (pixels: number): number => pixels / 96;
 
-export const parseEdgePos = ({
+export const getCurvePoints = ({
   pos,
   xScale = n => n,
   yScale = n => n,
   source = [],
   target = [],
-  nodeRadius,
+  offset = 0,
   isSelfLoop = false,
 }: {
   pos: string;
-  xScale?: (pos: number) => void;
-  yScale?: (pos: number) => void;
+  xScale?: (pos: number) => number;
+  yScale?: (pos: number) => number;
   source?: number[];
   target?: number[];
-  nodeRadius: number;
   isSelfLoop?: boolean;
+  offset?: number;
 }): number[] => {
-  const parts = pos.split(' ');
-  const arrow = parts.shift() ?? '';
-  const partsAsArrays = parts.map(part => part.split(','));
-  const scalePosArray = (posArr: string[]): number[] => [+xScale(+posArr[0]), +yScale(+posArr[1])];
-  const [_start, cp1, cp2, _end] = partsAsArrays.map(posArr => scalePosArray(posArr));
-  const arrowEnd: number[] = scalePosArray(arrow.replace('e,', '').split(','));
-
-  const getTargetWithOffset = (target: number[], lastEdgePoint: number[]): number[] => {
-    const diffX = target[0] - lastEdgePoint[0];
-    const diffY = target[1] - lastEdgePoint[1];
-    const diffZ = Math.hypot(diffX, diffY);
-
-    const offsetX = (diffX * nodeRadius) / diffZ;
-    const offsetY = (diffY * nodeRadius) / diffZ;
-
-    return [target[0] - offsetX, target[1] - offsetY];
-  };
-
   if (isSelfLoop) {
     const [sourceX, sourceY] = source;
     const [targetX, targetY] = target;
+
     return [
       sourceX,
-      sourceY + nodeRadius,
+      sourceY + offset,
       sourceX,
-      sourceY + 3 * nodeRadius,
-      targetX + 5 * nodeRadius,
+      sourceY + 3 * offset,
+      targetX + 5 * offset,
       targetY,
-      targetX + nodeRadius,
+      targetX + offset,
       targetY,
     ];
   }
-  return [...source, ...cp1, ...cp2, ...getTargetWithOffset(target, arrowEnd)];
+
+  // graphviz pos format is in format 'endpoint,startpoint,triple(cp1,cp2,end),...triple...'
+  const scalePoint = (point: number[]): number[] => [xScale(point[0]), yScale(point[1])];
+  const strAsNumArray = (string: string): number[] =>
+    string
+      .replace('e,', '')
+      .split(',')
+      .map(str => Number(str));
+  const getLastPointWithOffset = (target: number[], last: number[], offset: number): number[] => {
+    const [targetX, targetY] = target;
+    const [lastX, lastY] = last;
+    const diffX = targetX - lastX;
+    const diffY = targetY - lastY;
+    const diffZ = Math.hypot(diffX, diffY);
+
+    const offsetX = (diffX * offset) / diffZ;
+    const offsetY = (diffY * offset) / diffZ;
+
+    return [targetX - offsetX, targetY - offsetY];
+  };
+  const points: number[][] = pos.split(' ').map(str => strAsNumArray(str));
+  const scaledPoints: number[][] = points.map(point => scalePoint(point));
+
+  const lastPointIndex = scaledPoints.length - 1;
+  const lastPointWithOffset = getLastPointWithOffset(target, scaledPoints[lastPointIndex], offset);
+
+  return [source, ...scaledPoints.slice(2, points.length - 1), lastPointWithOffset].flat();
 };
 
+const objectAsDotAttributes = (obj: {[key: string]: string | number}): string =>
+  Object.entries(obj)
+    .map(entry => `${entry[0]}="${entry[1]}"`)
+    .join(' ');
+
 export const jsonToDot = ({
   graph,
-  width,
-  nodeRadius,
+  colorRange,
 }: {
   graph: {nodes: CallgraphNode[]; edges: CallgraphEdge[]};
   width: number;
-  nodeRadius: number;
+  colorRange: [string, string];
 }): string => {
   const {nodes, edges} = graph;
+  const cumulatives = nodes.map((node: CallgraphNode) => node.cumulative);
+  const cumulativesRange = d3.extent(cumulatives).map(value => Number(value));
 
-  const objectAsDotAttributes = (obj: {[key: string]: string}): string =>
-    Object.entries(obj)
-      .map(entry => `${entry[0]}="${entry[1]}"`)
-      .join(' ');
+  const colorScale = d3
+    .scaleSequentialLog(d3.interpolateBlues)
+    .domain(cumulativesRange)
+    .range(colorRange);
+  const colorOpacityScale = d3.scaleSequentialLog().domain(cumulativesRange).range([0.2, 1]);
+  const boxWidthScale = d3
+    .scaleLog()
+    .domain(cumulativesRange)
+    .range([DEFAULT_NODE_HEIGHT, DEFAULT_NODE_HEIGHT + 40]);
 
   const nodesAsStrings = nodes.map((node: CallgraphNode) => {
     const dataAttributes = {
@@ -89,6 +111,9 @@ export const jsonToDot = ({
       functionName: node.meta?.function?.name ?? '',
       cumulative: node.cumulative ?? '',
       root: (node.id === 'root').toString(),
+      // TODO: set box width scale to be based on flat value once we have that value available
+      width: boxWidthScale(Number(node.cumulative)),
+      color: colorScale(Number(node.cumulative)),
     };
 
     return `"${node.id}" [${objectAsDotAttributes(dataAttributes)}]`;
@@ -97,17 +122,21 @@ export const jsonToDot = ({
   const edgesAsStrings = edges.map((edge: CallgraphEdge) => {
     const dataAttributes = {
       cumulative: edge.cumulative,
+      color: colorRange[1],
+      opacity: colorOpacityScale(Number(edge.cumulative)),
+      boxHeight: DEFAULT_NODE_HEIGHT,
     };
+
     return `"${edge.source}" -> "${edge.target}" [${objectAsDotAttributes(dataAttributes)}]`;
   });
 
   const graphAsDot = `digraph "callgraph" {
-      rankdir="TB"
+      rankdir="BT"
+      overlap="prism"
       ratio="1,3"
-      size="${pixelsToInches(width)}, ${pixelsToInches(width)}!"
-      margin=10
+      margin=15
       edge [margin=0]
-      node [margin=0 width=${nodeRadius}]
+      node [shape=box style=rounded height=${DEFAULT_NODE_HEIGHT}]
       ${nodesAsStrings.join(' ')}
       ${edgesAsStrings.join(' ')}
     }`;