@parca/profile 0.19.140 → 0.19.142

package/dist/ProfileView/components/ColorStackLegend.js

@@ -1,4 +1,10 @@
-import { Fragment as _Fragment, 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; }
+import { c as _c } from "react-compiler-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.
@@ -11,69 +17,193 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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 { useMemo } from 'react';
+
+import React, { useMemo } from 'react';
 import { Icon } from '@iconify/react';
 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 '../../ProfileFlameGraph/FlameGraphArrow';
 import useMappingList from '../../ProfileFlameGraph/FlameGraphArrow/useMappingList';
-import { useColorBy } from '../../hooks/useColorBy';
 import { useProfileFilters } from './ProfileFilters/useProfileFilters';
-const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
-    const isDarkMode = useAppSelector(selectDarkMode);
-    const currentColorProfile = useCurrentColorProfile();
-    const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
-    const { colorBy } = useColorBy();
-    const { appliedFilters, removeExcludeBinary, excludeBinary } = useProfileFilters();
-    // Get current binary filters from the new ProfileFilters system
-    const currentBinaryFilters = useMemo(() => {
-        return (appliedFilters ?? [])
-            .filter(f => f.type === 'frame' && f.field === 'binary')
-            .map(f => f.value);
-    }, [appliedFilters]);
-    const mappingsList = useMappingList(mappings);
-    const mappingColors = useMemo(() => {
-        const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
-        return colors;
-    }, [isDarkMode, mappingsList, currentColorProfile]);
-    const stackColorArray = useMemo(() => {
-        return Object.entries(mappingColors).sort(([featureA], [featureB]) => {
-            if (featureA === EVERYTHING_ELSE) {
-                return 1;
-            }
-            if (featureB === EVERYTHING_ELSE) {
-                return -1;
-            }
-            return featureA?.localeCompare(featureB ?? '') ?? 0;
-        });
-    }, [mappingColors]);
-    if (stackColorArray.length === 0 && loading === false) {
-        return _jsx(_Fragment, {});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ColorStackLegend = function ColorStackLegend(t0) {
+  var $ = _c(24);
+  var mappings = t0.mappings,
+    t1 = t0.compareMode,
+    loading = t0.loading;
+  var compareMode = t1 === undefined ? false : t1;
+  var isDarkMode = useAppSelector(selectDarkMode);
+  var currentColorProfile = useCurrentColorProfile();
+  var _useUserPreference = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key),
+    _useUserPreference2 = _slicedToArray(_useUserPreference, 1),
+    colorProfileName = _useUserPreference2[0];
+  var _useURLState = useURLState("color_by"),
+    _useURLState2 = _slicedToArray(_useURLState, 1),
+    colorByValue = _useURLState2[0];
+  var colorBy = colorByValue === "binary" || colorByValue === undefined ? "binary" : "filename";
+  var _useProfileFilters = useProfileFilters(),
+    appliedFilters = _useProfileFilters.appliedFilters,
+    removeExcludeBinary = _useProfileFilters.removeExcludeBinary,
+    excludeBinary = _useProfileFilters.excludeBinary;
+  var t2;
+  if ($[0] !== appliedFilters) {
+    t2 = (appliedFilters !== null && appliedFilters !== void 0 ? appliedFilters : []).filter(_temp).map(_temp2);
+    $[0] = appliedFilters;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  var currentBinaryFilters = t2;
+  var mappingsList = useMappingList(mappings);
+  var t3;
+  if ($[2] !== currentColorProfile || $[3] !== isDarkMode || $[4] !== mappingsList) {
+    t3 = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+    $[2] = currentColorProfile;
+    $[3] = isDarkMode;
+    $[4] = mappingsList;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  var colors = t3;
+  var mappingColors = colors;
+  var t4;
+  if ($[6] !== mappingColors) {
+    t4 = Object.entries(mappingColors).sort(_temp3);
+    $[6] = mappingColors;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  var stackColorArray = t4;
+  if (stackColorArray.length === 0 && loading === false) {
+    var _t;
+    if ($[8] === Symbol["for"]("react.memo_cache_sentinel")) {
+      _t = /*#__PURE__*/_jsx(_Fragment, {});
+      $[8] = _t;
+    } else {
+      _t = $[8];
+    }
+    return _t;
+  }
+  if (Object.entries(mappingColors).length === 0) {
+    var _t2;
+    if ($[9] === Symbol["for"]("react.memo_cache_sentinel")) {
+      _t2 = /*#__PURE__*/_jsx(_Fragment, {});
+      $[9] = _t2;
+    } else {
+      _t2 = $[9];
     }
-    if (Object.entries(mappingColors).length === 0) {
-        return _jsx(_Fragment, {});
+    return _t2;
+  }
+  if (colorProfileName === "default" || compareMode) {
+    var _t3;
+    if ($[10] === Symbol["for"]("react.memo_cache_sentinel")) {
+      _t3 = /*#__PURE__*/_jsx(_Fragment, {});
+      $[10] = _t3;
+    } else {
+      _t3 = $[10];
     }
-    if (colorProfileName === 'default' || compareMode) {
-        return _jsx(_Fragment, {});
+    return _t3;
+  }
+  var t5;
+  if ($[11] !== colorBy || $[12] !== currentBinaryFilters || $[13] !== excludeBinary || $[14] !== removeExcludeBinary || $[15] !== stackColorArray) {
+    var _t4;
+    if ($[17] !== colorBy || $[18] !== currentBinaryFilters || $[19] !== excludeBinary || $[20] !== removeExcludeBinary) {
+      _t4 = function _t4(t7) {
+        var _t5 = _slicedToArray(t7, 2),
+          feature = _t5[0],
+          color = _t5[1];
+        var filteringAllowed = feature !== EVERYTHING_ELSE;
+        var isHighlighted = currentBinaryFilters.includes(feature);
+        return /*#__PURE__*/_jsxs("div", {
+          className: cx("flex-no-wrap mb-1 flex w-[19.25%] items-center justify-between text-ellipsis p-1", {
+            "cursor-pointer": filteringAllowed && colorBy === "binary",
+            "bg-gray-200 dark:bg-gray-800": isHighlighted
+          }),
+          onClick: function onClick() {
+            if (!filteringAllowed || isHighlighted || colorBy !== "binary") {
+              return;
+            }
+            removeExcludeBinary(feature);
+          },
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "flex w-11/12 items-center justify-start",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "flex w-5 items-center",
+              children: /*#__PURE__*/_jsx("div", {
+                className: "mr-1 inline-block h-4 w-4 rounded-[4px]",
+                style: {
+                  backgroundColor: color
+                }
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              className: "shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal",
+              children: feature
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: "flex w-1/12 justify-end",
+            children: isHighlighted && /*#__PURE__*/_jsx(Icon, {
+              icon: "radix-icons:cross-circled",
+              onClick: function onClick(e) {
+                excludeBinary(feature);
+                e.stopPropagation();
+              }
+            })
+          })]
+        }, feature);
+      };
+      $[17] = colorBy;
+      $[18] = currentBinaryFilters;
+      $[19] = excludeBinary;
+      $[20] = removeExcludeBinary;
+      $[21] = _t4;
+    } else {
+      _t4 = $[21];
     }
-    return (_jsx("div", { className: "my-4 flex w-full flex-wrap justify-start column-gap-2", children: stackColorArray.map(([feature, color]) => {
-            const filteringAllowed = feature !== EVERYTHING_ELSE;
-            const isHighlighted = currentBinaryFilters.includes(feature);
-            return (_jsxs("div", { className: cx('flex-no-wrap mb-1 flex w-[19.25%] items-center justify-between text-ellipsis p-1', {
-                    'cursor-pointer': filteringAllowed && colorBy === 'binary',
-                    'bg-gray-200 dark:bg-gray-800': isHighlighted,
-                }), onClick: () => {
-                    if (!filteringAllowed || isHighlighted || colorBy !== 'binary') {
-                        return;
-                    }
-                    // Remove the exclude filter for this binary
-                    removeExcludeBinary(feature);
-                }, children: [_jsxs("div", { className: "flex w-11/12 items-center justify-start", children: [_jsx("div", { className: "flex w-5 items-center", children: _jsx("div", { className: "mr-1 inline-block h-4 w-4 rounded-[4px]", style: { backgroundColor: color } }) }), _jsx("div", { className: "shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal", children: feature })] }), _jsx("div", { className: "flex w-1/12 justify-end", children: isHighlighted && (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
-                                // Find and remove the filter for this binary
-                                excludeBinary(feature);
-                                e.stopPropagation();
-                            } })) })] }, feature));
-        }) }));
+    t5 = stackColorArray.map(_t4);
+    $[11] = colorBy;
+    $[12] = currentBinaryFilters;
+    $[13] = excludeBinary;
+    $[14] = removeExcludeBinary;
+    $[15] = stackColorArray;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  var t6;
+  if ($[22] !== t5) {
+    t6 = /*#__PURE__*/_jsx("div", {
+      className: "my-4 flex w-full flex-wrap justify-start column-gap-2",
+      children: t5
+    });
+    $[22] = t5;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  return t6;
 };
 export default ColorStackLegend;
+function _temp(f) {
+  return f.type === "frame" && f.field === "binary";
+}
+function _temp2(f_0) {
+  return f_0.value;
+}
+function _temp3(t0, t1) {
+  var _featureA$localeCompa;
+  var _t6 = _slicedToArray(t0, 1),
+    featureA = _t6[0];
+  var _t7 = _slicedToArray(t1, 1),
+    featureB = _t7[0];
+  if (featureA === EVERYTHING_ELSE) {
+    return 1;
+  }
+  if (featureB === EVERYTHING_ELSE) {
+    return -1;
+  }
+  return (_featureA$localeCompa = featureA === null || featureA === void 0 ? void 0 : featureA.localeCompare(featureB !== null && featureB !== void 0 ? featureB : "")) !== null && _featureA$localeCompa !== void 0 ? _featureA$localeCompa : 0;
+}

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

@@ -1,4 +1,3 @@
-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.
@@ -11,6 +10,7 @@ import { jsx as _jsx, Fragment as _Fragment } 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 { Profiler } from 'react';
 import { ConditionalWrapper } from '@parca/components';
 import ProfileFlameChart from '../../../ProfileFlameChart';
@@ -18,30 +18,89 @@ import ProfileFlameGraph from '../../../ProfileFlameGraph';
 import Sandwich from '../../../Sandwich';
 import { SourceView } from '../../../SourceView';
 import { Table } from '../../../Table';
-export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, samplesData, topTableData, sourceData, sandwichData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, perf, queryClient, onSwitchToFifteenMinutes, }) => {
-    switch (type) {
-        case 'flamegraph':
-            return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
-                    id: 'flameGraph',
-                    onRender: perf?.onRender ?? (() => { }),
-                }, children: _jsx(ProfileFlameGraph, { curPathArrow: curPathArrow, setNewCurPathArrow: setNewCurPathArrow, arrow: flamegraphData?.arrow, 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, profileSource: profileSource }) }));
-        case 'flamechart':
-            return (_jsx(ProfileFlameChart, { samplesData: samplesData, queryClient: queryClient, profileSource: profileSource, width: dimensions?.width !== undefined
-                    ? isHalfScreen
-                        ? (dimensions.width - 54) / 2
-                        : dimensions.width - 16
-                    : 0, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), isHalfScreen: isHalfScreen, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading, onSwitchToFifteenMinutes: onSwitchToFifteenMinutes }));
-        case 'table':
-            return topTableData != null ? (_jsx(Table, { error: topTableData.error, total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), isHalfScreen: isHalfScreen, metadataMappingFiles: flamegraphData.metadataMappingFiles })) : (_jsx(_Fragment, {}));
-        case 'sandwich':
-            return topTableData != null ? (_jsx(Sandwich, { profileSource: profileSource, sandwichData: sandwichData })) : (_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, {});
-    }
-};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export var getDashboardItem = function getDashboardItem(_ref) {
+  var _perf$onRender, _topTableData$arrow;
+  var type = _ref.type,
+    isHalfScreen = _ref.isHalfScreen,
+    dimensions = _ref.dimensions,
+    flamegraphData = _ref.flamegraphData,
+    samplesData = _ref.samplesData,
+    topTableData = _ref.topTableData,
+    sourceData = _ref.sourceData,
+    sandwichData = _ref.sandwichData,
+    profileSource = _ref.profileSource,
+    total = _ref.total,
+    filtered = _ref.filtered,
+    curPathArrow = _ref.curPathArrow,
+    setNewCurPathArrow = _ref.setNewCurPathArrow,
+    perf = _ref.perf,
+    queryClient = _ref.queryClient,
+    onSwitchToFifteenMinutes = _ref.onSwitchToFifteenMinutes;
+  switch (type) {
+    case 'flamegraph':
+      return /*#__PURE__*/_jsx(ConditionalWrapper, {
+        condition: (perf === null || perf === void 0 ? void 0 : perf.onRender) != null,
+        WrapperComponent: Profiler,
+        wrapperProps: {
+          id: 'flameGraph',
+          onRender: (_perf$onRender = perf === null || perf === void 0 ? void 0 : perf.onRender) !== null && _perf$onRender !== void 0 ? _perf$onRender : function () {}
+        },
+        children: /*#__PURE__*/_jsx(ProfileFlameGraph, {
+          curPathArrow: curPathArrow,
+          setNewCurPathArrow: setNewCurPathArrow,
+          arrow: flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.arrow,
+          total: total,
+          filtered: filtered,
+          profileType: profileSource === null || profileSource === void 0 ? void 0 : profileSource.ProfileType(),
+          loading: flamegraphData.loading,
+          error: flamegraphData.error,
+          isHalfScreen: isHalfScreen,
+          width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined ? isHalfScreen ? (dimensions.width - 54) / 2 : dimensions.width - 16 : 0,
+          metadataMappingFiles: flamegraphData.metadataMappingFiles,
+          metadataLoading: flamegraphData.metadataLoading,
+          profileSource: profileSource
+        })
+      });
+    case 'flamechart':
+      return /*#__PURE__*/_jsx(ProfileFlameChart, {
+        samplesData: samplesData,
+        queryClient: queryClient,
+        profileSource: profileSource,
+        width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined ? isHalfScreen ? (dimensions.width - 54) / 2 : dimensions.width - 16 : 0,
+        total: total,
+        filtered: filtered,
+        profileType: profileSource === null || profileSource === void 0 ? void 0 : profileSource.ProfileType(),
+        isHalfScreen: isHalfScreen,
+        metadataMappingFiles: flamegraphData.metadataMappingFiles,
+        metadataLoading: flamegraphData.metadataLoading,
+        onSwitchToFifteenMinutes: onSwitchToFifteenMinutes
+      });
+    case 'table':
+      return topTableData != null ? /*#__PURE__*/_jsx(Table, {
+        error: topTableData.error,
+        total: total,
+        filtered: filtered,
+        loading: topTableData.loading,
+        data: (_topTableData$arrow = topTableData.arrow) === null || _topTableData$arrow === void 0 ? void 0 : _topTableData$arrow.record,
+        unit: topTableData.unit,
+        profileType: profileSource === null || profileSource === void 0 ? void 0 : profileSource.ProfileType(),
+        isHalfScreen: isHalfScreen,
+        metadataMappingFiles: flamegraphData.metadataMappingFiles
+      }) : /*#__PURE__*/_jsx(_Fragment, {});
+    case 'sandwich':
+      return topTableData != null ? /*#__PURE__*/_jsx(Sandwich, {
+        profileSource: profileSource,
+        sandwichData: sandwichData
+      }) : /*#__PURE__*/_jsx(_Fragment, {});
+    case 'source':
+      return sourceData != null ? /*#__PURE__*/_jsx(SourceView, {
+        loading: sourceData.loading,
+        data: sourceData.data,
+        total: total,
+        filtered: filtered
+      }) : /*#__PURE__*/_jsx(_Fragment, {});
+    default:
+      return /*#__PURE__*/_jsx(_Fragment, {});
+  }
+};

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

