@parca/profile 0.16.184 → 0.16.186

package/dist/MetricsGraph/index.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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");
@@ -32,96 +21,94 @@ import { formatDate, formatForTimespan, sanitizeHighlightedValues, valueFormatte
 import MetricsCircle from '../MetricsCircle';
 import MetricsSeries from '../MetricsSeries';
 import MetricsTooltip from './MetricsTooltip';
-var MetricsGraph = function (_a) {
-    var data = _a.data, from = _a.from, to = _a.to, profile = _a.profile, onSampleClick = _a.onSampleClick, onLabelClick = _a.onLabelClick, setTimeRange = _a.setTimeRange, sampleUnit = _a.sampleUnit;
-    var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
-    return (_jsx("div", __assign({ ref: ref }, { children: _jsx(RawMetricsGraph, { data: data, from: from, to: to, profile: profile, onSampleClick: onSampleClick, onLabelClick: onLabelClick, setTimeRange: setTimeRange, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width }) })));
+const MetricsGraph = ({ data, from, to, profile, onSampleClick, onLabelClick, setTimeRange, sampleUnit, }) => {
+    const { ref, dimensions } = useContainerDimensions();
+    return (_jsx("div", { ref: ref, children: _jsx(RawMetricsGraph, { data: data, from: from, to: to, profile: profile, onSampleClick: onSampleClick, onLabelClick: onLabelClick, setTimeRange: setTimeRange, sampleUnit: sampleUnit, width: dimensions?.width }) }));
 };
 export default MetricsGraph;
-export var parseValue = function (value) {
-    var val = parseFloat(value);
+export const parseValue = (value) => {
+    const val = parseFloat(value);
     // "+Inf", "-Inf", "+Inf" will be parsed into NaN by parseFloat(). They
     // can't be graphed, so show them as gaps (null).
     return isNaN(val) ? null : val;
 };
-var lineStroke = '1px';
-var lineStrokeHover = '2px';
-export var RawMetricsGraph = function (_a) {
-    var data = _a.data, from = _a.from, to = _a.to, profile = _a.profile, onSampleClick = _a.onSampleClick, onLabelClick = _a.onLabelClick, setTimeRange = _a.setTimeRange, width = _a.width, sampleUnit = _a.sampleUnit;
-    var graph = useRef(null);
-    var _b = useState(false), dragging = _b[0], setDragging = _b[1];
-    var _c = useState(false), hovering = _c[0], setHovering = _c[1];
-    var _d = useState(-1), relPos = _d[0], setRelPos = _d[1];
-    var _e = useState([0, 0]), pos = _e[0], setPos = _e[1];
-    var metricPointRef = useRef(null);
-    var isShiftDown = useKeyDown().isShiftDown;
+const lineStroke = '1px';
+const lineStrokeHover = '2px';
+export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, onLabelClick, setTimeRange, width, sampleUnit, }) => {
+    const graph = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [hovering, setHovering] = useState(false);
+    const [relPos, setRelPos] = useState(-1);
+    const [pos, setPos] = useState([0, 0]);
+    const metricPointRef = useRef(null);
+    const { isShiftDown } = useKeyDown();
     // the time of the selected point is the start of the merge window
-    var time = parseFloat(profile === null || profile === void 0 ? void 0 : profile.HistoryParams().merge_from);
+    const time = parseFloat(profile?.HistoryParams().merge_from);
     if (width === undefined || width == null) {
         width = 0;
     }
-    var height = Math.min(width / 2.5, 400);
-    var margin = 50;
-    var marginRight = 20;
-    var series = data.reduce(function (agg, s) {
+    const height = Math.min(width / 2.5, 400);
+    const margin = 50;
+    const marginRight = 20;
+    const series = data.reduce(function (agg, s) {
         if (s.labelset !== undefined) {
-            var metric = s.labelset.labels.sort(function (a, b) { return a.name.localeCompare(b.name); });
+            const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
             agg.push({
-                metric: metric,
+                metric,
                 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), parseFloat(d.duration)]);
+                        const t = (Number(d.timestamp.seconds) * 1e9 + d.timestamp.nanos) / 1e6; // https://github.com/microsoft/TypeScript/issues/5710#issuecomment-157886246
+                        agg.push([t, d.valuePerSecond, Number(d.value), Number(d.duration)]);
                     }
                     return agg;
                 }, []),
-                labelset: metric.map(function (m) { return "".concat(m.name, "=").concat(m.value); }).join(','),
+                labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
             });
         }
         return agg;
     }, []);
     // Sort series by id to make sure the colors are consistent
