@parca/profile 0.19.140 → 0.19.142

package/dist/Table/index.js

@@ -1,4 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // 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.
@@ -11,146 +16,235 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { tableFromIPC } from '@uwdata/flechette';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useQueryState } from 'nuqs';
 import { useContextMenu } from 'react-contexify';
-import { Table as TableComponent, TableSkeleton, useParcaContext } from '@parca/components';
+import { Table as TableComponent, TableSkeleton, useParcaContext, useURLState } from '@parca/components';
 import { useCurrentColorProfile } from '@parca/hooks';
-import useMappingList, { useFilenamesList, } from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
+import useMappingList, { useFilenamesList } from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
-import { stringParam } from '../hooks/urlParsers';
-import { useColorBy } from '../hooks/useColorBy';
-import { useDashboardItems } from '../hooks/useDashboardItems';
 import { alignedUint8Array } from '../utils';
 import TableContextMenuWrapper from './TableContextMenuWrapper';
 import { useColorManagement } from './hooks/useColorManagement';
 import { useTableConfiguration } from './hooks/useTableConfiguration';
 import { ROW_HEIGHT, RowName, getRowColor } from './utils/functions';
-export const FIELD_MAPPING_FILE = 'mapping_file';
-export const FIELD_LOCATION_ADDRESS = 'location_address';
-export const FIELD_FUNCTION_NAME = 'function_name';
-export const FIELD_FUNCTION_SYSTEM_NAME = 'function_system_name';
-export const FIELD_FUNCTION_FILE_NAME = 'function_file_name';
-export const FIELD_FLAT = 'flat';
-export const FIELD_FLAT_DIFF = 'flat_diff';
-export const FIELD_CUMULATIVE = 'cumulative';
-export const FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
-export const FIELD_CALLERS = 'callers';
-export const FIELD_CALLEES = 'callees';
-export const Table = React.memo(function Table({ data, total, filtered, profileType, loading, isHalfScreen, unit, metadataMappingFiles, error, }) {
-    const currentColorProfile = useCurrentColorProfile();
-    const { dashboardItems } = useDashboardItems();
-    const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
-    const { colorBy, setColorBy } = useColorBy();
-    const { isDarkMode } = useParcaContext();
-    const { compareMode } = useProfileViewContext();
-    const MENU_ID = 'table-context-menu';
-    const contextMenuRef = useRef(null);
-    const { show } = useContextMenu({
-        id: MENU_ID,
-    });
-    const table = useMemo(() => {
-        if (loading || data == null) {
-            return null;
-        }
-        return tableFromIPC(alignedUint8Array(data), { useBigInt: true });
-    }, [data, loading]);
-    const mappingsList = useMappingList(metadataMappingFiles);
-    const filenamesList = useFilenamesList(table);
-    const mappingsListCount = useMemo(() => mappingsList.filter(m => m !== '').length, [mappingsList]);
-    // If there is only one mapping file, we want to color by filename by default.
-    useEffect(() => {
-        if (mappingsListCount === 1 && colorBy !== 'filename') {
-            void setColorBy('filename');
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mappingsListCount]);
-    const { colorByColors } = useColorManagement({
-        isDarkMode,
-        currentColorProfile,
-        mappingsList,
-        filenamesList,
-        colorBy,
-    });
-    unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
-    const tableConfig = useTableConfiguration({
-        unit,
-        total,
-        filtered,
-        compareMode,
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var FIELD_MAPPING_FILE = 'mapping_file';
+export var FIELD_LOCATION_ADDRESS = 'location_address';
+export var FIELD_FUNCTION_NAME = 'function_name';
+export var FIELD_FUNCTION_SYSTEM_NAME = 'function_system_name';
+export var FIELD_FUNCTION_FILE_NAME = 'function_file_name';
+export var FIELD_FLAT = 'flat';
+export var FIELD_FLAT_DIFF = 'flat_diff';
+export var FIELD_CUMULATIVE = 'cumulative';
+export var FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
+export var FIELD_CALLERS = 'callers';
+export var FIELD_CALLEES = 'callees';
+export var Table = /*#__PURE__*/React.memo(function Table(_ref) {
+  var data = _ref.data,
+    total = _ref.total,
+    filtered = _ref.filtered,
+    profileType = _ref.profileType,
+    loading = _ref.loading,
+    isHalfScreen = _ref.isHalfScreen,
+    unit = _ref.unit,
+    metadataMappingFiles = _ref.metadataMappingFiles,
+    error = _ref.error;
+  var currentColorProfile = useCurrentColorProfile();
+  var _useURLState = useURLState('dashboard_items', {
+      alwaysReturnArray: true
+    }),
+    _useURLState2 = _slicedToArray(_useURLState, 1),
+    dashboardItems = _useURLState2[0];
+  var _useURLState3 = useURLState('sandwich_function_name'),
+    _useURLState4 = _slicedToArray(_useURLState3, 2),
+    _ = _useURLState4[0],
+    setSandwichFunctionName = _useURLState4[1];
+  var _useURLState5 = useURLState('color_by'),
+    _useURLState6 = _slicedToArray(_useURLState5, 2),
+    colorBy = _useURLState6[0],
+    setColorBy = _useURLState6[1];
+  var _useParcaContext = useParcaContext(),
+    isDarkMode = _useParcaContext.isDarkMode;
+  var _useProfileViewContex = useProfileViewContext(),
+    compareMode = _useProfileViewContex.compareMode;
+  var MENU_ID = 'table-context-menu';
+  var contextMenuRef = useRef(null);
+  var _useContextMenu = useContextMenu({
+      id: MENU_ID
+    }),
+    show = _useContextMenu.show;
+  var table = useMemo(function () {
+    if (loading || data == null) {
+      return null;
+    }
+    return tableFromIPC(alignedUint8Array(data), {
+      useBigInt: true
     });
-    const { columns, initialSorting, columnVisibility } = tableConfig;
-    const selectSpan = useCallback((span) => {
-        if (!dashboardItems.includes('flamegraph')) {
-            void setSandwichFunctionName(span.trim());
-        }
-    }, [setSandwichFunctionName, dashboardItems]);
-    const onRowClick = useCallback((row) => {
-        // If there is only one dashboard item, we don't want to select a span
-        if (dashboardItems.length <= 1) {
-            return;
-        }
-        selectSpan(row.name);
-    }, [selectSpan, dashboardItems.length]);
-    const onRowContextMenu = useCallback((e, row) => {
-        e.preventDefault();
-        contextMenuRef.current?.setRow(row, () => {
-            show({
-                event: e,
-            });
-        });
-    }, [show]);
-    const rows = useMemo(() => {
-        if (table == null || table.numRows === 0) {
-            return [];
-        }
-        const flatColumn = table.getChild(FIELD_FLAT);
-        const flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
-        const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
-        const cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
-        const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
-        const functionSystemNameColumn = table.getChild(FIELD_FUNCTION_SYSTEM_NAME);
-        const functionFileNameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
-        const mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
-        const locationAddressColumn = table.getChild(FIELD_LOCATION_ADDRESS);
-        const getRow = (i) => {
-            const flat = flatColumn?.get(i) ?? 0n;
-            const flatDiff = flatDiffColumn?.get(i) ?? 0n;
-            const cumulative = cumulativeColumn?.get(i) ?? 0n;
-            const cumulativeDiff = cumulativeDiffColumn?.get(i) ?? 0n;
-            const functionSystemName = functionSystemNameColumn?.get(i) ?? '';
-            const functionFileName = functionFileNameColumn?.get(i) ?? '';
-            const mappingFile = mappingFileColumn?.get(i) ?? '';
-            return {
-                id: i,
-                colorProperty: {
-                    color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
-                    mappingFile,
-                },
-                name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
-                flat,
-                flatDiff,
-                cumulative,
-                cumulativeDiff,
-                functionSystemName,
-                functionFileName,
-                mappingFile,
-            };
-        };
-        const rows = Array.from({ length: table.numRows }, (_, i) => getRow(i));
-        return rows;
-    }, [table, colorByColors, colorBy]);
-    if (loading) {
-        return (_jsx("div", { className: "overflow-clip h-[700px] min-h-[700px]", children: _jsx(TableSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
+  }, [data, loading]);
+  var mappingsList = useMappingList(metadataMappingFiles);
+  var filenamesList = useFilenamesList(table);
+  var mappingsListCount = useMemo(function () {
+    return mappingsList.filter(function (m) {
+      return m !== '';
+    }).length;
+  }, [mappingsList]);
+
+  // If there is only one mapping file, we want to color by filename by default.
+  useEffect(function () {
+    if (mappingsListCount === 1 && colorBy !== 'filename') {
+      setColorBy('filename');
     }
-    if (error != null) {
-        return _jsxs("div", { className: "mx-auto text-center", children: ["Error: ", error.message] });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mappingsListCount]);
+  var _useColorManagement = useColorManagement({
+      isDarkMode: isDarkMode,
+      currentColorProfile: currentColorProfile,
+      mappingsList: mappingsList,
+      filenamesList: filenamesList,
+      colorBy: colorBy
+    }),
+    colorByColors = _useColorManagement.colorByColors;
+  unit = useMemo(function () {
+    var _ref2;
+    return (_ref2 = unit !== null && unit !== void 0 ? unit : profileType === null || profileType === void 0 ? void 0 : profileType.sampleUnit) !== null && _ref2 !== void 0 ? _ref2 : '';
+  }, [unit, profileType === null || profileType === void 0 ? void 0 : profileType.sampleUnit]);
+  var tableConfig = useTableConfiguration({
+    unit: unit,
+    total: total,
+    filtered: filtered,
+    compareMode: compareMode
+  });
+  var columns = tableConfig.columns,
+    initialSorting = tableConfig.initialSorting,
+    columnVisibility = tableConfig.columnVisibility;
+  var selectSpan = useCallback(function (span) {
+    if (!dashboardItems.includes('flamegraph')) {
+      setSandwichFunctionName(span.trim());
     }
-    if (rows.length === 0) {
-        return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
+  }, [setSandwichFunctionName, dashboardItems]);
+  var onRowClick = useCallback(function (row) {
+    // If there is only one dashboard item, we don't want to select a span
+    if (dashboardItems.length <= 1) {
+      return;
     }
-    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: _jsxs("div", { className: "relative", children: [_jsx(TableContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, unit: unit, total: total, totalUnfiltered: total, columnVisibility: columnVisibility }), _jsx("div", { className: "font-robotoMono h-[80vh] w-full", children: _jsx(TableComponent, { data: rows, columns: columns, initialSorting: initialSorting, columnVisibility: columnVisibility, onRowClick: onRowClick, onRowContextMenu: onRowContextMenu, usePointerCursor: dashboardItems.length > 1, estimatedRowHeight: ROW_HEIGHT }) })] }) }, "table-loaded") }));
+    selectSpan(row.name);
+  }, [selectSpan, dashboardItems.length]);
+  var onRowContextMenu = useCallback(function (e, row) {
+    var _contextMenuRef$curre;
+    e.preventDefault();
+    (_contextMenuRef$curre = contextMenuRef.current) === null || _contextMenuRef$curre === void 0 || _contextMenuRef$curre.setRow(row, function () {
+      show({
+        event: e
+      });
+    });
+  }, [show]);
+  var rows = useMemo(function () {
+    if (table == null || table.numRows === 0) {
+      return [];
+    }
+    var flatColumn = table.getChild(FIELD_FLAT);
+    var flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
+    var cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+    var cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
+    var functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
+    var functionSystemNameColumn = table.getChild(FIELD_FUNCTION_SYSTEM_NAME);
+    var functionFileNameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
+    var mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
+    var locationAddressColumn = table.getChild(FIELD_LOCATION_ADDRESS);
+    var getRow = function getRow(i) {
+      var _flatColumn$get, _flatDiffColumn$get, _cumulativeColumn$get, _cumulativeDiffColumn, _functionSystemNameCo, _functionFileNameColu, _mappingFileColumn$ge;
+      var flat = (_flatColumn$get = flatColumn === null || flatColumn === void 0 ? void 0 : flatColumn.get(i)) !== null && _flatColumn$get !== void 0 ? _flatColumn$get : 0n;
+      var flatDiff = (_flatDiffColumn$get = flatDiffColumn === null || flatDiffColumn === void 0 ? void 0 : flatDiffColumn.get(i)) !== null && _flatDiffColumn$get !== void 0 ? _flatDiffColumn$get : 0n;
+      var cumulative = (_cumulativeColumn$get = cumulativeColumn === null || cumulativeColumn === void 0 ? void 0 : cumulativeColumn.get(i)) !== null && _cumulativeColumn$get !== void 0 ? _cumulativeColumn$get : 0n;
+      var cumulativeDiff = (_cumulativeDiffColumn = cumulativeDiffColumn === null || cumulativeDiffColumn === void 0 ? void 0 : cumulativeDiffColumn.get(i)) !== null && _cumulativeDiffColumn !== void 0 ? _cumulativeDiffColumn : 0n;
+      var functionSystemName = (_functionSystemNameCo = functionSystemNameColumn === null || functionSystemNameColumn === void 0 ? void 0 : functionSystemNameColumn.get(i)) !== null && _functionSystemNameCo !== void 0 ? _functionSystemNameCo : '';
+      var functionFileName = (_functionFileNameColu = functionFileNameColumn === null || functionFileNameColumn === void 0 ? void 0 : functionFileNameColumn.get(i)) !== null && _functionFileNameColu !== void 0 ? _functionFileNameColu : '';
+      var mappingFile = (_mappingFileColumn$ge = mappingFileColumn === null || mappingFileColumn === void 0 ? void 0 : mappingFileColumn.get(i)) !== null && _mappingFileColumn$ge !== void 0 ? _mappingFileColumn$ge : '';
+      return {
+        id: i,
+        colorProperty: {
+          color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
+          mappingFile: mappingFile
+        },
+        name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
+        flat: flat,
+        flatDiff: flatDiff,
+        cumulative: cumulative,
+        cumulativeDiff: cumulativeDiff,
+        functionSystemName: functionSystemName,
+        functionFileName: functionFileName,
+        mappingFile: mappingFile
+      };
+    };
+    var rows = Array.from({
+      length: table.numRows
+    }, function (_, i) {
+      return getRow(i);
+    });
+    return rows;
+  }, [table, colorByColors, colorBy]);
+  if (loading) {
+    return /*#__PURE__*/_jsx("div", {
+      className: "overflow-clip h-[700px] min-h-[700px]",
+      children: /*#__PURE__*/_jsx(TableSkeleton, {
+        isHalfScreen: isHalfScreen,
+        isDarkMode: isDarkMode
+      })
+    });
+  }
+  if (error != null) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "mx-auto text-center",
+      children: ["Error: ", error.message]
+    });
+  }
+  if (rows.length === 0) {
+    return /*#__PURE__*/_jsx("div", {
+      className: "mx-auto text-center",
+      children: "Profile has no samples"
+    });
+  }
+  return /*#__PURE__*/_jsx(AnimatePresence, {
+    children: /*#__PURE__*/_jsx(motion.div, {
+      className: "h-full w-full",
+      initial: {
+        display: 'none',
+        opacity: 0
+      },
+      animate: {
+        display: 'block',
+        opacity: 1
+      },
+      transition: {
+        duration: 0.5
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "relative",
+        children: [/*#__PURE__*/_jsx(TableContextMenuWrapper, {
+          ref: contextMenuRef,
+          menuId: MENU_ID,
+          unit: unit,
+          total: total,
+          totalUnfiltered: total,
+          columnVisibility: columnVisibility
+        }), /*#__PURE__*/_jsx("div", {
+          className: "font-robotoMono h-[80vh] w-full",
+          children: /*#__PURE__*/_jsx(TableComponent, {
+            data: rows,
+            columns: columns,
+            initialSorting: initialSorting,
+            columnVisibility: columnVisibility,
+            onRowClick: onRowClick,
+            onRowContextMenu: onRowContextMenu,
+            usePointerCursor: dashboardItems.length > 1,
+            estimatedRowHeight: ROW_HEIGHT
+          })
+        })]
+      })
+    }, "table-loaded")
+  });
 });
-export default Table;
+export default Table;