@parca/profile 0.16.341 → 0.16.342

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.342](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.341...@parca/profile@0.16.342) (2024-02-14)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.341](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.340...@parca/profile@0.16.341) (2024-02-13)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // 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.
@@ -73,7 +73,7 @@ const MetricsTooltip = ({ x, y, highlighted, contextElement, sampleUnit, delta,
     }, [x, y, contextElement, update]);
     const nameLabel = highlighted?.labels.find(e => e.name === '__name__');
     const highlightedNameLabel = nameLabel !== undefined ? nameLabel : { name: '', value: '' };
-    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-10", children: _jsx("div", { className: "flex max-w-md", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] }), delta && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timeFormat) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: highlighted.labels
+    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-10", children: _jsx("div", { className: "flex max-w-md", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [delta ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Per Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit === 'nanoseconds' ? 'CPU Cores' : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timeFormat) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: highlighted.labels
                                         .filter((label) => label.name !== '__name__')
                                         .map((label) => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}-${label.value}` }) }, label.name))) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }) }) }) }) }));
 };

package/dist/MetricsGraph/index.js

@@ -241,9 +241,11 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
     };
     const isDeltaType = profile !== null ? profile?.query.profType.delta : false;
     let yAxisLabel = sampleUnit;
+    let yAxisUnit = sampleUnit;
     if (isDeltaType) {
-        if (profile?.query.profType.periodType === 'cpu' && sampleUnit === 'count') {
+        if (sampleUnit === 'nanoseconds') {
             yAxisLabel = 'CPU Cores';
+            yAxisUnit = '';
         }
         if (sampleUnit === 'bytes') {
             yAxisLabel = 'Bytes per Second';
@@ -260,7 +262,7 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
                                             }
                                             return (_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, decimals) })] }, `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()}`));
+                                                        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, yAxisUnit, decimals) })] }, `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", { 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

package/dist/ProfileMetricsGraph/index.js

@@ -91,7 +91,14 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
         const handleSampleClick = (timestamp, _value, labels) => {
             onPointClick(timestamp, labels, queryExpression);
         };
-        return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: handleSampleClick, addLabelMatcher: addLabelMatcher, sampleUnit: Query.parse(queryExpression).profileType().sampleUnit, height: height, width: width, margin: margin }) }, "metrics-graph-loaded") }));
+        let sampleUnit = '';
+        if (series.every((val, i, arr) => val?.sampleType?.unit === arr[0]?.sampleType?.unit)) {
+            sampleUnit = series[0]?.sampleType?.unit ?? '';
+        }
+        if (sampleUnit === '') {
+            sampleUnit = Query.parse(queryExpression).profileType().sampleUnit;
+        }
+        return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: handleSampleClick, addLabelMatcher: addLabelMatcher, sampleUnit: sampleUnit, height: height, width: width, margin: margin }) }, "metrics-graph-loaded") }));
     }
     return _jsx(ProfileMetricsEmptyState, { message: "No data found. Try a different query." });
 };

package/dist/ProfileViewWithData.js

@@ -87,7 +87,18 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         sourceResponse,
         perf,
     ]);