-    series.sort(function (a, b) { return a.labelset.localeCompare(b.labelset); });
-    var extentsY = series.map(function (s) {
+    series.sort((a, b) => a.labelset.localeCompare(b.labelset));
+    const extentsY = series.map(function (s) {
         return d3.extent(s.values, function (d) {
             return d[1];
         });
     });
-    var minY = d3.min(extentsY, function (d) {
+    const minY = d3.min(extentsY, function (d) {
         return d[0];
     });
-    var maxY = d3.max(extentsY, function (d) {
+    const maxY = d3.max(extentsY, function (d) {
         return d[1];
     });
     /* Scale */
-    var xScale = d3
+    const xScale = d3
         .scaleUtc()
         .domain([from, to])
         .range([0, width - margin - marginRight]);
-    var yScale = d3
+    const yScale = d3
         .scaleLinear()
         // tslint:disable-next-line
         .domain([minY, maxY])
         .range([height - margin, 0]);
-    var color = d3.scaleOrdinal(d3.schemeCategory10);
-    var l = d3.line(function (d) { return xScale(d[0]); }, function (d) { return yScale(d[1]); });
-    var getClosest = function () {
-        var closestPointPerSeries = series.map(function (s) {
-            var distances = s.values.map(function (d) {
-                var x = xScale(d[0]);
-                var y = yScale(d[1]);
+    const color = d3.scaleOrdinal(d3.schemeCategory10);
+    const l = d3.line(d => xScale(d[0]), d => yScale(d[1]));
+    const getClosest = () => {
+        const closestPointPerSeries = series.map(function (s) {
+            const distances = s.values.map(d => {
+                const x = xScale(d[0]);
+                const y = yScale(d[1]);
                 return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
             });
-            var pointIndex = d3.minIndex(distances);
-            var minDistance = distances[pointIndex];
+            const pointIndex = d3.minIndex(distances);
+            const minDistance = distances[pointIndex];
             return {
-                pointIndex: pointIndex,
+                pointIndex,
                 distance: minDistance,
             };
         });
-        var closestSeriesIndex = d3.minIndex(closestPointPerSeries, function (s) { return s.distance; });
-        var pointIndex = closestPointPerSeries[closestSeriesIndex].pointIndex;
-        var point = series[closestSeriesIndex].values[pointIndex];
+        const closestSeriesIndex = d3.minIndex(closestPointPerSeries, s => s.distance);
+        const pointIndex = closestPointPerSeries[closestSeriesIndex].pointIndex;
+        const point = series[closestSeriesIndex].values[pointIndex];
         return {
             seriesIndex: closestSeriesIndex,
             labels: series[closestSeriesIndex].metric,
@@ -133,8 +120,8 @@ export var RawMetricsGraph = function (_a) {
             y: yScale(point[1]),
         };
     };
-    var highlighted = getClosest();
-    var onMouseDown = function (e) {
+    const highlighted = getClosest();
+    const onMouseDown = (e) => {
         // if shift is down, disable mouse behavior
         if (isShiftDown) {
             return;
@@ -144,9 +131,9 @@ export var RawMetricsGraph = function (_a) {
             return;
         }
         // X/Y coordinate array relative to svg
-        var rel = pointer(e);
-        var xCoordinate = rel[0];
-        var xCoordinateWithoutMargin = xCoordinate - margin;
+        const rel = pointer(e);
+        const xCoordinate = rel[0];
+        const xCoordinateWithoutMargin = xCoordinate - margin;
         if (xCoordinateWithoutMargin >= 0) {
             setRelPos(xCoordinateWithoutMargin);
             setDragging(true);
@@ -154,13 +141,13 @@ export var RawMetricsGraph = function (_a) {
         e.stopPropagation();
         e.preventDefault();
     };
-    var openClosestProfile = function () {
+    const openClosestProfile = () => {
         if (highlighted != null) {
             onSampleClick(Math.round(highlighted.timestamp), highlighted.value, sanitizeHighlightedValues(highlighted.labels) // When a user clicks on any sample in the graph, replace single `\` in the `labelValues` string with doubles `\\` if available.
             );
         }
     };
-    var onMouseUp = function (e) {
+    const onMouseUp = (e) => {
         if (isShiftDown) {
             return;
         }
@@ -176,8 +163,8 @@ export var RawMetricsGraph = function (_a) {
             setRelPos(-1);
             return;
         }
-        var firstTime = xScale.invert(relPos).valueOf();
-        var secondTime = xScale.invert(pos[0]).valueOf();
+        const firstTime = xScale.invert(relPos).valueOf();
+        const secondTime = xScale.invert(pos[0]).valueOf();
         if (firstTime > secondTime) {
             setTimeRange(DateTimeRange.fromAbsoluteDates(secondTime, firstTime));
         }
@@ -188,42 +175,36 @@ export var RawMetricsGraph = function (_a) {
         e.stopPropagation();
         e.preventDefault();
     };
-    var throttledSetPos = throttle(setPos, 20);
-    var onMouseMove = function (e) {
+    const throttledSetPos = throttle(setPos, 20);
+    const onMouseMove = (e) => {
         // do not update position if shift is down because this means the user is locking the tooltip
         if (isShiftDown) {
             return;
         }
         // X/Y coordinate array relative to svg
-        var rel = pointer(e);
-        var xCoordinate = rel[0];
-        var xCoordinateWithoutMargin = xCoordinate - margin;
-        var yCoordinate = rel[1];
-        var yCoordinateWithoutMargin = yCoordinate - margin;
+        const rel = pointer(e);
+        const xCoordinate = rel[0];
+        const xCoordinateWithoutMargin = xCoordinate - margin;
+        const yCoordinate = rel[1];
+        const yCoordinateWithoutMargin = yCoordinate - margin;
         throttledSetPos([xCoordinateWithoutMargin, yCoordinateWithoutMargin]);
     };
-    var findSelectedProfile = function () {
+    const findSelectedProfile = () => {
         if (profile == null) {
             return null;
         }
-        var s = null;
-        var seriesIndex = -1;
-        outer: for (var i = 0; i < series.length; i++) {
-            var keys = profile.query.matchers.map(function (e) { return e.key; });
-            var _loop_1 = function (j) {
-                var matcherKey = keys[j];
-                var label = series[i].metric.find(function (e) { return e.name === matcherKey; });
+        let s = null;
+        let seriesIndex = -1;
+        outer: for (let i = 0; i < series.length; i++) {
+            const keys = profile.query.matchers.map(e => e.key);
+            for (let j = 0; j < keys.length; j++) {
+                const matcherKey = keys[j];
+                const label = series[i].metric.find(e => e.name === matcherKey);
                 if (label === undefined) {
-                    return "continue-outer";
+                    continue outer; // label doesn't exist to begin with
                 }
                 if (profile.query.matchers[j].value !== label.value) {
-                    return "continue-outer";
-                }
-            };
-            for (var j = 0; j < keys.length; j++) {
-                var state_1 = _loop_1(j);
-                switch (state_1) {
-                    case "continue-outer": continue outer;
+                    continue outer; // label values don't match
                 }
             }
             seriesIndex = i;
@@ -233,7 +214,7 @@ export var RawMetricsGraph = function (_a) {
             return null;
         }
         // Find the sample that matches the timestamp
-        var sample = s.values.find(function (v) {
+        const sample = s.values.find(v => {
             return Math.round(v[0]) === time;
         });
         if (sample === undefined) {
@@ -241,7 +222,7 @@ export var RawMetricsGraph = function (_a) {
         }
         return {
             labels: [],
-            seriesIndex: seriesIndex,
+            seriesIndex,
             timestamp: sample[0],
             valuePerSecond: sample[1],
             value: sample[2],
@@ -250,16 +231,16 @@ export var RawMetricsGraph = function (_a) {
             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, delta: profile !== null ? profile === null || profile === void 0 ? void 0 : profile.query.profType.delta : false }) }))), _jsx("div", __assign({ ref: graph, onMouseEnter: function () {
+    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: 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
+                }, 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: [_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", __assign({ className: "circle-group", ref: metricPointRef, style: { fill: color(highlighted.seriesIndex.toString()) } }, { children: _jsx(MetricsCircle, { cx: highlighted.x, cy: highlighted.y }) }))), selected != null && (_jsx("g", __assign({ className: "circle-group", style: (selected === null || selected === void 0 ? void 0 : selected.seriesIndex) != null
+                                                : 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()) }
-                                        : {} }, { children: _jsx(MetricsCircle, { cx: selected.x, cy: selected.y, radius: 5 }) }))), _jsx("g", __assign({ className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: "translate(0,".concat(height - margin, ")") }, { children: xScale.ticks(5).map(function (d, i) { return (_jsxs("g", __assign({ className: "tick", 
+                                        : {}, children: _jsx(MetricsCircle, { cx: selected.x, cy: selected.y, radius: 5 }) })), _jsx("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: xScale.ticks(5).map((d, i) => (_jsxs("g", { className: "tick", 
                                         /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                        transform: "translate(".concat(xScale(d), ", 0)") }, { children: [_jsx("line", { y2: 6, stroke: "currentColor" }), _jsx("text", __assign({ fill: "currentColor", dy: ".71em", y: 9 }, { children: formatDate(d, formatForTimespan(from, to)) }))] }), i)); }) })), _jsx("g", __assign({ className: "y axis", textAnchor: "end", fontSize: "10", fill: "none" }, { children: yScale.ticks(3).map(function (d, i) { return (_jsxs("g", __assign({ className: "tick", 
+                                        transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, stroke: "currentColor" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to)) })] }, i))) }), _jsx("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: yScale.ticks(3).map((d, i) => (_jsxs("g", { className: "tick", 
                                         /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                        transform: "translate(0, ".concat(yScale(d), ")") }, { children: [_jsx("line", { stroke: "currentColor", x2: -6 }), _jsx("text", __assign({ fill: "currentColor", x: -9, dy: '0.32em' }, { children: valueFormatter(d, sampleUnit, 1) }))] }), i)); }) }))] }))] })) }))] }));
