@parca/profile 0.12.32 → 0.12.33

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.33](https://github.com/parca-dev/parca/compare/ui-v0.12.32...ui-v0.12.33) (2022-05-02)
+
+## [0.12.27](https://github.com/parca-dev/parca/compare/ui-v0.12.26...ui-v0.12.27) (2022-04-29)
+
+## [0.12.26](https://github.com/parca-dev/parca/compare/ui-v0.12.23...ui-v0.12.26) (2022-04-28)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.12.32](https://github.com/parca-dev/parca/compare/ui-v0.12.31...ui-v0.12.32) (2022-05-02)
 
 ## [0.12.29](https://github.com/parca-dev/parca/compare/ui-v0.12.26...ui-v0.12.29) (2022-04-29)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.12.32",
+  "version": "0.12.33",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.12.30",
@@ -19,5 +19,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "f065972a25829a59cacaec8feba3156fd60dc6fd"
+  "gitHead": "a7d406cff5634de7835a0e69c42c7acec967828b"
 }

package/src/IcicleGraph.tsx

@@ -4,20 +4,49 @@ import {pointer} from 'd3-selection';
 import {scaleLinear} from 'd3-scale';
 import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
 import {usePopper} from 'react-popper';
-import {getLastItem, valueFormatter} from '@parca/functions';
+import {getLastItem, valueFormatter, diffColor} from '@parca/functions';
 import {useAppSelector, selectDarkMode} from '@parca/store';
 
-const RowHeight = 26;
+interface IcicleGraphProps {
+  graph: Flamegraph;
+  sampleUnit: string;
+  width?: number;
+  curPath: string[];
+  setCurPath: (path: string[]) => void;
+}
 
