@parca/profile 0.16.335 → 0.16.336

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.336](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.335...@parca/profile@0.16.336) (2024-02-01)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.335](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.334...@parca/profile@0.16.335) (2024-01-22)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/ActionButtons/GroupByDropdown.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const GroupByDropdown: ({ groupBy, toggleGroupBy, }: {
+    groupBy: string[];
+    toggleGroupBy: (key: string) => void;
+}) => React.JSX.Element;
+export default GroupByDropdown;

package/dist/ProfileIcicleGraph/ActionButtons/GroupByDropdown.js

@@ -0,0 +1,57 @@
+import { 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");
+// 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 { Menu, Transition } from '@headlessui/react';
+import { Icon } from '@iconify/react';
+import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../IcicleGraphArrow';
+const groupByOptions = [
+    {
+        value: FIELD_FUNCTION_NAME,
+        label: 'Function Name',
+        description: 'Stacktraces are grouped by function names.',
+        disabled: true,
+    },
+    {
+        value: FIELD_LABELS,
+        label: 'Labels',
+        description: 'Stacktraces are grouped by pprof labels.',
+        disabled: false,
+    },
+    {
+        value: FIELD_FUNCTION_FILE_NAME,
+        label: 'Filename',
+        description: 'Stacktraces are grouped by filenames.',
+        disabled: false,
+    },
+    {
+        value: FIELD_LOCATION_ADDRESS,
+        label: 'Address',
+        description: 'Stacktraces are grouped by addresses.',
+        disabled: false,
+    },
+    {
+        value: FIELD_MAPPING_FILE,
+        label: 'Binary',
+        description: 'Stacktraces are grouped by binaries.',
+        disabled: false,
+    },
+];
+const GroupByDropdown = ({ groupBy, toggleGroupBy, }) => {
+    const label = groupBy.length === 0
+        ? 'Nothing'
+        : groupBy.length === 1
+            ? groupByOptions.find(option => option.value === groupBy[0])?.label
+            : 'Multiple';
+    return (_jsxs("div", { className: "relative", children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsxs(Menu.Button, { className: "relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: label }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), _jsx(Transition, { as: "div", leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsx("div", { className: "space-y-5", children: groupByOptions.map(({ value, label, description, disabled }) => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: value, name: value, type: "checkbox", disabled: disabled, className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: groupBy.includes(value), onChange: () => toggleGroupBy(value) }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: value, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, value))) }) }) }) }) })] })] }));
+};
+export default GroupByDropdown;

package/dist/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const RuntimeFilterDropdown: ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }: {
+    showRuntimeRuby: boolean;
+    toggleShowRuntimeRuby: () => void;
+    showRuntimePython: boolean;
+    toggleShowRuntimePython: () => void;
+    showInterpretedOnly: boolean;
+    toggleShowInterpretedOnly: () => void;
+}) => React.JSX.Element;
+export default RuntimeFilterDropdown;

package/dist/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.js

@@ -0,0 +1,23 @@
+import { 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");
+// 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 { Fragment } from 'react';
+import { Menu, Transition } from '@headlessui/react';
+import { Icon } from '@iconify/react';
+const RuntimeToggle = ({ id, state, toggle, label, description, }) => {
+    return (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: id, name: id, type: "checkbox", className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: state, onChange: () => toggle() }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: id, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, id));
+};
+const RuntimeFilterDropdown = ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }) => {
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Runtimes" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: "Runtimes" }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsxs("div", { className: "space-y-5", children: [_jsx(RuntimeToggle, { id: "show-runtime-ruby", state: showRuntimeRuby, toggle: toggleShowRuntimeRuby, label: "Ruby", description: "Show Ruby runtime functions." }), _jsx(RuntimeToggle, { id: "show-runtime-python", state: showRuntimePython, toggle: toggleShowRuntimePython, label: "Python", description: "Show Python runtime functions." }), _jsx(RuntimeToggle, { id: "show-interpreted-only", state: showInterpretedOnly, toggle: toggleShowInterpretedOnly, label: "Interpreted Only", description: "Show only interpreted functions." })] }) }) }) }) })] })] }));
+};
+export default RuntimeFilterDropdown;

package/dist/ProfileIcicleGraph/ActionButtons/SortBySelect.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const SortBySelect: ({ sortBy, setSortBy, compareMode, }: {
+    sortBy: string;
+    setSortBy: (key: string) => void;
+    compareMode: boolean;
+}) => React.JSX.Element;
+export default SortBySelect;

package/dist/ProfileIcicleGraph/ActionButtons/SortBySelect.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { Select } from '@parca/components';
+import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME } from '../IcicleGraphArrow';
+const SortBySelect = ({ sortBy, setSortBy, compareMode, }) => {
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Sort" }), _jsx(Select, { className: "!px-3", items: [
+                    {
+                        key: FIELD_FUNCTION_NAME,
+                        disabled: false,
+                        element: {
+                            active: _jsx(_Fragment, { children: "Function" }),
+                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Function" }) })),
+                        },
+                    },
+                    {
+                        key: FIELD_CUMULATIVE,
+                        disabled: false,
+                        element: {
+                            active: _jsx(_Fragment, { children: "Cumulative" }),
+                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Cumulative" }) })),
+                        },
+                    },
+                    {
+                        key: FIELD_DIFF,
+                        disabled: !compareMode,
+                        element: {
+                            active: _jsx(_Fragment, { children: "Diff" }),
+                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Diff" }) })),
+                        },
+                    },
+                ], selectedKey: sortBy, onSelection: key => setSortBy(key), placeholder: 'Sort By', primary: false, disabled: false })] }));
+};
+export default SortBySelect;