+                                        transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { stroke: "currentColor", x2: -6 }), _jsx("text", { fill: "currentColor", x: -9, dy: '0.32em', children: valueFormatter(1000, sampleUnit, 1) })] }, i))) })] })] }) })] }));
 };

package/dist/MetricsSeries/index.js

@@ -1,21 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-var MetricsSeries = function (_a) {
-    var _b;
-    var data = _a.data, line = _a.line, color = _a.color, strokeWidth = _a.strokeWidth;
-    return (_jsx("g", __assign({ className: "line-group" }, { children: _jsx("path", { className: "line", d: (_b = line(data.values)) !== null && _b !== void 0 ? _b : undefined, style: {
-                stroke: color,
-                strokeWidth: strokeWidth,
-            } }) })));
-};
+const MetricsSeries = ({ data, line, color, strokeWidth }) => (_jsx("g", { className: "line-group", children: _jsx("path", { className: "line", d: line(data.values) ?? undefined, style: {
+            stroke: color,
+            strokeWidth,
+        } }) }));
 export default MetricsSeries;

package/dist/ProfileExplorer/ProfileExplorerCompare.js

@@ -1,26 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Query } from '@parca/parser';
 import { ProfileDiffSource, ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
-var ProfileExplorerCompare = function (_a) {
-    var queryClient = _a.queryClient, queryA = _a.queryA, queryB = _a.queryB, profileA = _a.profileA, profileB = _a.profileB, selectQueryA = _a.selectQueryA, selectQueryB = _a.selectQueryB, selectProfileA = _a.selectProfileA, selectProfileB = _a.selectProfileB, closeProfile = _a.closeProfile, navigateTo = _a.navigateTo;
-    var closeProfileA = function () {
+const ProfileExplorerCompare = ({ queryClient, queryA, queryB, profileA, profileB, selectQueryA, selectQueryB, selectProfileA, selectProfileB, closeProfile, navigateTo, }) => {
+    const closeProfileA = () => {
         closeProfile('A');
     };
-    var closeProfileB = function () {
+    const closeProfileB = () => {
         closeProfile('B');
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "grid grid-cols-2" }, { children: [_jsx("div", __assign({ className: "pr-2" }, { children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, onCompareProfile: function () { } }) })), _jsx("div", __assign({ className: "pl-2" }, { children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, onCompareProfile: function () { } }) }))] })), _jsx("div", __assign({ className: "grid grid-cols-1" }, { children: profileA != null && profileB != null ? (_jsx(ProfileViewWithData, { navigateTo: navigateTo, queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource()) })) : (_jsx("div", { children: _jsx("div", __assign({ className: "my-20 text-center" }, { children: _jsx("p", { children: "Select a profile on both sides." }) })) })) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-2", children: [_jsx("div", { className: "pr-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, onCompareProfile: () => { } }) }), _jsx("div", { className: "pl-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, onCompareProfile: () => { } }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx(ProfileViewWithData, { navigateTo: navigateTo, queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource()) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
 };
 export default ProfileExplorerCompare;

package/dist/ProfileExplorer/ProfileExplorerSingle.js

@@ -1,19 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
-var ProfileExplorerSingle = function (_a) {
-    var queryClient = _a.queryClient, query = _a.query, selectQuery = _a.selectQuery, selectProfile = _a.selectProfile, profile = _a.profile, compareProfile = _a.compareProfile, navigateTo = _a.navigateTo;
-    return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: function () { }, profileSelection: profile, comparing: false, onCompareProfile: compareProfile, enforcedProfileName: '' }) }) })), _jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: profile != null ? (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo })) : (_jsx(_Fragment, {})) }) }))] }));
+const ProfileExplorerSingle = ({ queryClient, query, selectQuery, selectProfile, profile, compareProfile, navigateTo, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-1", children: _jsx("div", { children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: () => { }, profileSelection: profile, comparing: false, onCompareProfile: compareProfile, enforcedProfileName: '' }) }) }), _jsx("div", { className: "grid grid-cols-1", children: _jsx("div", { children: profile != null ? (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo })) : (_jsx(_Fragment, {})) }) })] }));
 };
 export default ProfileExplorerSingle;