@parca/profile 0.16.277 → 0.16.279

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.16.279](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.278...@parca/profile@0.16.279) (2023-10-17)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.278](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.277...@parca/profile@0.16.278) (2023-10-17)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.277](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.276...@parca/profile@0.16.277) (2023-10-16)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/MetricsContextMenu/index.js

@@ -13,9 +13,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // limitations under the License.
 import { Icon } from '@iconify/react';
 import { Item, Menu, Submenu } from 'react-contexify';
-import { selectDarkMode, useAppSelector } from '@parca/store';
+import { useParcaContext } from '@parca/components';
 const MetricsContextMenu = ({ menuId, onAddLabelMatcher, highlighted, trackVisibility, }) => {
-    const isDarkMode = useAppSelector(selectDarkMode);
+    const { isDarkMode } = useParcaContext();
     const labels = highlighted?.labels.filter((label) => label.name !== '__name__');
     const handleFocusOnSingleSeries = () => {
         const labelsToAdd = labels?.map((label) => ({

package/dist/MetricsGraph/index.js

@@ -83,7 +83,7 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
     const xScale = d3
         .scaleUtc()
         .domain([from, to])
-        .range([0, width - 2 * margin]);
+        .range([0, width - 2.5 * margin]);
     const yScale = d3
         .scaleLinear()
         // tslint:disable-next-line
@@ -236,13 +236,23 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
     const trackVisibility = (isVisible) => {
         setIsContextMenuOpen(isVisible);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility }), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: !isContextMenuOpen && (_jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, contextElement: graph.current, sampleUnit: sampleUnit, delta: profile !== null ? profile?.query.profType.delta : false })) })), _jsx("div", { ref: graph, onMouseEnter: function () {
+    const isDeltaType = profile !== null ? profile?.query.profType.delta : false;
+    let yAxisLabel = sampleUnit;
+    if (isDeltaType) {
+        if (profile?.query.profType.periodType === 'cpu' && sampleUnit === 'count') {
+            yAxisLabel = 'CPU Cores';
+        }
+        if (sampleUnit === 'bytes') {
+            yAxisLabel = 'Bytes per Second';
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility }), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: !isContextMenuOpen && (_jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, contextElement: graph.current, sampleUnit: sampleUnit, delta: isDeltaType })) })), _jsx("div", { ref: graph, onMouseEnter: function () {
                     setHovering(true);
-                }, onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
+                }, onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
                                                     /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                                    transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsx("text", { fill: "currentColor", x: -9, dy: '0.32em', children: valueFormatter(d, sampleUnit, 1) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
+                                                    transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsx("text", { fill: "currentColor", x: -9, dy: '0.32em', children: valueFormatter(d, sampleUnit, 1) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: yAxisLabel }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
                                                     /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to)) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: 0, y2: 0 })] }), _jsx("g", { className: "lines fill-transparent", children: series.map((s, i) => (_jsx("g", { className: "line", children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: hovering && highlighted != null && i === highlighted.seriesIndex
+                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to)) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsx("g", { className: "lines fill-transparent", children: series.map((s, i) => (_jsx("g", { className: "line", children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: hovering && highlighted != null && i === highlighted.seriesIndex
                                                 ? lineStrokeHover
                                                 : lineStroke, xScale: xScale, yScale: yScale }) }, i))) }), hovering && highlighted != null && (_jsx("g", { className: "circle-group", ref: metricPointRef, style: { fill: color(highlighted.seriesIndex.toString()) }, children: _jsx(MetricsCircle, { cx: highlighted.x, cy: highlighted.y }) })), selected != null && (_jsx("g", { className: "circle-group", style: selected?.seriesIndex != null
                                         ? { fill: color(selected.seriesIndex.toString()) }

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.js

@@ -16,12 +16,11 @@ import { Item, Menu, Separator, Submenu } from 'react-contexify';
 import { Tooltip } from 'react-tooltip';
 import { useParcaContext } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { selectDarkMode, useAppSelector } from '@parca/store';
 import { useGraphTooltip } from '../../GraphTooltipArrow/useGraphTooltip';
 import { useGraphTooltipMetaInfo } from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
 import { hexifyAddress, truncateString } from '../../utils';
 const ContextMenu = ({ menuId, table, unit, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, }) => {
-    const isDarkMode = useAppSelector(selectDarkMode);
+    const { isDarkMode } = useParcaContext();
     const { enableSourcesView } = useParcaContext();
     const [isGraphTooltipDocked, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
     const contextMenuData = useGraphTooltip({

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.277",
+  "version": "0.16.279",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.93",
-    "@parca/components": "^0.16.210",
+    "@parca/components": "^0.16.211",
     "@parca/dynamicsize": "^0.16.59",
     "@parca/hooks": "^0.0.30",
     "@parca/parser": "^0.16.63",
@@ -50,5 +50,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "d3cd333cbd1f73c1421a62d7411cc56fa56da515"
+  "gitHead": "dc3a60af88b6c9b9f6e6d8f0ff9ab88780e36265"
 }

package/src/MetricsGraph/MetricsContextMenu/index.tsx

@@ -15,7 +15,7 @@ import {Icon} from '@iconify/react';
 import {Item, Menu, Submenu} from 'react-contexify';
 
 import {Label} from '@parca/client';
-import {selectDarkMode, useAppSelector} from '@parca/store';
+import {useParcaContext} from '@parca/components';
 
 import {HighlightedSeries} from '../';
 
@@ -34,7 +34,7 @@ const MetricsContextMenu = ({
   highlighted,
   trackVisibility,
 }: MetricsContextMenuProps): JSX.Element => {
-  const isDarkMode = useAppSelector(selectDarkMode);
+  const {isDarkMode} = useParcaContext();
   const labels = highlighted?.labels.filter((label: Label) => label.name !== '__name__');
 
   const handleFocusOnSingleSeries = (): void => {

package/src/MetricsGraph/index.tsx

@@ -184,7 +184,7 @@ export const RawMetricsGraph = ({
   const xScale = d3
     .scaleUtc()
     .domain([from, to])
-    .range([0, width - 2 * margin]);
+    .range([0, width - 2.5 * margin]);
 
   const yScale = d3
     .scaleLinear()
@@ -381,6 +381,18 @@ export const RawMetricsGraph = ({
     setIsContextMenuOpen(isVisible);
   };
 
+  const isDeltaType = profile !== null ? profile?.query.profType.delta : false;
+
+  let yAxisLabel = sampleUnit;
+  if (isDeltaType) {
+    if (profile?.query.profType.periodType === 'cpu' && sampleUnit === 'count') {
+      yAxisLabel = 'CPU Cores';
+    }
+    if (sampleUnit === 'bytes') {
+      yAxisLabel = 'Bytes per Second';
+    }
+  }
+
   return (
     <>
       <MetricsContextMenu
@@ -402,7 +414,7 @@ export const RawMetricsGraph = ({
               highlighted={highlighted}
               contextElement={graph.current}
               sampleUnit={sampleUnit}
-              delta={profile !== null ? profile?.query.profType.delta : false}
+              delta={isDeltaType}
             />
           )}
         </div>
@@ -436,7 +448,7 @@ export const RawMetricsGraph = ({
               </g>
             )}
           </g>
-          <g transform={`translate(${margin}, ${margin / 1.5})`}>
+          <g transform={`translate(${margin * 1.5}, ${margin / 1.5})`}>
             <g className="y axis" textAnchor="end" fontSize="10" fill="none">
               {yScale.ticks(5).map((d, i) => (
                 <Fragment key={`${i.toString()}-${d.toString()}`}>
@@ -476,6 +488,16 @@ export const RawMetricsGraph = ({
                 y1={0}
                 y2={height - margin}
               />
+              <g transform={`translate(${-margin}, ${(height - margin) / 2}) rotate(270)`}>
+                <text
+                  fill="currentColor"
+                  dy="-0.7em"
+                  className="text-sm capitalize"
+                  textAnchor="middle"
+                >
+                  {yAxisLabel}
+                </text>
+              </g>
             </g>
             <g
               className="x axis"
@@ -515,6 +537,11 @@ export const RawMetricsGraph = ({
                 y1={0}
                 y2={0}
               />
+              <g transform={`translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`}>
+                <text fill="currentColor" dy=".71em" y={5} className="text-sm">
+                  Time
+                </text>
+              </g>
             </g>
             <g className="lines fill-transparent">
               {series.map((s, i) => (

package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx

@@ -18,7 +18,6 @@ import {Tooltip} from 'react-tooltip';
 
 import {useParcaContext} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
-import {selectDarkMode, useAppSelector} from '@parca/store';
 import {type NavigateFunction} from '@parca/utilities';
 
 import {useGraphTooltip} from '../../GraphTooltipArrow/useGraphTooltip';
@@ -54,7 +53,7 @@ const ContextMenu = ({
   setCurPath,
   hideMenu,
 }: ContextMenuProps): JSX.Element => {
-  const isDarkMode = useAppSelector(selectDarkMode);
+  const {isDarkMode} = useParcaContext();
   const {enableSourcesView} = useParcaContext();
   const [isGraphTooltipDocked, setIsDocked] = useUserPreference<boolean>(
     USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key