package/dist/ProfileIcicleGraph/index.d.ts

@@ -15,6 +15,7 @@ interface ProfileIcicleGraphProps {
     loading: boolean;
     setActionButtons?: (buttons: React.JSX.Element) => void;
     error?: any;
+    isHalfScreen: boolean;
 }
-declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, isHalfScreen, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -11,21 +11,24 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Fragment, useCallback, useEffect, useMemo } from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { Icon } from '@iconify/react';
-import { Button, Select, useParcaContext, useURLState } from '@parca/components';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Button, IcicleActionButtonPlaceholder, IcicleGraphSkeleton, IconButton, useParcaContext, useURLState, } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
+import GroupByDropdown from './ActionButtons/GroupByDropdown';
+import RuntimeFilterDropdown from './ActionButtons/RuntimeFilterDropdown';
+import SortBySelect from './ActionButtons/SortBySelect';
 import IcicleGraph from './IcicleGraph';
-import IcicleGraphArrow, { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from './IcicleGraphArrow';
+import IcicleGraphArrow, { FIELD_FUNCTION_NAME } from './IcicleGraphArrow';
 const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
 };
-const ShowHideLegendButton = ({ navigateTo }) => {
+const ShowHideLegendButton = ({ navigateTo, isHalfScreen, }) => {
     const [colorStackLegend, setStoreColorStackLegend] = useURLState({
         param: 'color_stack_legend',
         navigateTo,
@@ -36,7 +39,7 @@ const ShowHideLegendButton = ({ navigateTo }) => {
     const setColorStackLegend = useCallback((value) => {
         setStoreColorStackLegend(value);
     }, [setStoreColorStackLegend]);
-    return (_jsx(_Fragment, { children: colorProfileName === 'default' || compareMode ? null : (_jsxs(Button, { className: "gap-2", variant: "neutral", onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), children: [isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', _jsx(Icon, { icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', width: 20 })] })) }));
+    return (_jsx(_Fragment, { children: colorProfileName === 'default' || compareMode ? null : (_jsx(_Fragment, { children: isHalfScreen ? (_jsx(IconButton, { className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]", icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', toolTipText: isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true') })) : (_jsxs(Button, { className: "gap-2 w-max", variant: "neutral", onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), children: [isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', _jsx(Icon, { icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', width: 20 })] })) })) }));
 };
 const GroupAndSortActionButtons = ({ navigateTo }) => {
     const [storeSortBy = FIELD_FUNCTION_NAME, setStoreSortBy] = useURLState({
@@ -79,14 +82,8 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
     });
     return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy }), _jsx(RuntimeFilterDropdown, { showRuntimeRuby: showRuntimeRubyStr === 'true', toggleShowRuntimeRuby: () => setShowRuntimeRuby(showRuntimeRubyStr === 'true' ? 'false' : 'true'), showRuntimePython: showRuntimePythonStr === 'true', toggleShowRuntimePython: () => setShowRuntimePython(showRuntimePythonStr === 'true' ? 'false' : 'true'), showInterpretedOnly: showInterpretedOnlyStr === 'true', toggleShowInterpretedOnly: () => setShowInterpretedOnly(showInterpretedOnlyStr === 'true' ? 'false' : 'true') })] }));
 };
-const RuntimeToggle = ({ id, state, toggle, label, description, }) => {
-    return (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: id, name: id, type: "checkbox", className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: state, onChange: () => toggle() }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: id, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, id));
-};
-const RuntimeFilterDropdown = ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }) => {
-    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Runtimes" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "ml-3 block overflow-x-hidden text-ellipsis", children: "Runtimes" }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsxs("div", { className: "space-y-5", children: [_jsx(RuntimeToggle, { id: "show-runtime-ruby", state: showRuntimeRuby, toggle: toggleShowRuntimeRuby, label: "Ruby", description: "Show Ruby runtime functions." }), _jsx(RuntimeToggle, { id: "show-runtime-python", state: showRuntimePython, toggle: toggleShowRuntimePython, label: "Python", description: "Show Python runtime functions." }), _jsx(RuntimeToggle, { id: "show-interpreted-only", state: showInterpretedOnly, toggle: toggleShowInterpretedOnly, label: "Interpreted Only", description: "Show only interpreted functions." })] }) }) }) }) })] })] }));
-};
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, }) {
-    const { loader, onError, authenticationErrorMessage } = useParcaContext();
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, isHalfScreen, }) {
+    const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
         param: 'sort_by',
@@ -111,13 +108,17 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         ];
     }, [graph, arrow, filtered, total]);
     useEffect(() => {
+        if (loading && setActionButtons !== undefined) {
+            setActionButtons(_jsx(IcicleActionButtonPlaceholder, { isHalfScreen: isHalfScreen }));
+            return;
+        }
         if (setActionButtons === undefined) {
             return;
         }
-        setActionButtons(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [arrow !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), _jsx(ShowHideLegendButton, { navigateTo: navigateTo }), _jsx(Button, { variant: "neutral", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: "Reset View" })] }) }));
-    }, [navigateTo, arrow, curPath, setNewCurPath, setActionButtons]);
+        setActionButtons(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [arrow !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
+    }, [navigateTo, arrow, curPath, setNewCurPath, setActionButtons, loading, isHalfScreen]);
     if (loading) {
-        return _jsx("div", { className: "h-96", children: loader });
+        return (_jsx("div", { className: "h-auto overflow-clip", children: _jsx(IcicleGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
     }
     if (error != null) {
         onError?.(error);
@@ -133,74 +134,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsxs("div", { className: "relative", children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsxs("div", { className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
-};
-const groupByOptions = [
-    {
-        value: FIELD_FUNCTION_NAME,
-        label: 'Function Name',
-        description: 'Stacktraces are grouped by function names.',
-        disabled: true,
-    },
-    {
-        value: FIELD_LABELS,
-        label: 'Labels',
-        description: 'Stacktraces are grouped by pprof labels.',
-        disabled: false,
-    },
-    {
-        value: FIELD_FUNCTION_FILE_NAME,
-        label: 'Filename',
-        description: 'Stacktraces are grouped by filenames.',
-        disabled: false,
-    },
-    {
-        value: FIELD_LOCATION_ADDRESS,
-        label: 'Address',
-        description: 'Stacktraces are grouped by addresses.',
-        disabled: false,
-    },
-    {
-        value: FIELD_MAPPING_FILE,
-        label: 'Binary',
-        description: 'Stacktraces are grouped by binaries.',
-        disabled: false,
-    },
-];
-const GroupByDropdown = ({ groupBy, toggleGroupBy, }) => {
-    const label = groupBy.length === 0
-        ? 'Nothing'
-        : groupBy.length === 1
-            ? groupByOptions.find(option => option.value === groupBy[0])?.label
-            : 'Multiple';
-    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "ml-3 block overflow-x-hidden text-ellipsis", children: label }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsx("div", { className: "space-y-5", children: groupByOptions.map(({ value, label, description, disabled }) => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: value, name: value, type: "checkbox", disabled: disabled, className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: groupBy.includes(value), onChange: () => toggleGroupBy(value) }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: value, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, value))) }) }) }) }) })] })] }));
-};
-const SortBySelect = ({ sortBy, setSortBy, compareMode, }) => {
-    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Sort" }), _jsx(Select, { items: [
-                    {
-                        key: FIELD_FUNCTION_NAME,
-                        disabled: false,
-                        element: {
-                            active: _jsx(_Fragment, { children: "Function" }),
-                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Function" }) })),
-                        },
-                    },
-                    {
-                        key: FIELD_CUMULATIVE,
-                        disabled: false,
-                        element: {
-                            active: _jsx(_Fragment, { children: "Cumulative" }),
-                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Cumulative" }) })),
-                        },
-                    },
-                    {
-                        key: FIELD_DIFF,
-                        disabled: !compareMode,
-                        element: {
-                            active: _jsx(_Fragment, { children: "Diff" }),
-                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Diff" }) })),
-                        },
-                    },
-                ], selectedKey: sortBy, onSelection: key => setSortBy(key), placeholder: 'Sort By', primary: false, disabled: false })] }));
+    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsxs("div", { className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileMetricsGraph/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+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.
@@ -12,8 +12,9 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Duration, Timestamp } from '@parca/client';
-import { useGrpcMetadata, useParcaContext } from '@parca/components';
+import { MetricsGraphSkeleton, useGrpcMetadata, useParcaContext, } from '@parca/components';
 import { Query } from '@parca/parser';
 import { capitalizeOnlyFirstLetter, getStepDuration } from '@parca/utilities';
 import MetricsGraph from '../MetricsGraph';
@@ -61,8 +62,8 @@ export const useQueryRange = (client, queryExpression, start, end) => {
 const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, }) => {
     const { isLoading, response, error } = useQueryRange(queryClient, queryExpression, from, to);
     const isLoaderVisible = useDelayedLoader(isLoading);
-    const { loader, onError, perf, authenticationErrorMessage } = useParcaContext();
-    const { width, height, margin } = useMetricsGraphDimensions(comparing);
+    const { onError, perf, authenticationErrorMessage, isDarkMode } = useParcaContext();
+    const { width, height, margin, heightStyle } = useMetricsGraphDimensions(comparing);
     useEffect(() => {
         if (error !== null) {
             onError?.(error);
@@ -76,10 +77,11 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
     }, [perf, response]);
     const series = response?.series;
     const dataAvailable = series !== null && series !== undefined && series?.length > 0;
-    if (isLoaderVisible || (isLoading && !dataAvailable)) {
-        return _jsx(_Fragment, { children: loader });
+    const metricsGraphLoading = isLoaderVisible || (isLoading && !dataAvailable);
+    if (metricsGraphLoading) {
+        return _jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode });
     }
-    if (error !== null) {
+    if (!metricsGraphLoading && error !== null) {
         if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
             return _jsx(ErrorContent, { errorMessage: authenticationErrorMessage });
         }
@@ -89,7 +91,7 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
         const handleSampleClick = (timestamp, _value, labels) => {
             onPointClick(timestamp, labels, queryExpression);
         };
-        return (_jsx("div", { className: "h-full w-full", children: _jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: handleSampleClick, addLabelMatcher: addLabelMatcher, sampleUnit: Query.parse(queryExpression).profileType().sampleUnit, height: height, width: width, margin: margin }) }));
+        return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: handleSampleClick, addLabelMatcher: addLabelMatcher, sampleUnit: Query.parse(queryExpression).profileType().sampleUnit, height: height, width: width, margin: margin }) }, "metrics-graph-loaded") }));
     }
     return _jsx(ProfileMetricsEmptyState, { message: "No data found. Try a different query." });
 };

