@parca/profile 0.16.184 → 0.16.185

package/dist/ProfileView/VisualizationPanel.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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -28,12 +17,11 @@ import cx from 'classnames';
 import { IconButton } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
 import ViewSelector from './ViewSelector';
-export var VisualizationPanel = React.memo(function VisualizationPanel(_a) {
-    var dashboardItem = _a.dashboardItem, index = _a.index, isMultiPanelView = _a.isMultiPanelView, handleClosePanel = _a.handleClosePanel, navigateTo = _a.navigateTo, dragHandleProps = _a.dragHandleProps, getDashboardItemByType = _a.getDashboardItemByType;
-    var _b = useState(_jsx(_Fragment, {})), actionButtons = _b[0], setActionButtons = _b[1];
-    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "flex w-full justify-end gap-2 pb-2" }, { children: [_jsxs("div", __assign({ className: "flex w-full items-center justify-between" }, { children: [_jsxs("div", __assign({ className: "flex" }, { children: [_jsx("div", __assign({ className: cx(isMultiPanelView ? 'visible' : 'invisible', 'flex items-center') }, dragHandleProps, { children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) })), _jsx(_Fragment, { children: actionButtons })] })), _jsx(ViewSelector, { defaultValue: dashboardItem, navigateTo: navigateTo, position: index })] })), isMultiPanelView && (_jsx(IconButton, { onClick: function () { return handleClosePanel(dashboardItem); }, icon: _jsx(CloseIcon, {}) }))] })), getDashboardItemByType({
+export const VisualizationPanel = React.memo(function VisualizationPanel({ dashboardItem, index, isMultiPanelView, handleClosePanel, navigateTo, dragHandleProps, getDashboardItemByType, }) {
+    const [actionButtons, setActionButtons] = useState(_jsx(_Fragment, {}));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-end gap-2 pb-2", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsxs("div", { className: "flex", children: [_jsx("div", { className: cx(isMultiPanelView ? 'visible' : 'invisible', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), _jsx(_Fragment, { children: actionButtons })] }), _jsx(ViewSelector, { defaultValue: dashboardItem, navigateTo: navigateTo, position: index })] }), isMultiPanelView && (_jsx(IconButton, { onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
                 type: dashboardItem,
                 isHalfScreen: isMultiPanelView,
-                setActionButtons: setActionButtons,
+                setActionButtons,
             })] }));
 });

package/dist/ProfileView/index.js

@@ -1,59 +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);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
@@ -90,130 +34,105 @@ function arrayEquals(a, b) {
     return (Array.isArray(a) &&
         Array.isArray(b) &&
         a.length === b.length &&
-        a.every(function (val, index) { return val === b[index]; }));
+        a.every((val, index) => val === b[index]));
 }