-const icicleRectStyles = {
-  cursor: 'pointer',
-  transition: 'opacity .15s linear',
-};
-const fadedIcicleRectStyles = {
-  cursor: 'pointer',
-  transition: 'opacity .15s linear',
-  opacity: '0.5',
-};
+interface IcicleGraphNodesProps {
+  data: FlamegraphNode[];
+  x: number;
+  y: number;
+  total: number;
+  totalWidth: number;
+  level: number;
+  curPath: string[];
+  setCurPath: (path: string[]) => void;
+  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
+  path: string[];
+  xScale: (value: number) => number;
+}
+
+interface FlamegraphTooltipProps {
+  x: number;
+  y: number;
+  unit: string;
+  total: number;
+  hoveringNode: FlamegraphNode | FlamegraphRootNode | undefined;
+  contextElement: Element | null;
+}
+
+interface IcicleGraphRootNodeProps {
+  node: FlamegraphRootNode;
+  xScale: (value: number) => number;
+  total: number;
+  totalWidth: number;
+  curPath: string[];
+  setCurPath: (path: string[]) => void;
+  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
+}
 
 interface IcicleRectProps {
   x: number;
@@ -32,6 +61,18 @@ interface IcicleRectProps {
   curPath: string[];
 }
 
+const RowHeight = 26;
+
+const icicleRectStyles = {
+  cursor: 'pointer',
+  transition: 'opacity .15s linear',
+};
+const fadedIcicleRectStyles = {
+  cursor: 'pointer',
+  transition: 'opacity .15s linear',
+  opacity: '0.5',
+};
+
 function IcicleRect({
   x,
   y,
@@ -75,20 +116,6 @@ function IcicleRect({
   );
 }
 
-interface IcicleGraphNodesProps {
-  data: FlamegraphNode[];
-  x: number;
-  y: number;
-  total: number;
-  totalWidth: number;
-  level: number;
-  curPath: string[];
-  setCurPath: (path: string[]) => void;
-  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
-  path: string[];
-  xScale: (value: number) => number;
-}
-
 export function nodeLabel(node: FlamegraphNode): string {
   if (node.meta === undefined) return '<unknown>';
   const mapping = `${
@@ -109,26 +136,6 @@ export function nodeLabel(node: FlamegraphNode): 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,
@@ -225,15 +232,6 @@ export function IcicleGraphNodes({
 
 const MemoizedIcicleGraphNodes = React.memo(IcicleGraphNodes);
 
-interface FlamegraphTooltipProps {
-  x: number;
-  y: number;
-  unit: string;
-  total: number;
-  hoveringNode: FlamegraphNode | FlamegraphRootNode | undefined;
-  contextElement: Element | null;
-}
-
 const FlamegraphNodeTooltipTableRows = ({
   hoveringNode,
 }: {
@@ -424,16 +422,6 @@ export const FlamegraphTooltip = ({
   );
 };
 
-interface IcicleGraphRootNodeProps {
-  node: FlamegraphRootNode;
-  xScale: (value: number) => number;
-  total: number;
-  totalWidth: number;
-  curPath: string[];
-  setCurPath: (path: string[]) => void;
-  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
-}
-
 export function IcicleGraphRootNode({
   node,
   xScale,
@@ -487,14 +475,6 @@ export function IcicleGraphRootNode({
 
 const MemoizedIcicleGraphRootNode = React.memo(IcicleGraphRootNode);
 
-interface IcicleGraphProps {
-  graph: Flamegraph;
-  sampleUnit: string;
-  width?: number;
-  curPath: string[];
-  setCurPath: (path: string[]) => void;
-}
-
 export default function IcicleGraph({
   graph,
   width,

package/src/ProfileIcicleGraph.tsx

@@ -1,5 +1,8 @@
-import IcicleGraph from './IcicleGraph';
 import {Flamegraph} from '@parca/client';
+import {useAppSelector, selectCompareMode} from '@parca/store';
+
+import DiffLegend from './components/DiffLegend';
+import IcicleGraph from './IcicleGraph';
 
 interface ProfileIcicleGraphProps {
   width?: number;
@@ -16,18 +19,23 @@ const ProfileIcicleGraph = ({
   setNewCurPath,
   sampleUnit,
 }: ProfileIcicleGraphProps) => {
+  const compareMode = useAppSelector(selectCompareMode);
+
   if (graph === undefined) return <div>no data...</div>;
   const total = graph.total;
   if (parseFloat(total) === 0) return <>Profile has no samples</>;
 
   return (
-    <IcicleGraph
-      width={width}
-      graph={graph}
-      curPath={curPath}
-      setCurPath={setNewCurPath}
-      sampleUnit={sampleUnit}
-    />
+    <>
+      {compareMode && <DiffLegend />}
+      <IcicleGraph
+        width={width}
+        graph={graph}
+        curPath={curPath}
+        setCurPath={setNewCurPath}
+        sampleUnit={sampleUnit}
+      />
+    </>
   );
 };
 

package/src/ProfileView.tsx

@@ -173,7 +173,7 @@ export const ProfileView = ({
                 </div>
 
                 <Button
-                  color={`${currentView === 'table' ? 'primary' : 'neutral'}`}
+                  variant={`${currentView === 'table' ? 'primary' : 'neutral'}`}
                   className="rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
                   onClick={() => switchProfileView('table')}
                 >
@@ -181,7 +181,7 @@ export const ProfileView = ({
                 </Button>
 
                 <Button
-                  color={`${currentView === 'both' ? 'primary' : 'neutral'}`}
+                  variant={`${currentView === 'both' ? 'primary' : 'neutral'}`}
                   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')}
                 >
@@ -189,7 +189,7 @@ export const ProfileView = ({
                 </Button>
 
                 <Button
-                  color={`${currentView === 'icicle' ? 'primary' : 'neutral'}`}
+                  variant={`${currentView === 'icicle' ? 'primary' : 'neutral'}`}
                   className="rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
                   onClick={() => switchProfileView('icicle')}
                 >

package/src/components/DiffLegend.tsx

@@ -0,0 +1,99 @@
+import {Fragment, useState} from 'react';
+import {Popover, Transition} from '@headlessui/react';
+import {useAppSelector, selectDarkMode} from '@parca/store';
+import {getNewSpanColor, getIncreasedSpanColor, getReducedSpanColor} from '@parca/functions';
+import {usePopper} from 'react-popper';
+
+const transparencyValues = [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];
+
+const DiffLegendBar = ({
+  onMouseEnter,
+  onMouseLeave,
+}: {
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+}) => {
+  const isDarkMode = useAppSelector(selectDarkMode);
+
+  return (
+    <div className="flex items-center m-2">
+      {transparencyValues.map(value => {
+        const valueAsPercentage = value / 100;
+        const absoluteValue = Math.abs(valueAsPercentage);
+        return (
+          <div
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            className="w-8 h-4"
+            key={valueAsPercentage}
+            style={{
+              backgroundColor:
+                absoluteValue === 0
+                  ? getNewSpanColor(isDarkMode)
+                  : valueAsPercentage > 0
+                  ? getIncreasedSpanColor(absoluteValue, isDarkMode)
+                  : getReducedSpanColor(absoluteValue, isDarkMode),
+            }}
+          ></div>
+        );
+      })}
+    </div>
+  );
+};
+
+const DiffLegend = () => {
+  const [showLegendTooltip, setShowLegendTooltip] = useState(false);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  let [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+
+  const {styles, attributes, ...popperProps} = usePopper(referenceElement, popperElement, {
+    placement: 'auto-start',
+    strategy: 'absolute',
+  });
+
+  const handleMouseEnter = () => {
+    setShowLegendTooltip(true);
+  };
+  const handleMouseLeave = () => {
+    setShowLegendTooltip(false);
+  };
+
+  return (
+    <div className="mt-1 mb-2">
+      <div ref={setReferenceElement} className="flex items-center justify-center">
+        <span>Better</span>
+        <DiffLegendBar onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />
+        <span>Worse</span>
+      </div>
+      <Popover className="relative">
+        {() => (
+          <Transition
+            show={showLegendTooltip}
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel ref={setPopperElement} style={styles.popper} {...attributes.popper}>
+              <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
+                <div className="p-4 bg-gray-50 dark:bg-gray-800">
+                  <div className="flex items-center justify-center"></div>
+                  <span className="block text-sm text-gray-500 dark:text-gray-50">
+                    This is a differential icicle graph, where a purple-colored node means
+                    unchanged, and the darker the red, the worse the node got, and the darker the
+                    green, the better the node got.
+                  </span>
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        )}
+      </Popover>
+    </div>
+  );
+};
+
+export default DiffLegend;