package/dist/ProfileView/VisualizationPanel.js

@@ -20,7 +20,7 @@ import ViewSelector from './ViewSelector';
 export const VisualizationPanel = React.memo(function VisualizationPanel({ dashboardItem, index, isMultiPanelView, handleClosePanel, navigateTo, dragHandleProps, getDashboardItemByType, }) {
     const [actionButtons, setActionButtons] = useState(_jsx(_Fragment, {}));
     const { flamegraphHint } = useParcaContext();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-start justify-end gap-2 pb-2", children: [_jsxs("div", { className: "flex w-full items-start justify-between flex-col-reverse md:flex-row", children: [_jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), _jsx("div", { children: actionButtons })] }), _jsxs("div", { className: "flex flex-col items-end gap-4", children: [_jsx(ViewSelector, { defaultValue: dashboardItem, navigateTo: navigateTo, position: index }), _jsx("div", { className: "px-2", children: dashboardItem === 'icicle' && flamegraphHint != null ? flamegraphHint : null })] })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center justify-end gap-2 pb-2 min-h-[78px]", children: [_jsxs("div", { className: cx('flex w-full justify-between flex-col-reverse md:flex-row', isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), _jsx("div", { className: "flex gap-2", children: actionButtons })] }), _jsxs("div", { className: cx('flex flex-row items-center gap-4', isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'), children: [_jsx(ViewSelector, { defaultValue: dashboardItem, navigateTo: navigateTo, position: index }), dashboardItem === 'icicle' && flamegraphHint != null ? (_jsx("div", { className: "px-2", children: flamegraphHint })) : null] })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
                 type: dashboardItem,
                 isHalfScreen: isMultiPanelView,
                 setActionButtons,

package/dist/ProfileView/index.js

@@ -28,7 +28,6 @@ import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import { SourceView } from '../SourceView';
 import Table from '../Table';
 import ProfileShareButton from '../components/ProfileShareButton';
-import useDelayedLoader from '../useDelayedLoader';
 import FilterByFunctionButton from './FilterByFunctionButton';
 import { ProfileViewContextProvider } from './ProfileViewContext';
 import ViewSelector from './ViewSelector';
@@ -57,7 +56,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
     }, [rawDashboardItems]);
     const isDarkMode = useAppSelector(selectDarkMode);
     const isMultiPanelView = dashboardItems.length > 1;
-    const { loader, perf, profileViewExternalMainActions, profileViewExternalSubActions } = useParcaContext();
+    const { perf, profileViewExternalMainActions, profileViewExternalSubActions } = useParcaContext();
     useEffect(() => {
         // Reset the current path when the profile source changes
         setCurPath([]);
@@ -69,29 +68,6 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
         }
         void loadGraphviz();
     }, []);
-    const isLoading = useMemo(() => {
-        if (dashboardItems.includes('icicle')) {
-            return Boolean(flamegraphData?.loading);
-        }
-        if (dashboardItems.includes('callgraph')) {
-            return Boolean(callgraphData?.loading) || Boolean(callgraphSVG === undefined);
-        }
-        if (dashboardItems.includes('table')) {
-            return Boolean(topTableData?.loading);
-        }
-        if (dashboardItems.includes('source')) {
-            return Boolean(sourceData?.loading);
-        }
-        return false;
-    }, [
-        dashboardItems,
-        callgraphData?.loading,
-        flamegraphData?.loading,
-        topTableData?.loading,
-        sourceData?.loading,
-        callgraphSVG,
-    ]);
-    const isLoaderVisible = useDelayedLoader(isLoading);
     const maxColor = getNewSpanColor(isDarkMode);
     const minColor = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
     const colorRange = [minColor, maxColor];
@@ -130,7 +106,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                 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, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, width: dimensions?.width !== undefined
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
                             ? isHalfScreen
                                 ? (dimensions.width - 40) / 2
                                 : dimensions.width - 16
@@ -142,7 +118,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                     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(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, sampleUnit: sampleUnit, navigateTo: navigateTo, setActionButtons: setActionButtons, currentSearchString: currentSearchString })) : (_jsx(_Fragment, {}));
+                return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, sampleUnit: sampleUnit, navigateTo: navigateTo, setActionButtons: setActionButtons, currentSearchString: currentSearchString, isHalfScreen: isHalfScreen })) : (_jsx(_Fragment, {}));
             }
             case 'source': {
                 return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered, setActionButtons: setActionButtons })) : (_jsx(_Fragment, {}));
