@parca/profile 0.16.450 → 0.16.451

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.451](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.450...@parca/profile@0.16.451) (2024-11-28)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.450](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.449...@parca/profile@0.16.450) (2024-11-28)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.js

@@ -14,7 +14,7 @@ import { QueryRequest_ReportType } from '@parca/client';
 import { useParcaContext, useURLState } from '@parca/components';
 import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_START_LINE, FIELD_FUNCTION_SYSTEM_NAME, FIELD_INLINED, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
 import { arrowToString } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
-import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
+import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
 import { useQuery } from '../../useQuery';
 export const useGraphTooltipMetaInfo = ({ table, row }) => {
     const mappingFile = arrowToString(table.getChild(FIELD_MAPPING_FILE)?.get(row));

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -16,7 +16,7 @@ import { useURLState } from '@parca/components';
 import { setHoveringNode, useAppDispatch } from '@parca/store';
 import { scaleLinear, selectQueryParam } from '@parca/utilities';
 import GraphTooltip from '../../GraphTooltip';
-import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
+import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import useColoredGraph from './useColoredGraph';

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -21,7 +21,7 @@ import { getLastItem, scaleLinear } from '@parca/utilities';
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
-import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
+import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
 import ContextMenu from './ContextMenu';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import { useFilenamesList } from './useMappingList';

package/dist/ProfileIcicleGraph/index.js

@@ -15,8 +15,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { IcicleGraphSkeleton, useParcaContext, useURLState } from '@parca/components';
 import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
-import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
-import DiffLegend from '../components/DiffLegend';
+import DiffLegend from '../ProfileView/components/DiffLegend';
+import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
 import { IcicleGraph } from './IcicleGraph';
 import { FIELD_FUNCTION_NAME, IcicleGraphArrow } from './IcicleGraphArrow';
 import useMappingList from './IcicleGraphArrow/useMappingList';

package/dist/ProfileView/components/ActionButtons/GroupByDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupByDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ActionButtons/GroupByDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAoQzD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/{components → ProfileView/components}/ActionButtons/GroupByDropdown.js

@@ -16,7 +16,7 @@ import { Transition } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import Select from 'react-select';
 import { Button } from '@parca/components';
-import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
 const groupByOptions = [
     {
         value: FIELD_FUNCTION_NAME,

package/dist/ProfileView/components/ActionButtons/SortByDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortByDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ActionButtons/SortByDropdown.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,cAAc,QAAO,KAAK,CAAC,GAAG,CAAC,OA2DpC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/{components → ProfileView/components}/ActionButtons/SortByDropdown.js

@@ -12,8 +12,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Select, useURLState } from '@parca/components';
-import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
+import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+import { useProfileViewContext } from '../../context/ProfileViewContext';
 const SortByDropdown = () => {
     const [storeSortBy, setStoreSortBy] = useURLState('sort_by', {
         defaultValue: FIELD_FUNCTION_NAME,

package/dist/ProfileView/components/ColorStackLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAYrC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,uCAA8C,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OAmGrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileView/{ColorStackLegend.js → components/ColorStackLegend.js}

@@ -17,8 +17,8 @@ import cx from 'classnames';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
 import { EVERYTHING_ELSE, selectDarkMode, useAppSelector } from '@parca/store';
-import { getMappingColors } from '../ProfileIcicleGraph/IcicleGraphArrow/';
-import useMappingList from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+import { getMappingColors } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import useMappingList from '../../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
     const isDarkMode = useAppSelector(selectDarkMode);
     const currentColorProfile = useCurrentColorProfile();

package/dist/ProfileView/components/DashboardItems/index.d.ts

@@ -0,0 +1,26 @@
+import { ProfilerOnRenderCallback } from 'react';
+import { ProfileSource } from '../../../ProfileSource';
+import type { CallgraphData, FlamegraphData, SourceData, TopTableData, VisualizationType } from '../../types/visualization';
+interface GetDashboardItemProps {
+    type: VisualizationType;
+    isHalfScreen: boolean;
+    dimensions: DOMRect | undefined;
+    flamegraphData: FlamegraphData;
+    topTableData?: TopTableData;
+    callgraphData?: CallgraphData;
+    sourceData?: SourceData;
+    profileSource?: ProfileSource;
+    total: bigint;
+    filtered: bigint;
+    curPath: string[];
+    setNewCurPath: (path: string[]) => void;
+    currentSearchString?: string;
+    setSearchString?: (value: string) => void;
+    callgraphSVG?: string;
+    perf?: {
+        onRender?: ProfilerOnRenderCallback;
+    };
+}
+export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, }: GetDashboardItemProps) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/DashboardItems/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,mNAiB1B,qBAAqB,KAAG,GAAG,CAAC,OA+E9B,CAAC"}

package/dist/ProfileView/components/DashboardItems/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment } 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { Profiler } from 'react';
+import { ConditionalWrapper } from '@parca/components';
+import Callgraph from '../../../Callgraph';
+import ProfileIcicleGraph from '../../../ProfileIcicleGraph';
+import { SourceView } from '../../../SourceView';
+import { Table } from '../../../Table';
+export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, }) => {
+    switch (type) {
+        case 'icicle':
+            return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
+                    id: 'icicleGraph',
+                    onRender: perf?.onRender ?? (() => { }),
+                }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamegraphData.loading, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
+                        ? isHalfScreen
+                            ? (dimensions.width - 54) / 2
+                            : dimensions.width - 16
+                        : 0, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading }) }));
+        case 'callgraph':
+            return callgraphData?.data !== undefined &&
+                callgraphSVG !== undefined &&
+                dimensions?.width !== undefined ? (_jsx(Callgraph, { data: callgraphData.data, svgString: callgraphSVG, profileType: profileSource?.ProfileType(), width: isHalfScreen ? dimensions?.width / 2 : dimensions?.width })) : (_jsx(_Fragment, {}));
+        case 'table':
+            return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), currentSearchString: currentSearchString, setSearchString: setSearchString, isHalfScreen: isHalfScreen, metadataMappingFiles: flamegraphData.metadataMappingFiles })) : (_jsx(_Fragment, {}));
+        case 'source':
+            return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered })) : (_jsx(_Fragment, {}));
+        default:
+            return _jsx(_Fragment, {});
+    }
+};