-    const sampleUnit = profileSource.ProfileType().sampleUnit;
+    // Default to the unit of the selected profile type. This is a heuristic, and
+    // only a fallback, the unit should be returned by the backend.
+    let sampleUnit = profileSource.ProfileType().sampleUnit;
+    if (flamegraphResponse?.report.oneofKind === 'flamegraphArrow') {
+        sampleUnit = flamegraphResponse.report.flamegraphArrow.unit;
+    }
+    if (tableResponse?.report.oneofKind === 'tableArrow') {
+        sampleUnit = tableResponse.report.tableArrow.unit;
+    }
+    if (sourceResponse?.report.oneofKind === 'source') {
+        sampleUnit = sourceResponse.report.source.unit;
+    }
     const downloadPProfClick = async () => {
         if (profileSource == null || queryClient == null) {
             return;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.341",
+  "version": "0.16.342",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.102",
-    "@parca/components": "^0.16.251",
+    "@parca/client": "^0.16.103",
+    "@parca/components": "^0.16.252",
     "@parca/dynamicsize": "^0.16.60",
-    "@parca/hooks": "^0.0.40",
+    "@parca/hooks": "^0.0.41",
     "@parca/parser": "^0.16.68",
-    "@parca/store": "^0.16.128",
-    "@parca/utilities": "^0.0.56",
+    "@parca/store": "^0.16.129",
+    "@parca/utilities": "^0.0.57",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "apache-arrow": "^12.0.0",
@@ -51,5 +51,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "1e56ee8a3d821ac02819b9264f55464787d6e667"
+  "gitHead": "64e853a94dc382feae3481f3f64efa47e8f5709c"
 }

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -117,17 +117,30 @@ const MetricsTooltip = ({
                 <span className="my-2 block text-gray-700 dark:text-gray-300">
                   <table className="table-auto">
                     <tbody>
-                      <tr>
-                        <td className="w-1/4">Value</td>
-                        <td className="w-3/4">
-                          {valueFormatter(highlighted.valuePerSecond, sampleUnit, 5)}
-                        </td>
-                      </tr>
-                      {delta && (
+                      {delta ? (
+                        <>
+                          <tr>
+                            <td className="w-1/4">Per Second</td>
+                            <td className="w-3/4">
+                              {valueFormatter(
+                                highlighted.valuePerSecond,
+                                sampleUnit === 'nanoseconds' ? 'CPU Cores' : sampleUnit,
+                                5
+                              )}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td className="w-1/4">Total</td>
+                            <td className="w-3/4">
+                              {valueFormatter(highlighted.value, sampleUnit, 2)}
+                            </td>
+                          </tr>
+                        </>
+                      ) : (
                         <tr>
-                          <td className="w-1/4">Total</td>
+                          <td className="w-1/4">Value</td>
                           <td className="w-3/4">
-                            {valueFormatter(highlighted.value, sampleUnit, 2)}
+                            {valueFormatter(highlighted.valuePerSecond, sampleUnit, 5)}
                           </td>
                         </tr>
                       )}

package/src/MetricsGraph/index.tsx

@@ -392,9 +392,11 @@ export const RawMetricsGraph = ({
   const isDeltaType = profile !== null ? profile?.query.profType.delta : false;
 
   let yAxisLabel = sampleUnit;
+  let yAxisUnit = sampleUnit;
   if (isDeltaType) {
-    if (profile?.query.profType.periodType === 'cpu' && sampleUnit === 'count') {
+    if (sampleUnit === 'nanoseconds') {
       yAxisLabel = 'CPU Cores';
+      yAxisUnit = '';
     }
     if (sampleUnit === 'bytes') {
       yAxisLabel = 'Bytes per Second';
@@ -477,7 +479,7 @@ export const RawMetricsGraph = ({
                     >
                       <line className="stroke-gray-300 dark:stroke-gray-500" x2={-6} />
                       <text fill="currentColor" x={-9} dy={'0.32em'}>
-                        {valueFormatter(d, sampleUnit, decimals)}
+                        {valueFormatter(d, yAxisUnit, decimals)}
                       </text>
                     </g>
                     <g key={`grid-${i}`}>

package/src/ProfileMetricsGraph/index.tsx

@@ -172,6 +172,14 @@ const ProfileMetricsGraph = ({
       onPointClick(timestamp, labels, queryExpression);
     };
 
+    let sampleUnit = '';
+    if (series.every((val, i, arr) => val?.sampleType?.unit === arr[0]?.sampleType?.unit)) {
+      sampleUnit = series[0]?.sampleType?.unit ?? '';
+    }
+    if (sampleUnit === '') {
+      sampleUnit = Query.parse(queryExpression).profileType().sampleUnit;
+    }
+
     return (
       <AnimatePresence>
         <motion.div
@@ -189,7 +197,7 @@ const ProfileMetricsGraph = ({
             setTimeRange={setTimeRange}
             onSampleClick={handleSampleClick}
             addLabelMatcher={addLabelMatcher}
-            sampleUnit={Query.parse(queryExpression).profileType().sampleUnit}
+            sampleUnit={sampleUnit}
             height={height}
             width={width}
             margin={margin}

package/src/ProfileViewWithData.tsx

@@ -135,7 +135,18 @@ export const ProfileViewWithData = ({
     perf,
   ]);
 
-  const sampleUnit = profileSource.ProfileType().sampleUnit;
+  // Default to the unit of the selected profile type. This is a heuristic, and
+  // only a fallback, the unit should be returned by the backend.
+  let sampleUnit = profileSource.ProfileType().sampleUnit;
+  if (flamegraphResponse?.report.oneofKind === 'flamegraphArrow') {
+    sampleUnit = flamegraphResponse.report.flamegraphArrow.unit;
+  }
+  if (tableResponse?.report.oneofKind === 'tableArrow') {
+    sampleUnit = tableResponse.report.tableArrow.unit;
+  }
+  if (sourceResponse?.report.oneofKind === 'source') {
+    sampleUnit = sourceResponse.report.source.unit;
+  }
 
   const downloadPProfClick = async (): Promise<void> => {
     if (profileSource == null || queryClient == null) {