@parca/profile 0.12.14 → 0.12.25

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.25](https://github.com/parca-dev/parca/compare/ui-v0.12.24...ui-v0.12.25) (2022-04-27)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.12.23](https://github.com/parca-dev/parca/compare/ui-v0.12.22...ui-v0.12.23) (2022-04-25)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.12.20](https://github.com/parca-dev/parca/compare/ui-v0.12.19...ui-v0.12.20) (2022-04-12)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.12.14](https://github.com/parca-dev/parca/compare/ui-v0.12.13...ui-v0.12.14) (2022-04-06)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@parca/profile",
-  "version": "0.12.14",
+  "version": "0.12.25",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.12.12",
+    "@parca/client": "^0.12.20",
     "@parca/dynamicsize": "^0.12.0",
     "@parca/parser": "^0.12.3",
     "d3-scale": "^4.0.2"
@@ -19,5 +19,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "97cf7186818dc4aaba311e4c2347353bca08fca4"
+  "gitHead": "813bcc35b44f8b4a16c200ae1c25a2d46b476e59"
 }

package/src/IcicleGraph.tsx

@@ -5,8 +5,9 @@ import {scaleLinear} from 'd3-scale';
 import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
 import {usePopper} from 'react-popper';
 import {getLastItem, valueFormatter} from '@parca/functions';
+import {useAppSelector, selectDarkMode} from '@parca/store';
 