package/dist/ProfileView/components/DashboardLayout/index.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { VisualizationType } from '../../types/visualization';
+interface DashboardLayoutProps {
+    getDashboardItemByType: (props: {
+        type: VisualizationType;
+        isHalfScreen: boolean;
+    }) => JSX.Element;
+    actionButtons: {
+        icicle: JSX.Element;
+        table: JSX.Element;
+    };
+}
+export declare const DashboardLayout: FC<DashboardLayoutProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/DashboardLayout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardLayout/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAYzB,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAG5D,UAAU,oBAAoB;IAC5B,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,iBAAiB,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,aAAa,EAAE;QACb,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;QACpB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2DpD,CAAC"}

package/dist/ProfileView/components/DashboardLayout/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
+import { useDashboard } from '../../context/DashboardContext';
+import { VisualizationContainer } from '../VisualizationContainer';
+export const DashboardLayout = ({ getDashboardItemByType, actionButtons, }) => {
+    const { dashboardItems, setDashboardItems, isMultiPanelView } = useDashboard();
+    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(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsxs("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2 mt-4' : 'grid-cols-1'), ...provided.droppableProps, children: [dashboardItems.map((dashboardItem, index) => (_jsx(Draggable, { draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView, children: (provided, snapshot) => (_jsx(VisualizationContainer, { provided: provided, snapshot: snapshot, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, isMultiPanelView: isMultiPanelView, index: index, actionButtons: actionButtons })) }, dashboardItem))), provided.placeholder] })) }) }));
+};

package/dist/ProfileView/components/DiffLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/DiffLegend.tsx"],"names":[],"mappings":"AA0DA,QAAA,MAAM,UAAU,QAAO,GAAG,CAAC,OAqD1B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/ProfileView/components/FilterByFunctionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterByFunctionButton.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/FilterByFunctionButton.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,sBAAsB,QAAO,GAAG,CAAC,OAuCtC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/ProfileView/components/ProfileHeader/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface ProfileHeaderProps {
+    profileSourceString?: string;
+    hasProfileSource: boolean;
+    externalMainActions?: React.ReactNode;
+}
+export declare const ProfileHeader: FC<ProfileHeaderProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/ProfileHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileHeader/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,UAAU,kBAAkB;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4ChD,CAAC"}

package/dist/ProfileView/components/ProfileHeader/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cx from 'classnames';
+export const ProfileHeader = ({ profileSourceString, hasProfileSource, externalMainActions, }) => {
+    const headerParts = profileSourceString?.split('"') ?? [];
+    const showDivider = hasProfileSource && (externalMainActions === null || externalMainActions === undefined);
+    return (_jsxs(_Fragment, { children: [showDivider && (_jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" })), _jsx("div", { className: cx('flex w-full', hasProfileSource || externalMainActions != null ? 'justify-start' : 'justify-end', {
+                    'items-end mb-4': !hasProfileSource && externalMainActions != null,
+                    'items-center mb-2': hasProfileSource,
+                }), children: _jsxs("div", { children: [hasProfileSource && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "text-xs font-medium", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs font-medium", children: headerParts.length > 1
+                                        ? headerParts[headerParts.length - 1].replace(/"/g, '')
+                                        : '' })] })), externalMainActions] }) })] }));
+};

