@parca/profile 0.16.140 → 0.16.142

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.142](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.141...@parca/profile@0.16.142) (2023-03-21)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.141 (2023-03-20)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.140](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.139...@parca/profile@0.16.140) (2023-03-16)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     data: CallgraphType;

package/dist/GraphTooltip/ExpandOnHoverValue.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string | number | undefined;
     displayValue?: string | number | undefined;

package/dist/GraphTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CallgraphNode, CallgraphNodeMeta, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {

package/dist/MatchersInput/SuggestionItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     isHighlighted: boolean;
     onHighlight: () => void;

package/dist/MatchersInput/SuggestionsList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare class Suggestion {
     type: string;
     typeahead: string;

package/dist/MatchersInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
 import { Query } from '@parca/parser';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/MetricsTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HighlightedSeries } from '../';
 interface Props {
     x: number;
@@ -6,6 +7,7 @@ interface Props {
     onLabelClick: (labelName: string, labelValue: string) => void;
     contextElement: Element | null;
     sampleUnit: string;
+    delta: boolean;
 }
-declare const MetricsTooltip: ({ x, y, highlighted, onLabelClick, contextElement, sampleUnit, }: Props) => JSX.Element;
+declare const MetricsTooltip: ({ x, y, highlighted, onLabelClick, contextElement, sampleUnit, delta, }: Props) => JSX.Element;
 export default MetricsTooltip;

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -68,7 +68,7 @@ function generateGetBoundingClientRect(contextElement, x, y) {
     };
 }
 var MetricsTooltip = function (_a) {
-    var x = _a.x, y = _a.y, highlighted = _a.highlighted, onLabelClick = _a.onLabelClick, contextElement = _a.contextElement, sampleUnit = _a.sampleUnit;
+    var x = _a.x, y = _a.y, highlighted = _a.highlighted, onLabelClick = _a.onLabelClick, contextElement = _a.contextElement, sampleUnit = _a.sampleUnit, delta = _a.delta;
     var _b = useState(null), popperElement = _b[0], setPopperElement = _b[1];
     var _c = usePopper(virtualElement, popperElement, {
         placement: 'auto-start',
@@ -98,7 +98,7 @@ var MetricsTooltip = function (_a) {
     }, [x, y, contextElement, update]);
     var nameLabel = highlighted === null || highlighted === void 0 ? void 0 : highlighted.labels.find(function (e) { return e.name === '__name__'; });
     var highlightedNameLabel = nameLabel !== undefined ? nameLabel : { name: '', value: '' };
-    return (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { className: "z-10" }, { children: _jsx("div", __assign({ className: "flex max-w-md" }, { children: _jsx("div", __assign({ className: "m-auto" }, { children: _jsx("div", __assign({ className: "border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90", style: { borderWidth: 1 } }, { children: _jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "ml-2 mr-6" }, { children: [_jsx("span", __assign({ className: "font-semibold" }, { children: highlightedNameLabel.value })), _jsx("span", __assign({ className: "block text-gray-700 dark:text-gray-300 my-2" }, { children: _jsx("table", __assign({ className: "table-auto" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Value" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) }))] }), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Total" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.value, sampleUnit, 2) }))] }), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "At" })), _jsx("td", __assign({ className: "w-3/4" }, { children: formatDate(highlighted.timestamp, timeFormat) }))] })] }) })) })), _jsx("span", __assign({ className: "block text-gray-500 my-2" }, { children: highlighted.labels
+    return (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { className: "z-10" }, { children: _jsx("div", __assign({ className: "flex max-w-md" }, { children: _jsx("div", __assign({ className: "m-auto" }, { children: _jsx("div", __assign({ className: "border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90", style: { borderWidth: 1 } }, { children: _jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "ml-2 mr-6" }, { children: [_jsx("span", __assign({ className: "font-semibold" }, { children: highlightedNameLabel.value })), _jsx("span", __assign({ className: "block text-gray-700 dark:text-gray-300 my-2" }, { children: _jsx("table", __assign({ className: "table-auto" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Value" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) }))] }), delta && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Total" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.value, sampleUnit, 2) }))] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Duration" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.duration, 'nanoseconds', 2) }))] })), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "At" })), _jsx("td", __assign({ className: "w-3/4" }, { children: formatDate(highlighted.timestamp, timeFormat) }))] })] }) })) })), _jsx("span", __assign({ className: "block text-gray-500 my-2" }, { children: highlighted.labels
                                         .filter(function (label) { return label.name !== '__name__'; })
                                         .map(function (label) {
                                         return (_jsx("button", __assign({ type: "button", className: "inline-block rounded-lg text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400 px-2 py-1 text-xs font-bold mr-3", onClick: function () { return onLabelClick(label.name, label.value); } }, { children: _jsx(TextWithTooltip, { text: "".concat(label.name, "=\"").concat(label.value, "\""), maxTextLength: 37, id: "tooltip-".concat(label.name, "-").concat(label.value) }) }), label.name));

package/dist/MetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Label, MetricsSeries as MetricsSeriesPb } from '@parca/client';
 import { DateTimeRange } from '@parca/components';
 import { MergedProfileSelection } from '..';
@@ -18,6 +19,7 @@ export interface HighlightedSeries {
     timestamp: number;
     value: number;
     valuePerSecond: number;
+    duration: number;
     x: number;
     y: number;
 }

package/dist/MetricsGraph/index.js

@@ -70,7 +70,7 @@ export var RawMetricsGraph = function (_a) {
                 values: s.samples.reduce(function (agg, d) {
                     if (d.timestamp !== undefined && d.valuePerSecond !== undefined) {
                         var t = (+d.timestamp.seconds * 1e9 + d.timestamp.nanos) / 1e6; // https://github.com/microsoft/TypeScript/issues/5710#issuecomment-157886246
-                        agg.push([t, d.valuePerSecond, parseFloat(d.value)]);
+                        agg.push([t, d.valuePerSecond, parseFloat(d.value), parseFloat(d.duration)]);
                     }
                     return agg;
                 }, []),
@@ -124,6 +124,7 @@ export var RawMetricsGraph = function (_a) {
             timestamp: point[0],
             valuePerSecond: point[1],
             value: point[2],
+            duration: point[3],
             x: xScale(point[0]),
             y: yScale(point[1]),
         };
@@ -231,12 +232,13 @@ export var RawMetricsGraph = function (_a) {
             timestamp: sample[0],
             valuePerSecond: sample[1],
             value: sample[2],
+            duration: sample[3],
             x: xScale(sample[0]),
             y: yScale(sample[1]),
         };
     };
     var selected = findSelectedProfile();
-    return (_jsxs(_Fragment, { children: [highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", __assign({ onMouseMove: onMouseMove, onMouseEnter: function () { return setHovering(true); }, onMouseLeave: function () { return setHovering(false); } }, { children: _jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, onLabelClick: onLabelClick, contextElement: graph.current, sampleUnit: sampleUnit }) }))), _jsx("div", __assign({ ref: graph, onMouseEnter: function () {
+    return (_jsxs(_Fragment, { children: [highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", __assign({ onMouseMove: onMouseMove, onMouseEnter: function () { return setHovering(true); }, onMouseLeave: function () { return setHovering(false); } }, { children: _jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, onLabelClick: onLabelClick, contextElement: graph.current, sampleUnit: sampleUnit, delta: profile !== null ? profile === null || profile === void 0 ? void 0 : profile.query.profType.delta : false }) }))), _jsx("div", __assign({ ref: graph, onMouseEnter: function () {
                     setHovering(true);
                 }, onMouseLeave: function () { return setHovering(false); } }, { children: _jsxs("svg", __assign({ width: "".concat(width, "px"), height: "".concat(height + margin, "px"), onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove }, { children: [_jsx("g", __assign({ transform: "translate(".concat(margin, ", 0)") }, { children: dragging && (_jsx("g", __assign({ 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", __assign({ transform: "translate(".concat(margin, ", ").concat(margin, ")") }, { children: [_jsx("g", __assign({ className: "lines fill-transparent" }, { children: series.map(function (s, i) { return (_jsx("g", __assign({ className: "line" }, { children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: hovering && highlighted != null && i === highlighted.seriesIndex
                                                 ? lineStrokeHover

package/dist/MetricsSeries/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/functions';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/functions';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/functions';
 interface ProfileExplorerProps {

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigateFunction } from '@parca/functions';
 interface Props {
     navigateTo?: NavigateFunction;

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph } from '@parca/client';
 import { type NavigateFunction } from '@parca/functions';
 export type ResizeHandler = (width: number, height: number) => void;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { Label, QueryRangeResponse, QueryServiceClient } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileTypesResponse, QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Label, ProfileDiffSelection, QueryRequest } from '@parca/client';
 import { ProfileType, Query } from '@parca/parser';
 export interface ProfileSource {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileType, ProfileTypesResponse } from '@parca/client';
 interface WellKnownProfile {

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigateFunction } from '@parca/functions';
 declare const FilterByFunctionButton: ({ navigateTo, }: {
     navigateTo: NavigateFunction | undefined;

package/dist/ProfileView/ViewSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigateFunction } from '@parca/functions';
 interface Props {
     position: number;

package/dist/ProfileView/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Top } from '@parca/client';
 import { ResizeHandler } from '../ProfileIcicleGraph';
 import { ProfileSource } from '../ProfileSource';

package/dist/ProfileViewWithData.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { type NavigateFunction } from '@parca/functions';
 import { ProfileSource } from './ProfileSource';

package/dist/components/DiffLegend.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

package/dist/components/ProfileShareButton/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.140",
+  "version": "0.16.142",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.66",
-    "@parca/components": "^0.16.114",
+    "@parca/client": "^0.16.67",
+    "@parca/components": "^0.16.116",
     "@parca/dynamicsize": "^0.16.54",
-    "@parca/functions": "^0.16.67",
+    "@parca/functions": "^0.16.68",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.65",
+    "@parca/store": "^0.16.66",
     "@types/react-beautiful-dnd": "^13.1.3",
     "d3": "7.8.2",
     "d3-scale": "^4.0.2",
@@ -45,5 +45,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "6520407fe5da18f15d5de4e66dfc4241898f2139"
+  "gitHead": "a1e44da90997207f78785fa433d9f6e5a9d2eac3"
 }

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -30,6 +30,7 @@ interface Props {
   onLabelClick: (labelName: string, labelValue: string) => void;
   contextElement: Element | null;
   sampleUnit: string;
+  delta: boolean;
 }
 
 const virtualElement: VirtualElement = {
@@ -67,6 +68,7 @@ const MetricsTooltip = ({
   onLabelClick,
   contextElement,
   sampleUnit,
+  delta,
 }: Props): JSX.Element => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
@@ -122,12 +124,22 @@ const MetricsTooltip = ({
                           {valueFormatter(highlighted.valuePerSecond, sampleUnit, 5)}
                         </td>
                       </tr>
-                      <tr>
-                        <td className="w-1/4">Total</td>
-                        <td className="w-3/4">
-                          {valueFormatter(highlighted.value, sampleUnit, 2)}
-                        </td>
-                      </tr>
+                      {delta && (
+                        <tr>
+                          <td className="w-1/4">Total</td>
+                          <td className="w-3/4">
+                            {valueFormatter(highlighted.value, sampleUnit, 2)}
+                          </td>
+                        </tr>
+                      )}
+                      {highlighted.duration > 0 && (
+                        <tr>
+                          <td className="w-1/4">Duration</td>
+                          <td className="w-3/4">
+                            {valueFormatter(highlighted.duration, 'nanoseconds', 2)}
+                          </td>
+                        </tr>
+                      )}
                       <tr>
                         <td className="w-1/4">At</td>
                         <td className="w-3/4">{formatDate(highlighted.timestamp, timeFormat)}</td>

package/src/MetricsGraph/index.tsx

@@ -50,6 +50,7 @@ export interface HighlightedSeries {
   timestamp: number;
   value: number;
   valuePerSecond: number;
+  duration: number;
   x: number;
   y: number;
 }
@@ -137,7 +138,7 @@ export const RawMetricsGraph = ({
         values: s.samples.reduce<number[][]>(function (agg: number[][], d: MetricsSample) {
           if (d.timestamp !== undefined && d.valuePerSecond !== undefined) {
             const t = (+d.timestamp.seconds * 1e9 + d.timestamp.nanos) / 1e6; // https://github.com/microsoft/TypeScript/issues/5710#issuecomment-157886246
-            agg.push([t, d.valuePerSecond, parseFloat(d.value)]);
+            agg.push([t, d.valuePerSecond, parseFloat(d.value), parseFloat(d.duration)]);
           }
           return agg;
         }, []),
@@ -205,6 +206,7 @@ export const RawMetricsGraph = ({
       timestamp: point[0],
       valuePerSecond: point[1],
       value: point[2],
+      duration: point[3],
       x: xScale(point[0]),
       y: yScale(point[1]),
     };
@@ -329,6 +331,7 @@ export const RawMetricsGraph = ({
       timestamp: sample[0],
       valuePerSecond: sample[1],
       value: sample[2],
+      duration: sample[3],
       x: xScale(sample[0]),
       y: yScale(sample[1]),
     };
@@ -350,6 +353,7 @@ export const RawMetricsGraph = ({
             onLabelClick={onLabelClick}
             contextElement={graph.current}
             sampleUnit={sampleUnit}
+            delta={profile !== null ? profile?.query.profType.delta : false}
           />
         </div>
       )}