@@ -183,10 +159,10 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                                                 : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }), _jsxs("div", { className: "lg:flex flex-wrap items-center gap-2 md:justify-end hidden", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), profileViewExternalSubActions != null ? profileViewExternalSubActions : null, _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
                                         e.preventDefault();
                                         onDownloadPProf();
-                                    }, disabled: pprofDownloading, children: [pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }), _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel", icon: _jsx(Icon, { icon: "material-symbols:add", width: 20 }), 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: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...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('min-h-[200px] w-full rounded p-2 shadow dark:border dark:border-gray-700 dark:bg-gray-700', snapshot.isDragging
+                                    }, disabled: pprofDownloading, children: [pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }), _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel", icon: _jsx(Icon, { icon: "material-symbols:add", width: 20 }), addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 })] })] }), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...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('w-full rounded p-2 shadow dark:border dark:border-gray-700 dark:bg-gray-700 min-h-96', snapshot.isDragging
                                                 ? 'bg-gray-200 dark:bg-gray-500'
                                                 : 'bg-white dark:bg-gray-700') },
                                             _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, navigateTo: navigateTo, index: index }))) }, dashboardItem));
-                                }) })) }) })) })] }) }));
+                                }) })) }) }) })] }) }));
 };

package/dist/SourceView/index.js