package/dist/ProfileView/components/ShareButton/ResultBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultBox.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ShareButton/ResultBox.tsx"],"names":[],"mappings":"AAoBA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,QAAA,MAAM,SAAS,yBAA6B,KAAK,KAAG,GAAG,CAAC,OAqCvD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/{components → ProfileView/components}/ShareButton/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { QueryRequest, QueryServiceClient } from '@parca/client';
-import { ProfileSource } from '../../ProfileSource';
+import { ProfileSource } from '../../../ProfileSource';
 interface Props {
     profileSource?: ProfileSource;
     queryClient?: QueryServiceClient;

package/dist/ProfileView/components/ShareButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ShareButton/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAG/D,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,6BAA6B,EAAE,KAAK,CAAC,SAAS,CAAC;CAChD;AAkGD,QAAA,MAAM,WAAW,oHAOd,KAAK,KAAG,GAAG,CAAC,OA4Ed,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AA6H1C,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsJzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/{components/VisualisationToolbar → ProfileView/components/Toolbars}/MultiLevelDropdown.js

@@ -16,8 +16,8 @@ import { Menu } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { FIELD_FUNCTION_NAME, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
+import { FIELD_FUNCTION_NAME } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+import { useProfileViewContext } from '../../context/ProfileViewContext';
 const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdown, isNested = false, activeValueForSortBy, activeValueForColorBy, value, disabled = false, icon, customSubmenu, }) => {
     let isActive = false;
     if (isNested) {

package/dist/ProfileView/components/Toolbars/TableColumnsDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumnsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,oBAAoB,qCAAoC,KAAK,KAAG,GAAG,CAAC,OA6LzE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/{components/VisualisationToolbar → ProfileView/components/Toolbars}/TableColumnsDropdown.js

@@ -15,10 +15,10 @@ import { useEffect, useMemo, useState } from 'react';
 import { createColumnHelper } from '@tanstack/table-core';
 import { useURLState } from '@parca/components';
 import { valueFormatter } from '@parca/utilities';
-import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
-import { isDummyRow } from '../../Table';
-import ColumnsVisibility from '../../Table/ColumnsVisibility';
-import { addPlusSign, getRatioString } from '../../Table/utils/functions';
+import { isDummyRow } from '../../../Table';
+import ColumnsVisibility from '../../../Table/ColumnsVisibility';
+import { addPlusSign, getRatioString } from '../../../Table/utils/functions';
+import { useProfileViewContext } from '../../context/ProfileViewContext';
 const TableColumnsDropdown = ({ profileType, total, filtered }) => {
     const { compareMode } = useProfileViewContext();
     const [tableColumns, setTableColumns] = useURLState('table_columns', {

package/dist/ProfileView/components/Toolbars/index.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { QueryServiceClient } from '@parca/client';
+import { ProfileType } from '@parca/parser';
+import { ProfileSource } from '../../../ProfileSource';
+export interface VisualisationToolbarProps {
+    groupBy: string[];
+    toggleGroupBy: (key: string) => void;
+    hasProfileSource: boolean;
+    pprofdownloading?: boolean;
+    profileSource?: ProfileSource;
+    queryClient?: QueryServiceClient;
+    onDownloadPProf: () => void;
+    curPath: string[];
+    setNewCurPath: (path: string[]) => void;
+    profileType?: ProfileType;
+    total: bigint;
+    filtered: bigint;
+    currentSearchString?: string;
+    setSearchString?: (value: string) => void;
+    groupByLabels: string[];
+    preferencesModal?: boolean;
+    profileViewExternalSubActions?: React.ReactNode;
+    clearSelection: () => void;
+    setGroupByLabels: (labels: string[]) => void;
+    showVisualizationSelector?: boolean;
+}
+export interface TableToolbarProps {
+    profileType?: ProfileType;
+    total: bigint;
+    filtered: bigint;
+    clearSelection: () => void;
+    currentSearchString?: string;
+}
+export interface IcicleGraphToolbarProps {
+    curPath: string[];
+    setNewCurPath: (path: string[]) => void;
+}
+export declare const TableToolbar: FC<TableToolbarProps>;
+export declare const IcicleGraphToolbar: FC<IcicleGraphToolbarProps>;
+export declare const VisualisationToolbar: FC<VisualisationToolbarProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/Toolbars/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAuB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAiB1D,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA6E9D,CAAC"}

package/dist/ProfileView/components/Toolbars/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Button, UserPreferencesModal } from '@parca/components';
+import { useDashboard } from '../../context/DashboardContext';
+import GroupByDropdown from '../ActionButtons/GroupByDropdown';
+import SortByDropdown from '../ActionButtons/SortByDropdown';
+import FilterByFunctionButton from '../FilterByFunctionButton';
+import ShareButton from '../ShareButton';
+import ViewSelector from '../ViewSelector';
+import MultiLevelDropdown from './MultiLevelDropdown';
+import TableColumnsDropdown from './TableColumnsDropdown';
+export const TableToolbar = ({ profileType, total, filtered, clearSelection, currentSearchString, }) => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex w-full gap-2 items-end", children: [_jsx(TableColumnsDropdown, { profileType: profileType, total: total, filtered: filtered }), _jsx(Button, { color: "neutral", onClick: clearSelection, className: "w-auto", variant: "neutral", disabled: currentSearchString === undefined || currentSearchString.length === 0, children: "Clear selection" })] }) }));
+};
+export const IcicleGraphToolbar = ({ curPath, setNewCurPath }) => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex w-full gap-2 items-end", children: [_jsx(SortByDropdown, {}), _jsxs(Button, { variant: "neutral", className: "gap-2 w-max h-fit", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset graph", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] })] }) }));
+};
+const Divider = () => (_jsx("div", { className: "border-t mt-4 border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" }));
+export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, setGroupByLabels, profileType, preferencesModal, profileSource, queryClient, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, curPath, setNewCurPath, total, filtered, currentSearchString, clearSelection, showVisualizationSelector = true, }) => {
+    const { dashboardItems } = useDashboard();
+    const isTableViz = dashboardItems?.includes('table');
+    const isGraphViz = dashboardItems?.includes('icicle');
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(MultiLevelDropdown, { profileType: profileType, onSelect: () => { } })] }), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal != null ? _jsx(UserPreferencesModal, {}) : null, _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: profileSource?.QueryRequest() ?? undefined, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, {}) : null] })] }), isGraphViz && !isTableViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableViz && !isGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] }))] }));
+};