-export var ProfileView = function (_a) {
-    var total = _a.total, filtered = _a.filtered, flamegraphData = _a.flamegraphData, topTableData = _a.topTableData, callgraphData = _a.callgraphData, sampleUnit = _a.sampleUnit, profileSource = _a.profileSource, queryClient = _a.queryClient, navigateTo = _a.navigateTo, onDownloadPProf = _a.onDownloadPProf, onFlamegraphContainerResize = _a.onFlamegraphContainerResize, pprofDownloading = _a.pprofDownloading;
-    var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
-    var _c = useState([]), curPath = _c[0], setCurPath = _c[1];
-    var _d = useURLState({
+export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, onFlamegraphContainerResize, pprofDownloading, }) => {
+    const { ref, dimensions } = useContainerDimensions();
+    const [curPath, setCurPath] = useState([]);
+    const [rawDashboardItems, setDashboardItems] = useURLState({
         param: 'dashboard_items',
-        navigateTo: navigateTo,
-    }), rawDashboardItems = _d[0], setDashboardItems = _d[1];
-    var _e = useState(false), graphvizLoaded = _e[0], setGraphvizLoaded = _e[1];
-    var _f = useState(undefined), callgraphSVG = _f[0], setCallgraphSVG = _f[1];
-    var currentSearchString = useURLState({ param: 'search_string' })[0];
-    var dashboardItems = useMemo(function () {
+        navigateTo,
+    });
+    const [graphvizLoaded, setGraphvizLoaded] = useState(false);
+    const [callgraphSVG, setCallgraphSVG] = useState(undefined);
+    const [currentSearchString] = useURLState({ param: 'search_string' });
+    const dashboardItems = useMemo(() => {
         if (rawDashboardItems !== undefined) {
             return rawDashboardItems;
         }
         return ['icicle'];
     }, [rawDashboardItems]);
-    var isDarkMode = useAppSelector(selectDarkMode);
-    var isMultiPanelView = dashboardItems.length > 1;
-    var _g = useParcaContext(), loader = _g.loader, perf = _g.perf;
-    useEffect(function () {
+    const isDarkMode = useAppSelector(selectDarkMode);
+    const isMultiPanelView = dashboardItems.length > 1;
+    const { loader, perf } = useParcaContext();
+    useEffect(() => {
         // Reset the current path when the profile source changes
         setCurPath([]);
     }, [profileSource]);
-    useEffect(function () {
-        function loadGraphviz() {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, graphviz.loadWASM()];
-                        case 1:
-                            _a.sent();
-                            setGraphvizLoaded(true);
-                            return [2 /*return*/];
-                    }
-                });
-            });
+    useEffect(() => {
+        async function loadGraphviz() {
+            await graphviz.loadWASM();
+            setGraphvizLoaded(true);
         }
         void loadGraphviz();
     }, []);
-    var isLoading = useMemo(function () {
+    const isLoading = useMemo(() => {
         if (dashboardItems.includes('icicle')) {
-            return Boolean(flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.loading);
+            return Boolean(flamegraphData?.loading);
         }
         if (dashboardItems.includes('callgraph')) {
-            return Boolean(callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.loading) || Boolean(callgraphSVG === undefined);
+            return Boolean(callgraphData?.loading) || Boolean(callgraphSVG === undefined);
         }
         if (dashboardItems.includes('table')) {
-            return Boolean(topTableData === null || topTableData === void 0 ? void 0 : topTableData.loading);
+            return Boolean(topTableData?.loading);
         }
         return false;
     }, [
         dashboardItems,
-        callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.loading,
-        flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.loading,
-        topTableData === null || topTableData === void 0 ? void 0 : topTableData.loading,
+        callgraphData?.loading,
+        flamegraphData?.loading,
+        topTableData?.loading,
         callgraphSVG,
     ]);
-    var isLoaderVisible = useDelayedLoader(isLoading);
-    var maxColor = getNewSpanColor(isDarkMode);
-    var minColor = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
-    var colorRange = [minColor, maxColor];
+    const isLoaderVisible = useDelayedLoader(isLoading);
+    const maxColor = getNewSpanColor(isDarkMode);
+    const minColor = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
+    const colorRange = [minColor, maxColor];
     // Note: If we want to further optimize the experience, we could try to load the graphviz layout in the ProfileViewWithData layer
     // and pass it down to the ProfileView. This would allow us to load the layout in parallel with the flamegraph data.
     // However, the layout calculation is dependent on the width and color range of the graph container, which is why it is done at this level
-    useEffect(function () {
-        function loadCallgraphSVG(graph, width, colorRange) {
-            return __awaiter(this, void 0, void 0, function () {
-                var dataAsDot, svgGraph;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, setCallgraphSVG(undefined)];
-                        case 1:
-                            _a.sent();
-                            return [4 /*yield*/, jsonToDot({
-                                    graph: graph,
-                                    width: width,
-                                    colorRange: colorRange,
-                                })];
-                        case 2:
-                            dataAsDot = _a.sent();
-                            return [4 /*yield*/, graphviz.layout(dataAsDot, 'svg', 'dot')];
-                        case 3:
-                            svgGraph = _a.sent();
-                            return [4 /*yield*/, setCallgraphSVG(svgGraph)];
-                        case 4:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
+    useEffect(() => {
+        async function loadCallgraphSVG(graph, width, colorRange) {
+            await setCallgraphSVG(undefined);
+            // Translate JSON to 'dot' graph string
+            const dataAsDot = await jsonToDot({
+                graph,
+                width,
+                colorRange,
             });
+            // Use Graphviz-WASM to translate the 'dot' graph to a 'JSON' graph
+            const svgGraph = await graphviz.layout(dataAsDot, 'svg', 'dot');
+            await setCallgraphSVG(svgGraph);
         }
         if (graphvizLoaded &&
-            (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) !== null &&
-            (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) !== undefined &&
-            (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined) {
-            void loadCallgraphSVG(callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data, dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange);
+            callgraphData?.data !== null &&
+            callgraphData?.data !== undefined &&
+            dimensions?.width !== undefined) {
+            void loadCallgraphSVG(callgraphData?.data, dimensions?.width, colorRange);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [graphvizLoaded, callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data]);
-    if ((flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error) !== null) {
-        console.error('Error: ', flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error);
-        return (_jsxs("div", __assign({ className: "flex justify-center p-10" }, { children: ["An error occurred: ", flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error.message] })));
+    }, [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] }));
     }
-    var setNewCurPath = function (path) {
+    const setNewCurPath = (path) => {
         if (!arrayEquals(curPath, path)) {
             setCurPath(path);
         }
     };
-    var getDashboardItemByType = function (_a) {
-        var type = _a.type, isHalfScreen = _a.isHalfScreen, setActionButtons = _a.setActionButtons;
+    const getDashboardItemByType = ({ type, isHalfScreen, setActionButtons, }) => {
         switch (type) {
             case 'icicle': {
-                return (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null ? (_jsx(ConditionalWrapper, __assign({ condition: (perf === null || perf === void 0 ? void 0 : perf.onRender) != null, WrapperComponent: Profiler, wrapperProps: {
+                return flamegraphData?.data != null ? (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
-                        onRender: perf === null || perf === void 0 ? void 0 : perf.onRender,
-                    } }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, total: Number(total), filtered: Number(filtered), sampleUnit: sampleUnit, onContainerResize: onFlamegraphContainerResize, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) }))) : (_jsx(_Fragment, { children: " " }));
+                        onRender: perf?.onRender,
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, total: total, filtered: filtered, sampleUnit: sampleUnit, onContainerResize: onFlamegraphContainerResize, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) })) : (_jsx(_Fragment, { children: " " }));
             }
             case 'callgraph': {
-                return (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) !== undefined &&
+                return callgraphData?.data !== undefined &&
                     callgraphSVG !== undefined &&
-                    (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined ? (_jsx(Callgraph, { data: callgraphData.data, svgString: callgraphSVG, sampleUnit: sampleUnit, width: isHalfScreen ? (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) / 2 : dimensions === null || dimensions === void 0 ? void 0 : dimensions.width })) : (_jsx(_Fragment, {}));
+                    dimensions?.width !== undefined ? (_jsx(Callgraph, { data: callgraphData.data, svgString: callgraphSVG, sampleUnit: sampleUnit, width: isHalfScreen ? dimensions?.width / 2 : dimensions?.width })) : (_jsx(_Fragment, {}));
             }
             case 'table': {
                 return topTableData != null ? (_jsx(TopTable, { loading: topTableData.loading, data: topTableData.data, sampleUnit: sampleUnit, navigateTo: navigateTo, setActionButtons: setActionButtons, currentSearchString: currentSearchString })) : (_jsx(_Fragment, {}));
@@ -223,27 +142,28 @@ export var ProfileView = function (_a) {
             }
         }
     };
-    var handleClosePanel = function (visualizationType) {
-        var newDashboardItems = dashboardItems.filter(function (item) { return item !== visualizationType; });
+    const handleClosePanel = (visualizationType) => {
+        const newDashboardItems = dashboardItems.filter(item => item !== visualizationType);
         setDashboardItems(newDashboardItems);
     };
-    var onDragEnd = function (result) {
-        var destination = result.destination, source = result.source, draggableId = result.draggableId;
-        if (Boolean(destination) && (destination === null || destination === void 0 ? void 0 : destination.index) !== source.index) {
-            var targetItem_1 = draggableId;
-            var otherItems = dashboardItems.filter(function (item) { return item !== targetItem_1; });
-            var newDashboardItems = destination.index < source.index
-                ? __spreadArray([targetItem_1], otherItems, true) : __spreadArray(__spreadArray([], otherItems, true), [targetItem_1], false);
+    const onDragEnd = (result) => {
+        const { destination, source, draggableId } = result;
+        if (Boolean(destination) && destination?.index !== source.index) {
+            const targetItem = draggableId;
+            const otherItems = dashboardItems.filter(item => item !== targetItem);
+            const newDashboardItems = destination.index < source.index
+                ? [targetItem, ...otherItems]
+                : [...otherItems, targetItem];
             setDashboardItems(newDashboardItems);
         }
     };
-    return (_jsx(KeyDownProvider, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex w-full py-3" }, { children: [_jsxs("div", __assign({ className: "flex space-x-4 lg:w-1/2" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
+    return (_jsx(KeyDownProvider, { children: _jsx("div", { className: "py-3", children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", { className: "flex w-full py-3", children: [_jsxs("div", { className: "flex space-x-4 lg:w-1/2", children: [_jsxs("div", { className: "flex space-x-1", children: [profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, { color: "neutral", onClick: e => {
                                                         e.preventDefault();
                                                         onDownloadPProf();
-                                                    }, disabled: pprofDownloading }, { children: pprofDownloading != null && pprofDownloading
+                                                    }, disabled: pprofDownloading, children: pprofDownloading != null && pprofDownloading
                                                         ? 'Downloading'
-                                                        : 'Download pprof' }))] })), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] })), _jsx("div", __assign({ className: "ml-auto flex gap-2" }, { children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) }))] })), _jsx("div", __assign({ className: "w-full", ref: ref }, { children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, __assign({ onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable", direction: "horizontal" }, { children: function (provided) { return (_jsx("div", __assign({ ref: provided.innerRef, className: "flex w-full justify-between space-x-4" }, provided.droppableProps, { children: dashboardItems.map(function (dashboardItem, index) {
-                                            return (_jsx(Draggable, __assign({ draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView }, { children: function (provided, snapshot) { return (_createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: dashboardItem, className: cx('rounded border border-gray-300 p-3 dark:border-gray-500 dark:bg-gray-700', isMultiPanelView ? 'w-1/2' : 'w-full', snapshot.isDragging ? 'bg-gray-200' : 'bg-white') }),
-                                                    _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, navigateTo: navigateTo, index: index }))); } }), dashboardItem));
-                                        }) }))); } })) }))) }))] }) }) })) }));
+                                                        : 'Download pprof' })] }), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] }), _jsx("div", { className: "ml-auto flex gap-2", children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) })] }), _jsx("div", { className: "w-full", ref: ref, children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: "flex w-full justify-between space-x-4", ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
+                                            return (_jsx(Draggable, { draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView, children: (provided, snapshot) => (_createElement("div", { ref: provided.innerRef, ...provided.draggableProps, key: dashboardItem, className: cx('rounded border border-gray-300 p-3 dark:border-gray-500 dark:bg-gray-700', isMultiPanelView ? 'w-1/2' : 'w-full', snapshot.isDragging ? 'bg-gray-200' : 'bg-white') },
+                                                    _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, navigateTo: navigateTo, index: index }))) }, dashboardItem));
+                                        }) })) }) })) })] }) }) }) }));
 };