@@ -13,18 +13,19 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // limitations under the License.
 import React, { useEffect } from 'react';
 import { tableFromIPC } from 'apache-arrow';
-import { useParcaContext, useURLState } from '@parca/components';
+import { AnimatePresence, motion } from 'framer-motion';
+import { SourceSkeleton, useParcaContext, useURLState } from '@parca/components';
 import { ExpandOnHover } from '../GraphTooltipArrow/ExpandOnHoverValue';
 import { truncateStringReverse } from '../utils';
 import { Highlighter, profileAwareRenderer } from './Highlighter';
 export const SourceView = React.memo(function SourceView({ data, loading, total, filtered, setActionButtons, }) {
     const [sourceFileName] = useURLState({ param: 'source_filename', navigateTo: () => { } });
-    const { loader } = useParcaContext();
+    const { isDarkMode } = useParcaContext();
     useEffect(() => {
         setActionButtons?.(_jsx("div", { className: "px-2", children: _jsx(ExpandOnHover, { value: sourceFileName, displayValue: truncateStringReverse(sourceFileName, 50) }) }));
     }, [sourceFileName, setActionButtons]);
     if (loading) {
-        return _jsx("div", { className: "h-96", children: loader });
+        return (_jsx("div", { className: "h-auto overflow-clip", children: _jsx(SourceSkeleton, { isDarkMode: isDarkMode }) }));
     }
     if (data === undefined) {
         return _jsx(_Fragment, { children: "Source code not uploaded for this build." });
@@ -32,6 +33,6 @@ export const SourceView = React.memo(function SourceView({ data, loading, total,
     const table = tableFromIPC(data.record);
     const cumulative = table.getChild('cumulative');
     const flat = table.getChild('flat');
-    return (_jsx(Highlighter, { file: sourceFileName, content: data.source, renderer: profileAwareRenderer(cumulative, flat, total, filtered) }));
+    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx(Highlighter, { file: sourceFileName, content: data.source, renderer: profileAwareRenderer(cumulative, flat, total, filtered) }) }, "source-view-loaded") }));
 });
 export default SourceView;