package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/Dropdown.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAMnE;AAED,QAAA,MAAM,QAAQ,8GAYX;IACD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,KAAG,GAAG,CAAC,OA4GP,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/ProfileView/components/ViewSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,YAAY,QAAO,GAAG,CAAC,OAwF5B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ProfileView/components/VisualizationContainer/index.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import type { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd';
+import { VisualizationType } from '../../types/visualization';
+interface VisualizationContainerProps {
+    provided: DraggableProvided;
+    snapshot: DraggableStateSnapshot;
+    dashboardItem: VisualizationType;
+    getDashboardItemByType: (props: {
+        type: VisualizationType;
+        isHalfScreen: boolean;
+    }) => JSX.Element;
+    isMultiPanelView: boolean;
+    index: number;
+    actionButtons: {
+        icicle: JSX.Element;
+        table: JSX.Element;
+    };
+}
+export declare const VisualizationContainer: FC<VisualizationContainerProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/VisualizationContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/VisualizationContainer/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAGzB,OAAO,KAAK,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAGnF,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAG5D,UAAU,2BAA2B;IACnC,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,aAAa,EAAE,iBAAiB,CAAC;IACjC,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,iBAAiB,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE;QACb,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;QACpB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAgClE,CAAC"}

package/dist/ProfileView/components/VisualizationContainer/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import { useDashboard } from '../../context/DashboardContext';
+import { VisualizationPanel } from '../VisualizationPanel';
+export const VisualizationContainer = ({ provided, snapshot, dashboardItem, getDashboardItemByType, isMultiPanelView, index, actionButtons, }) => {
+    const { handleClosePanel } = useDashboard();
+    return (_jsx("div", { ref: provided.innerRef, ...provided.draggableProps, className: cx('w-full min-h-96', snapshot.isDragging ? 'bg-gray-200 dark:bg-gray-500' : 'bg-white dark:bg-gray-900', isMultiPanelView ? 'border-2 border-gray-100 dark:border-gray-700 rounded-md p-3' : ''), children: _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, index: index, actionButtons: actionButtons }) }));
+};