-const RowHeight = 20;
+const RowHeight = 26;
 
 const icicleRectStyles = {
   cursor: 'pointer',
@@ -65,7 +66,7 @@ function IcicleRect({
       />
       {width > 5 && (
         <svg width={width - 5} height={height}>
-          <text x={5} y={13} style={{fontSize: '12px'}}>
+          <text x={5} y={15} style={{fontSize: '12px'}}>
             {name}
           </text>
         </svg>
@@ -90,22 +91,6 @@ interface IcicleGraphNodesProps {
   xScale: (value: number) => number;
 }
 
-function diffColor(diff: number, cumulative: number): string {
-  const prevValue = cumulative - diff;
-  const diffRatio = prevValue > 0 ? (Math.abs(diff) > 0 ? diff / prevValue : 0) : 1.0;
-
-  const diffTransparency =
-    Math.abs(diff) > 0 ? Math.min((Math.abs(diffRatio) / 2 + 0.5) * 0.8, 0.8) : 0;
-  const color =
-    diff === 0
-      ? '#90c7e0'
-      : diff > 0
-      ? `rgba(221, 46, 69, ${diffTransparency})`
-      : `rgba(59, 165, 93, ${diffTransparency})`;
-
-  return color;
-}
-
 export function nodeLabel(node: FlamegraphNode.AsObject): string {
   if (node.meta === undefined) return '<unknown>';
   const mapping = `${
@@ -126,6 +111,26 @@ export function nodeLabel(node: FlamegraphNode.AsObject): string {
   return fallback === '' ? '<unknown>' : fallback;
 }
 
+function diffColor(diff: number, cumulative: number, isDarkMode: boolean): string {
+  const prevValue = cumulative - diff;
+  const diffRatio = prevValue > 0 ? (Math.abs(diff) > 0 ? diff / prevValue : 0) : 1.0;
+
+  const diffTransparency =
+    Math.abs(diff) > 0 ? Math.min((Math.abs(diffRatio) / 2 + 0.5) * 0.8, 0.8) : 0;
+
+  const newSpanColor = isDarkMode ? '#B3BAE1' : '#929FEB';
+  const increasedSpanColor = isDarkMode
+    ? `rgba(255, 177, 204, ${diffTransparency})`
+    : `rgba(254, 153, 187, ${diffTransparency})`;
+  const reducedSpanColor = isDarkMode
+    ? `rgba(103, 158, 92, ${diffTransparency})`
+    : `rgba(164, 214, 153, ${diffTransparency})`;
+
+  const color = diff === 0 ? newSpanColor : diff > 0 ? increasedSpanColor : reducedSpanColor;
+
+  return color;
+}
+
 export function IcicleGraphNodes({
   data,
   x,
@@ -139,6 +144,8 @@ export function IcicleGraphNodes({
   setCurPath,
   curPath,
 }: IcicleGraphNodesProps) {
+  const isDarkMode = useAppSelector(selectDarkMode);
+
   const nodes =
     curPath.length === 0 ? data : data.filter(d => d != null && curPath[0] === nodeLabel(d));
 
@@ -163,7 +170,7 @@ export function IcicleGraphNodes({
         const name = nodeLabel(d);
         const nextPath = path.concat([name]);
 
-        const color = diffColor(d.diff === undefined ? 0 : d.diff, d.cumulative);
+        const color = diffColor(d.diff === undefined ? 0 : d.diff, d.cumulative, isDarkMode);
 
         const onClick = () => {
           setCurPath(nextPath);
@@ -437,7 +444,9 @@ export function IcicleGraphRootNode({
   setCurPath,
   curPath,
 }: IcicleGraphRootNodeProps) {
-  const color = diffColor(node.diff === undefined ? 0 : node.diff, node.cumulative);
+  const isDarkMode = useAppSelector(selectDarkMode);
+
+  const color = diffColor(node.diff === undefined ? 0 : node.diff, node.cumulative, isDarkMode);
 
   const onClick = () => setCurPath([]);
   const onMouseEnter = () => setHoveringNode(node);
@@ -521,7 +530,13 @@ export default function IcicleGraph({graph, width, setCurPath, curPath}: IcicleG
         hoveringNode={hoveringNode}
         contextElement={svg.current}
       />
-      <svg width={width} height={height} onMouseMove={onMouseMove} ref={svg}>
+      <svg
+        className="font-robotoMono"
+        width={width}
+        height={height}
+        onMouseMove={onMouseMove}
+        ref={svg}
+      >
         <g ref={ref}>
           <MemoizedIcicleGraphRootNode
             node={graph.root}

package/src/ProfileView.tsx

@@ -204,7 +204,7 @@ export const ProfileView = ({
                     color="neutral"
                     onClick={resetIcicleGraph}
                     disabled={curPath.length === 0}
-                    additionalClasses="whitespace-nowrap text-ellipsis"
+                    className="whitespace-nowrap text-ellipsis"
                   >
                     Reset View
                   </Button>
@@ -212,7 +212,7 @@ export const ProfileView = ({
 
                 <Button
                   color={`${currentView === 'table' ? 'primary' : 'neutral'}`}
-                  additionalClasses={`rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons`}
+                  className="rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
                   onClick={() => switchProfileView('table')}
                 >
                   Table
@@ -220,7 +220,7 @@ export const ProfileView = ({
 
                 <Button
                   color={`${currentView === 'both' ? 'primary' : 'neutral'}`}
-                  additionalClasses={`rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons no-outline-on-buttons text-ellipsis`}
+                  className="rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons no-outline-on-buttons text-ellipsis"
                   onClick={() => switchProfileView('both')}
                 >
                   Both
@@ -228,7 +228,7 @@ export const ProfileView = ({
 
                 <Button
                   color={`${currentView === 'icicle' ? 'primary' : 'neutral'}`}
-                  additionalClasses={`rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons`}
+                  className="rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
                   onClick={() => switchProfileView('icicle')}
                 >
                   Icicle Graph

package/src/TopTable.tsx

@@ -167,7 +167,7 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
 
   return (
     <>
-      <div className="w-full">
+      <div className="w-full font-robotoMono">
         <table className="iciclegraph-table table-fixed text-left w-full divide-y divide-gray-200 dark:divide-gray-700">
           <thead className="bg-gray-50 dark:bg-gray-800">
             <tr>