@parca/profile 0.16.236 → 0.16.238

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.238](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.237...@parca/profile@0.16.238) (2023-08-30)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.237](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.236...@parca/profile@0.16.237) (2023-08-30)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.236 (2023-08-29)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/index.js

@@ -51,7 +51,6 @@ const GraphTooltip = ({ children, x, y, contextElement, isFixed = false, virtual
                 options: {
                     tether: false,
                     altAxis: true,
-                    boundary: contextElement ?? undefined,
                 },
             },
             {
@@ -60,12 +59,6 @@ const GraphTooltip = ({ children, x, y, contextElement, isFixed = false, virtual
                     offset: [30, 30],
                 },
             },
-            {
-                name: 'flip',
-                options: {
-                    boundary: contextElement ?? undefined,
-                },
-            },
         ],
     });
     const { isShiftDown } = useKeyDown();
@@ -91,6 +84,6 @@ const GraphTooltip = ({ children, x, y, contextElement, isFixed = false, virtual
             contextElement.removeEventListener('mousemove', onMouseMove);
         };
     }, [contextElement, popperProps, isShiftDown, x, y]);
-    return isFixed ? (_jsx(_Fragment, { children: children })) : (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: children }));
+    return isFixed ? (_jsx(_Fragment, { children: children })) : (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-10", children: children }));
 };
 export default GraphTooltip;

package/dist/MetricsGraph/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useRef, useState } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
@@ -230,11 +230,11 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, onLabe
     const selected = findSelectedProfile();
     return (_jsxs(_Fragment, { children: [highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => 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?.query.profType.delta : false }) })), _jsx("div", { ref: graph, onMouseEnter: function () {
                     setHovering(true);
-                }, onMouseLeave: () => setHovering(false), 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})`, 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), 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})`, 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}`)] }))), _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 })] }), _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}`)] }))), _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", { 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/index.d.ts

@@ -15,6 +15,7 @@ interface ProfileIcicleGraphProps {
     navigateTo?: NavigateFunction;
     loading: boolean;
     setActionButtons?: (buttons: React.JSX.Element) => void;
+    error?: any;
 }
-declare const ProfileIcicleGraph: ({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -50,7 +50,7 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
     }, [groupBy, setGroupBy]);
     return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy })] }));
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, }) {
     const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
     const { ref, dimensions } = useContainerDimensions();
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
@@ -82,6 +82,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, table, to
         }
         setActionButtons(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full items-end justify-between gap-2", children: [table !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), _jsx("div", { children: _jsx(Button, { color: "neutral", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, variant: "neutral", children: "Reset View" }) })] }) }));
     }, [navigateTo, table, curPath, setNewCurPath, setActionButtons]);
+    if (error != null) {
+        console.error('Error: ', error);
+        return _jsxs("div", { className: "flex justify-center p-10", children: ["An error occurred: ", error.message] });
+    }
     if (graph === undefined && table === undefined)
         return _jsx("div", { children: "no data..." });
     if (total === 0n && !loading)

package/dist/ProfileView/index.d.ts

@@ -35,7 +35,7 @@ interface SourceData {
 export interface ProfileViewProps {
     total: bigint;
     filtered: bigint;
-    flamegraphData?: FlamegraphData;
+    flamegraphData: FlamegraphData;
     topTableData?: TopTableData;
     callgraphData?: CallgraphData;
     sourceData?: SourceData;

package/dist/ProfileView/index.js

@@ -1,5 +1,5 @@
 import { createElement as _createElement } from "react";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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.
@@ -119,10 +119,6 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [graphvizLoaded, callgraphData?.data]);
-    if (flamegraphData?.error !== null) {
-        console.error('Error: ', flamegraphData?.error);
-        return (_jsxs("div", { className: "flex justify-center p-10", children: ["An error occurred: ", flamegraphData?.error.message] }));
-    }
     const setNewCurPath = (path) => {
         if (!arrayEquals(curPath, path)) {
             setCurPath(path);
@@ -131,10 +127,10 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
     const getDashboardItemByType = ({ type, isHalfScreen, setActionButtons, }) => {
         switch (type) {
             case 'icicle': {
-                return flamegraphData?.table !== undefined || flamegraphData.data !== undefined ? (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
+                return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, table: flamegraphData.table, graph: flamegraphData.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) })) : (_jsx(_Fragment, { children: " " }));
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, table: flamegraphData?.table, graph: flamegraphData?.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error }) }));
             }
             case 'callgraph': {
                 return callgraphData?.data !== undefined &&

package/dist/SourceView/Highlighter.d.ts

@@ -7,10 +7,10 @@ interface RendererProps {
 }
 type Renderer = ({ rows, stylesheet, useInlineStyles }: RendererProps) => JSX.Element;
 interface HighlighterProps {
+    file: string;
     content: string;
-    language?: string;
     renderer?: Renderer;
 }
 export declare const profileAwareRenderer: (cumulative: Vector | null, flat: Vector | null, total: bigint, filtered: bigint) => Renderer;
-export declare const Highlighter: ({ content, language, renderer }: HighlighterProps) => JSX.Element;
+export declare const Highlighter: ({ file, content, renderer }: HighlighterProps) => JSX.Element;
 export {};

package/dist/SourceView/Highlighter.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useId } from 'react';
+import { useId, useMemo } from 'react';
 import cx from 'classnames';
 import { scaleLinear } from 'd3-scale';
 import SyntaxHighlighter, { createElement } from 'react-syntax-highlighter';