package/dist/ProfileView/{VisualizationPanel.d.ts → components/VisualizationPanel.d.ts}

@@ -1,13 +1,14 @@
 import React from 'react';
 import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+import { VisualizationType } from '../types/visualization';
 interface Props {
-    dashboardItem: string;
+    dashboardItem: VisualizationType;
     index: number;
     isMultiPanelView: boolean;
-    handleClosePanel: (dashboardItem: string) => void;
+    handleClosePanel: (dashboardItem: VisualizationType) => void;
     dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
     getDashboardItemByType: (props: {
-        type: string;
+        type: VisualizationType;
         isHalfScreen: boolean;
     }) => JSX.Element;
     actionButtons: {

package/dist/ProfileView/components/VisualizationPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualizationPanel.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/VisualizationPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAC,gCAAgC,EAAC,MAAM,qBAAqB,CAAC;AAK1E,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,UAAU,KAAK;IACb,aAAa,EAAE,iBAAiB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,CAAC,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7D,eAAe,EAAE,gCAAgC,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,iBAAiB,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,aAAa,EAAE;QACb,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;QACpB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,kBAAkB,mCAyD7B,CAAC"}

package/dist/ProfileView/context/DashboardContext.d.ts

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren } from 'react';
+import { VisualizationType } from '../types/visualization';
+interface DashboardContextType {
+    dashboardItems: string[];
+    setDashboardItems: (items: string[]) => void;
+    handleClosePanel: (visualizationType: VisualizationType) => void;
+    isMultiPanelView: boolean;
+}
+export declare const DashboardProvider: FC<PropsWithChildren>;
+export declare const useDashboard: () => DashboardContextType;
+export {};
+//# sourceMappingURL=DashboardContext.d.ts.map

package/dist/ProfileView/context/DashboardContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/context/DashboardContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAID,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,CAwBnD,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC"}

package/dist/ProfileView/context/DashboardContext.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { createContext, useContext } from 'react';
+import { useURLState } from '@parca/components';
+const DashboardContext = createContext(undefined);
+export const DashboardProvider = ({ children }) => {
+    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
+    });
+    const handleClosePanel = (visualizationType) => {
+        const newDashboardItems = dashboardItems.filter(item => item !== visualizationType);
+        setDashboardItems(newDashboardItems);
+    };
+    const isMultiPanelView = dashboardItems.length > 1;
+    return (_jsx(DashboardContext.Provider, { value: {
+            dashboardItems,
+            setDashboardItems,
+            handleClosePanel,
+            isMultiPanelView,
+        }, children: children }));
+};
+export const useDashboard = () => {
+    const context = useContext(DashboardContext);
+    if (context === undefined) {
+        throw new Error('useDashboard must be used within a DashboardProvider');
+    }
+    return context;
+};