package/dist/ProfileViewWithData.js

@@ -1,39 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -55,50 +19,47 @@ import { saveAsBlob } from '@parca/utilities';
 import { ProfileView } from './ProfileView';
 import { useQuery } from './useQuery';
 import { downloadPprof } from './utils';
-export var ProfileViewWithData = function (_a) {
-    var _b, _c, _d, _e;
-    var queryClient = _a.queryClient, profileSource = _a.profileSource, navigateTo = _a.navigateTo;
-    var metadata = useGrpcMetadata();
-    var dashboardItems = useURLState({ param: 'dashboard_items', navigateTo: navigateTo })[0];
-    var _f = useState(0), nodeTrimThreshold = _f[0], setNodeTrimThreshold = _f[1];
-    var enableTrimming = useUserPreference(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key)[0];
-    var _g = useState(false), pprofDownloading = _g[0], setPprofDownloading = _g[1];
-    useEffect(function () {
+export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, }) => {
+    const metadata = useGrpcMetadata();
+    const [dashboardItems] = useURLState({ param: 'dashboard_items', navigateTo });
+    const [nodeTrimThreshold, setNodeTrimThreshold] = useState(0);
+    const [enableTrimming] = useUserPreference(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
+    const [pprofDownloading, setPprofDownloading] = useState(false);
+    useEffect(() => {
         if (!enableTrimming) {
             setNodeTrimThreshold(0);
         }
     }, [enableTrimming]);
-    var onFlamegraphContainerResize = function (width) {
+    const onFlamegraphContainerResize = (width) => {
         if (!enableTrimming || width === 0) {
             return;
         }
-        var threshold = (1 / width) * 100;
+        const threshold = (1 / width) * 100;
         if (threshold === nodeTrimThreshold) {
             return;
         }
         setNodeTrimThreshold(threshold);
     };
-    var _h = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
+    const { isLoading: flamegraphLoading, response: flamegraphResponse, error: flamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
         skip: !dashboardItems.includes('icicle'),
-        nodeTrimThreshold: nodeTrimThreshold,
-    }), flamegraphLoading = _h.isLoading, flamegraphResponse = _h.response, flamegraphError = _h.error;
-    var perf = useParcaContext().perf;
-    var _j = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
+        nodeTrimThreshold,
+    });
+    const { perf } = useParcaContext();
+    const { isLoading: topTableLoading, response: topTableResponse, error: topTableError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
         skip: !dashboardItems.includes('table'),
-    }), topTableLoading = _j.isLoading, topTableResponse = _j.response, topTableError = _j.error;
-    var _k = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
+    });
+    const { isLoading: callgraphLoading, response: callgraphResponse, error: callgraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
         skip: !dashboardItems.includes('callgraph'),
-    }), callgraphLoading = _k.isLoading, callgraphResponse = _k.response, callgraphError = _k.error;
-    useEffect(function () {
-        var _a, _b;
-        if (!flamegraphLoading && (flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) === 'flamegraph') {
-            perf === null || perf === void 0 ? void 0 : perf.markInteraction('Flamegraph render', flamegraphResponse.report.flamegraph.total);
+    });
+    useEffect(() => {
+        if (!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') {
+            perf?.markInteraction('Flamegraph render', flamegraphResponse.report.flamegraph.total);
         }
-        if (!topTableLoading && (topTableResponse === null || topTableResponse === void 0 ? void 0 : topTableResponse.report.oneofKind) === 'top') {
-            perf === null || perf === void 0 ? void 0 : perf.markInteraction('Top table render', (_a = topTableResponse === null || topTableResponse === void 0 ? void 0 : topTableResponse.report) === null || _a === void 0 ? void 0 : _a.top.total);
+        if (!topTableLoading && topTableResponse?.report.oneofKind === 'top') {
+            perf?.markInteraction('Top table render', topTableResponse?.report?.top.total);
         }
-        if (!callgraphLoading && (callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report.oneofKind) === 'callgraph') {
-            perf === null || perf === void 0 ? void 0 : perf.markInteraction('Callgraph render', (_b = callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report) === null || _b === void 0 ? void 0 : _b.callgraph.cumulative);
+        if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
+            perf?.markInteraction('Callgraph render', callgraphResponse?.report?.callgraph.cumulative);
         }
     }, [
         flamegraphLoading,
@@ -109,38 +70,26 @@ export var ProfileViewWithData = function (_a) {
         topTableResponse,
         perf,
     ]);
-    var sampleUnit = profileSource.ProfileType().sampleUnit;
-    var downloadPProfClick = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var blob, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (profileSource == null || queryClient == null) {
-                        return [2 /*return*/];
-                    }
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    setPprofDownloading(true);
-                    return [4 /*yield*/, downloadPprof(profileSource.QueryRequest(), queryClient, metadata)];
-                case 2:
-                    blob = _a.sent();
-                    saveAsBlob(blob, "profile.pb.gz");
-                    setPprofDownloading(false);
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_1 = _a.sent();
-                    setPprofDownloading(false);
-                    console.error('Error while querying', error_1);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
+    const sampleUnit = profileSource.ProfileType().sampleUnit;
+    const downloadPProfClick = async () => {
+        if (profileSource == null || queryClient == null) {
+            return;
+        }
+        try {
+            setPprofDownloading(true);
+            const blob = await downloadPprof(profileSource.QueryRequest(), queryClient, metadata);
+            saveAsBlob(blob, `profile.pb.gz`);
+            setPprofDownloading(false);
+        }
+        catch (error) {
+            setPprofDownloading(false);
+            console.error('Error while querying', error);
+        }
+    };
     // TODO: Refactor how we get responses such that we have a single response,
     //  regardless of the report type.
-    var total = BigInt(0);
-    var filtered = BigInt(0);
+    let total = BigInt(0);
+    let filtered = BigInt(0);
     if (flamegraphResponse !== null) {
         total = BigInt(flamegraphResponse.total);
         filtered = BigInt(flamegraphResponse.filtered);
@@ -155,22 +104,22 @@ export var ProfileViewWithData = function (_a) {
     }
     return (_jsx(ProfileView, { total: total, filtered: filtered, flamegraphData: {
             loading: flamegraphLoading,
-            data: (flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) === 'flamegraph'
-                ? (_b = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report) === null || _b === void 0 ? void 0 : _b.flamegraph
+            data: flamegraphResponse?.report.oneofKind === 'flamegraph'
+                ? flamegraphResponse?.report?.flamegraph
                 : undefined,
-            total: BigInt((_c = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.total) !== null && _c !== void 0 ? _c : '0'),
-            filtered: BigInt((_d = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.filtered) !== null && _d !== void 0 ? _d : '0'),
+            total: BigInt(flamegraphResponse?.total ?? '0'),
+            filtered: BigInt(flamegraphResponse?.filtered ?? '0'),
             error: flamegraphError,
         }, topTableData: {
             loading: topTableLoading,
-            data: (topTableResponse === null || topTableResponse === void 0 ? void 0 : topTableResponse.report.oneofKind) === 'top' ? topTableResponse.report.top : undefined,
+            data: topTableResponse?.report.oneofKind === 'top' ? topTableResponse.report.top : undefined,
             error: topTableError,
         }, callgraphData: {
             loading: callgraphLoading,
-            data: (callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report.oneofKind) === 'callgraph'
-                ? (_e = callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report) === null || _e === void 0 ? void 0 : _e.callgraph
+            data: callgraphResponse?.report.oneofKind === 'callgraph'
+                ? callgraphResponse?.report?.callgraph
                 : undefined,
             error: callgraphError,
-        }, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: function () { return void downloadPProfClick(); }, pprofDownloading: pprofDownloading, onFlamegraphContainerResize: onFlamegraphContainerResize }));
+        }, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading, onFlamegraphContainerResize: onFlamegraphContainerResize }));
 };
 export default ProfileViewWithData;