@@ -21,6 +21,7 @@ import { useURLState } from '@parca/components';
 import { selectDarkMode, useAppSelector } from '@parca/store';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { LineNo } from './LineNo';
+import { langaugeFromFile } from './lang-detector';
 // cannot make this a function on the number as we need the classes to be static for tailwind
 const charsToWidthMap = {
     1: 'w-3',
@@ -63,7 +64,7 @@ export const profileAwareRenderer = (cumulative, flat, total, filtered) => {
                 const lineNumber = node.children[0].children[0].value;
                 const isCurrentLine = sourceLine === lineNumber.toString();
                 node.children = node.children.slice(1);
-                return (_jsxs("div", { className: "flex gap-1", children: [_jsx("div", { className: cx('shrink-0 overflow-hidden border-r border-r-gray-200 text-right dark:border-r-gray-700', lineNumberWidth), children: _jsx(LineNo, { value: lineNumber, isCurrent: isCurrentLine, setCurrentLine: () => setSourceLine(lineNumber.toString()) }) }), _jsx(LineProfileMetadata, { value: cumulative?.get(i) ?? 0n, total: total, filtered: filtered }), _jsx(LineProfileMetadata, { value: flat?.get(i) ?? 0n, total: total, filtered: filtered }), _jsx("div", { className: cx('w-11/12 flex-grow-0 border-l border-gray-200 pl-1 dark:border-gray-700', {
+                return (_jsxs("div", { className: "flex gap-1", children: [_jsx("div", { className: cx('shrink-0 overflow-hidden border-r border-r-gray-200 text-right dark:border-r-gray-700', lineNumberWidth), children: _jsx(LineNo, { value: lineNumber, isCurrent: isCurrentLine, setCurrentLine: () => setSourceLine(lineNumber.toString()) }) }), _jsx(LineProfileMetadata, { value: cumulative?.get(i) ?? 0n, total: total, filtered: filtered }), _jsx(LineProfileMetadata, { value: flat?.get(i) ?? 0n, total: total, filtered: filtered }), _jsx("div", { className: cx('w-full flex-grow-0 border-l border-gray-200 pl-1 dark:border-gray-700', {
                                 'bg-yellow-200 dark:bg-yellow-700': isCurrentLine,
                             }), children: createElement({
                                 key: `source-line-${i}`,
@@ -74,7 +75,12 @@ export const profileAwareRenderer = (cumulative, flat, total, filtered) => {
             }) }));
     };
 };
-export const Highlighter = ({ content, language, renderer }) => {
+export const Highlighter = ({ file, content, renderer }) => {
     const isDarkMode = useAppSelector(selectDarkMode);
-    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex gap-2 text-xs", children: [_jsx("div", { className: cx('text-right', charsToWidth(content.split('\n').length.toString().length)), children: "Line" }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { children: "Cumulative" }), _jsx("div", { children: "Flat" }), _jsx("div", { children: "Source" })] })] }), _jsx("div", { className: "text-xs", children: _jsx(SyntaxHighlighter, { language: language, style: isDarkMode ? atomOneDark : atomOneLight, showLineNumbers: true, renderer: renderer, customStyle: { padding: 0, height: '80vh' }, children: content }) })] }));
+    const language = useMemo(() => langaugeFromFile(file), [file]);
+    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex gap-2 text-xs", children: [_jsx("div", { className: cx('text-right', charsToWidth(content
+                            .split(
+                        // prettier-ignore
+                        '\n')
+                            .length.toString().length)), children: "Line" }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { children: "Cumulative" }), _jsx("div", { children: "Flat" }), _jsx("div", { children: "Source" })] })] }), _jsx("div", { className: "text-xs", children: _jsx(SyntaxHighlighter, { language: language, style: isDarkMode ? atomOneDark : atomOneLight, showLineNumbers: true, renderer: renderer, customStyle: { padding: 0, height: '80vh' }, children: content }) })] }));
 };

package/dist/SourceView/index.js

@@ -32,6 +32,6 @@ export const SourceView = React.memo(function SourceView({ data, loading, total,
     const table = tableFromIPC(data.record);
     const cumulative = table.getChild('cumulative');
     const flat = table.getChild('flat');
-    return (_jsx(Highlighter, { content: data.source, renderer: profileAwareRenderer(cumulative, flat, total, filtered) }));
+    return (_jsx(Highlighter, { file: sourceFileName, content: data.source, renderer: profileAwareRenderer(cumulative, flat, total, filtered) }));
 });
 export default SourceView;