@parca/profile 0.16.450 → 0.16.452

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.452 (2024-12-02)
+
+**Note:** Version bump only for package @parca/profile
+
+## [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/MetricsGraphStrips/index.d.ts

@@ -8,7 +8,8 @@ interface Props {
         bounds: NumberDuo;
     };
     onSelectedTimeline: (index: number, bounds: NumberDuo | undefined) => void;
+    width?: number;
 }
-export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeline, onSelectedTimeline, }: Props) => JSX.Element;
+export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeline, onSelectedTimeline, width, }: Props) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/MetricsGraphStrips/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5E;AAMD,eAAO,MAAM,kBAAkB,0DAK5B,KAAK,KAAG,GAAG,CAAC,OA+Dd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,eAAO,MAAM,kBAAkB,iEAM5B,KAAK,KAAG,GAAG,CAAC,OA+Dd,CAAC"}

package/dist/MetricsGraphStrips/index.js

@@ -19,7 +19,7 @@ import { AreaGraph } from './AreaGraph';
 const getTimelineGuideHeight = (cpus, collapsedIndices) => {
     return 56 * (cpus.length - collapsedIndices.length) + 20 * collapsedIndices.length + 24;
 };
-export const MetricsGraphStrips = ({ cpus, data, selectedTimeline, onSelectedTimeline, }) => {
+export const MetricsGraphStrips = ({ cpus, data, selectedTimeline, onSelectedTimeline, width, }) => {
     const [collapsedIndices, setCollapsedIndices] = useState([]);
     // @ts-expect-error
     const color = d3.scaleOrdinal(d3.schemeObservable10);
@@ -33,9 +33,9 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeline, onSelectedTim
         });
         return [0, bounds[1] - bounds[0]];
     }, [data]);
-    return (_jsxs("div", { className: "flex flex-col gap-1 relative", children: [_jsx(TimelineGuide, { bounds: bounds, width: 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
+    return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: bounds, width: width ?? 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
                 const isCollapsed = collapsedIndices.includes(i);
-                return (_jsxs("div", { className: "relative min-h-5", children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer z-30", onClick: () => {
+                return (_jsxs("div", { className: "relative min-h-5", style: { width: width ?? 1468 }, children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer z-30", onClick: () => {
                                 const newCollapsedIndices = [...collapsedIndices];
                                 if (collapsedIndices.includes(i)) {
                                     newCollapsedIndices.splice(newCollapsedIndices.indexOf(i), 1);
@@ -44,7 +44,7 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeline, onSelectedTim
                                     newCollapsedIndices.push(i);
                                 }
                                 setCollapsedIndices(newCollapsedIndices);
-                            }, children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow' }), cpu] }), !isCollapsed ? (_jsx(AreaGraph, { data: data[i], height: 56, width: 1468, fill: color(i.toString()), selectionBounds: selectedTimeline?.index === i ? selectedTimeline.bounds : undefined, setSelectionBounds: bounds => {
+                            }, children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow' }), cpu] }), !isCollapsed ? (_jsx(AreaGraph, { data: data[i], height: 56, width: width ?? 1468, fill: color(i.toString()), selectionBounds: selectedTimeline?.index === i ? selectedTimeline.bounds : undefined, setSelectionBounds: bounds => {
                                 onSelectedTimeline(i, bounds);
                             } })) : null] }, cpu));
             })] }));

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

@@ -17,7 +17,8 @@ interface ProfileIcicleGraphProps {
     isHalfScreen: boolean;
     metadataMappingFiles?: string[];
     metadataLoading?: boolean;
+    showTimelineGuide?: boolean;
 }
-declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, showTimelineGuide, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileIcicleGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAW1C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAMD,QAAA,MAAM,kBAAkB,uIAarB,uBAAuB,KAAG,GAAG,CAAC,OA+KhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAY1C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAMD,QAAA,MAAM,kBAAkB,0JAcrB,uBAAuB,KAAG,GAAG,CAAC,OA2LhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileIcicleGraph/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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");
 // you may not use this file except in compliance with the License.
@@ -15,8 +15,9 @@ 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 { TimelineGuide } from '../TimelineGuide';
 import { IcicleGraph } from './IcicleGraph';
 import { FIELD_FUNCTION_NAME, IcicleGraphArrow } from './IcicleGraphArrow';
 import useMappingList from './IcicleGraphArrow/useMappingList';
@@ -24,7 +25,7 @@ const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, showTimelineGuide = false, }) {
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const [isLoading, setIsLoading] = useState(true);
@@ -82,7 +83,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         if (graph !== undefined)
             return (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType }));
         if (arrow !== undefined)
-            return (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute }));
+            return (_jsxs("div", { className: "relative", children: [showTimelineGuide && (_jsx(TimelineGuide, { bounds: [0, 60000], width: width, height: 1000, margin: 0, ticks: 60000 / 10000 })), _jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute })] }));
     }, [
         isLoading,
         graph,
@@ -99,6 +100,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         isDarkMode,
         mappingsList,
         isCompareAbsolute,
+        showTimelineGuide,
     ]);
     if (error != null) {
         onError?.(error);

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,27 @@
+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;
+    };
+    showTimelineGuide?: boolean;
+}
+export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, showTimelineGuide, }: 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;IACF,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,sOAkB1B,qBAAqB,KAAG,GAAG,CAAC,OAgF9B,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, showTimelineGuide, }) => {
+    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, showTimelineGuide: showTimelineGuide }) }));
+        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-inherit 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"}