package/dist/Table/ColumnsVisibility.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type VisibilityState } from '@tanstack/react-table';
+import { ColumnDef } from '.';
+declare const ColumnsVisibility: ({ columns, visibility, setVisibility, }: {
+    columns: ColumnDef[];
+    visibility: VisibilityState;
+    setVisibility: (id: string, visible: boolean) => void;
+}) => React.JSX.Element;
+export default ColumnsVisibility;

package/dist/Table/ColumnsVisibility.js

@@ -0,0 +1,22 @@
+import { 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");
+// 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 { Fragment } from 'react';
+import { Menu, Transition } from '@headlessui/react';
+import { Icon } from '@iconify/react';
+const ColumnsVisibility = ({ columns, visibility, setVisibility, }) => {
+    return (_jsx("div", { children: _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: "Columns" }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsx("div", { className: "space-y-5", children: columns.map(col => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: col.id, name: col.id, type: "checkbox", className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: visibility[col.id ?? ''] ?? false, onChange: () => {
+                                                        setVisibility(col.id ?? '', !visibility[col.id ?? '']);
+                                                    } }) }), _jsx("div", { className: "ml-3 text-sm leading-6", children: _jsx("label", { htmlFor: col.id, className: "font-medium text-gray-900 dark:text-gray-200", children: col.header }) })] }, col.id))) }) }) }) }) })] }) }));
+};
+export default ColumnsVisibility;

package/dist/Table/index.d.ts

@@ -1,6 +1,18 @@
 import React from 'react';
 import { Vector } from 'apache-arrow';
 import { type NavigateFunction } from '@parca/utilities';
+export interface ColumnDef {
+    id: string;
+    header: string;
+    accessorKey: string;
+    footer?: string;
+    cell?: (info: any) => string | number;
+    meta?: {
+        align: 'right' | 'left';
+    };
+    invertSorting?: boolean;
+    size?: number;
+}
 interface TableProps {
     data?: Uint8Array;
     total: bigint;
@@ -10,6 +22,7 @@ interface TableProps {
     loading: boolean;
     currentSearchString?: string;
     setActionButtons?: (buttons: React.JSX.Element) => void;
+    isHalfScreen: boolean;
 }
 export declare const Table: React.NamedExoticComponent<TableProps>;
 export declare const RowName: (mappingFileColumn: Vector | null, locationAddressColumn: Vector | null, functionNameColumn: Vector | null, row: number) => string;