@@ -1,20 +1,112 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
+import { c as _c } from "react-compiler-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 cx from 'classnames';
-import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
+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);
-        }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var DashboardLayout = function DashboardLayout(t0) {
+  var $ = _c(11);
+  var getDashboardItemByType = t0.getDashboardItemByType,
+    actionButtons = t0.actionButtons;
+  var _useDashboard = useDashboard(),
+    dashboardItems = _useDashboard.dashboardItems,
+    setDashboardItems = _useDashboard.setDashboardItems,
+    isMultiPanelView = _useDashboard.isMultiPanelView;
+  var t1;
+  if ($[0] !== dashboardItems || $[1] !== setDashboardItems) {
+    t1 = function t1(result) {
+      var destination = result.destination,
+        source = result.source,
+        draggableId = result.draggableId;
+      if (Boolean(destination) && (destination === null || destination === void 0 ? void 0 : destination.index) !== source.index) {
+        var targetItem = draggableId;
+        var otherItems = dashboardItems.filter(function (item) {
+          return item !== targetItem;
+        });
+        var newDashboardItems = destination.index < source.index ? [targetItem].concat(_toConsumableArray(otherItems)) : [].concat(_toConsumableArray(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] })) }) }));
-};
+    $[0] = dashboardItems;
+    $[1] = setDashboardItems;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  var onDragEnd = t1;
+  var t2;
+  if ($[3] !== actionButtons || $[4] !== dashboardItems || $[5] !== getDashboardItemByType || $[6] !== isMultiPanelView) {
+    t2 = /*#__PURE__*/_jsx(Droppable, {
+      droppableId: "droppable",
+      direction: "horizontal",
+      children: function children(provided) {
+        return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+          ref: provided.innerRef,
+          className: cx("grid w-full gap-2", isMultiPanelView ? "grid-cols-2 mt-4" : "grid-cols-1")
+        }, provided.droppableProps), {}, {
+          children: [dashboardItems.map(function (dashboardItem, index) {
+            return /*#__PURE__*/_jsx(Draggable, {
+              draggableId: dashboardItem,
+              index: index,
+              isDragDisabled: !isMultiPanelView,
+              children: function children(provided_0, snapshot) {
+                return /*#__PURE__*/_jsx(VisualizationContainer, {
+                  provided: provided_0,
+                  snapshot: snapshot,
+                  dashboardItem: dashboardItem,
+                  getDashboardItemByType: getDashboardItemByType,
+                  isMultiPanelView: isMultiPanelView,
+                  index: index,
+                  actionButtons: actionButtons
+                });
+              }
+            }, dashboardItem);
+          }), provided.placeholder]
+        }));
+      }
+    });
+    $[3] = actionButtons;
+    $[4] = dashboardItems;
+    $[5] = getDashboardItemByType;
+    $[6] = isMultiPanelView;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  var t3;
+  if ($[8] !== onDragEnd || $[9] !== t2) {
+    t3 = /*#__PURE__*/_jsx(DragDropContext, {
+      onDragEnd: onDragEnd,
+      children: t2
+    });
+    $[8] = onDragEnd;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+};