package/dist/ProfileView/{ProfileViewContext.d.ts → context/ProfileViewContext.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ProfileSource } from '../ProfileSource';
+import { ProfileSource } from '../../ProfileSource';
 interface Props {
     profileSource?: ProfileSource;
     compareMode: boolean;

package/dist/ProfileView/context/ProfileViewContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileViewContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/context/ProfileViewContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,SAAS,EAA4B,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF,QAAA,MAAM,kBAAkB,gCAAqC,CAAC;AAE9D,eAAO,MAAM,0BAA0B,yBAGpC;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,KAAG,GAAG,CAAC,OAMP,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAO,KAMxC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileView/hooks/useGraphviz.d.ts

@@ -0,0 +1,12 @@
+import { Callgraph as CallgraphType } from '@parca/client';
+interface UseGraphvizProps {
+    callgraphData?: CallgraphType;
+    width?: number;
+    colorRange: [string, string];
+}
+export declare const useGraphviz: ({ callgraphData, width, colorRange, }: UseGraphvizProps) => {
+    graphvizLoaded: boolean;
+    callgraphSVG: string | undefined;
+};
+export {};
+//# sourceMappingURL=useGraphviz.d.ts.map

package/dist/ProfileView/hooks/useGraphviz.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGraphviz.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useGraphviz.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAC,SAAS,IAAI,aAAa,EAAC,MAAM,eAAe,CAAC;AAIzD,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,0CAIrB,gBAAgB,KAAG;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAmClC,CAAC"}

package/dist/ProfileView/hooks/useGraphviz.js

@@ -0,0 +1,42 @@
+// 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useEffect, useState } from 'react';
+import graphviz from 'graphviz-wasm';
+import { jsonToDot } from '../../Callgraph/utils';
+export const useGraphviz = ({ callgraphData, width, colorRange, }) => {
+    const [graphvizLoaded, setGraphvizLoaded] = useState(false);
+    const [callgraphSVG, setCallgraphSVG] = useState(undefined);
+    useEffect(() => {
+        async function loadGraphviz() {
+            await graphviz.loadWASM();
+            setGraphvizLoaded(true);
+        }
+        void loadGraphviz();
+    }, []);
+    useEffect(() => {
+        async function loadCallgraphSVG(graph, width, colorRange) {
+            await setCallgraphSVG(undefined);
+            const dataAsDot = await jsonToDot({
+                graph,
+                width,
+                colorRange,
+            });
+            const svgGraph = await graphviz.layout(dataAsDot, 'svg', 'dot');
+            await setCallgraphSVG(svgGraph);
+        }
+        if (graphvizLoaded && callgraphData != null && width != null) {
+            void loadCallgraphSVG(callgraphData, width, colorRange);
+        }
+    }, [graphvizLoaded, callgraphData, width, colorRange]);
+    return { graphvizLoaded, callgraphSVG };
+};