@parca/profile 0.16.237 → 0.16.238

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.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

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/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',
@@ -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;